From 864212b0f28d33daede5f4767aa03efa37c219ae Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 18 Aug 2021 13:43:12 -0400 Subject: [PATCH 01/10] fix(alert): AlertButton role now has correct types (#23791) --- core/src/components/alert/alert-interface.ts | 2 +- core/src/components/alert/readme.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index 898ca322e8..370943d0a7 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -44,7 +44,7 @@ export interface AlertInputAttributes extends JSXBase.InputHTMLAttributes boolean | void | {[key: string]: any}; } diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index ab4dbc9a79..a7e30e6f61 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -48,7 +48,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t ```typescript interface AlertButton { text: string; - role?: string; + role?: 'cancel' | 'destructive' | string; cssClass?: string | string[]; handler?: (value: any) => boolean | void | {[key: string]: any}; } From 02409f2abfa8acbab05d0f1217b9d1c13721746e Mon Sep 17 00:00:00 2001 From: Toby Smith Date: Mon, 23 Aug 2021 14:38:27 +0100 Subject: [PATCH 02/10] fix(reorder-group): dragging reorder item to bottom no longer gives out of bounds index (#23797) resolves #23796 --- core/src/components/reorder-group/reorder-group.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index d3f43fd133..62b3bdb80c 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -245,17 +245,16 @@ export class ReorderGroup implements ComponentInterface { private itemIndexForTop(deltaY: number): number { const heights = this.cachedHeights; - let i = 0; // TODO: since heights is a sorted array of integers, we can do // speed up the search using binary search. Remember that linear-search is still // faster than binary-search for small arrays (<64) due CPU branch misprediction. - for (i = 0; i < heights.length; i++) { + for (let i = 0; i < heights.length; i++) { if (heights[i] > deltaY) { - break; + return i; } } - return i; + return heights.length - 1; } /********* DOM WRITE ********* */ From 9932e26a2ef28317bc85761e71a8fc4d881b8ae8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Aug 2021 10:25:12 -0400 Subject: [PATCH 03/10] fix(label): label now only takes up as much space as needed when slotted (#23807) resolves #23806 --- core/src/components/item/item.scss | 2 +- .../components/item/test/alignment/index.html | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 882cce3023..1dbc6572e8 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -308,7 +308,7 @@ button, a { z-index: 1; } -::slotted(ion-label) { +::slotted(ion-label:not([slot="end"])) { flex: 1; } diff --git a/core/src/components/item/test/alignment/index.html b/core/src/components/item/test/alignment/index.html index 646e9dc807..0ac53a9ee3 100644 --- a/core/src/components/item/test/alignment/index.html +++ b/core/src/components/item/test/alignment/index.html @@ -118,6 +118,25 @@ + + End Labels + + Time + + + + From + + + + Destination + + Madison, WI + Atlanta, GA + + + + From 9317f6eb41032b4fedc78a135898005eb18ecda8 Mon Sep 17 00:00:00 2001 From: Sarah Drasner Date: Wed, 25 Aug 2021 15:50:33 -0600 Subject: [PATCH 04/10] docs(picker): add a simple picker example for Vue (#23818) There was previously no example for a vue picker, this adds one. closes #2053 --- core/src/components/picker/usage/vue.md | 53 +++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 core/src/components/picker/usage/vue.md diff --git a/core/src/components/picker/usage/vue.md b/core/src/components/picker/usage/vue.md new file mode 100644 index 0000000000..6383262d41 --- /dev/null +++ b/core/src/components/picker/usage/vue.md @@ -0,0 +1,53 @@ +```vue + + + +``` From 50b88b24c28bb749bbdb0e6ae0bebda5a27e249f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 25 Aug 2021 18:57:26 -0400 Subject: [PATCH 05/10] chore(): run build to update picker readme (#23822) --- core/src/components/picker/readme.md | 57 ++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index e1f001b448..57c1d8ab65 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -159,6 +159,63 @@ const PickerExample: React.FC = () => { ``` +### Vue + +```vue + + + +``` + + ## Properties From 3c442228ff746165fd823687a2661a24edd08820 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 26 Aug 2021 10:40:48 -0400 Subject: [PATCH 06/10] fix(vue): router guards are now fired correctly when written in a component (#23821) resolves #23820 --- packages/vue-router/src/viewStacks.ts | 9 ++++ .../vue/src/components/IonRouterOutlet.ts | 2 +- .../vue/test-app/tests/unit/routing.spec.ts | 48 +++++++++++++++++++ 3 files changed, 58 insertions(+), 1 deletion(-) diff --git a/packages/vue-router/src/viewStacks.ts b/packages/vue-router/src/viewStacks.ts index 1ef105125d..7fd5c331da 100644 --- a/packages/vue-router/src/viewStacks.ts +++ b/packages/vue-router/src/viewStacks.ts @@ -20,6 +20,14 @@ export const createViewStacks = (router: Router) => { const registerIonPage = (viewItem: ViewItem, ionPage: HTMLElement) => { viewItem.ionPageElement = ionPage; viewItem.ionRoute = true; + + /** + * This is needed otherwise Vue Router + * will not consider this component mounted + * and will not run route guards that + * are written in the component. + */ + viewItem.matchedRoute.instances = { default: viewItem.vueComponentRef.value }; } const findViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: number, useDeprecatedRouteSetup: boolean = false) => { @@ -202,6 +210,7 @@ export const createViewStacks = (router: Router) => { viewItem.mount = false; viewItem.ionPageElement = undefined; viewItem.ionRoute = false; + viewItem.matchedRoute.instances = {}; } } diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts index 4eea4a8915..ffbad4d255 100644 --- a/packages/vue/src/components/IonRouterOutlet.ts +++ b/packages/vue/src/components/IonRouterOutlet.ts @@ -63,7 +63,7 @@ export const IonRouterOutlet = defineComponent({ * page/1 to page/2 would not cause this callback * to fire since the matchedRouteRef was the same. */ - watch([route, matchedRouteRef], ([currentRoute, currentMatchedRouteRef], [_, previousMatchedRouteRef]) => { + watch(() => [route, matchedRouteRef.value], ([currentRoute, currentMatchedRouteRef], [_, previousMatchedRouteRef]) => { /** * If the matched route ref has changed, * then we need to set up a new view item. diff --git a/packages/vue/test-app/tests/unit/routing.spec.ts b/packages/vue/test-app/tests/unit/routing.spec.ts index 0a14f980aa..ae510fc22e 100644 --- a/packages/vue/test-app/tests/unit/routing.spec.ts +++ b/packages/vue/test-app/tests/unit/routing.spec.ts @@ -393,4 +393,52 @@ describe('Routing', () => { expect(page.props()).toEqual({ id: '2' }); }); + + it('should fire guard written in a component', async () => { + const beforeRouteEnterSpy = jest.fn(); + const beforeRouteLeaveSpy = jest.fn(); + const Page = { + beforeRouteEnter() { + beforeRouteEnterSpy(); + }, + beforeRouteLeave() { + beforeRouteLeaveSpy(); + }, + components: { IonPage }, + template: `` + } + const Page2 = { + components: { IonPage }, + template: `` + } + + const router = createRouter({ + history: createWebHistory(process.env.BASE_URL), + routes: [ + { path: '/page', component: Page }, + { path: '/page2', component: Page2 }, + { path: '/', redirect: '/page' } + ] + }); + + router.push('/'); + await router.isReady(); + const wrapper = mount(App, { + global: { + plugins: [router, IonicVue] + } + }); + + expect(beforeRouteEnterSpy).toHaveBeenCalledTimes(1); + + router.push('/page2'); + await waitForRouter(); + + expect(beforeRouteLeaveSpy).toHaveBeenCalledTimes(1); + + router.back(); + await waitForRouter(); + + expect(beforeRouteEnterSpy).toHaveBeenCalledTimes(2); + }); }); From 33f0bcd43765ab43f2f7f1ff9cc3b618a7966d63 Mon Sep 17 00:00:00 2001 From: Ikko Ashimine Date: Mon, 30 Aug 2021 23:15:12 +0900 Subject: [PATCH 07/10] chore(slides): fix typo in image slides example (#23838) --- core/src/components/slides/test/image/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/slides/test/image/index.html b/core/src/components/slides/test/image/index.html index 7ee88c65d8..695a1eb12b 100644 --- a/core/src/components/slides/test/image/index.html +++ b/core/src/components/slides/test/image/index.html @@ -127,7 +127,7 @@ console.log('slide transition start', e) }); slides.addEventListener('ionSlideTransitionEnd', function (e) { - console.log('slide transistion end', e) + console.log('slide transition end', e) }); slides.addEventListener('ionSlideDrag', function (e) { console.log('slide drag', e) From 11fda41420343886dabd97096690be38f1c40524 Mon Sep 17 00:00:00 2001 From: William Martin Date: Tue, 31 Aug 2021 17:52:47 -0400 Subject: [PATCH 08/10] feat(slides): add IonicSlides module for Swiper migration, deprecate ion-slides (#23844) backports #23447 --- angular/src/index.ts | 2 +- core/src/components/slides/IonicSwiper.ts | 126 ++++++++++++++++++++++ core/src/components/slides/readme.md | 37 +++++++ core/src/components/slides/slides.tsx | 4 + core/src/css/ionic-swiper.scss | 109 +++++++++++++++++++ core/src/index.ts | 1 + packages/react/src/components/index.ts | 1 + packages/vue/src/index.ts | 3 + 8 files changed, 282 insertions(+), 1 deletion(-) create mode 100644 core/src/components/slides/IonicSwiper.ts create mode 100644 core/src/css/ionic-swiper.scss diff --git a/angular/src/index.ts b/angular/src/index.ts index a77a85614a..c116ef2076 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -43,7 +43,7 @@ export * from './types/ionic-lifecycle-hooks'; export { IonicModule } from './ionic-module'; // UTILS -export { IonicSafeString, getPlatforms, isPlatform, createAnimation } from '@ionic/core'; +export { IonicSafeString, getPlatforms, isPlatform, createAnimation, IonicSwiper } from '@ionic/core'; // CORE TYPES export { diff --git a/core/src/components/slides/IonicSwiper.ts b/core/src/components/slides/IonicSwiper.ts new file mode 100644 index 0000000000..da107b5af1 --- /dev/null +++ b/core/src/components/slides/IonicSwiper.ts @@ -0,0 +1,126 @@ +import { addEventListener, raf, removeEventListener } from '../../utils/helpers'; + +/** + * This is a plugin for Swiper that allows it to work + * with Ionic Framework and the routing integrations. + * Without this plugin, Swiper would be incapable of correctly + * determining the dimensions of the slides component as + * each view is initially hidden before transitioning in. + */ +const setupSwiperInIonic = (swiper: any, watchForIonPageChanges = true) => { + if (typeof (window as any) === 'undefined') { return; } + + const swiperEl = swiper.el; + const ionPage = swiperEl.closest('.ion-page'); + + if (!ionPage) { + if (watchForIonPageChanges) { + + /** + * If no ion page found, it is possible + * that we are in the overlay setup step + * where the inner component has been + * created but not attached to the DOM yet. + * If so, wait for the .ion-page class to + * appear on the root div and re-run setup. + */ + const rootNode = swiperEl.getRootNode(); + if (rootNode.tagName === 'DIV') { + const mo = new MutationObserver((m: MutationRecord[]) => { + const mutation = m[0]; + const wasEmpty = mutation.oldValue === null; + const hasIonPage = rootNode.classList.contains('ion-page'); + + /** + * Now that we have an .ion-page class + * we can safely attempt setup again. + */ + if (wasEmpty && hasIonPage) { + mo.disconnect(); + + /** + * Set false here so we do not + * get infinite loops + */ + setupSwiperInIonic(swiper, false); + } + }); + + mo.observe(rootNode, { + attributeFilter: ['class'], + attributeOldValue: true + }); + } + } + return; + } + + /** + * If using slides in a modal or + * popover we need to wait for the + * overlay to be shown as these components + * are hidden when they are initially created. + */ + const modalOrPopover = swiperEl.closest('ion-modal, ion-popover'); + if (modalOrPopover) { + const eventName = modalOrPopover.tagName === 'ION-MODAL' ? 'ionModalWillPresent' : 'ionPopoverWillPresent'; + const overlayCallback = () => { + /** + * We need an raf here so the update + * is fired one tick after the overlay is shown. + */ + raf(() => { + swiperEl.swiper.update(); + removeEventListener(modalOrPopover, eventName, overlayCallback); + }); + } + addEventListener(modalOrPopover, eventName, overlayCallback); + } else { + /** + * If using slides in a page + * we need to wait for the ion-page-invisible + * class to be removed so Swiper can correctly + * compute the dimensions of the slides. + */ + const mo = new MutationObserver((m: MutationRecord[]) => { + const mutation = m[0]; + const wasPageHidden = mutation.oldValue?.includes('ion-page-invisible'); + const isPageHidden = ionPage.classList.contains('ion-page-invisible'); + + /** + * Only update Swiper if the page was + * hidden but is no longer hidden. + */ + if (!isPageHidden && isPageHidden !== wasPageHidden) { + swiperEl.swiper.update(); + } + }); + + mo.observe(ionPage, { + attributeFilter: ['class'], + attributeOldValue: true + }); + } + + /** + * We also need to listen for the appload event + * which is emitted by Stencil in the + * event that Swiper is being used on the + * view that is rendered initially. + */ + const onAppLoad = () => { + swiperEl.swiper.update(); + removeEventListener(window, 'appload', onAppLoad); + } + + addEventListener(window, 'appload', onAppLoad); +} + +export const IonicSwiper = { + name: 'ionic', + on: { + afterInit(swiper: any) { + setupSwiperInIonic(swiper); + } + } +} diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md index 6ab54c5620..54fcaae015 100644 --- a/core/src/components/slides/readme.md +++ b/core/src/components/slides/readme.md @@ -3,6 +3,7 @@ The Slides component is a multi-section container. Each section can be swiped or dragged between. It contains any number of [Slide](../slide) components. +This guide will cover migration from the deprecated `ion-slides` component to the framework-specific solutions that Swiper.js provides as well as the existing `ion-slides` API for developers who are still using that component. Adopted from Swiper.js: The most modern mobile touch slider and framework with hardware accelerated transitions. @@ -15,6 +16,42 @@ http://www.idangero.us/ Licensed under MIT +## Migration + +With the release of Ionic Framework v6, the Ionic Team has deprecated the `ion-slides` and `ion-slide` components in favor of using the official framework integrations provided by Swiper. Fear not! You will still be able to use slides components in your application. Additionally, because you are still using Swiper, the functionality of your slides component should remain exactly the same. + +### What is Swiper.js? + +Swiper.js is the carousel/slider library that powers `ion-slides`. The library is bundled automatically with all versions of Ionic Framework. When Ionic Framework v4. was first released, Swiper did not have framework specific integrations of its library, so `ion-slides` was created as a way of bridging the gap between the core Swiper library and frameworks such as Angular, React, and Vue. + +Since then, the Swiper team has released framework specific integrations of Swiper.js for Angular, React, Vue, and more! + +### What are the benefits of this change? + +There are several benefits for members of the Ionic Framework community. By using the official Swiper.js framework integrations: + +- Developers can now be in control of the exact version of Swiper.js they want to use. Previously, developers would need to rely on the Ionic Team to update the version internally and release a new version of Ionic Framework. +- The Ionic Team can spend more time triaging and fixing other non-slides issues, speeding up our development process so we can make the framework work better for our community. +- Developers should experience fewer bugs. +- Application bundle sizes can shrink in some cases. By installing Swiper.js as a 3rd party dependency in your application, bundlers such as Webpack or Rollup should be able to treeshake your code better. +- Developers have access to new features that they previously did not have when using `ion-slides`. + +### How long do I have to migrate? + +We plan to remove `ion-slides` and `ion-slide` in Ionic Framework v7. `ion-slides` and `ion-slide` will continue to be available for the entire Ionic Framework v6 lifecycle but will only receive critical bug fixes. + +### How do I migrate? + +Since the underlying technology that powers your slides is the same, the migration process is easy! Follow the guides below for your specific framework. + +Migration for Ionic Angular users: https://ionicframework.com/docs/angular/slides +Migration for Ionic React users: https://ionicframework.com/docs/react/slides +Migration for Ionic Vue users: https://ionicframework.com/docs/vue/slides + +------ + +The following documentation applies to the `ion-slides` component. + ## Custom Animations By default, Ionic slides use the built-in `slide` animation effect. Custom animations can be provided via the `options` property. Examples of other animations can be found below. diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index 06b88f1df6..fb834a16ae 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -136,6 +136,10 @@ export class Slides implements ComponentInterface { */ @Event() ionSlideTouchEnd!: EventEmitter; + componentWillLoad() { + console.warn(`[Deprecation Warning]: ion-slides has been deprecated and will be removed in Ionic Framework v7.0. We recommend using the framework-specific integrations that Swiper.js provides, allowing for faster bug fixes and an improved developer experience. See https://ionicframework.com/docs/api/slides#migration for more information including migration steps.`); + } + connectedCallback() { // tslint:disable-next-line: strict-type-predicates if (typeof MutationObserver !== 'undefined') { diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss new file mode 100644 index 0000000000..8ebba40c5b --- /dev/null +++ b/core/src/css/ionic-swiper.scss @@ -0,0 +1,109 @@ +@import "../themes/ionic.skip-warns.scss"; +@import "../components/slides/slides.ios.vars.scss"; + +// Slides +// -------------------------------------------------- + +.swiper-container { + + // These values are the same for iOS and MD + // We just do not add a .md or .ios class beforehand + // so the styles are easier to override by the user. + --bullet-background: #{$slides-ios-bullet-background}; + --bullet-background-active: #{$slides-ios-bullet-background-active}; + --progress-bar-background: #{$slides-ios-progress-bar-background}; + --progress-bar-background-active: #{$slides-ios-progress-bar-background-active}; + --scroll-bar-background: #{$slides-ios-scroll-bar-background}; + --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background}; + /** + * @prop --bullet-background: Background of the pagination bullets + * @prop --bullet-background-active: Background of the active pagination bullet + * + * @prop --progress-bar-background: Background of the pagination progress-bar + * @prop --progress-bar-background-active: Background of the active pagination progress-bar + * + * @prop --scroll-bar-background: Background of the pagination scroll-bar + * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar + */ + display: block; + + user-select: none; +} + +// Pagination Bullets +// -------------------------------------------------- + +.swiper-pagination-bullet { + background: var(--bullet-background); +} + +.swiper-pagination-bullet-active { + background: var(--bullet-background-active); +} + + +// Pagination Progress Bar +// -------------------------------------------------- + +.swiper-pagination-progressbar { + background: var(--progress-bar-background); +} + +.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + background: var(--progress-bar-background-active); +} + +// Scrollbar +// -------------------------------------------------- + +.swiper-scrollbar { + background: var(--scroll-bar-background); +} + +.swiper-scrollbar-drag { + background: var(--scroll-bar-background-active); +} + +// Slide +// -------------------------------------------------- + +ion-slide { + display: block; + + width: 100%; + height: 100%; +} + +.slide-zoom { + display: block; + + width: 100%; + + text-align: center; +} + +.swiper-slide { + + // Center slide text vertically + display: flex; + position: relative; + + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + font-size: 18px; + + text-align: center; + box-sizing: border-box; +} + +.swiper-slide img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; +} diff --git a/core/src/index.ts b/core/src/index.ts index e833077ab2..f493a61802 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -13,3 +13,4 @@ export { IonicConfig, getMode, setupConfig } from './utils/config'; export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD } from './components/nav/constants'; export { menuController } from './utils/menu-controller'; export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController } from './utils/overlays'; +export { IonicSwiper } from './components/slides/IonicSwiper'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 808f80ac88..0d76ff637a 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -33,6 +33,7 @@ export { mdTransitionAnimation, NavComponentWithProps, setupConfig, + IonicSwiper, SpinnerTypes, diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 1dd6a55697..baa0d7cf0c 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -72,6 +72,9 @@ export { // Hardware Back Button BackButtonEvent, + // Swiper + IonicSwiper, + SpinnerTypes, ActionSheetOptions, From a0229bc7b2edb061510de0f2042e7910d04accc0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 31 Aug 2021 18:20:29 -0400 Subject: [PATCH 09/10] refactor(virtual-scroll): deprecate virtual scroll in favor of JS framework solutions (#23854) --- core/src/components/virtual-scroll/readme.md | 17 +++++++++++++++++ .../virtual-scroll/virtual-scroll.tsx | 4 ++++ 2 files changed, 21 insertions(+) diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index d750870ab7..f58fa33c82 100644 --- a/core/src/components/virtual-scroll/readme.md +++ b/core/src/components/virtual-scroll/readme.md @@ -7,6 +7,23 @@ consist of items, headers, and footers. For performance reasons, not every recor in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls. +This guide will go over the recommended virtual scrolling packages for each framework integration as well as documentation for the deprecated `ion-virtual-scroll` component for Ionic Angular. We recommend using the framework-specific solutions listed below, but the `ion-virtual-scroll` documentation is available below for developers who are still using that component. + +## Angular + +For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll). + +## React + +For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll). + +## Vue + +For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll). + +------ + +The following documentation applies to the `ion-virtual-scroll` component. ## Approximate Widths and Heights diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index 7633f92307..cc8cac41a7 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -153,6 +153,10 @@ export class VirtualScroll implements ComponentInterface { this.updateVirtualScroll(); } + componentWillLoad() { + console.warn(`[Deprecation Warning]: ion-virtual-scroll has been deprecated and will be removed in Ionic Framework v7.0. See https://ionicframework.com/docs/angular/virtual-scroll for migration steps.`); + } + async connectedCallback() { const contentEl = this.el.closest('ion-content'); if (!contentEl) { From a12d146c3e7f8214b14eae581f49d7c2025cc3bf Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 1 Sep 2021 09:43:23 -0400 Subject: [PATCH 10/10] 5.7.0 --- CHANGELOG.md | 21 +++++++++++++++++++++ angular/package-lock.json | 18 +++++++++--------- angular/package.json | 4 ++-- core/package-lock.json | 4 ++-- core/package.json | 2 +- docs/package.json | 2 +- packages/angular-server/package-lock.json | 18 +++++++++--------- packages/angular-server/package.json | 4 ++-- packages/react-router/package.json | 8 ++++---- packages/react/package.json | 4 ++-- packages/vue-router/package-lock.json | 6 +++--- packages/vue-router/package.json | 2 +- packages/vue/package-lock.json | 18 +++++++++--------- packages/vue/package.json | 4 ++-- 14 files changed, 68 insertions(+), 47 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index da67aee973..b344757192 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,24 @@ +# [5.7.0 Potassium](https://github.com/ionic-team/ionic/compare/v5.6.14...v5.7.0) (2021-09-01) + + +### Bug Fixes + +* **alert:** AlertButton role now has correct types ([#23791](https://github.com/ionic-team/ionic/issues/23791)) ([864212b](https://github.com/ionic-team/ionic/commit/864212b0f28d33daede5f4767aa03efa37c219ae)) +* **label:** label now only takes up as much space as needed when slotted ([#23807](https://github.com/ionic-team/ionic/issues/23807)) ([9932e26](https://github.com/ionic-team/ionic/commit/9932e26a2ef28317bc85761e71a8fc4d881b8ae8)), closes [#23806](https://github.com/ionic-team/ionic/issues/23806) +* **reorder-group:** dragging reorder item to bottom no longer gives out of bounds index ([#23797](https://github.com/ionic-team/ionic/issues/23797)) ([02409f2](https://github.com/ionic-team/ionic/commit/02409f2abfa8acbab05d0f1217b9d1c13721746e)), closes [#23796](https://github.com/ionic-team/ionic/issues/23796) +* **vue:** router guards are now fire correctly when written in a component ([#23821](https://github.com/ionic-team/ionic/issues/23821)) ([3c44222](https://github.com/ionic-team/ionic/commit/3c442228ff746165fd823687a2661a24edd08820)), closes [#23820](https://github.com/ionic-team/ionic/issues/23820) + + +### Features + +* **slides:** add IonicSlides module for Swiper migration, deprecate ion-slides ([#23844](https://github.com/ionic-team/ionic/issues/23844)) ([11fda41](https://github.com/ionic-team/ionic/commit/11fda41420343886dabd97096690be38f1c40524)), closes [#23447](https://github.com/ionic-team/ionic/issues/23447) + +### Code Refactoring + +* **virtual-scroll:** deprecated virtual scroll in favor of solutions provided by JS frameworks ([#23854](https://github.com/ionic-team/ionic-framework/pull/23854)) ([a0229bc](https://github.com/ionic-team/ionic-framework/commit/a0229bc7b2edb061510de0f2042e7910d04accc0)) + + + ## [5.6.14](https://github.com/ionic-team/ionic/compare/v5.6.13...v5.6.14) (2021-08-18) diff --git a/angular/package-lock.json b/angular/package-lock.json index 1b7492bb40..d161e7a4a3 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "5.6.14", + "version": "5.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "5.6.14", + "version": "5.7.0", "license": "MIT", "dependencies": { - "@ionic/core": "5.6.13", + "@ionic/core": "5.6.14", "tslib": "^1.9.3" }, "devDependencies": { @@ -204,9 +204,9 @@ } }, "node_modules/@ionic/core": { - "version": "5.6.13", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.13.tgz", - "integrity": "sha512-stN80Q4zdLT7pmUoNNqp+lVjTIhcLSjDN2rzP/gYz8YAkz1L5AB2CkudD5VHWFTBbAEsylih34gAMOrygVNoJQ==", + "version": "5.6.14", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz", + "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==", "dependencies": { "@stencil/core": "^2.4.0", "ionicons": "^5.5.3", @@ -5156,9 +5156,9 @@ } }, "@ionic/core": { - "version": "5.6.13", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.13.tgz", - "integrity": "sha512-stN80Q4zdLT7pmUoNNqp+lVjTIhcLSjDN2rzP/gYz8YAkz1L5AB2CkudD5VHWFTBbAEsylih34gAMOrygVNoJQ==", + "version": "5.6.14", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz", + "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==", "requires": { "@stencil/core": "^2.4.0", "ionicons": "^5.5.3", diff --git a/angular/package.json b/angular/package.json index e5a47625ba..6e1a5124c5 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "5.6.14", + "version": "5.7.0", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -42,7 +42,7 @@ "validate": "npm i && npm run lint && npm run test && npm run build" }, "dependencies": { - "@ionic/core": "5.6.14", + "@ionic/core": "5.7.0", "tslib": "^1.9.3" }, "peerDependencies": { diff --git a/core/package-lock.json b/core/package-lock.json index 19c227d682..6b94622cd7 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "5.6.14", + "version": "5.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "5.6.14", + "version": "5.7.0", "license": "MIT", "dependencies": { "@stencil/core": "^2.4.0", diff --git a/core/package.json b/core/package.json index e8c410edea..097ff0e315 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "5.6.14", + "version": "5.7.0", "description": "Base components for Ionic", "keywords": [ "ionic", diff --git a/docs/package.json b/docs/package.json index 5a902a50dc..02150a7ec5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "5.6.14", + "version": "5.7.0", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json index a958102277..a44af3d5bd 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/angular-server", - "version": "5.6.14", + "version": "5.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "5.6.14", + "version": "5.7.0", "license": "MIT", "devDependencies": { "@angular/animations": "8.2.13", @@ -16,7 +16,7 @@ "@angular/core": "8.2.13", "@angular/platform-browser": "8.2.13", "@angular/platform-server": "8.2.13", - "@ionic/core": "5.6.13", + "@ionic/core": "5.6.14", "ng-packagr": "5.7.1", "tslint": "^5.12.1", "tslint-ionic-rules": "0.0.21", @@ -137,9 +137,9 @@ } }, "node_modules/@ionic/core": { - "version": "5.6.13", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.13.tgz", - "integrity": "sha512-stN80Q4zdLT7pmUoNNqp+lVjTIhcLSjDN2rzP/gYz8YAkz1L5AB2CkudD5VHWFTBbAEsylih34gAMOrygVNoJQ==", + "version": "5.6.14", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz", + "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==", "dev": true, "dependencies": { "@stencil/core": "^2.4.0", @@ -5424,9 +5424,9 @@ } }, "@ionic/core": { - "version": "5.6.13", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.13.tgz", - "integrity": "sha512-stN80Q4zdLT7pmUoNNqp+lVjTIhcLSjDN2rzP/gYz8YAkz1L5AB2CkudD5VHWFTBbAEsylih34gAMOrygVNoJQ==", + "version": "5.6.14", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz", + "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==", "dev": true, "requires": { "@stencil/core": "^2.4.0", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index d6cede49c0..281ff096c1 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "5.6.14", + "version": "5.7.0", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -49,7 +49,7 @@ "@angular/core": "8.2.13", "@angular/platform-browser": "8.2.13", "@angular/platform-server": "8.2.13", - "@ionic/core": "5.6.14", + "@ionic/core": "5.7.0", "ng-packagr": "5.7.1", "tslint": "^5.12.1", "tslint-ionic-rules": "0.0.21", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index fd6eaa565e..06aa9cc7be 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "5.6.14", + "version": "5.7.0", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -39,15 +39,15 @@ "tslib": "*" }, "peerDependencies": { - "@ionic/react": "5.6.14", + "@ionic/react": "5.7.0", "react": ">=16.8.6", "react-dom": ">=16.8.6", "react-router": "^5.0.1", "react-router-dom": "^5.0.1" }, "devDependencies": { - "@ionic/core": "5.6.14", - "@ionic/react": "5.6.14", + "@ionic/core": "5.7.0", + "@ionic/react": "5.7.0", "@rollup/plugin-node-resolve": "^8.1.0", "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", diff --git a/packages/react/package.json b/packages/react/package.json index 26e597b5df..8b59fb6007 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "5.6.14", + "version": "5.7.0", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "5.6.14", + "@ionic/core": "5.7.0", "ionicons": "^5.1.2", "tslib": "*" }, diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index ecd746151c..83ac84ab1b 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/vue-router", - "version": "5.6.14", + "version": "5.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "5.6.14", + "version": "5.7.0", "license": "MIT", "devDependencies": { "@ionic/vue": "5.4.1", @@ -23,7 +23,7 @@ }, "../../core": { "name": "@ionic/core", - "version": "5.6.13", + "version": "5.6.14", "dev": true, "license": "MIT", "dependencies": { diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index e43cab35c9..d9e90e8ddb 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "5.6.14", + "version": "5.7.0", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index 5c77fa91b8..1a1044661a 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "5.6.14", + "version": "5.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "5.6.14", + "version": "5.7.0", "license": "MIT", "dependencies": { - "@ionic/core": "5.6.13", + "@ionic/core": "5.6.14", "ionicons": "^5.1.2" }, "devDependencies": { @@ -53,9 +53,9 @@ } }, "node_modules/@ionic/core": { - "version": "5.6.13", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.13.tgz", - "integrity": "sha512-stN80Q4zdLT7pmUoNNqp+lVjTIhcLSjDN2rzP/gYz8YAkz1L5AB2CkudD5VHWFTBbAEsylih34gAMOrygVNoJQ==", + "version": "5.6.14", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz", + "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==", "dependencies": { "@stencil/core": "^2.4.0", "ionicons": "^5.5.3", @@ -633,9 +633,9 @@ } }, "@ionic/core": { - "version": "5.6.13", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.13.tgz", - "integrity": "sha512-stN80Q4zdLT7pmUoNNqp+lVjTIhcLSjDN2rzP/gYz8YAkz1L5AB2CkudD5VHWFTBbAEsylih34gAMOrygVNoJQ==", + "version": "5.6.14", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.6.14.tgz", + "integrity": "sha512-0LrEofgfA91aqDlXgnOIfC3QrRxazSA4Zu6StQ1ksQqzkYsJLmceaTowl/b72Yt4eaNHUQIVvUvazpoDNp+zRQ==", "requires": { "@stencil/core": "^2.4.0", "ionicons": "^5.5.3", diff --git a/packages/vue/package.json b/packages/vue/package.json index ad82023fe2..781b6d2bb9 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "5.6.14", + "version": "5.7.0", "description": "Vue specific wrapper for @ionic/core", "scripts": { "lint": "echo add linter", @@ -57,7 +57,7 @@ "vue-router": "^4.0.0-rc.4" }, "dependencies": { - "@ionic/core": "5.6.14", + "@ionic/core": "5.7.0", "ionicons": "^5.1.2" }, "vetur": {