@mixd-id/web-scaffold 0.1.230406001

package/src/components/Textbox.vue

@@ -0,0 +1,200 @@
+<template>
+	<div :class="computedClass">
+		<slot name="start"></slot>
+		<input :type="type" :disabled="isDisabled" @focus="isActive = true" @blur="onBlur"
+			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
+					 :value="modelValue ?? value" @input="onInput" :readonly="Boolean(readonly)"
+			@keydown="onKeyDown"/>
+		<div v-if="!!(errors)">
+			<svg :class="$style.svg" width="24" height="24" class="fill-red-500" 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>
+		<button class="mr-2" v-if="[ '1', 1, true, 'true' ].includes(clearable) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
+			<svg :class="$style.svg" width="19" height="19" viewBox="0 0 24 24" class="fill-text-200" xmlns="http://www.w3.org/2000/svg">
+				<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+			</svg>
+		</button>
+		<slot name="end"></slot>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'update:modelValue', 'change', 'clear', 'submit', 'blur' ],
+
+	props: {
+
+		align: {
+			type: String
+		},
+
+		clearable: [ Boolean, String, Number ],
+
+		customClass: String,
+
+		state: {
+			type: Number,
+			default: 1 // 1:normal, -1:disabled, -2:error
+		},
+
+		variant: {
+			type: String,
+			default: ''
+		},
+
+		size: {
+			type: String,
+			default: ''
+		},
+
+		errors:{
+			type: [ String, Array ],
+			default: ''
+		},
+
+		modelValue: [ String, Number ],
+
+		value: String,
+
+		placeholder: [ String, Number ],
+		readonly: undefined,
+		maxlength: String,
+		type: String,
+
+	},
+
+	watch:{
+
+		modelValue(to, from){
+			this.$emit('update:modelValue', to)
+			this.$emit('change', to)
+		}
+
+	},
+
+	computed: {
+
+		computedState(){
+			if(this.errors){
+				return -2
+			}
+			else{
+				return this.state
+			}
+		},
+
+		computedClass(){
+			return this.customClass ?? [
+				this.$style.textbox,
+				this.$style['state-' + this.computedState],
+				this.isActive && !this.readonly ? this.$style.active : '',
+				this.align ? this.$style['align-' + this.align] : '',
+				this.size ? this.$style['size-' + this.size] : ''
+			].join(' ')
+		},
+
+		isDisabled(){
+			return this.state === 2
+		}
+
+	},
+
+	mounted() {
+		this.$refs.input.addEventListener('keyup', this.onKeyUp)
+	},
+
+	data(){
+		return {
+			isActive: false
+		}
+	},
+
+	methods:{
+
+		select(){
+			this.$refs.input.select()
+		},
+
+		onKeyUp(e){
+			if(e.keyCode === 13){
+				this.$emit('submit')
+			}
+			else if(e.keyCode === 27 && this.clearable){
+				this.$emit('clear')
+			}
+		},
+
+		onInput(e){
+			this.$emit('update:modelValue', e.target.value)
+			this.$emit('change', e.target.value)
+		},
+
+		onBlur(e){
+			this.isActive = false
+			this.$emit('blur', e.target.value)
+		},
+
+		onKeyDown(e){
+			if([ 'number', 'tel' ].includes(this.type)){
+				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(e.keyCode === 65 && (e.ctrlKey || e.metaKey));
+				else{
+					e.preventDefault()
+				}
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.textbox{
+	@apply min-h-[var(--h-cp)];
+	@apply flex items-center border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
+}
+
+.textbox input:read-only{
+	@apply bg-text-50;
+}
+
+.size-sm{ @apply min-h-[var(--h-cp-sm)]; }
+.size-sm input{ @apply text-sm; }
+
+.size-lg{ @apply min-h-[var(--h-cp-lg)]; }
+
+.textbox>input{
+	@apply flex-1 outline-none p-2 bg-transparent
+}
+
+.active{
+	@apply border-primary
+}
+
+.state--2{
+	@apply border-red-500
+}
+.state--2 .svg{
+	@apply fill-red-500
+}
+
+.align-left>input{
+	@apply text-left
+}
+.align-center>input{
+	@apply text-center
+}
+.align-right>input{
+	@apply text-right
+}
+
+</style>

package/src/components/Timepicker.vue

@@ -0,0 +1,108 @@
+<template>
+  <span :class="computedClass">
+    <div>
+      <slot></slot>
+    </div>
+    <div class="flex-1">
+      <select @change="onChanged" ref="hour">
+        <option v-for="_hour in 24" :value="(_hour - 1).toString().padStart(2, '0')"
+          :selected="(_hour - 1) === computedHour">
+          {{ (_hour - 1).toString().padStart(2, '0') }}
+        </option>
+      </select>
+    </div>
+    <div>
+      <label>:</label>
+    </div>
+    <div class="flex-1">
+      <select @change="onChanged" ref="minute">
+        <option v-for="_minute in 60" :value="(_minute - 1).toString().padStart(2, '0')"
+          :selected="(_minute - 1) === computedMinute">
+          {{ (_minute - 1).toString().padStart(2, '0') }}
+        </option>
+      </select>
+    </div>
+  </span>
+</template>
+
+<script>
+export default{
+
+  props:{
+
+    modelValue: {
+      default: '00:00'
+    },
+
+    size:{
+      type: String,
+      default: ''
+    },
+
+  },
+
+  computed:{
+
+    computedClass(){
+      return [
+        'timepicker',
+        this.size !== '' ? 'timepicker-' + this.size : ''
+      ]
+        .join(' ').trim()
+    },
+
+    computedHour(){
+      return parseInt(this.modelValue.split(':')[0])
+    },
+
+    computedMinute(){
+      return parseInt(this.modelValue.split(':')[1])
+    }
+
+  },
+
+  emits: [ "update:modelValue" ],
+
+  methods:{
+
+    onChanged(){
+      const time = this.$refs.hour.value + ':' + this.$refs.minute.value
+      this.$emit('update:modelValue', time)
+    }
+
+  }
+
+}
+</script>
+
+<style>
+
+.timepicker{
+  @apply inline-flex flex-row items-center bg-base-50;
+}
+
+.timepicker label{
+  @apply inline-block p-2;
+}
+
+.timepicker select{
+  @apply w-full p-2 appearance-none bg-transparent outline-none;
+	@apply border-[1px] border-text-200 hover:border-text-300 rounded-lg;
+	@apply text-center;
+}
+
+.timepicker.timepicker-sm select{
+  @apply text-sm p-1;
+}
+.timepicker.timepicker-sm label{
+  @apply text-sm p-1;
+}
+
+.timepicker.timepicker-lg select{
+  @apply text-lg p-3;
+}
+.timepicker.timepicker-lg label{
+  @apply text-lg p-3;
+}
+
+</style>

package/src/components/Toast.vue

@@ -0,0 +1,93 @@
+<template>
+
+	<Teleport to=".dG9h">
+		<Transition name="dG9i">
+			<div v-if="state" :class="$style.toast" @mouseover="onMouseOver">
+				<slot></slot>
+			</div>
+		</Transition>
+	</Teleport>
+
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		state: [ Boolean, Number, String ],
+
+		dismissAfter: {
+			type: [ Number, String ],
+			default: 3000
+		}
+
+	},
+
+	emits: [ 'dismiss' ],
+
+	data(){
+		return {
+			intervalId: null
+		}
+	},
+
+	methods: {
+
+		onMouseOver(){
+			if(this.intervalId){
+				window.clearTimeout(this.intervalId)
+				this.intervalId = null
+			}
+		}
+
+	},
+
+	watch:{
+
+		state(to){
+			if(to){
+				this.intervalId = window.setTimeout(() => {
+					if(this.state){
+						this.$emit('dismiss')
+					}
+				}, parseInt(this.dismissAfter))
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style>
+
+.dG9h{
+	@apply fixed top-0 left-0 right-0;
+	z-index: 61;
+}
+
+.dG9i-enter-active,
+.dG9i-leave-active {
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.dG9i-enter-from,
+.dG9i-leave-to {
+	opacity: 0;
+	transform: translate3d(0, -10vh, 0);
+}
+
+</style>
+
+<style module>
+
+.toast{
+	@apply max-w-[90vw] md:max-w-[640px] bg-base-400 mt-4 mx-auto rounded-xl border-[1px] border-text-50;
+	@apply min-h-[var(--h-cp)];
+	z-index: 61;
+}
+
+</style>

package/src/components/VirtualScroll.vue

@@ -0,0 +1,215 @@
+<template>
+	<div :class="$style.comp">
+		<div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
+			<div v-if="visibleItems && visibleItems.length > 0" :class="$style.spacer" ref="spacer" :style="spacerStyle">
+				<div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
+						 @click="select(item, index)"
+						 :class="[ $style.item, selectedIndex === ((item && item.id) ? item.id : visibleStartIndex + index) ? $style.trSelected : '', item._highlight ? $style.highlight : '' ].join(' ')">
+					<slot name="item" :item="item" :index="index"></slot>
+				</div>
+			</div>
+			<div v-else class="flex p-8 justify-center items-center">
+				<slot v-if="$slots['empty']" name="empty"></slot>
+				<div v-else>No data</div>
+			</div>
+		</div>
+		<div :class="$style.calc" v-if="items && items.length > 0" ref="calc">
+			<slot name="item" :item="items[0]" :index="0"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import throttle from "lodash/throttle";
+
+export default{
+
+	emits: [ 'scroll-end' ],
+
+  props:{
+
+    items:{
+      type: Array, Object
+    }
+
+  },
+
+  computed:{
+
+		visibleStartIndex(){
+			return Math.round(this.scrollTop / this.itemHeight)
+		},
+
+		visibleItems(){
+			if(this.itemHeight <= 0) return []
+			return this.items ? this.items.slice(this.visibleStartIndex, this.visibleStartIndex + this.maxVisibleItems) : []
+		},
+
+		spacerStyle(){
+			return {
+				transform: "translateY(" + (this.visibleStartIndex * this.itemHeight) + "px)"
+			}
+		},
+
+		scrollerStyle(){
+			if(!this.items || this.items.length < 1)
+				return {}
+
+			const height = (this.items.length * this.itemHeight)
+			//console.log('scrollerStyle', height)
+
+			return {
+				height: height + 'px'
+			}
+		}
+
+  },
+
+  data(){
+    return {
+			scrollTop: 0,
+			itemHeight: 0,
+			maxVisibleItems: 0,
+			isOnEndScroll: false,
+			selectedIndex: -1
+    }
+  },
+
+	mounted() {
+		this.init()
+	},
+
+	methods:{
+
+		init(){
+			this.$el.addEventListener(
+				"scroll",
+				this.handleScroll,
+				this.passiveScrollSupported() ? { passive: true } : false
+			)
+
+			this.resize()
+		},
+
+		select(item, index){
+			this.selectedIndex = (item && item.id) ? item.id : this.visibleStartIndex + index
+			if(item._highlight){
+				delete item._highlight
+			}
+		},
+
+    handleScroll: throttle(function(){
+      this.scrollTop = this.$el.scrollTop
+
+			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$el.clientHeight - this.itemHeight){
+				if(!this.isOnEndScroll){
+					this.$emit('scroll-end')
+					this.isOnEndScroll = true
+				}
+			}
+			else{
+				if(this.isOnEndScroll){
+					this.isOnEndScroll = false
+				}
+			}
+    }, 10),
+
+    passiveScrollSupported() {
+      let passiveSupported = false;
+
+      try {
+        const options = {
+          get passive() {
+            passiveSupported = true;
+            return false;
+          }
+        };
+        window.addEventListener("test", null, options);
+        window.removeEventListener("test", null, options);
+      } catch (err) {
+        passiveSupported = false;
+      }
+      return passiveSupported;
+    },
+
+		async resize(){
+
+			this.$nextTick(() => {
+				if(this.$refs.calc){
+					const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
+						window.getComputedStyle(this.$el).height :
+						window.getComputedStyle(this.$el).maxHeight)
+					this.itemHeight = parseInt(window.getComputedStyle(this.$refs.calc).height)
+					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
+					//console.log('Virtual scroll resize', { elHeight, itemHeight:this.itemHeight, maxVisibleItems:this.maxVisibleItems })
+
+					if(this.itemHeight <= 0){
+						console.error('[VirtualScroll] Unable to calculate item height, make sure not async component.')
+					}
+				}
+			})
+
+		}
+
+  },
+
+  watch: {
+
+		items: {
+			deep: true,
+			handler(){
+				this.resize()
+			}
+		}
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+  .comp{
+		@apply relative overflow-auto max-h-[100vh];
+  }
+
+  .scroller{
+		position: relative;
+    overflow: hidden;
+    will-change: auto;
+	}
+
+  .spacer{
+    will-change: auto;
+		position: relative;
+  }
+
+	.item:hover{
+		@apply bg-primary-50;
+	}
+
+	.item.trSelected{
+		@apply bg-primary-200;
+	}
+
+	.highlight{
+		animation: highlight 1s 1 forwards;
+	}
+	@keyframes highlight {
+		0% {
+			@apply bg-primary-50;
+		}
+
+		100% {
+			@apply bg-primary-100;
+		}
+	}
+
+	.calc{
+		@apply absolute invisible;
+		top: -10000px;
+	}
+
+</style>