chore(): sync with main for beta 5 release

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

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)