@mixd-id/web-scaffold 0.1.230406047 → 0.1.230406049

package/package.json

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

package/src/components/IconMenu.vue

@@ -0,0 +1,95 @@
+<template>
+	<div :style="computedStyle" :class="computedClass">
+		<div :style="lineStyle"></div>
+		<div :style="lineStyle"></div>
+		<div :style="lineStyle"></div>
+	</div>
+</template>
+
+<script>
+
+export default {
+
+	props: {
+
+		width: {
+			type: String,
+			required: true
+		},
+
+		height: {
+			type: String,
+			required: true
+		},
+
+		color: String,
+
+		state: {
+			type: Number,
+			default: 1
+		}
+
+	},
+
+	computed: {
+
+		computedClass(){
+			return [
+				this.$style.comp,
+				this.state === 2 ? this.$style.active : ''
+			]
+				.join(' ')
+		},
+
+		computedStyle(){
+			return {
+				height: parseInt(this.height) + 'px',
+				width: parseInt(this.width) + 'px'
+			}
+		},
+
+		lineStyle(){
+			return {
+				backgroundColor: this.color
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply relative flex justify-center items-center;
+}
+.comp>*{
+	transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.comp>*:nth-child(1){
+	@apply absolute top-0 left-0 right-0 h-[2px] rounded-sm;
+}
+.comp>*:nth-child(2){
+	@apply w-full h-[2px] rounded-sm ml-[5px];
+}
+.comp>*:nth-child(3){
+	@apply absolute bottom-0 left-[5px] right-0 h-[2px] rounded-sm;
+}
+
+.comp.active>*:nth-child(1){
+	transform: rotate(-45deg);
+	transform-origin: 100% 0;
+}
+.comp.active>*:nth-child(2){
+	@apply opacity-0;
+}
+.comp.active>*:nth-child(3){
+	@apply left-0;
+	transform: rotate(45deg);
+	transform-origin: 100% 100%;
+}
+
+</style>

package/src/components/IconPlus.vue

@@ -0,0 +1,89 @@
+<template>
+	<div :style="computedStyle" :class="computedClass">
+		<div :style="lineStyle"></div>
+		<div :style="lineStyle"></div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		width: {
+			type: String,
+			required: true
+		},
+
+		height: {
+			type: String,
+			required: true
+		},
+
+		color: String,
+
+		state: {
+			type: Number,
+			default: 1
+		}
+
+	},
+
+	computed: {
+
+		computedClass() {
+			return [
+				this.$style.comp,
+				this.state === 2 ? this.$style.active : ''
+			]
+				.join(' ')
+		},
+
+		computedStyle() {
+			return {
+				height: parseInt(this.height) + 'px',
+				width: parseInt(this.width) + 'px'
+			}
+		},
+
+		lineStyle(){
+			return {
+				backgroundColor: this.color
+			}
+		}
+
+	}
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply inline-block relative;
+}
+.comp>*{
+	transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.comp>*:first-child{
+	@apply absolute top-0 bottom-0 w-[2px];
+	left: 50%;
+	transform: translate3d(-50%, 0, 0);
+}
+.comp>*:last-child{
+	@apply absolute left-0 right-0 h-[2px];
+	top: 50%;
+	transform: translate3d(0, -50%, 0);
+}
+
+.comp.active>*:first-child{
+	transform: rotate(-90deg);
+	transform-origin: 50% 50%;
+}
+.comp.active>*:last-child{
+	opacity: 0;
+}
+
+</style>

package/src/components/Image.vue

@@ -133,17 +133,22 @@ export default{
 						if(window.innerWidth > b && screens[b] in src){
 							var img = new Image()
 							img.addEventListener('load', () => {
+								if(img.getAttribute('data-src') !== this.src) return
 								this.status = 2
 								this.actualSrc = img.src
 							})
-							img.addEventListener('error', () => {
+							img.addEventListener('error', (err) => {
+								if(img.getAttribute('data-src') !== this.src) return
 								this.status = 3
 								this.actualSrc = this.defaultSrc
 							})
 							img.src = src[screens[b]]
+							img.setAttribute('data-src', this.src)
 							this.status = 1
+							break
 						}
 					}
+
 				}
 			}
 			else if(this.src instanceof File){
@@ -207,4 +212,4 @@ export default{
 	@apply bg-text-200 animate-pulse;
 }
 
-</style>
+</style>

package/src/components/ListView.vue

@@ -60,7 +60,7 @@
 			</Textbox>
 		</div>
 
-		<div v-if="mediaPrefix === 'sm'" class="px-6 py-4">
+		<div v-if="mediaPrefix === 'sm'" class="px-6 py-4 border-b-[1px] border-text-50">
 			<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
 							 @keyup.enter="load" :class="$style.searchBox">
 				<template #start>
@@ -296,7 +296,10 @@ export default{
 					return this.socketEmit2(this.configStoreObj.src,
 							{ key:this.configStoreObj.name ?? 'ListView' })
 						.then((config) => {
-							Object.assign(this.config, config ?? {})
+							if(config && Array.isArray(config.columns)){
+								Object.assign(this.config, config ?? {})
+							}
+
 							this.configLoaded = true
 							this.$nextTick(() => this.calcMediaPrefix())
 						})
@@ -562,7 +565,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col divide-y md:divide-none divide-text-50;
+	@apply flex-1 flex flex-col;
 }
 
 .header{

package/src/components/VirtualScroll.vue

@@ -212,7 +212,6 @@ export default{
   .spacer{
     will-change: auto;
 		position: relative;
-		@apply divide-y divide-text-50;
   }
 
 	.item:hover{

package/src/components/VirtualTable.vue

@@ -400,7 +400,7 @@ export default{
 
 .comp{
 	@apply flex flex-col overflow-hidden;
-	@apply border-[1px] border-text-50 rounded-sm bg-base-500;
+	@apply border-[1px] border-text-50 rounded-sm;
 }
 
 .comp>*:last-child{
@@ -408,7 +408,7 @@ export default{
 }
 
 .header{
-	@apply border-b-[1px] border-text-50 bg-base-500;
+	@apply border-b-[1px] border-text-50;
 }
 
 .headerCol{
@@ -420,7 +420,6 @@ export default{
 	overflow: hidden;
 	will-change: auto;
 	min-width: 100%;
-	@apply bg-base-500;
 }
 
 .spacer{

package/src/index.js

@@ -224,6 +224,8 @@ export default{
     app.component('HTMLEditor', defineAsyncComponent(() => import("./components/HTMLEditor.vue")))
     app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Switch', defineAsyncComponent(() => import("./components/Switch.vue")))
+    app.component('IconMenu', defineAsyncComponent(() => import("./components/IconMenu.vue")))
+    app.component('IconPlus', defineAsyncComponent(() => import("./components/IconPlus.vue")))
     app.component('Image', defineAsyncComponent(() => import("./components/Image.vue")))
     app.component('Image360', defineAsyncComponent(() => import("./components/Image360.vue")))
     app.component('ImagePreview', defineAsyncComponent(() => import("./components/ImagePreview.vue")))

package/src/themes/default/index.js

@@ -18,7 +18,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
 
       '--base-50': '255, 255, 255',
       '--base-200': '222, 224, 227',
-      '--base-300': '232, 234, 237',
+      '--base-300': '255, 255, 255',
       '--base-400': '246, 248, 251',
       '--base-500': '255, 255, 255',
       '--base': '236, 236, 236',
@@ -86,13 +86,15 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       'text-rendering': 'optimizeLegibility',
       'fontSize': '14px',
       'touchAction': "pan-x pan-y",
-      'backgroundColor': 'rgba(var(--base-400), 100)'
+      'backgroundColor': 'rgba(var(--base-300), 100)'
     },
 
     '@media screen and (orientation: portrait)': {
       'body': {
         'fontSize': '16px',
-      }
+      },
+
+      "input, input[type='text'], input[type='number'], textarea": { fontSize:"16px" }
     },
 
     '::-webkit-scrollbar': {
@@ -137,7 +139,6 @@ const plugin = Plugin(function({ addBase, config, theme }) {
 
     '.flex-1': { minHeight: "0px", minWidth: "0px" }
 
-
   })
 
 }, {