@vue-dnd-kit/core 0.0.13 → 0.0.14

package/README.md

@@ -1,4 +1,4 @@
-# Vue Drag & Drop Hooks Core
+# Vue Drag & Drop Library - Core Package
 
 <p align="center">
   <a href="https://zizigy.github.io/vue-dnd-hooks/">
@@ -20,9 +20,9 @@
   Inspired by the popular <a href="https://dndkit.com/" target="_blank">React DnD Kit</a> library, adapted for Vue.js
 </p>
 
-## Core Features
+## Features
 
-### Basic Hooks
+### Core Capabilities
 
 - 🎯 **Simple Composables API**
 
@@ -75,6 +75,37 @@
   - Responsive design ready
   - Dynamic constraints
 
+### Advanced Features
+
+- 🎯 **Smart Grouping**
+
+  - Element groups
+  - Zone filtering
+  - Nested groups
+  - Dynamic group validation
+
+- 📊 **Rich Events System**
+
+  - Comprehensive lifecycle events
+  - Custom event handlers
+  - Drag state tracking
+  - Position coordinates
+
+- 🛡️ **Built-in Utilities**
+
+  - Geometry calculations
+  - Bounding box tracking
+  - Position management
+  - Intersection detection
+
+### Integration
+
+- 🔌 **Framework Integration**
+  - Vue 3 Composition API
+  - Nuxt.js compatible
+  - Works with SSR
+  - Plugin ecosystem ready
+
 ## Installation
 
 Choose your preferred package manager:
@@ -91,10 +122,124 @@ yarn add @vue-dnd-hooks/core
 pnpm install @vue-dnd-hooks/core
 ```
 
+## Basic Usage
+
+### App.vue
+
+<sup>📄 Root Application Component</sup>
+
+```vue
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { DragOverlay } from '@vue-dnd-hooks/core';
+  import Draggable from './components/Draggable.vue';
+  import Droppable from './components/Droppable.vue';
+
+  const handleDrop = () => (elementInDropZone.value = true);
+
+  const handleEnd = () => (elementInDropZone.value = false);
+
+  const elementInDropZone = ref<boolean>(false);
+</script>
+
+<template>
+  <div>
+    <Draggable v-if="!elementInDropZone"> drag me </Draggable>
+    <Droppable @drop="handleDrop">
+      <Draggable
+        v-if="elementInDropZone"
+        @end="handleEnd"
+      >
+        im in drop zone
+      </Draggable>
+    </Droppable>
+
+    <DragOverlay />
+  </div>
+</template>
+```
+
+### Draggable.vue
+
+<sup>🧩 components/Draggable.vue</sup>
+
+```vue
+<script setup lang="ts">
+  import { useDraggable } from '@vue-dnd-hooks/core';
+
+  const emit = defineEmits<{
+    (e: 'end'): void;
+  }>();
+
+  const { elementRef, handleDragStart, isDragging } = useDraggable({
+    events: { onEnd: () => emit('end') },
+  });
+</script>
+
+<template>
+  <div
+    ref="elementRef"
+    @pointerdown="handleDragStart"
+    :class="{ dragging: isDragging }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+  .dragging {
+    opacity: 0.5;
+  }
+</style>
+```
+
+### Droppable.vue
+
+<sup>🧩 components/Droppable.vue</sup>
+
+```vue
+<script setup lang="ts">
+  import { useDroppable } from '@vue-dnd-hooks/core';
+
+  const emit = defineEmits<{
+    (e: 'drop'): void;
+  }>();
+
+  const { elementRef, isOvered } = useDroppable({
+    events: { onDrop: () => emit('drop') },
+  });
+</script>
+
+<template>
+  <div
+    ref="elementRef"
+    :class="{
+      droppable: true,
+      'is-overed': isOvered,
+    }"
+  >
+    drop here
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+  .droppable {
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+  }
+  .is-overed {
+    background-color: #f0f0f0;
+    border: 1px dashed red;
+  }
+</style>
+```
+
 ## 📄 License
 
 [MIT](LICENSE) © [ZiZiGY](https://github.com/ZiZiGY)
 
 ---
 
-<p align="center">Made with ❤️ for the Vue.js community</p>
+<p align="center">Made with ❤️ for the Vue.js community</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-dnd-kit/core",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces",
   "author": "ZiZIGY",
   "license": "MIT",