@indielayer/ui 0.1.1 → 0.2.0

package/src/components/radio/Radio.vue

@@ -1,53 +1,58 @@
 <template>
   <label
-    class="inline-block cursor-pointer focus:outline-none"
+    ref="focusRef"
+    class="inline-block mb-1 relative cursor-pointer focus:outline-none"
     :class="{
-      'rounded border border-gray-300 dark:border-gray-700 p-2 hover:border-primary-500 dark:hover:border-primary-500': bordered,
-      'transition-colors duration-150 ease-in-out': bordered,
-      'border-primary-500 dark:border-primary-500': checked && !disabled,
+      ['rounded border p-2 hover:border-gray-500 dark:hover:border-gray-500 transition-colors duration-150 ease-in-out']: bordered,
+      [`border-gray-300 dark:border-gray-700`]: bordered && !selected,
+      [`border-${color}-500 dark:border-${color}-500`]: bordered && selected && !disabled,
     }"
-    :aria-checked="checked ? 'true' : 'false'"
+    :aria-checked="selected ? 'true' : 'false'"
     :aria-disabled="disabled ? 'true' : null"
     :tabindex="0"
+    @keypress.prevent.stop.enter.space="$emit('update:modelValue', value)"
   >
     <div
       class="flex items-center"
       :class="{ 'cursor-not-allowed': disabled }"
     >
       <input
-        ref="input"
         v-model="selected"
         type="radio"
         class="invisible absolute"
-        :disabled="disabled"
+        :disabled="disabled || loading"
         :name="name"
         :required="required"
-        :value="value"
+        :value="modelValue"
       />
       <div
-        class="border rounded-full flex justify-center items-center flex-none"
+        class="rounded-full flex justify-center items-center flex-shrink-0"
         :class="[
           {
             // shadow
-            'shadow': !flat,
+            'shadow': !flat && !loading,
+            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && selected,
 
             'h-4 w-4': size === 'sm' || size === 'xs',
             'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
             'h-6 w-6': size === 'xl',
-
-            'hover:border-primary-500': !disabled,
-            'bg-primary-500 border-primary-500': checked && !disabled,
-            'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700': !checked && !disabled,
-            // disabled
-            'bg-gray-500 border-gray-600 dark:border-gray-400': checked && disabled,
-            'bg-gray-200 border-gray-300 dark:border-gray-700': !checked && disabled,
+          },
+          disabled ? {
+            'bg-gray-500 border-gray-600 dark:border-gray-400': selected,
+            'bg-gray-200 border-gray-300 dark:border-gray-700': !selected,
+          } :
+          {
+            [`bg-${color}-500 border-${color}-500`]: selected && !loading,
+            'border bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700': !selected && !loading,
           }
         ]"
       >
+        <x-spinner v-if="loading" :size="size" class="absolute" />
         <svg
-          class="fill-current text-primary-100"
+          v-else
+          class="fill-current text-gray-100"
           :class="{
-            'opacity-0': !checked,
+            'opacity-0': !selected,
             'h-2 w-2': size === 'sm' || size === 'xs',
             'h-3 w-3': !['xs', 'sm', 'xl'].includes(size),
             'h-4 w-4': size === 'xl',
@@ -82,80 +87,65 @@
     >
       <slot></slot>
     </div>
+    <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: 'XRadio',
+  components: {
+    XSpinner,
+  },
 
-  model: {
-    prop: 'options',
-    event: 'change',
+  validator: {
+    ...withValidator(),
   },
 
   props: {
+    ...withProps(),
     bordered: {
       type: Boolean,
       default: false,
     },
 
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    options: {
+    value: {
       type: [String, Number, Boolean, Function, Object, Array],
       default: null,
     },
 
-    name: {
-      type: String,
-      default: null,
-    },
-
-    size: {
-      type: String,
-      default: null,
-    },
-
     label: {
       type: String,
       default: null,
     },
 
-    required: {
+    glow: {
       type: Boolean,
       default: false,
     },
+  },
 
-    value: {
-      type: [String, Number, Boolean, Function, Object, Array],
-      default: null,
-    },
+  emits: withEmits(false),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit, useListeners: false }),
+    }
   },
 
   computed: {
-    checked() {
-      return this.options === this.value
-    },
-
     selected: {
       get() {
-        return this.options
+        return this.value === this.modelValue
       },
 
-      set(val) {
-        this.$emit('change', val)
+      set() {
+        this.$emit('update:modelValue', this.value)
       },
     },
   },
-
-  methods: {
-    focus() {
-      this.$refs.input.focus()
-    },
-  },
 }
 </script>

package/src/components/select/Select.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 pb-2">
     <p
       v-if="label"
       class="font-medium text-gray-800 dark:text-gray-200 mb-1"
@@ -17,7 +14,8 @@
 
     <div class="relative">
       <select
-        ref="input"
+        ref="focusRef"
+        v-model="selected"
         class="block appearance-none w-full border border-gray-300 dark:border-gray-700 pr-8 rounded-form leading-tight
           focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out"
         :class="[
@@ -26,7 +24,7 @@
             : 'bg-white dark:bg-gray-900',
           {
             // shadow
-            'border shadow': !flat,
+            'shadow': !flat,
 
             // size
             'py-1': size === 'auto',
@@ -37,18 +35,17 @@
             'px-6 py-6 text-xl': size === 'xl',
           },
           {
-            'text-gray-700 dark:text-gray-200': value === '' || value === null,
+            'text-gray-400 dark:text-gray-500': modelValue === '' || modelValue === null,
 
             // error
             'border-error-500 focus:border-error-500 dark:focus:border-error-500': errorInternal,
           },
         ]"
-        :disabled="disabled"
+        :disabled="disabled || loading"
         :name="name"
         :readonly="readonly"
-        :value="value"
-
-        v-on="listeners"
+        :value="modelValue"
+        v-on="inputListeners"
       >
         <option
           v-if="placeholder"
@@ -57,13 +54,30 @@
         >
           {{ placeholder }}
         </option>
+        <option
+          v-for="(option, index) in options"
+          :key="index"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+        </option>
         <slot></slot>
       </select>
 
       <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+        <x-spinner v-if="loading" :size="size" />
         <svg
-          class="h-4 w-4 stroke-2"
-          :class="[disabled ? 'text-gray-600 dark:text-gray-400': 'text-gray-700 dark:text-gray-300']"
+          v-else
+          class="stroke-2"
+          :class="[
+            disabled ? 'text-gray-600 dark:text-gray-400': 'text-gray-700 dark:text-gray-300',
+            {
+              'h-3 w-3': size === 'sm' || size === 'xs',
+              'h-4 w-4': !['xs', 'sm', 'xl'].includes(size),
+              'h-5 w-5': size === 'xl',
+            }
+          ]"
           viewBox="0 0 24 24"
           stroke="currentColor"
           stroke-linejoin="round"
@@ -81,149 +95,60 @@
 </template>
 
 <script>
+import { withProps, withValidator, withEmits, useInputtable } from '../../composables/inputtable'
+import XSpinner from '../spinner/Spinner.vue'
+
 export default {
   name: 'XSelect',
+  components: {
+    XSpinner,
+  },
 
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean,
-    },
-
-    name: {
-      type: String,
-      default: null,
-    },
-
-    validateOnInput: {
-      type: Boolean,
-      default: true,
-    },
+  validator: {
+    ...withValidator(),
+  },
 
-    hideDetails: {
-      type: Boolean,
-      default: false,
-    },
+  props: {
+    ...withProps(),
 
     placeholder: {
       type: String,
       default: null,
     },
 
-    readonly: {
-      type: Boolean,
-      default: null,
-    },
-
     flat: {
       type: Boolean,
       default: false,
     },
 
-    size: {
-      type: String,
-      default: null,
-    },
-
     label: {
       type: String,
       default: null,
     },
 
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-
-    error: {
-      type: String,
-      default: '',
-    },
-
-    rules: {
+    options: {
       type: Array,
-      default: () => [],
+      default: null,
     },
   },
 
-  data() {
+  emits: withEmits(false),
+
+  setup(props, { attrs, emit }) {
     return {
-      isFirstValidation: true,
-      errorInternal: this.error,
+      ...useInputtable(props, { attrs, emit, useListeners: false }),
     }
   },
 
   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.$emit('input', event.target.value)
-          this.$emit('select', event.target.value)
-        },
-      }
-    },
-  },
-
-  watch: {
-    error(val) {
-      this.errorInternal = val
-    },
-  },
-
-  methods: {
-    reset() {
-      this.errorInternal = ''
-      this.isFirstValidation = true
-      this.$emit('input', '')
-      this.$emit('select', '')
-    },
-    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]
-
-        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
-        }
-      }
-
-      this.errorInternal = ''
-
-      return true
+    selected: {
+      get() {
+        return this.modelValue
+      },
+
+      set(val) {
+        this.$emit('update:modelValue', val)
+      },
     },
   },
 }

package/src/components/skeleton/Skeleton.vue

@@ -1,11 +1,7 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
-    class="animate-pulse bg-gray-300 dark:bg-gray-600"
-    :class="[
-      $props.rounded ? 'rounded-full' : 'rounded-sm',
-    ]"
+    :is="tag"
+    class="animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md"
   >
     &#8203;
   </component>
@@ -16,11 +12,6 @@ export default {
   name: 'XSkeleton',
 
   props: {
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-
     tag: {
       type: String,
       default: 'div',

package/src/components/spinner/Spinner.vue

@@ -2,10 +2,10 @@
   <svg
     :class="[
       {
-        'h-3 w-3': $props.size === 'xs',
-        'h-4 w-4': $props.size === 'sm',
-        'h-5 w-5': !['xs', 'sm', 'xl'].includes($props.size),
-        'h-6 w-6': $props.size === 'xl',
+        'h-3 w-3': size === 'xs',
+        'h-4 w-4': size === 'sm',
+        'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
+        'h-6 w-6': size === 'xl',
       },
 
     ]"

package/src/components/status/StatusDot.vue

@@ -1,63 +1,35 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
-    class="inline-block relative h-3 w-3"
+    :is="tag"
+    class="inline-block relative"
   >
+    <slot></slot>
     <div
-      v-if="$props.animate"
-      class="animate-ping absolute h-full w-full rounded-full opacity-75"
-      :class="[
-        {
-          // status
-          'bg-primary-400': $props.status === 'primary',
-          'bg-error-400': $props.status === 'error',
-          'bg-success-400': $props.status === 'success',
-          'bg-warning-400': $props.status === 'warning',
-        },
-      ]"
-    ></div>
-
+      v-if="animate"
+      class="animate-ping opacity-75 absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10"
+      :class="[`bg-${color}-500`]"
+    >
+    </div>
     <div
-      class="absolute rounded-full h-full w-full"
-      :class="[
-        {
-          // status
-          'bg-primary-500': $props.status === 'primary',
-          'bg-error-500': $props.status === 'error',
-          'bg-success-500': $props.status === 'success',
-          'bg-warning-500': $props.status === 'warning',
-        },
-      ]"
+      class="absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10"
+      :class="[`bg-${color}-500`]"
     ></div>
   </component>
 </template>
 
 <script>
-const validator = {
-  status: [
-    'primary',
-    'error',
-    'success',
-    'warning',
-  ],
-}
-
 export default {
   name: 'XStatusDot',
 
-  validator,
-
   props: {
     animate: {
       type: Boolean,
       default: false,
     },
 
-    status: {
+    color: {
       type: String,
       default: 'primary',
-      validator: (value) => validator.status.includes(value),
     },
 
     tag: {

package/src/components/table/TableHeader.vue

@@ -14,7 +14,6 @@
         'text-justify': textAlign === 'justify',
       },
     ]"
-    v-bind="$attrs"
   >
     <div
       v-if="sortable"

package/src/components/table/TableRow.vue

@@ -13,7 +13,6 @@
         'align-top': verticalAlign === 'top',
       },
     ]"
-    v-bind="$attrs"
   >
     <slot></slot>
   </tr>

package/src/components/tabs/Tab.vue

@@ -1,26 +1,27 @@
 <template>
   <component
-    :is="$props.to ? 'router-link' : $props.tag"
-    v-bind="$attrs"
-    :to="$props.to"
+    :is="to ? 'router-link' : tag"
+    :to="to"
     class="pb-2 transition-colors duration-150 ease-in-out"
     :class="[
       {
-        'border-b-2 border-primary-500 text-primary-500': $props.selected,
-        'hover:text-primary-500': !$props.disabled,
-        'cursor-pointer': !$props.disabled,
-        'cursor-not-allowed': $props.disabled,
-        'cursor-not-allowed text-gray-500': $props.disabled && !$props.selected,
+        [`border-b-2 border-${color}-500 text-${color}-500`]: selected,
+        'cursor-pointer': !disabled,
+        'cursor-not-allowed': disabled,
+        'cursor-not-allowed text-gray-500': disabled && !selected,
       },
     ]"
-    :aria-disabled="$props.disabled ? 'true' : null"
-    :aria-selected="$props.selected ? 'true' : 'false'"
+    :aria-disabled="disabled ? 'true' : null"
+    :aria-selected="selected ? 'true' : 'false'"
+    @click="onClickTab"
   >
     <slot></slot>
   </component>
 </template>
 
 <script>
+import { inject, reactive, computed, toRefs } from 'vue'
+
 export default {
   name: 'XTab',
 
@@ -30,9 +31,14 @@ export default {
       default: false,
     },
 
-    selected: {
-      type: Boolean,
-      default: false,
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
     },
 
     tag: {
@@ -45,5 +51,31 @@ export default {
       default: undefined,
     },
   },
+
+  setup(props) {
+    const tabs = inject(
+      'tabs',
+      {
+        state: reactive({
+          active: null,
+        }),
+        activateTab: () => {},
+      },
+    )
+
+    const state = reactive({
+      selected: computed(() => tabs.state.active === props.value),
+    })
+
+    function onClickTab() {
+      tabs.activateTab(props.value)
+    }
+
+    return {
+      ...toRefs(state),
+      tabs,
+      onClickTab,
+    }
+  },
 }
 </script>