@indielayer/ui 0.1.1 → 0.2.0

package/src/components/input/Input.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"
@@ -18,17 +15,17 @@
     <div class="relative">
       <span
         v-if="$slots.icon"
-        class="flex items-center w-5 h-5 text-gray-500 absolute my-auto ml-2 inset-y-0"
+        class="flex items-center w-5 h-5 text-gray-500 absolute my-auto inset-y-0"
         :class="[{
-          'mr-2 left-0': $slots.icon && !iconRight,
-          'ml-2 right-0': $slots.icon && iconRight,
+          'ml-2 left-0': $slots.icon && !iconRight,
+          'mr-2 right-0': $slots.icon && iconRight,
         }]"
       >
         <slot name="icon"></slot>
       </span>
 
       <input
-        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"
         :class="[
@@ -64,8 +61,8 @@
         :placeholder="placeholder"
         :readonly="readonly"
         :type="currentType"
-        :value="value"
-        v-bind="$attrs"
+        :value="modelValue"
+        v-on="inputListeners"
         @change="onChange"
       />
 
@@ -98,30 +95,21 @@
 </template>
 
 <script>
+import { withProps, withValidator, withEmits, useInputtable } from '../../composables/inputtable'
+
 export default {
   name: 'XInput',
 
+  validator: withValidator(),
+
   props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    ...withProps(),
 
     showPasswordToggle: {
       type: Boolean,
       default: true,
     },
 
-    validateOnInput: {
-      type: Boolean,
-      default: true,
-    },
-
-    hideDetails: {
-      type: Boolean,
-      default: false,
-    },
-
     label: {
       type: String,
       default: '',
@@ -157,88 +145,36 @@ export default {
       default: null,
     },
 
-    name: {
-      type: String,
-      default: null,
-    },
-
     placeholder: {
       type: String,
       default: null,
     },
 
-    readonly: {
-      type: Boolean,
-      default: null,
-    },
-
-    size: {
-      type: String,
-      default: null,
-    },
-
     type: {
       type: String,
       default: 'text',
     },
 
-    flat: {
-      type: Boolean,
-      default: false,
-    },
-
     inputClass: {
       type: String,
       default: '',
     },
+  },
 
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-
-    error: {
-      type: String,
-      default: '',
-    },
+  emits: withEmits(),
 
-    rules: {
-      type: Array,
-      default: () => [],
-    },
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit }),
+    }
   },
 
   data() {
     return {
-      isFirstValidation: true,
       currentType: this.type,
-      errorInternal: this.error,
     }
   },
 
-  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)
-        },
-        change: (event) => this.$emit('change', event),
-      }
-    },
-  },
-
-  watch: {
-    error(val) {
-      this.errorInternal = val
-    },
-  },
-
   methods: {
     onChange(e) {
       if (this.type === 'number') {
@@ -253,54 +189,6 @@ export default {
     },
     togglePasswordVisibility() {
       this.currentType = this.currentType === 'password' ? 'text' : 'password'
-      // this.$refs.input.setAttribute('type', this.currentType)
-    },
-    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]
-
-        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
     },
   },
 }

package/src/components/link/Link.vue

@@ -1,24 +1,23 @@
 <template>
   <component
-    :is="$props.to ? 'router-link' : $props.tag"
-    v-bind="$attrs"
-    :to="$props.to"
+    :is="to ? 'router-link' : tag"
+    :to="to"
     class="transition-colors duration-150 ease-in-out cursor-pointer"
     :class="[
       {
         // color
-        'hover:text-gray-600 dark:hover:text-gray-300': $props.color === 'gray',
-        'text-primary-500 hover:text-primary-700': $props.color === 'primary',
-        'text-error-500 hover:text-error-700': $props.color === 'error',
-        'text-warning-500 hover:text-warning-700': $props.color === 'warning',
-        'text-success-500 hover:text-success-700': $props.color === 'success',
+        'hover:text-gray-600 dark:hover:text-gray-300': color === 'gray',
+        'text-primary-500 hover:text-primary-600': color === 'primary',
+        'text-error-500 hover:text-error-600': color === 'error',
+        'text-warning-500 hover:text-warning-600': color === 'warning',
+        'text-success-500 hover:text-success-600': color === 'success',
         // underline
-        'underline': $props.underline
+        'underline': underline
       },
     ]"
   >
     <span
-      v-if="$props.external"
+      v-if="external"
       class="inline-flex items-center"
     >
       <slot></slot>

package/src/components/modal/Modal.vue

@@ -35,7 +35,7 @@
         aria-labelledby="modal-headline"
       >
         <slot></slot>
-        <div v-if="showClose" class="absolute rounded-full bg-white -top-4 -right-4 w-10 h-10 shadow-md flex items-center justify-center cursor-pointer" @click="close()">
+        <div v-if="showClose" class="absolute rounded-md bg-white -top-4 -right-2 w-8 h-8 shadow-md flex items-center justify-center cursor-pointer" @click="close()">
           <svg
             width="24"
             height="24"

package/src/components/note/Note.vue

@@ -1,23 +1,8 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
+    :is="tag"
     class="flex rounded-md p-2"
-    :class="[
-      {
-        'border': !$props.filled,
-        'text-blue-500 border-blue-500': !$props.filled && $props.variant === 'info',
-        'text-success-500 border-success-500': !$props.filled && $props.variant === 'success',
-        'text-error-500 border-error-500': !$props.filled && $props.variant === 'error',
-        'text-warning-500 border-warning-500': !$props.filled && $props.variant === 'warning',
-        // filled
-        'bg-blue-500 text-blue-50': $props.filled && $props.variant === 'info',
-        'bg-success-500 text-success-50': $props.filled && $props.variant === 'success',
-        'bg-error-500 text-error-50': $props.filled && $props.variant === 'error',
-        'bg-warning-500 text-warning-50': $props.filled && $props.variant === 'warning',
-      },
-
-    ]"
+    :class="filled ? [`bg-${color}-500 text-${color}-50`] : [`border text-${color}-500 border-${color}-500`]"
   >
     <svg
       v-if="!$slots.icon"
@@ -31,23 +16,23 @@
       role="presentation"
       class="flex-none stroke-2 w-4 h-4 mt-1 mr-2"
     >
-      <template v-if="$props.variant === 'info'">
+      <template v-if="color === 'primary'">
         <circle cx="12" cy="12" r="10"/>
         <line x1="12" y1="8" x2="12" y2="12"/>
         <line x1="12" y1="16" x2="12" y2="16"/>
       </template>
 
-      <template v-if="$props.variant === 'success'">
+      <template v-if="color === 'success'">
         <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
         <path d="M16 10L10.5 15L8 12.7273" />
       </template>
 
-      <template v-if="$props.variant === 'error'">
+      <template v-if="color === 'error'">
         <path d="M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86L7.86 2Z" />
         <path d="M9 9L15 15" />
         <path d="M15 9L9 15" />
       </template>
-      <template v-if="$props.variant === 'warning'">
+      <template v-if="color === 'warning'">
         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
         <path d="M12 9v2m0 4v.01"/>
         <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"/>
@@ -66,20 +51,9 @@
 </template>
 
 <script>
-const validator = {
-  variant: [
-    'info',
-    'error',
-    'success',
-    'warning',
-  ],
-}
-
 export default {
   name: 'XNote',
 
-  validator,
-
   props: {
     filled: {
       type: Boolean,
@@ -91,10 +65,9 @@ export default {
       default: 'div',
     },
 
-    variant: {
+    color: {
       type: String,
-      default: 'info',
-      validator: (value) => validator.variant.includes(value),
+      default: 'primary',
     },
   },
 }

package/src/components/pagination/Pagination.vue

@@ -4,11 +4,11 @@
       :value="1"
       :links="links"
       :size="size"
-      :selected="value === 1"
+      :selected="modelValue === 1"
       class="mr-1"
-      @input="(value) => $emit('input', value)"
+      @input="(value) => $emit('update:modelValue', value)"
     />
-    <span v-if="totalPages > 3 && value > 3">...</span>
+    <span v-if="totalPages > 3 && modelValue > 3">...</span>
     <x-pagination-item
       v-for="i in pages"
       :key="i"
@@ -16,18 +16,18 @@
       :value="i"
       :links="links"
       :size="size"
-      :selected="value === i"
-      @input="(value) => $emit('input', value)"
+      :selected="modelValue === i"
+      @input="(value) => $emit('update:modelValue', value)"
     />
-    <span v-if="totalPages > 3 && value < totalPages - 2">...</span>
+    <span v-if="totalPages > 3 && modelValue < totalPages - 2">...</span>
     <x-pagination-item
       v-if="totalPages > 1"
       :value="totalPages"
       :links="links"
       :size="size"
       class="ml-1"
-      :selected="value === totalPages"
-      @input="(value) => $emit('input', value)"
+      :selected="modelValue === totalPages"
+      @input="(value) => $emit('update:modelValue', value)"
     />
   </ul>
 </template>
@@ -44,7 +44,7 @@ export default {
       type: Number,
       default: 1,
     },
-    value: {
+    modelValue: {
       type: Number,
       default: 1,
     },
@@ -61,10 +61,10 @@ export default {
     pages() {
       if (this.totalPages === 3) return [2]
       if (this.totalPages > 2) {
-        if (this.value === 1 || this.value === 2) return [2, 3]
-        if (this.value === this.totalPages || this.value === this.totalPages - 1) return [this.totalPages - 2, this.totalPages - 1]
+        if (this.modelValue === 1 || this.modelValue === 2) return [2, 3]
+        if (this.modelValue === this.totalPages || this.modelValue === this.totalPages - 1) return [this.totalPages - 2, this.totalPages - 1]
 
-        return [this.value - 1, this.value, this.value + 1]
+        return [this.modelValue - 1, this.modelValue, this.modelValue + 1]
       }
 
       return []

package/src/components/popover/Popover.vue

@@ -21,7 +21,7 @@
     ></div>
 
     <div
-      class="absolute w-auto bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-50 xpopover-content whitespace-nowrap max-w-xs"
+      class="absolute w-fit bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-50 xpopover-content whitespace-nowrap max-w-xs"
       :class="[
         {
           // align-left

package/src/components/popover/PopoverContainer.vue

@@ -1,7 +1,6 @@
 <template>
   <component
     :is="tag"
-    v-bind="$attrs"
     class="inline-block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border-t border border-gray-200 dark:border-gray-800"
   >
     <slot></slot>

package/src/components/popover/PopoverItem.vue

@@ -1,15 +1,14 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
+    :is="tag"
     class="px-2 py-1 block rounded transition-colors duration-100 ease-in-out whitespace-nowrap"
     :class="[
       {
         'flex items-center': $slots.prefix || $slots.suffix,
-        'hover:bg-gray-100 dark:hover:bg-gray-800': $props.variant === 'base' && !$props.disabled,
-        'hover:text-error-500 hover:bg-error-50': $props.variant === 'error' && !$props.disabled,
-        'opacity-70': $props.disabled,
-        'cursor-pointer': !$props.disabled,
+        'hover:bg-gray-100 dark:hover:bg-gray-800': variant === 'base' && !disabled,
+        'hover:text-error-500 hover:bg-error-50': variant === 'error' && !disabled,
+        'opacity-70': disabled,
+        'cursor-pointer': !disabled,
       },
 
     ]"

package/src/components/progress/Progress.vue

@@ -6,12 +6,7 @@
     >
       <div
         class="h-2 rounded-lg transition-all duration-200"
-        :class="{
-          'bg-primary-500': color === 'primary',
-          'bg-success-500': color === 'success',
-          'bg-error-500': color === 'error',
-          'bg-warning-500': color === 'warning',
-        }"
+        :class="[`bg-${color}-500`]"
         :style="{
           width: `${percentage}%`,
         }"
@@ -28,7 +23,7 @@
         stroke="currentColor"
         stroke-linejoin="round"
         stroke-linecap="round"
-        stroke-width="8"
+        stroke-width="4"
         fill="none"
         cx="50"
         cy="50"
@@ -36,17 +31,12 @@
       />
       <circle
         class="transition-all duration-200"
-        :class="{
-          'text-primary-500': color === 'primary',
-          'text-success-500': color === 'success',
-          'text-error-500': color === 'error',
-          'text-warning-500': color === 'warning',
-        }"
+        :class="[`text-${color}-500`]"
         :style="{ strokeDasharray: `${circleProgress} 252` }"
         stroke="currentColor"
         stroke-linejoin="round"
         stroke-linecap="round"
-        stroke-width="8"
+        stroke-width="4"
         fill="none"
         cx="50"
         cy="50"
@@ -62,13 +52,7 @@
         v-for="index in scoreLength"
         :key="index"
         class="rounded-sm h-2 w-3 inline-block"
-        :class="{
-          'bg-gray-200 dark:bg-gray-700': !isScoreActive(index),
-          'bg-primary-500': isScoreActive(index) && color === 'primary',
-          'bg-success-500': isScoreActive(index) && color === 'success',
-          'bg-error-500': isScoreActive(index) && color === 'error',
-          'bg-warning-500': isScoreActive(index) && color === 'warning',
-        }"
+        :class="isScoreActive(index) ? [`bg-${color}-500`]: ['bg-gray-200 dark:bg-gray-700']"
       ></div>
     </div>
   </component>
@@ -76,12 +60,6 @@
 
 <script>
 const validator = {
-  color: [
-    'primary',
-    'error',
-    'success',
-    'warning',
-  ],
   variant: [
     'bar',
     'circle',
@@ -96,9 +74,8 @@ export default {
 
   props: {
     color: {
-      default: 'primary',
       type: String,
-      validator: (value) => validator.color.includes(value),
+      default: 'primary',
     },
 
     percentage: {
@@ -113,8 +90,8 @@ export default {
     },
 
     tag: {
-      default: 'div',
       type: String,
+      default: 'div',
     },
 
     variant: {