feat(useSortable): Add possibility to use it with Component ref (#4684)

michaelcozzolino · web-flow · commit 159175b2861a · 2025-04-07T13:36:26.000Z
diff --git a/packages/integrations/useSortable/index.browser.test.ts b/packages/integrations/useSortable/index.browser.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { templateRef } from '@vueuse/core'
+import { templateRef, unrefElement } from '@vueuse/core'
 import Sortable from 'sortablejs'
 import { describe, expect, it } from 'vitest'
 import { defineComponent, shallowRef } from 'vue'
@@ -152,4 +152,31 @@ describe('useSortable', () => {
       }
     })
   })
+
+  it('accepts component refs', () => {
+    const SubComponent = defineComponent({
+      template: '<p>foo</p>',
+    })
+    const wrapper = mount(defineComponent({
+      components: { SubComponent },
+      template: '<SubComponent ref="el"></SubComponent>',
+      setup() {
+        const el = templateRef<InstanceType<typeof SubComponent>>('el')
+        const list = shallowRef<string[]>([])
+        const result = useSortable(el, list, {
+        })
+
+        return { ...result, el }
+      },
+    }))
+    const vm = wrapper.vm
+    try {
+      const el = unrefElement(vm.el) as HTMLElement
+      const sortable = Sortable.get(el)
+      expect(sortable).toBeDefined()
+    }
+    finally {
+      wrapper.unmount()
+    }
+  })
 })
diff --git a/packages/integrations/useSortable/index.ts b/packages/integrations/useSortable/index.ts
@@ -1,4 +1,4 @@
-import type { ConfigurableDocument } from '@vueuse/core'
+import type { ConfigurableDocument, MaybeElement } from '@vueuse/core'
 import type { Options } from 'sortablejs'
 import type { MaybeRef, MaybeRefOrGetter } from 'vue'
 import { defaultDocument, tryOnMounted, tryOnScopeDispose, unrefElement } from '@vueuse/core'
@@ -27,7 +27,7 @@ export type UseSortableOptions = Options & ConfigurableDocument
 
 export function useSortable<T>(selector: string, list: MaybeRefOrGetter<T[]>,
   options?: UseSortableOptions): UseSortableReturn
-export function useSortable<T>(el: MaybeRefOrGetter<HTMLElement | null | undefined>, list: MaybeRefOrGetter<T[]>,
+export function useSortable<T>(el: MaybeRefOrGetter<MaybeElement>, list: MaybeRefOrGetter<T[]>,
   options?: UseSortableOptions): UseSortableReturn
 
 /**
@@ -37,7 +37,7 @@ export function useSortable<T>(el: MaybeRefOrGetter<HTMLElement | null | undefin
  * @param options
  */
 export function useSortable<T>(
-  el: MaybeRefOrGetter<HTMLElement | null | undefined> | string,
+  el: MaybeRefOrGetter<MaybeElement> | string,
   list: MaybeRefOrGetter<T[]>,
   options: UseSortableOptions = {},
 ): UseSortableReturn {
