@mixd-id/web-scaffold 0.1.230406044 → 0.1.230406045
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
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<button type="button" ref="presetSelectorBtn"
|
|
8
8
|
class="flex flex-row gap-1 items-center"
|
|
9
9
|
@click="$refs.presetSelector.open($refs.presetSelectorBtn)">
|
|
10
|
-
<h3>{{ preset.name }}</h3>
|
|
10
|
+
<h3 class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis">{{ preset.name }}</h3>
|
|
11
11
|
<svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
|
|
12
12
|
</button>
|
|
13
13
|
<button type="button" @click="openPreset()">
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
</button>
|
|
16
16
|
|
|
17
17
|
<ContextMenu ref="presetSelector">
|
|
18
|
-
<div class="flex-1 flex flex-col w-[270px]">
|
|
18
|
+
<div class="flex-1 flex flex-col w-[270px] cursor-pointer">
|
|
19
19
|
<button type="button" v-for="(preset, idx) in config.presets"
|
|
20
20
|
class="p-3 text-left hover:bg-primary hover:text-white"
|
|
21
21
|
@click="config.presetIdx = idx">
|
|
@@ -58,40 +58,47 @@
|
|
|
58
58
|
</Textbox>
|
|
59
59
|
</div>
|
|
60
60
|
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
<div>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
61
|
+
<div class="flex-1 flex" v-if="mediaPrefix">
|
|
62
|
+
<VirtualTable v-if="mediaPrefix !== 'sm'" ref="table1" :columns="presetColumns" :items="items" class="flex-1"
|
|
63
|
+
@scroll-end="loadNext">
|
|
64
|
+
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
65
|
+
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
66
|
+
<div>
|
|
67
|
+
{{ column.label ?? column.key }}
|
|
68
|
+
</div>
|
|
69
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-if="presetSortedColumns[column.key] === 'asc'">
|
|
70
|
+
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
71
|
+
<path d="M6.75 5C6.75 4.58579 6.41421 4.25 6 4.25C5.58579 4.25 5.25 4.58579 5.25 5V17.6893L3.53033 15.9697C3.23744 15.6768 2.76256 15.6768 2.46967 15.9697C2.17678 16.2626 2.17678 16.7374 2.46967 17.0303L4.76256 19.3232C5.44598 20.0066 6.55402 20.0066 7.23744 19.3232L9.53033 17.0303C9.82322 16.7374 9.82322 16.2626 9.53033 15.9697C9.23744 15.6768 8.76256 15.6768 8.46967 15.9697L6.75 17.6893V5Z"/>
|
|
72
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H21C21.4142 17.75 21.75 17.4142 21.75 17C21.75 16.5858 21.4142 16.25 21 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
|
|
73
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 11.5858 12.5858 11.25 13 11.25H18C18.4142 11.25 18.75 11.5858 18.75 12C18.75 12.4142 18.4142 12.75 18 12.75H13C12.5858 12.75 12.25 12.4142 12.25 12Z"/>
|
|
74
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 7C12.25 6.58579 12.5858 6.25 13 6.25H15C15.4142 6.25 15.75 6.58579 15.75 7C15.75 7.41421 15.4142 7.75 15 7.75H13C12.5858 7.75 12.25 7.41421 12.25 7Z"/>
|
|
75
|
+
</svg>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-else-if="presetSortedColumns[column.key] === 'desc'">
|
|
78
|
+
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
79
|
+
<path d="M6.75 5C6.75 4.58579 6.41421 4.25 6 4.25C5.58579 4.25 5.25 4.58579 5.25 5V17.6893L3.53033 15.9697C3.23744 15.6768 2.76256 15.6768 2.46967 15.9697C2.17678 16.2626 2.17678 16.7374 2.46967 17.0303L4.76256 19.3232C5.44598 20.0066 6.55402 20.0066 7.23744 19.3232L9.53033 17.0303C9.82322 16.7374 9.82322 16.2626 9.53033 15.9697C9.23744 15.6768 8.76256 15.6768 8.46967 15.9697L6.75 17.6893V5Z"/>
|
|
80
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 7C12.25 6.58579 12.5858 6.25 13 6.25H21C21.4142 6.25 21.75 6.58579 21.75 7C21.75 7.41421 21.4142 7.75 21 7.75H13C12.5858 7.75 12.25 7.41421 12.25 7Z"/>
|
|
81
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 12.4142 12.5858 12.75 13 12.75H18C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H13C12.5858 11.25 12.25 11.5858 12.25 12Z"/>
|
|
82
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H15C15.4142 17.75 15.75 17.4142 15.75 17C15.75 16.5858 15.4142 16.25 15 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
|
|
83
|
+
</svg>
|
|
84
|
+
</div>
|
|
75
85
|
</div>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 12.4142 12.5858 12.75 13 12.75H18C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H13C12.5858 11.25 12.25 11.5858 12.25 12Z"/>
|
|
81
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H15C15.4142 17.75 15.75 17.4142 15.75 17C15.75 16.5858 15.4142 16.25 15 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
|
|
82
|
-
</svg>
|
|
86
|
+
</template>
|
|
87
|
+
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
88
|
+
<div :class="getHeader(slot.replace('col-', ''))">
|
|
89
|
+
<slot :name="slot" :item="item" :index="index"></slot>
|
|
83
90
|
</div>
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
87
|
-
<div :class="getHeader(slot.replace('col-', ''))">
|
|
91
|
+
</template>
|
|
92
|
+
<template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
|
|
88
93
|
<slot :name="slot" :item="item" :index="index"></slot>
|
|
89
|
-
</
|
|
90
|
-
</
|
|
91
|
-
<
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
94
|
+
</template>
|
|
95
|
+
</VirtualTable>
|
|
96
|
+
<VirtualScroll v-else :items="items" class="flex-1" @scroll-end="loadNext">
|
|
97
|
+
<template #item="{ item }">
|
|
98
|
+
<slot name="mobileItem" :item="item"></slot>
|
|
99
|
+
</template>
|
|
100
|
+
</VirtualScroll>
|
|
101
|
+
</div>
|
|
95
102
|
|
|
96
103
|
<ContextMenu ref="columnMenu" :dismiss="false">
|
|
97
104
|
<div class="flex-1 flex flex-col w-[270px] p-3">
|
|
@@ -134,7 +141,6 @@
|
|
|
134
141
|
import throttle from "lodash/throttle";
|
|
135
142
|
import VirtualTable from "./VirtualTable.vue";
|
|
136
143
|
|
|
137
|
-
|
|
138
144
|
export default{
|
|
139
145
|
components: {VirtualTable},
|
|
140
146
|
|
|
@@ -193,6 +199,32 @@ export default{
|
|
|
193
199
|
this.presetFilterSelector = null
|
|
194
200
|
},
|
|
195
201
|
|
|
202
|
+
calcMediaPrefix: throttle(function(){
|
|
203
|
+
if(!this.$el) return
|
|
204
|
+
|
|
205
|
+
const w = this.$el.clientWidth
|
|
206
|
+
if(!w) return
|
|
207
|
+
|
|
208
|
+
let prefix
|
|
209
|
+
if(w < 768){
|
|
210
|
+
prefix = 'sm'
|
|
211
|
+
}
|
|
212
|
+
else if(w < 1024){
|
|
213
|
+
prefix = 'md'
|
|
214
|
+
}
|
|
215
|
+
else if(w < 1280){
|
|
216
|
+
prefix = 'lg'
|
|
217
|
+
}
|
|
218
|
+
else if(w < 1536){
|
|
219
|
+
prefix = 'xl'
|
|
220
|
+
}
|
|
221
|
+
else{
|
|
222
|
+
prefix = '2xl'
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
this.mediaPrefix = prefix
|
|
226
|
+
}, 1000, { leading:true }),
|
|
227
|
+
|
|
196
228
|
clearSearch(){
|
|
197
229
|
this.preset.search = ''
|
|
198
230
|
this.load()
|
|
@@ -228,8 +260,7 @@ export default{
|
|
|
228
260
|
},
|
|
229
261
|
|
|
230
262
|
loadNext(){
|
|
231
|
-
|
|
232
|
-
this.$refs.table1.setState(2)
|
|
263
|
+
this.$refs.table1 ? this.$refs.table1.setState(2) : undefined
|
|
233
264
|
this.socketEmit2(this.src, {
|
|
234
265
|
preset: this.preset,
|
|
235
266
|
afterItem: this.items[this.items.length - 1]
|
|
@@ -241,7 +272,9 @@ export default{
|
|
|
241
272
|
.catch((err) => {
|
|
242
273
|
this.toast(err)
|
|
243
274
|
})
|
|
244
|
-
.finally(() =>
|
|
275
|
+
.finally(() => {
|
|
276
|
+
this.$refs.table1 ? this.$refs.table1.setState(1) : undefined
|
|
277
|
+
})
|
|
245
278
|
},
|
|
246
279
|
|
|
247
280
|
async loadConfig(){
|
|
@@ -254,6 +287,7 @@ export default{
|
|
|
254
287
|
.then((config) => {
|
|
255
288
|
Object.assign(this.config, config ?? {})
|
|
256
289
|
this.configLoaded = true
|
|
290
|
+
this.$nextTick(() => this.calcMediaPrefix())
|
|
257
291
|
})
|
|
258
292
|
}
|
|
259
293
|
},
|
|
@@ -363,7 +397,6 @@ export default{
|
|
|
363
397
|
|
|
364
398
|
},
|
|
365
399
|
|
|
366
|
-
|
|
367
400
|
inject: [ 'socket', 'socketEmit2', 'toast', 'alert' ],
|
|
368
401
|
|
|
369
402
|
computed: {
|
|
@@ -469,12 +502,15 @@ export default{
|
|
|
469
502
|
count: null,
|
|
470
503
|
configLoaded: false,
|
|
471
504
|
selectedColumn: null,
|
|
472
|
-
copiedConfig: null
|
|
505
|
+
copiedConfig: null,
|
|
506
|
+
mediaPrefix: 'md'
|
|
473
507
|
}
|
|
474
508
|
},
|
|
475
509
|
|
|
476
510
|
|
|
477
511
|
mounted() {
|
|
512
|
+
window.addEventListener('resize', () => this.calcMediaPrefix())
|
|
513
|
+
this.calcMediaPrefix()
|
|
478
514
|
this.socket.onAny(this.onHooks)
|
|
479
515
|
|
|
480
516
|
window.setTimeout(() => {
|
|
@@ -381,7 +381,6 @@
|
|
|
381
381
|
|
|
382
382
|
</div>
|
|
383
383
|
</div>
|
|
384
|
-
|
|
385
384
|
</div>
|
|
386
385
|
</template>
|
|
387
386
|
|
|
@@ -643,7 +642,7 @@ export default{
|
|
|
643
642
|
@apply flex flex-row gap-4;
|
|
644
643
|
}
|
|
645
644
|
.comp-md>*:first-child{
|
|
646
|
-
@apply w-[200px];
|
|
645
|
+
@apply w-[200px] flex flex-col;
|
|
647
646
|
}
|
|
648
647
|
.comp-md>*:last-child{
|
|
649
648
|
@apply flex-1 flex flex-col;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
<div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
|
|
4
4
|
<div v-if="visibleItems && visibleItems.length > 0" :class="$style.spacer" ref="spacer" :style="spacerStyle">
|
|
5
|
-
<div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
|
|
5
|
+
<div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id" class="bg-base-500"
|
|
6
6
|
@click="select(item, index)"
|
|
7
7
|
:class="[ $style.item, selectedIndex === ((item && item.id) ? item.id : visibleStartIndex + index) ? $style.trSelected : '', item._highlight ? $style.highlight : '' ].join(' ')">
|
|
8
8
|
<slot name="item" :item="item" :index="index"></slot>
|
|
@@ -212,6 +212,7 @@ export default{
|
|
|
212
212
|
.spacer{
|
|
213
213
|
will-change: auto;
|
|
214
214
|
position: relative;
|
|
215
|
+
@apply divide-y divide-text-50;
|
|
215
216
|
}
|
|
216
217
|
|
|
217
218
|
.item:hover{
|