@mixd-id/web-scaffold 0.1.230406260 → 0.1.230406262
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/List.vue +5 -0
- package/src/components/MultilineText.vue +0 -1
- package/src/components/PresetSelectorFilterItem.vue +28 -11
- package/src/utils/preset-selector.mjs +0 -2
- package/src/widgets/ColumnSelector.vue +8 -5
- package/src/widgets/PresetBar.vue +8 -8
package/package.json
CHANGED
package/src/components/List.vue
CHANGED
|
@@ -181,6 +181,11 @@ export default{
|
|
|
181
181
|
|
|
182
182
|
load(){
|
|
183
183
|
if(this.src){
|
|
184
|
+
|
|
185
|
+
if(!this.preset.columns){
|
|
186
|
+
this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
|
|
187
|
+
}
|
|
188
|
+
|
|
184
189
|
return this.socket.send(this.src, {
|
|
185
190
|
...this.preset,
|
|
186
191
|
itemsPerPage: this.data.itemsPerPage,
|
|
@@ -67,7 +67,6 @@ export default{
|
|
|
67
67
|
this.$emit('update:modelValue', to)
|
|
68
68
|
this.$emit('change', to)
|
|
69
69
|
this.$nextTick(() => {
|
|
70
|
-
console.log('491', this.$refs.input.scrollHeight)
|
|
71
70
|
this.$el.style.height = '';
|
|
72
71
|
this.$el.style.height = this.$refs.input.scrollHeight + 'px'
|
|
73
72
|
})
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<div class="flex-1 flex flex-row gap-2">
|
|
7
7
|
<Dropdown v-model="value.operator"
|
|
8
8
|
class="w-[100px]"
|
|
9
|
-
@change="
|
|
9
|
+
@change="apply">
|
|
10
10
|
<option value="=">=</option>
|
|
11
11
|
<option value=">">></option>
|
|
12
12
|
<option value=">=">>=</option>
|
|
@@ -24,12 +24,12 @@
|
|
|
24
24
|
<Datepicker class="flex-1"
|
|
25
25
|
mode="popup"
|
|
26
26
|
v-model="value.value"
|
|
27
|
-
@change="
|
|
27
|
+
@change="apply" />
|
|
28
28
|
<Datepicker v-if="value.operator === 'between'"
|
|
29
29
|
class="flex-1"
|
|
30
30
|
mode="popup"
|
|
31
31
|
v-model="value.value2"
|
|
32
|
-
@change="
|
|
32
|
+
@change="apply" />
|
|
33
33
|
</div>
|
|
34
34
|
</div>
|
|
35
35
|
</div>
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
<div v-else-if="type === 'number'" class="flex flex-row gap-2">
|
|
38
38
|
<Dropdown v-model="value.operator"
|
|
39
39
|
class="w-[100px]"
|
|
40
|
-
@change="
|
|
40
|
+
@change="apply">
|
|
41
41
|
<option value="=">=</option>
|
|
42
42
|
<option value=">">></option>
|
|
43
43
|
<option value=">=">>=</option>
|
|
@@ -48,18 +48,18 @@
|
|
|
48
48
|
</Dropdown>
|
|
49
49
|
<Textbox v-model="value.value"
|
|
50
50
|
class="flex-1"
|
|
51
|
-
@keyup.enter="
|
|
52
|
-
@blur="
|
|
51
|
+
@keyup.enter="apply"
|
|
52
|
+
@blur="apply" />
|
|
53
53
|
</div>
|
|
54
54
|
|
|
55
55
|
<div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
|
|
56
|
-
<Radio :name="value.key" :value="true" v-model="value.value" @change="
|
|
57
|
-
<Radio :name="value.key" :value="false" v-model="value.value" @change="
|
|
56
|
+
<Radio :name="value.key" :value="true" v-model="value.value" @change="apply">True</Radio>
|
|
57
|
+
<Radio :name="value.key" :value="false" v-model="value.value" @change="apply">False</Radio>
|
|
58
58
|
</div>
|
|
59
59
|
|
|
60
60
|
<div v-else class="flex flex-row gap-2">
|
|
61
61
|
<Dropdown v-model="value.operator" class="w-[100px]"
|
|
62
|
-
@change="
|
|
62
|
+
@change="apply">
|
|
63
63
|
<option value="eq">Equal</option>
|
|
64
64
|
<option value="not">Not Equal</option>
|
|
65
65
|
<option value="startsWith">Starts With</option>
|
|
@@ -72,8 +72,8 @@
|
|
|
72
72
|
</Dropdown>
|
|
73
73
|
<Textbox v-model="value.value"
|
|
74
74
|
class="flex-1"
|
|
75
|
-
@keyup.enter="
|
|
76
|
-
@blur="
|
|
75
|
+
@keyup.enter="apply"
|
|
76
|
+
@blur="apply" />
|
|
77
77
|
</div>
|
|
78
78
|
|
|
79
79
|
</div>
|
|
@@ -94,9 +94,26 @@ export default{
|
|
|
94
94
|
|
|
95
95
|
},
|
|
96
96
|
|
|
97
|
+
computed:{
|
|
98
|
+
|
|
99
|
+
valueRequired(){
|
|
100
|
+
return (!(['yesterday', 'today', 'thisWeek', 'thisMonth', 'thisYear'].includes(this.value.operator) ||
|
|
101
|
+
this.type === 'boolean'));
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
},
|
|
105
|
+
|
|
97
106
|
methods: {
|
|
98
107
|
|
|
108
|
+
apply(){
|
|
109
|
+
|
|
110
|
+
if((!this.valueRequired && this.value.operator) ||
|
|
111
|
+
(this.value.operator && this.value.operator !== 'between' && this.value.value) ||
|
|
112
|
+
(this.value.operator === 'between' && !!this.value.value && !!this.value.value2)){
|
|
113
|
+
this.$emit('change')
|
|
114
|
+
}
|
|
99
115
|
|
|
116
|
+
}
|
|
100
117
|
|
|
101
118
|
}
|
|
102
119
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Modal :state="isOpen" width="320" height="400"
|
|
2
|
+
<Modal :state="isOpen" width="320" height="400">
|
|
3
3
|
<template v-slot:head>
|
|
4
|
-
<div class="relative p-5
|
|
4
|
+
<div class="relative p-5">
|
|
5
5
|
<h3>{{ $t('Select Column') }}</h3>
|
|
6
6
|
<div class="absolute top-0 right-0 p-2">
|
|
7
7
|
<button type="button" class="p-2" @click="close">
|
|
@@ -12,11 +12,14 @@
|
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
14
|
</template>
|
|
15
|
-
|
|
15
|
+
<template #foot>
|
|
16
|
+
<div class="pb-6"></div>
|
|
17
|
+
</template>
|
|
18
|
+
<div class="flex-1 px-3">
|
|
16
19
|
|
|
17
|
-
<div class="flex flex-col divide-y divide-border-50">
|
|
20
|
+
<div class="flex flex-col divide-y divide-text-50 bg-base-400 border-[1px] border-text-50 rounded-lg overflow-hidden">
|
|
18
21
|
<button v-for="column in columns"
|
|
19
|
-
type="button" class="p-3 px-5 text-left hover:bg-primary-
|
|
22
|
+
type="button" class="p-3 px-5 text-left hover:bg-primary hover:text-white"
|
|
20
23
|
@click="select(column)">
|
|
21
24
|
{{ column.label ? column.label : column.key }}
|
|
22
25
|
</button>
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
<Tabs :items="tabItems[config.type ?? 'list']" v-model="config.presetBarTabIndex" />
|
|
79
79
|
</div>
|
|
80
80
|
|
|
81
|
-
<div class="flex-1 overflow-y-auto
|
|
81
|
+
<div class="flex-1 overflow-y-auto">
|
|
82
82
|
|
|
83
83
|
<div v-if="config.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
|
|
84
84
|
<ListItem :items="presetColumns"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div v-else-if="config.presetBarTabIndex === 2" class="flex-1 flex flex-col p-5">
|
|
104
104
|
|
|
105
|
-
<div class="flex-1 flex flex-col">
|
|
105
|
+
<div class="flex-1 flex flex-col gap-6">
|
|
106
106
|
|
|
107
107
|
<div v-for="(filter, idx) in preset.filters">
|
|
108
108
|
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
</button>
|
|
248
248
|
</div>
|
|
249
249
|
<ListItem :items="xAxis"
|
|
250
|
-
class="mt-2 h-[90px] border-[1px] border-
|
|
250
|
+
class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
|
|
251
251
|
body-class="flex flex-col gap-1"
|
|
252
252
|
@reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
|
|
253
253
|
<template v-slot="{ item, index }">
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
</button>
|
|
288
288
|
</div>
|
|
289
289
|
<ListItem :items="yAxis"
|
|
290
|
-
class="mt-2 h-[90px] border-[1px] border-
|
|
290
|
+
class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
|
|
291
291
|
body-class="flex flex-col gap-1"
|
|
292
292
|
@reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
|
|
293
293
|
<template v-slot="{ item, index }">
|
|
@@ -338,7 +338,7 @@
|
|
|
338
338
|
</button>
|
|
339
339
|
</div>
|
|
340
340
|
<ListItem :items="yAxis"
|
|
341
|
-
class="mt-2 h-[90px] border-[1px] border-
|
|
341
|
+
class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
342
342
|
body-class="flex flex-col gap-1"
|
|
343
343
|
@reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
|
|
344
344
|
<template v-slot="{ item, index }">
|
|
@@ -370,7 +370,7 @@
|
|
|
370
370
|
</button>
|
|
371
371
|
</div>
|
|
372
372
|
<ListItem :items="xAxis"
|
|
373
|
-
class="mt-2 h-[90px] border-[1px] border-
|
|
373
|
+
class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
374
374
|
body-class="flex flex-col gap-1"
|
|
375
375
|
@reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
|
|
376
376
|
<template v-slot="{ item, index }">
|
|
@@ -448,7 +448,7 @@
|
|
|
448
448
|
</div>
|
|
449
449
|
<ListItem :items="presetPivot.rows"
|
|
450
450
|
@reorder="(from, to) => { presetPivot.rows.splice(to, 0, presetPivot.rows.splice(from, 1)[0]); apply() }"
|
|
451
|
-
class="mt-2 h-[90px] border-[1px] border-
|
|
451
|
+
class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
|
|
452
452
|
<template v-slot="{ item, index }">
|
|
453
453
|
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
454
454
|
<div data-reorder v-if="(presetPivot.rows ?? []).length > 1">
|
|
@@ -484,7 +484,7 @@
|
|
|
484
484
|
</div>
|
|
485
485
|
<ListItem :items="presetPivot.values"
|
|
486
486
|
@reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
|
|
487
|
-
class="mt-2 h-[90px] border-[1px] border-
|
|
487
|
+
class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
|
|
488
488
|
<template v-slot="{ item, index }">
|
|
489
489
|
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
490
490
|
<div data-reorder v-if="(presetPivot.values ?? []).length > 1">
|