@mixd-id/web-scaffold 0.1.230406037 → 0.1.230406039

package/package.json

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

package/src/components/Checkbox.vue

@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.comp">
-		<input :id="id" type="checkbox" :checked="computedChecked" @change="onChange" />
+		<input :id="id" type="checkbox" :checked="checked" @change="onChange" :disabled="isDisabled"/>
 		<label :for="id">
 			<div :class="$style.indicator">
 				<Transition name="checkbox">
-					<div v-if="computedChecked">
+					<div v-if="checked">
 						<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>
 				</Transition>
@@ -18,19 +18,14 @@
 
 import { parseBoolean } from "../utils/helpers.mjs";
 
-export default{
+export default {
 
 	props:{
-		name: String,
-		checked: undefined,
-		value: undefined,
-
 		modelValue: undefined,
+    value: undefined,
 		trueValue: undefined,
 		falseValue: undefined,
-
-		customClass: String,
-		variant: String, // default
+		disabled: undefined
 	},
 
 	computed: {
@@ -39,28 +34,25 @@ export default{
 			return this.$style.comp + this.uniqid()
 		},
 
-		computedChecked(){
-			let checked
-			if(this.modelValue){
-
-				const isArray = Array.isArray(this.modelValue)
+		isDisabled(){
+      return parseBoolean(this.disabled)
+		},
 
-				if(this.value !== undefined){
-					checked = isArray ? this.modelValue.includes(this.value) :
-						this.modelValue === this.value
-				}
-				else if(this.trueValue){
-					checked = isArray ? this.modelValue.includes(this.trueValue) :
-						this.modelValue === this.trueValue
+		checked(){
+      if(this.value !== undefined){
+        if(Array.isArray(this.modelValue)){
+          return this.modelValue.includes(this.value)
 				}
-				else{
-					checked = parseBoolean(this.modelValue)
+        else{
+          return this.value === this.modelValue
 				}
 			}
-			else{
-				checked = !!this.checked
-			}
-			return checked
+      else if(this.trueValue && this.falseValue) {
+        return this.modelValue === this.trueValue
+      }
+			else {
+        return parseBoolean(this.modelValue)
+      }
 		}
 
 	},
@@ -69,30 +61,40 @@ export default{
 
 		onChange(e){
 
-			let value
-			if(e.target.checked){
-				if(this.value !== undefined) 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
-					})
+      let value
+
+      if(this.value !== undefined){
+        if(Array.isArray(this.modelValue)){
+					if(e.target.checked){
+            this.modelValue.push(this.value)
+						this.modelValue.filter((value, index, self) => self.indexOf(value) === index)
+					}
+          else{
+            this.modelValue.splice(this.modelValue.indexOf(this.value), 1)
+					}
 				}
-			}
-			else{
-				if(this.value !== undefined) 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)
-					})
+        else if(e.target.checked){
+          value = this.value
 				}
 			}
-			this.$emit('update:modelValue', value)
+      else if(this.trueValue !== undefined && this.falseValue !== undefined) {
+        if(Array.isArray(this.modelValue)){
+          if(e.target.checked){
+            this.modelValue.push(this.trueValue)
+            this.modelValue.filter((value, index, self) => self.indexOf(value) === index)
+					}
+        }
+        else{
+          value = e.target.checked ? this.trueValue : this.falseValue
+        }
+      }
+      else{
+				value = e.target.checked
+      }
+
+      if(value !== undefined){
+        this.$emit('update:modelValue', value)
+      }
 		}
 
 	}
@@ -118,13 +120,17 @@ export default{
 .comp input{
 	@apply hidden;
 }
+.comp input[disabled] + label{
+	@apply opacity-70;
+	@apply cursor-not-allowed;
+}
 
 .indicator{
 	@apply w-[21px] h-[21px] border-[1px] rounded-lg 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{
+.comp:hover input:not([disabled]) + label>.indicator{
 	@apply border-primary;
 }
 
@@ -153,4 +159,4 @@ export default{
 	opacity: 0;
 }
 
-</style>
+</style>

package/src/components/Countdown.vue

@@ -6,6 +6,7 @@
 			<div></div>
 			<div></div>
 		</div>
+		<div v-if="display >= 4" class="mr-2">hari</div>
 
 		<slot v-if="display >= 3 && $slots.hour" name="hour" :hour="hour"></slot>
 		<div ref="hour" v-else-if="display >= 3" :class="$style.lap">
@@ -34,8 +35,6 @@
 
 <script>
 
-import debounce from "lodash/debounce";
-
 export default{
 
 	props: {
@@ -75,13 +74,13 @@ export default{
 			timeoutId: null,
 			beforeSecond: null,
 			afterSecond: null,
-			tick: false
+			tick: false,
+			state: [ 0, 0, 0, 0 ]
 		}
 	},
 
 	mounted() {
 		this.start()
-
 		if(this.$refs.second) this.$refs.second.addEventListener('transitionend', this.onSecondEnd)
 		if(this.$refs.minute) this.$refs.minute.addEventListener('transitionend', this.onMinuteEnd)
 		if(this.$refs.hour) this.$refs.hour.addEventListener('transitionend', this.onHourEnd)
@@ -90,32 +89,40 @@ export default{
 
 	methods: {
 
-		onSecondEnd: debounce(function (e){
+    onDayEnd:function (e){
+      if(this.state[0] !== 1) return
+      this.$refs.day.insertBefore(this.$refs.day.childNodes[1], this.$refs.day.childNodes[0])
+      this.$refs.day.classList.remove(this.$style.tick)
+      this.$refs.day.childNodes[0].innerHTML = ''
+      this.state[0] = 0
+    },
+
+    onHourEnd: function (e){
+      if(this.state[1] !== 1) return
+      this.$refs.hour.insertBefore(this.$refs.hour.childNodes[1], this.$refs.hour.childNodes[0])
+      this.$refs.hour.classList.remove(this.$style.tick)
+      this.$refs.hour.childNodes[0].innerHTML = ''
+      this.state[1] = 0
+    },
+
+    onMinuteEnd: function (e){
+      if(this.state[2] !== 1) return
+      this.$refs.minute.insertBefore(this.$refs.minute.childNodes[1], this.$refs.minute.childNodes[0])
+      this.$refs.minute.classList.remove(this.$style.tick)
+      this.$refs.minute.childNodes[0].innerHTML = ''
+      this.state[2] = 0
+    },
+
+		onSecondEnd: function (e){
+      if(this.state[3] !== 1) return
 			this.$refs.second.insertBefore(this.$refs.second.childNodes[1], this.$refs.second.childNodes[0])
 			this.$refs.second.classList.remove(this.$style.tick)
 			this.$refs.second.childNodes[0].innerHTML = ''
-		}, 100),
-
-		onMinuteEnd: debounce(function (e){
-			this.$refs.minute.insertBefore(this.$refs.minute.childNodes[1], this.$refs.minute.childNodes[0])
-			this.$refs.minute.classList.remove(this.$style.tick)
-			this.$refs.minute.childNodes[0].innerHTML = ''
-		}, 100),
-
-		onHourEnd: debounce(function (e){
-			this.$refs.hour.insertBefore(this.$refs.hour.childNodes[1], this.$refs.hour.childNodes[0])
-			this.$refs.hour.classList.remove(this.$style.tick)
-			this.$refs.hour.childNodes[0].innerHTML = ''
-		}, 100),
-
-		onDayEnd: debounce(function (e){
-			this.$refs.day.insertBefore(this.$refs.day.childNodes[1], this.$refs.day.childNodes[0])
-			this.$refs.day.classList.remove(this.$style.tick)
-			this.$refs.day.childNodes[0].innerHTML = ''
-		}, 100),
+      this.state[3] = 0
+		},
 
 		setInitial(){
-			if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1 hari'
+			if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1'
 			if(this.$refs.hour) this.$refs.hour.lastElementChild.innerHTML =  (Math.floor(this.timer / 3600) % 24).toString().padStart(2, '0')
 			if(this.$refs.minute) this.$refs.minute.lastElementChild.innerHTML = (Math.floor(this.timer / 60) % 60).toString().padStart(2, '0')
 			if(this.$refs.second) this.$refs.second.lastElementChild.innerHTML = (this.timer % 60).toString().padStart(2, '0')
@@ -141,7 +148,7 @@ export default{
 
 	watch: {
 
-		value(to){
+		value(){
 			this.start()
 		},
 
@@ -150,6 +157,7 @@ export default{
 			this.$refs.day.firstElementChild.innerHTML = to > 0 ? to + ' hari' : ''
 			this.$refs.day.lastElementChild.innerHTML = from + ' hari'
 			this.$refs.day.classList.add(this.$style.tick)
+      this.state[0] = 1
 		},
 
 		hour(to, from){
@@ -157,6 +165,7 @@ export default{
 			this.$refs.hour.firstElementChild.innerHTML = to
 			this.$refs.hour.lastElementChild.innerHTML = from
 			this.$refs.hour.classList.add(this.$style.tick)
+      this.state[1] = 1
 		},
 
 		minute(to, from){
@@ -164,6 +173,7 @@ export default{
 			this.$refs.minute.firstElementChild.innerHTML = to
 			this.$refs.minute.lastElementChild.innerHTML = from
 			this.$refs.minute.classList.add(this.$style.tick)
+      this.state[2] = 1
 		},
 
 		second(to, from){
@@ -171,6 +181,7 @@ export default{
 			this.$refs.second.firstElementChild.innerHTML = to
 			this.$refs.second.lastElementChild.innerHTML = from
 			this.$refs.second.classList.add(this.$style.tick)
+      this.state[3] = 1
 		}
 	}
 
@@ -210,4 +221,4 @@ export default{
 	transform: translate3d(0, 1.3rem, 0);
 }
 
-</style>
+</style>

package/src/components/Radio.vue

@@ -1,34 +1,26 @@
 <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 :class="$style.comp + (cChecked ? ' ' + $style.checked : '') + (isDisabled ? ' ' + $style.disabled : '')" @click="onChange">
+    <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>
 	</div>
 </template>
 
 <script>
 
-import { parseBoolean } from "../utils/helpers.mjs";
+import {parseBoolean} from "../utils/helpers.mjs";
 
 export default{
 
 	props:{
-		name: String,
+    name: String,
 		checked: undefined,
-		value: undefined,
-
 		modelValue: undefined,
-		trueValue: undefined,
-		falseValue: undefined,
-
-		customClass: String,
-		variant: String, // default
+    value: undefined,
+		disabled: undefined
 	},
 
 	computed: {
@@ -37,58 +29,22 @@ export default{
 			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
-		}
+		isDisabled(){
+      return parseBoolean(this.disabled)
+		},
+
+    cChecked(){
+      return this.$props.checked === undefined ? this.modelValue === this.value : parseBoolean(this.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)
-		}
+    onChange(){
+      if(this.isDisabled) return
+      this.$emit('update:modelValue', this.value)
+    }
 
 	}
 
@@ -99,36 +55,30 @@ export default{
 <style module>
 
 .comp{
-	@apply h-[var(--h-cp)] flex items-center;
+	@apply h-[var(--h-cp)] flex items-center cursor-pointer;
+	@apply flex flex-row items-center gap-2
 }
 
-.comp label{
-	@apply flex flex-row items-center gap-2;
-}
-
-.comp input{
-	@apply hidden;
+.comp.checked .indicator>div{
+  transform: scale(1);
 }
 
 .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;
+  @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);
 }
-
 .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);
+  @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;
+  @apply fill-white;
 }
-.comp input:checked + label>.indicator>div{
-	transform: scale(1);
+
+.comp:not(.disabled):hover .indicator{
+  @apply border-primary;
 }
 
-</style>
+</style>

package/src/utils/helpers.mjs

@@ -213,4 +213,4 @@ function observeInit(){
     once,
     always
   }
-}
+}