@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/src/components/MultilineText.vue

@@ -1,174 +0,0 @@
-<template>
-	<div :class="computedClass">
-		<slot name="start"></slot>
-		<textarea :maxlength="maxlength" :class="itemClass"
-			:placeholder="placeholder" :rows="computedRows" ref="input" @focus="isActive = true" @blur="onBlur" @input="onInput"
-			:value="modelValue" :readonly="Boolean(readonly)" />
-		<div v-if="state === -2 && !!(errors)">
-			<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-				<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
-				<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
-				<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
-			</svg>
-		</div>
-		<slot name="end"></slot>
-	</div>
-</template>
-
-<script>
-
-export default{
-
-	name: 'Textarea',
-
-	props: {
-
-		align: {
-			type: String
-		},
-
-		customClass: String,
-
-		state: {
-			type: Number,
-			default: 1 // 1:normal, -1:disabled, -2:error
-		},
-
-		variant: {
-			type: String,
-			default: ''
-		},
-
-		errors:{
-			type: [ String, Array ],
-			default: ''
-		},
-
-		modelValue: [ String, Number ],
-
-    itemClass: String,
-
-		placeholder: String,
-
-		readonly: undefined,
-
-		rows: String,
-
-    maxlength: undefined,
-
-	},
-
-	watch:{
-
-		modelValue(to, from){
-			this.$emit('update:modelValue', to)
-			this.$emit('change', to)
-			this.$nextTick(() => {
-				this.$refs.input.style.height = '';
-				this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px'
-			})
-		}
-
-	},
-
-	emits: [ 'update:modelValue', 'change', 'submit', 'blur' ],
-
-	computed: {
-
-		computedState(){
-			if(this.errors){
-				return -2
-			}
-			else{
-				return this.state
-			}
-		},
-
-		computedClass(){
-			return this.customClass ?? [
-				this.$style.textarea,
-				this.$style['state-' + this.computedState],
-				this.isActive && !this.readonly ? this.$style.active : '',
-				this.align ? this.$style['align-' + this.align] : '',
-				this.readonly ? this.$style.readonly : '',
-			].join(' ')
-		},
-
-    computedRows(){
-      return 1
-    },
-
-		isDisabled(){
-
-		}
-
-	},
-
-	data(){
-		return {
-			isActive: false
-		}
-	},
-
-	mounted() {
-	},
-
-	methods:{
-
-		select(){
-			this.$refs.input.select()
-		},
-
-		onInput(e){
-			this.$emit('update:modelValue', e.target.value)
-		},
-
-		onBlur(){
-			this.isActive = false
-			this.$emit('blur')
-		}
-
-	}
-
-}
-
-</script>
-
-<style module>
-
-.textarea{
-	@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;
-	@apply self-stretch;
-	scrollbar-width: none;
-  @apply !max-h-[200px];
-}
-.textarea>textarea::-webkit-scrollbar{
-	display: none;
-}
-.textarea.readonly{
-	@apply bg-text-50;
-}
-
-
-.active{
-	@apply border-primary
-}
-
-.state--2{
-	@apply border-red-500
-}
-
-.align-left>input{
-	@apply text-left
-}
-.align-center>input{
-	@apply text-center
-}
-.align-right>input{
-	@apply text-right
-}
-
-</style>

package/src/components/OTPField.vue

@@ -1,139 +0,0 @@
-<template>
-	<div :class="$style.comp">
-		<div :class="computedClass">
-			<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>
-
-<script>
-
-export default{
-
-	props: {
-
-		modelValue: String,
-
-    itemClass: String,
-
-		length: {
-			type: [ String, Number ],
-			default: 4
-		},
-
-		size: String
-	},
-
-	computed: {
-
-		computedClass(){
-			return [
-				this.$style.inner,
-				this.$style['length-' + this.length],
-				this.size ? this.$style['size-' + this.size] : '',
-			]
-				.join(' ')
-        .trim()
-		},
-
-    computedItemClass(){
-      return [
-        this.$style.input,
-        this.itemClass ? this.itemClass : ''
-      ]
-        .join(' ')
-        .trim()
-    },
-
-    numbers(){
-      return (this.modelValue ?? '').split('')
-    }
-
-	},
-
-	methods: {
-
-		verifyKeyDown(e){
-			if(((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) ||
-				[ 8, 13 ].includes(e.keyCode)) && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey);
-			else if([ 65, 86 ].includes(e.keyCode) && (e.ctrlKey || e.metaKey));
-			else{
-				e.preventDefault()
-			}
-		},
-
-		verifyKeyUp(e, idx){
-			if(e.keyCode === 8 && this.$refs.verify[idx].value === '' && idx > 0){
-				this.$refs.verify[idx - 1].select()
-			}
-			else if(this.$refs.verify[idx].value.length > 0 && idx < this.$refs.verify.length - 1){
-				this.$refs.verify[idx + 1].select()
-			}
-
-			const value = this.$refs.verify.map((ctl) => ctl.value).join('')
-			if(value.length === parseInt(this.length)){
-				this.$emit('update:modelValue', value)
-			}
-		},
-
-		verifyPaste(e){
-			e.stopPropagation()
-			e.preventDefault()
-			const clipboardData = e.clipboardData || window.clipboardData
-
-			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()
-			}
-		},
-
-		onFocus(e){
-			e.target.select()
-		}
-
-	}
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-
-}
-
-.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 overflow-hidden;
-	@apply grid gap-4;
-}
-
-.size-sm input{ @apply text-sm; }
-
-.size-lg input{ @apply text-lg; }
-
-.length-3{ @apply grid-cols-3; }
-.length-4{ @apply grid-cols-4; }
-.length-5{ @apply grid-cols-5; }
-.length-6{ @apply grid-cols-6; }
-
-</style>

package/src/components/ObjectTree.vue

@@ -1,105 +0,0 @@
-<template>
-	<div :class="$style.comp">
-    <div class="flex flex-row" @click="toggle">
-      <div class="p-1" v-if="value && typeof value === 'object' && Object.keys(value).length > 0">
-        <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
-      </div>
-      <div v-if="valueKey" class="mr-2 font-bold">
-        {{ valueKey }}:
-      </div>
-      <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap break-all">
-        Object
-      </div>
-    </div>
-    <div v-if="!collapsed" class="ml-6 flex flex-col">
-      <div v-for="(obj, key) in value" class="flex-1 flex flex-col">
-        <ObjectTree v-if="typeof obj === 'object'"
-                    :valueKey="key"
-                    :value="obj"
-                    class="flex-1" />
-        <div v-else class="flex-1 flex flex-row">
-          <div class="p-1">
-            <svg width="14" height="14" class="fill-transparent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
-          </div>
-          <div class="mr-2 font-bold ">{{ key }}:</div>
-          <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap break-all">{{ obj }}</div>
-        </div>
-      </div>
-    </div>
-	</div>
-</template>
-
-<script>
-
-import md5 from "md5";
-
-export default{
-
-  props: {
-
-    valueKey: [ String, Number ],
-    value: Object,
-    store: Object,
-
-  },
-
-  data(){
-    return {
-      collapsed: true,
-    }
-  },
-
-  mounted() {
-    this.collapsed = (this.componentStore[this.uid] ?? {}).collapsed ?? this.collapsed
-  },
-
-  computed: {
-
-    uid(){
-      if(this.value)
-        return md5(JSON.stringify(this.value))
-    },
-
-    componentStore(){
-      if(this.store && this.store.components){
-        if(!this.store.components.objectTree)
-          this.store.components.objectTree = {}
-
-        return this.store.components.objectTree
-      }
-      return {}
-    },
-
-  },
-
-  methods: {
-
-    toggle(){
-      this.collapsed = !this.collapsed
-
-      this.componentStore[this.uid] = {
-        collapsed: this.collapsed
-      }
-    },
-
-  },
-
-  watch: {
-
-    value(){
-      this.collapsed = (this.componentStore[this.uid] ?? {}).collapsed ?? this.collapsed
-    }
-
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply flex flex-col;
-}
-
-</style>