@mixd-id/web-scaffold 0.1.230406010 → 0.1.230406011
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
|
@@ -61,9 +61,8 @@
|
|
|
61
61
|
</div>
|
|
62
62
|
|
|
63
63
|
<div class="flex-1 relative flex" v-if="!hideDetails">
|
|
64
|
-
<VirtualTable v-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items"
|
|
65
|
-
|
|
66
|
-
:appearances="presetAppearances" @scroll-end="loadNext" :pinned="pinned">
|
|
64
|
+
<VirtualTable v-if="!hideDetails" ref="table1" class="flex-1" :columns="presetColumns" :items="items"
|
|
65
|
+
:appearances="presetAppearances" @scroll-end="loadNext" :pinned="pinned">
|
|
67
66
|
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
68
67
|
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
69
68
|
<div>
|
|
@@ -594,7 +593,7 @@ export default{
|
|
|
594
593
|
},
|
|
595
594
|
|
|
596
595
|
presetColumns(){
|
|
597
|
-
if(!this.preset.columns) return
|
|
596
|
+
if(!this.preset.columns) return
|
|
598
597
|
|
|
599
598
|
for(let i = 0 ; i < (this.preset.columns).length ; i++){
|
|
600
599
|
const presetColumn = this.preset.columns[i]
|
|
@@ -1015,12 +1014,18 @@ export default{
|
|
|
1015
1014
|
},
|
|
1016
1015
|
|
|
1017
1016
|
loadNext(){
|
|
1017
|
+
|
|
1018
|
+
this.$refs.table1.setState(2)
|
|
1018
1019
|
this.socketEmit(`${this.computedDataSource}.load`, {
|
|
1019
1020
|
preset: this.preset,
|
|
1020
1021
|
afterItem: this.items[this.items.length - 1]
|
|
1021
1022
|
}, (res) => {
|
|
1023
|
+
this.$refs.table1.setState(1)
|
|
1022
1024
|
this.items.push(...res.items)
|
|
1023
1025
|
this.hasNext = res.hasNext
|
|
1026
|
+
}, (err) => {
|
|
1027
|
+
this.$refs.table1.setState(1)
|
|
1028
|
+
this.toast(err)
|
|
1024
1029
|
})
|
|
1025
1030
|
},
|
|
1026
1031
|
|
|
@@ -39,6 +39,11 @@
|
|
|
39
39
|
</tr>
|
|
40
40
|
</tbody>
|
|
41
41
|
</table>
|
|
42
|
+
<div v-if="state === 2" ref="spinner" class="h-[44px] relative">
|
|
43
|
+
<div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
|
|
44
|
+
<svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
42
47
|
</div>
|
|
43
48
|
</div>
|
|
44
49
|
<div :class="$style.calc" v-if="visibleColumns.length > 0 && items && items.length > 0" ref="calc">
|
|
@@ -54,10 +59,10 @@
|
|
|
54
59
|
</tbody>
|
|
55
60
|
</table>
|
|
56
61
|
</div>
|
|
57
|
-
<div v-else-if="visibleColumns.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
|
|
62
|
+
<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
|
|
58
63
|
<h5 class="text-text-300">No active column</h5>
|
|
59
64
|
</div>
|
|
60
|
-
<div v-else
|
|
65
|
+
<div v-else-if="Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
|
|
61
66
|
<h5 class="text-text-300">No data available</h5>
|
|
62
67
|
</div>
|
|
63
68
|
</div>
|
|
@@ -100,7 +105,8 @@ export default{
|
|
|
100
105
|
itemHeight: 0,
|
|
101
106
|
maxVisibleItems: 0,
|
|
102
107
|
isOnEndScroll: false,
|
|
103
|
-
selectedIndex: -1
|
|
108
|
+
selectedIndex: -1,
|
|
109
|
+
state: 1
|
|
104
110
|
}
|
|
105
111
|
},
|
|
106
112
|
|
|
@@ -146,7 +152,7 @@ export default{
|
|
|
146
152
|
if(!this.items || this.items.length < 1)
|
|
147
153
|
return {}
|
|
148
154
|
|
|
149
|
-
const height = (this.items.length * this.itemHeight)
|
|
155
|
+
const height = (this.items.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
|
|
150
156
|
const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
|
|
151
157
|
|
|
152
158
|
//console.log('scrollerStyle', { width, height, columns:this.columns })
|
|
@@ -164,7 +170,7 @@ export default{
|
|
|
164
170
|
},
|
|
165
171
|
|
|
166
172
|
visibleColumns(){
|
|
167
|
-
const columns = this.columns.filter(_ => _.visible)
|
|
173
|
+
const columns = (this.columns ?? []).filter(_ => _.visible)
|
|
168
174
|
return columns
|
|
169
175
|
}
|
|
170
176
|
|
|
@@ -369,6 +375,10 @@ export default{
|
|
|
369
375
|
}
|
|
370
376
|
|
|
371
377
|
return text
|
|
378
|
+
},
|
|
379
|
+
|
|
380
|
+
setState(state){
|
|
381
|
+
this.state = state
|
|
372
382
|
}
|
|
373
383
|
|
|
374
384
|
},
|