From 1428390809217bfd30fde971e32d2ad8ff70b86b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Wed, 7 Jun 2023 04:36:03 +0800
Subject: [PATCH] feat(useSortable): add option set get method (#3108)

---
 packages/integrations/useSortable/demo.vue |  8 +++++++-
 packages/integrations/useSortable/index.md | 12 ++++++++++--
 packages/integrations/useSortable/index.ts | 17 ++++++++++++++++-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/integrations/useSortable/demo.vue b/packages/integrations/useSortable/demo.vue
index c349bea93ec..c3fe3b19821 100644
--- a/packages/integrations/useSortable/demo.vue
+++ b/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 }}
diff --git a/packages/integrations/useSortable/index.md b/packages/integrations/useSortable/index.md
index 9c900644bdd..13cd40c799d 100644
--- a/packages/integrations/useSortable/index.md
+++ b/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>
diff --git a/packages/integrations/useSortable/index.ts b/packages/integrations/useSortable/index.ts
index 45144419fa1..36039395028 100644
--- a/packages/integrations/useSortable/index.ts
+++ b/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>(