Add support for useTemplateRef

src/vue/types.ts

@@ -1,10 +1,10 @@
 import type { Ref } from "vue";
 import type { ParentConfig } from "../types";
 
-export type VueElement = HTMLElement | Ref<HTMLElement | undefined>;
+export type VueElement = HTMLElement | Ref<HTMLElement | null | undefined>;
 
 export interface VueDragAndDropData<T> extends VueParentConfig<T> {
-  parent: HTMLElement | Ref<HTMLElement | undefined>;
+  parent: VueElement;
   values: Ref<Array<T>> | Array<T>;
 }
 

tests/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.12.1",
     "nuxt": "^3.11.1",
-    "vue": "^3.4.21",
+    "vue": "^3.5.0",
     "vue-router": "^4.3.0",
     "@formkit/drag-and-drop": "workspace:*"
   },

tests/pages/accessibility/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { dragAndDrop } from "../../../src/vue/index";
 
-const parent1: Ref<HTMLElement | undefined> = ref(undefined);
-const parent2: Ref<HTMLElement | undefined> = ref(undefined);
-const parent3: Ref<HTMLElement | undefined> = ref(undefined);
+const parent1 = useTemplateRef("parent1");
+const parent2 = useTemplateRef("parent2");
+const parent3 = useTemplateRef("parent3");
 
 const values1 = ref(["Apple", "Banana", "Orange"]);
 const values2 = ref(["Strawberry", "Blueberry", "Raspberry"]);

tests/pages/classes/index.vue

@@ -6,7 +6,7 @@ const options = reactive({
   synthDraggingClasss: "draggingClass",
 });
 
-const parent: Ref<HTMLElement | undefined> = ref(undefined);
+const parent = useTemplateRef("parent");
 
 const values = ref(["Apple", "Banana", "Orange"]);