@mixd-id/web-scaffold 0.2.240702 → 0.2.240703

package/src/components/Button.vue

@@ -1,165 +1,146 @@
 <template>
   <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>
-				<path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-			</svg>
-		</div>
-	</button>
+    <slot>{{ 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>
+        <path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>
+  </button>
 </template>
 
 <script>
 
 import {componentMixin} from "../mixin/component";
-import {eventBus} from "../events/event";
 
 export default{
 
   emits: [ 'click', 'disabled-click' ],
 
-	mixins: [ componentMixin ],
+  mixins: [ componentMixin ],
 
-	props: {
+  props: {
 
-		variant: {
-			type: [ String, Number ],
-			default: "primary" // primary|secondary|outline, default:primary
-		},
+    variant: {
+      type: [ String, Number ],
+      default: "primary" // primary|secondary|outline, default:primary
+    },
 
-		state: {
+    state: {
       type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
-			default: 1
-		},
-
-		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>`
+      default: 1
     },
 
-    actions: Array,
+    text: String,
 
-		text: String,
+    target: String,
 
-		target: String,
+    targetType: String,
 
-		targetType: String,
-
-		width: Array,
+    width: Array,
 
     disabledText: String
 
-	},
+  },
 
-	computed:{
+  computed: {
 
-		compClass(){
+    compClass() {
 
-			return [
-				this.$style.button,
-				this.$style['button-' + this.variant],
-				parseInt(this.computedState) === 2 ? this.$style.loading : ''
-			]
-				.filter(_ => _)
-				.join(' ')
-		},
+      return [
+        this.$style.button,
+        this.$style['button-' + this.variant],
+        this.isDisabled ? this.$style['button-disabled'] : '',
+        this.isDisabled ? this.$style['button-' + this.variant + '-disabled'] : '',
+        parseInt(this.computedState) === 2 ? this.$style.loading : ''
+      ]
+          .filter(_ => _)
+          .join(' ')
+    },
 
-		isDisabled(){
-			return parseInt(this.computedState) !== 1
-		},
+    isDisabled() {
+      return parseInt(this.computedState) !== 1
+    },
 
-		isLoading(){
-			return parseInt(this.computedState) === 2
-		},
+    isLoading() {
+      return parseInt(this.computedState) === 2
+    },
 
-		computedState(){
-			return this._state ?? this.state
-		},
+    computedState() {
+      return this._state ?? this.state
+    },
 
-		widths(){
-			if(!Array.isArray(this.width)) return [ '', '' ]
+    widths() {
+      if (!Array.isArray(this.width)) return ['', '']
 
-			return [
-				this.width[0] ?? '',
-				this.width[1] ? this.width[1] : (this.width[0] ?? ''),
-			]
-		}
+      return [
+        this.width[0] ?? '',
+        this.width[1] ? this.width[1] : (this.width[0] ?? ''),
+      ]
+    }
 
-	},
+  },
 
-	data(){
-		return {
-			_state: null
-		}
-	},
+  data() {
+    return {
+      _state: null
+    }
+  },
 
-	methods:{
+  methods: {
 
-		focus(){
-			this.$el.focus()
-		},
+    focus() {
+      this.$el.focus()
+    },
 
-		setState(state, percentage){
-			this._state = state
-		},
+    setState(state, percentage) {
+      this._state = state
+    },
 
-		resetState(){
+    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')
+    onClick() {
+      if ('edit-mode' in this.$route.query) return
+
+      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'
+        });
       }
-		},
-
-		scrollTo(exp){
-			const el = document.querySelector('._' + exp.substring(0, 4))
-			if(el){
-				window.scrollTo({
-					top: el.offsetTop - 100,
-					behavior: 'smooth'
-				});
-			}
-		},
+    },
 
-	},
+  },
 
 }
 
@@ -167,166 +148,204 @@ export default{
 
 <style module>
 
-.button{
+.button {
   @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{
+
+.button > *:first-child {
   @apply flex items-center justify-center
 }
-.button-disabled{
+
+.button-disabled {
   @apply text-opacity-50;
 }
-.button:active{
+
+.button:active {
   @apply top-[1px] left-[1px] relative;
 }
 
-.button-primary{
+.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));
 }
-.button-primary:focus{
+
+.button-primary:focus {
   border-color: rgb(var(--primary-600));
 }
-.button-primary:hover{
+
+.button-primary:hover {
   @apply bg-primary-600;
 }
+
 .button-primary-disabled,
-.button-primary-disabled:hover{
+.button-primary-disabled:hover {
   @apply bg-primary-500 top-0 left-0 cursor-not-allowed text-opacity-50;
   @apply top-0 left-0;
 }
-.button-primary *{
+
+.button-primary * {
   @apply text-white fill-white;
 }
-.button-primary.loading *{
+
+.button-primary.loading * {
   @apply fill-transparent
 }
-.button-primary .svgBg{
+
+.button-primary .svgBg {
   stroke: #fff;
   stroke-opacity: 25%;
 }
-.button-primary .svgHg{
+
+.button-primary .svgHg {
   fill: #fff;
   fill-opacity: 75%;
 }
 
-.button-outline{
+.button-outline {
   @apply bg-transparent text-primary-500 border-[1px] border-primary;
 }
-.button-outline:hover{
+
+.button-outline:hover {
 }
+
 .button-outline-disabled,
-.button-outline-disabled:hover{
+.button-outline-disabled:hover {
   @apply top-0 left-0 cursor-not-allowed;
   @apply text-text border-primary-500 text-opacity-50;
 }
-.button-outline *{
+
+.button-outline * {
   @apply text-primary-500 fill-primary-500;
 }
-.button-outline.loading *{
+
+.button-outline.loading * {
   @apply fill-transparent
 }
-.button-outline .svgBg{
+
+.button-outline .svgBg {
   stroke: rgb(var(--primary-600));
   stroke-opacity: 50%;
 }
-.button-outline .svgHg{
+
+.button-outline .svgHg {
   fill: rgb(var(--primary-500));
   fill-opacity: 100%;
 }
 
-.button-secondary{
+.button-secondary {
   @apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
   border: solid 1px rgb(var(--secondary-500));
 }
-.button-secondary:hover{
+
+.button-secondary:hover {
   @apply bg-secondary-600 border-secondary-600;
 }
+
 .button-secondary-disabled,
-.button-secondary-disabled:hover{
+.button-secondary-disabled:hover {
   @apply bg-secondary-400 border-secondary-400 cursor-not-allowed text-opacity-50;
 }
-.button-secondary *{
+
+.button-secondary * {
   @apply text-text-500 fill-white;
 }
-.button-secondary.loading *{
+
+.button-secondary.loading * {
   @apply fill-transparent
 }
-.button-secondary .svgBg{
+
+.button-secondary .svgBg {
   stroke: rgb(var(--text-400));
   stroke-opacity: 25%;
 }
-.button-secondary .svgHg{
+
+.button-secondary .svgHg {
   fill: rgb(var(--text-500));
   fill-opacity: 75%;
 }
 
-.button-red{
+.button-red {
   @apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
 }
-.button-red:hover{
+
+.button-red:hover {
   @apply bg-red-600 border-red-600;
 }
+
 .button-red-disabled,
-.button-red-disabled:hover{
+.button-red-disabled:hover {
   @apply bg-red-500 border-red-500 top-0 left-0 cursor-not-allowed text-opacity-50;
 }
-.button-red *{
+
+.button-red * {
   @apply text-white fill-white;
 }
-.button-red.loading *{
+
+.button-red.loading * {
   @apply fill-transparent
 }
-.button-red .svgBg{
+
+.button-red .svgBg {
   @apply stroke-red-400;
   stroke-opacity: 50%;
 }
-.button-red .svgHg{
+
+.button-red .svgHg {
   @apply fill-text-500;
   fill-opacity: 100%;
 }
 
-.button-minimal{
+.button-minimal {
   @apply border-[2px] border-transparent;
 }
-.button-minimal:hover{
+
+.button-minimal:hover {
 }
-.button-minimal .svgBg{
+
+.button-minimal .svgBg {
   stroke: rgb(var(--text-500));
   stroke-opacity: 25%;
 }
-.button-minimal .svgHg{
+
+.button-minimal .svgHg {
   fill: rgb(var(--text));
   fill-opacity: 75%;
 }
 
-.loadingPane{
+.loadingPane {
   @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
 }
-.loading{
+
+.loading {
   color: transparent;
 }
-.loading>*:first-child{
+
+.loading > *:first-child {
   @apply opacity-0
 }
-.loading:hover{
+
+.loading:hover {
 }
-.loading:active{
+
+.loading:active {
   @apply top-0 left-0;
 }
-.loading>*{
+
+.loading > * {
   opacity: 0;
 }
-.loading .loadingPane{
+
+.loading .loadingPane {
   opacity: 1;
 }
 
-.spinner{
+.spinner {
   @apply animate-spin h-5 w-5;
 }
 
 </style>
+

package/src/components/Checkbox.vue

@@ -61,7 +61,6 @@ export default {
           return this.modelValue.includes(this.value)
 				}
         else if(this.modelValue){
-          console.log(2, this.value, this.modelValue)
           return this.value === this.modelValue
 				}
 				else{

package/src/components/Datepicker.vue

@@ -266,7 +266,7 @@ export default{
 .datepicker {
 	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-  @apply border-[1px] border-text-200;
+  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
 	@apply cursor-pointer;
 }
 .datepicker:not(.readonly){
@@ -290,12 +290,18 @@ export default{
 .button{
 	@apply rounded-full aspect-square;
 }
+.button:hover{
+  @apply bg-primary-200;
+}
+.button.selected{
+  @apply bg-primary text-white;
+}
 .button.otherMonth{
 	@apply text-text-300;
 }
 
 .arrow{
-	@apply absolute right-0 pointer-events-none bg-base-50 px-2;
+	@apply absolute right-0 pointer-events-none px-2;
 	top: 50%;
 	transform: translate3d(0, -50%, 0);
 }
@@ -303,10 +309,6 @@ export default{
 	@apply block fill-text-300;
 }
 
-.selected{
-	@apply bg-primary;
-}
-
 .mode-calendar{
   @apply p-2 h-auto;
 }