🐞 fix: remove unnecessary dependencies

Author: carlosjorger

docs/src/components/vue/OnDragEventsWithMoreInfo.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from "vue";
+import { useDragAndDrop } from "fluid-dnd/vue";
+// import { dragAndDrop} from "fluid-dnd";
+const droppableGroup = useTemplateRef('droppableGroup')
+const draggedElement = ref<number | undefined>(undefined)
+function onDragStart(){
+  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
+  for (const droppable of [...droppables]) {
+    droppable.classList.toggle('marked-droppable',true)
+  }
+}
+function onDragEnd (){
+  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
+  for (const droppable of [...droppables]) {
+    droppable.classList.toggle('marked-droppable',false)
+  }
+}
+
+const list = ref([1, 2, 3, 4, 5]);
+const [ parent1 ] = useDragAndDrop<number>(list, {
+  droppableGroup: "group1",
+  onDragStart,
+  onDragEnd,
+});
+
+const list2 = ref([6, 7, 8, 9, 10]);
+const [ parent2 ] = useDragAndDrop<number>(list2, { 
+  droppableGroup: "group1",
+  direction: "horizontal",
+  onDragStart,
+  onDragEnd,
+});
+
+</script>
+<template>
+  <div ref="droppableGroup" class="group-list bg-[var(--sl-color-gray-6)]">
+    <ul ref="parent1" class="number-list">
+      <li class="number" v-for="(element, index) in list" :index :key="element">
+        {{ element }}
+      </li>
+    </ul>
+    <div ref="parent2" class="number-list-h">
+      <div
+        class="number"
+        v-for="(element, index) in list2"
+        :index
+        :key="element"
+      >
+        {{ element }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.number {
+  border-style: solid;
+  padding-left: 10px;
+  padding-block: 5px;
+  margin-top: 0.25rem !important;
+  border-width: 2px;
+  border-color: var(--sl-color-gray-1);
+  color: var(--sl-color-gray-2);
+  min-width: 120px;
+  width: 120px;
+}
+
+.number-list {
+  display: block;
+  height: 290px;
+  overflow-y: auto;
+  background-color: var(--sl-color-gray-5);
+  padding: 1.5rem;
+  border: 2px solid transparent;
+  transition: border-color 200ms ease;
+}
+.number-list-h {
+  overflow-x: auto;
+  display: flex;
+  flex-direction: row;
+  padding-inline: 25px;
+  margin-top: 0 !important;
+  padding: 1.5rem;
+  border: 2px solid transparent;
+  transition: border-color 200ms ease;
+}
+.temp-child {
+  margin-top: 0 !important;
+}
+.marked-droppable{
+    border: 2px solid white;
+}
+</style>

docs/src/content/docs/vue/guides/ondrag.mdx

@@ -4,6 +4,7 @@ description: A guide on how to use Fluid DnD calling onDragStart and onDragEnd e
 ---
 
 import OnDragEvents from "@/components/vue/OnDragEvents.vue";
+import OnDragEventsWithMoreInfo from "@/components/vue/OnDragEventsWithMoreInfo.vue"
 import { Code } from "@astrojs/starlight/components";
 
 ### List of number example
@@ -71,8 +72,16 @@ export const highlightsDraggable = ["droppableGroup"];
 
 <Code code={listOfNumbersDraggable} lang="vue" mark={highlightsDraggable} />
 
+{/* TODO: add doc for the use of the parameters */}
+
 ### Preview
 
 <div class="p-8 bg-[var(--sl-color-gray-6)]">
   <OnDragEvents client:load  />
 </div>
+
+### Preview
+
+<div class="p-8 bg-[var(--sl-color-gray-6)]">
+  <OnDragEventsWithMoreInfo client:load  />
+</div>

package.json

@@ -11,7 +11,7 @@
   "files": [
     "dist"
   ],
-  "main": ".dist/index.cjs",
+  "main": "./dist/index.cjs",
   "exports": {
     "./vue": {
       "types": "./dist/vue/index.d.ts",
@@ -31,13 +31,13 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.umd.cjs"
+      "require": "./dist/index.cjs"
     }
   },
-  "types": "./index.d.ts",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "cd my-test-examples && vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "test": "vitest"
   },

src/assets/graphic/example-video.gif

@@ -22,20 +22,20 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*", "./dist/*", ""],
-      "@components/*": ["./src/components/*"],
-      "fluid-dnd": ["./src/index.ts"],
       "fluid-dnd/vue": [".src/vue/index.ts"],
+      "fluid-dnd": [".src/index.ts"],
       "fluid-dnd/svelte": [".src/svelte/index.ts"],
       "fluid-dnd/react": [".src/react/index.ts"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.svelte"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.svelte", "src/*.ts","src/*.d.ts"],
   "exclude": [
     "src/main.ts",
     "examples",
     "docs",
     "src/assets",
-    "tests-frameworks/vue-test-examples"
+    "tests-frameworks",
+    "public",
   ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

src/assets/vue.svg

@@ -1,30 +1,27 @@
 /// <reference types="vitest" />
 import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
 import * as path from "path";
 import dts from "vite-plugin-dts";
 import { fileURLToPath } from "url";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({
-      script: {
-        defineModel: true,
-      },
-    }),
     dts(),
   ],
   build: {
     lib: {
       entry: {
+        index: path.resolve(__dirname, "src/index.ts"),
         vue: path.resolve(__dirname, 'src/vue/index.ts'),
         svelte: path.resolve(__dirname, 'src/svelte/index.ts'),
-        react: path.resolve(__dirname, 'src/react/index.ts'),
-        index: path.resolve(__dirname, "src/index.ts")
+        react: path.resolve(__dirname, 'src/react/index.ts')
       },
-      name: "FluidDnd",
+      name: "Fluid-DnD",
       fileName: (format, entryName) => {
         const ext = format === 'es' ? 'mjs' : 'cjs';
+        if (entryName === 'index') {
+          return `index.${ext}`;
+        }
         return `${entryName}/index.${ext}`;
       }
     },
@@ -34,7 +31,7 @@ export default defineConfig({
         globals: {
           vue: "Vue",
           svelte: 'svelte',
-          react: 'react'
+          react: 'react',
         },
       },
     },
@@ -46,6 +43,6 @@ export default defineConfig({
   },
   test: {
     environment: "jsdom", // or 'node'
-    exclude: ["node_modules", "my-test-examples", "docs/node_modules"],
+    exclude: ["node_modules", "docs/node_modules", "public", "tests-frameworks"],
   },
 });