Watch options for changes; update demo with example

Author: MaxLeiter

src/components/HelloWorld.vue

@@ -1,61 +1,67 @@
 <script setup lang="ts">
 import Sortable from "./Sortable.vue";
-import { computed } from 'vue'
+import { computed, ref } from "vue";
 import type { SortableOptions } from "sortablejs";
 
 const elements = computed(() => {
-    return [
+  return [
+    {
+      id: "1",
+      text: "One",
+      children: [
         {
-            id: '1',
-            text: 'One',
-            children: [
-                {
-                    id: '1-1',
-                    text: 'One-One',
-                    children: [
-                        {
-                            id: '1-1-1',
-                            text: 'One-One-One',
-                        },
-                        {
-                            id: '1-1-2',
-                            text: 'One-One-Two',
-                        },
-                    ],
-                },
-                {
-                    id: '1-2',
-                    text: 'One-Two',
-                },
-            ],
+          id: "1-1",
+          text: "One-One",
+          children: [
+            {
+              id: "1-1-1",
+              text: "One-One-One",
+            },
+            {
+              id: "1-1-2",
+              text: "One-One-Two",
+            },
+          ],
         },
         {
-            id: '2',
-            text: 'Two'
+          id: "1-2",
+          text: "One-Two",
         },
-        {
-            id: '3',
-            text: 'Three'
-        }
-    ]
-})
+      ],
+    },
+    {
+      id: "2",
+      text: "Two",
+    },
+    {
+      id: "3",
+      text: "Three",
+    },
+  ];
+});
 
 const logEvent = (evt: Event, evt2?: Event) => {
-    if (evt2) {
-        console.log(evt, evt2);
-    } else {
-        console.log(evt);
-    }
-}
+  if (evt2) {
+    console.log(evt, evt2);
+  } else {
+    console.log(evt);
+  }
+};
+
+const animating = ref(true);
 
-const options = computed(() => {
+const options = computed<SortableOptions>(() => {
   return {
-    draggable: '.draggable',
-    animation: 150,
-    ghostClass: 'ghost',
-    dragClass: 'drag',
-  } as SortableOptions
-})
+    draggable: ".draggable",
+    animation: animating.value ? 150 : 0,
+    ghostClass: "ghost",
+    dragClass: "drag",
+  };
+});
+
+const onPress = (evt: Event) => {
+  animating.value = !animating.value;
+};
 </script>
 
 <style lang="css" scoped>
@@ -85,6 +91,7 @@ main {
 
 <template>
   <main>
+    <button @click="onPress">Toggle animations</button>
     <Sortable
       :list="elements"
       item-key="id"
@@ -102,7 +109,7 @@ main {
       @move="logEvent"
       @clone="logEvent"
     >
-      <template #item="{element, index}">
+      <template #item="{ element, index }">
         <div class="draggable" :key="element.id">
           {{ element.text }}
           <Sortable
@@ -123,7 +130,7 @@ main {
             @move="logEvent"
             @clone="logEvent"
           >
-            <template #item="{element, index}">
+            <template #item="{ element, index }">
               <div class="draggable" :key="element.id">
                 {{ element.text }}
               </div>
@@ -135,6 +142,4 @@ main {
   </main>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/Sortable.vue

@@ -3,6 +3,7 @@ import { ref, PropType, watch, onUnmounted, Prop } from "vue";
 import Sortable, { SortableOptions } from "sortablejs";
 
 const props = defineProps({
+  /** All SortableJS options are supported; events are handled by the `defineEmits` below and should be used with v-on */
   options: {
     type: Object as PropType<
       Omit<
@@ -24,21 +25,24 @@ const props = defineProps({
     default: null,
     required: false,
   },
+  /** Your list of items **/
   list: {
     type: Array as PropType<any[]>,
     default: [],
     required: true,
   },
+  /** The name of the key present in each item in the list that corresponds to a unique value. */
   itemKey: {
     type: String as PropType<string>,
     default: "",
     required: true,
   },
+  /** The element type to render as (string or function). */
   tag: {
     type: String as PropType<string>,
     default: "div",
     required: false,
-  }
+  },
 });
 
 const emit = defineEmits<{
@@ -79,6 +83,18 @@ watch(containerRef, (newDraggable) => {
   }
 });
 
+watch(
+  () => props.options,
+  (options) => {
+    if (options && sortable?.value) {
+      sortable.value.options = { ...sortable.value.options, ...options };
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
 onUnmounted(() => {
   if (sortable.value) {
     sortable.value.destroy();
@@ -89,11 +105,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <component 
-    ref="containerRef" 
-    :is="$props.tag"
-    :class="$props.class"
-  >
+  <component ref="containerRef" :is="$props.tag" :class="$props.class">
     <slot
       v-for="(item, index) of list"
       :key="item[$props.itemKey!]"