diff --git a/CHANGELOG.md b/CHANGELOG.md index cf03a66324..b8b4e57e82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,25 @@ -# [6.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v5.6.14...v6.0.0-beta.4) (2021-08-18) +# [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)) + + + +# [6.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.0.0-beta.3...v6.0.0-beta.4) (2021-08-18) ### Bug Fixes diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index d5e50f51c1..bddafbe7b6 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 ced2db73c2..d53b41e143 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}; } diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index e701a467d9..e2c9578e8b 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -313,10 +313,11 @@ button, a { // to be clicked to open the select interface ::slotted(ion-label) { pointer-events: none; - - flex: 1; } +::slotted(ion-label:not([slot="end"])) { + flex: 1; +} // Item Input // -------------------------------------------------- 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 + + + + 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 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 + + + +``` 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 ********* */ 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) diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 5cebaf112b..7b57758715 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -34,6 +34,7 @@ export { mdTransitionAnimation, NavComponentWithProps, setupConfig, + IonicSwiper, IonicSwiper, diff --git a/packages/vue-router/src/viewStacks.ts b/packages/vue-router/src/viewStacks.ts index 199356bea1..d4eb0b9859 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) => { @@ -186,6 +194,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 585a6dd5c0..761c90c120 100644 --- a/packages/vue/src/components/IonRouterOutlet.ts +++ b/packages/vue/src/components/IonRouterOutlet.ts @@ -51,7 +51,7 @@ export const IonRouterOutlet = /*@__PURE__*/ 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 554101c58c..42b24a1e0e 100644 --- a/packages/vue/test-app/tests/unit/routing.spec.ts +++ b/packages/vue/test-app/tests/unit/routing.spec.ts @@ -402,4 +402,52 @@ describe('Routing', () => { expect(pageAgain[0].props()).toEqual({ id: '1' }); expect(pageAgain[1].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); + }); });