| 37 | * @param options |
| 38 | */ |
| 39 | export function useSortable<T>( |
| 40 | el: MaybeRefOrGetter<HTMLElement | null | undefined> | string, |
| 41 | list: MaybeRefOrGetter<T[]>, |
| 42 | options: UseSortableOptions = {}, |
| 43 | ): UseSortableReturn { |
| 44 | let sortable: Sortable | undefined |
| 45 | |
| 46 | const { document = defaultDocument, ...resetOptions } = options |
| 47 | |
| 48 | const defaultOptions: Options = { |
| 49 | onUpdate: (e) => { |
| 50 | moveArrayElement(list, e.oldIndex!, e.newIndex!, e) |
| 51 | }, |
| 52 | } |
| 53 | |
| 54 | const start = () => { |
| 55 | const target = (typeof el === 'string' ? document?.querySelector(el) : unrefElement(el)) |
| 56 | if (!target || sortable !== undefined) |
| 57 | return |
| 58 | sortable = new Sortable(target as HTMLElement, { ...defaultOptions, ...resetOptions }) |
| 59 | } |
| 60 | |
| 61 | const stop = () => { |
| 62 | sortable?.destroy() |
| 63 | sortable = undefined |
| 64 | } |
| 65 | |
| 66 | const option = <K extends keyof Options>(name: K, value?: Options[K]) => { |
| 67 | if (value !== undefined) |
| 68 | sortable?.option(name, value) |
| 69 | else |
| 70 | return sortable?.option(name) |
| 71 | } |
| 72 | |
| 73 | tryOnMounted(start) |
| 74 | |
| 75 | tryOnScopeDispose(stop) |
| 76 | |
| 77 | return { |
| 78 | stop, |
| 79 | start, |
| 80 | option: option as UseSortableReturn['option'], |
| 81 | } |
| 82 | } |
| 83 | |
| 84 | /** |
| 85 | * Inserts a element into the DOM at a given index. |