feat(vue): update deps; add hooks and draggable component

taye · interactjs-ci · commit 63920eabb980 · 2023-12-03T23:35:28.000Z
# Conflicts:
#	packages/@interactjs/vue/plugin.ts
#	packages/@interactjs/vue/types.ts
diff --git a/examples/sortable/index.html b/examples/sortable/index.html
@@ -7,23 +7,23 @@
   <div id="react-app"></div>
 
   <div id="vue-app">
-    <div v-for="list of lists" class="box">
+    <div v-for="list of lists" class="box" :key="list.title">
       <h1>{{ list.title }}</h1>
 
       <pre>{{ list.items }}</pre>
 
-      <sortable class="container" :options="sortableOptions" v-model="list.items">
+      <i-sortable class="container" :options="sortableOptions" v-model="list.items">
         <div v-for="(item, index) of list.items" :key="index" disabled="!!(index % 2)" :id="`item-${index}-${item}`" class="item card">
           <div class="card-content">{{ index }}. {{ item }}</div>
         </div>
-      </sortable>
+      </i-sortable>
     </div>
 
     <pre>[ {{ tags.join(', ') }} ]</pre>
 
-    <swappable class="tags" v-model="tags" :options="swappableOptions">
-      <div v-for="tag of tags" :id="'tag-' + tag" class="tag is-info is-large">{{ tag }}</div>
-    </swappable>
+    <i-swappable class="tags" v-model="tags" :options="swappableOptions">
+      <div v-for="tag of tags" :id="'tag-' + tag" class="tag is-info is-large" :key="tag">{{ tag }}</div>
+    </i-swappable>
 
   </div>
 
diff --git a/examples/sortable/vue.js b/examples/sortable/vue.js
@@ -1,18 +1,18 @@
 import '@interactjs/vue'
 import interact from '@interactjs/interactjs'
-import { createApp } from 'vue'
+import { createApp } from 'vue/dist/vue.esm-bundler'
 
 import { getData, sortableOptions, swappableOptions } from './shared.js'
 
-createApp({
-  components: {
-    ...interact.vue.components,
-  },
+const app = createApp({
   data () {
     return {
       ...getData(),
       sortableOptions,
       swappableOptions,
     }
   },
-}).mount('#vue-app')
+})
+
+app.use(interact.vue)
+app.mount('#vue-app')
diff --git a/yarn.lock b/yarn.lock
