@mixd-id/web-scaffold 0.1.230406009 → 0.1.230406011

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406009",
+  "version": "0.1.230406011",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Alert.vue

@@ -19,7 +19,7 @@
 						
 						<div class="my-4 text-center flex-1 overflow-y-auto">
 							<h5 class="my-1 break-all">{{ title }}</h5>
-							<p class="break-all overflow-y-auto whitespace-pre-line text-left">{{ description }}</p>
+							<p class="break-words overflow-y-auto whitespace-pre-line text-center">{{ description }}</p>
 						</div>
 						
 						<div class="mt-4" v-if="mode === 'alert'">

package/src/components/Button.vue

@@ -33,10 +33,7 @@ export default{
 			default: '' // 0|1|2|3, default: 2
 		},
 
-		state:  {
-			type: [ String, Number ],
-			default: 1
-		}, // -1:disabled, 1:normal, 2:loading, default: normal
+		state:  [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal
 
 	},
 
@@ -70,7 +67,7 @@ export default{
 
 	data(){
 		return {
-			_state: null
+			_state: 1
 		}
 	},
 
@@ -81,7 +78,6 @@ export default{
 		},
 
 		setState(state){
-			console.log('setState', state)
 			this._state = state
 		}
 

package/src/components/ListPage1.vue

@@ -61,9 +61,8 @@
 			</div>
 
 			<div class="flex-1 relative flex" v-if="!hideDetails">
-				<VirtualTable v-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items"
-											:state="isLoading ? 2 : 1"
-											:appearances="presetAppearances" @scroll-end="loadNext" :pinned="pinned">
+				<VirtualTable v-if="!hideDetails" ref="table1" class="flex-1" :columns="presetColumns" :items="items"
+						:appearances="presetAppearances" @scroll-end="loadNext" :pinned="pinned">
 					<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
 						<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
 							<div>
@@ -594,7 +593,7 @@ export default{
 		},
 
 		presetColumns(){
-			if(!this.preset.columns) return []
+			if(!this.preset.columns) return
 
 			for(let i = 0 ; i < (this.preset.columns).length ; i++){
 				const presetColumn = this.preset.columns[i]
@@ -1015,12 +1014,18 @@ export default{
 		},
 
 		loadNext(){
+
+			this.$refs.table1.setState(2)
 			this.socketEmit(`${this.computedDataSource}.load`, {
 				preset: this.preset,
 				afterItem: this.items[this.items.length - 1]
 			}, (res) => {
+				this.$refs.table1.setState(1)
 				this.items.push(...res.items)
 				this.hasNext = res.hasNext
+			}, (err) => {
+				this.$refs.table1.setState(1)
+				this.toast(err)
 			})
 		},
 

package/src/components/VirtualTable.vue

@@ -39,6 +39,11 @@
 						</tr>
 						</tbody>
 					</table>
+					<div v-if="state === 2" ref="spinner" class="h-[44px] relative">
+						<div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
+							<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>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div :class="$style.calc" v-if="visibleColumns.length > 0 && items && items.length > 0" ref="calc">
@@ -54,10 +59,10 @@
 					</tbody>
 				</table>
 			</div>
-			<div v-else-if="visibleColumns.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+			<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">
 				<h5 class="text-text-300">No active column</h5>
 			</div>
-			<div v-else  class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+			<div v-else-if="Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
 				<h5 class="text-text-300">No data available</h5>
 			</div>
 		</div>
@@ -100,7 +105,8 @@ export default{
 			itemHeight: 0,
 			maxVisibleItems: 0,
 			isOnEndScroll: false,
-			selectedIndex: -1
+			selectedIndex: -1,
+			state: 1
 		}
 	},
 
@@ -146,7 +152,7 @@ export default{
 			if(!this.items || this.items.length < 1)
 				return {}
 
-			const height = (this.items.length * this.itemHeight)
+			const height = (this.items.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
 			const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
 
 			//console.log('scrollerStyle', { width, height, columns:this.columns })
@@ -164,7 +170,7 @@ export default{
 		},
 
 		visibleColumns(){
-			const columns = this.columns.filter(_ => _.visible)
+			const columns = (this.columns ?? []).filter(_ => _.visible)
 			return columns
 		}
 
@@ -369,6 +375,10 @@ export default{
 			}
 
 			return text
+		},
+
+		setState(state){
+			this.state = state
 		}
 
 	},