test(vue): add reorder-group test

Author: brandyscarney

packages/vue/test/base/src/router/index.ts

@@ -86,6 +86,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/components/range',
     component: () => import('@/views/Range.vue')
   },
+  {
+    path: '/reorder-group',
+    component: () => import('@/views/ReorderGroup.vue')
+  },
   {
     path: '/nested',
     component: () => import('@/views/RouterOutlet.vue'),

packages/vue/test/base/src/views/Home.vue

@@ -29,6 +29,9 @@
         <ion-item router-link="/navigation" id="navigation">
           <ion-label>Navigation</ion-label>
         </ion-item>
+        <ion-item router-link="/reorder-group">
+          <ion-label>Reorder Group</ion-label>
+        </ion-item>
         <ion-item router-link="/routing" id="routing">
           <ion-label>Routing</ion-label>
         </ion-item>

packages/vue/test/base/src/views/ReorderGroup.vue

@@ -0,0 +1,78 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Reorder Group</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-reorder-group :disabled="false" @ion-reorder-end="onReorderEnd">
+        <ion-item>
+          <ion-reorder slot="end"></ion-reorder>
+          <ion-label>Item 1</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-reorder slot="end"></ion-reorder>
+          <ion-label>Item 2</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-reorder slot="end"></ion-reorder>
+          <ion-label>Item 3</ion-label>
+        </ion-item>
+      </ion-reorder-group>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonButtons,
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonReorder,
+  IonReorderGroup,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import type { ReorderEndCustomEvent } from "@ionic/vue";
+
+export default defineComponent({
+  components: {
+    IonButtons,
+    IonBackButton,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonPage,
+    IonReorder,
+    IonReorderGroup,
+    IonTitle,
+    IonToolbar,
+  },
+  setup() {
+    const onReorderEnd = (event: ReorderEndCustomEvent) => {
+      if (event.detail.from !== event.detail.to) {
+        console.log('ionReorderEnd: Dragged from index', event.detail.from, 'to', event.detail.to);
+      } else {
+        console.log('ionReorderEnd: No position change occurred');
+      }
+
+      event.detail.complete();
+    };
+
+    return {
+      onReorderEnd,
+    };
+  },
+});
+</script>