diff --git a/src/vue/index.ts b/src/vue/index.ts index 025fb2d..79c2d2c 100644 --- a/src/vue/index.ts +++ b/src/vue/index.ts @@ -1,15 +1,14 @@ -import type { Ref } from "vue"; +import type { MaybeRef, Ref } from "vue"; import type { VueDragAndDropData, VueParentConfig } from "./types"; import { dragAndDrop as initParent, isBrowser, tearDown } from "../index"; -import { onUnmounted, ref } from "vue"; +import { isRef, onUnmounted, ref, unref } from "vue"; import { handleVueElements } from "./utils"; export * from "./types"; /** * Global store for parent els to values. */ -const parentValues: WeakMap> | Array> = - new WeakMap(); +const parentValues: WeakMap>> = new WeakMap(); /** * Returns the values of the parent element. @@ -27,7 +26,7 @@ function getValues(parent: HTMLElement): Array { return []; } - return "value" in values ? values.value : values; + return unref(values); } /** @@ -43,8 +42,7 @@ function setValues(newValues: Array, parent: HTMLElement): void { const currentValues = parentValues.get(parent); // Only update reactive values. If static, let's not update. - if (currentValues && "value" in currentValues) - currentValues.value = newValues; + if (currentValues && isRef(currentValues)) currentValues.value = newValues; //else if (currentValues) parentValues.set(parent, newValues); } /** @@ -110,7 +108,7 @@ export function useDragAndDrop( */ function handleParent( config: Partial>, - values: Ref> | Array + values: MaybeRef> ) { return (parent: HTMLElement) => { parentValues.set(parent, values); diff --git a/src/vue/types.ts b/src/vue/types.ts index 5303966..d93a388 100644 --- a/src/vue/types.ts +++ b/src/vue/types.ts @@ -1,11 +1,11 @@ -import type { Ref } from "vue"; +import type { MaybeRef, Ref } from "vue"; import type { ParentConfig } from "../types"; export type VueElement = HTMLElement | Ref; export interface VueDragAndDropData extends VueParentConfig { parent: HTMLElement | Ref; - values: Ref> | Array; + values: MaybeRef>; } export type VueParentConfig = Partial>;