chore(): sync with main for beta 5 release

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

core/src/components/alert/alert-interface.ts

@@ -44,7 +44,7 @@ export interface AlertInputAttributes extends JSXBase.InputHTMLAttributes<HTMLIn
 
 export interface AlertButton {
   text: string;
-  role?: string;
+  role?: 'cancel' | 'destructive' | string;
   cssClass?: string | string[];
   id?: string;
   handler?: (value: any) => boolean | void | {[key: string]: any};

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};
 }

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
 // --------------------------------------------------

core/src/components/item/test/alignment/index.html

@@ -118,6 +118,25 @@
         </ion-item>
       </ion-list>
 
+      <ion-list>
+        <ion-list-header>End Labels</ion-list-header>
+        <ion-item>
+          <ion-label slot="end">Time</ion-label>
+          <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
+        </ion-item>
+        <ion-item>
+          <ion-label slot="end">From</ion-label>
+          <ion-input placeholder="Choose Starting Point"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label slot="end">Destination</ion-label>
+          <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select-option>Madison, WI</ion-select-option>
+            <ion-select-option>Atlanta, GA</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+
     </ion-content>
   </ion-app>
 

core/src/components/picker/readme.md

@@ -159,6 +159,63 @@ const PickerExample: React.FC = () => {
 ```
 
 
+### Vue
+
+```vue
+<template>
+  <div>
+    <ion-button @click="openPicker">SHOW PICKER</ion-button>
+    <p v-if="picked.animal">picked: {{ picked.animal.text }}</p>
+  </div>
+</template>
+
+<script>
+import { IonButton, pickerController } from "@ionic/vue";
+export default {
+  components: {
+    IonButton,
+  },
+  data() {
+    return {
+      pickingOptions: {
+        name: "animal",
+        options: [
+          { text: "Dog", value: "dog" },
+          { text: "Cat", value: "cat" },
+          { text: "Bird", value: "bird" },
+        ],
+      },
+      picked: {
+        animal: "",
+      },
+    };
+  },
+  methods: {
+    async openPicker() {
+      const picker = await pickerController.create({
+        columns: [this.pickingOptions],
+        buttons: [
+          {
+            text: "Cancel",
+            role: "cancel",
+          },
+          {
+            text: "Confirm",
+            handler: (value) => {
+              this.picked = value;
+              console.log(`Got Value ${value}`);
+            },
+          },
+        ],
+      });
+      await picker.present();
+    },
+  },
+};
+</script>
+```
+
+
 
 ## Properties
 

core/src/components/picker/usage/vue.md

@@ -0,0 +1,53 @@
+```vue
+<template>
+  <div>
+    <ion-button @click="openPicker">SHOW PICKER</ion-button>
+    <p v-if="picked.animal">picked: {{ picked.animal.text }}</p>
+  </div>
+</template>
+
+<script>
+import { IonButton, pickerController } from "@ionic/vue";
+export default {
+  components: {
+    IonButton,
+  },
+  data() {
+    return {
+      pickingOptions: {
+        name: "animal",
+        options: [
+          { text: "Dog", value: "dog" },
+          { text: "Cat", value: "cat" },
+          { text: "Bird", value: "bird" },
+        ],
+      },
+      picked: {
+        animal: "",
+      },
+    };
+  },
+  methods: {
+    async openPicker() {
+      const picker = await pickerController.create({
+        columns: [this.pickingOptions],
+        buttons: [
+          {
+            text: "Cancel",
+            role: "cancel",
+          },
+          {
+            text: "Confirm",
+            handler: (value) => {
+              this.picked = value;
+              console.log(`Got Value ${value}`);
+            },
+          },
+        ],
+      });
+      await picker.present();
+    },
+  },
+};
+</script>
+```

core/src/components/reorder-group/reorder-group.tsx

@@ -245,18 +245,17 @@ 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 heights.length - 1;
+  }
 
   /********* DOM WRITE ********* */
   private reorderMove(fromIndex: number, toIndex: number) {

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)

packages/react/src/components/index.ts

@@ -34,6 +34,7 @@ export {
   mdTransitionAnimation,
   NavComponentWithProps,
   setupConfig,
+  IonicSwiper,
 
   IonicSwiper,
 

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 = {};
     }
   }
 

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.

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: `<ion-page></ion-page>`
+    }
+    const Page2 = {
+      components: { IonPage },
+      template: `<ion-page></ion-page>`
+    }
+
+    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);
+  });
 });