@vue-dnd-kit/core 0.5.7 → 1.0.0
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/LICENSE +21 -21
- package/README.md +306 -260
- package/dist/index.d.ts +9 -9
- package/dist/vue-dnd-kit-core.cjs.js.map +1 -1
- package/dist/vue-dnd-kit-core.es.js.map +1 -1
- package/package.json +73 -73
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 ZiZiGY
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 ZiZiGY
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,260 +1,306 @@
|
|
|
1
|
-
# Vue Drag & Drop Library - Core Package
|
|
2
|
-
|
|
3
|
-
[](https://github.com/zizigy/vue-dnd-kit)
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
<a href="https://zizigy.github.io/vue-dnd-hooks/">
|
|
7
|
+
<img src="https://raw.githubusercontent.com/ZiZiGY/vue-dnd-hooks/master/public/logo.svg" width="400" alt="Vue Drag & Drop Logo">
|
|
8
|
+
</a>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
Core package of the Vue Drag & Drop library with essential hooks and functionality.
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
<p align="center">
|
|
16
|
+
<a href="https://zizigy.github.io/vue-dnd-hooks/" target="_blank">
|
|
17
|
+
<img src="https://img.shields.io/badge/Documentation-Visit-blue?style=flat-square" alt="Documentation">
|
|
18
|
+
</a>
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
<p align="center">
|
|
22
|
+
Inspired by the popular <a href="https://dndkit.com/" target="_blank">React DnD Kit</a> library, adapted for Vue.js
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
## Lightweight & High Performance
|
|
26
|
+
|
|
27
|
+
Vue DnD Kit is designed to be extremely lightweight while delivering exceptional performance. The library has been optimized for:
|
|
28
|
+
|
|
29
|
+
- 🚀 **Minimal bundle size** - keep your application fast and responsive
|
|
30
|
+
- ⚡ **Efficient DOM operations** - optimized for handling large lists and complex interactions
|
|
31
|
+
- 🔄 **Smart rendering** - prevents unnecessary re-renders during drag operations
|
|
32
|
+
- 📱 **Smooth experience** - even on mobile and low-powered devices
|
|
33
|
+
|
|
34
|
+
## Unlimited Flexibility
|
|
35
|
+
|
|
36
|
+
The library is built with flexibility as a core principle, allowing you to implement virtually any drag and drop scenario:
|
|
37
|
+
|
|
38
|
+
- 🎯 **Any UI pattern** - sortable lists, kanban boards, calendars, file uploads, and more
|
|
39
|
+
- 🎨 **Any design system** - works with any UI library or custom components
|
|
40
|
+
- 📐 **Any layout** - grid, flex, or custom positioning systems
|
|
41
|
+
- 🔄 **Any interaction model** - simple drag and drop, multi-select, nested containers
|
|
42
|
+
|
|
43
|
+
## Features
|
|
44
|
+
|
|
45
|
+
### Core Capabilities
|
|
46
|
+
|
|
47
|
+
- 🎯 **Simple Composables API**
|
|
48
|
+
|
|
49
|
+
- Intuitive hooks-based approach
|
|
50
|
+
- Clean and declarative syntax
|
|
51
|
+
- Minimal boilerplate code
|
|
52
|
+
|
|
53
|
+
- 🎨 **Full Customization**
|
|
54
|
+
|
|
55
|
+
- Custom drag overlays
|
|
56
|
+
- Flexible styling system
|
|
57
|
+
- Animation support
|
|
58
|
+
- Custom drag handles
|
|
59
|
+
|
|
60
|
+
- 📱 **Advanced Input Support**
|
|
61
|
+
|
|
62
|
+
- Touch devices support
|
|
63
|
+
- Mouse events
|
|
64
|
+
- Multi-touch gestures
|
|
65
|
+
- **Full keyboard navigation** - complete drag and drop operations using only keyboard
|
|
66
|
+
|
|
67
|
+
### Accessibility
|
|
68
|
+
|
|
69
|
+
- ♿ **Keyboard Navigation**
|
|
70
|
+
- Start and control drag operations with keyboard
|
|
71
|
+
- Arrow keys for movement
|
|
72
|
+
- Space/Enter for selection and dropping
|
|
73
|
+
- Escape to cancel drag operations
|
|
74
|
+
- Tab navigation between draggable elements
|
|
75
|
+
|
|
76
|
+
- 🔍 **Screen Reader Support**
|
|
77
|
+
- ARIA attributes for drag and drop operations
|
|
78
|
+
- Descriptive announcements during interactions
|
|
79
|
+
- Semantic HTML structure
|
|
80
|
+
|
|
81
|
+
### Performance
|
|
82
|
+
|
|
83
|
+
- ⚡ **Optimized Rendering**
|
|
84
|
+
|
|
85
|
+
- Virtual DOM friendly
|
|
86
|
+
- Minimal re-renders
|
|
87
|
+
- Efficient DOM updates
|
|
88
|
+
- Memory leak prevention
|
|
89
|
+
|
|
90
|
+
- 🔄 **Smart Auto-scrolling**
|
|
91
|
+
|
|
92
|
+
- Smooth scroll animations
|
|
93
|
+
- Configurable thresholds
|
|
94
|
+
- Performance-optimized
|
|
95
|
+
- Works with nested scrollable containers
|
|
96
|
+
|
|
97
|
+
### Developer Experience
|
|
98
|
+
|
|
99
|
+
- 🔍 **TypeScript Ready**
|
|
100
|
+
|
|
101
|
+
- Full type coverage
|
|
102
|
+
- Type inference
|
|
103
|
+
- IDE autocompletion
|
|
104
|
+
- Type-safe events
|
|
105
|
+
|
|
106
|
+
- 📐 **Layout Features**
|
|
107
|
+
|
|
108
|
+
- Grid system support
|
|
109
|
+
- Flex layout compatible
|
|
110
|
+
- Responsive design ready
|
|
111
|
+
- Dynamic constraints
|
|
112
|
+
|
|
113
|
+
### Advanced Features
|
|
114
|
+
|
|
115
|
+
- 🎯 **Smart Grouping**
|
|
116
|
+
|
|
117
|
+
- Element groups
|
|
118
|
+
- Zone filtering
|
|
119
|
+
- Nested groups
|
|
120
|
+
- Dynamic group validation
|
|
121
|
+
|
|
122
|
+
- 📊 **Rich Events System**
|
|
123
|
+
|
|
124
|
+
- Comprehensive lifecycle events
|
|
125
|
+
- Custom event handlers
|
|
126
|
+
- Drag state tracking
|
|
127
|
+
- Position coordinates
|
|
128
|
+
|
|
129
|
+
- 🛡️ **Built-in Utilities**
|
|
130
|
+
|
|
131
|
+
- Geometry calculations
|
|
132
|
+
- Bounding box tracking
|
|
133
|
+
- Position management
|
|
134
|
+
- Intersection detection
|
|
135
|
+
|
|
136
|
+
### Integration
|
|
137
|
+
|
|
138
|
+
- 🔌 **Framework Integration**
|
|
139
|
+
- Vue 3 Composition API
|
|
140
|
+
- Nuxt.js compatible
|
|
141
|
+
- Works with SSR
|
|
142
|
+
- Plugin ecosystem ready
|
|
143
|
+
|
|
144
|
+
## Installation
|
|
145
|
+
|
|
146
|
+
Choose your preferred package manager:
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
npm install @vue-dnd-kit/core @vueuse/core
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
yarn add @vue-dnd-kit/core @vueuse/core
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
```bash
|
|
157
|
+
pnpm install @vue-dnd-kit/core @vueuse/core
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Setup as a Plugin
|
|
161
|
+
|
|
162
|
+
You can register the library as a Vue plugin in your main.ts/js file:
|
|
163
|
+
|
|
164
|
+
```typescript
|
|
165
|
+
import { createApp } from 'vue';
|
|
166
|
+
import App from './App.vue';
|
|
167
|
+
import VueDnDKitPlugin from '@vue-dnd-kit/core';
|
|
168
|
+
|
|
169
|
+
const app = createApp(App);
|
|
170
|
+
|
|
171
|
+
// Register the plugin
|
|
172
|
+
app.use(VueDnDKitPlugin);
|
|
173
|
+
|
|
174
|
+
app.mount('#app');
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
This will make all the components and composables globally available in your application.
|
|
178
|
+
|
|
179
|
+
## Basic Usage
|
|
180
|
+
|
|
181
|
+
### App.vue
|
|
182
|
+
|
|
183
|
+
<sup>📄 Root Application Component</sup>
|
|
184
|
+
|
|
185
|
+
```vue
|
|
186
|
+
<script setup lang="ts">
|
|
187
|
+
import { ref } from 'vue';
|
|
188
|
+
import { DragOverlay } from '@vue-dnd-kit/core';
|
|
189
|
+
import Draggable from './components/Draggable.vue';
|
|
190
|
+
import Droppable from './components/Droppable.vue';
|
|
191
|
+
|
|
192
|
+
const handleDrop = () => (elementInDropZone.value = true);
|
|
193
|
+
|
|
194
|
+
const handleEnd = () => (elementInDropZone.value = false);
|
|
195
|
+
|
|
196
|
+
const elementInDropZone = ref<boolean>(false);
|
|
197
|
+
</script>
|
|
198
|
+
|
|
199
|
+
<template>
|
|
200
|
+
<div>
|
|
201
|
+
<Draggable v-if="!elementInDropZone"> drag me </Draggable>
|
|
202
|
+
<Droppable @drop="handleDrop">
|
|
203
|
+
<Draggable
|
|
204
|
+
v-if="elementInDropZone"
|
|
205
|
+
@end="handleEnd"
|
|
206
|
+
>
|
|
207
|
+
im in drop zone
|
|
208
|
+
</Draggable>
|
|
209
|
+
</Droppable>
|
|
210
|
+
|
|
211
|
+
<DragOverlay />
|
|
212
|
+
</div>
|
|
213
|
+
</template>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Draggable.vue
|
|
217
|
+
|
|
218
|
+
<sup>🧩 components/Draggable.vue</sup>
|
|
219
|
+
|
|
220
|
+
```vue
|
|
221
|
+
<script setup lang="ts">
|
|
222
|
+
import { useDraggable } from '@vue-dnd-kit/core';
|
|
223
|
+
|
|
224
|
+
const emit = defineEmits<{
|
|
225
|
+
(e: 'end'): void;
|
|
226
|
+
}>();
|
|
227
|
+
|
|
228
|
+
const { elementRef, handleDragStart, isDragging } = useDraggable({
|
|
229
|
+
events: { onEnd: () => emit('end') },
|
|
230
|
+
});
|
|
231
|
+
</script>
|
|
232
|
+
|
|
233
|
+
<template>
|
|
234
|
+
<div
|
|
235
|
+
ref="elementRef"
|
|
236
|
+
@pointerdown="handleDragStart"
|
|
237
|
+
:class="{ dragging: isDragging }"
|
|
238
|
+
tabindex="0"
|
|
239
|
+
role="button"
|
|
240
|
+
aria-grabbed="false"
|
|
241
|
+
:aria-pressed="isDragging"
|
|
242
|
+
>
|
|
243
|
+
<slot />
|
|
244
|
+
</div>
|
|
245
|
+
</template>
|
|
246
|
+
|
|
247
|
+
<style scoped>
|
|
248
|
+
.dragging {
|
|
249
|
+
opacity: 0.5;
|
|
250
|
+
}
|
|
251
|
+
</style>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
### Droppable.vue
|
|
255
|
+
|
|
256
|
+
<sup>🧩 components/Droppable.vue</sup>
|
|
257
|
+
|
|
258
|
+
```vue
|
|
259
|
+
<script setup lang="ts">
|
|
260
|
+
import { useDroppable } from '@vue-dnd-kit/core';
|
|
261
|
+
|
|
262
|
+
const emit = defineEmits<{
|
|
263
|
+
(e: 'drop'): void;
|
|
264
|
+
}>();
|
|
265
|
+
|
|
266
|
+
const { elementRef, isOvered } = useDroppable({
|
|
267
|
+
events: { onDrop: () => emit('drop') },
|
|
268
|
+
});
|
|
269
|
+
</script>
|
|
270
|
+
|
|
271
|
+
<template>
|
|
272
|
+
<div
|
|
273
|
+
ref="elementRef"
|
|
274
|
+
:class="{
|
|
275
|
+
droppable: true,
|
|
276
|
+
'is-overed': isOvered,
|
|
277
|
+
}"
|
|
278
|
+
role="region"
|
|
279
|
+
aria-dropeffect="move"
|
|
280
|
+
>
|
|
281
|
+
drop here
|
|
282
|
+
<slot />
|
|
283
|
+
</div>
|
|
284
|
+
</template>
|
|
285
|
+
|
|
286
|
+
<style scoped>
|
|
287
|
+
.droppable {
|
|
288
|
+
width: 100px;
|
|
289
|
+
height: 100px;
|
|
290
|
+
border: 1px solid black;
|
|
291
|
+
}
|
|
292
|
+
.is-overed {
|
|
293
|
+
background-color: #f0f0f0;
|
|
294
|
+
border: 1px dashed red;
|
|
295
|
+
}
|
|
296
|
+
</style>
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
## 📄 License
|
|
300
|
+
|
|
301
|
+
[MIT](LICENSE) © [ZiZiGY](https://github.com/ZiZiGY)
|
|
302
|
+
|
|
303
|
+
---
|
|
304
|
+
|
|
305
|
+
<p align="center">🎉 Congratulations on the official release! 🎉</p>
|
|
306
|
+
<p align="center">Made with ❤️ for the Vue.js community</p>
|
package/dist/index.d.ts
CHANGED
|
@@ -2011,12 +2011,12 @@ export default VueDndKitPlugin;
|
|
|
2011
2011
|
|
|
2012
2012
|
export { }
|
|
2013
2013
|
|
|
2014
|
-
|
|
2015
|
-
declare module '@vue/runtime-core' {
|
|
2016
|
-
interface App {
|
|
2017
|
-
__VUE_DND_KIT_OVERLAY__?: {
|
|
2018
|
-
container: HTMLElement;
|
|
2019
|
-
vnode: any;
|
|
2020
|
-
};
|
|
2021
|
-
}
|
|
2022
|
-
}
|
|
2014
|
+
|
|
2015
|
+
declare module '@vue/runtime-core' {
|
|
2016
|
+
interface App {
|
|
2017
|
+
__VUE_DND_KIT_OVERLAY__?: {
|
|
2018
|
+
container: HTMLElement;
|
|
2019
|
+
vnode: any;
|
|
2020
|
+
};
|
|
2021
|
+
}
|
|
2022
|
+
}
|