@mixd-id/web-scaffold 0.1.240411031 → 0.1.240411032

package/package.json

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

package/src/components/ArrayList.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="$style.comp">
+    <div class="flex-1 flex flex-row flex-wrap gap-1">
+      <div v-for="item in items">
+        <slot name="default" :item="item">
+          <div :class="$style.item">
+            {{ item.name }}
+
+            <button type="button" @click="$emit('remove', item)">
+              <svg width="11" height="11" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+            </button>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <button type="button" class="p-2" @click="$emit('add')">
+      <svg width="14" height="14" class="fill-text-300 hover:fill-text" 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="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/></svg>
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'add', 'remove' ],
+
+  props: {
+    items: Array
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply min-w-[200px] p-1;
+  @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
+  @apply flex flex-row items-start flex-nowrap;
+}
+
+.item{
+  @apply border-[1px] border-text-200 hover:border-text-300 rounded-lg p-1 px-2;
+  @apply flex flex-row items-center gap-2;
+}
+
+</style>

package/src/components/Button.vue

@@ -2,12 +2,12 @@
   <button :class="compClass" @click="onClick" :style="computedStyle"
           v-tooltip="disabledText" :disabled="isDisabled">
     <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,99 @@ 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 rounded-lg relative 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-loading{
+  @apply !text-opacity-0;
 }
-
-.button:active {
-  @apply top-[1px] left-[1px] relative;
+.button-loading>label{
+  @apply hidden;
 }
-
-.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>label{
+  @apply pointer-events-none;
 }
-
-.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;
+.spinner{
+  @apply absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center;
 }
-
-.button-primary * {
-  @apply text-white fill-white;
+.spinner svg{
+  @apply fill-text animate-spin w-5 h-5;
 }
-
-.button-primary.loading * {
-  @apply fill-transparent
+.svgBg{
+  @apply stroke-text-50 fill-transparent;
 }
 
-.button-primary .svgBg {
+.button-primary{
+  @apply bg-primary border-primary text-white;
+  @apply hover:bg-primary-600 hover:border-primary-600 disabled:bg-primary;
+}
+.button-primary .svgBg{
   stroke: #fff;
   stroke-opacity: 25%;
 }
-
 .button-primary .svgHg {
   fill: #fff;
   fill-opacity: 75%;
 }
 
-.button-outline {
-  @apply bg-transparent text-primary-500 border-[1px] border-primary;
-}
-
-.button-outline:hover {
-}
-
-.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{
+  @apply bg-secondary border-secondary text-white;
+  @apply hover:bg-secondary-600 hover:border-secondary-600;
 }
-
-.button-secondary:hover {
-  @apply bg-secondary-600 border-secondary-600;
-}
-
-.button-secondary-disabled,
-.button-secondary-disabled:hover {
-  @apply bg-secondary-400 border-secondary-400 cursor-not-allowed text-opacity-50;
-}
-
-.button-secondary * {
-  @apply text-text-500 fill-white;
-}
-
-.button-secondary.loading * {
-  @apply fill-transparent
-}
-
-.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-red * {
-  @apply text-white fill-white;
-}
-
-.button-red.loading * {
-  @apply fill-transparent
+.button-outline{
+  @apply border-primary bg-transparent text-white;
+  @apply hover:bg-transparent hover:border-primary-600;
 }
-
-.button-red .svgBg {
-  @apply stroke-red-400;
-  stroke-opacity: 50%;
-}
-
-.button-red .svgHg {
-  @apply fill-text-500;
-  fill-opacity: 100%;
+.button-outline .svgBg{
+  stroke: #fff;
+  stroke-opacity: 25%;
 }
-
-.button-minimal {
-  @apply border-[2px] border-transparent;
+.button-outline .svgHg {
+  fill: #fff;
+  fill-opacity: 75%;
 }
 
-.button-minimal:hover {
+.button-minimal{
+  @apply border-transparent bg-transparent text-white;
+  @apply hover:bg-transparent hover:border-transparent;
 }
-
-.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/List.vue

@@ -35,7 +35,7 @@
                 :preset="preset"
                 :presetSelector="$refs.presetSelector"
                 :compPrefix="compPrefix">
-            <div class="flex flex-col md:flex-row gap-3 md:items-start overflow-hidden leading-tight p-3 md:p-0 panel-400 md:panel-none border-b-[1px] border-text-50 md:border-none"
+            <div class="flex flex-col md:flex-row gap-3 md:items-start overflow-hidden p-3 md:p-0 panel-400 md:panel-none border-b-[1px] border-text-50 md:border-none"
                  :class="headerClass">
 
               <div class="flex md:flex-1 flex-row items-start gap-3">

package/src/components/Textbox.vue

@@ -182,24 +182,18 @@ export default{
 
 .textbox{
 	@apply flex items-center;
-  @apply border-[1px] border-text-200 bg-base-300 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
 	@apply overflow-hidden;
 }
-
-.textbox.readonly{
+.textbox.active{
+  @apply !border-primary-600
 }
-
-.size-sm input{ @apply text-sm; }
-
-
 .textbox>input{
-	@apply flex-1 outline-none p-2 bg-transparent;
-	font-size: inherit;
+  @apply flex-1 outline-none p-2 bg-transparent;
+  font-size: inherit;
 }
 
-.active{
-	@apply border-primary
-}
+.size-sm input{ @apply text-sm; }
 
 .state--2{
 	@apply border-red-500

package/src/index.js

@@ -442,6 +442,7 @@ export default{
     app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Paragraph', defineAsyncComponent(() => import("./components/Paragraph.vue")))
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
+    app.component('ArrayList', defineAsyncComponent(() => import("./components/ArrayList.vue")))
     app.component('Article', defineAsyncComponent(() => import("./components/Article.vue")))
     app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))

package/src/themes/default/index.js

@@ -109,7 +109,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       'text-rendering': 'optimizeLegibility',
       'fontSize': '15px',
       'touchAction': "pan-x pan-y",
-      'backgroundColor': 'rgb(var(--base-500))',
+      'backgroundColor': 'rgb(var(--base-500))'
     },
 
     '@media screen and (orientation: portrait)': {

package/tailwind.config.js

@@ -9,7 +9,7 @@ module.exports = {
   plugins: [
     /*require('@tailwindcss/line-clamp'),*/
     /*require('@mixd-id/web-scaffold/themes/default'),*/
-    require('./src/views/themes')
+    require('./src/views/themes/default')
   ],
 
   safelist: [
@@ -476,40 +476,6 @@ module.exports = {
 
   theme: {
     extend: {
-      height: {
-        '10vh': '10vh',
-        '20vh': '20vh',
-        '30vh': '30vh',
-        '40vh': '40vh',
-        '50vh': '50vh',
-        '60vh': '60vh',
-        '70vh': '70vh',
-        '80vh': '80vh',
-        '90vh': '90vh',
-        '100vh': '100vh',
-      },
-      backgroundSize: {
-        '50%': '50%',
-        '40%': '40%',
-        '30%': '30%',
-        '20%': '20%',
-        '10%': '10%',
-      },
-      minWidth: {
-        '0': '0',
-        '1/12': '8%',
-        '2/12': '16%',
-        '3/12': '25%',
-        '4/12': '33%',
-        '5/12': '41%',
-        '6/12': '50%',
-        '7/12': '58%',
-        '8/12': '66%',
-        '9/12': '75%',
-        '10/12': '83%',
-        '11/12': '91%',
-        'full': '100%',
-      }
     }
   }
 }