@mixd-id/web-scaffold 0.1.230406036 → 0.1.230406038

package/package.json

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

package/src/components/Button.vue

@@ -106,7 +106,10 @@ export default{
 	@apply flex items-center justify-center
 }
 .button:disabled{
-	@apply opacity-50;
+	@apply opacity-60;
+}
+.button:active{
+	@apply top-[1px] left-[1px] relative;
 }
 
 .size-sm{
@@ -118,19 +121,21 @@ export default{
 
 .variant-,
 .variant-primary{
-	@apply bg-primary-500 text-white border-[2px] border-primary-500;
+	@apply bg-primary-500 text-white rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--primary-700));
+	border: solid 1px rgb(var(--primary-400));
 }
 .variant-:hover,
 .variant-primary:hover{
-	@apply bg-primary-600 border-primary-600;
-}
-.variant-:active,
-.variant-primary:active{
-	@apply top-[1px] left-[1px] relative;
+	@apply bg-primary-600;
+	outline-color: rgb(var(--primary-800))
 }
 .variant-:disabled,
 .variant-primary:disabled{
-	@apply top-0 left-0 cursor-not-allowed;
+	@apply bg-primary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply top-0 left-0;
+	outline: solid 1px rgb(var(--primary-700));
 }
 .variant- *,
 .variant-primary *{
@@ -150,18 +155,13 @@ export default{
 	fill: #fff;
 	fill-opacity: 75%;
 }
-.variant-primary:disabled{
-  @apply bg-primary-500 border-primary-500 opacity-50 top-0 left-0 cursor-not-allowed;
-}
 
 .variant-outline{
-	@apply bg-transparent text-primary-500 border-[2px] border-primary-500;
+	@apply bg-transparent text-primary-500;
+	outline: solid 1px rgb(var(--primary-700));
 }
 .variant-outline:hover{
-	@apply border-primary-500 text-text;
-}
-.variant-outline:active{
-	@apply top-[1px] left-[1px] active:relative;
+	outline-color: rgb(var(--primary-800))
 }
 .variant-outline:disabled{
 	@apply opacity-50 top-0 left-0 cursor-not-allowed;
@@ -174,55 +174,78 @@ export default{
 	@apply fill-transparent
 }
 .variant-outline .svgBg{
-	stroke: var(--primary);
-	stroke-opacity: 25%;
+	stroke: rgb(var(--primary-600));
+	stroke-opacity: 50%;
 }
 .variant-outline .svgHg{
-	fill: var(--primary);
-	fill-opacity: 75%;
+	fill: rgb(var(--primary));
+	fill-opacity: 100%;
 }
 
 .variant-secondary{
-	@apply bg-secondary text-white rounded-md border-[2px] border-secondary-600;
+	@apply bg-secondary text-text-500 rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--secondary-700));
+	border: solid 1px rgb(var(--secondary-400));
 }
 .variant-secondary:hover{
-	@apply bg-secondary-600 border-secondary-600;
-}
-.variant-secondary:active{
-	@apply top-[1px] left-[1px] relative;
+	@apply bg-secondary-600;
+	outline-color: rgb(var(--secondary-800))
 }
 .variant-secondary:disabled{
-	@apply bg-secondary-500 border-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	outline: solid 1px rgb(var(--secondary-700));
 }
 .variant-secondary *{
-	@apply text-white fill-white;
+	@apply text-text-500 fill-white;
 }
 .variant-secondary.loading *{
 	@apply fill-transparent
 }
 .variant-secondary .svgBg{
-	stroke: var(--text);
+	stroke: rgb(var(--text-400));
 	stroke-opacity: 25%;
 }
 .variant-secondary .svgHg{
-	fill: #fff;
+	fill: rgb(var(--text-500));
 	fill-opacity: 75%;
 }
 
+.variant-red{
+	@apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
+}
+.variant-red:hover{
+	@apply bg-red-600 border-red-600;
+}
+.variant-red:disabled{
+	@apply bg-red-500 border-red-500 opacity-50 top-0 left-0 cursor-not-allowed;
+}
+.variant-red *{
+	@apply text-white fill-white;
+}
+.variant-red.loading *{
+	@apply fill-transparent
+}
+.variant-red .svgBg{
+	@apply stroke-red-400;
+	stroke-opacity: 50%;
+}
+.variant-red .svgHg{
+	@apply fill-text-500;
+	fill-opacity: 100%;
+}
+
 .variant-minimal{
 	@apply border-[2px] border-transparent;
 }
 .variant-minimal:hover{
 }
-.variant-minimal:active{
-  @apply top-[1px] left-[1px] relative;
-}
 .variant-minimal .svgBg{
-	stroke: var(--base-500);
+	stroke: rgb(var(--text-500));
 	stroke-opacity: 25%;
 }
 .variant-minimal .svgHg{
-	fill: var(--text);
+	fill: rgb(var(--text));
 	fill-opacity: 75%;
 }
 

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/ImportModal.vue

@@ -64,14 +64,23 @@
 
 		<div class="flex-1 flex items-center justify-center" v-else-if="step === 3">
 			<div class="flex flex-col items-center justify-center gap-1">
-				<svg width="96" height="96" viewBox="0 0 24 24" class="fill-green-600" xmlns="http://www.w3.org/2000/svg">
+				<svg width="84" height="84" viewBox="0 0 24 24" class="fill-green-600" xmlns="http://www.w3.org/2000/svg">
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C14.5863 3.5 16.9028 4.65509 18.4618 6.47753L11.1768 13.7626C11.0791 13.8602 10.9209 13.8602 10.8232 13.7626L8.03033 10.9697C7.73744 10.6768 7.26256 10.6768 6.96967 10.9697C6.67678 11.2626 6.67678 11.7374 6.96967 12.0303L9.76256 14.8232C10.446 15.5066 11.554 15.5066 12.2374 14.8232L19.3437 7.717C20.0787 8.97466 20.5 10.4381 20.5 12Z" />
 				</svg>
 				<h3>{{ importData.result.title ?? 'Data berhasil diimport' }}</h3>
 				<p class="mb-4 text-text-400 text-center" v-html="importData.result.description"></p>
-				<div class="p-2 text-sm text-green-500 border-green-500 border-[1px] rounded-lg">
-					Total Data: {{ importData.result.count }}
+				<div v-if="Object.keys(importData.result.count).length > 0" class="p-2 border-green-500 border-[1px] rounded-lg">
+					<table>
+            <tr v-for="(count, key) in importData.result.count">
+              <td class="text-sm text-green-500">{{ key }}</td>
+							<td class="text-sm text-green-500 px-2">:</td>
+              <td class="text-sm text-green-500">{{ count }}</td>
+            </tr>
+					</table>
 				</div>
+        <div v-else class="p-2 text-sm text-green-500 border-green-500 border-[1px] rounded-lg">
+          Total Data: {{ importData.result.count }}
+        </div>
 				<div class="px-6 my-4">
 					<VirtualTable v-if="warnings.length > 0" :columns="warningColumns" :items="warnings" class="h-[200px]"></VirtualTable>
 				</div>
@@ -244,4 +253,4 @@ export default{
 
 }
 
-</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/components/Toast.vue

@@ -85,9 +85,9 @@ export default{
 <style module>
 
 .toast{
-	@apply max-w-[90vw] md:max-w-[640px] bg-base-300 mt-4 mx-auto rounded-xl border-[1px] border-text-200;
+	@apply max-w-[90vw] md:max-w-[480px] bg-base-500 mt-[64px] mx-auto rounded-xl border-[1px] border-text-100;
 	@apply min-h-[var(--h-cp)];
 	z-index: 61;
 }
 
-</style>
+</style>

package/src/utils/helpers.mjs

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