@mixd-id/web-scaffold 0.1.230406010 → 0.1.230406012

package/package.json

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

package/src/components/ListPage1.vue

@@ -3,11 +3,11 @@
 
 		<slot v-if="$slots['empty'] && (Array.isArray(items) || items.length <= 0)" name="empty" :preset="preset" />
 
-		<div v-else class="flex-1 flex flex-col p-6 relative">
+		<div v-else :class="$style.main">
 
-			<div class="pb-0 flex flex-row gap-3 items-center mb-6">
+			<div :class="$style.mainHead">
 				<slot v-if="$slots['lp-start']" name="lp-start" :preset="preset"/>
-				<div v-else class="mr-6 hidden md:block">
+				<div v-else>
 					<h2>{{ computedTitle }}</h2>
 				</div>
 				<div class="flex-1"></div>
@@ -27,7 +27,7 @@
 				<div class="hidden md:block">
 					<slot name="lp-tabspace" :preset="preset"/>
 				</div>
-				<div class="flex flex-row gap-1 items-center">
+				<div :class="$style.optArea">
 					<Dropdown class="w-[150px]" :value="preset.name" mode="custom" position="bottom-right">
 						<div class="min-w-[240px] divide-y divide-text-50 p-2 flex flex-col gap-2">
 							<div v-for="(_preset, idx) in configs.presets" class="cursor-pointer flex flex-row hover:bg-primary-100 rounded-md">
@@ -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="$style.vtable" :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>
@@ -96,6 +95,12 @@
 						<slot :name="slot" :item="item" :index="index"></slot>
 					</template>
 				</VirtualTable>
+				<VirtualScroll v-if="!hideDetails" ref="scroll1" :class="$style.vscroll" :items="items"
+					 @scroll-end="loadNext" :pinned="pinned">
+					<template #item="{ item }">
+						<slot name="mobileItem" :item="item"></slot>
+					</template>
+				</VirtualScroll>
 				<div v-if="isLoading" :class="$style.overlay">
 					<svg class="animate-spin aspect-square w-[48px] h-[48px] 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>
@@ -594,7 +599,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 +1020,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)
 			})
 		},
 
@@ -1326,9 +1337,55 @@ export default{
 	background: rgba(0, 0, 0, .3);
 }
 
+.main{
+	@apply flex-1 flex flex-col gap-6 p-6 relative;
+}
+
+.mainHead{
+	@apply flex flex-row gap-3 items-center;
+}
+
 .overlay{
 	@apply absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center;
 	background-color: rgba(var(--base-500), .7);
 }
 
+.vscroll{
+	@apply hidden;
+}
+
+.optArea{
+	@apply flex flex-row gap-1 items-center;
+}
+
+@media screen and (orientation: portrait){
+
+	.main{
+		@apply gap-3 p-0;
+	}
+
+	.mainHead{
+		@apply px-6 py-4;
+	}
+
+	.vtable{
+		@apply hidden;
+	}
+
+	.vscroll{
+		@apply flex-1 flex border-t-[1px] border-b-[1px] border-text-50;
+	}
+	.vscroll>*{
+		@apply divide-y divide-text-50;
+	}
+	.vscroll>*>*{
+		@apply bg-base-500;
+	}
+
+	.optArea{
+		@apply hidden;
+	}
+
+}
+
 </style>

package/src/components/VirtualScroll.vue

@@ -202,6 +202,7 @@ export default{
 		position: relative;
     overflow: hidden;
     will-change: auto;
+		@apply min-w-full
 	}
 
   .spacer{

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
 		}
 
 	},