@mixd-id/web-scaffold 0.2.240706 → 0.2.250801009

package/src/components/Button.vue

@@ -1,13 +1,13 @@
 <template>
   <button :class="compClass" @click="onClick" :style="computedStyle"
-          v-tooltip="disabledText">
+          v-tooltip="disabledText" :disabled="isDisabled" :title="isLoading ? 1 : -1">
     <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">
+    <span v-if="isLoading" :class="$style.spinner">
+      <svg  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>
+    </span>
   </button>
 </template>
 
@@ -39,8 +39,6 @@ export default{
 
     targetType: String,
 
-    width: Array,
-
     disabledText: String
 
   },
@@ -52,9 +50,8 @@ export default{
       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 : ''
+        this.isDisabled ? `${this.$style['button-disabled'] ?? ''}` + ' ' + `${this.$style['button-' + this.variant + '-disabled'] ?? ''}` : '',
+        this.isLoading ? `${this.$style['button-loading'] ?? ''}` + ' ' + `${this.$style['button-' + this.variant + '-loading'] ?? ''}` : ''
       ]
           .filter(_ => _)
           .join(' ')
@@ -70,15 +67,6 @@ 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] ?? ''),
-      ]
     }
 
   },
@@ -95,7 +83,7 @@ export default{
       this.$el.focus()
     },
 
-    setState(state, percentage) {
+    setState(state) {
       this._state = state
     },
 
@@ -148,197 +136,121 @@ export default{
 
 <style module>
 
-.button {
-  @apply p-2;
-  @apply relative flex items-center justify-center;
-  @apply whitespace-nowrap text-ellipsis overflow-hidden;
-  @apply rounded-lg appearance-none;
+.button{
+  @apply p-2 px-8 rounded-lg relative inline-flex flex-row items-center justify-center;
+  @apply whitespace-nowrap text-ellipsis overflow-hidden min-h-7;
+  @apply border-[1px];
+  @apply active:top-[1px] active:left-[1px] disabled:top-0 disabled:left-0;
+  @apply cursor-pointer disabled:cursor-not-allowed disabled:text-opacity-60;
 }
-
-.button > *:first-child {
-  @apply flex items-center justify-center
+.button:disabled svg{
+  @apply opacity-50;
 }
-
-.button-disabled {
-  @apply text-opacity-50;
+.button:disabled>*{
+  @apply opacity-50;
 }
-
-.button:active {
-  @apply top-[1px] left-[1px] relative;
+.button-loading{
+  @apply !text-opacity-0;
 }
-
-.button-primary {
-  @apply bg-primary-500 text-white rounded-lg;
-  @apply hover:bg-primary-600 focus:border-primary-300;
-  box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
-  border: solid 1px rgb(var(--primary-500));
+.button-loading>*{
+  @apply !opacity-0;
 }
-
-.button-primary-disabled,
-.button-primary-disabled:hover {
-  @apply bg-primary-300 border-primary-300 top-0 left-0 cursor-not-allowed text-opacity-50;
-  @apply top-0 left-0;
+.button-loading>label{
+  @apply hidden;
 }
-
-.button-primary * {
-  @apply text-white fill-white;
+.button>label{
+  @apply pointer-events-none;
 }
-
-.button-primary.loading * {
-  @apply fill-transparent
+.spinner{
+  @apply absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center;
 }
-
-.button-primary .svgBg {
-  stroke: #fff;
-  stroke-opacity: 25%;
+.button-loading .spinner{
+  @apply !opacity-100;
 }
-
-.button-primary .svgHg {
-  fill: #fff;
-  fill-opacity: 75%;
+.spinner svg{
+  @apply !opacity-100;
+  @apply fill-text animate-spin w-5 h-5;
 }
-
-.button-outline {
-  @apply bg-transparent text-primary-500 border-[1px] border-primary;
+.svgBg{
+  @apply !opacity-100;
+  @apply stroke-text-50 fill-transparent;
 }
 
-.button-outline:hover {
+.button-primary{
+  @apply bg-primary border-primary text-white;
+  @apply hover:bg-primary-600 hover:border-primary-600 disabled:bg-primary;
 }
-
-.button-outline-disabled,
-.button-outline-disabled:hover {
-  @apply top-0 left-0 cursor-not-allowed;
-  @apply text-text border-primary-500 text-opacity-50;
-}
-
-.button-outline * {
-  @apply text-primary-500 fill-primary-500;
-}
-
-.button-outline.loading * {
-  @apply fill-transparent
-}
-
-.button-outline .svgBg {
-  stroke: rgb(var(--primary-600));
-  stroke-opacity: 50%;
-}
-
-.button-outline .svgHg {
-  fill: rgb(var(--primary-500));
-  fill-opacity: 100%;
-}
-
-.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 {
-  @apply bg-secondary-600 border-secondary-600;
+.button-primary *{
+  @apply text-white fill-white;
 }
-
-.button-secondary-disabled,
-.button-secondary-disabled:hover {
-  @apply bg-secondary-400 border-secondary-400 cursor-not-allowed text-opacity-50;
+.button-primary .svgBg{
+  @apply !fill-none;
+  stroke: #fff;
+  stroke-opacity: 25%;
 }
-
-.button-secondary * {
-  @apply text-text-500 fill-white;
+.button-primary .svgHg {
+  fill: #fff;
+  fill-opacity: 750%;
 }
 
-.button-secondary.loading * {
-  @apply fill-transparent
+.button-secondary{
+  @apply bg-secondary border-secondary text-white;
+  @apply hover:bg-secondary-600 hover:border-secondary-600;
 }
-
-.button-secondary .svgBg {
-  stroke: rgb(var(--text-400));
+.button-secondary .svgBg{
+  stroke: #fff;
   stroke-opacity: 25%;
 }
-
 .button-secondary .svgHg {
-  fill: rgb(var(--text-500));
+  fill: #fff;
   fill-opacity: 75%;
 }
 
-.button-red {
-  @apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
-}
-
-.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-outline{
+  @apply border-primary bg-transparent text-primary;
+  @apply hover:bg-transparent hover:border-primary-600;
 }
-
-.button-red * {
-  @apply text-white fill-white;
+.button-outline>*{
+  @apply text-primary fill-primary;
 }
-
-.button-red.loading * {
-  @apply fill-transparent
+.button-outline:disabled>*{
+  @apply text-primary-300 fill-primary-300;
 }
-
-.button-red .svgBg {
-  @apply stroke-red-400;
+.button-outline .svgBg{
+  stroke: rgb(var(--primary-600));
   stroke-opacity: 50%;
 }
-
-.button-red .svgHg {
-  @apply fill-text-500;
+.button-outline .svgHg {
+  fill: rgb(var(--primary-500));
   fill-opacity: 100%;
 }
 
-.button-minimal {
-  @apply border-[2px] border-transparent;
+.button-minimal{
+  @apply border-transparent bg-transparent text-text;
+  @apply hover:bg-transparent hover:border-transparent;
 }
-
-.button-minimal:hover {
-}
-
-.button-minimal .svgBg {
-  stroke: rgb(var(--text-500));
+.button-minimal .svgBg{
+  stroke: #fff;
   stroke-opacity: 25%;
 }
-
 .button-minimal .svgHg {
-  fill: rgb(var(--text));
+  fill: #fff;
   fill-opacity: 75%;
 }
 
-.loadingPane {
-  @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
-}
-
-.loading:hover {
+.button-red{
+  @apply bg-red-500 border-red-500 text-white;
+  @apply hover:bg-red-600 hover:border-red-600 disabled:bg-red-600;
 }
-
-.loading:active {
-  @apply top-0 left-0;
-}
-
-.loading > * {
-  opacity: 0;
+.button-red .svgBg{
+  stroke: #fff;
+  stroke-opacity: 25%;
 }
-
-.loading .loadingPane {
-  opacity: 1;
+.button-red .svgHg {
+  fill: #fff;
+  fill-opacity: 75%;
 }
 
-.spinner {
-  @apply animate-spin h-5 w-5;
-}
 
 </style>
 

package/src/components/Card.vue

@@ -0,0 +1,235 @@
+<template>
+  <Teleport v-if="float" to=".bW9k">
+    <Transition name="slideup"
+                @after-leave="onAfterLeave"
+                appear>
+      <div v-if="computedState"
+           :class="computedClass"
+           :style="computedStyle">
+
+        <slot name="header">
+          <div class="relative">
+            <div class="absolute top-0 right-0">
+              <button type="button" @click="close" class="p-4">
+                <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </slot>
+
+        <slot name="default"></slot>
+
+      </div>
+    </Transition>
+  </Teleport>
+	<div v-else :class="computedClass">
+    <slot name="default"></slot>
+	</div>
+</template>
+
+<script>
+
+const modals = []
+
+const onDismiss = (e) => {
+  if(e.target.classList.contains('bW9k')){
+
+  }
+}
+
+document.querySelector('.bW9k').addEventListener('click', onDismiss)
+
+export default{
+
+  computed: {
+
+    computedClass(){
+      return [
+        this.float ? this.$style.modal : this.$style.static,
+        this.class,
+        this.computedState ? this.$style['state-open'] : ''
+      ]
+          .join(' ')
+          .trim()
+    },
+
+    computedState(){
+      return this.mounted &&
+          (this.query ? this.query in this.$route.query : this._state);
+    },
+
+    computedStyle(){
+      return {
+        width: (res => /^\d+$/.test(res) ? parseInt(res) + 'px' : res)(this.width),
+        height: (res => /^\d+$/.test(res) ? parseInt(res) + 'px' : res)(this.height),
+      }
+    },
+
+    computedTransition(){
+      return 'slidedown'
+    },
+
+  },
+
+  data(){
+    return {
+      mounted: false,
+      _state: false
+    }
+  },
+
+  methods:{
+
+    close(){
+      if(!this.float) return
+
+      if(this.query){
+        this.$router.replace({
+          ...this.$route,
+          query: {
+            ...this.$route.query,
+            [this.query]: undefined
+          }
+        })
+      }
+      else{
+        this._state = false
+      }
+
+    },
+
+    open(){
+      if(this.query){
+
+      }
+      else{
+        this._state = true
+      }
+    },
+
+    onAfterLeave(){
+      this.$nextTick(() => {
+        let overlay = document.querySelector('.bW9k')
+        if(overlay){
+          if(overlay.children.length < 1)
+            overlay.classList.remove('bW9l')
+        }
+      })
+    },
+
+  },
+
+  mounted(){
+    this.mounted = true
+  },
+
+  props:{
+
+    class: String,
+
+    dismissable: {
+      type: Boolean,
+      default: false
+    },
+
+    float: Boolean,
+
+    height: {
+      type: [ String, Number ],
+    },
+
+    state: {
+      type: Boolean,
+      default: false
+    },
+
+    query: String,
+
+    width: [ String, Number ],
+
+  },
+
+  watch: {
+
+    computedState: {
+      immediate: true,
+      handler(state){
+        if(!this.float) return
+
+        let overlay = document.querySelector('.bW9k')
+        if(overlay){
+          if(state){
+            overlay.classList.add('bW9l')
+          }
+        }
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style>
+
+.bW9k{
+  @apply z-20 hidden w-[100vw] h-[100vh];
+  @apply bg-white/50 backdrop-blur-xl;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 100;
+}
+[data-theme="dark"] .bW9k{
+  @apply bg-black/50;
+}
+.bW9l{
+  @apply flex items-center justify-center;
+}
+
+</style>
+
+<style module>
+
+.static{
+  @apply flex flex-col;
+}
+
+.modal{
+  @apply fixed;
+  @apply bg-base-400 dark:bg-base-300;
+  @apply border-[1px] border-border-50 flex max-h-[90vh] max-w-full;
+  @apply rounded-xl overflow-hidden transition-all;
+  @apply flex flex-col;
+  z-index: 101;
+  transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
+  transform: scale(0);
+  opacity: 0;
+}
+.modal.state-open{
+  transform: scale(1);
+  opacity: 1;
+}
+
+.overlay{
+  @apply absolute z-20 left-0 bottom-0 top-0 right-0 bg-white/50 backdrop-blur-sm;
+}
+html[data-theme='dark'] .overlay{
+  @apply bg-black/50;
+}
+
+@media screen and (max-width: 640px){
+
+  .modal {
+    width: 100% !important;
+    max-height: 90vh;
+    @apply self-end;
+  }
+
+}
+</style>