@mixd-id/web-scaffold 0.1.2301231369 → 0.2.240702

package/src/components/Button.vue

@@ -1,8 +1,10 @@
 <template>
-	<button :class="computedClass" :disabled="isDisabled">
-		<div>
-			<slot></slot>
-		</div>
+  <button :class="compClass" @click="onClick" :style="computedStyle"
+          v-tooltip="disabledText">
+    <slot>
+      <span v-if="icon" v-html="icon"></span>
+      {{ text }}
+    </slot>
 		<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">
 				<circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
@@ -14,8 +16,15 @@
 
 <script>
 
+import {componentMixin} from "../mixin/component";
+import {eventBus} from "../events/event";
+
 export default{
 
+  emits: [ 'click', 'disabled-click' ],
+
+	mixins: [ componentMixin ],
+
 	props: {
 
 		variant: {
@@ -23,34 +32,40 @@ export default{
 			default: "primary" // primary|secondary|outline, default:primary
 		},
 
-		size: {
-			type: [ String ],
-			default: '' // sm|md|lg, default: md
+		state: {
+      type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
+			default: 1
 		},
 
-		spacing: {
-			type: [ String, Number ],
-			default: '' // 0|1|2|3, default: 2
-		},
+		icon: {
+      type: String,
+      default: `<svg width="14" height="14" class="fill-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M236 176c0 15.46-12.54 28-28 28S180 191.5 180 176S192.5 148 208 148S236 160.5 236 176zM500.3 500.3c-15.62 15.62-40.95 15.62-56.57 0l-119.7-119.7c-40.41 27.22-90.9 40.65-144.7 33.46c-91.55-12.23-166-87.28-177.6-178.9c-17.24-136.2 97.29-250.7 233.4-233.4c91.64 11.6 166.7 86.07 178.9 177.6c7.19 53.8-6.236 104.3-33.46 144.7l119.7 119.7C515.9 459.3 515.9 484.7 500.3 500.3zM294.1 182.2C294.1 134.5 255.6 96 207.1 96C160.4 96 121.9 134.5 121.9 182.2c0 38.35 56.29 108.5 77.87 134C201.8 318.5 204.7 320 207.1 320c3.207 0 6.26-1.459 8.303-3.791C237.8 290.7 294.1 220.5 294.1 182.2z"/></svg>`
+    },
 
-		state:  {
-			type: [ String, Number ],
-			default: 1
-		}, // -1:disabled, 1:normal, 2:loading, default: normal
+    actions: Array,
+
+		text: String,
+
+		target: String,
+
+		targetType: String,
+
+		width: Array,
+
+    disabledText: String
 
 	},
 
 	computed:{
 
-		computedClass(){
+		compClass(){
 
 			return [
 				this.$style.button,
-				this.$style['variant-' + this.variant],
-				this.$style['size-' + this.size],
-				this.$style['spacing-' + this.spacing],
-				parseInt(this.computedState) === 2 ? this.$style.loading : '',
+				this.$style['button-' + this.variant],
+				parseInt(this.computedState) === 2 ? this.$style.loading : ''
 			]
+				.filter(_ => _)
 				.join(' ')
 		},
 
@@ -63,7 +78,16 @@ export default{
 		},
 
 		computedState(){
-			return this.state ?? this._state
+			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] ?? ''),
+			]
 		}
 
 	},
@@ -80,12 +104,62 @@ export default{
 			this.$el.focus()
 		},
 
-		setState(state){
-			console.log('setState', state)
+		setState(state, percentage){
 			this._state = state
-		}
+		},
 
-	}
+		resetState(){
+      this._state = null
+		},
+
+		onClick(){
+			if(!('edit-mode' in this.$route.query)){
+
+        if(this.isDisabled){
+          this.$emit('disabled-click')
+        }
+        else{
+          if(this.target){
+            switch(this.targetType){
+
+              case 'section':
+                this.scrollTo(this.target)
+                break
+
+              default:
+                if(this.target.indexOf('://') >= 0){
+                  window.location = this.target
+                }
+                else{
+                  this.$router.push(this.target)
+                }
+                break
+            }
+          }
+          else{
+            this.$emit('click')
+          }
+        }
+      }
+
+      if(this.page?.editMode !== 'design'){
+        this.actions?.forEach(action => {
+          eventBus.emit(action.target, action)
+        })
+      }
+		},
+
+		scrollTo(exp){
+			const el = document.querySelector('._' + exp.substring(0, 4))
+			if(el){
+				window.scrollTo({
+					top: el.offsetTop - 100,
+					behavior: 'smooth'
+				});
+			}
+		},
+
+	},
 
 }
 
@@ -94,160 +168,165 @@ export default{
 <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;
+  @apply p-2;
+  @apply relative flex items-center justify-center;
+  @apply whitespace-nowrap text-ellipsis overflow-hidden;
+  @apply rounded-lg appearance-none;
 }
 .button>*:first-child{
-	@apply flex items-center justify-center
+  @apply flex items-center justify-center
 }
-.button:disabled{
-	@apply opacity-50;
+.button-disabled{
+  @apply text-opacity-50;
 }
-
-.size-sm{
-	@apply h-[var(--h-cp-sm)];
-}
-.size-lg{
-	@apply h-[var(--h-cp-lg)];
+.button:active{
+  @apply top-[1px] left-[1px] relative;
 }
 
-.variant-,
-.variant-primary{
-	@apply bg-primary-500 text-white border-[2px] border-primary-500;
+.button-primary{
+  @apply bg-primary-500 text-white rounded-lg;
+  box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+  border: solid 1px rgb(var(--primary-500));
 }
-.variant-:hover,
-.variant-primary:hover{
-	@apply bg-primary-600 border-primary-600;
+.button-primary:focus{
+  border-color: rgb(var(--primary-600));
 }
-.variant-:active,
-.variant-primary:active{
-	@apply top-[1px] left-[1px] relative;
+.button-primary:hover{
+  @apply bg-primary-600;
 }
-.variant-:disabled,
-.variant-primary:disabled{
-	@apply top-0 left-0 cursor-not-allowed;
+.button-primary-disabled,
+.button-primary-disabled:hover{
+  @apply bg-primary-500 top-0 left-0 cursor-not-allowed text-opacity-50;
+  @apply top-0 left-0;
 }
-.variant- *,
-.variant-primary *{
-	@apply text-white fill-white;
+.button-primary *{
+  @apply text-white fill-white;
 }
-.variant-.loading *,
-.variant-primary.loading *{
-	@apply fill-transparent
+.button-primary.loading *{
+  @apply fill-transparent
 }
-.variant- .svgBg,
-.variant-primary .svgBg{
-	stroke: #fff;
-	stroke-opacity: 25%;
+.button-primary .svgBg{
+  stroke: #fff;
+  stroke-opacity: 25%;
 }
-.variant- .svgHg,
-.variant-primary .svgHg{
-	fill: #fff;
-	fill-opacity: 75%;
+.button-primary .svgHg{
+  fill: #fff;
+  fill-opacity: 75%;
 }
 
-.variant-outline{
-	@apply bg-transparent text-primary-500 border-[2px] border-primary-500;
-}
-.variant-outline:hover{
-	@apply border-primary-300 text-primary-300;
+.button-outline{
+  @apply bg-transparent text-primary-500 border-[1px] border-primary;
 }
-.variant-outline:active{
-	@apply top-[1px] left-[1px] active:relative;
+.button-outline:hover{
 }
-.variant-outline:disabled{
-	@apply opacity-50 top-0 left-0 cursor-not-allowed;
-	@apply text-primary-500 border-primary-500;
+.button-outline-disabled,
+.button-outline-disabled:hover{
+  @apply top-0 left-0 cursor-not-allowed;
+  @apply text-text border-primary-500 text-opacity-50;
 }
-.variant-outline *{
-	@apply text-primary-500 fill-primary-500;
+.button-outline *{
+  @apply text-primary-500 fill-primary-500;
 }
-.variant-outline.loading *{
-	@apply fill-transparent
+.button-outline.loading *{
+  @apply fill-transparent
 }
-.variant-outline .svgBg{
-	stroke: var(--primary);
-	stroke-opacity: 25%;
+.button-outline .svgBg{
+  stroke: rgb(var(--primary-600));
+  stroke-opacity: 50%;
 }
-.variant-outline .svgHg{
-	fill: var(--primary);
-	fill-opacity: 75%;
+.button-outline .svgHg{
+  fill: rgb(var(--primary-500));
+  fill-opacity: 100%;
 }
 
-.variant-secondary{
-	@apply bg-secondary text-primary rounded-md border-[2px] border-secondary;
+.button-secondary{
+  @apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
+  border: solid 1px rgb(var(--secondary-500));
 }
-.variant-secondary:hover{
-	@apply bg-secondary-600 border-secondary-600;
+.button-secondary:hover{
+  @apply bg-secondary-600 border-secondary-600;
 }
-.variant-secondary:active{
-	@apply top-[1px] left-[1px] relative;
+.button-secondary-disabled,
+.button-secondary-disabled:hover{
+  @apply bg-secondary-400 border-secondary-400 cursor-not-allowed text-opacity-50;
 }
-.variant-secondary:disabled{
-	@apply bg-secondary-500 border-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+.button-secondary *{
+  @apply text-text-500 fill-white;
 }
-.variant-secondary *{
-	@apply text-primary fill-primary;
+.button-secondary.loading *{
+  @apply fill-transparent
 }
-.variant-secondary.loading *{
-	@apply fill-transparent
+.button-secondary .svgBg{
+  stroke: rgb(var(--text-400));
+  stroke-opacity: 25%;
 }
-.variant-secondary .svgBg{
-	stroke: var(--text);
-	stroke-opacity: 25%;
+.button-secondary .svgHg{
+  fill: rgb(var(--text-500));
+  fill-opacity: 75%;
+}
+
+.button-red{
+  @apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
 }
-.variant-secondary .svgHg{
-	fill: #fff;
-	fill-opacity: 75%;
+.button-red:hover{
+  @apply bg-red-600 border-red-600;
+}
+.button-red-disabled,
+.button-red-disabled:hover{
+  @apply bg-red-500 border-red-500 top-0 left-0 cursor-not-allowed text-opacity-50;
+}
+.button-red *{
+  @apply text-white fill-white;
+}
+.button-red.loading *{
+  @apply fill-transparent
+}
+.button-red .svgBg{
+  @apply stroke-red-400;
+  stroke-opacity: 50%;
+}
+.button-red .svgHg{
+  @apply fill-text-500;
+  fill-opacity: 100%;
 }
 
-.variant-minimal{
-	@apply border-[2px] border-transparent;
+.button-minimal{
+  @apply border-[2px] border-transparent;
 }
-.variant-minimal:hover{
+.button-minimal:hover{
 }
-.variant-minimal .svgBg{
-	stroke: var(--base-500);
-	stroke-opacity: 25%;
+.button-minimal .svgBg{
+  stroke: rgb(var(--text-500));
+  stroke-opacity: 25%;
 }
-.variant-minimal .svgHg{
-	fill: var(--text);
-	fill-opacity: 75%;
+.button-minimal .svgHg{
+  fill: rgb(var(--text));
+  fill-opacity: 75%;
 }
 
 .loadingPane{
-	@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
+  @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
+}
+.loading{
+  color: transparent;
 }
 .loading>*:first-child{
-	@apply opacity-0
+  @apply opacity-0
 }
 .loading:hover{
 }
 .loading:active{
-	@apply top-0 left-0;
+  @apply top-0 left-0;
 }
 .loading>*{
-	opacity: 0;
+  opacity: 0;
 }
 .loading .loadingPane{
-	opacity: 1;
-}
-
-.spacing-,
-.spacing-2{
-	@apply p-2
-}
-.spacing-1{
-	@apply p-1
-}
-.spacing-3{
-	@apply p-3
+  opacity: 1;
 }
 
 .spinner{
-	@apply animate-spin h-5 w-5;
+  @apply animate-spin h-5 w-5;
 }
 
-</style>
+</style>