@mixd-id/web-scaffold 0.1.230406035 → 0.1.230406037

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406035",
+  "version": "0.1.230406037",
   "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;
+	@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%;
 }
 
@@ -259,4 +282,4 @@ export default{
 	@apply animate-spin h-5 w-5;
 }
 
-</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/Textbox.vue

@@ -50,7 +50,7 @@ export default{
 		placeholder: [ String, Number ],
 		readonly: undefined,
 		maxlength: String,
-		type: String,
+		type: String // text, tel, password, number,
 
 	},
 
@@ -187,4 +187,4 @@ export default{
 	@apply text-right
 }
 
-</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/themes/default/index.js

@@ -74,6 +74,10 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       "--primary-50": '24, 34, 51',
       "--primary-100": '28, 38, 59',
       "--primary-200": '27, 44, 74',
+
+      "--secondary": '55, 59, 65',
+      "--secondary-500": '55, 59, 65',
+      "--secondary-600": '68, 74, 83',
     },
 
     'body': {
@@ -197,4 +201,4 @@ const plugin = Plugin(function({ addBase, config, theme }) {
   }
 })
 
-module.exports = plugin
+module.exports = plugin

package/src/utils/helpers.js

@@ -275,4 +275,4 @@ module.exports = {
   sequelizeChunk,
   getPresetSortWhereParams,
   unflatten
-}
+}