@mixd-id/web-scaffold 0.1.230406049 → 0.1.230406051

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406049",
+  "version": "0.1.230406051",
   "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.calculateMediaPrefix(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/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/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"
@@ -565,7 +565,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col;
+	@apply flex-1 flex flex-col md:gap-4;
 }
 
 .header{

package/src/components/Modal.vue

@@ -63,7 +63,10 @@ export default{
     class:{ type: String, default: '' },
 		dismissable: undefined,
 		height: String,
-		position: String,
+		position: {
+			type: String,
+			default: 'bottom'
+		},
 		state: [ Number, Boolean, String ],
 		transition: { type: String, default: 'slideup' },
 		width: String,

package/src/index.js

@@ -2,16 +2,19 @@ import {defineAsyncComponent, ref} from "vue"
 import {observeInit} from './utils/helpers.mjs'
 import throttle from "lodash/throttle"
 
-const calculateIsMobile = () => {
-  if(typeof window === 'undefined') return false
-  return window.innerWidth < window.innerHeight && window.innerWidth <= 800
-}
-
 let _UNIQID = 0
 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,7 +184,21 @@ const util = {
           break
       }
     })
-  }
+  },
+
+  calculateMediaPrefix(width){
+
+    let prefix = '*'
+    for(let breakpoint in mediaBreakpoints){
+      if(width > breakpoint){
+        prefix = mediaBreakpoints[breakpoint]
+      }
+    }
+
+    return prefix
+  },
+
+  uniqid
 
 }
 
@@ -189,18 +206,17 @@ export default{
 
   install: (app, options) => {
 
-    let isMobile = ref(calculateIsMobile())
-
     if(typeof window !== 'undefined' && 'IntersectionObserver' in window) {
       app.config.globalProperties.$observe = observeInit()
 
-      window.addEventListener('resize', throttle(() => {
-        isMobile.value = calculateIsMobile()
-      }, 300, { trailing:true }))
+      app.config.globalProperties.$screenPrefix = ref(util.calculateMediaPrefix(window.innerWidth))
+      const onWindowResize = throttle(() => {
+        app.config.globalProperties.$screenPrefix.value = util.calculateMediaPrefix(window.innerWidth)
+      }, 500, { leading:true })
+      window.addEventListener('resize', onWindowResize)
     }
 
     app.config.globalProperties.uniqid = uniqid
-    app.config.globalProperties.isMobile = isMobile
     app.config.globalProperties.$download = download
     app.config.globalProperties.$preload = preload
     app.config.globalProperties.$popPreloads = popPreloads
@@ -225,6 +241,7 @@ export default{
     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")))

package/src/themes/default/index.js

@@ -10,6 +10,10 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       'fontSize': '13px'
     },
 
+    'html, body': {
+      'height': '100%'
+    },
+
     'html, .html': {
 
       "--h-cp-sm": '2rem',
@@ -94,7 +98,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
         'fontSize': '16px',
       },
 
-      "input, input[type='text'], input[type='number'], textarea": { fontSize:"16px" }
+      "input, input[type='text'], input[type='number'], textarea, select, option": { fontSize:"16px" }
     },
 
     '::-webkit-scrollbar': {