@vue-dnd-kit/core 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.txt +245 -0
- package/package.json +1 -1
- package/README.md +0 -100
package/README.txt
ADDED
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
# Vue Drag & Drop Library - Core Package
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://zizigy.github.io/vue-dnd-hooks/">
|
|
5
|
+
<img src="https://raw.githubusercontent.com/ZiZiGY/vue-dnd-hooks/master/public/logo.svg" width="400" alt="Vue Drag & Drop Logo">
|
|
6
|
+
</a>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
Core package of the Vue Drag & Drop library with essential hooks and functionality.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
<a href="https://zizigy.github.io/vue-dnd-hooks/" target="_blank">
|
|
15
|
+
<img src="https://img.shields.io/badge/Documentation-Visit-blue?style=flat-square" alt="Documentation">
|
|
16
|
+
</a>
|
|
17
|
+
</p>
|
|
18
|
+
|
|
19
|
+
<p align="center">
|
|
20
|
+
Inspired by the popular <a href="https://dndkit.com/" target="_blank">React DnD Kit</a> library, adapted for Vue.js
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
## Features
|
|
24
|
+
|
|
25
|
+
### Core Capabilities
|
|
26
|
+
|
|
27
|
+
- 🎯 **Simple Composables API**
|
|
28
|
+
|
|
29
|
+
- Intuitive hooks-based approach
|
|
30
|
+
- Clean and declarative syntax
|
|
31
|
+
- Minimal boilerplate code
|
|
32
|
+
|
|
33
|
+
- 🎨 **Full Customization**
|
|
34
|
+
|
|
35
|
+
- Custom drag overlays
|
|
36
|
+
- Flexible styling system
|
|
37
|
+
- Animation support
|
|
38
|
+
- Custom drag handles
|
|
39
|
+
|
|
40
|
+
- 📱 **Advanced Input Support**
|
|
41
|
+
|
|
42
|
+
- Touch devices support
|
|
43
|
+
- Mouse events
|
|
44
|
+
- Multi-touch gestures
|
|
45
|
+
|
|
46
|
+
### Performance
|
|
47
|
+
|
|
48
|
+
- ⚡ **Optimized Rendering**
|
|
49
|
+
|
|
50
|
+
- Virtual DOM friendly
|
|
51
|
+
- Minimal re-renders
|
|
52
|
+
- Efficient DOM updates
|
|
53
|
+
- Memory leak prevention
|
|
54
|
+
|
|
55
|
+
- 🔄 **Smart Auto-scrolling**
|
|
56
|
+
|
|
57
|
+
- Smooth scroll animations
|
|
58
|
+
- Configurable thresholds
|
|
59
|
+
- Performance-optimized
|
|
60
|
+
- Works with nested scrollable containers
|
|
61
|
+
|
|
62
|
+
### Developer Experience
|
|
63
|
+
|
|
64
|
+
- 🔍 **TypeScript Ready**
|
|
65
|
+
|
|
66
|
+
- Full type coverage
|
|
67
|
+
- Type inference
|
|
68
|
+
- IDE autocompletion
|
|
69
|
+
- Type-safe events
|
|
70
|
+
|
|
71
|
+
- 📐 **Layout Features**
|
|
72
|
+
|
|
73
|
+
- Grid system support
|
|
74
|
+
- Flex layout compatible
|
|
75
|
+
- Responsive design ready
|
|
76
|
+
- Dynamic constraints
|
|
77
|
+
|
|
78
|
+
### Advanced Features
|
|
79
|
+
|
|
80
|
+
- 🎯 **Smart Grouping**
|
|
81
|
+
|
|
82
|
+
- Element groups
|
|
83
|
+
- Zone filtering
|
|
84
|
+
- Nested groups
|
|
85
|
+
- Dynamic group validation
|
|
86
|
+
|
|
87
|
+
- 📊 **Rich Events System**
|
|
88
|
+
|
|
89
|
+
- Comprehensive lifecycle events
|
|
90
|
+
- Custom event handlers
|
|
91
|
+
- Drag state tracking
|
|
92
|
+
- Position coordinates
|
|
93
|
+
|
|
94
|
+
- 🛡️ **Built-in Utilities**
|
|
95
|
+
|
|
96
|
+
- Geometry calculations
|
|
97
|
+
- Bounding box tracking
|
|
98
|
+
- Position management
|
|
99
|
+
- Intersection detection
|
|
100
|
+
|
|
101
|
+
### Integration
|
|
102
|
+
|
|
103
|
+
- 🔌 **Framework Integration**
|
|
104
|
+
- Vue 3 Composition API
|
|
105
|
+
- Nuxt.js compatible
|
|
106
|
+
- Works with SSR
|
|
107
|
+
- Plugin ecosystem ready
|
|
108
|
+
|
|
109
|
+
## Installation
|
|
110
|
+
|
|
111
|
+
Choose your preferred package manager:
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm install @vue-dnd-kit/core
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
yarn add @vue-dnd-kit/core
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
```bash
|
|
122
|
+
pnpm install @vue-dnd-kit/core
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## Basic Usage
|
|
126
|
+
|
|
127
|
+
### App.vue
|
|
128
|
+
|
|
129
|
+
<sup>📄 Root Application Component</sup>
|
|
130
|
+
|
|
131
|
+
```vue
|
|
132
|
+
<script setup lang="ts">
|
|
133
|
+
import { ref } from 'vue';
|
|
134
|
+
import { DragOverlay } from '@vue-dnd-kit/core';
|
|
135
|
+
import Draggable from './components/Draggable.vue';
|
|
136
|
+
import Droppable from './components/Droppable.vue';
|
|
137
|
+
|
|
138
|
+
const handleDrop = () => (elementInDropZone.value = true);
|
|
139
|
+
|
|
140
|
+
const handleEnd = () => (elementInDropZone.value = false);
|
|
141
|
+
|
|
142
|
+
const elementInDropZone = ref<boolean>(false);
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<template>
|
|
146
|
+
<div>
|
|
147
|
+
<Draggable v-if="!elementInDropZone"> drag me </Draggable>
|
|
148
|
+
<Droppable @drop="handleDrop">
|
|
149
|
+
<Draggable
|
|
150
|
+
v-if="elementInDropZone"
|
|
151
|
+
@end="handleEnd"
|
|
152
|
+
>
|
|
153
|
+
im in drop zone
|
|
154
|
+
</Draggable>
|
|
155
|
+
</Droppable>
|
|
156
|
+
|
|
157
|
+
<DragOverlay />
|
|
158
|
+
</div>
|
|
159
|
+
</template>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Draggable.vue
|
|
163
|
+
|
|
164
|
+
<sup>🧩 components/Draggable.vue</sup>
|
|
165
|
+
|
|
166
|
+
```vue
|
|
167
|
+
<script setup lang="ts">
|
|
168
|
+
import { useDraggable } from '@vue-dnd-kit/core';
|
|
169
|
+
|
|
170
|
+
const emit = defineEmits<{
|
|
171
|
+
(e: 'end'): void;
|
|
172
|
+
}>();
|
|
173
|
+
|
|
174
|
+
const { elementRef, handleDragStart, isDragging } = useDraggable({
|
|
175
|
+
events: { onEnd: () => emit('end') },
|
|
176
|
+
});
|
|
177
|
+
</script>
|
|
178
|
+
|
|
179
|
+
<template>
|
|
180
|
+
<div
|
|
181
|
+
ref="elementRef"
|
|
182
|
+
@pointerdown="handleDragStart"
|
|
183
|
+
:class="{ dragging: isDragging }"
|
|
184
|
+
>
|
|
185
|
+
<slot />
|
|
186
|
+
</div>
|
|
187
|
+
</template>
|
|
188
|
+
|
|
189
|
+
<style scoped>
|
|
190
|
+
.dragging {
|
|
191
|
+
opacity: 0.5;
|
|
192
|
+
}
|
|
193
|
+
</style>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
### Droppable.vue
|
|
197
|
+
|
|
198
|
+
<sup>🧩 components/Droppable.vue</sup>
|
|
199
|
+
|
|
200
|
+
```vue
|
|
201
|
+
<script setup lang="ts">
|
|
202
|
+
import { useDroppable } from '@vue-dnd-kit/core';
|
|
203
|
+
|
|
204
|
+
const emit = defineEmits<{
|
|
205
|
+
(e: 'drop'): void;
|
|
206
|
+
}>();
|
|
207
|
+
|
|
208
|
+
const { elementRef, isOvered } = useDroppable({
|
|
209
|
+
events: { onDrop: () => emit('drop') },
|
|
210
|
+
});
|
|
211
|
+
</script>
|
|
212
|
+
|
|
213
|
+
<template>
|
|
214
|
+
<div
|
|
215
|
+
ref="elementRef"
|
|
216
|
+
:class="{
|
|
217
|
+
droppable: true,
|
|
218
|
+
'is-overed': isOvered,
|
|
219
|
+
}"
|
|
220
|
+
>
|
|
221
|
+
drop here
|
|
222
|
+
<slot />
|
|
223
|
+
</div>
|
|
224
|
+
</template>
|
|
225
|
+
|
|
226
|
+
<style scoped>
|
|
227
|
+
.droppable {
|
|
228
|
+
width: 100px;
|
|
229
|
+
height: 100px;
|
|
230
|
+
border: 1px solid black;
|
|
231
|
+
}
|
|
232
|
+
.is-overed {
|
|
233
|
+
background-color: #f0f0f0;
|
|
234
|
+
border: 1px dashed red;
|
|
235
|
+
}
|
|
236
|
+
</style>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
## 📄 License
|
|
240
|
+
|
|
241
|
+
[MIT](LICENSE) © [ZiZiGY](https://github.com/ZiZiGY)
|
|
242
|
+
|
|
243
|
+
---
|
|
244
|
+
|
|
245
|
+
<p align="center">Made with ❤️ for the Vue.js community</p>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-dnd-kit/core",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"description": "Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces",
|
|
5
5
|
"author": "ZiZIGY",
|
|
6
6
|
"license": "MIT",
|
package/README.md
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
# Vue Drag & Drop Hooks Core
|
|
2
|
-
|
|
3
|
-
<p align="center">
|
|
4
|
-
<a href="https://zizigy.github.io/vue-dnd-hooks/">
|
|
5
|
-
<img src="https://raw.githubusercontent.com/ZiZiGY/vue-dnd-hooks/master/public/logo.svg" width="400" alt="Vue Drag & Drop Logo">
|
|
6
|
-
</a>
|
|
7
|
-
</p>
|
|
8
|
-
|
|
9
|
-
<p align="center">
|
|
10
|
-
Core package of the Vue Drag & Drop library with essential hooks and functionality.
|
|
11
|
-
</p>
|
|
12
|
-
|
|
13
|
-
<p align="center">
|
|
14
|
-
<a href="https://zizigy.github.io/vue-dnd-hooks/" target="_blank">
|
|
15
|
-
<img src="https://img.shields.io/badge/Documentation-Visit-blue?style=flat-square" alt="Documentation">
|
|
16
|
-
</a>
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
<p align="center">
|
|
20
|
-
Inspired by the popular <a href="https://dndkit.com/" target="_blank">React DnD Kit</a> library, adapted for Vue.js
|
|
21
|
-
</p>
|
|
22
|
-
|
|
23
|
-
## Core Features
|
|
24
|
-
|
|
25
|
-
### Basic Hooks
|
|
26
|
-
|
|
27
|
-
- 🎯 **Simple Composables API**
|
|
28
|
-
|
|
29
|
-
- Intuitive hooks-based approach
|
|
30
|
-
- Clean and declarative syntax
|
|
31
|
-
- Minimal boilerplate code
|
|
32
|
-
|
|
33
|
-
- 🎨 **Full Customization**
|
|
34
|
-
|
|
35
|
-
- Custom drag overlays
|
|
36
|
-
- Flexible styling system
|
|
37
|
-
- Animation support
|
|
38
|
-
- Custom drag handles
|
|
39
|
-
|
|
40
|
-
- 📱 **Advanced Input Support**
|
|
41
|
-
|
|
42
|
-
- Touch devices support
|
|
43
|
-
- Mouse events
|
|
44
|
-
- Multi-touch gestures
|
|
45
|
-
|
|
46
|
-
### Performance
|
|
47
|
-
|
|
48
|
-
- ⚡ **Optimized Rendering**
|
|
49
|
-
|
|
50
|
-
- Virtual DOM friendly
|
|
51
|
-
- Minimal re-renders
|
|
52
|
-
- Efficient DOM updates
|
|
53
|
-
- Memory leak prevention
|
|
54
|
-
|
|
55
|
-
- 🔄 **Smart Auto-scrolling**
|
|
56
|
-
|
|
57
|
-
- Smooth scroll animations
|
|
58
|
-
- Configurable thresholds
|
|
59
|
-
- Performance-optimized
|
|
60
|
-
- Works with nested scrollable containers
|
|
61
|
-
|
|
62
|
-
### Developer Experience
|
|
63
|
-
|
|
64
|
-
- 🔍 **TypeScript Ready**
|
|
65
|
-
|
|
66
|
-
- Full type coverage
|
|
67
|
-
- Type inference
|
|
68
|
-
- IDE autocompletion
|
|
69
|
-
- Type-safe events
|
|
70
|
-
|
|
71
|
-
- 📐 **Layout Features**
|
|
72
|
-
|
|
73
|
-
- Grid system support
|
|
74
|
-
- Flex layout compatible
|
|
75
|
-
- Responsive design ready
|
|
76
|
-
- Dynamic constraints
|
|
77
|
-
|
|
78
|
-
## Installation
|
|
79
|
-
|
|
80
|
-
Choose your preferred package manager:
|
|
81
|
-
|
|
82
|
-
```bash
|
|
83
|
-
npm install @vue-dnd-hooks/core
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
```bash
|
|
87
|
-
yarn add @vue-dnd-hooks/core
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
```bash
|
|
91
|
-
pnpm install @vue-dnd-hooks/core
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
## 📄 License
|
|
95
|
-
|
|
96
|
-
[MIT](LICENSE) © [ZiZiGY](https://github.com/ZiZiGY)
|
|
97
|
-
|
|
98
|
-
---
|
|
99
|
-
|
|
100
|
-
<p align="center">Made with ❤️ for the Vue.js community</p>
|