works on more dropzone typings.

src/plugins/dropZone/index.ts

@@ -1,13 +1,13 @@
-export function dropZone(dzConfig: DropZoneConfigVue = {}) {
+import type { VueDropZoneConfig } from "./vue/types";
+
+export function dropZone(dzConfig: VueDropZoneConfig = {}) {
   //console.log("init dropzone", parent, config, globals);
   // end-user scope
-  return (parent: HTMLElement, config: any, globals: any) => {
+  console.log("dropZone plugin in index");
+  return () => {
     return {
       setup() {},
       tearDown() {},
     };
-    //fn()
-    //console.log("teardown dropzone", parent, config, globals);
-    // internal scope called by plugin
   };
 }

src/plugins/dropZone/vue/index.ts

@@ -1,15 +1,31 @@
 import { isBrowser } from "../../../utils";
 
-export function dropZone(dzConfig: DropZoneConfigVue = {}) {
+export function dropZone(dzConfig: DNDDropZoneConfig = {}) {
+  console.log("hello");
   //console.log("dropzone", setUpDropZone);
-  const enabledDZs = [];
 
-  console.log("Vue dropzone");
   if (!isBrowser || !dzConfig.dropZones?.length) return;
 
-  for (const dz of dzConfig.dropZones) {
-    console.log("dz", dz);
-  }
+  const enabledDZs = [];
+
+  //dzConfig.dropZones.forEach((dz: ) => {
+  //  const validParent = getEl(dnd.parent);
+
+  //  if (validParent) {
+  //    initialize(validParent, dnd);
+  //  } else {
+  //    const stop = watch(dnd.parent, (newParent) => {
+  //      if (!newParent) return;
+
+  //      const validParent = getEl(newParent);
+
+  //      if (!validParent) console.warn("Invalid parent element", newParent);
+  //      else initialize(validParent, dnd);
+
+  //      stop();
+  //    });
+  //  }
+  //});
 
   //return initDropZone(dzConfig);
   //if (dzConfig.dropZones && isBrowser) {

src/plugins/dropZone/vue/types.ts

@@ -0,0 +1,13 @@
+import type { DropZoneConfig, DropZone } from "../../../types";
+
+import type { Ref } from "vue";
+
+export type VueElement = HTMLElement | Ref<HTMLElement | null>;
+
+export interface VueDropZone extends Omit<DropZone, "element"> {
+  element: VueElement;
+}
+
+export interface VueDropZoneConfig extends Omit<DropZoneConfig, "dropZones"> {
+  dropZones?: Array<VueDropZone>;
+}

src/types.ts

@@ -1,3 +1,14 @@
+export interface DNDPluginConfig {
+  setup: () => void;
+  tearDown: () => void;
+}
+
+export type DNDPlugin = (
+  parent: HTMLElement,
+  config: DNDConfig,
+  globals: DNDGlobals
+) => void;
+
 export interface DropZoneConfig {
   group?: string;
   name?: string;
@@ -21,11 +32,12 @@ export interface DropZoneConfig {
   nodeDropZone?: boolean;
   transfer?: TransferEvent;
   drop?: DropEvent;
-  dropZones?: Array<{
-    element: HTMLElement;
-    accepts?: (draggedParentName: string | undefined) => boolean;
-  }>;
-  validDropZones?: Array<HTMLElement>;
+  dropZones?: Array<DropZone>;
+}
+
+export interface DropZone {
+  element: HTMLElement;
+  accepts?: (draggedParentName: string | undefined) => boolean;
 }
 
 export interface DNDInitParent {
@@ -160,6 +172,12 @@ export interface ParentData {
   //dzConfig?: DropZoneConfig;
 }
 
+export interface actions {
+  touchend?: TouchendEvent;
+  touchmove?: TouchAction;
+  touchstart?: TouchAction;
+}
+
 export interface DNDConfig {
   [key: string]: any;
   disabled?: boolean;
@@ -186,18 +204,10 @@ export interface DNDConfig {
   touchDropZoneClass?: string | undefined;
   touchSelectionDraggingClass?: string | undefined;
   touchSelectionDropZoneClass?: string | undefined;
-  touchend?: TouchendEvent;
-  touchmove?: TouchAction;
-  touchstart?: TouchAction;
   transfer: TransferEvent;
   transferReturn: TransferReturnEvent;
 }
 
-export interface Plugin {
-  setUp: (parent: HTMLElement, config: DNDConfig) => void;
-  tearDown?: (parent: HTMLElement, config: DNDConfig) => void;
-}
-
 export type SetDraggableEvent = (el: Node, state: DNDState) => void;
 
 export type RemoveDraggableEvent = (

src/vue/index.ts

@@ -26,6 +26,7 @@ const parentValues: WeakMap<HTMLElement, Ref<Array<any>>> = new WeakMap();
  */
 function getValues(parent: HTMLElement): Array<any> {
   const values = parentValues.get(parent);
+
   if (!values) {
     console.warn("No values found for parent element");
 

src/vue/types.ts

@@ -1,12 +1,5 @@
 import type { Ref } from "vue";
 import type { DNDConfig } from "../types";
-//export interface DropZoneConfigVue {
-//  accepts?: (el: HTMLElement) => boolean;
-//  dropZones?: Array<{
-//    element: HTMLElement | Ref<HTMLElement | null>;
-//    accepts: (draggedParentName: string | undefined) => boolean;
-//  }>;
-//}
 
 export type VueDND = {
   parent: HTMLElement | Ref<HTMLElement | null>;