@vue-dnd-kit/core 3.0.0-beta.2 → 3.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/README.md +71 -48
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,74 +1,97 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @vue-dnd-kit/core
|
|
2
2
|
|
|
3
|
-
[](https://github.com/zizigy/vue-dnd-kit)
|
|
4
3
|
[](https://www.npmjs.com/package/@vue-dnd-kit/core)
|
|
4
|
+
[](https://github.com/ZiZIGY/vue-dnd-kit/blob/master/LICENSE)
|
|
5
5
|
|
|
6
6
|
<p align="center">
|
|
7
7
|
<a href="https://zizigy.github.io/vue-dnd-kit/">
|
|
8
|
-
<img src="https://raw.githubusercontent.com/
|
|
8
|
+
<img src="https://raw.githubusercontent.com/ZiZIGY/vue-dnd-kit/master/public/logo.svg" width="400" alt="Vue DnD Kit">
|
|
9
9
|
</a>
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<p align="center">
|
|
17
|
-
<a href="https://zizigy.github.io/vue-dnd-kit/" target="_blank">
|
|
18
|
-
<img src="https://img.shields.io/badge/Documentation-Visit-blue?style=flat-square" alt="Documentation">
|
|
19
|
-
</a>
|
|
20
|
-
</p>
|
|
12
|
+
Drag and drop for Vue 3: sortable lists, kanban boards, trees, multi-drag, files from other
|
|
13
|
+
apps and drop zones — animated, keyboard-ready and announced to screen readers out of the box,
|
|
14
|
+
in your own markup.
|
|
21
15
|
|
|
22
|
-
|
|
23
|
-
Inspired by <a href="https://dndkit.com/" target="_blank">React DnD Kit</a>, adapted for Vue.js
|
|
24
|
-
</p>
|
|
16
|
+
**[Documentation and live examples →](https://zizigy.github.io/vue-dnd-kit/)**
|
|
25
17
|
|
|
26
|
-
|
|
18
|
+
## Install
|
|
27
19
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
```bash
|
|
21
|
+
npm i @vue-dnd-kit/core
|
|
22
|
+
```
|
|
31
23
|
|
|
32
|
-
|
|
33
|
-
- **Flexible** — works with any layout and design system
|
|
34
|
-
- **Accessible** — full keyboard support (start, move, cancel, drop)
|
|
35
|
-
- **TypeScript** — fully typed
|
|
24
|
+
Vue 3.5 or newer. Coming from v2: see [migrating from v2](https://zizigy.github.io/vue-dnd-kit/docs/getting-started/migrating-from-v2).
|
|
36
25
|
|
|
37
|
-
|
|
26
|
+
## A sortable list
|
|
38
27
|
|
|
39
|
-
|
|
28
|
+
```vue
|
|
29
|
+
<!-- App.vue -->
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { DnDProvider } from '@vue-dnd-kit/core';
|
|
32
|
+
import TaskList from './TaskList.vue';
|
|
33
|
+
</script>
|
|
40
34
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
<template>
|
|
36
|
+
<DnDProvider>
|
|
37
|
+
<TaskList />
|
|
38
|
+
</DnDProvider>
|
|
39
|
+
</template>
|
|
40
|
+
```
|
|
46
41
|
|
|
47
|
-
|
|
42
|
+
```vue
|
|
43
|
+
<!-- TaskList.vue -->
|
|
44
|
+
<script setup lang="ts">
|
|
45
|
+
import { ref, useTemplateRef } from 'vue';
|
|
46
|
+
import { makeSortableList } from '@vue-dnd-kit/core';
|
|
47
|
+
import TaskRow from './TaskRow.vue';
|
|
48
|
+
|
|
49
|
+
const tasks = ref([
|
|
50
|
+
{ id: 1, title: 'Write the docs' },
|
|
51
|
+
{ id: 2, title: 'Ship v3' },
|
|
52
|
+
]);
|
|
53
|
+
// `items` is the draft: it reorders while you drag; the drop writes the new order to `tasks`.
|
|
54
|
+
const { items } = makeSortableList(useTemplateRef<HTMLElement>('list'), { items: tasks });
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<template>
|
|
58
|
+
<ul ref="list">
|
|
59
|
+
<TaskRow v-for="task in items" :key="task.id" :task="task" />
|
|
60
|
+
</ul>
|
|
61
|
+
</template>
|
|
62
|
+
```
|
|
48
63
|
|
|
49
|
-
|
|
64
|
+
```vue
|
|
65
|
+
<!-- TaskRow.vue -->
|
|
66
|
+
<script setup lang="ts">
|
|
67
|
+
import { useTemplateRef } from 'vue';
|
|
68
|
+
import { makeSortableItem } from '@vue-dnd-kit/core';
|
|
50
69
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
70
|
+
const props = defineProps<{ task: { id: number; title: string } }>();
|
|
71
|
+
makeSortableItem(useTemplateRef<HTMLElement>('row'), { item: () => props.task });
|
|
72
|
+
</script>
|
|
54
73
|
|
|
55
|
-
|
|
56
|
-
|
|
74
|
+
<template>
|
|
75
|
+
<li ref="row">{{ task.title }}</li>
|
|
76
|
+
</template>
|
|
57
77
|
```
|
|
58
78
|
|
|
59
|
-
|
|
60
|
-
pnpm add @vue-dnd-kit/core
|
|
61
|
-
```
|
|
79
|
+
## What it does
|
|
62
80
|
|
|
63
|
-
**
|
|
81
|
+
- **Sortable lists, grids and trees** that reorder live, and lists that share items: groups,
|
|
82
|
+
copies, swaps, rules for what goes where.
|
|
83
|
+
- **Multi-drag** with your own selection and a rubber band.
|
|
84
|
+
- **Drop zones** with accept rules, and drops you confirm, refuse or apply yourself.
|
|
85
|
+
- **Files and other apps**: the browser's own drag and drop through the same lists and zones.
|
|
86
|
+
- **Animations by default**, or your own with GSAP or motion.
|
|
87
|
+
- **The keyboard and screen readers**: drags by slots, announcements, ARIA attributes.
|
|
88
|
+
- **Virtual lists**, **sensors** of your own, **modifiers**, and SSR.
|
|
64
89
|
|
|
65
|
-
|
|
90
|
+
Related packages: [`@vue-dnd-kit/nuxt`](https://www.npmjs.com/package/@vue-dnd-kit/nuxt) (the
|
|
91
|
+
Nuxt module), [`@vue-dnd-kit/devtools`](https://www.npmjs.com/package/@vue-dnd-kit/devtools)
|
|
92
|
+
(a DevTools tab), [`@vue-dnd-kit/actions`](https://www.npmjs.com/package/@vue-dnd-kit/actions)
|
|
93
|
+
(drags scripted from code).
|
|
66
94
|
|
|
67
95
|
## License
|
|
68
96
|
|
|
69
|
-
[MIT](LICENSE) © [
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
<p align="center">🎉 Congratulations on the official release! 🎉</p>
|
|
74
|
-
<p align="center">Made with ❤️ for the Vue.js community</p>
|
|
97
|
+
[MIT](https://github.com/ZiZIGY/vue-dnd-kit/blob/master/LICENSE) © [ZiZIGY](https://github.com/ZiZIGY)
|