@mixd-id/web-scaffold 0.1.230406076 → 0.1.230406077

package/package.json

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

package/src/components/Button.vue

@@ -1,7 +1,7 @@
 <template>
-	<button :class="computedClass" :disabled="isDisabled">
+	<button :class="compClass" :disabled="isDisabled" @click="onClick">
 		<div>
-			<slot></slot>
+			<slot>{{ text }}</slot>
 		</div>
 		<div v-if="isLoading" :class="$style.loadingPane">
 			<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -14,8 +14,12 @@
 
 <script>
 
+import {componentMixin} from "../mixin/component";
+
 export default{
 
+	mixins: [ componentMixin ],
+
 	props: {
 
 		variant: {
@@ -23,32 +27,26 @@ export default{
 			default: "primary" // primary|secondary|outline, default:primary
 		},
 
-		size: {
-			type: [ String ],
-			default: '' // sm|md|lg, default: md
-		},
-
-		spacing: {
-			type: [ String, Number ],
-			default: '' // 0|1|2|3, default: 2
-		},
-
 		state: {
       type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
 			default: 1
-		}
+		},
+
+		text: String,
+
+		target: String,
+
+		width: Array,
 
 	},
 
 	computed:{
 
-		computedClass(){
+		compClass(){
 
 			return [
 				this.$style.button,
-				this.$style['variant-' + this.variant],
-				this.$style['size-' + this.size],
-				this.$style['spacing-' + this.spacing],
+				'button-' + this.variant,
 				parseInt(this.computedState) === 2 ? this.$style.loading : '',
 			]
 				.join(' ')
@@ -64,6 +62,15 @@ export default{
 
 		computedState(){
 			return this._state ?? this.state
+		},
+
+		widths(){
+			if(!Array.isArray(this.width)) return []
+
+			return [
+				this.width[0] ?? '',
+				this.width[1] ? this.width[1] : (this.width[0] ?? ''),
+			]
 		}
 
 	},
@@ -86,6 +93,12 @@ export default{
 
 		resetState(){
       this._state = null
+		},
+
+		onClick(){
+			if(this.target){
+				this.$router.push(this.target)
+			}
 		}
 
 	}
@@ -94,161 +107,162 @@ export default{
 
 </script>
 
-<style module>
+<style>
 
 .button{
-	@apply h-[var(--h-cp)];
-	@apply relative flex items-center justify-center;
-	@apply whitespace-nowrap text-ellipsis overflow-hidden;
-	@apply rounded-lg;
-}
-.button>*:first-child{
-	@apply flex items-center justify-center
-}
-.button:disabled{
-	@apply opacity-60;
-}
-.button:active{
-	@apply top-[1px] left-[1px] relative;
-}
-
-.size-sm{
-	@apply h-[var(--h-cp-sm)];
-}
-.size-lg{
-	@apply h-[var(--h-cp-lg)];
+	width: v-bind(widths[0])
 }
 
-.variant-,
-.variant-primary{
+.button-primary{
 	@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{
+.button-primary:hover{
 	@apply bg-primary-600;
 	outline-color: rgb(var(--primary-800))
 }
-.variant-:disabled,
-.variant-primary:disabled{
+.button-primary:disabled{
 	@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 *{
+.button-primary *{
 	@apply text-white fill-white;
 }
-.variant-.loading *,
-.variant-primary.loading *{
+.button-primary.loading *{
 	@apply fill-transparent
 }
-.variant- .svgBg,
-.variant-primary .svgBg{
+.button-primary .svgBg{
 	stroke: #fff;
 	stroke-opacity: 25%;
 }
-.variant- .svgHg,
-.variant-primary .svgHg{
+.button-primary .svgHg{
 	fill: #fff;
 	fill-opacity: 75%;
 }
 
-.variant-outline{
+.button-outline{
 	@apply bg-transparent text-primary-500;
 	outline: solid 1px rgb(var(--primary-700));
 }
-.variant-outline:hover{
+.button-outline:hover{
 	outline-color: rgb(var(--primary-800))
 }
-.variant-outline:disabled{
+.button-outline:disabled{
 	@apply opacity-50 top-0 left-0 cursor-not-allowed;
 	@apply text-text border-primary-500;
 }
-.variant-outline *{
+.button-outline *{
 	@apply text-primary-500 fill-primary-500;
 }
-.variant-outline.loading *{
+.button-outline.loading *{
 	@apply fill-transparent
 }
-.variant-outline .svgBg{
+.button-outline .svgBg{
 	stroke: rgb(var(--primary-600));
 	stroke-opacity: 50%;
 }
-.variant-outline .svgHg{
+.button-outline .svgHg{
 	fill: rgb(var(--primary));
 	fill-opacity: 100%;
 }
 
-.variant-secondary{
+.button-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{
+.button-secondary:hover{
 	@apply bg-secondary-600;
 	outline-color: rgb(var(--secondary-800))
 }
-.variant-secondary:disabled{
+.button-secondary:disabled{
 	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
 	outline: solid 1px rgb(var(--secondary-700));
 }
-.variant-secondary *{
+.button-secondary *{
 	@apply text-text-500 fill-white;
 }
-.variant-secondary.loading *{
+.button-secondary.loading *{
 	@apply fill-transparent
 }
-.variant-secondary .svgBg{
+.button-secondary .svgBg{
 	stroke: rgb(var(--text-400));
 	stroke-opacity: 25%;
 }
-.variant-secondary .svgHg{
+.button-secondary .svgHg{
 	fill: rgb(var(--text-500));
 	fill-opacity: 75%;
 }
 
-.variant-red{
+.button-red{
 	@apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
 }
-.variant-red:hover{
+.button-red:hover{
 	@apply bg-red-600 border-red-600;
 }
-.variant-red:disabled{
+.button-red:disabled{
 	@apply bg-red-500 border-red-500 opacity-50 top-0 left-0 cursor-not-allowed;
 }
-.variant-red *{
+.button-red *{
 	@apply text-white fill-white;
 }
-.variant-red.loading *{
+.button-red.loading *{
 	@apply fill-transparent
 }
-.variant-red .svgBg{
+.button-red .svgBg{
 	@apply stroke-red-400;
 	stroke-opacity: 50%;
 }
-.variant-red .svgHg{
+.button-red .svgHg{
 	@apply fill-text-500;
 	fill-opacity: 100%;
 }
 
-.variant-minimal{
+.button-minimal{
 	@apply border-[2px] border-transparent;
 }
-.variant-minimal:hover{
+.button-minimal:hover{
 }
-.variant-minimal .svgBg{
+.button-minimal .svgBg{
 	stroke: rgb(var(--text-500));
 	stroke-opacity: 25%;
 }
-.variant-minimal .svgHg{
+.button-minimal .svgHg{
 	fill: rgb(var(--text));
 	fill-opacity: 75%;
 }
 
+</style>
+
+<style module>
+
+.button{
+	@apply h-[var(--h-cp)];
+	@apply relative flex items-center justify-center;
+	@apply whitespace-nowrap text-ellipsis overflow-hidden;
+	@apply rounded-lg;
+}
+.button>*:first-child{
+	@apply flex items-center justify-center
+}
+.button:disabled{
+	@apply opacity-60;
+}
+.button:active{
+	@apply top-[1px] left-[1px] relative;
+}
+
+.size-sm{
+	@apply h-[var(--h-cp-sm)];
+}
+.size-lg{
+	@apply h-[var(--h-cp-lg)];
+}
+
 .loadingPane{
 	@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
 }
@@ -267,19 +281,16 @@ export default{
 	opacity: 1;
 }
 
-.spacing-,
-.spacing-2{
-	@apply p-2
-}
-.spacing-1{
-	@apply p-1
-}
-.spacing-3{
-	@apply p-3
-}
-
 .spinner{
 	@apply animate-spin h-5 w-5;
 }
 
+@media screen and (min-width: 768px){
+
+	.button{
+		width: v-bind(widths[1])
+	}
+
+}
+
 </style>