@mixd-id/web-scaffold 0.1.230406331 → 0.1.230406332
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
package/src/components/List.vue
CHANGED
|
@@ -120,57 +120,77 @@
|
|
|
120
120
|
</div>
|
|
121
121
|
</slot>
|
|
122
122
|
|
|
123
|
-
<div
|
|
124
|
-
<
|
|
125
|
-
|
|
123
|
+
<div class="flex-1 flex" ref="content">
|
|
124
|
+
<div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
|
|
125
|
+
<svg class="animate-spin" width="36" height="36" 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>
|
|
126
|
+
</div>
|
|
126
127
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
128
|
+
<div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
|
|
129
|
+
<VirtualTable
|
|
130
|
+
ref="table"
|
|
131
|
+
:columns="columns"
|
|
132
|
+
class="flex-1 rounded-lg panel-400"
|
|
133
|
+
:items="data.items"
|
|
134
|
+
:enumCache="enumCache"
|
|
135
|
+
@scroll-end="loadNext"
|
|
136
|
+
@item-click="onTableItemClick">
|
|
137
|
+
|
|
138
|
+
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
139
|
+
<div :class="getHeader(slot.replace('col-', ''))">
|
|
140
|
+
<slot :name="slot" :item="item" :index="index"></slot>
|
|
141
|
+
</div>
|
|
142
|
+
</template>
|
|
142
143
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
<template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
|
|
145
|
+
<slot :name="slot" :item="item" :index="index"></slot>
|
|
146
|
+
</template>
|
|
147
|
+
|
|
148
|
+
<template #end>
|
|
149
|
+
<div v-if="data?.hasNext" class="flex justify-center p-3">
|
|
150
|
+
<svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" 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>
|
|
151
|
+
<button v-else type="button" class="text-text-300" @click="loadNext()">
|
|
152
|
+
{{ $t('Load More' )}}
|
|
153
|
+
</button>
|
|
154
|
+
</div>
|
|
155
|
+
</template>
|
|
146
156
|
|
|
147
|
-
|
|
148
|
-
|
|
157
|
+
</VirtualTable>
|
|
158
|
+
</div>
|
|
149
159
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
160
|
+
<VirtualGrid v-else-if="presetView === 'grid'"
|
|
161
|
+
ref="grid"
|
|
162
|
+
:items="dataItems"
|
|
163
|
+
:column="computedGridColumn"
|
|
164
|
+
:class="gridClass"
|
|
165
|
+
@scroll-end="loadNext"
|
|
166
|
+
:container-class="`${gridContainerClass}`"
|
|
167
|
+
:config="config">
|
|
168
|
+
<template #item="{ item }">
|
|
169
|
+
<slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
|
|
170
|
+
<div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
|
|
171
|
+
<div>
|
|
172
|
+
<Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
|
|
173
|
+
</div>
|
|
174
|
+
<div class="flex-1 flex flex-col leading-tight">
|
|
175
|
+
<small>{{ item.code }}</small>
|
|
176
|
+
<strong>{{ item.name }}</strong>
|
|
177
|
+
</div>
|
|
167
178
|
</div>
|
|
179
|
+
</slot>
|
|
180
|
+
</template>
|
|
181
|
+
|
|
182
|
+
<template #end>
|
|
183
|
+
<div v-if="data?.hasNext" class="flex justify-center p-3">
|
|
184
|
+
<svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" 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>
|
|
185
|
+
<button v-else type="button" class="text-text-300" @click="loadNext()">
|
|
186
|
+
{{ $t('Load More' )}}
|
|
187
|
+
</button>
|
|
168
188
|
</div>
|
|
169
|
-
</
|
|
170
|
-
</
|
|
171
|
-
</VirtualGrid>
|
|
189
|
+
</template>
|
|
190
|
+
</VirtualGrid>
|
|
172
191
|
|
|
173
|
-
|
|
192
|
+
<PresetSelector ref="presetSelector" :config="config" @select="load" />
|
|
193
|
+
</div>
|
|
174
194
|
</div>
|
|
175
195
|
|
|
176
196
|
<div v-if="extBar.open && pivotEnabled"
|
|
@@ -300,6 +320,14 @@ export default{
|
|
|
300
320
|
|
|
301
321
|
methods: {
|
|
302
322
|
|
|
323
|
+
calcItemsPerPage(){
|
|
324
|
+
|
|
325
|
+
if(this.$refs.content){
|
|
326
|
+
this.data.itemsPerPage = Math.round((this.$refs.content.clientHeight - 36) / 36) + 3
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
},
|
|
330
|
+
|
|
303
331
|
getEnumText(key, value){
|
|
304
332
|
|
|
305
333
|
let enumText
|
|
@@ -361,6 +389,7 @@ export default{
|
|
|
361
389
|
|
|
362
390
|
//console.log('last id', this.dataItems[this.dataItems.length - 1].id)
|
|
363
391
|
|
|
392
|
+
this.readyState = 4
|
|
364
393
|
this.socket.send(this.src, {
|
|
365
394
|
...this.preset,
|
|
366
395
|
itemsPerPage: this.data.itemsPerPage,
|
|
@@ -373,6 +402,7 @@ export default{
|
|
|
373
402
|
this.loadEnums(data.items)
|
|
374
403
|
})
|
|
375
404
|
.catch(err => this.toast(err))
|
|
405
|
+
.finally(_ => this.readyState = 1)
|
|
376
406
|
}
|
|
377
407
|
return new Promise(resolve => resolve())
|
|
378
408
|
},
|
|
@@ -761,8 +791,11 @@ export default{
|
|
|
761
791
|
this.loadPreset()
|
|
762
792
|
.then(() => {
|
|
763
793
|
this.readyState = 1
|
|
764
|
-
this
|
|
765
|
-
|
|
794
|
+
this.$nextTick(() => {
|
|
795
|
+
this.calcItemsPerPage()
|
|
796
|
+
this.load()
|
|
797
|
+
this.loadExt()
|
|
798
|
+
})
|
|
766
799
|
})
|
|
767
800
|
|
|
768
801
|
if(this.subscribeKey){
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
<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>
|
|
57
57
|
</div>
|
|
58
58
|
</div>
|
|
59
|
+
<slot name="end"></slot>
|
|
59
60
|
</div>
|
|
60
61
|
</div>
|
|
61
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">
|