@mixd-id/web-scaffold 0.1.230406060 → 0.1.230406061

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406060",
+  "version": "0.1.230406061",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -16,7 +16,8 @@
       "import": "./src/utils/helpers.mjs"
     },
     "./importer": "./src/utils/importer.js",
-    "./listpage1": "./src/utils/listpage1.js"
+    "./listpage1": "./src/utils/listpage1.js",
+    "./listview": "./src/utils/listview.js"
   },
   "dependencies": {
     "@faker-js/faker": "^7.3.0",

package/src/components/ColorPicker.vue

@@ -0,0 +1,84 @@
+<template>
+	<div :class="$style.comp">
+		<div :class="$style.circle" @click="$refs.contextMenu.open($refs.btn)"
+				 ref="btn" :style="{ backgroundColor:this.modelValue }"></div>
+		<input type="color" :class="$style.inputColor" ref="inputColor"
+			@change="select($refs.inputColor.value)"/>
+
+		<ContextMenu ref="contextMenu" :dismiss="false">
+			<div class="p-4 flex flex-col gap-4">
+				<div class="grid grid-cols-6 gap-4">
+					<div v-for="color in colors">
+						<div :class="$style.circle" :style="{ backgroundColor:color }"
+						 	@click="select(color)"></div>
+					</div>
+				</div>
+				<button type="button" v-if="Boolean(customColor)"
+								class="w-full p-1 border-text-100 border-[1px] rounded-lg"
+								@click="$refs.inputColor.click()">Custom</button>
+			</div>
+		</ContextMenu>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		colors: Array,
+
+		customColor: undefined,
+
+		modelValue: String
+
+	},
+
+	methods: {
+
+		select(color){
+			this.$emit('update:modelValue', color)
+			this.$refs.contextMenu.close()
+		}
+
+	},
+
+	computed:{
+
+		customColorCount(){
+			const count = parseInt(this.customColor)
+			return isNaN(count) ? 0 : count
+		}
+
+	},
+
+	data(){
+		return {
+			customColors: []
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply p-[2px] border-[1px] border-text-200 rounded-full relative;
+}
+
+.circle{
+	@apply w-[19px] h-[19px] rounded-full cursor-pointer;
+}
+
+.inputColor{
+	@apply absolute top-0 left-0;
+	width: 0;
+	height: 0;
+	opacity: 0;
+}
+
+</style>

package/src/components/ImagePreview.vue

@@ -71,7 +71,7 @@ export default{
 }
 
 .previewModal{
-	@apply !w-screen !h-screen !bg-base-300 top-0;
+	@apply !w-screen !h-screen !bg-base-300 !rounded-none top-0;
 	z-index: 21 !important;
 	max-width: unset !important;
 	max-height: unset !important;

package/src/components/ListView.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp" v-if="configLoaded">
+	<div :class="$style.comp">
 
 		<slot v-if="$slots.head" name="head"></slot>
 		<div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 py-4 md:py-0 bg-base-400 dark:bg-base-300 md:bg-transparent">
@@ -8,7 +8,7 @@
 								class="flex-1 md:flex-none flex flex-row gap-1 items-center text-left md:ml-2"
 								@click="$refs.presetSelector.toggle($refs.presetSelectorBtn)">
 					<h2 class="overflow-hidden whitespace-nowrap text-ellipsis">{{ preset.name }}</h2>
-					<svg width="16" height="16" class="fill-text 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>
+					<svg width="13" height="13" class="ml-1 relative top-[2px] fill-text 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>
 				</button>
 
 				<ContextMenu ref="presetSelector">
@@ -53,8 +53,9 @@
 
 			<slot name="headerOpt"></slot>
 
-			<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
-							 @keyup.enter="load" :class="$style.searchBox" v-if="mediaPrefix !== 'sm'">
+			<Textbox v-if="mediaPrefix && mediaPrefix !== 'sm'" :placeholder="$t('Search...')" :clearable="true"
+							 @clear="clearSearch" v-model="preset.search"
+							 @keyup.enter="load" :class="$style.searchBox">
 				<template #start>
 					<div class="pl-2">
 						<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>
@@ -63,9 +64,9 @@
 			</Textbox>
 		</div>
 
-		<div v-if="mediaPrefix === 'sm'" class="px-6 pb-4 border-b-[1px] border-text-50 bg-base-400 dark:bg-base-300">
+		<div v-if="mediaPrefix && mediaPrefix === 'sm'" class="px-6 pb-4 border-b-[1px] border-text-50 bg-base-400 dark:bg-base-300">
 			<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
-							 @keyup.enter="load" :class="$style.searchBox">
+							 @keyup.enter="load" :class="$style.searchBox2">
 				<template #start>
 					<div class="pl-2">
 						<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>
@@ -74,8 +75,24 @@
 			</Textbox>
 		</div>
 
+		<div class="grid grid-cols-4 gap-4 hidden">
+			<div v-for="i in 4">
+				<div class="p-3 rounded-lg bg-base-400 border-[1px] border-text-50">
+					<label>Value</label>
+					<h2>23,000</h2>
+				</div>
+			</div>
+		</div>
+
 		<div class="flex-1 flex" v-if="mediaPrefix">
-			<VirtualTable v-if="mediaPrefix !== 'sm'" ref="table1" :columns="presetColumns" :items="items"
+			<VirtualScroll v-if="mediaPrefix === 'sm'" :items="items" ref="table2"
+										 class="flex-1 bg-base-400 dark:bg-base-300" @scroll-end="loadNext">
+				<template #item="{ item }">
+					<slot name="mobileItem" :item="item"></slot>
+				</template>
+			</VirtualScroll>
+
+			<VirtualTable v-else ref="table1" :columns="presetColumns" :items="items"
 										class="flex-1 bg-base-400"
 										@scroll-end="loadNext">
 				<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
@@ -110,11 +127,6 @@
 					<slot :name="slot" :item="item" :index="index"></slot>
 				</template>
 			</VirtualTable>
-			<VirtualScroll v-else :items="items" ref="table2" class="flex-1 bg-base-400 dark:bg-base-300" @scroll-end="loadNext">
-				<template #item="{ item }">
-					<slot name="mobileItem" :item="item"></slot>
-				</template>
-			</VirtualScroll>
 		</div>
 
 		<ContextMenu ref="columnMenu" :dismiss="false">
@@ -214,7 +226,7 @@ export default{
       this.presetFilterSelector = null
     },
 
-		calcMediaPrefix: throttle(function(){
+		calcMediaPrefix() {
 			if(!this.$el) return
 
 			const w = this.$el.clientWidth
@@ -238,7 +250,7 @@ export default{
 			}
 
 			this.mediaPrefix = prefix
-		}, 100, { leading:true }),
+		},
 
     clearSearch(){
       this.preset.search = ''
@@ -268,10 +280,16 @@ export default{
 		load(){
       if(!this.src) return
 
+			this.$refs.table1 ? this.$refs.table1.setState(2) : this.$refs.table2.setState(3)
 			this.socketEmit2(this.src, { preset: this.preset })
 				.then((res) => {
 					Object.assign(this.$data, res)
 				})
+				.finally(() => {
+					this.$refs.table1 ? this.$refs.table1.setState(1) : this.$refs.table2.setState(1)
+				})
+
+			this.loadSummary()
 		},
 
 		loadNext(){
@@ -293,6 +311,7 @@ export default{
 		},
 
 		async loadConfig(){
+
 			if(!this.configStoreObj || 'reset' in ((this.$route ?? {}).query ?? {})){
 				this.configLoaded = true
 				return
@@ -308,7 +327,6 @@ export default{
 							}
 
 							this.configLoaded = true
-							this.$nextTick(() => this.calcMediaPrefix())
 						})
 			}
 		},
@@ -531,20 +549,22 @@ export default{
       configLoaded: false,
       selectedColumn: null,
 			copiedConfig: null,
-			mediaPrefix: 'md'
+			mediaPrefix: null
 		}
 	},
 
 
 	mounted() {
-		window.addEventListener('resize', () => this.calcMediaPrefix())
+		window.addEventListener('resize', throttle(() => this.calcMediaPrefix(), 100, { leading:true }))
 		this.calcMediaPrefix()
+
     this.socket.onAny(this.onHooks)
 
 		window.setTimeout(() => {
 			this.loadConfig().then(() => {
-				this.load()
-			})
+				window.setTimeout(() => {})
+					this.load()
+				}, 1000)
 		}, 201)
 
 		this.subscribe()
@@ -579,6 +599,10 @@ export default{
 	@apply !bg-base-400 md:w-[300px];
 }
 
+.searchBox2{
+	@apply bg-text-50;
+}
+
 .header{
 	@apply p-2 cursor-pointer border-b-[2px] border-transparent overflow-hidden;
 }

package/src/components/Modal.vue

@@ -205,7 +205,8 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply bg-base-500 border-[1px] border-text-50 z-20 flex max-h-[90vh];
+	@apply bg-base-300;
+	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden;
 	transition:  all 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }
@@ -215,7 +216,7 @@ export default{
 }
 
 .modalBody{
-	@apply flex-1 min-h-0 overflow-y-auto flex;
+	@apply flex-1 min-h-0 overflow-y-auto flex bg-base-400 dark:bg-base-300;
 }
 
 .overlay{

package/src/components/VirtualScroll.vue

@@ -1,11 +1,9 @@
 <template>
 	<div :class="$style.comp">
-		<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 v-if="state === 3" ref="spinner" class="flex-1 flex items-center justify-center p-8">
+			<svg class="animate-spin aspect-square w-[32px] h-[32px] 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 ref="scroller" :class="$style.scroller" :style="scrollerStyle">
+		<div v-else ref="scroller" :class="$style.scroller" :style="scrollerStyle">
 			<div v-if="visibleItems && visibleItems.length > 0" :class="$style.spacer" ref="spacer" :style="spacerStyle">
 				<div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
 						 @click="select(item, index)"

package/src/index.js

@@ -225,6 +225,7 @@ export default{
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
     app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
+    app.component('ColorPicker', defineAsyncComponent(() => import("./components/ColorPicker.vue")))
     app.component('SearchButton', defineAsyncComponent(() => import("./components/SearchButton.vue")))
     app.component('ButtonGroup', defineAsyncComponent(() => import("./components/ButtonGroup.vue")))
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))