feat(useSortable): add option set get method (#3108)

packages/integrations/useSortable/demo.vue

@@ -5,12 +5,18 @@ import { useSortable } from '.'
 const el = ref<HTMLElement | null>(null)
 const list = ref([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
 
-useSortable(el, list, {
+const { option } = useSortable(el, list, {
   animation: 150,
 })
 </script>
 
 <template>
+  <button @click="option('animation', 150)">
+    on animation
+  </button>
+  <button @click="option('animation', 0)">
+    off animation
+  </button>
   <div ref="el" class="flex flex-col gap-2 p-4 w-300px h-200px m-auto bg-gray-500/5 rounded">
     <div v-for="item in list" :key="item.id" class="h20 bg-gray-500/5 rounded p-3">
       {{ item.name }}

packages/integrations/useSortable/index.md

@@ -48,9 +48,17 @@ import { ref } from 'vue'
 const el = ref<HTMLElement | null>(null)
 const list = ref([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
 
-useSortable(el, list, {
-  handle: '.handle'
+const animation = 200
+
+const { option } = useSortable(el, list, {
+  handle: '.handle',
+  // or option set
+  // animation
 })
+
+// You can use the option method to set and get the option of Sortable
+option('animation', animation)
+// option('animation') // 200
 </script>
 
 <template>

packages/integrations/useSortable/index.ts

@@ -12,6 +12,14 @@ export interface UseSortableReturn {
    * destroy sortable instance
    */
   stop: () => void
+
+  /**
+   * Options getter/setter
+   * @param name a Sortable.Options property.
+   * @param value a value.
+   */
+  option<K extends keyof Sortable.Options>(name: K, value: Sortable.Options[K]): void
+  option<K extends keyof Sortable.Options>(name: K): Sortable.Options[K]
 }
 
 export type UseSortableOptions = Options & ConfigurableDocument
@@ -50,11 +58,18 @@ export function useSortable<T>(
 
   const stop = () => sortable?.destroy()
 
+  const option = <K extends keyof Options>(name: K, value?: Options[K]) => {
+    if (value !== undefined)
+      sortable?.option(name, value)
+    else
+      return sortable?.option(name)
+  }
+
   tryOnMounted(start)
 
   tryOnScopeDispose(stop)
 
-  return { stop, start }
+  return { stop, start, option }
 }
 
 export function moveArrayElement<T>(