@mixd-id/web-scaffold 0.1.230406255 → 0.1.230406257
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/Checkbox.vue +1 -1
- package/src/components/ContextMenu.vue +7 -3
- package/src/components/DayTimeRange.vue +4 -3
- package/src/components/Dropdown.vue +1 -1
- package/src/components/ImportModal.vue +3 -3
- package/src/components/List.vue +3 -3
- package/src/components/ListItem.vue +1 -0
- package/src/components/ListView.vue +1 -1
- package/src/components/MultilineText.vue +1 -1
- package/src/components/Radio.vue +1 -1
- package/src/components/Textarea.vue +1 -1
- package/src/components/Textbox.vue +1 -1
- package/src/components/VirtualTable.vue +5 -5
- package/src/themes/default/index.js +15 -14
package/package.json
CHANGED
|
@@ -151,7 +151,7 @@ export default {
|
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
.indicator{
|
|
154
|
-
@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-200 bg-base-
|
|
154
|
+
@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-200 bg-base-500;
|
|
155
155
|
@apply flex items-center justify-center overflow-hidden;
|
|
156
156
|
transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
157
157
|
}
|
|
@@ -65,7 +65,8 @@ export default {
|
|
|
65
65
|
computedStyle: null,
|
|
66
66
|
isOpen: false,
|
|
67
67
|
context: null,
|
|
68
|
-
closing: false
|
|
68
|
+
closing: false,
|
|
69
|
+
currentCaller: null
|
|
69
70
|
}
|
|
70
71
|
},
|
|
71
72
|
|
|
@@ -114,7 +115,8 @@ export default {
|
|
|
114
115
|
|
|
115
116
|
open(caller, context){
|
|
116
117
|
|
|
117
|
-
|
|
118
|
+
const originalCaller = caller
|
|
119
|
+
if(this.isOpen && this.currentCaller !== caller){
|
|
118
120
|
return this.close(() => {
|
|
119
121
|
window.setTimeout(() => {
|
|
120
122
|
this.open(caller, context)
|
|
@@ -126,7 +128,7 @@ export default {
|
|
|
126
128
|
this.isOpen = true
|
|
127
129
|
}
|
|
128
130
|
|
|
129
|
-
|
|
131
|
+
caller = caller ?? this.caller
|
|
130
132
|
|
|
131
133
|
if(caller){
|
|
132
134
|
|
|
@@ -248,6 +250,8 @@ export default {
|
|
|
248
250
|
this.onOpen()
|
|
249
251
|
})
|
|
250
252
|
}
|
|
253
|
+
|
|
254
|
+
this.currentCaller = originalCaller
|
|
251
255
|
}
|
|
252
256
|
else{
|
|
253
257
|
console.error('Undefined caller for context menu')
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
</div>
|
|
37
37
|
<div class="flex justify-center">
|
|
38
38
|
<button type="button" @click="add" class="p-2">
|
|
39
|
-
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
|
|
39
|
+
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M352 232H280V160c0-13.26-10.74-24-23.1-24S232 146.7 232 160v72H160C146.7 232 136 242.7 136 256c0 13.25 10.75 24 24 24H232V352c0 13.25 10.75 24 24 24S280 365.3 280 352V280h72C365.3 280 376 269.3 376 256C376 242.7 365.3 232 352 232zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256S512 397.4 512 256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z"/></svg>
|
|
40
40
|
</button>
|
|
41
41
|
</div>
|
|
42
42
|
</div>
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
export default{
|
|
48
48
|
|
|
49
|
-
emits: [ 'update:modelValue' ],
|
|
49
|
+
emits: [ 'change', 'update:modelValue' ],
|
|
50
50
|
|
|
51
51
|
props: {
|
|
52
52
|
|
|
@@ -81,6 +81,7 @@ export default{
|
|
|
81
81
|
console.log(modelValue)
|
|
82
82
|
|
|
83
83
|
this.$emit('update:modelValue', modelValue)
|
|
84
|
+
this.$emit('change', modelValue)
|
|
84
85
|
},
|
|
85
86
|
|
|
86
87
|
updateValue(){
|
|
@@ -111,7 +112,7 @@ export default{
|
|
|
111
112
|
<style module>
|
|
112
113
|
|
|
113
114
|
.comp{
|
|
114
|
-
@apply border-[1px] border-text-200 bg-base-
|
|
115
|
+
@apply border-[1px] border-text-200 bg-base-500 rounded-lg;
|
|
115
116
|
@apply inline-flex flex-col divide-y divide-text-100;
|
|
116
117
|
}
|
|
117
118
|
|
|
@@ -161,7 +161,7 @@ export default {
|
|
|
161
161
|
|
|
162
162
|
.dropdown{
|
|
163
163
|
@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
|
|
164
|
-
@apply border-[1px] border-text-200 bg-base-
|
|
164
|
+
@apply border-[1px] border-text-200 bg-base-500;
|
|
165
165
|
}
|
|
166
166
|
.dropdown:not(.readonly){
|
|
167
167
|
@apply hover:border-text-300;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Modal :state="isOpen" width="480" height="560">
|
|
3
3
|
<template v-slot:head>
|
|
4
|
-
<div class="relative
|
|
5
|
-
<div v-if="step !== 3">
|
|
4
|
+
<div class="relative flex flex-row">
|
|
5
|
+
<div v-if="step !== 3" class="flex-1 p-6 leading-relaxed">
|
|
6
6
|
<h3>{{ title }}</h3>
|
|
7
7
|
<slot v-if="step === 1 && 'description' in $slots" name="description"></slot>
|
|
8
8
|
<p v-else-if="step === 1" class="mt-1 text-text-400" v-html="description"></p>
|
|
9
9
|
<slot v-else-if="step === 2 && 'description2' in $slots" name="description2"></slot>
|
|
10
10
|
<p v-else-if="step === 2" class="mt-1 text-text-400" v-html="description2"></p>
|
|
11
11
|
</div>
|
|
12
|
-
<div class="
|
|
12
|
+
<div class="p-2 pl-0">
|
|
13
13
|
<button type="button" class="p-2" @click="isOpen = false">
|
|
14
14
|
<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">
|
|
15
15
|
<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"/>
|
package/src/components/List.vue
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
@mousedown="(e) => $util.dragResize(e, resize1)"></div>
|
|
23
23
|
</div>
|
|
24
24
|
|
|
25
|
-
<div class="flex-1 flex flex-col gap-
|
|
25
|
+
<div class="flex-1 flex flex-col gap-3" :class="containerClass">
|
|
26
26
|
|
|
27
27
|
<slot name="head"
|
|
28
28
|
:preset="preset"
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
|
|
86
86
|
<VirtualTable v-if="presetView === 'table'"
|
|
87
87
|
:columns="columns"
|
|
88
|
-
class="flex-1 rounded-lg
|
|
88
|
+
class="flex-1 rounded-lg"
|
|
89
89
|
:items="data.items"
|
|
90
90
|
@scroll-end="loadNext">
|
|
91
91
|
|
|
@@ -344,7 +344,7 @@ export default{
|
|
|
344
344
|
id: items.map(item => item.id)
|
|
345
345
|
})
|
|
346
346
|
.then(({ items:nextItems }) => {
|
|
347
|
-
nextItems.forEach(item => this.$util.
|
|
347
|
+
nextItems.forEach(item => this.$util.unshift(this.data.items, item))
|
|
348
348
|
const destroyedItems = items.filter(_ => !nextItems.find(i => i.id === _.id))
|
|
349
349
|
this.$util.remove(this.data.items, destroyedItems)
|
|
350
350
|
})
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
ref="table1"
|
|
134
134
|
:columns="presetColumns"
|
|
135
135
|
:items="items"
|
|
136
|
-
class="flex-1
|
|
136
|
+
class="flex-1 panel-400"
|
|
137
137
|
@scroll-end="loadNext">
|
|
138
138
|
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
139
139
|
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
@@ -138,7 +138,7 @@ export default{
|
|
|
138
138
|
<style module>
|
|
139
139
|
|
|
140
140
|
.textarea{
|
|
141
|
-
@apply flex items-start border-[1px] border-text-200 bg-base-
|
|
141
|
+
@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
|
|
142
142
|
@apply !max-h-[200px];
|
|
143
143
|
}
|
|
144
144
|
.textarea textarea{
|
package/src/components/Radio.vue
CHANGED
|
@@ -85,7 +85,7 @@ export default{
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
.indicator{
|
|
88
|
-
@apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200
|
|
88
|
+
@apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-500;
|
|
89
89
|
@apply flex items-center justify-center overflow-hidden;
|
|
90
90
|
transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
91
91
|
}
|
|
@@ -140,7 +140,7 @@ export default{
|
|
|
140
140
|
|
|
141
141
|
.textarea{
|
|
142
142
|
@apply min-h-[var(--h-cp)];
|
|
143
|
-
@apply flex items-start border-[1px] border-text-200 bg-base-
|
|
143
|
+
@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
|
|
144
144
|
@apply !max-h-[200px];
|
|
145
145
|
}
|
|
146
146
|
.textarea textarea{
|
|
@@ -430,8 +430,8 @@ export default{
|
|
|
430
430
|
<style module>
|
|
431
431
|
|
|
432
432
|
.comp{
|
|
433
|
-
@apply flex flex-col overflow-hidden;
|
|
434
|
-
@apply border-[1px] border-text-
|
|
433
|
+
@apply flex flex-col overflow-hidden bg-base-500;
|
|
434
|
+
@apply border-[1px] border-text-200 rounded-sm;
|
|
435
435
|
}
|
|
436
436
|
|
|
437
437
|
.comp>*:last-child{
|
|
@@ -439,7 +439,7 @@ export default{
|
|
|
439
439
|
}
|
|
440
440
|
|
|
441
441
|
.header{
|
|
442
|
-
@apply border-b-[1px] border-text-
|
|
442
|
+
@apply border-b-[1px] border-text-200;
|
|
443
443
|
}
|
|
444
444
|
|
|
445
445
|
.headerCol{
|
|
@@ -476,7 +476,7 @@ export default{
|
|
|
476
476
|
}
|
|
477
477
|
|
|
478
478
|
.table tbody td{
|
|
479
|
-
@apply border-b-[1px] border-text-
|
|
479
|
+
@apply border-b-[1px] border-text-200;
|
|
480
480
|
}
|
|
481
481
|
.table tbody td:nth-child(odd){
|
|
482
482
|
}
|
|
@@ -498,7 +498,7 @@ export default{
|
|
|
498
498
|
}
|
|
499
499
|
|
|
500
500
|
.separator{
|
|
501
|
-
@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-text-
|
|
501
|
+
@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-text-200;
|
|
502
502
|
@apply border-r-[1px];
|
|
503
503
|
}
|
|
504
504
|
.table th:hover .separator{
|
|
@@ -22,12 +22,12 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
|
|
|
22
22
|
'--base-500': '255, 255, 255',
|
|
23
23
|
'--base': '255, 255, 255',
|
|
24
24
|
|
|
25
|
-
"--text-50": '
|
|
26
|
-
"--text-100": '
|
|
27
|
-
"--text-200": '
|
|
25
|
+
"--text-50": '220, 220, 220',
|
|
26
|
+
"--text-100": '210, 210, 210',
|
|
27
|
+
"--text-200": '201, 201, 201',
|
|
28
28
|
"--text-300": '191, 191, 191',
|
|
29
|
-
"--text-400": '
|
|
30
|
-
"--text-500": '
|
|
29
|
+
"--text-400": '116, 116, 116',
|
|
30
|
+
"--text-500": '86, 86, 86',
|
|
31
31
|
"--text": '31, 41, 55',
|
|
32
32
|
|
|
33
33
|
"--primary": '81, 131, 240',
|
|
@@ -60,6 +60,9 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
|
|
|
60
60
|
'--facebook-100': '205, 215, 231',
|
|
61
61
|
'--facebook-500': '8, 102, 255',
|
|
62
62
|
|
|
63
|
+
'--panel-300': 'rgb(235, 237, 240)',
|
|
64
|
+
'--panel-400': 'rgb(245, 247, 250)',
|
|
65
|
+
'--panel-500': 'rgb(255, 255, 255)',
|
|
63
66
|
},
|
|
64
67
|
|
|
65
68
|
'html[data-theme="dark"], .html[data-theme="dark"]': {
|
|
@@ -93,6 +96,10 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
|
|
|
93
96
|
"--secondary-700": '95, 98, 103',
|
|
94
97
|
"--secondary-800": '115, 118, 122',
|
|
95
98
|
"--secondary-900": '135, 137, 141',
|
|
99
|
+
|
|
100
|
+
"--panel-300": 'rgb(0, 0, 0)',
|
|
101
|
+
"--panel-400": 'rgb(17, 21, 28)',
|
|
102
|
+
"--panel-500": 'rgb(27, 31, 38)',
|
|
96
103
|
},
|
|
97
104
|
|
|
98
105
|
'body': {
|
|
@@ -227,28 +234,22 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
|
|
|
227
234
|
transform: 'scale(.9)'
|
|
228
235
|
},
|
|
229
236
|
|
|
230
|
-
'.panel-50': {
|
|
231
|
-
'--webkit-backdrop-filter': 'var(--panel-50-backdrop-filter)',
|
|
232
|
-
'backdrop-filter': 'var(--panel-50-backdrop-filter)',
|
|
233
|
-
'background-color': 'rgb(var(--base-50))',
|
|
234
|
-
},
|
|
235
|
-
|
|
236
237
|
'.panel-300': {
|
|
237
238
|
'--webkit-backdrop-filter': 'var(--panel-300-backdrop-filter)',
|
|
238
239
|
'backdrop-filter': 'var(--panel-300-backdrop-filter)',
|
|
239
|
-
'background-color': '
|
|
240
|
+
'background-color': 'var(--panel-300)',
|
|
240
241
|
},
|
|
241
242
|
|
|
242
243
|
'.panel-400': {
|
|
243
244
|
'--webkit-backdrop-filter': 'var(--panel-400-backdrop-filter)',
|
|
244
245
|
'backdrop-filter': 'var(--panel-400-backdrop-filter)',
|
|
245
|
-
'background-color': '
|
|
246
|
+
'background-color': 'var(--panel-400)',
|
|
246
247
|
},
|
|
247
248
|
|
|
248
249
|
'.panel-500': {
|
|
249
250
|
'--webkit-backdrop-filter': 'var(--panel-500-backdrop-filter)',
|
|
250
251
|
'backdrop-filter': 'var(--panel-500-backdrop-filter)',
|
|
251
|
-
'background-color': '
|
|
252
|
+
'background-color': 'var(--panel-500)',
|
|
252
253
|
},
|
|
253
254
|
|
|
254
255
|
})
|