@mixd-id/web-scaffold 0.1.240411012 → 0.1.240411014
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
|
@@ -1,86 +1,93 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
3
|
+
|
|
4
|
+
<div class="p-6 py-4 flex flex-col gap-4">
|
|
5
|
+
<div>
|
|
6
|
+
<label class="text-text-400">Title</label>
|
|
7
|
+
<Textbox v-model="item.props.title" class="mt-1" />
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div>
|
|
11
|
+
<label class="text-text-400">Description</label>
|
|
12
|
+
<Textarea v-model="item.props.description" rows="3" class="mt-1" />
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div>
|
|
16
|
+
<div class="flex flex-row items-center">
|
|
17
|
+
<label class="text-text-400 flex-1">Testimonials</label>
|
|
18
|
+
<button type="button" class="text-primary" @click="$refs.modal.open({ createdAt:'2023-01-01' })">Add</button>
|
|
19
|
+
</div>
|
|
20
|
+
<ListItem :items="items"
|
|
21
|
+
class="bg-base-300 border-text-200 border-[1px] rounded-lg overflow-hidden"
|
|
22
|
+
container-class="divide-y divide-text-50"
|
|
23
|
+
@reorder="(from, to) => { items.splice(to, 0, items.splice(from, 1)[0]); $emit('change') }">
|
|
24
|
+
<template v-slot="{ item, index }">
|
|
25
|
+
<div class="flex flex-row items-center gap-3 cursor-pointer px-3">
|
|
26
|
+
<div data-reorder>
|
|
27
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="flex-1 p-2" @click="$refs.modal.open(item)">
|
|
30
|
+
<p class="line-clamp-2">
|
|
31
|
+
{{ item.text }}
|
|
32
|
+
</p>
|
|
33
|
+
</div>
|
|
34
|
+
<div>
|
|
35
|
+
<button type="button" @click="confirm($t('Remove this item?'), '', () => { items.splice(index, 1); $emit('change') })">
|
|
36
|
+
<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="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
37
|
+
</button>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</template>
|
|
41
|
+
</ListItem>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<ComponentSetting2 :item="item"
|
|
47
|
+
:view-type="viewType"
|
|
48
|
+
:view-types="viewTypes"
|
|
49
|
+
:view-index="viewIndex"
|
|
50
|
+
defaultDisplay="block"
|
|
51
|
+
@change="$emit('change')" />
|
|
52
|
+
|
|
53
|
+
<Modal ref="modal" width="360" height="420">
|
|
54
|
+
<template v-slot:head>
|
|
55
|
+
<div class="relative p-5">
|
|
56
|
+
<h3>Add Testimonial</h3>
|
|
57
|
+
<div class="absolute top-0 right-0 p-2">
|
|
58
|
+
<button type="button" class="p-2" @click="$refs.modal.close()">
|
|
59
|
+
<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
|
|
60
|
+
<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
|
|
61
|
+
</svg>
|
|
62
|
+
</button>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</template>
|
|
66
|
+
<template v-slot:foot="{ context }">
|
|
67
|
+
<div class="p-6">
|
|
68
|
+
<Button @click="apply(context)"
|
|
69
|
+
:state="!context.text || !context.name || !context.createdAt ? -1 : 1"
|
|
70
|
+
class="w-full">Add Testimonial</Button>
|
|
71
|
+
</div>
|
|
72
|
+
</template>
|
|
73
|
+
<template #default="{ context }">
|
|
74
|
+
<div class="flex-1 p-6 flex flex-col gap-6">
|
|
75
|
+
<Textarea v-model="context.text" rows="5" placeholder="Text"></Textarea>
|
|
76
|
+
<div class="flex flex-row gap-4 items-center">
|
|
77
|
+
<Image ref="image" class="w-[64px] aspect-square rounded-full bg-text-50"
|
|
78
|
+
:src="imageSrc(context.imageUrl)"
|
|
79
|
+
:editable="true"
|
|
80
|
+
@click="$refs.image.edit()"
|
|
81
|
+
@change="(base64, file) => context.imageUrl = file"/>
|
|
82
|
+
<div class="flex-1 flex flex-col gap-1">
|
|
83
|
+
<Textbox v-model="context.name" placeholder="Name" />
|
|
84
|
+
<Datepicker v-model="context.createdAt" placeholder="Time" mode="popup" />
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</template>
|
|
89
|
+
</Modal>
|
|
90
|
+
|
|
84
91
|
</div>
|
|
85
92
|
</template>
|
|
86
93
|
|
|
@@ -117,14 +124,16 @@ export default{
|
|
|
117
124
|
|
|
118
125
|
props: {
|
|
119
126
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
127
|
+
item: {
|
|
128
|
+
type: Object,
|
|
129
|
+
required: true
|
|
130
|
+
},
|
|
131
|
+
|
|
132
|
+
viewType: String,
|
|
124
133
|
|
|
125
|
-
|
|
134
|
+
viewIndex: Number,
|
|
126
135
|
|
|
127
|
-
|
|
136
|
+
viewTypes: Array,
|
|
128
137
|
|
|
129
138
|
},
|
|
130
139
|
|
|
@@ -146,7 +155,7 @@ export default{
|
|
|
146
155
|
<style module>
|
|
147
156
|
|
|
148
157
|
.comp{
|
|
149
|
-
|
|
158
|
+
@apply flex flex-col divide-y divide-text-50;
|
|
150
159
|
}
|
|
151
160
|
|
|
152
161
|
</style>
|
|
@@ -936,10 +936,8 @@ export default{
|
|
|
936
936
|
if (!Array.isArray(bgColors)) return
|
|
937
937
|
|
|
938
938
|
for(let i = 0 ; i < bgColors.length ; i++){
|
|
939
|
-
|
|
940
939
|
let value = bgColors[i]
|
|
941
|
-
if(bgColors[i]
|
|
942
|
-
|
|
940
|
+
if(`${bgColors[i]}`.startsWith('bg-')){
|
|
943
941
|
const el = document.createElement('div')
|
|
944
942
|
el.classList.add(bgColors[i])
|
|
945
943
|
el.style.position = 'fixed'
|
|
@@ -958,7 +956,6 @@ export default{
|
|
|
958
956
|
document.body.removeChild(el)
|
|
959
957
|
}
|
|
960
958
|
|
|
961
|
-
console.log(`bgColors[${i}]`, bgColors[i], value)
|
|
962
959
|
bgColors[i] = value
|
|
963
960
|
}
|
|
964
961
|
},
|
|
@@ -1016,6 +1013,7 @@ export default{
|
|
|
1016
1013
|
.catch((err) => {
|
|
1017
1014
|
this.toast(err)
|
|
1018
1015
|
this.readyState = -1
|
|
1016
|
+
console.error(err)
|
|
1019
1017
|
})
|
|
1020
1018
|
},
|
|
1021
1019
|
|