@mixd-id/web-scaffold 0.1.230406044 → 0.1.230406046
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
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<div :class="$style.comp" v-if="configLoaded">
|
|
3
3
|
|
|
4
4
|
<slot v-if="$slots.head" name="head"></slot>
|
|
5
|
-
<div v-else class="flex flex-row items-center gap-4">
|
|
5
|
+
<div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 p-4">
|
|
6
6
|
<div class="flex-1 flex flex-row gap-4">
|
|
7
7
|
<button type="button" ref="presetSelectorBtn"
|
|
8
|
-
class="flex flex-row gap-1 items-center"
|
|
8
|
+
class="flex-1 md:flex-none flex flex-row gap-1 items-center text-left md:ml-2"
|
|
9
9
|
@click="$refs.presetSelector.open($refs.presetSelectorBtn)">
|
|
10
|
-
<h3>{{ preset.name }}</h3>
|
|
10
|
+
<h3 class="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,41 +15,43 @@
|
|
|
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
|
-
@click="
|
|
21
|
+
@click="selectPreset(idx)">
|
|
22
22
|
{{ preset.name }}
|
|
23
23
|
</button>
|
|
24
24
|
</div>
|
|
25
25
|
</ContextMenu>
|
|
26
26
|
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
<
|
|
30
|
-
<div class="
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
27
|
+
<div class="absolute">
|
|
28
|
+
<Modal ref="setting" width="680" height="560" position="bottom">
|
|
29
|
+
<template #head>
|
|
30
|
+
<div class="relative">
|
|
31
|
+
<div class="absolute top-0 right-0 p-2 py-3">
|
|
32
|
+
<button type="button" class="p-2" @click="$refs.setting.close()">
|
|
33
|
+
<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">
|
|
34
|
+
<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"/>
|
|
35
|
+
</svg>
|
|
36
|
+
</button>
|
|
37
|
+
</div>
|
|
36
38
|
</div>
|
|
37
|
-
</
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
</
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
</
|
|
39
|
+
</template>
|
|
40
|
+
<template #foot>
|
|
41
|
+
<div class="p-6 py-4 border-t-[1px] border-text-50">
|
|
42
|
+
<Button class="w-full md:w-[90px]" @click="applyPreset">Apply</Button>
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
<ListViewSettings ref="listviewSettings" class="flex-1"
|
|
46
|
+
:config="copiedConfig" />
|
|
47
|
+
</Modal>
|
|
48
|
+
</div>
|
|
47
49
|
</div>
|
|
48
50
|
|
|
49
51
|
<slot name="headerOpt"></slot>
|
|
50
52
|
|
|
51
53
|
<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
|
|
52
|
-
@keyup.enter="load" :class="$style.searchBox">
|
|
54
|
+
@keyup.enter="load" :class="$style.searchBox" v-if="mediaPrefix !== 'sm'">
|
|
53
55
|
<template #start>
|
|
54
56
|
<div class="pl-2">
|
|
55
57
|
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>
|
|
@@ -58,40 +60,58 @@
|
|
|
58
60
|
</Textbox>
|
|
59
61
|
</div>
|
|
60
62
|
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
<div>
|
|
66
|
-
|
|
63
|
+
<div v-if="mediaPrefix === 'sm'" class="px-6 py-4">
|
|
64
|
+
<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
|
|
65
|
+
@keyup.enter="load" :class="$style.searchBox">
|
|
66
|
+
<template #start>
|
|
67
|
+
<div class="pl-2">
|
|
68
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>
|
|
67
69
|
</div>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
</template>
|
|
71
|
+
</Textbox>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="flex-1 flex" v-if="mediaPrefix">
|
|
75
|
+
<VirtualTable v-if="mediaPrefix !== 'sm'" ref="table1" :columns="presetColumns" :items="items" class="flex-1"
|
|
76
|
+
@scroll-end="loadNext">
|
|
77
|
+
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
78
|
+
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
79
|
+
<div>
|
|
80
|
+
{{ column.label ?? column.key }}
|
|
81
|
+
</div>
|
|
82
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-if="presetSortedColumns[column.key] === 'asc'">
|
|
83
|
+
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
84
|
+
<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"/>
|
|
85
|
+
<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"/>
|
|
86
|
+
<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"/>
|
|
87
|
+
<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"/>
|
|
88
|
+
</svg>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="absolute top-0 right-0 p-2 bg-base-500" v-else-if="presetSortedColumns[column.key] === 'desc'">
|
|
91
|
+
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
92
|
+
<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"/>
|
|
93
|
+
<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"/>
|
|
94
|
+
<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"/>
|
|
95
|
+
<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"/>
|
|
96
|
+
</svg>
|
|
97
|
+
</div>
|
|
75
98
|
</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>
|
|
99
|
+
</template>
|
|
100
|
+
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
101
|
+
<div :class="getHeader(slot.replace('col-', ''))">
|
|
102
|
+
<slot :name="slot" :item="item" :index="index"></slot>
|
|
83
103
|
</div>
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
87
|
-
<div :class="getHeader(slot.replace('col-', ''))">
|
|
104
|
+
</template>
|
|
105
|
+
<template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
|
|
88
106
|
<slot :name="slot" :item="item" :index="index"></slot>
|
|
89
|
-
</
|
|
90
|
-
</
|
|
91
|
-
<
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
107
|
+
</template>
|
|
108
|
+
</VirtualTable>
|
|
109
|
+
<VirtualScroll v-else :items="items" class="flex-1" @scroll-end="loadNext">
|
|
110
|
+
<template #item="{ item }">
|
|
111
|
+
<slot name="mobileItem" :item="item"></slot>
|
|
112
|
+
</template>
|
|
113
|
+
</VirtualScroll>
|
|
114
|
+
</div>
|
|
95
115
|
|
|
96
116
|
<ContextMenu ref="columnMenu" :dismiss="false">
|
|
97
117
|
<div class="flex-1 flex flex-col w-[270px] p-3">
|
|
@@ -132,11 +152,8 @@
|
|
|
132
152
|
<script>
|
|
133
153
|
|
|
134
154
|
import throttle from "lodash/throttle";
|
|
135
|
-
import VirtualTable from "./VirtualTable.vue";
|
|
136
|
-
|
|
137
155
|
|
|
138
156
|
export default{
|
|
139
|
-
components: {VirtualTable},
|
|
140
157
|
|
|
141
158
|
emits: [ ],
|
|
142
159
|
|
|
@@ -193,6 +210,32 @@ export default{
|
|
|
193
210
|
this.presetFilterSelector = null
|
|
194
211
|
},
|
|
195
212
|
|
|
213
|
+
calcMediaPrefix: throttle(function(){
|
|
214
|
+
if(!this.$el) return
|
|
215
|
+
|
|
216
|
+
const w = this.$el.clientWidth
|
|
217
|
+
if(!w) return
|
|
218
|
+
|
|
219
|
+
let prefix
|
|
220
|
+
if(w < 768){
|
|
221
|
+
prefix = 'sm'
|
|
222
|
+
}
|
|
223
|
+
else if(w < 1024){
|
|
224
|
+
prefix = 'md'
|
|
225
|
+
}
|
|
226
|
+
else if(w < 1280){
|
|
227
|
+
prefix = 'lg'
|
|
228
|
+
}
|
|
229
|
+
else if(w < 1536){
|
|
230
|
+
prefix = 'xl'
|
|
231
|
+
}
|
|
232
|
+
else{
|
|
233
|
+
prefix = '2xl'
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
this.mediaPrefix = prefix
|
|
237
|
+
}, 100, { leading:true }),
|
|
238
|
+
|
|
196
239
|
clearSearch(){
|
|
197
240
|
this.preset.search = ''
|
|
198
241
|
this.load()
|
|
@@ -228,8 +271,7 @@ export default{
|
|
|
228
271
|
},
|
|
229
272
|
|
|
230
273
|
loadNext(){
|
|
231
|
-
|
|
232
|
-
this.$refs.table1.setState(2)
|
|
274
|
+
this.$refs.table1 ? this.$refs.table1.setState(2) : undefined
|
|
233
275
|
this.socketEmit2(this.src, {
|
|
234
276
|
preset: this.preset,
|
|
235
277
|
afterItem: this.items[this.items.length - 1]
|
|
@@ -241,7 +283,9 @@ export default{
|
|
|
241
283
|
.catch((err) => {
|
|
242
284
|
this.toast(err)
|
|
243
285
|
})
|
|
244
|
-
.finally(() =>
|
|
286
|
+
.finally(() => {
|
|
287
|
+
this.$refs.table1 ? this.$refs.table1.setState(1) : undefined
|
|
288
|
+
})
|
|
245
289
|
},
|
|
246
290
|
|
|
247
291
|
async loadConfig(){
|
|
@@ -254,6 +298,7 @@ export default{
|
|
|
254
298
|
.then((config) => {
|
|
255
299
|
Object.assign(this.config, config ?? {})
|
|
256
300
|
this.configLoaded = true
|
|
301
|
+
this.$nextTick(() => this.calcMediaPrefix())
|
|
257
302
|
})
|
|
258
303
|
}
|
|
259
304
|
},
|
|
@@ -313,6 +358,13 @@ export default{
|
|
|
313
358
|
this.$refs.setting.open()
|
|
314
359
|
},
|
|
315
360
|
|
|
361
|
+
selectPreset(idx){
|
|
362
|
+
if(this.config.presetIdx !== idx){
|
|
363
|
+
this.config.presetIdx = idx
|
|
364
|
+
this.load()
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
|
|
316
368
|
applyPreset(){
|
|
317
369
|
if(JSON.stringify(this.copiedConfig) !== JSON.stringify(this.config)){
|
|
318
370
|
Object.assign(this.config, this.copiedConfig)
|
|
@@ -363,7 +415,6 @@ export default{
|
|
|
363
415
|
|
|
364
416
|
},
|
|
365
417
|
|
|
366
|
-
|
|
367
418
|
inject: [ 'socket', 'socketEmit2', 'toast', 'alert' ],
|
|
368
419
|
|
|
369
420
|
computed: {
|
|
@@ -469,12 +520,15 @@ export default{
|
|
|
469
520
|
count: null,
|
|
470
521
|
configLoaded: false,
|
|
471
522
|
selectedColumn: null,
|
|
472
|
-
copiedConfig: null
|
|
523
|
+
copiedConfig: null,
|
|
524
|
+
mediaPrefix: 'md'
|
|
473
525
|
}
|
|
474
526
|
},
|
|
475
527
|
|
|
476
528
|
|
|
477
529
|
mounted() {
|
|
530
|
+
window.addEventListener('resize', () => this.calcMediaPrefix())
|
|
531
|
+
this.calcMediaPrefix()
|
|
478
532
|
this.socket.onAny(this.onHooks)
|
|
479
533
|
|
|
480
534
|
window.setTimeout(() => {
|
|
@@ -508,7 +562,7 @@ export default{
|
|
|
508
562
|
<style module>
|
|
509
563
|
|
|
510
564
|
.comp{
|
|
511
|
-
@apply flex-1 flex flex-col
|
|
565
|
+
@apply flex-1 flex flex-col divide-y md:divide-none divide-text-50;
|
|
512
566
|
}
|
|
513
567
|
|
|
514
568
|
.header{
|
|
@@ -522,10 +576,6 @@ export default{
|
|
|
522
576
|
@apply border-primary;
|
|
523
577
|
}
|
|
524
578
|
|
|
525
|
-
.searchBox{
|
|
526
|
-
@apply w-[300px] max-w-[30%];
|
|
527
|
-
}
|
|
528
|
-
|
|
529
579
|
.hoverable{
|
|
530
580
|
@apply hover:bg-primary hover:text-white;
|
|
531
581
|
}
|
|
@@ -3,19 +3,22 @@
|
|
|
3
3
|
<div class="border-r-[1px] border-text-50 bg-base-400">
|
|
4
4
|
|
|
5
5
|
<div class="p-6 flex flex-row">
|
|
6
|
-
<h3 class="flex-1">Presets</h3>
|
|
7
|
-
<button type="button" @click="addPreset">
|
|
6
|
+
<h3 class="md:flex-1">Presets</h3>
|
|
7
|
+
<button type="button" @click="addPreset" class="ml-4">
|
|
8
8
|
<svg width="21" height="21" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
|
|
9
9
|
</button>
|
|
10
10
|
</div>
|
|
11
11
|
|
|
12
12
|
<div class="flex-1 overflow-y-auto">
|
|
13
13
|
<div v-for="(preset, idx) in config.presets"
|
|
14
|
-
class="p-2 flex flex-row gap-2 items-center hover:bg-primary-50 cursor-pointer"
|
|
14
|
+
class="p-2 py-4 md:py-2 flex flex-row gap-2 items-center hover:bg-primary-50 cursor-pointer"
|
|
15
15
|
:class="config.presetIdx === idx ? 'bg-primary-100' : ''">
|
|
16
16
|
<div @click="config.presetIdx = idx" class="flex-1 p-1 pl-4 overflow-x-hidden whitespace-nowrap text-ellipsis">
|
|
17
17
|
<label>{{ preset.name }}</label>
|
|
18
18
|
</div>
|
|
19
|
+
<button type="button" @click="detailMode = true" class="md:hidden">
|
|
20
|
+
<svg width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
|
|
21
|
+
</button>
|
|
19
22
|
<button type="button" class="px-2" v-if="config.presets.length > 1" @click="removePreset(idx)">
|
|
20
23
|
<svg width="16" height="16" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
|
|
21
24
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V16C10.75 16.4142 10.4142 16.75 10 16.75C9.58579 16.75 9.25 16.4142 9.25 16V11C9.25 10.5858 9.58579 10.25 10 10.25Z"/>
|
|
@@ -31,7 +34,7 @@
|
|
|
31
34
|
<div>
|
|
32
35
|
<div class="p-6 pb-0">
|
|
33
36
|
<div class="flex flex-row items-center gap-4 mb-3">
|
|
34
|
-
<button type="button" class="hidden" @click="
|
|
37
|
+
<button type="button" class="md:hidden" @click="detailMode = false">
|
|
35
38
|
<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-300 hover:fill-text-400" xmlns="http://www.w3.org/2000/svg">
|
|
36
39
|
<path d="M10.5303 17.9697C10.8232 18.2626 10.8232 18.7374 10.5303 19.0303C10.2374 19.3232 9.76253 19.3232 9.46964 19.0303L3.67675 13.2374C2.99333 12.554 2.99333 11.446 3.67675 10.7626L9.46964 4.96967C9.76253 4.67678 10.2374 4.67678 10.5303 4.96967C10.8232 5.26256 10.8232 5.73744 10.5303 6.03033L5.31063 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.31063L10.5303 17.9697Z"/>
|
|
37
40
|
</svg>
|
|
@@ -381,7 +384,6 @@
|
|
|
381
384
|
|
|
382
385
|
</div>
|
|
383
386
|
</div>
|
|
384
|
-
|
|
385
387
|
</div>
|
|
386
388
|
</template>
|
|
387
389
|
|
|
@@ -507,8 +509,8 @@ export default{
|
|
|
507
509
|
styleComp(){
|
|
508
510
|
return [
|
|
509
511
|
this.$style.comp,
|
|
510
|
-
this.$style['comp-' + this.
|
|
511
|
-
this.
|
|
512
|
+
this.$style['comp-' + this.mediaPrefix],
|
|
513
|
+
this.detailMode ? this.$style['detailMode'] : ''
|
|
512
514
|
]
|
|
513
515
|
.join(' ')
|
|
514
516
|
},
|
|
@@ -593,13 +595,13 @@ export default{
|
|
|
593
595
|
],
|
|
594
596
|
presetFilterSelector: null,
|
|
595
597
|
presetSortSelector: null,
|
|
596
|
-
|
|
597
|
-
|
|
598
|
+
mediaPrefix: null,
|
|
599
|
+
detailMode: false,
|
|
598
600
|
}
|
|
599
601
|
},
|
|
600
602
|
|
|
601
603
|
mounted() {
|
|
602
|
-
this.
|
|
604
|
+
this.mediaPrefix = this.$el.clientWidth <= 480 ? 'sm' : 'md'
|
|
603
605
|
},
|
|
604
606
|
|
|
605
607
|
watch: {
|
|
@@ -632,10 +634,10 @@ export default{
|
|
|
632
634
|
.comp-sm>*:last-child{
|
|
633
635
|
@apply hidden;
|
|
634
636
|
}
|
|
635
|
-
.comp-sm.
|
|
637
|
+
.comp-sm.detailMode>*:first-child{
|
|
636
638
|
@apply hidden;
|
|
637
639
|
}
|
|
638
|
-
.comp-sm.
|
|
640
|
+
.comp-sm.detailMode>*:last-child{
|
|
639
641
|
@apply block;
|
|
640
642
|
}
|
|
641
643
|
|
|
@@ -643,7 +645,7 @@ export default{
|
|
|
643
645
|
@apply flex flex-row gap-4;
|
|
644
646
|
}
|
|
645
647
|
.comp-md>*:first-child{
|
|
646
|
-
@apply w-[200px];
|
|
648
|
+
@apply w-[200px] flex flex-col;
|
|
647
649
|
}
|
|
648
650
|
.comp-md>*:last-child{
|
|
649
651
|
@apply flex-1 flex flex-col;
|