@indielayer/ui 0.1.1 → 0.2.0

package/src/components/tabs/Tabs.vue

@@ -1,7 +1,6 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
+    :is="tag"
     class="flex border-b border-gray-200 dark:border-gray-700 space-x-4"
   >
     <slot></slot>
@@ -9,14 +8,37 @@
 </template>
 
 <script>
+import { reactive, computed, provide } from 'vue'
+
 export default {
   name: 'XTabs',
 
   props: {
+    modelValue: {
+      type: [String, Number],
+      default: null,
+    },
     tag: {
       type: String,
       default: 'ul',
     },
   },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const state = reactive({
+      active: computed(() => props.modelValue),
+    })
+
+    provide('tabs', {
+      state,
+      activateTab,
+    })
+
+    function activateTab(tab) {
+      emit('update:modelValue', tab)
+    }
+  },
 }
 </script>

package/src/components/tag/Tag.vue

@@ -1,45 +1,33 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
+    :is="tag"
     class="inline-block leading-none"
     :class="
       [
+        [`bg-${color}-200 text-${color}-900 border-${color}-900`],
         {
           // variant
-          '!bg-transparent border': $props.outlined,
-
-          // color
-          'bg-blue-200 text-blue-900 border-blue-900': $props.color === 'blue',
-          'bg-gray-200 text-gray-900 border-gray-900': $props.color === 'gray',
-          'bg-green-200 text-green-900 border-green-900': $props.color === 'green',
-          'bg-indigo-200 text-indigo-900 border-indigo-900': $props.color === 'indigo',
-          'bg-pink-200 text-pink-900 border-pink-900': $props.color === 'pink',
-          'bg-primary-200 text-primary-900 border-primary-900': $props.color === 'primary',
-          'bg-secondary-200 text-secondary-900 border-secondary-900': $props.color === 'secondary',
-          'bg-purple-200 text-purple-900 border-purple-900': $props.color === 'purple',
-          'bg-red-200 text-red-900 border-red-900': $props.color === 'red',
-          'bg-yellow-200 text-yellow-900 border-yellow-900': $props.color === 'yellow',
+          '!bg-transparent border': outlined,
 
           // size
-          'py-1': $props.size === 'auto',
-          'px-2 py-1 text-xs': $props.size === 'xs',
-          'px-2 py-1 text-sm': $props.size === 'sm',
-          'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes($props.size),
-          'px-4 py-3 text-lg': $props.size === 'lg',
-          'px-6 py-6 text-xl': $props.size === 'xl',
+          'py-1': size === 'auto',
+          'px-2 py-1 text-xs': size === 'xs',
+          'px-2 py-1 text-sm': size === 'sm',
+          'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
+          'px-4 py-3 text-lg': size === 'lg',
+          'px-6 py-6 text-xl': size === 'xl',
 
           // radius
-          'rounded-full': $props.radius === 'full',
-          'rounded-lg': $props.radius === 'lg',
-          'rounded-md': $props.radius === 'md',
-          'rounded-sm': $props.radius === 'sm',
-          'rounded': $props.radius === 'rounded',
+          'rounded-full': radius === 'full',
+          'rounded-lg': radius === 'lg',
+          'rounded-md': radius === 'md',
+          'rounded-sm': radius === 'sm',
+          'rounded': radius === 'rounded',
         },
       ]"
   >
     <span
-      v-if="$props.removable"
+      v-if="removable"
       class="flex items-center"
     >
       <slot></slot>
@@ -52,8 +40,8 @@
         stroke-linecap="round"
         fill="none"
         role="presentation"
-        class="stroke-2 w-4 h-4 ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150 ease-in-out"
-        v-on="listeners.remove ? { click: listeners.remove } : null"
+        class="stroke-2 w-4 h-4 ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150 ease-in-out flex-shrink-0"
+        @click="$emit('remove')"
       >
         <line x1="18" y1="6" x2="6" y2="18" />
         <line x1="6" y1="6" x2="18" y2="18" />
@@ -67,31 +55,13 @@
 </template>
 
 <script>
-const validator = {
-  color: [
-    'blue',
-    'gray',
-    'green',
-    'indigo',
-    'pink',
-    'primary',
-    'secondary',
-    'purple',
-    'red',
-    'yellow',
-  ],
-}
-
 export default {
   name: 'XTag',
 
-  validator,
-
   props: {
     color: {
       type: String,
       default: 'gray',
-      validator: (value) => validator.color.includes(value),
     },
 
     radius: {

package/src/components/textarea/Textarea.vue

@@ -1,8 +1,5 @@
 <template>
-  <label
-    class="block mb-1 relative"
-    :class="hideDetails ? 'pb-2' : 'pb-6'"
-  >
+  <label class="inline-block mb-1 relative">
     <p
       v-if="label"
       class="font-medium text-gray-800 dark:text-gray-200 mb-1"
@@ -16,15 +13,12 @@
     ></p>
 
     <textarea
-      ref="input"
+      ref="focusRef"
       class="appearance-none block w-full text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 rounded-form leading-tight
         focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700 resize-none overflow-hidden"
       :class="[
         disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
-        flat ? 'p-0 bg-transparent' : {
-          // shadow
-          'border shadow': true,
-
+        {
           // size
           'py-1': size === 'auto',
           'px-2 py-1 text-xs': size === 'xs',
@@ -33,6 +27,7 @@
           'px-4 py-3 text-lg': size === 'lg',
           'px-6 py-6 text-xl': size === 'xl',
         },
+        flat ? '!p-0 !bg-transparent' : 'border shadow',
         {
           // error
           'border-error-500 focus:border-error-500 dark:focus:border-error-500': errorInternal,
@@ -40,14 +35,18 @@
         inputClass,
       ]"
       :disabled="disabled"
+      :max="max"
       :maxlength="maxlength"
+      :min="min"
+      :dir="dir"
+      :minlength="minlength"
       :name="name"
       :placeholder="placeholder"
       :readonly="readonly"
-      :value="value"
-
-      v-on="listeners"
+      :value="modelValue"
+      v-on="inputListeners"
       @keydown="onKeyDown"
+      @input="onInput"
     ></textarea>
 
     <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
@@ -55,51 +54,47 @@
 </template>
 
 <script>
+import { withProps, withValidator, withEmits, useInputtable } from '../../composables/inputtable'
+
 export default {
   name: 'XTextarea',
 
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean,
-    },
+  validator: withValidator(),
 
-    validateOnInput: {
-      type: Boolean,
-      default: true,
-    },
-
-    hideDetails: {
-      type: Boolean,
-      default: false,
-    },
+  props: {
+    ...withProps(),
 
     label: {
       type: String,
       default: '',
     },
 
-    maxlength: {
+    dir: {
+      type: String,
+      default: 'ltr',
+    },
+
+    max: {
       type: Number,
       default: null,
     },
 
-    name: {
-      type: String,
+    maxlength: {
+      type: Number,
       default: null,
     },
 
-    placeholder: {
-      type: String,
+    min: {
+      type: Number,
       default: null,
     },
 
-    readonly: {
-      type: Boolean,
+    minlength: {
+      type: Number,
       default: null,
     },
 
-    size: {
+    placeholder: {
       type: String,
       default: null,
     },
@@ -114,63 +109,22 @@ export default {
       default: false,
     },
 
-    flat: {
-      type: Boolean,
-      default: false,
-    },
-
     inputClass: {
       type: String,
       default: '',
     },
-
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-
-    error: {
-      type: String,
-      default: '',
-    },
-
-    rules: {
-      type: Array,
-      default: () => [],
-    },
   },
 
-  data() {
+  emits: withEmits(),
+
+  setup(props, { attrs, emit }) {
     return {
-      isFirstValidation: true,
-      currentType: this.type,
-      errorInternal: this.error,
+      ...useInputtable(props, { attrs, emit }),
     }
   },
 
-  computed: {
-    listeners() {
-      return {
-        // Add listeners from parent
-        ...this.$attrs,
-        // Ensure that the component works with v-model
-        blur: (event) => this.$emit('blur', event),
-        focus: (event) => this.$emit('focus', event),
-        input: (event) => {
-          if (this.validateOnInput && !this.isFirstValidation) this.validate(event.target.value)
-          this.resize()
-          this.$emit('input', event.target.value)
-        },
-        change: (event) => this.$emit('change', event),
-      }
-    },
-  },
-
   watch: {
-    error(val) {
-      this.errorInternal = val
-    },
-    value() {
+    modelValue() {
       setTimeout(this.resize)
     },
     size() {
@@ -188,6 +142,9 @@ export default {
   },
 
   methods: {
+    onInput() {
+      this.resize()
+    },
     onKeyDown(e) {
       if (this.preventEnter && e.keyCode === 13) {
         e.preventDefault()
@@ -198,58 +155,11 @@ export default {
     },
     resize() {
       if (this.adjustToText) {
-        const { input } = this.$refs
-
-        input.style.height = '1px'
-        input.style.height = (2 + input.scrollHeight) + 'px'
-      }
-    },
-    reset() {
-      this.errorInternal = ''
-      this.isFirstValidation = true
-      this.$emit('input', '')
-    },
-    focus() {
-      this.$refs.input.focus()
-    },
-    validate(val) {
-      val = val || this.value
-
-      this.isFirstValidation = false
-
-      for (let i = 0; i < this.rules.length; i++) {
-        const item = this.rules[i]
+        const { focusRef } = this.$refs
 
-        let isValid = true
-
-        // Direct Function
-        if (typeof item === 'function') {
-          const rule = item
-
-          isValid = rule(val)
-        } else if (Array.isArray(item) && item.length === 2) {
-          // Rule array [function, options]
-          const { 0: rule, 1: options } = item
-
-          isValid = rule(val, options)
-        } else {
-          // Rule object { fn, options }
-          const rule = item.fn
-          const { options } = item
-
-          isValid = rule(val, options)
-        }
-
-        if (isValid !== true) {
-          this.errorInternal = isValid
-
-          return false
-        }
+        focusRef.style.height = '1px'
+        focusRef.style.height = (2 + focusRef.scrollHeight) + 'px'
       }
-
-      this.errorInternal = ''
-
-      return true
     },
   },
 }

package/src/components/toggle/Toggle.vue

@@ -1,129 +1,126 @@
 <template>
   <label
-    :class="[
-      !disabled ? 'cursor-pointer' : 'cursor-not-allowed',
-      label ? 'flex items-center' : 'inline-block',
-    ]"
+    class="inline-block mb-1 relative pb-2"
+    :class="[!disabled ? 'cursor-pointer' : 'cursor-not-allowed']"
   >
-    <div
-      class="rounded-full transition-colors duration-300"
-      :class="[
-        {
-          // shadow
-          'border shadow': !flat,
-
-          'w-8': size === 'sm' || size === 'xs',
-          'w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
-          'w-12': size === 'lg',
-          'w-14': size === 'xl',
-          'bg-gray-300 dark:bg-gray-600': disabled && !checked,
-          'bg-gray-400 dark:bg-gray-400': disabled && checked,
-          'bg-gray-200 dark:bg-gray-600': !disabled && !checked,
-          'bg-primary-200  border-primary-200': !disabled && checked,
-        }
-      ]"
-    >
-      <input
-        :id="id"
-        v-model="checked"
-        :aria-checked="checked ? 'true' : 'false'"
-        :aria-disabled="disabled ? 'true' : null"
-        :disabled="disabled"
-        :name="name"
-        :required="required"
-        type="checkbox"
-        class="hidden"
-      />
-
+    <div class="flex items-center">
       <div
-        class="rounded-full shadow transform transition duration-300"
+        class="rounded-full transition-colors duration-300"
         :class="[
           {
-            'h-4 w-4': size === 'sm' || size === 'xs',
-            'h-5 w-5': !['xs', 'sm', 'lg', 'xl'].includes(size),
-            'h-6 w-6': size === 'lg',
-            'h-7 w-7': size === 'xl',
-            'translate-x-full': checked,
-            'bg-gray-200 dark:bg-gray-200': disabled,
-            'bg-white': !disabled && !checked,
-            'bg-primary-500': !disabled && checked,
-          },
+            // shadow
+            'border shadow': !flat,
+            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && modelValue,
+
+            'w-8': size === 'sm' || size === 'xs',
+            'w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
+            'w-12': size === 'lg',
+            'w-14': size === 'xl',
+            'bg-gray-300 dark:bg-gray-600': disabled && !checked,
+            'bg-gray-400 dark:bg-gray-400': disabled && checked,
+            'bg-gray-200 dark:bg-gray-600': !disabled && !checked,
+            [`bg-${color}-200  border-${color}-200`]: !disabled && checked,
+          }
         ]"
-      ></div>
+      >
+        <input
+          :id="id"
+          v-model="checked"
+          :aria-checked="checked ? 'true' : 'false'"
+          :aria-disabled="disabled ? 'true' : null"
+          type="checkbox"
+          class="hidden"
+          :disabled="disabled || loading"
+          :name="name"
+          :required="required"
+          :value="modelValue"
+        />
+
+        <x-spinner v-if="loading" :size="size" :class="{'translate-x-full': checked}" />
+        <div
+          v-else
+          class="rounded-full shadow transform transition duration-300 flex-shrink-0"
+          :class="[
+            {
+              'h-4 w-4': size === 'sm' || size === 'xs',
+              'h-5 w-5': !['xs', 'sm', 'lg', 'xl'].includes(size),
+              'h-6 w-6': size === 'lg',
+              'h-7 w-7': size === 'xl',
+              'translate-x-full': checked,
+              'bg-gray-200 dark:bg-gray-200': disabled,
+              'bg-white': !disabled && !checked,
+              [`bg-${color}-500`]: !disabled && checked,
+            },
+          ]"
+        ></div>
+      </div>
+      <span
+        v-if="label"
+        class="pl-2 font-medium text-gray-800 dark:text-gray-200"
+        :class="{
+          'text-xs': size === 'xs',
+          'text-sm': size === 'sm',
+          'text-lg': size === 'lg',
+          'text-xl': size === 'xl',
+        }"
+        v-text="label"
+      >
+      </span>
     </div>
-    <span
-      v-if="label"
-      class="pl-2 font-medium text-gray-800 dark:text-gray-200"
-      :class="{
-        'text-xs': size === 'xs',
-        'text-sm': size === 'sm',
-        'text-lg': size === 'lg',
-        'text-xl': size === 'xl',
-      }"
-      v-text="label"
-    >
-    </span>
+    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
   </label>
 </template>
 
 <script>
+import { withProps, withValidator, withEmits, useInputtable } from '../../composables/inputtable'
+import XSpinner from '../spinner/Spinner.vue'
+
 export default {
   name: 'XToggle',
 
-  model: {
-    prop: 'option',
-    event: 'change',
+  components: {
+    XSpinner,
+  },
+
+  validator: {
+    ...withValidator(),
   },
 
   props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    ...withProps(),
 
     id: {
       type: String,
       default: null,
     },
 
-    option: {
-      type: Boolean,
-      default: false,
-    },
-
-    name: {
-      type: String,
-      default: null,
-    },
-
     label: {
       type: String,
       default: null,
     },
 
-    required: {
+    glow: {
       type: Boolean,
       default: false,
     },
+  },
 
-    flat: {
-      type: Boolean,
-      default: false,
-    },
+  emits: withEmits(false),
 
-    size: {
-      type: String,
-      default: null,
-    },
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit, useListeners: false }),
+    }
   },
 
   computed: {
     checked: {
       get() {
-        return this.option
+        return this.modelValue
       },
+
       set(val) {
-        this.$emit('change', val)
+        this.$emit('update:modelValue', val)
       },
     },
   },

package/src/composables/common.js

@@ -0,0 +1,21 @@
+const validator = {
+  size: ['auto', 'xs', 'sm', 'md', 'lg', 'xl'],
+}
+
+export const withProps = () => ({
+  size: {
+    type: String,
+    default: null,
+    validator: (value) => validator.size.includes(value),
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+export const withValidator = () => validator