@mixd-id/web-scaffold 0.1.230406059 → 0.1.230406061

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406059",
+  "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,26 +1,29 @@
 <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">
-			<div class="flex-1 flex flex-row gap-4">
+			<div class="flex-1 flex flex-row gap-6">
 				<button type="button" ref="presetSelectorBtn"
 								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>
-				</button>
-				<button type="button" @click="openPreset()">
-					<svg width="19" height="19" class="fill-text hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M452.515 237l31.843-18.382c9.426-5.441 13.996-16.542 11.177-27.054-11.404-42.531-33.842-80.547-64.058-110.797-7.68-7.688-19.575-9.246-28.985-3.811l-31.785 18.358a196.276 196.276 0 0 0-32.899-19.02V39.541a24.016 24.016 0 0 0-17.842-23.206c-41.761-11.107-86.117-11.121-127.93-.001-10.519 2.798-17.844 12.321-17.844 23.206v36.753a196.276 196.276 0 0 0-32.899 19.02l-31.785-18.358c-9.41-5.435-21.305-3.877-28.985 3.811-30.216 30.25-52.654 68.265-64.058 110.797-2.819 10.512 1.751 21.613 11.177 27.054L59.485 237a197.715 197.715 0 0 0 0 37.999l-31.843 18.382c-9.426 5.441-13.996 16.542-11.177 27.054 11.404 42.531 33.842 80.547 64.058 110.797 7.68 7.688 19.575 9.246 28.985 3.811l31.785-18.358a196.202 196.202 0 0 0 32.899 19.019v36.753a24.016 24.016 0 0 0 17.842 23.206c41.761 11.107 86.117 11.122 127.93.001 10.519-2.798 17.844-12.321 17.844-23.206v-36.753a196.34 196.34 0 0 0 32.899-19.019l31.785 18.358c9.41 5.435 21.305 3.877 28.985-3.811 30.216-30.25 52.654-68.266 64.058-110.797 2.819-10.512-1.751-21.613-11.177-27.054L452.515 275c1.22-12.65 1.22-25.35 0-38zm-52.679 63.019l43.819 25.289a200.138 200.138 0 0 1-33.849 58.528l-43.829-25.309c-31.984 27.397-36.659 30.077-76.168 44.029v50.599a200.917 200.917 0 0 1-67.618 0v-50.599c-39.504-13.95-44.196-16.642-76.168-44.029l-43.829 25.309a200.15 200.15 0 0 1-33.849-58.528l43.819-25.289c-7.63-41.299-7.634-46.719 0-88.038l-43.819-25.289c7.85-21.229 19.31-41.049 33.849-58.529l43.829 25.309c31.984-27.397 36.66-30.078 76.168-44.029V58.845a200.917 200.917 0 0 1 67.618 0v50.599c39.504 13.95 44.196 16.642 76.168 44.029l43.829-25.309a200.143 200.143 0 0 1 33.849 58.529l-43.819 25.289c7.631 41.3 7.634 46.718 0 88.037zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 144c-26.468 0-48-21.532-48-48 0-26.467 21.532-48 48-48s48 21.533 48 48c0 26.468-21.532 48-48 48z"/></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">
-					<div class="flex-1 flex flex-col md:w-[270px] cursor-pointer">
-						<button type="button" v-for="(preset, idx) in config.presets"
-										class="p-3 text-left hover:bg-primary hover:text-white block"
-										@click="selectPreset(idx)">
-							{{ preset.name }}
-						</button>
+					<div class="flex-1 flex flex-col gap-4 md:w-[270px] cursor-pointer p-6">
+						<div class="pb-0 flex flex-row gap-4">
+							<h4 class="flex-1">Select Preset</h4>
+							<button type="button" class="text-primary" @click="openPreset">Settings</button>
+						</div>
+						<div class="border-text-50 border-[1px] divide-y divide-text-50 bg-base-400 rounded-lg overflow-hidden">
+							<button type="button" v-for="(preset, idx) in config.presets"
+											class="p-3 text-left hover:bg-primary hover:text-white block w-full"
+											@click="selectPreset(idx)">
+								{{ preset.name }}
+							</button>
+						</div>
 					</div>
 				</ContextMenu>
 
@@ -50,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>
@@ -60,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>
@@ -71,9 +75,25 @@
 			</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"
-										class="flex-1 bg-base-400 dark:bg-base-300"
+			<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)]="{}">
 					<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
@@ -107,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">
@@ -211,7 +226,7 @@ export default{
       this.presetFilterSelector = null
     },
 
-		calcMediaPrefix: throttle(function(){
+		calcMediaPrefix() {
 			if(!this.$el) return
 
 			const w = this.$el.clientWidth
@@ -235,7 +250,7 @@ export default{
 			}
 
 			this.mediaPrefix = prefix
-		}, 100, { leading:true }),
+		},
 
     clearSearch(){
       this.preset.search = ''
@@ -265,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(){
@@ -290,6 +311,7 @@ export default{
 		},
 
 		async loadConfig(){
+
 			if(!this.configStoreObj || 'reset' in ((this.$route ?? {}).query ?? {})){
 				this.configLoaded = true
 				return
@@ -305,7 +327,6 @@ export default{
 							}
 
 							this.configLoaded = true
-							this.$nextTick(() => this.calcMediaPrefix())
 						})
 			}
 		},
@@ -528,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()
@@ -576,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/ListViewSettings.vue

@@ -11,15 +11,15 @@
 
       <div class="flex-1 overflow-y-auto">
         <div v-for="(preset, idx) in config.presets"
-             class="p-2 py-4 md:py-2 flex flex-row gap-2 items-center hover:bg-primary-50 cursor-pointer"
+             class="p-2 py-4 md:py-2 flex flex-row gap-2 px-4 items-center hover:bg-primary-50 cursor-pointer"
 							:class="config.presetIdx === idx ? 'bg-primary-100' : ''">
-          <div @click="config.presetIdx = idx" class="flex-1 p-1 pl-4 overflow-x-hidden whitespace-nowrap text-ellipsis">
+          <div @click="config.presetIdx = idx" class="flex-1 p-1 overflow-x-hidden whitespace-nowrap text-ellipsis">
             <label>{{ preset.name }}</label>
           </div>
-					<button type="button" @click="detailMode = true" class="md:hidden">
-						<svg width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
+					<button type="button" @click="$refs.presetMenu.open($event.target, { idx })">
+						<svg width="16" height="16" class="fill-text-300 hover:fill-primary-500 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"/></svg>
 					</button>
-          <button type="button" class="px-2" v-if="config.presets.length > 1" @click="removePreset(idx)">
+          <button type="button" class="hidden px-2" v-if="config.presets.length > 1" @click="removePreset(idx)">
             <svg width="16" height="16" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V16C10.75 16.4142 10.4142 16.75 10 16.75C9.58579 16.75 9.25 16.4142 9.25 16V11C9.25 10.5858 9.58579 10.25 10 10.25Z"/>
               <path fill-rule="evenodd" clip-rule="evenodd" d="M14 10.25C14.4142 10.25 14.75 10.5858 14.75 11V16C14.75 16.4142 14.4142 16.75 14 16.75C13.5858 16.75 13.25 16.4142 13.25 16V11C13.25 10.5858 13.5858 10.25 14 10.25Z"/>
@@ -27,6 +27,28 @@
             </svg>
           </button>
         </div>
+
+				<ContextMenu ref="presetMenu">
+					<template #default="{ context }">
+						<div class="p-3 flex flex-col">
+							<button type="button"
+											@click="detailMode = true"
+											class="md:hidden w-full text-left p-2 px-3 hover:bg-text-50 rounded-lg">
+								Open
+							</button>
+							<button type="button"
+											@click="duplicatePreset(context.idx)"
+											class="w-full text-left p-2 px-3 hover:bg-text-50 rounded-lg">
+								Duplicate
+							</button>
+							<button type="button" v-if="config.presets.length > 1"
+											@click="removePreset(context.idx)"
+											class="w-full text-left p-2 px-3 hover:bg-text-50 rounded-lg">
+								Remove
+							</button>
+						</div>
+					</template>
+				</ContextMenu>
       </div>
 
     </div>
@@ -35,12 +57,9 @@
       <div class="p-6 pb-0">
         <div class="flex flex-row items-center gap-4 mb-3">
           <button type="button" class="md:hidden" @click="detailMode = false">
-            <svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-300 hover:fill-text-400" xmlns="http://www.w3.org/2000/svg">
-              <path d="M10.5303 17.9697C10.8232 18.2626 10.8232 18.7374 10.5303 19.0303C10.2374 19.3232 9.76253 19.3232 9.46964 19.0303L3.67675 13.2374C2.99333 12.554 2.99333 11.446 3.67675 10.7626L9.46964 4.96967C9.76253 4.67678 10.2374 4.67678 10.5303 4.96967C10.8232 5.26256 10.8232 5.73744 10.5303 6.03033L5.31063 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.31063L10.5303 17.9697Z"/>
-            </svg>
+						<svg width="19" height="19" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80zm472 224H197.333v-96H472v96zm0 40v84c0 6.627-5.373 12-12 12H197.333v-96H472zM40 208h117.333v96H40v-96zm157.333-40V72H460c6.627 0 12 5.373 12 12v84H197.333zm-40-96v96H40V84c0-6.627 5.373-12 12-12h105.333zM40 344h117.333v96H52c-6.627 0-12-5.373-12-12v-84z"/></svg>
           </button>
 					<div class="flex-1 flex flex-row items-center gap-2">
-						<svg @click="$refs.title.select()" width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
 						<input ref="title" class="flex-1 text-xl bg-transparent outline-none" :value="preset.name" maxlength="30"
 									 @blur="preset.name = $event.target.value"
 									 @keyup.enter="preset.name = $event.target.value" />
@@ -412,6 +431,11 @@ export default{
 			this.config.presetIdx = this.config.presets[index] ? index : this.config.presets.length - 1
 		},
 
+		duplicatePreset(index){
+			this.config.presets.push(JSON.parse(JSON.stringify(this.config.presets[index])))
+			this.config.presetIdx = this.config.presets.length - 1
+		},
+
 		addFilter(key){
 
 			const column = this.presetColumns.find((_) => _.key === key)

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")))

package/src/utils/listpage1.js

@@ -1309,6 +1309,14 @@ let ListPage1 = {
               }
               break
 
+            case '<>':
+            case '!=':
+              whereValue = {
+                ...whereValue,
+                [Op.ne]: parseFloat(value)
+              }
+              break
+
             case 'in':
               whereValue = {
                 ...whereValue,