@mixd-id/web-scaffold 0.1.240411054 → 0.1.240411056
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/Carousel.vue +8 -7
- package/src/components/Checkbox.vue +6 -7
- package/src/components/ContextMenu.vue +0 -1
- package/src/components/Datepicker.vue +1 -1
- package/src/components/PresetSelectorFilterItem.vue +91 -93
- package/src/components/VirtualTable.vue +2 -2
- package/src/widgets/PresetBar.vue +12 -10
- package/src/widgets/WebPageBuilder.vue +1 -1
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</div>
|
|
12
12
|
</div>
|
|
13
13
|
|
|
14
|
-
<div v-if="useNextPrev && items && items.length
|
|
14
|
+
<div v-if="useNextPrev && (items ?? []).length > 1 && index < items.length - 1" :class="$style.carouselNext" @click="next(true)">
|
|
15
15
|
<slot name="next">
|
|
16
16
|
<div class="p-3">
|
|
17
17
|
<button :class="$style.btn">
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
</slot>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
|
-
<div v-if="useNextPrev && items
|
|
24
|
+
<div v-if="useNextPrev && (items ?? []).length > 1 && index > 0" :class="$style.carouselPrev" @click="prev">
|
|
25
25
|
<slot name="prev">
|
|
26
26
|
<div class="p-3">
|
|
27
27
|
<button :class="$style.btn">
|
|
@@ -31,15 +31,16 @@
|
|
|
31
31
|
</slot>
|
|
32
32
|
</div>
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
<div :class="$style.legend">
|
|
35
35
|
<div v-for="_index in items.length"
|
|
36
|
-
|
|
37
|
-
@click="
|
|
36
|
+
:class="$style.legendItem + (index === _index - 1 ? ` ${$style.legendItemActive}` : '')"
|
|
37
|
+
@click="setIndex(_index - 1)">
|
|
38
38
|
<slot name="legend">
|
|
39
|
-
|
|
39
|
+
<div></div>
|
|
40
40
|
</slot>
|
|
41
41
|
</div>
|
|
42
42
|
</div>
|
|
43
|
+
|
|
43
44
|
</div>
|
|
44
45
|
</template>
|
|
45
46
|
|
|
@@ -314,7 +315,7 @@ export default{
|
|
|
314
315
|
.comp{
|
|
315
316
|
overflow: hidden;
|
|
316
317
|
position: relative;
|
|
317
|
-
@apply flex flex-col;
|
|
318
|
+
@apply flex flex-col bg-red-100;
|
|
318
319
|
}
|
|
319
320
|
|
|
320
321
|
.comp img{
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
<input :id="id" type="checkbox" :checked="checked" @change="onChange" :disabled="isDisabled"/>
|
|
4
|
-
<label :for="id" :class="labelClass" class="whitespace-nowrap text-ellipsis overflow-hidden">
|
|
5
|
-
<
|
|
4
|
+
<label :for="id" :class="labelClass" class="whitespace-nowrap text-ellipsis overflow-hidden flex flex-row">
|
|
5
|
+
<span :class="$style.indicator" v-if="Boolean(showIcon)">
|
|
6
6
|
<Transition name="checkbox">
|
|
7
7
|
<div v-if="checked">
|
|
8
8
|
<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
|
9
9
|
</div>
|
|
10
10
|
</Transition>
|
|
11
|
-
</
|
|
12
|
-
<
|
|
11
|
+
</span>
|
|
12
|
+
<div v-if="$slots.default" class="ml-2">
|
|
13
13
|
<slot name="default"></slot>
|
|
14
|
-
</
|
|
15
|
-
<slot v-else name="item"></slot>
|
|
14
|
+
</div>
|
|
16
15
|
</label>
|
|
17
16
|
</div>
|
|
18
17
|
</template>
|
|
@@ -161,7 +160,7 @@ export default {
|
|
|
161
160
|
}
|
|
162
161
|
|
|
163
162
|
.indicator{
|
|
164
|
-
@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-300;
|
|
163
|
+
@apply min-w-[21px] w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-300;
|
|
165
164
|
@apply flex items-center justify-center overflow-hidden;
|
|
166
165
|
transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
167
166
|
}
|
|
@@ -321,7 +321,7 @@ export default{
|
|
|
321
321
|
<style module>
|
|
322
322
|
|
|
323
323
|
.datepicker {
|
|
324
|
-
@apply
|
|
324
|
+
@apply flex overflow-hidden cursor-pointer relative;
|
|
325
325
|
@apply border-[1px] border-text-200 bg-base-300 rounded-lg;
|
|
326
326
|
@apply cursor-pointer;
|
|
327
327
|
}
|
|
@@ -1,117 +1,115 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="flex flex-
|
|
3
|
-
<div class="flex-1 flex flex-col">
|
|
4
|
-
|
|
5
|
-
<div v-if="type === 'date'" class="flex-1 flex flex-row gap-2">
|
|
6
|
-
<div class="flex-1 flex flex-row gap-2">
|
|
7
|
-
<Dropdown v-model="value.operator"
|
|
8
|
-
:readonly="readonly"
|
|
9
|
-
:class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
|
|
10
|
-
@change="apply">
|
|
11
|
-
<option value="=">=</option>
|
|
12
|
-
<option value=">">></option>
|
|
13
|
-
<option value=">=">>=</option>
|
|
14
|
-
<option value="<"><</option>
|
|
15
|
-
<option value="<="><=</option>
|
|
16
|
-
<option value="between">Between</option>
|
|
17
|
-
<option value="yesterday">Yesterday</option>
|
|
18
|
-
<option value="today">Today</option>
|
|
19
|
-
<option value="thisWeek">This Week</option>
|
|
20
|
-
<option value="thisMonth">This Month</option>
|
|
21
|
-
<option value="lastMonth">Last Month</option>
|
|
22
|
-
<option value="thisYear">This Year</option>
|
|
23
|
-
<option value="null">No Value</option>
|
|
24
|
-
</Dropdown>
|
|
25
|
-
<div v-if="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator)"
|
|
26
|
-
class="flex-1 flex flex-row gap-2">
|
|
27
|
-
<Datepicker class="flex-1"
|
|
28
|
-
mode="popup"
|
|
29
|
-
:readonly="readonly"
|
|
30
|
-
v-model="value.value"
|
|
31
|
-
@change="apply" />
|
|
32
|
-
<Datepicker v-if="value.operator === 'between'"
|
|
33
|
-
class="flex-1"
|
|
34
|
-
:readonly="readonly"
|
|
35
|
-
mode="popup"
|
|
36
|
-
v-model="value.value2"
|
|
37
|
-
@change="apply" />
|
|
38
|
-
</div>
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
2
|
+
<div class="flex flex-col">
|
|
41
3
|
|
|
42
|
-
|
|
4
|
+
<div v-if="type === 'date'" class="flex-1 flex flex-row gap-2">
|
|
5
|
+
<div class="flex-1 flex flex-row gap-2">
|
|
43
6
|
<Dropdown v-model="value.operator"
|
|
44
|
-
class="w-[100px]"
|
|
45
7
|
:readonly="readonly"
|
|
8
|
+
:class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
|
|
46
9
|
@change="apply">
|
|
47
10
|
<option value="=">=</option>
|
|
48
11
|
<option value=">">></option>
|
|
49
12
|
<option value=">=">>=</option>
|
|
50
13
|
<option value="<"><</option>
|
|
51
14
|
<option value="<="><=</option>
|
|
52
|
-
<option value="
|
|
53
|
-
<option value="
|
|
15
|
+
<option value="between">Between</option>
|
|
16
|
+
<option value="yesterday">Yesterday</option>
|
|
17
|
+
<option value="today">Today</option>
|
|
18
|
+
<option value="thisWeek">This Week</option>
|
|
19
|
+
<option value="thisMonth">This Month</option>
|
|
20
|
+
<option value="lastMonth">Last Month</option>
|
|
21
|
+
<option value="thisYear">This Year</option>
|
|
22
|
+
<option value="null">No Value</option>
|
|
54
23
|
</Dropdown>
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
24
|
+
<div v-if="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear', 'null' ].includes(value.operator)"
|
|
25
|
+
class="flex-1 flex flex-row gap-2">
|
|
26
|
+
<Datepicker class="flex-1"
|
|
27
|
+
mode="popup"
|
|
28
|
+
:readonly="readonly"
|
|
29
|
+
v-model="value.value"
|
|
30
|
+
@change="apply" />
|
|
31
|
+
<Datepicker v-if="value.operator === 'between'"
|
|
32
|
+
class="flex-1"
|
|
33
|
+
:readonly="readonly"
|
|
34
|
+
mode="popup"
|
|
35
|
+
v-model="value.value2"
|
|
36
|
+
@change="apply" />
|
|
37
|
+
</div>
|
|
60
38
|
</div>
|
|
39
|
+
</div>
|
|
61
40
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
41
|
+
<div v-else-if="type === 'number'" class="flex flex-row gap-2">
|
|
42
|
+
<Dropdown v-model="value.operator"
|
|
43
|
+
class="w-[100px]"
|
|
44
|
+
:readonly="readonly"
|
|
45
|
+
@change="apply">
|
|
46
|
+
<option value="=">=</option>
|
|
47
|
+
<option value=">">></option>
|
|
48
|
+
<option value=">=">>=</option>
|
|
49
|
+
<option value="<"><</option>
|
|
50
|
+
<option value="<="><=</option>
|
|
51
|
+
<option value="in">Multiple with comma</option>
|
|
52
|
+
<option value="notIn">Except with comma</option>
|
|
53
|
+
</Dropdown>
|
|
54
|
+
<Textbox v-model="value.value"
|
|
55
|
+
class="flex-1"
|
|
56
|
+
:readonly="readonly"
|
|
57
|
+
@keyup.enter="apply"
|
|
58
|
+
@blur="apply" />
|
|
59
|
+
</div>
|
|
68
60
|
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
<div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
|
|
62
|
+
<Radio :name="value.key"
|
|
63
|
+
:readonly="readonly" :value="true" v-model="value.value" @change="apply">True</Radio>
|
|
64
|
+
<Radio :name="value.key"
|
|
65
|
+
:readonly="readonly" :value="false" v-model="value.value" @change="apply">False</Radio>
|
|
66
|
+
</div>
|
|
71
67
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
class="flex-1"
|
|
75
|
-
:readonly="readonly"
|
|
76
|
-
:value="param.value"
|
|
77
|
-
@change="apply">
|
|
78
|
-
{{ param.text }}
|
|
79
|
-
</Checkbox>
|
|
68
|
+
<div v-else-if="type === 'enum' && Array.isArray(cTypeParams) && cTypeParams.length > 0"
|
|
69
|
+
class="flex flex-col gap-1">
|
|
80
70
|
|
|
81
|
-
|
|
71
|
+
<Checkbox v-for="param in cTypeParams"
|
|
72
|
+
v-model="cValue.value"
|
|
73
|
+
class="flex-1"
|
|
74
|
+
:readonly="readonly"
|
|
75
|
+
:value="param.value"
|
|
76
|
+
@change="apply">
|
|
77
|
+
{{ param.text }}
|
|
78
|
+
</Checkbox>
|
|
82
79
|
|
|
83
|
-
|
|
84
|
-
<component :is="column.component"
|
|
85
|
-
:value="value"
|
|
86
|
-
:readonly="readonly"
|
|
87
|
-
@change="apply" />
|
|
88
|
-
</div>
|
|
80
|
+
</div>
|
|
89
81
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
:readonly="readonly"
|
|
94
|
-
@change="apply">
|
|
95
|
-
<option value="eq">Equal</option>
|
|
96
|
-
<option value="not">Not Equal</option>
|
|
97
|
-
<option value="startsWith">Starts With</option>
|
|
98
|
-
<option value="endsWith">Ends With</option>
|
|
99
|
-
<option value="contains">Contains</option>
|
|
100
|
-
<option value="notContains">Not Contains</option>
|
|
101
|
-
<option value="in">Multiple with comma</option>
|
|
102
|
-
<option value="notIn">Except with comma</option>
|
|
103
|
-
<option value="regex">Regex</option>
|
|
104
|
-
<option value="notEmpty">Not Empty</option>
|
|
105
|
-
</Dropdown>
|
|
106
|
-
<Textbox v-if="![ 'notEmpty' ].includes(value.operator)"
|
|
107
|
-
v-model="value.value"
|
|
82
|
+
<div v-else-if="type === 'component'">
|
|
83
|
+
<component :is="column.component"
|
|
84
|
+
:value="value"
|
|
108
85
|
:readonly="readonly"
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
@blur="apply" />
|
|
112
|
-
</div>
|
|
86
|
+
@change="apply" />
|
|
87
|
+
</div>
|
|
113
88
|
|
|
89
|
+
<div v-else class="flex flex-row gap-2">
|
|
90
|
+
<Dropdown v-model="value.operator"
|
|
91
|
+
:class="![ 'notEmpty' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
|
|
92
|
+
:readonly="readonly"
|
|
93
|
+
@change="apply">
|
|
94
|
+
<option value="eq">Equal</option>
|
|
95
|
+
<option value="not">Not Equal</option>
|
|
96
|
+
<option value="startsWith">Starts With</option>
|
|
97
|
+
<option value="endsWith">Ends With</option>
|
|
98
|
+
<option value="contains">Contains</option>
|
|
99
|
+
<option value="notContains">Not Contains</option>
|
|
100
|
+
<option value="in">Multiple with comma</option>
|
|
101
|
+
<option value="notIn">Except with comma</option>
|
|
102
|
+
<option value="regex">Regex</option>
|
|
103
|
+
<option value="notEmpty">Not Empty</option>
|
|
104
|
+
</Dropdown>
|
|
105
|
+
<Textbox v-if="![ 'notEmpty' ].includes(value.operator)"
|
|
106
|
+
v-model="value.value"
|
|
107
|
+
:readonly="readonly"
|
|
108
|
+
class="flex-1"
|
|
109
|
+
@keyup.enter="apply"
|
|
110
|
+
@blur="apply" />
|
|
114
111
|
</div>
|
|
112
|
+
|
|
115
113
|
</div>
|
|
116
114
|
|
|
117
115
|
</template>
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
</table>
|
|
44
44
|
</div>
|
|
45
45
|
|
|
46
|
-
<ContextMenu ref="columnMenu" position="bottom-left" class="mt-2 rounded-md">
|
|
46
|
+
<ContextMenu ref="columnMenu" position="bottom-left" class="mt-2 rounded-md min-w-[240px] max-w-[240px]">
|
|
47
47
|
<template #default="{ context }">
|
|
48
|
-
<div class="flex flex-col min-
|
|
48
|
+
<div class="flex flex-col min-h-[160px]">
|
|
49
49
|
|
|
50
50
|
<br />
|
|
51
51
|
|
|
@@ -198,20 +198,22 @@
|
|
|
198
198
|
<div class="flex flex-row items-start">
|
|
199
199
|
<Checkbox v-model="filter.enabled" :default="true" @change="apply" />
|
|
200
200
|
<div class="flex-1 flex flex-col gap-3">
|
|
201
|
-
<div class="flex-1 flex flex-row gap-2">
|
|
202
|
-
<strong class="flex-1 cursor-pointer" @click="filter._collapsed = !filter._collapsed">
|
|
201
|
+
<div class="flex-1 flex flex-row items-center gap-2">
|
|
202
|
+
<strong class="flex-1 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis" @click="filter._collapsed = !filter._collapsed">
|
|
203
203
|
<svg class="inline fill-text transition-transform relative top-[-1px]"
|
|
204
204
|
:class="filter._collapsed === true ? `` : `rotate-90`"
|
|
205
205
|
width="11" height="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"/></svg>
|
|
206
206
|
{{ column(filter.key).label ?? filter.key }}
|
|
207
207
|
</strong>
|
|
208
|
-
<
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
208
|
+
<div>
|
|
209
|
+
<select v-if="filter.value.length > 1"
|
|
210
|
+
v-model="filter.modifier"
|
|
211
|
+
class="appearance-none bg-text-50 min-w-[40px] text-text-400 px-2 outline-none"
|
|
212
|
+
@change="apply()">
|
|
213
|
+
<option value="and">And</option>
|
|
214
|
+
<option value="or">Or</option>
|
|
215
|
+
</select>
|
|
216
|
+
</div>
|
|
215
217
|
<button v-if="typeOf(column(filter.key).type) !== 'enum' && filter._collapsed !== true" type="button" @click="filter.value.push({})">
|
|
216
218
|
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
217
219
|
</button>
|
|
@@ -219,7 +221,7 @@
|
|
|
219
221
|
<svg width="14" height="14" 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>
|
|
220
222
|
</button>
|
|
221
223
|
</div>
|
|
222
|
-
<div v-if="filter._collapsed !== true">
|
|
224
|
+
<div v-if="filter._collapsed !== true" class="flex flex-col">
|
|
223
225
|
<div v-if="Array.isArray(filter.value)" class="flex flex-col gap-2">
|
|
224
226
|
<div class="flex flex-row" v-for="(filterVal, filterIdx) in filter.value">
|
|
225
227
|
<PresetSelectorFilterItem
|
|
@@ -1444,7 +1444,7 @@ export default{
|
|
|
1444
1444
|
return axios({
|
|
1445
1445
|
method: this.uploadConfig.method,
|
|
1446
1446
|
url: this.uploadConfig.url,
|
|
1447
|
-
data: createFormData({ image, ...extra }),
|
|
1447
|
+
data: createFormData({ image, ...extra, ...(this.uploadConfig.data ?? {}) }),
|
|
1448
1448
|
onUploadProgress: function (progressEvent) {
|
|
1449
1449
|
if(opt.onUploadProgress)
|
|
1450
1450
|
opt.onUploadProgress(progressEvent)
|