@mixd-id/web-scaffold 0.1.230406001

package/src/components/ListPage1Filter.vue

@@ -0,0 +1,170 @@
+<template>
+	<div :class="$style.comp">
+		<div class="flex flex-row items-center gap-2">
+			<Checkbox v-model="filter.enabled" @change="onFilterChange(item)"/>
+			<div class="flex-1">
+				<strong class="block text-ellipsis overflow-x-hidden whitespace-nowrap">{{ filter.label }}</strong>
+			</div>
+			<div class="w-[60px]">
+				<Dropdown v-model="filter.operand" @change="onFilterChange(item)">
+					<option value="">And</option>
+					<option value="or">Or</option>
+				</Dropdown>
+			</div>
+			<button @click.stop="removeFilter(filter)" class="text-primary">
+				<svg width="21" height="21" class="fill-text-100 hover:fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+					<path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/>
+				</svg>
+			</button>
+		</div>
+		<div class="flex flex-col gap-3 py-3">
+
+			<div v-for="(item, idx) in filter.filters">
+
+				<div v-if="column && column.type === 'date'">
+
+					<div class="flex flex-row items-start gap-2">
+						<Dropdown v-model="item.operator" @change="onFilterChange(item)" class="flex-1 min-w-[100px]">
+							<option value="">Select</option>
+							<option value="today">Today</option>
+							<option value="thisWeek">This Week</option>
+							<option value="weekAgo">1 Week Ago</option>
+							<option value="thisMonth">This Month</option>
+							<option value="monthAgo">1 Month Ago</option>
+							<option value="lastMonth">Last Month</option>
+							<option value="thisMonth">This Year</option>
+							<option value="lastYear">Last Year</option>
+							<option value="between">Between</option>
+						</Dropdown>
+						<Datepicker v-if="item.operator === 'between'" v-model="item.value[0]" mode="popup" @change="onFilterChange(item)"/>
+						<Datepicker v-if="item.operator === 'between'" v-model="item.value[1]" mode="popup" @change="onFilterChange(item)"/>
+						<button v-if="filter.filters.length > 1" @click.stop="filter.filters.splice(filter.filters.indexOf(item), 1);onFilterChange(item)"
+										class="py-2">
+							<svg width="21" height="21" class="fill-text-100 hover:fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/>
+							</svg>
+						</button>
+					</div>
+
+				</div>
+
+				<div v-else-if="column && column.type === 'enum'" class="flex flex-col">
+					<Checkbox v-for="(obj, idx) in filter.typeParams" :value="obj.value" v-model="item.value"
+										@change="onFilterChange(item)">
+						{{ obj.text }}
+					</Checkbox>
+				</div>
+
+				<div v-else-if="column && [ 'currency', 'number' ].includes(column.type)">
+
+					<div class="flex flex-row items-start gap-2">
+						<Dropdown v-model="item.operator" @change="onFilterChange(item)">
+							<option value="">Select</option>
+							<option value="=">=</option>
+							<option value=">">&gt;</option>
+							<option value=">=">&gt;=</option>
+							<option value="<">&lt;</option>
+							<option value="<=">&lt;=</option>
+						</Dropdown>
+						<Textbox class="flex-1" v-model="item.value" @keyup.enter="onFilterChange(item)"/>
+						<button v-if="filter.filters.length > 1" @click.stop="filter.filters.splice(filter.filters.indexOf(item), 1);onFilterChange(item)"
+										class="py-2">
+							<svg width="21" height="21" class="fill-text-100 hover:fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/>
+							</svg>
+						</button>
+					</div>
+
+				</div>
+
+				<div v-else>
+
+					<div class="flex flex-row items-start gap-2">
+						<Dropdown v-model="item.operator" @change="onFilterChange(item)" class="flex-1 min-w-[100px]">
+							<option value="">{{ $t('Select') }}</option>
+							<option value="startsWith">{{ $t('Starts with') }}</option>
+							<option value="endsWith">{{ $t('Ends with') }}</option>
+							<option value="contains">{{ $t('Contains') }}</option>
+							<option value="=">{{ $t('Equal') }}</option>
+							<option value="empty">{{ $t('Empty')}}</option>
+							<option value="notEmpty">{{ $t('Not empty')}}</option>
+							<option value="regex">{{ $t('Regexp')}}</option>
+						</Dropdown>
+						<Textbox v-if="![ 'empty', 'notEmpty' ].includes(item.operator)" class="w-[150px]" v-model="item.value" @keyup.enter="onFilterChange(item)"/>
+						<button v-if="filter.filters.length > 1" @click.stop="filter.filters.splice(filter.filters.indexOf(item), 1);onFilterChange(item)"
+										class="py-2">
+							<svg width="21" height="21" class="fill-text-100 hover:fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/>
+							</svg>
+						</button>
+					</div>
+
+				</div>
+
+			</div>
+
+			<div class="text-center">
+				<button @click="addMore" class="text-primary">{{ $t('Add More') }}</button>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'remove', 'change' ],
+
+	props:{
+		column: Object,
+		filter: Object
+	},
+
+	methods: {
+
+		addMore(){
+			switch(this.filter.type){
+
+				case 'date':
+				case 'enum':
+					this.filter.filters.push({
+						value: []
+					})
+					break
+
+				default:
+					this.filter.filters.push({
+					})
+					break
+			}
+		},
+
+		removeFilter(filter){
+			this.$emit('remove', filter)
+			this.$emit('change')
+		},
+
+		onFilterChange(item){
+			this.$emit('change')
+		}
+
+	},
+
+	watch: {
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply py-4;
+}
+
+</style>

package/src/components/Modal.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <Teleport to=".bW9k">
+      <Transition :name="transition" @after-leave="onAfterLeave" @after-enter="$emit('show')">
+        <div v-if="computedState" :class="computedClass" ref="modal" :style="computedStyle">
+          <form @submit.prevent="$emit('submit')">
+            <div class="modal-head">
+              <slot name="head"></slot>
+            </div>
+            <div :class="modalBodyClass">
+              <slot></slot>
+            </div>
+            <div class="modal-foot">
+              <slot name="foot"></slot>
+            </div>
+						<div v-if="isDisabled" :class="$style.overlay"></div>
+          </form>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+
+let modals = []
+
+const registerModal = (modal) => {
+
+	modals.forEach((_) => {
+		_.isDisabled = 1
+	})
+
+	modals.push(modal)
+}
+
+const unRegisterModal = (modal) => {
+
+	modals = modals.filter((_) => _ !== modal)
+
+	if(modals.length > 0)
+		modals[modals.length - 1].isDisabled = 0
+}
+
+export default{
+
+	emits: [ 'submit', 'dismiss', 'show', 'hide' ],
+
+  props:{
+		bodyClass:{ type: String, default: '' },
+    class:{ type: String, default: '' },
+		dismissable: undefined,
+		height: String,
+		position: String,
+		state: [ Number, Boolean, String ],
+		transition: { type: String, default: 'slideup' },
+		width: String
+  },
+
+  computed:{
+
+    modalBodyClass(){
+      return [
+        this.$style.modalBody,
+				this.bodyClass
+      ]
+        .join(' ')
+        .trim()
+    },
+
+    computedClass(){
+      return [
+        this.$style.modal,
+				this.$style['modal-' + this.position],
+        this.class
+      ]
+        .join(' ')
+        .trim()
+    },
+
+    computedStyle(){
+      return {
+        width: parseInt(this.width) + 'px',
+        height: parseInt(this.height) + 'px',
+      }
+    },
+
+		computedState(){
+			return this.state ? Boolean(this.state) : this._state
+		}
+
+  },
+
+	data(){
+		return {
+			isDisabled: 0,
+			_state: false
+		}
+	},
+
+  watch:{
+
+    computedState(to, from){
+
+      if(to){
+        let overlay = document.querySelector('.bW9k')
+        if(overlay){
+          overlay.classList.add('bW9l')
+        }
+
+				registerModal(this)
+      }
+			else{
+				unRegisterModal(this)
+			}
+    }
+
+  },
+
+	mounted() {
+		document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
+		window,addEventListener('keydown', this.onKeyDown)
+	},
+
+	methods: {
+
+		open(){
+			this._state = true
+		},
+
+		close(){
+			this._state = false
+		},
+
+    onAfterLeave(){
+      let overlay = document.querySelector('.bW9k')
+      if(overlay){
+
+				let hasTrueState = false
+
+				for(let i = 0 ; i < overlay.children.length ; i++){
+					if(overlay.children[i].style.display !== 'none'){
+						hasTrueState = true
+					}
+				}
+
+        if(!hasTrueState){
+          overlay.classList.remove('bW9l')
+        }
+
+				this.$emit('hide')
+      }
+    },
+
+		onDismiss(e){
+			if(this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
+				this.$emit('dismiss')
+				this.close()
+			}
+		},
+
+		onKeyDown(e){
+			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
+				this.$emit('dismiss')
+			}
+		}
+  }
+
+}
+
+</script>
+
+<style>
+
+.bW9k{
+	@apply fixed z-20 top-0 left-0 bottom-0 right-0 hidden items-center justify-center;
+	@apply bg-black/50 backdrop-blur-md;
+}
+.bW9l{
+	@apply flex;
+}
+
+</style>
+
+<style module>
+
+.modal{
+	@apply fixed;
+	@apply bg-base-500 border-[1px] border-text-50 z-20 flex max-h-[90vh];
+	@apply rounded-xl overflow-hidden;
+	transition:  all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.modal form{
+	@apply flex-1 min-h-0 flex flex-col relative;
+}
+
+.modalBody{
+	@apply flex-1 min-h-0 overflow-y-auto flex;
+}
+
+.overlay{
+	@apply absolute z-20 left-0 bottom-0 top-0 right-0 bg-white/50 backdrop-blur-sm;
+}
+html[data-theme='dark'] .overlay{
+	@apply bg-black/50;
+}
+
+@media screen and (max-width: 640px) {
+
+	.modal {
+		max-height: 90vh;
+		width: 100vw !important;
+	}
+
+	.modal-center{
+		align-self: center;
+	}
+
+	.modal-bottom{
+		align-self: end;
+	}
+
+}
+
+@media screen and (min-width: 640px) {
+
+	.modal {
+		max-width: 90vw;
+		width: 480px;
+	}
+
+}
+
+</style>
+
+<style>
+
+.slideup-enter-active,
+.slideup-leave-active {
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.slideup-enter-active,
+.slideup-leave-active {
+	transform: translate3d(0, 0, 0);
+}
+.slideup-enter-from,
+.slideup-leave-to {
+	opacity: 0;
+	transform: translate3d(0, 10px, 0);
+}
+
+</style>

package/src/components/OTPField.vue

@@ -0,0 +1,126 @@
+<template>
+	<div :class="$style.comp">
+		<div :class="computedClass">
+			<input :class="$style.input" maxlength="1" type="tel"
+						 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)" />
+		</div>
+		<ErrorText :error="error" :errorKey="errorKey" @dismissError="$emit('dismissError')"
+			:class="$style.errorText + (errorClass ? ' ' + errorClass : '')"/>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		error: Object,
+		errorKey: String,
+		errorClass: String,
+
+		modelValue: 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(' ')
+		},
+
+		verify(){
+			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
+			const text = clipboardData.getData('Text')
+
+			if((new RegExp('^\\d{' + this.size + '}$')).test(text)){
+				this.$emit('update:modelValue', text)
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+.inner{
+	@apply h-[var(--h-cp)] 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; }
+.length-4{ @apply grid-cols-4; }
+.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>

package/src/components/Radio.vue

@@ -0,0 +1,134 @@
+<template>
+	<div :class="$style.comp">
+		<input :id="id" type="radio" :name="name" :checked="computedChecked" @change="onChange" />
+		<label :for="id">
+			<div :class="$style.indicator">
+				<div>
+					<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+				</div>
+			</div>
+			<slot></slot>
+		</label>
+	</div>
+</template>
+
+<script>
+
+import { parseBoolean } from "../utils/helpers.mjs";
+
+export default{
+
+	props:{
+		name: String,
+		checked: undefined,
+		value: undefined,
+
+		modelValue: undefined,
+		trueValue: undefined,
+		falseValue: undefined,
+
+		customClass: String,
+		variant: String, // default
+	},
+
+	computed: {
+
+		id(){
+			return this.$style.comp + this.uniqid()
+		},
+
+		computedChecked(){
+			let checked
+			if(this.modelValue){
+				if(this.value){
+					checked = this.modelValue === this.value
+				}
+				else if(this.trueValue){
+					checked = this.trueValue === this.value
+				}
+				else{
+					checked = parseBoolean(this.modelValue)
+				}
+			}
+			else{
+				checked = !!this.checked
+			}
+
+			return checked
+		}
+
+	},
+
+	methods: {
+
+		onChange(e){
+			let value
+			if(e.target.checked){
+				if(this.value) value = this.value
+				else if(this.trueValue) value = this.trueValue
+				else value = true
+
+				if(this.modelValue && Array.isArray(this.modelValue)){
+					value = [ ...this.modelValue, value ].filter((v, idx, arr) => {
+						return arr.indexOf(v) === idx
+					})
+				}
+			}
+			else{
+				if(this.value) value = null
+				else if(this.falseValue) value = this.falseValue
+				else value = false
+
+
+
+				if(this.modelValue && Array.isArray(this.modelValue)){
+					value = this.modelValue.filter((v) => {
+						return v !== this.value ?? (this.falseValue ?? false)
+					})
+				}
+			}
+			this.$emit('update:modelValue', value)
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply h-[var(--h-cp)] flex items-center;
+}
+
+.comp label{
+	@apply flex flex-row items-center gap-2;
+}
+
+.comp input{
+	@apply hidden;
+}
+
+.indicator{
+	@apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-50;
+	@apply flex items-center justify-center overflow-hidden;
+	transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.comp:hover .indicator{
+	@apply border-primary;
+}
+
+.indicator>div{
+	@apply w-[21px] h-[21px] flex rounded-full items-center justify-center bg-primary;
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+	transform: scale(0);
+}
+.indicator>div>*{
+	@apply fill-white;
+}
+.comp input:checked + label>.indicator>div{
+	transform: scale(1);
+}
+
+</style>