@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/components/Modal.vue

@@ -4,11 +4,12 @@
                 appear
                 @after-leave="onAfterLeave(); $emit('hide')"
                 @after-enter="$emit('show')">
-      <div v-if="currentState"
+      <div v-if="mounted && currentState"
            ref="modal"
            :class="computedClass"
            :style="computedStyle"
            :data-state="computedState ? 1 : 0">
+
         <component v-if="Array.isArray(items) && items.length > 0"
                    v-for="(item, idx) in items"
                    :is="item.type"
@@ -38,6 +39,12 @@
           </div>
           <div v-if="isDisabled" :class="$style.overlay"></div>
         </div>
+
+        <div :class="$style.dropzone">
+          <div class="p-5 bg-text-50 border-border-200 border-[1px] rounded-lg">
+            <svg width="48" height="48" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 416v-64c0-17.67-14.33-32-32-32s-32 14.33-32 32v64c0 17.67-14.33 32-32 32H96c-17.67 0-32-14.33-32-32v-64c0-17.67-14.33-32-32-32s-32 14.33-32 32v64c0 53.02 42.98 96 96 96h256C405 512 448 469 448 416zM246.6 342.6l128-128c12.51-12.51 12.49-32.76 0-45.25c-12.5-12.5-32.75-12.5-45.25 0L256 242.8V32c0-17.69-14.31-32-32-32S192 14.31 192 32v210.8L118.6 169.4c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l128 128C213.9 355.1 234.1 355.1 246.6 342.6z"/></svg>
+          </div>
+        </div>
       </div>
     </Transition>
   </Teleport>
@@ -70,7 +77,7 @@ export default{
 
   mixins: [ componentMixin ],
 
-	emits: [ 'submit', 'apply', 'dismiss', 'show', 'hide' ],
+	emits: [ 'drop', 'submit', 'apply', 'dismiss', 'show', 'hide' ],
 
   props:{
     class:{ type: String, default: '' },
@@ -79,7 +86,11 @@ export default{
 
     hash: String,
 
-    height: [ String, Number ],
+    query: String,
+
+    height: {
+      type: [ String, Number ],
+    },
 
     dock: String,
 
@@ -88,7 +99,10 @@ export default{
 			default: 'bottom'
 		},
 
-    state: [ Number, Boolean, String ],
+    state: {
+      type: [ Number, Boolean, String ],
+      default: undefined
+    },
 
     transition: String,
 
@@ -118,6 +132,15 @@ export default{
           hash: this.$route.hash.replace(hash, '') + hash
         })
       }
+      else if(this.query){
+        this.$router.push({
+          ...this.$route,
+          query: {
+            ...this.$route.query,
+            [this.query]: context.query ?? ''
+          }
+        })
+      }
       else{
         this._state = true
       }
@@ -125,17 +148,27 @@ export default{
 
 		close(){
       if(this.hash){
-
-        const hash = this.$route.hash
+        let hash = this.$route.hash
             .split('#')
             .filter(_ => _.length > 0 && !_.startsWith(this.hash.substring(1)))
             .join('#')
 
+        if(hash.length > 0 && hash.substring(0, 1) !== '#')
+          hash = '#' + hash
+
         this.$router.replace({
           ...this.$route,
           hash
         })
       }
+      else if(this.query){
+        const query = Object.assign({}, this.$route.query)
+        delete query[this.query]
+        this.$router.replace({
+          ...this.$route,
+          query
+        })
+      }
       else{
         this._state = false
       }
@@ -143,7 +176,6 @@ export default{
 
     dismiss(){
       if(this.isDisabled) return
-      this.close()
       this.$emit('dismiss')
     },
 
@@ -168,6 +200,11 @@ export default{
 			}
 		},
 
+    onDrop(e){
+      this.dragging = false
+      this.$emit('drop', e)
+    },
+
 		onKeyDown(e){
 			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
         this.dismiss()
@@ -207,9 +244,10 @@ export default{
       return [
         this.$style.modal,
 				this.$style['modal-' + (this.dock ?? this.position)],
-        this.class,
+        this.class ?? 'w-full',
         this.mode === 'v-show' ? this.$style['v-show'] : '',
-        this.computedState ? this.$style.open : ''
+        this.computedState ? this.$style.open : '',
+        this.dragging ? this.$style['dragging'] : ''
       ]
         .join(' ')
         .trim()
@@ -217,34 +255,41 @@ export default{
 
     computedStyle(){
       return {
-        width: parseInt(this.width) + 'px',
-        height: parseInt(this.height) + 'px',
+        width: (res => /^\d+$/.test(res) ? parseInt(res) + 'px' : res)(this.width),
+        height: (res => /^\d+$/.test(res) ? parseInt(res) + 'px' : res)(this.height),
       }
     },
 
     computedTransition(){
+      let res
       if(this.transition){
-        return this.transition
+        res = this.transition
       }
       else{
         switch(this.dock ?? this.position){
           case 'top':
-            return 'slidedown'
+            res = 'slidedown'
+            break
           case 'bottom':
-            return 'slideup'
+            res = 'slideup'
+            break
           case 'left':
-            return 'slideright'
+            res = 'slideright'
+            break
           case 'right':
-            return 'slideleft'
+            res = 'slideleft'
+            break
           case 'center':
-            return 'slideout'
+            res = 'slideout'
+            break
         }
       }
+      return res
     },
 
 		computedState(){
-      return (this.debugState && this.editMode) ? Boolean(this.debugState) :
-          (this.state ? Boolean(this.state) : this._state)
+      return (this.debugState && this.editMode === 1) ? Boolean(this.debugState) :
+          (this.state !== undefined ? Boolean(this.state) : this._state)
 		},
 
     currentState(){
@@ -258,7 +303,9 @@ export default{
 		return {
 			isDisabled: 0,
 			_state: false,
-			context: null
+			context: null,
+      dragging: false,
+      mounted: false,
 		}
 	},
 
@@ -269,7 +316,7 @@ export default{
   watch:{
 
     computedState: {
-      handler(to, from){
+      handler(to){
         this.setState(to)
       }
     },
@@ -279,26 +326,28 @@ export default{
         if(typeof this.hash === 'string'){
           this._state = (to ?? '').indexOf(this.hash) >= 0
         }
-      }
+      },
+      immediate: true
+    },
+
+    '$route.query': {
+      handler(to){
+        if(typeof this.query === 'string'){
+          this._state = this.query in to
+        }
+      },
+      immediate: true
     }
 
   },
 
 	mounted() {
+    this.mounted = true
+
     if(document.querySelector('.bW9k')){
       document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
     }
 		window.addEventListener('keydown', this.onKeyDown)
-
-		this.$nextTick(() => {
-			if(this.computedState){
-				this.setState(this.computedState)
-			}
-
-      if(this.hash !== null){
-        this._state = (this.$route.hash ?? '').indexOf(this.hash) >= 0
-      }
-		})
 	},
 
 }
@@ -315,6 +364,7 @@ export default{
   left: 0;
   bottom: 0;
   right: 0;
+  z-index: 100;
 }
 [data-theme="dark"] .bW9k{
   @apply bg-black/50;
@@ -329,11 +379,20 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply panel-400;
-	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
+	@apply bg-base-400 dark:bg-base-300;
+	@apply border-[1px] border-border-50 flex max-h-[90vh] max-w-full;
 	@apply rounded-xl overflow-hidden transition-all;
+  z-index: 101;
 }
-html[data-theme='dark'] .modal{
+
+.dropzone{
+  @apply hidden;
+  @apply absolute left-0 top-0 right-0 bottom-0;
+  @apply bg-black/50;
+  @apply items-center justify-center;
+}
+.modal.dragging .dropzone{
+  @apply flex;
 }
 
 .modal.v-show{
@@ -367,8 +426,8 @@ html[data-theme='dark'] .overlay{
 @media screen and (max-width: 640px){
 
 	.modal {
+    width: 100% !important;
 		max-height: 90vh;
-		width: 100vw !important;
 	}
 
   .modal-left{
@@ -393,12 +452,5 @@ html[data-theme='dark'] .overlay{
 
 }
 
-@media screen and (min-width: 640px) {
-
-	.modal {
-		max-width: 90vw;
-	}
-
-}
 
 </style>

package/src/components/MultiDropdown.vue

@@ -0,0 +1,124 @@
+<template>
+	<div :class="$style.dropdown">
+		<div ref="btn" class="flex-1 flex flex-row items-center w-[150px]"
+         :class="containerClass"
+         @click="open()">
+      <div class="flex-1 p-2 text-ellipsis-nowrap">
+        {{ selectedText }}
+        &nbsp;
+      </div>
+      <button type="button" class="px-2">
+        <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+      </button>
+    </div>
+
+    <ContextMenu ref="contextMenu" class="mt-2">
+      <div class="flex flex-col min-w-[200px]">
+        <div class="p-2" v-if="viewedItems.length > 10">
+          <Textbox v-model="search" :clearable="true" @clear="search = ''">
+            <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"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+              </div>
+            </template>
+          </Textbox>
+        </div>
+        <div v-for="item in viewedItems" class="p-2"  @click.stop>
+          <Checkbox :value="item[valueKey]" v-model="selectedItems">
+            {{ item[textKey] }}
+          </Checkbox>
+        </div>
+      </div>
+    </ContextMenu>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  props: {
+    containerClass: String,
+
+    modelValue: {
+      type: Array,
+      validator(value){
+        return Array.isArray(value)
+      }
+    },
+
+    items: Array,
+
+    textKey: {
+      type: String,
+      default: 'text'
+    },
+
+    valueKey: {
+      type: String,
+      default: 'value'
+    }
+  },
+
+  computed: {
+
+    selectedText(){
+      if((this.modelValue ?? []).length > 0)
+        return this.modelValue.map(_ => _[this.textKey] ?? _[this.valueKey]).join(', ')
+      return this.$t('(Not Selected)')
+    },
+
+    viewedItems(){
+      if(this.search !== '')
+        return (this.items ?? []).filter(_ => `${_[this.textKey]}`.toLowerCase().indexOf(this.search.toLowerCase()) >= 0)
+      return this.items ?? []
+    }
+
+  },
+
+  data(){
+    return {
+      selectedItems: [],
+      search: '',
+    }
+  },
+
+  methods: {
+
+    open(){
+      this.selectedItems = (this.modelValue ?? []).map(_ => _[this.valueKey])
+      this.$refs.contextMenu.open(this.$refs.btn)
+    }
+
+  },
+
+  watch: {
+
+    selectedItems: {
+      deep: true,
+      handler(_items){
+        this.$emit('update:modelValue', (this.items ?? []).filter(_ => _items.includes(_[this.valueKey]))
+        )
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.dropdown{
+  @apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
+  @apply border-[1px] border-border-200 bg-base-300;
+}
+.dropdown:not(.readonly){
+  @apply hover:border-border-300;
+}
+.dropdown.readonly{
+  @apply bg-text-50;
+}
+
+</style>

package/src/components/MultilineText.vue

@@ -137,7 +137,7 @@ export default{
 <style module>
 
 .textarea{
-	@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-border-200 bg-base-400 rounded-lg overflow-hidden;
 }
 .textarea textarea{
 	@apply flex-1 outline-none p-2 bg-transparent resize-none;
@@ -148,9 +148,6 @@ export default{
 .textarea>textarea::-webkit-scrollbar{
 	display: none;
 }
-.textarea>textarea::placeholder{
-	@apply text-text-200;
-}
 .textarea.readonly{
 	@apply bg-text-50;
 }

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
@@ -26,7 +34,7 @@ export default{
 	},
 
 	computed: {
-		
+
 		computedClass(){
 			return [
 				this.$style.inner,
@@ -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()
 			}
 		},
 
@@ -94,15 +114,21 @@ export default{
 
 }
 
+.input{
+  @apply outline-none text-center bg-base-300 text-lg;
+  @apply border-[1px] border-border-200 rounded-lg p-3;
+}
+.input:focus{
+  @apply border-primary;
+}
+
 .inner{
-	@apply h-[var(--h-cp)] overflow-hidden;
+	@apply overflow-hidden;
 	@apply grid gap-4;
 }
 
-.size-sm{ @apply h-[var(--h-cp-sm)]; }
 .size-sm input{ @apply text-sm; }
 
-.size-lg{ @apply h-[var(--h-cp-lg)]; }
 .size-lg input{ @apply text-lg; }
 
 .length-3{ @apply grid-cols-3; }
@@ -110,16 +136,4 @@ export default{
 .length-5{ @apply grid-cols-5; }
 .length-6{ @apply grid-cols-6; }
 
-.input{
-	@apply outline-none text-center bg-base-50 text-lg;
-	@apply border-[1px] border-text-200 rounded-lg;
-}
-.input:focus{
-	@apply border-primary;
-}
-
-.errorText{
-	@apply mt-2;
-}
-
-</style>
+</style>

package/src/components/ObjectTree.vue

@@ -8,7 +8,7 @@
         {{ valueKey }}:
       </div>
       <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap break-all">
-        {{ JSON.stringify(value) }}
+        Object
       </div>
     </div>
     <div v-if="!collapsed" class="ml-6 flex flex-col">

package/src/components/PageBuilder.vue

@@ -61,9 +61,9 @@
 						</div>
 					</div>
 				</template>
-				<div v-if="tabIndex === 1" class="flex-1 flex flex-col divide-y divide-text-50">
+				<div v-if="tabIndex === 1" class="flex-1 flex flex-col divide-y divide-border-50">
 					<div v-for="widget in widgets" class="flex flex-row gap-4 p-4 px-6 hover:bg-primary-50">
-						<div class="w-[96px] h-[48px] border-[1px] border-text-50 bg-base-300"></div>
+						<div class="w-[96px] h-[48px] border-[1px] border-border-50 bg-base-300"></div>
 						<div class="flex-1">
 							<strong>{{ widget.type ?? widget.title }}</strong>
 						</div>
@@ -76,7 +76,7 @@
 					</div>
 				</div>
 				<div v-else class="flex-1 flex">
-					<ListItem :items="config.widgets" @reorder="reorderWidget" class="flex-1" bodyClass="divide-y divide-text-50">
+					<ListItem :items="config.widgets" @reorder="reorderWidget" class="flex-1" bodyClass="divide-y divide-border-50">
 						<template v-slot="{ item }">
 							<div class="flex flex-row items-center gap-2 px-3" :key="item">
 								<div class="p-2 cursor-move" data-reorder>

package/src/components/Paragraph.vue

@@ -5,7 +5,6 @@
 <script>
 
 import {componentMixin} from "../mixin/component";
-import {applyDatasourceReplacer} from "../utils/helpers.mjs";
 
 
 export default{
@@ -19,7 +18,7 @@ export default{
   computed: {
 
     computedHtml(){
-      return applyDatasourceReplacer(this.html, this.pageData)
+      return this.html
     }
 
   },