@mixd-id/web-scaffold 0.1.240411050 → 0.1.240411052
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/package.json
CHANGED
|
@@ -149,6 +149,7 @@ export default {
|
|
|
149
149
|
bottom = window.innerHeight - rect.top + 8
|
|
150
150
|
left = Math.round(rect.x)
|
|
151
151
|
transformOrigin = 'bottom left'
|
|
152
|
+
this.transition = 'slideup'
|
|
152
153
|
break
|
|
153
154
|
|
|
154
155
|
case 'top-right':
|
|
@@ -156,6 +157,7 @@ export default {
|
|
|
156
157
|
bottom = window.innerHeight - rect.top + 8
|
|
157
158
|
right = window.innerWidth - (Math.round(rect.x) + rect.width)
|
|
158
159
|
transformOrigin = 'bottom right'
|
|
160
|
+
this.transition = 'slideup'
|
|
159
161
|
break
|
|
160
162
|
|
|
161
163
|
case 'right':
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
<TreeViewItem v-for="(item, index) in modelValue"
|
|
5
5
|
:item="item"
|
|
6
|
+
:depth="0"
|
|
6
7
|
:parent="modelValue"
|
|
7
8
|
:selected-item="selectedItem"
|
|
8
9
|
@moveup="moveUp(item)"
|
|
@@ -11,9 +12,13 @@
|
|
|
11
12
|
@remove="modelValue.splice(index, 1);$emit('change')"
|
|
12
13
|
@add="(items) => $emit('add', items)"
|
|
13
14
|
@duplicate="(parent, item) => $emit('duplicate', parent, item)">
|
|
14
|
-
<template #default="{ item, parent }">
|
|
15
|
-
<slot :item="item" :parent="parent"></slot>
|
|
15
|
+
<template #default="{ item, parent, depth }">
|
|
16
|
+
<slot :item="item" :parent="parent" :depth="depth"></slot>
|
|
16
17
|
</template>
|
|
18
|
+
|
|
19
|
+
<template #item="{ item, parent, depth }">
|
|
20
|
+
<slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
|
|
21
|
+
</template>
|
|
17
22
|
</TreeViewItem>
|
|
18
23
|
|
|
19
24
|
</div>
|
|
@@ -12,28 +12,30 @@
|
|
|
12
12
|
<svg v-else width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
|
|
13
13
|
</button>
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
15
|
+
<slot name="item" :item="item" :parent="parent" :depth="depth">
|
|
16
|
+
<div class="flex-1 flex px-3">
|
|
17
|
+
<slot :item="item" :parent="parent"></slot>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="flex flex-row items-center">
|
|
21
|
+
<button v-if="item && Array.isArray(item.items)"
|
|
22
|
+
type="button"
|
|
23
|
+
class="p-1"
|
|
24
|
+
@click="add">
|
|
25
|
+
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
|
|
26
|
+
</button>
|
|
27
|
+
|
|
28
|
+
<button type="button" class="p-1" @click="duplicate">
|
|
29
|
+
<svg class="fill-text-300 hover:fill-primary" width="13" height="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/></svg>
|
|
30
|
+
</button>
|
|
31
|
+
|
|
32
|
+
<button type="button"
|
|
33
|
+
class="p-1"
|
|
34
|
+
@click="$emit('remove')">
|
|
35
|
+
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
|
|
36
|
+
</button>
|
|
37
|
+
</div>
|
|
38
|
+
</slot>
|
|
37
39
|
|
|
38
40
|
</div>
|
|
39
41
|
<div ref="container"
|
|
@@ -43,6 +45,7 @@
|
|
|
43
45
|
<TreeViewItem v-for="(subItem, index) in item.items"
|
|
44
46
|
:item="subItem"
|
|
45
47
|
:parent="item.items"
|
|
48
|
+
:depth="depth + 1"
|
|
46
49
|
:selected-item="selectedItem"
|
|
47
50
|
@moveup="moveUp(subItem)"
|
|
48
51
|
@movedown="moveDown(subItem)"
|
|
@@ -50,8 +53,12 @@
|
|
|
50
53
|
@add="(items) => $emit('add', items)"
|
|
51
54
|
@duplicate="(parent, item) => $emit('duplicate', parent, item)"
|
|
52
55
|
@change="$emit('change')">
|
|
53
|
-
<template #default="{ item }">
|
|
54
|
-
<slot :item="item"></slot>
|
|
56
|
+
<template #default="{ item, parent, depth }">
|
|
57
|
+
<slot :item="item" :parent="parent" :depth="depth"></slot>
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<template #item="{ item, parent, depth }">
|
|
61
|
+
<slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
|
|
55
62
|
</template>
|
|
56
63
|
</TreeViewItem>
|
|
57
64
|
</div>
|
|
@@ -82,6 +89,8 @@ export default{
|
|
|
82
89
|
type: [ Number, String ],
|
|
83
90
|
default: 1
|
|
84
91
|
},
|
|
92
|
+
|
|
93
|
+
depth: Number
|
|
85
94
|
},
|
|
86
95
|
|
|
87
96
|
methods: {
|