@mixd-id/web-scaffold 0.1.230406065 → 0.1.230406066
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 +1 -1
- package/src/components/Box.vue +25 -2
- package/src/components/Carousel.vue +7 -2
- package/src/components/Flex.vue +14 -14
- package/src/components/Grid.vue +39 -13
- package/src/components/HTMLEditor.vue +32 -30
- package/src/components/Image.vue +21 -15
- package/src/components/ListView.vue +4 -0
- package/src/components/Modal.vue +10 -8
- package/src/components/Textbox.vue +3 -2
- package/src/components/TreeView.vue +4 -11
- package/src/components/TreeViewItem.vue +37 -22
- package/src/index.js +21 -3
- package/src/utils/helpers.mjs +43 -1
package/package.json
CHANGED
package/src/components/Box.vue
CHANGED
|
@@ -1,19 +1,42 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="
|
|
2
|
+
<div :class="computedClass">
|
|
3
3
|
<h1>{{ title }}</h1>
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script>
|
|
8
8
|
|
|
9
|
+
import {_applyClass, mediaPrefixes} from "../utils/helpers.mjs";
|
|
10
|
+
|
|
9
11
|
export default{
|
|
10
12
|
|
|
13
|
+
computed: {
|
|
14
|
+
|
|
15
|
+
computedClass(){
|
|
16
|
+
|
|
17
|
+
const classNames = [
|
|
18
|
+
this.$style.comp
|
|
19
|
+
]
|
|
20
|
+
|
|
21
|
+
classNames.push(..._applyClass(this.$props, { display:'flex' }))
|
|
22
|
+
|
|
23
|
+
return classNames.join(' ')
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
},
|
|
27
|
+
|
|
11
28
|
props: {
|
|
12
29
|
|
|
13
30
|
title: {
|
|
14
31
|
type: String,
|
|
15
32
|
default: 'Box'
|
|
16
|
-
}
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
margin: Array,
|
|
36
|
+
|
|
37
|
+
padding: Array,
|
|
38
|
+
|
|
39
|
+
display: Array
|
|
17
40
|
|
|
18
41
|
}
|
|
19
42
|
|
|
@@ -54,7 +54,12 @@ export default{
|
|
|
54
54
|
|
|
55
55
|
images: {
|
|
56
56
|
type: Array,
|
|
57
|
-
default: [
|
|
57
|
+
default: [
|
|
58
|
+
/*{
|
|
59
|
+
imageUrl: '',
|
|
60
|
+
target: ''
|
|
61
|
+
}*/
|
|
62
|
+
]
|
|
58
63
|
},
|
|
59
64
|
|
|
60
65
|
infinite: {
|
|
@@ -290,4 +295,4 @@ export default{
|
|
|
290
295
|
background: rgba(0, 0, 0, .6);
|
|
291
296
|
}
|
|
292
297
|
|
|
293
|
-
</style>
|
|
298
|
+
</style>
|
package/src/components/Flex.vue
CHANGED
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
|
|
4
4
|
<component v-for="(item, idx) in items"
|
|
5
5
|
:is="item.type"
|
|
6
|
-
:="item.props"
|
|
7
6
|
:items="item.items"
|
|
8
|
-
|
|
7
|
+
:="item.props"
|
|
8
|
+
:class="classOf(item, idx)" />
|
|
9
9
|
|
|
10
10
|
</div>
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script>
|
|
14
14
|
|
|
15
|
+
import {_applyClass, mediaPrefixes} from "../utils/helpers.mjs";
|
|
16
|
+
|
|
15
17
|
export default{
|
|
16
18
|
|
|
17
19
|
props:{
|
|
@@ -20,6 +22,9 @@ export default{
|
|
|
20
22
|
columnType: Array,
|
|
21
23
|
columns: Array,
|
|
22
24
|
gap: Array,
|
|
25
|
+
padding: Array,
|
|
26
|
+
margin: Array,
|
|
27
|
+
display: Array,
|
|
23
28
|
},
|
|
24
29
|
|
|
25
30
|
computed: {
|
|
@@ -32,15 +37,11 @@ export default{
|
|
|
32
37
|
|
|
33
38
|
if(Array.isArray(this.type)){
|
|
34
39
|
for(let i in this.type){
|
|
35
|
-
classNames.push(
|
|
40
|
+
classNames.push(mediaPrefixes[i] + 'flex-' + this.type[i])
|
|
36
41
|
}
|
|
37
42
|
}
|
|
38
43
|
|
|
39
|
-
|
|
40
|
-
for(let i in this.gap){
|
|
41
|
-
classNames.push(this.prefixes[i] + 'gap-' + this.gap[i])
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
+
classNames.push(..._applyClass(this.$props))
|
|
44
45
|
|
|
45
46
|
return classNames.join(' ')
|
|
46
47
|
}
|
|
@@ -58,22 +59,21 @@ export default{
|
|
|
58
59
|
if(!column) continue
|
|
59
60
|
|
|
60
61
|
if(column && column.width !== 'auto'){
|
|
61
|
-
classNames.push(`${
|
|
62
|
+
classNames.push(`${mediaPrefixes[i]}w-[${column.width}]`)
|
|
62
63
|
}
|
|
63
64
|
else{
|
|
64
|
-
classNames.push(`${
|
|
65
|
+
classNames.push(`${mediaPrefixes[i]}flex-1`)
|
|
65
66
|
}
|
|
66
67
|
}
|
|
68
|
+
|
|
69
|
+
classNames.push(..._applyClass(item.props))
|
|
70
|
+
|
|
67
71
|
return classNames.join(' ')
|
|
68
72
|
}
|
|
69
73
|
},
|
|
70
74
|
|
|
71
75
|
data(){
|
|
72
76
|
return {
|
|
73
|
-
prefixes: [
|
|
74
|
-
'',
|
|
75
|
-
'md:'
|
|
76
|
-
]
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
package/src/components/Grid.vue
CHANGED
|
@@ -1,38 +1,64 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="gridClass">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
|
|
4
|
+
<component v-for="item in items"
|
|
5
|
+
:is="item.type"
|
|
6
|
+
:items="item.items"
|
|
7
|
+
:="item.props"
|
|
8
|
+
:class="classOf(item)" />
|
|
9
|
+
|
|
5
10
|
</div>
|
|
6
11
|
</template>
|
|
7
12
|
|
|
8
13
|
<script>
|
|
9
14
|
|
|
15
|
+
import {_applyClass, mediaPrefixes} from "../utils/helpers.mjs";
|
|
16
|
+
|
|
10
17
|
export default{
|
|
11
18
|
|
|
12
19
|
props:{
|
|
13
20
|
items: Array,
|
|
14
|
-
columns:
|
|
15
|
-
gap:
|
|
21
|
+
columns: Array,
|
|
22
|
+
gap: Array,
|
|
23
|
+
padding: Array,
|
|
24
|
+
margin: Array,
|
|
25
|
+
display: Array,
|
|
26
|
+
type: String
|
|
16
27
|
},
|
|
17
28
|
|
|
18
29
|
computed:{
|
|
30
|
+
|
|
19
31
|
gridClass(){
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
32
|
+
|
|
33
|
+
const classNames = [
|
|
34
|
+
'grid'
|
|
35
|
+
]
|
|
36
|
+
|
|
37
|
+
if(Array.isArray(this.columns)){
|
|
38
|
+
for(let i in this.columns){
|
|
39
|
+
classNames.push(mediaPrefixes[i] + 'grid-cols-' + this.columns[i])
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if(Array.isArray(this.gap)){
|
|
44
|
+
for(let i in this.gap){
|
|
45
|
+
classNames.push(mediaPrefixes[i] + 'gap-' + this.gap[i])
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
classNames.push(..._applyClass(this.$props))
|
|
50
|
+
|
|
51
|
+
return classNames.join(' ')
|
|
28
52
|
}
|
|
53
|
+
|
|
29
54
|
},
|
|
30
55
|
|
|
31
56
|
methods: {
|
|
32
57
|
|
|
33
58
|
classOf(item){
|
|
59
|
+
|
|
34
60
|
return [
|
|
35
|
-
'col-span-' + item.props.colSpan
|
|
61
|
+
item.props.colSpan ? 'col-span-' + item.props.colSpan : ''
|
|
36
62
|
]
|
|
37
63
|
.join(' ')
|
|
38
64
|
}
|
|
@@ -1,34 +1,36 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
<div class="
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
4
|
+
<div class="overflow-x-auto">
|
|
5
|
+
<div class="flex flex-row">
|
|
6
|
+
<button class="p-3" type="button" @click="format('bold')">
|
|
7
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
|
|
8
|
+
</button>
|
|
9
|
+
<button class="p-3" type="button" @click="format('italic')">
|
|
10
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"/></svg>
|
|
11
|
+
</button>
|
|
12
|
+
<button class="p-3" type="button" @click="format('underline')">
|
|
13
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H128V224c0 53 43 96 96 96s96-43 96-96V96H304c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H384V224c0 88.4-71.6 160-160 160s-160-71.6-160-160V96H48C30.3 96 16 81.7 16 64zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/></svg>
|
|
14
|
+
</button>
|
|
15
|
+
<button class="p-3" type="button" ref="alignBtn" @click="$refs.alignContext.open($refs.alignBtn)">
|
|
16
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
|
|
17
|
+
</button>
|
|
18
|
+
<button class="p-3" type="button" ref="headingsBtn" @click="$refs.headingContext.open($refs.headingsBtn)">
|
|
19
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 64C0 46.3 14.3 32 32 32H80h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H112V208H336V96H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h48 48c17.7 0 32 14.3 32 32s-14.3 32-32 32H400V240 416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H368 320c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V272H112V416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V240 96H32C14.3 96 0 81.7 0 64z"/></svg>
|
|
20
|
+
</button>
|
|
21
|
+
<button class="p-3" type="button" ref="listBtn" @click="$refs.listContext.open($refs.listBtn)">
|
|
22
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
|
|
23
|
+
</button>
|
|
24
|
+
<button class="p-3" type="button" @click="createImage">
|
|
25
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z"/></svg>
|
|
26
|
+
</button>
|
|
27
|
+
<button class="p-3" type="button" @click="createLink">
|
|
28
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
|
|
29
|
+
</button>
|
|
30
|
+
<button class="p-3" type="button" @click="removeFormat">
|
|
31
|
+
<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
|
|
32
|
+
</button>
|
|
33
|
+
</div>
|
|
32
34
|
</div>
|
|
33
35
|
|
|
34
36
|
<ContextMenu ref="headingContext">
|
|
@@ -87,7 +89,7 @@
|
|
|
87
89
|
</button>
|
|
88
90
|
</div>
|
|
89
91
|
</ContextMenu>
|
|
90
|
-
|
|
92
|
+
|
|
91
93
|
<Modal ref="imageModal" width="360" height="420" dismissable="true">
|
|
92
94
|
<template v-slot:head>
|
|
93
95
|
<div class="relative p-5">
|
|
@@ -466,4 +468,4 @@ export default{
|
|
|
466
468
|
@apply list-disc ml-6;
|
|
467
469
|
}
|
|
468
470
|
|
|
469
|
-
</style>
|
|
471
|
+
</style>
|
package/src/components/Image.vue
CHANGED
|
@@ -89,6 +89,8 @@ export default{
|
|
|
89
89
|
this.$observe.once(this.$el, () => {
|
|
90
90
|
this.loadSrc()
|
|
91
91
|
})
|
|
92
|
+
|
|
93
|
+
this.$resize(() => this.loadSrc())
|
|
92
94
|
},
|
|
93
95
|
|
|
94
96
|
methods:{
|
|
@@ -112,6 +114,7 @@ export default{
|
|
|
112
114
|
async loadSrc(){
|
|
113
115
|
|
|
114
116
|
if(typeof this.src === 'string') {
|
|
117
|
+
|
|
115
118
|
if (this.src.startsWith('data:image')) {
|
|
116
119
|
this.actualSrc = this.src
|
|
117
120
|
this.status = 2
|
|
@@ -129,26 +132,29 @@ export default{
|
|
|
129
132
|
}
|
|
130
133
|
})
|
|
131
134
|
|
|
135
|
+
let imgSrc
|
|
132
136
|
for(const b in screens){
|
|
133
137
|
if(window.innerWidth > b && screens[b] in src){
|
|
134
|
-
|
|
135
|
-
img.addEventListener('load', () => {
|
|
136
|
-
if(img.getAttribute('data-src') !== this.src) return
|
|
137
|
-
this.status = 2
|
|
138
|
-
this.actualSrc = img.src
|
|
139
|
-
})
|
|
140
|
-
img.addEventListener('error', (err) => {
|
|
141
|
-
if(img.getAttribute('data-src') !== this.src) return
|
|
142
|
-
this.status = 3
|
|
143
|
-
this.actualSrc = this.defaultSrc
|
|
144
|
-
})
|
|
145
|
-
img.src = src[screens[b]]
|
|
146
|
-
img.setAttribute('data-src', this.src)
|
|
147
|
-
this.status = 1
|
|
148
|
-
break
|
|
138
|
+
imgSrc = src[screens[b]]
|
|
149
139
|
}
|
|
150
140
|
}
|
|
151
141
|
|
|
142
|
+
if(imgSrc !== this.actualSrc){
|
|
143
|
+
var img = new Image()
|
|
144
|
+
img.addEventListener('load', () => {
|
|
145
|
+
if(img.getAttribute('data-src') !== this.src) return
|
|
146
|
+
this.status = 2
|
|
147
|
+
this.actualSrc = img.src
|
|
148
|
+
})
|
|
149
|
+
img.addEventListener('error', (err) => {
|
|
150
|
+
if(img.getAttribute('data-src') !== this.src) return
|
|
151
|
+
this.status = 3
|
|
152
|
+
this.actualSrc = this.defaultSrc
|
|
153
|
+
})
|
|
154
|
+
img.src = imgSrc
|
|
155
|
+
img.setAttribute('data-src', this.src)
|
|
156
|
+
this.status = 1
|
|
157
|
+
}
|
|
152
158
|
}
|
|
153
159
|
}
|
|
154
160
|
else if(this.src instanceof File){
|
|
@@ -381,6 +381,7 @@ export default{
|
|
|
381
381
|
.then(({ items }) => {
|
|
382
382
|
this.$util.unshift(this.items, ...items)
|
|
383
383
|
})
|
|
384
|
+
.catch((err) => console.error(err))
|
|
384
385
|
}
|
|
385
386
|
else{
|
|
386
387
|
this.$util.unshift(this.items, ...items)
|
|
@@ -397,6 +398,9 @@ export default{
|
|
|
397
398
|
if(idx >= 0){
|
|
398
399
|
this.items.splice(idx, 1)
|
|
399
400
|
}
|
|
401
|
+
else{
|
|
402
|
+
console.error('Unable to remove item, idx not found', item)
|
|
403
|
+
}
|
|
400
404
|
})
|
|
401
405
|
break
|
|
402
406
|
}
|
package/src/components/Modal.vue
CHANGED
|
@@ -5,25 +5,25 @@
|
|
|
5
5
|
<div v-if="computedState" :class="computedClass" ref="modal" :style="computedStyle">
|
|
6
6
|
<form v-if="useForm" @submit.prevent="$emit('submit')">
|
|
7
7
|
<div class="modal-head">
|
|
8
|
-
<slot name="head"></slot>
|
|
8
|
+
<slot name="head" :context="context"></slot>
|
|
9
9
|
</div>
|
|
10
10
|
<div :class="modalBodyClass">
|
|
11
|
-
<slot></slot>
|
|
11
|
+
<slot :context="context"></slot>
|
|
12
12
|
</div>
|
|
13
13
|
<div class="modal-foot">
|
|
14
|
-
<slot name="foot"></slot>
|
|
14
|
+
<slot name="foot" :context="context"></slot>
|
|
15
15
|
</div>
|
|
16
16
|
<div v-if="isDisabled" :class="$style.overlay"></div>
|
|
17
17
|
</form>
|
|
18
18
|
<div v-else class="flex-1 min-h-0 flex flex-col relative">
|
|
19
19
|
<div class="modal-head">
|
|
20
|
-
<slot name="head"></slot>
|
|
20
|
+
<slot name="head" :context="context"></slot>
|
|
21
21
|
</div>
|
|
22
22
|
<div :class="modalBodyClass">
|
|
23
|
-
<slot></slot>
|
|
23
|
+
<slot :context="context"></slot>
|
|
24
24
|
</div>
|
|
25
25
|
<div class="modal-foot">
|
|
26
|
-
<slot name="foot"></slot>
|
|
26
|
+
<slot name="foot" :context="context"></slot>
|
|
27
27
|
</div>
|
|
28
28
|
<div v-if="isDisabled" :class="$style.overlay"></div>
|
|
29
29
|
</div>
|
|
@@ -113,7 +113,8 @@ export default{
|
|
|
113
113
|
data(){
|
|
114
114
|
return {
|
|
115
115
|
isDisabled: 0,
|
|
116
|
-
_state: false
|
|
116
|
+
_state: false,
|
|
117
|
+
context: null
|
|
117
118
|
}
|
|
118
119
|
},
|
|
119
120
|
|
|
@@ -143,7 +144,8 @@ export default{
|
|
|
143
144
|
|
|
144
145
|
methods: {
|
|
145
146
|
|
|
146
|
-
open(){
|
|
147
|
+
open(context){
|
|
148
|
+
this.context = context
|
|
147
149
|
this._state = true
|
|
148
150
|
},
|
|
149
151
|
|
|
@@ -64,6 +64,7 @@ export default{
|
|
|
64
64
|
return [
|
|
65
65
|
this.$style.textbox,
|
|
66
66
|
this.$style['state-' + this.computedState],
|
|
67
|
+
this.readonly ? this.$style.readonly : '',
|
|
67
68
|
this.isActive && !this.readonly ? this.$style.active : '',
|
|
68
69
|
this.align ? this.$style['align-' + this.align] : '',
|
|
69
70
|
this.size ? this.$style['size-' + this.size] : ''
|
|
@@ -149,11 +150,11 @@ export default{
|
|
|
149
150
|
|
|
150
151
|
.textbox{
|
|
151
152
|
@apply min-h-[var(--h-cp)];
|
|
152
|
-
@apply flex items-center border-[1px] border-text-200
|
|
153
|
+
@apply flex items-center border-[1px] border-text-200;
|
|
153
154
|
@apply rounded-lg overflow-hidden;
|
|
154
155
|
}
|
|
155
156
|
|
|
156
|
-
.textbox
|
|
157
|
+
.textbox.readonly{
|
|
157
158
|
@apply bg-text-50;
|
|
158
159
|
}
|
|
159
160
|
|
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
@movedown="moveDown(item)"
|
|
9
9
|
@change="$emit('change')"
|
|
10
10
|
@remove="modelValue.splice(index, 1);$emit('change')"
|
|
11
|
-
@add="$emit('add')"
|
|
12
|
-
:create-fn="createFn">
|
|
11
|
+
@add="(items) => $emit('add', items)">
|
|
13
12
|
<template #default="{ item }">
|
|
14
13
|
<slot :item="item"></slot>
|
|
15
14
|
</template>
|
|
@@ -30,15 +29,14 @@
|
|
|
30
29
|
import TreeViewItem from "./TreeViewItem.vue";
|
|
31
30
|
|
|
32
31
|
export default{
|
|
32
|
+
|
|
33
33
|
components: {TreeViewItem},
|
|
34
34
|
|
|
35
35
|
emits: [ 'add', 'change' ],
|
|
36
36
|
|
|
37
37
|
props: {
|
|
38
38
|
|
|
39
|
-
modelValue: Array
|
|
40
|
-
|
|
41
|
-
createFn: undefined
|
|
39
|
+
modelValue: Array
|
|
42
40
|
|
|
43
41
|
},
|
|
44
42
|
|
|
@@ -61,12 +59,7 @@ export default{
|
|
|
61
59
|
},
|
|
62
60
|
|
|
63
61
|
add(){
|
|
64
|
-
|
|
65
|
-
this.createFn((obj) => {
|
|
66
|
-
this.modelValue.push(obj)
|
|
67
|
-
this.$emit('add', this.modelValue[this.modelValue.length - 1])
|
|
68
|
-
})
|
|
69
|
-
}
|
|
62
|
+
this.$emit('add', this.modelValue)
|
|
70
63
|
}
|
|
71
64
|
|
|
72
65
|
}
|
|
@@ -13,21 +13,24 @@
|
|
|
13
13
|
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M287.968 160H32.038c-28.425 0-42.767 34.488-22.627 54.627l127.962 128c12.496 12.496 32.758 12.497 45.255 0l127.968-128C330.695 194.528 316.45 160 287.968 160zM160 320L32 192h256L160 320z"/></svg>
|
|
14
14
|
</button>
|
|
15
15
|
</div>
|
|
16
|
-
<code class="text-sm">{{ item.type }}</code>
|
|
17
16
|
<slot :item="item"></slot>
|
|
18
17
|
<button type="button" class="py-3" @click="$emit('remove')">
|
|
19
|
-
<svg width="16" height="16" class="fill-
|
|
18
|
+
<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>
|
|
19
|
+
</button>
|
|
20
|
+
<button type="button" class="py-3" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
|
|
21
|
+
@click="childCollapsed = !childCollapsed">
|
|
22
|
+
<svg v-if="!childCollapsed" width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
|
|
23
|
+
<svg v-else width="16" height="16" class="fill-text-300" 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>
|
|
20
24
|
</button>
|
|
21
25
|
</div>
|
|
22
|
-
<div ref="container" v-if="item && Array.isArray(item.items)" class="ml-
|
|
26
|
+
<div ref="container" v-if="item && Array.isArray(item.items) && !childCollapsed" class="ml-4">
|
|
23
27
|
<TreeViewItem v-for="(subItem, index) in item.items"
|
|
24
|
-
:create-fn="createFn"
|
|
25
28
|
:item="subItem"
|
|
26
29
|
:parent="item.items"
|
|
27
30
|
@moveup="moveUp(subItem)"
|
|
28
31
|
@movedown="moveDown(subItem)"
|
|
29
32
|
@remove="item.items.splice(index, 1);$emit('change')"
|
|
30
|
-
@add="$emit('add')"
|
|
33
|
+
@add="(items) => $emit('add', items)"
|
|
31
34
|
@change="$emit('change')">
|
|
32
35
|
<template #default="{ item }">
|
|
33
36
|
<slot :item="item"></slot>
|
|
@@ -55,8 +58,6 @@ export default{
|
|
|
55
58
|
props: {
|
|
56
59
|
item: Object,
|
|
57
60
|
|
|
58
|
-
createFn: undefined,
|
|
59
|
-
|
|
60
61
|
parent: Array
|
|
61
62
|
},
|
|
62
63
|
|
|
@@ -79,12 +80,7 @@ export default{
|
|
|
79
80
|
},
|
|
80
81
|
|
|
81
82
|
add(){
|
|
82
|
-
|
|
83
|
-
this.createFn((obj) => {
|
|
84
|
-
this.item.items.push(obj)
|
|
85
|
-
this.$emit('add', this.item.items[this.item.items.length - 1])
|
|
86
|
-
})
|
|
87
|
-
}
|
|
83
|
+
this.$emit('add', this.item.items)
|
|
88
84
|
},
|
|
89
85
|
|
|
90
86
|
mouseDown(e){
|
|
@@ -121,25 +117,36 @@ export default{
|
|
|
121
117
|
|
|
122
118
|
hoverMouseUp(e){
|
|
123
119
|
|
|
124
|
-
if(dragged){
|
|
125
|
-
const targetIdx =
|
|
126
|
-
const startIdx =
|
|
127
|
-
|
|
128
|
-
|
|
120
|
+
if(dragged && dragged.targetParent){
|
|
121
|
+
const targetIdx = dragged.targetParent.indexOf(dragged.target)
|
|
122
|
+
const startIdx = dragged.parent.indexOf(dragged.item)
|
|
123
|
+
|
|
124
|
+
if(targetIdx >= -1 && (targetIdx !== startIdx || dragged.parent !== dragged.targetParent)){
|
|
125
|
+
|
|
126
|
+
if(dragged.parent === dragged.targetParent){
|
|
127
|
+
dragged.parent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
|
|
128
|
+
}
|
|
129
|
+
else{
|
|
130
|
+
dragged.targetParent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
|
|
131
|
+
}
|
|
132
|
+
|
|
129
133
|
this.$emit('change')
|
|
130
134
|
}
|
|
131
135
|
}
|
|
132
136
|
|
|
133
|
-
this.$refs.item
|
|
137
|
+
if(this.$refs.item){
|
|
138
|
+
this.$refs.item.classList.remove(this.$style.itemMouseOver)
|
|
139
|
+
}
|
|
134
140
|
window.removeEventListener('mouseup', this.hoverMouseUp)
|
|
135
|
-
dragged =
|
|
141
|
+
dragged = null
|
|
136
142
|
},
|
|
137
143
|
|
|
138
144
|
hoverMouseOver(e){
|
|
139
145
|
|
|
140
|
-
if(dragged && dragged.item !== this.item
|
|
146
|
+
if(dragged && dragged.item !== this.item){
|
|
141
147
|
this.$refs.item.classList.add(this.$style.itemMouseOver)
|
|
142
148
|
dragged.target = this.item
|
|
149
|
+
dragged.targetParent = this.parent
|
|
143
150
|
window.addEventListener('mouseup', this.hoverMouseUp)
|
|
144
151
|
}
|
|
145
152
|
|
|
@@ -149,10 +156,18 @@ export default{
|
|
|
149
156
|
|
|
150
157
|
if(dragged){
|
|
151
158
|
this.$refs.item.classList.remove(this.$style.itemMouseOver)
|
|
159
|
+
delete dragged.target
|
|
160
|
+
delete dragged.targetParent
|
|
152
161
|
}
|
|
153
162
|
|
|
154
163
|
}
|
|
155
164
|
|
|
165
|
+
},
|
|
166
|
+
|
|
167
|
+
data(){
|
|
168
|
+
return {
|
|
169
|
+
childCollapsed: false
|
|
170
|
+
}
|
|
156
171
|
}
|
|
157
172
|
|
|
158
173
|
}
|
|
@@ -166,7 +181,7 @@ export default{
|
|
|
166
181
|
}
|
|
167
182
|
|
|
168
183
|
.item{
|
|
169
|
-
@apply bg-base-400 flex flex-row gap-2 px-3 items-center
|
|
184
|
+
@apply bg-base-300 dark:bg-base-400 flex flex-row gap-2 px-3 items-center rounded-lg mb-1;
|
|
170
185
|
}
|
|
171
186
|
|
|
172
187
|
.itemMouseOver{
|
package/src/index.js
CHANGED
|
@@ -132,6 +132,17 @@ const popPreloads = () => {
|
|
|
132
132
|
return link
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
+
const resizeEvents = []
|
|
136
|
+
const registerResizeEvent = (fn) => {
|
|
137
|
+
resizeEvents.push(fn)
|
|
138
|
+
}
|
|
139
|
+
const unregisterResizeEvent = (fn) => {
|
|
140
|
+
const idx = resizeEvents.indexOf(fn)
|
|
141
|
+
if(idx >= 0){
|
|
142
|
+
resizeEvents.splice(idx, 1)
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
135
146
|
const util = {
|
|
136
147
|
|
|
137
148
|
push: (arr, item, opt = { key:"id" }) => {
|
|
@@ -206,13 +217,18 @@ export default{
|
|
|
206
217
|
|
|
207
218
|
install: (app, options) => {
|
|
208
219
|
|
|
209
|
-
if(typeof window !== 'undefined'
|
|
210
|
-
|
|
220
|
+
if(typeof window !== 'undefined') {
|
|
221
|
+
|
|
222
|
+
if('IntersectionObserver' in window){
|
|
223
|
+
app.config.globalProperties.$observe = observeInit()
|
|
224
|
+
}
|
|
211
225
|
|
|
212
226
|
app.config.globalProperties.$screenPrefix = ref(util.calculateMediaPrefix(window.innerWidth))
|
|
213
227
|
const onWindowResize = throttle(() => {
|
|
214
228
|
app.config.globalProperties.$screenPrefix.value = util.calculateMediaPrefix(window.innerWidth)
|
|
215
|
-
|
|
229
|
+
resizeEvents.forEach((fn) => fn())
|
|
230
|
+
}, 300, { leading:true })
|
|
231
|
+
|
|
216
232
|
window.addEventListener('resize', onWindowResize)
|
|
217
233
|
}
|
|
218
234
|
|
|
@@ -221,6 +237,8 @@ export default{
|
|
|
221
237
|
app.config.globalProperties.$preload = preload
|
|
222
238
|
app.config.globalProperties.$popPreloads = popPreloads
|
|
223
239
|
app.config.globalProperties.$util = util
|
|
240
|
+
app.config.globalProperties.$resize = registerResizeEvent
|
|
241
|
+
app.config.globalProperties.$unresize = unregisterResizeEvent
|
|
224
242
|
|
|
225
243
|
app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
|
|
226
244
|
app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
|
package/src/utils/helpers.mjs
CHANGED
|
@@ -143,6 +143,46 @@ const accessNestedObject = function(obj, path) {
|
|
|
143
143
|
return nestedObj;
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
+
const mediaPrefixes = [
|
|
147
|
+
'',
|
|
148
|
+
'md:'
|
|
149
|
+
]
|
|
150
|
+
const _applyClass = function(props, defaultClass = {}){
|
|
151
|
+
|
|
152
|
+
const arr = []
|
|
153
|
+
|
|
154
|
+
if(Array.isArray(props.padding) && props.padding.length > 0){
|
|
155
|
+
for(let i in props.padding){
|
|
156
|
+
arr.push(mediaPrefixes[i] + 'p-' + props.padding[i])
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
if(Array.isArray(props.margin)){
|
|
161
|
+
for(let i in props.margin){
|
|
162
|
+
arr.push(mediaPrefixes[i] + 'm-' + props.margin[i])
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
if(Array.isArray(props.gap) && props.gap.length > 0){
|
|
167
|
+
for(let i in props.gap){
|
|
168
|
+
arr.push(mediaPrefixes[i] + 'gap-' + props.gap[i])
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
if(Array.isArray(props.display) && props.display.length > 0){
|
|
173
|
+
for(let i in props.display){
|
|
174
|
+
if([ false, 0 ].includes(props.display[i])){
|
|
175
|
+
arr.push(mediaPrefixes[i] + 'hidden')
|
|
176
|
+
}
|
|
177
|
+
else if(defaultClass.display){
|
|
178
|
+
arr.push(mediaPrefixes[i] + defaultClass.display)
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
return arr
|
|
184
|
+
}
|
|
185
|
+
|
|
146
186
|
export {
|
|
147
187
|
downsizeImage,
|
|
148
188
|
uid,
|
|
@@ -151,7 +191,9 @@ export {
|
|
|
151
191
|
parseBoolean,
|
|
152
192
|
urlQuery,
|
|
153
193
|
getQueryString,
|
|
154
|
-
accessNestedObject
|
|
194
|
+
accessNestedObject,
|
|
195
|
+
mediaPrefixes,
|
|
196
|
+
_applyClass
|
|
155
197
|
}
|
|
156
198
|
|
|
157
199
|
function observeInit(){
|