@mixd-id/web-scaffold 0.2.250801009 → 0.2.250801010

package/package.json

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

package/src/components/Button.vue

@@ -91,7 +91,7 @@ export default{
       this._state = null
     },
 
-    onClick() {
+    onClick(e) {
       if ('edit-mode' in this.$route.query) return
 
       if (this.isDisabled) {
@@ -113,7 +113,7 @@ export default{
               break
           }
         } else {
-          this.$emit('click')
+          this.$emit('click', e)
         }
       }
     },
@@ -177,7 +177,8 @@ export default{
 }
 
 .button-primary{
-  @apply bg-primary border-primary text-white;
+  @apply border-primary text-white;
+  background: var(--primary-500);
   @apply hover:bg-primary-600 hover:border-primary-600 disabled:bg-primary;
 }
 .button-primary *{
@@ -194,8 +195,9 @@ export default{
 }
 
 .button-secondary{
-  @apply bg-secondary border-secondary text-white;
+  @apply border-secondary text-white;
   @apply hover:bg-secondary-600 hover:border-secondary-600;
+  background: var(--secondary-500);
 }
 .button-secondary .svgBg{
   stroke: #fff;

package/src/components/Card.vue

@@ -19,13 +19,13 @@
           </div>
         </slot>
 
-        <slot name="default"></slot>
+        <slot name="default" :context="context"></slot>
 
       </div>
     </Transition>
   </Teleport>
 	<div v-else :class="computedClass">
-    <slot name="default"></slot>
+    <slot name="default" :context="context"></slot>
 	</div>
 </template>
 
@@ -56,8 +56,10 @@ export default{
     },
 
     computedState(){
-      return this.mounted &&
-          (this.query ? this.query in this.$route.query : this._state);
+      const state = this.query ? this.query in this.$route.query :
+          (this.hash ? this.$route.hash.indexOf(this.hash) > -1 : this._state);
+
+      return state
     },
 
     computedStyle(){
@@ -75,8 +77,8 @@ export default{
 
   data(){
     return {
-      mounted: false,
-      _state: false
+      _state: false,
+      context: {}
     }
   },
 
@@ -94,13 +96,31 @@ export default{
           }
         })
       }
+      else if(this.hash){
+
+        let currentHash = ''
+        const hashNames = this.$route.hash.split('#')
+        for(let name of hashNames){
+          if(name.indexOf(this.hash.substring(1)) > -1){
+            currentHash = `#${name}`
+            break
+          }
+        }
+
+        this.$router.replace({
+          ...this.$route,
+          hash: this.$route.hash.replace(currentHash, '')
+        })
+      }
       else{
         this._state = false
       }
 
     },
 
-    open(){
+    open(context = {}){
+      this.context = context
+
       if(this.query){
 
       }
@@ -145,6 +165,8 @@ export default{
       default: false
     },
 
+    hash: String,
+
     query: String,
 
     width: [ String, Number ],

package/src/components/ColorPicker.vue

@@ -86,7 +86,7 @@ export default{
 			else{
         if(this.valueType === 'rgb'){
           const hex = hexToRgb(color)
-          this.$emit('update:modelValue', `${hex.r},${hex.g},${hex.b}`)
+          this.$emit('update:modelValue', `rgb(${hex.r},${hex.g},${hex.b})`)
         }
         else{
           this.$emit('update:modelValue', color)
@@ -122,7 +122,9 @@ export default{
 
         let value = this.modelValue
         if(this.valueType === 'rgb'){
-          value = rgbToHex(...(this.modelValue ?? '').split(','))
+          const rgbColors = (this.modelValue ?? '').match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+          const rgbValue = rgbColors ? [rgbColors[1], rgbColors[2], rgbColors[3]] : null
+          value = rgbToHex(...(rgbValue ? rgbValue : [0,0,0]))
         }
 
 				return {

package/src/components/List.vue

@@ -297,7 +297,7 @@ export default{
 
   emits: [ 'dragover', 'after-load', 'open-preset', 'signal', 'pivot-item-click' ],
 
-  inject: [ 'useSocket', 'socket', 'toast' ],
+  inject: [ 'useSocket', 'toast' ],
 
   props: {
     config: Object,
@@ -464,6 +464,10 @@ export default{
             if(this.$route.query?.search)
               this.preset.search = this.$route.query.search
           }
+          else{
+            const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
+            Object.assign(this.cConfig, defaultConfig)
+          }
         }
         else{
           const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})

package/src/components/ListItem.vue

@@ -116,7 +116,7 @@ export default{
           this.$el.querySelectorAll('[data-reorder]').forEach((comp) => {
             if(comp.closest(`.${this.$style.comp}`) === this.$el){
               comp.addEventListener('mousedown', this.onDrag)
-              comp.addEventListener('touchstart', this.onDrag)
+              comp.addEventListener('touchstart', this.onDrag, { passive:true })
             }
           })
         }

package/src/components/OTPField.vue

@@ -1,10 +1,16 @@
 <template>
 	<div :class="$style.comp">
 		<div :class="computedClass">
-			<input :class="$style.input" maxlength="1" type="tel" @focus="onFocus"
-						 ref="verify" @keydown="verifyKeyDown" v-for="i in parseInt(length)"
-						 :value="typeof modelValue === 'string' ? modelValue.split('')[i - 1] : ''"
-						 @paste="verifyPaste" @keyup="verifyKeyUp($event, i - 1)" />
+			<input v-for="i in parseInt(length)"
+             :class="computedItemClass"
+             :value="numbers[i - 1] ?? ''"
+             maxlength="1"
+             type="tel"
+						 ref="verify"
+             @focus="onFocus"
+             @keydown="verifyKeyDown"
+						 @paste="verifyPaste"
+             @keyup="verifyKeyUp($event, i - 1)" />
 		</div>
 	</div>
 </template>
@@ -17,6 +23,8 @@ export default{
 
 		modelValue: String,
 
+    itemClass: String,
+
 		length: {
 			type: [ String, Number ],
 			default: 4
@@ -34,11 +42,21 @@ export default{
 				this.size ? this.$style['size-' + this.size] : '',
 			]
 				.join(' ')
+        .trim()
 		},
 
-		verify(){
-			return this.modelValue.split('')
-		}
+    computedItemClass(){
+      return [
+        this.$style.input,
+        this.itemClass ? this.itemClass : ''
+      ]
+        .join(' ')
+        .trim()
+    },
+
+    numbers(){
+      return (this.modelValue ?? '').split('')
+    }
 
 	},
 
@@ -71,10 +89,12 @@ export default{
 			e.stopPropagation()
 			e.preventDefault()
 			const clipboardData = e.clipboardData || window.clipboardData
-			const text = clipboardData.getData('Text')
 
-			if((new RegExp('^\\d{' + this.size + '}$')).test(text)){
+			let text = clipboardData.getData('Text')
+			if(/^\d+$/.test(text)){
+        text = text.substring(0, parseInt(this.length))
 				this.$emit('update:modelValue', text)
+        this.$refs.verify[this.$refs.verify.length - 1].select()
 			}
 		},
 
@@ -96,7 +116,7 @@ export default{
 
 .input{
   @apply outline-none text-center bg-base-300 text-lg;
-  @apply border-[1px] border-border-200 rounded-lg;
+  @apply border-[1px] border-border-200 rounded-lg p-3;
 }
 .input:focus{
   @apply border-primary;

package/src/components/Textarea.vue

@@ -68,9 +68,10 @@ export default{
 		modelValue(to, from){
 			this.$emit('update:modelValue', to)
 			this.$emit('change', to)
+
 			this.$nextTick(() => {
-				this.$el.style.height = '';
-				this.$el.style.height = this.$refs.input.scrollHeight + 'px'
+				this.$refs.input.style.height = '';
+				this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px'
 			})
 		}
 
@@ -143,13 +144,11 @@ export default{
 <style module>
 
 .textarea{
-	@apply min-h-[var(--h-cp)];
-	@apply flex items-start border-[1px] border-border-200 bg-base-400 rounded-lg overflow-hidden;
-	@apply !max-h-[200px];
+	@apply flex flex-row items-start border-[1px] border-border-200 bg-base-400;
+  @apply rounded-lg overflow-hidden ;
 }
 .textarea textarea{
-	@apply flex-1 outline-none p-2 bg-transparent resize-none;
-	@apply self-stretch;
+	@apply flex-1 outline-none p-2 bg-transparent resize-none min-h-[2.6rem];
 	scrollbar-width: none;
 }
 .textarea>textarea::-webkit-scrollbar{

package/src/mixin/component.js

@@ -77,6 +77,10 @@ export const componentMixin = {
     textColor: Array,
     lineHeight: Array,
 
+    objectFit: Array,
+    objectPosition: Array,
+    backdropBlur: Array,
+
     boxShadow: Array,
     opacity: Array,
     itemRatio: Array,

package/src/themes/default/index.js

@@ -4,10 +4,25 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
 
   addBase({
 
+    ':root': {
+      '--space-1': '0.25rem',
+      '--space-2': '0.5rem',
+      '--space-3': '0.75rem',
+      '--space-4': '1rem',
+      '--space-5': '1.25rem',
+      '--space-6': '1.5rem',
+      '--space-7': '1.75rem',
+      '--space-8': '2rem',
+      '--space-9': '2.25rem',
+      '--space-10': '2.5rem',
+      '--space-11': '2.75rem',
+      '--space-12': '3rem'
+    },
+
     '*': {
       'color': theme('colors.text.DEFAULT'),
       'fontFamily': 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji',
-      'fontSize': '13px'
+      //'fontSize': '13px'
     },
 
     'html, .html': {
@@ -26,12 +41,12 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       '-webkit-font-smoothing': 'antialiased',
       '-moz-osx-font-smoothing': 'grayscale',
       'text-rendering': 'optimizeLegibility',
-      'fontSize': '15px',
+      //'fontSize': '15px',
       'touchAction': "pan-x pan-y",
       'backgroundColor': 'var(--base-300)'
     },
 
-    '@media screen and (orientation: portrait)': {
+    /*'@media screen and (orientation: portrait)': {
       '*': {
         'fontSize': '14px',
       },
@@ -41,7 +56,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       },
 
       "input, input[type='text'], input[type='number'], textarea, select, option": {fontSize: "16px !important"}
-    },
+    },*/
 
     '::-webkit-scrollbar': {
       'height': '8px',
@@ -264,6 +279,22 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
           500: "var(--whatsapp-500)",
           DEFAULT: "var(--whatsapp)"
         },
+      },
+
+      spacing: {
+        0: '0',
+        1: 'var(--space-1)',
+        2: 'var(--space-2)',
+        3: 'var(--space-3)',
+        4: 'var(--space-4)',
+        5: 'var(--space-5)',
+        6: 'var(--space-6)',
+        7: 'var(--space-7)',
+        8: 'var(--space-8)',
+        9: 'var(--space-9)',
+        10: 'var(--space-10)',
+        11: 'var(--space-11)',
+        12: 'var(--space-12)',
       }
     }
   }

package/src/utils/wss.js

@@ -185,13 +185,7 @@ class WSS extends EventEmitter2{
                 data = arr.length > 0 ? JSON.parse(JSON.stringify(arr.pop())) : data
               }
               catch(e){
-
-                if(e.response){
-                  '$report' in process ? process.$report(e) : console.error(e.response.status, e.response.data)
-                }
-                else{
-                  '$report' in process ? process.$report(e) : console.error(e)
-                }
+                console.error(e)
 
                 status = 500
                 data = {

package/src/widgets/ComponentSetting2.vue

@@ -526,7 +526,38 @@ export default{
                   [ 'mx-', 'my-' ],
                   [ 'ml-', 'mt-', 'mr-', 'mb-' ]
                 ]
-              }}
+              }},
+
+            { text:"Object Fit", key:"objectFit", values: [
+              [ 'object-contain', 'Contain'],
+              [ 'object-cover', 'Cover' ],
+              [ 'object-fill', 'Fill' ],
+              [ 'object-none', 'None' ],
+              [ 'object-scale-down', 'Scale Down' ],
+            ]},
+
+            { text:"Object Position", key:"objectPosition", values: [
+              [ 'object-bottom', 'Bottom' ],
+              [ 'object-center', 'Center' ],
+              [ 'object-left', 'Left' ],
+              [ 'object-left-bottom', 'Left Bottom' ],
+              [ 'object-left-top', 'Left Top' ],
+              [ 'object-right', 'Right' ],
+              [ 'object-right-bottom', 'Right Bottom' ],
+              [ 'object-right-top', 'Right Top' ],
+              [ 'object-top', 'Top' ],
+            ]},
+
+            { text:"Backdrop Blur", key:"backdropBlur", values: [
+              [ 'backdrop-blur-none', 'None' ],
+              [ 'backdrop-blur-sm', 'Small' ],
+              [ 'backdrop-blur', 'Medium' ],
+              [ 'backdrop-blur-md', 'Medium' ],
+              [ 'backdrop-blur-lg', 'Large' ],
+              [ 'backdrop-blur-xl', 'Extra Large' ],
+              [ 'backdrop-blur-2xl', '2xl' ],
+              [ 'backdrop-blur-3xl', '3xl' ],
+            ]}
 
           ]},
 
@@ -704,7 +735,7 @@ export default{
                 [ 'w-[70vw]', '70vw' ],
                 [ 'w-[80vw]', '80vw' ],
                 [ 'w-[90vw]', '90vw' ],
-              ]}
+              ]},
 
           ]},
 

package/src/widgets/Header2.vue

@@ -59,7 +59,7 @@ export default{
 <style module>
 
 .comp{
-	@apply bg-white flex flex-row items-center p-4 md:px-8;
+	@apply flex flex-row items-center p-4 md:px-8;
 }
 
 </style>

package/src/widgets/ImageSetting.vue

@@ -4,7 +4,7 @@
       <div class="flex flex-col gap-4 p-6 py-4">
         <div>
           <div class="flex flex-row gap-3">
-            <small class="flex-1 text-text-400">Image</small>
+            <small class="flex-1 text-text-400" @dbclick="log(item.props)">Image</small>
             <ImageUploader ref="uploader" @change="image => item.props.src[viewIndex] = image" :upload-fn="uploadImage" class="text-sm"></ImageUploader>
           </div>
           <div class="mt-1">