@mixd-id/web-scaffold 0.1.230406048 → 0.1.230406050

package/package.json

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

package/src/components/ContextMenu.vue

@@ -110,7 +110,7 @@ export default {
 				return this.close(() => {
 					window.setTimeout(() => {
 						this.open(caller, context)
-					}, 30)
+					}, 66)
 				})
 			}
 
@@ -129,86 +129,106 @@ export default {
 
 				if(caller){
 
-					this.$nextTick(() => {
-						const rect = caller.getBoundingClientRect()
-
-						let maxHeight
-						let top, right, bottom, left
-						let transformOrigin
-
-						switch(this.position){
-
-							case 'bottom-right':
-								right = window.innerWidth - (Math.round(rect.x) + rect.width)
-								top = Math.round(rect.y + rect.height + 8)
-								maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
-								transformOrigin = 'top right'
-								break
-
-							case 'top-left':
-								maxHeight = Math.round(rect.top - 16)
-								bottom = window.innerHeight - rect.top + 8
-								left = Math.round(rect.x)
-								transformOrigin = 'bottom left'
-								break
-
-							case 'top-right':
-								maxHeight = Math.round(rect.top - 16)
-								bottom = window.innerHeight - rect.top + 8
-								right = window.innerWidth - (Math.round(rect.x) + rect.width)
-								transformOrigin = 'bottom right'
-								break
-
-							default:
-								left = Math.round(rect.x)
-								top = Math.round(rect.y + rect.height + 8)
-								//maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
-								transformOrigin = 'top left'
-								break
-						}
-
-						if(left){
-							if(left + this.$refs.contextMenu.clientWidth >= (window.innerWidth - 16)){
-								left = window.innerWidth - (this.$refs.contextMenu.clientWidth + 16)
-
-								if(transformOrigin === 'top left'){
-									transformOrigin = 'top right'
-								}
+					const media = this.$util.getMediaPrefix(window.innerWidth)
+					let maxHeight, transformOrigin
+					let top, right, bottom, left
+					if([ '*', 'sm' ].includes(media)){
+						this.$nextTick(() => {
+							const rect = caller.getBoundingClientRect()
+
+							top = Math.round(rect.y + rect.height + 10)
+							transformOrigin = 'top left'
+							maxHeight = this.$refs.contextMenu.clientHeight > window.innerHeight * .8 ?
+								Math.round(window.innerHeight * .8) : this.$refs.contextMenu.clientHeight + 30
+
+							this.computedStyle = {
+								left: '10px',
+								right: '10px',
+								top: top ? top +  'px' : top,
+								maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
+								transformOrigin: transformOrigin
 							}
-						}
 
-						if(top){
-							if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight - 16)){
-								top = window.innerHeight - (this.$refs.contextMenu.clientHeight + 16)
+							this.onOpen()
+						})
+					}
+					else{
+						this.$nextTick(() => {
+							const rect = caller.getBoundingClientRect()
+
+							switch(this.position){
+
+								case 'bottom-right':
+									right = window.innerWidth - (Math.round(rect.x) + rect.width)
+									top = Math.round(rect.y + rect.height + 8)
+									maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
+									transformOrigin = 'top right'
+									break
 
-								if(transformOrigin === 'top left'){
+								case 'top-left':
+									maxHeight = Math.round(rect.top - 16)
+									bottom = window.innerHeight - rect.top + 8
+									left = Math.round(rect.x)
 									transformOrigin = 'bottom left'
-								}
-								else if(transformOrigin === 'top right'){
+									break
+
+								case 'top-right':
+									maxHeight = Math.round(rect.top - 16)
+									bottom = window.innerHeight - rect.top + 8
+									right = window.innerWidth - (Math.round(rect.x) + rect.width)
 									transformOrigin = 'bottom right'
-								}
+									break
+
+								default:
+									left = Math.round(rect.x)
+									top = Math.round(rect.y + rect.height + 8)
+									//maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
+									transformOrigin = 'top left'
+									break
 							}
 
-							if(top < 0){
-								top = 0
+							if(left){
+								if(left + this.$refs.contextMenu.clientWidth >= (window.innerWidth - 16)){
+									left = window.innerWidth - (this.$refs.contextMenu.clientWidth + 16)
+
+									if(transformOrigin === 'top left'){
+										transformOrigin = 'top right'
+									}
+								}
 							}
-						}
 
-						maxHeight = this.$refs.contextMenu.clientHeight > window.innerHeight * .8 ?
-							Math.round(window.innerHeight * .8) : this.$refs.contextMenu.clientHeight + 24
+							if(top){
+								if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight - 16)){
+									top = window.innerHeight - (this.$refs.contextMenu.clientHeight + 16)
+
+									if(transformOrigin === 'top left'){
+										transformOrigin = 'bottom left'
+									}
+									else if(transformOrigin === 'top right'){
+										transformOrigin = 'bottom right'
+									}
+								}
+
+								if(top < 0){
+									top = 0
+								}
+							}
 
-						this.computedStyle = {
-							left: left ? left + 'px' : left,
-							right: right ? right + 'px' : right,
-							top: top ? top +  'px' : top,
-							bottom: bottom ? bottom +  'px' : bottom,
-							maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
-							transformOrigin: transformOrigin
-						}
+							maxHeight = this.$refs.contextMenu.clientHeight > window.innerHeight * .8 ?
+								Math.round(window.innerHeight * .8) : this.$refs.contextMenu.clientHeight + 24
 
-						this.onOpen()
-					})
+							this.computedStyle = {
+								left: left ? left + 'px' : left,
+								right: right ? right + 'px' : right,
+								top: top ? top +  'px' : top,
+								bottom: bottom ? bottom +  'px' : bottom,
+								maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
+								transformOrigin: transformOrigin
+							}
 
+							this.onOpen()
+						})
+					}
 				}
 				else{
 					console.error('Undefined caller for context menu')
@@ -230,11 +250,25 @@ export default {
 				this.computedStyle = null
 				this.isOpen = false
 				this.$emit('dismiss')
-				if(fn) fn()
+				if(typeof fn === 'function') fn()
 			}
 			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
 			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
 			this.$refs.contextMenu.classList.remove(this.$style.active)
+		},
+
+		toggle(caller, context){
+
+			if(this.isOpen){
+				this.close()
+			}
+			else{
+				this.open(caller, context)
+			}
+		},
+
+		opened(){
+			return this.isOpen
 		}
 
   }
@@ -250,12 +284,29 @@ export default {
 	@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 	opacity: 0;
-	transform: scale(.3);
+	transform: translate3d(0, -10px, 0);
 }
 
 .active{
 	opacity: 1;
-	transform: scale(1);
+	transform: translate3d(0, 0, 0);
+}
+
+@media screen(md){
+
+	.contextMenu{
+		@apply fixed z-20 bg-base-50 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
+		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
+		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
+		opacity: 0;
+		transform: scale(.1);
+	}
+
+	.active{
+		opacity: 1;
+		transform: scale(1);
+	}
+
 }
 
-</style>
+</style>

package/src/components/Dropdown.vue

@@ -150,7 +150,7 @@ export default {
 <style module>
 
 .dropdown{
-	@apply h-[var(--h-cp)];
+	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
 	@apply border-[1px] border-text-200 bg-base-50 hover:border-text-300;
 }
@@ -195,4 +195,4 @@ export default {
 	@apply border-red-500
 }
 
-</style>
+</style>

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/IconMenu2.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 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-[3px] left-0 right-0 h-[2px] rounded-sm;
+}
+.comp>*:nth-child(2){
+	@apply absolute bottom-[3px] left-0 right-0 h-[2px] rounded-sm;
+}
+
+.comp.active>*:nth-child(1){
+	transform: rotate(45deg);
+	transform-origin: 50% 50%;
+	top: 50%;
+}
+.comp.active>*:nth-child(2){
+	transform: rotate(-45deg);
+	transform-origin: 50% 50%;
+	top: 50%;
+}
+
+</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

@@ -2,7 +2,7 @@
 	<div :class="$style.comp" v-if="configLoaded">
 
 		<slot v-if="$slots.head" name="head"></slot>
-		<div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 p-4">
+		<div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 py-4 md:py-0">
 			<div class="flex-1 flex flex-row gap-4">
 				<button type="button" ref="presetSelectorBtn"
 								class="flex-1 md:flex-none flex flex-row gap-1 items-center text-left md:ml-2"
@@ -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 md:gap-4;
 }
 
 .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

@@ -12,6 +12,14 @@ const uniqid = () => {
   return _UNIQID++
 }
 
+const mediaBreakpoints = {
+  640: 'sm',
+  768: 'md',
+  1024: 'lg',
+  1280: 'xl',
+  1536: '2xl',
+}
+
 const download = (url, as) => {
   const downloader = document.createElement('a')
   downloader.setAttribute('href', url)
@@ -181,6 +189,18 @@ const util = {
           break
       }
     })
+  },
+
+  getMediaPrefix(width){
+
+    let prefix = '*'
+    for(let breakpoint in mediaBreakpoints){
+      if(width > breakpoint){
+        prefix = mediaBreakpoints[breakpoint]
+      }
+    }
+
+    return prefix
   }
 
 }
@@ -224,6 +244,9 @@ 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('IconMenu2', defineAsyncComponent(() => import("./components/IconMenu2.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

@@ -92,7 +92,9 @@ const plugin = Plugin(function({ addBase, config, theme }) {
     '@media screen and (orientation: portrait)': {
       'body': {
         'fontSize': '16px',
-      }
+      },
+
+      "input, input[type='text'], input[type='number'], textarea, select, option": { fontSize:"16px" }
     },
 
     '::-webkit-scrollbar': {
@@ -137,7 +139,6 @@ const plugin = Plugin(function({ addBase, config, theme }) {
 
     '.flex-1': { minHeight: "0px", minWidth: "0px" }
 
-
   })
 
 }, {