vue-dnd-sortable 0.1.4 → 0.1.6
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 +79 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,87 @@
|
|
|
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
|
+
---
|
|
7
|
+
|
|
8
|
+
## 🚨 Disclaimer
|
|
9
|
+
|
|
10
|
+
This library is:
|
|
11
|
+
|
|
12
|
+
- 🧪 **Experimental**
|
|
13
|
+
- ❌ **Missing many essential features**
|
|
14
|
+
- ⚠️ **Poorly tested**
|
|
15
|
+
- 📦 May be **archived** or abandoned at any time
|
|
16
|
+
|
|
17
|
+
It’s intended for personal use or experimentation — **not production-ready**.
|
|
18
|
+
**Use cautiously.**
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Features
|
|
23
|
+
|
|
24
|
+
- Lightweight and flexible
|
|
25
|
+
- Built with Vue 3 Composition API
|
|
26
|
+
- Supports drag handles and custom spacing
|
|
27
|
+
- Simple API using `<SortableContext>`, `<SortableItem>`, and `<SortableHandle>`
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Installation
|
|
4
32
|
|
|
5
33
|
```bash
|
|
6
|
-
bun
|
|
7
|
-
|
|
34
|
+
bun add vue-dnd-sortable
|
|
35
|
+
````
|
|
8
36
|
|
|
9
|
-
|
|
37
|
+
or
|
|
10
38
|
|
|
11
39
|
```bash
|
|
12
|
-
|
|
40
|
+
npm install vue-dnd-sortable
|
|
13
41
|
```
|
|
14
42
|
|
|
15
|
-
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Usage Example
|
|
46
|
+
|
|
47
|
+
```vue
|
|
48
|
+
<script setup lang="ts">
|
|
49
|
+
import { ref } from 'vue'
|
|
50
|
+
import {
|
|
51
|
+
arrayMove,
|
|
52
|
+
SortableContext,
|
|
53
|
+
SortableItem,
|
|
54
|
+
SortableHandle
|
|
55
|
+
} from 'vue-dnd-sortable'
|
|
56
|
+
|
|
57
|
+
const items = ref([1, 2, 3, 4, 5, 6])
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<template>
|
|
61
|
+
<SortableContext axis="y" :items @end="items = arrayMove(items, $event)">
|
|
62
|
+
<div
|
|
63
|
+
style="display: flex; flex-direction: column; gap: 16px; width: 400px; margin: 0 auto;"
|
|
64
|
+
>
|
|
65
|
+
<SortableItem
|
|
66
|
+
v-for="(item, index) in items"
|
|
67
|
+
:id="item"
|
|
68
|
+
:key="item"
|
|
69
|
+
:style="{
|
|
70
|
+
marginBottom: index % 2 === 0 ? '20px' : '50px',
|
|
71
|
+
}"
|
|
72
|
+
>
|
|
73
|
+
<SortableHandle>
|
|
74
|
+
handle
|
|
75
|
+
</SortableHandle>
|
|
76
|
+
{{ item }}
|
|
77
|
+
</SortableItem>
|
|
78
|
+
</div>
|
|
79
|
+
</SortableContext>
|
|
80
|
+
</template>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|