@mixd-id/web-scaffold 0.1.240411026 → 0.1.240411028
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
|
@@ -88,7 +88,8 @@
|
|
|
88
88
|
</div>
|
|
89
89
|
|
|
90
90
|
<div v-else class="flex flex-row gap-2">
|
|
91
|
-
<Dropdown v-model="value.operator"
|
|
91
|
+
<Dropdown v-model="value.operator"
|
|
92
|
+
:class="![ 'notEmpty' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
|
|
92
93
|
:readonly="readonly"
|
|
93
94
|
@change="apply">
|
|
94
95
|
<option value="eq">Equal</option>
|
|
@@ -100,8 +101,10 @@
|
|
|
100
101
|
<option value="in">Multiple with comma</option>
|
|
101
102
|
<option value="notIn">Except with comma</option>
|
|
102
103
|
<option value="regex">Regex</option>
|
|
104
|
+
<option value="notEmpty">Not Empty</option>
|
|
103
105
|
</Dropdown>
|
|
104
|
-
<Textbox v-
|
|
106
|
+
<Textbox v-if="![ 'notEmpty' ].includes(value.operator)"
|
|
107
|
+
v-model="value.value"
|
|
105
108
|
:readonly="readonly"
|
|
106
109
|
class="flex-1"
|
|
107
110
|
@keyup.enter="apply"
|
package/src/utils/helpers.mjs
CHANGED
|
@@ -560,34 +560,37 @@ const arrayRemove = (arr, items, opt = {}) => {
|
|
|
560
560
|
}
|
|
561
561
|
}
|
|
562
562
|
|
|
563
|
-
const arrayUnshift = (arr,
|
|
563
|
+
const arrayUnshift = (arr, items, opt = { update:true }) => {
|
|
564
564
|
if(!Array.isArray(arr)) return
|
|
565
|
+
if(!Array.isArray(items)) items = [ items ]
|
|
565
566
|
if(!opt.key){
|
|
566
|
-
opt.key =
|
|
567
|
+
opt.key = items[0] && items[0].uid ? 'uid' : 'id'
|
|
567
568
|
}
|
|
568
569
|
|
|
569
|
-
opt
|
|
570
|
+
if(!Array.isArray(opt.key)){
|
|
571
|
+
opt.key = [ opt.key ]
|
|
572
|
+
}
|
|
570
573
|
|
|
571
|
-
|
|
572
|
-
|
|
574
|
+
for(let item of items){
|
|
575
|
+
if(!item) continue
|
|
573
576
|
|
|
574
|
-
const
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
577
|
+
const index = arr.findIndex((_) => {
|
|
578
|
+
for(let key of opt.key){
|
|
579
|
+
if(_[key] !== item[key]){
|
|
580
|
+
return false
|
|
581
|
+
}
|
|
578
582
|
}
|
|
579
|
-
|
|
583
|
+
return true
|
|
584
|
+
})
|
|
580
585
|
|
|
581
|
-
if(
|
|
582
|
-
|
|
586
|
+
if(index >= 0){
|
|
587
|
+
if(opt.update !== false){
|
|
588
|
+
Object.assign(arr[index], item)
|
|
589
|
+
}
|
|
583
590
|
}
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
else{
|
|
587
|
-
if(opt.highlight){
|
|
588
|
-
item._highlight = true
|
|
591
|
+
else{
|
|
592
|
+
arr.unshift(item)
|
|
589
593
|
}
|
|
590
|
-
arr.unshift(item)
|
|
591
594
|
}
|
|
592
595
|
}
|
|
593
596
|
|
|
@@ -307,6 +307,17 @@ const getValue = (filter, opt) => {
|
|
|
307
307
|
}
|
|
308
308
|
break
|
|
309
309
|
|
|
310
|
+
case 'notEmpty':
|
|
311
|
+
whereObj = {
|
|
312
|
+
[key]:{
|
|
313
|
+
[Op.or]: [
|
|
314
|
+
{ [Op.ne]: null },
|
|
315
|
+
{ [Op.ne]: '' }
|
|
316
|
+
]
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
break
|
|
320
|
+
|
|
310
321
|
case 'in':
|
|
311
322
|
withoutKey ?
|
|
312
323
|
whereObj = {
|
|
@@ -676,6 +687,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
|
|
|
676
687
|
}
|
|
677
688
|
break
|
|
678
689
|
|
|
690
|
+
case 'notEmpty':
|
|
691
|
+
whereObj = {
|
|
692
|
+
[key]:{
|
|
693
|
+
[Op.or]: [
|
|
694
|
+
{ [Op.ne]: null },
|
|
695
|
+
{ [Op.ne]: '' }
|
|
696
|
+
]
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
break
|
|
700
|
+
|
|
679
701
|
case 'in':
|
|
680
702
|
whereObj = {
|
|
681
703
|
[key]:{
|
|
@@ -307,6 +307,17 @@ const getValue = (filter, opt) => {
|
|
|
307
307
|
}
|
|
308
308
|
break
|
|
309
309
|
|
|
310
|
+
case 'notEmpty':
|
|
311
|
+
whereObj = {
|
|
312
|
+
[key]:{
|
|
313
|
+
[Op.or]: [
|
|
314
|
+
{ [Op.ne]: null },
|
|
315
|
+
{ [Op.ne]: '' }
|
|
316
|
+
]
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
break
|
|
320
|
+
|
|
310
321
|
case 'in':
|
|
311
322
|
withoutKey ?
|
|
312
323
|
whereObj = {
|
|
@@ -676,6 +687,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
|
|
|
676
687
|
}
|
|
677
688
|
break
|
|
678
689
|
|
|
690
|
+
case 'notEmpty':
|
|
691
|
+
whereObj = {
|
|
692
|
+
[key]:{
|
|
693
|
+
[Op.or]: [
|
|
694
|
+
{ [Op.ne]: null },
|
|
695
|
+
{ [Op.ne]: '' }
|
|
696
|
+
]
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
break
|
|
700
|
+
|
|
679
701
|
case 'in':
|
|
680
702
|
whereObj = {
|
|
681
703
|
[key]:{
|
|
@@ -1,64 +1,66 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
<div>
|
|
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
|
-
|
|
4
|
+
<div class="p-6 py-4 flex flex-col gap-4">
|
|
5
|
+
<div>
|
|
6
|
+
<div class="flex flex-row gap-2">
|
|
7
|
+
<label class="flex-1 text-text-400">Icons</label>
|
|
8
|
+
<button type="button" class="text-primary"
|
|
9
|
+
@click="addIcon()">Add Icon</button>
|
|
10
|
+
</div>
|
|
11
|
+
<ListItem :items="item.props.icons" class="mt-4" body-class="divide-y divide-text-50"
|
|
12
|
+
@reorder="(from, to) => { item.props.icons.splice(to, 0, item.props.icons.splice(from, 1)[0]); apply() }">
|
|
13
|
+
<template v-slot="{ item, index }">
|
|
14
|
+
<div class="flex flex-row gap-1 p-2 bg-text-50 rounded-md mb-1">
|
|
15
|
+
<div data-reorder>
|
|
16
|
+
<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>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="flex-1 flex flex-row gap-1" @click="openIcon(item)">
|
|
19
|
+
<Image :src="imageSrc(item)"
|
|
20
|
+
class="w-[36px] aspect-square rounded-lg" />
|
|
21
|
+
<div class="flex-1 flex flex-col px-3 leading-0">
|
|
22
|
+
<p class="text-ellipsis overflow-hidden whitespace-nowrap">{{ item.text }}</p>
|
|
23
|
+
<small class="text-ellipsis overflow-hidden whitespace-nowrap">{{ item.target }}</small>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div>
|
|
27
|
+
<button type="button" @click="removeIcon(index)">
|
|
28
|
+
<svg class="fill-text-300 hover:fill-red-500" width="16" height="16" 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>
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
</ListItem>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div class="flex flex-row items-center gap-4">
|
|
37
|
+
<label class="flex-1 text-text-400">Columns</label>
|
|
38
|
+
<Dropdown v-for="(_viewType, idx) in viewTypes" class="w-[80px]"
|
|
39
|
+
v-model="item.props.columns[idx]"
|
|
40
|
+
v-show="_viewType.value === viewType"
|
|
41
|
+
@change="apply">
|
|
42
|
+
<option :value="`${viewType}grid-cols-1`">1</option>
|
|
43
|
+
<option :value="`${viewType}grid-cols-2`">2</option>
|
|
44
|
+
<option :value="`${viewType}grid-cols-3`">3</option>
|
|
45
|
+
<option :value="`${viewType}grid-cols-4`">4</option>
|
|
46
|
+
<option :value="`${viewType}grid-cols-5`">5</option>
|
|
47
|
+
<option :value="`${viewType}grid-cols-6`">6</option>
|
|
48
|
+
<option :value="`${viewType}grid-cols-7`">7</option>
|
|
49
|
+
<option :value="`${viewType}grid-cols-8`">8</option>
|
|
50
|
+
<option :value="`${viewType}grid-cols-9`">9</option>
|
|
51
|
+
<option :value="`${viewType}grid-cols-10`">10</option>
|
|
52
|
+
<option :value="`${viewType}grid-cols-11`">11</option>
|
|
53
|
+
<option :value="`${viewType}grid-cols-12`">12</option>
|
|
54
|
+
</Dropdown>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<ComponentSetting2 :item="item"
|
|
59
|
+
:view-type="viewType"
|
|
60
|
+
:view-types="viewTypes"
|
|
61
|
+
:view-index="viewIndex"
|
|
62
|
+
defaultDisplay="block"
|
|
63
|
+
@change="$emit('change')" />
|
|
62
64
|
|
|
63
65
|
<Modal ref="iconModal" width="400" height="320">
|
|
64
66
|
<template v-slot:head>
|
|
@@ -115,14 +117,16 @@ export default{
|
|
|
115
117
|
|
|
116
118
|
props: {
|
|
117
119
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
item: {
|
|
121
|
+
type: Object,
|
|
122
|
+
required: true
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
viewType: String,
|
|
122
126
|
|
|
123
|
-
|
|
127
|
+
viewIndex: Number,
|
|
124
128
|
|
|
125
|
-
|
|
129
|
+
viewTypes: Array,
|
|
126
130
|
|
|
127
131
|
},
|
|
128
132
|
|
|
@@ -178,7 +182,7 @@ export default{
|
|
|
178
182
|
<style module>
|
|
179
183
|
|
|
180
184
|
.comp{
|
|
181
|
-
|
|
185
|
+
@apply flex flex-col divide-y divide-text-50;
|
|
182
186
|
}
|
|
183
187
|
|
|
184
188
|
</style>
|