vue-dnd-sortable 0.1.4 → 0.1.5
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 +73 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,81 @@
|
|
|
1
|
-
#
|
|
1
|
+
# vue-dnd-sortable
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A minimal drag-and-drop sortable list component library for Vue 3.
|
|
4
|
+
**⚠️ Warning: This package is experimental and poorly tested. Use at your own risk.**
|
|
5
|
+
|
|
6
|
+
## Features
|
|
7
|
+
|
|
8
|
+
- Lightweight and flexible
|
|
9
|
+
- Built with Vue 3 Composition API
|
|
10
|
+
- Supports drag handles and custom spacing
|
|
11
|
+
- Simple API using `<SortableContext>`, `<SortableItem>`, and `<SortableHandle>`
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
4
16
|
|
|
5
17
|
```bash
|
|
6
|
-
bun
|
|
7
|
-
|
|
18
|
+
bun add vue-dnd-sortable
|
|
19
|
+
````
|
|
8
20
|
|
|
9
|
-
|
|
21
|
+
or
|
|
10
22
|
|
|
11
23
|
```bash
|
|
12
|
-
|
|
24
|
+
npm install vue-dnd-sortable
|
|
13
25
|
```
|
|
14
26
|
|
|
15
|
-
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Usage Example
|
|
30
|
+
|
|
31
|
+
```vue
|
|
32
|
+
<script setup lang="ts">
|
|
33
|
+
import { ref } from 'vue'
|
|
34
|
+
import {
|
|
35
|
+
arrayMove,
|
|
36
|
+
SortableContext,
|
|
37
|
+
SortableItem,
|
|
38
|
+
SortableHandle
|
|
39
|
+
} from 'vue-dnd-sortable'
|
|
40
|
+
|
|
41
|
+
const items = ref([1, 2, 3, 4, 5, 6])
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<template>
|
|
45
|
+
<SortableContext axis="y" :items @end="items = arrayMove(items, $event)">
|
|
46
|
+
<div
|
|
47
|
+
style="display: flex; flex-direction: column; gap: 16px; width: 400px; margin: 0 auto;"
|
|
48
|
+
>
|
|
49
|
+
<SortableItem
|
|
50
|
+
v-for="(item, index) in items"
|
|
51
|
+
:id="item"
|
|
52
|
+
:key="item"
|
|
53
|
+
>
|
|
54
|
+
<SortableHandle>
|
|
55
|
+
handle
|
|
56
|
+
</SortableHandle>
|
|
57
|
+
|
|
58
|
+
{{ item }}
|
|
59
|
+
</SortableItem>
|
|
60
|
+
</div>
|
|
61
|
+
</SortableContext>
|
|
62
|
+
</template>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## Disclaimer
|
|
68
|
+
|
|
69
|
+
This library is still in an **experimental** state.
|
|
70
|
+
|
|
71
|
+
* ❌ No comprehensive test coverage
|
|
72
|
+
* ❌ May contain unexpected bugs or breaking changes
|
|
73
|
+
* ❌ API is unstable and subject to change
|
|
74
|
+
|
|
75
|
+
Please test thoroughly before using in production.
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## License
|
|
80
|
+
|
|
81
|
+
MIT
|