@indielayer/ui 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -45,14 +45,15 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
-    "postcss": "^8.3.8",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.4",
     "rollup": "^2.48.0",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
-    "tailwindcss": "^2.1.2"
+    "tailwindcss": "^3.0.0"
   },
   "browserslist": [
     "> 1%",
@@ -71,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7b8d5ef1f9022fa4e3da29f914a763f785dfbda8"
+  "gitHead": "6d9d6573e24610ef4d5362b6cea0db9aaa94ea09"
 }

package/src/components/avatar/Avatar.vue

@@ -1,45 +1,34 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
+    :is="tag"
     class="inline-flex items-center justify-center overflow-hidden"
     :class="[
       // color
-      !$props.src ? {
-        'bg-blue-500 text-blue-50': $props.color === 'blue',
-        'bg-gray-500 text-gray-50': $props.color === 'gray',
-        'bg-green-500 text-green-50': $props.color === 'green',
-        'bg-indigo-500 text-indigo-50': $props.color === 'indigo',
-        'bg-pink-500 text-pink-50': $props.color === 'pink',
-        'bg-primary-500 text-primary-50': $props.color === 'primary',
-        'bg-purple-500 text-purple-50': $props.color === 'purple',
-        'bg-red-500 text-red-50': $props.color === 'red',
-        'bg-yellow-500 text-yellow-50': $props.color === 'yellow',
-      } : {},
+      { [`bg-${color}-500 text-${color}-50`]: !source && !outlined },
       {
+        // border
+        'border border-gray-400 dark:border-gray-500': !source && outlined,
+
         // size
-        'h-6 w-6 text-xs': $props.size === 'xs',
-        'h-7 w-7 text-sm': $props.size === 'sm',
-        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes($props.size),
-        'h-12 w-12 text-lg': $props.size === 'lg',
-        'h-20 w-20 text-2xl': $props.size === 'xl',
-        'h-36 w-36 text-2xl': $props.size === '2xl',
-
-        // variant
-        'rounded-full': $props.variant === 'rounded',
-        'rounded-md': $props.variant === 'squared',
+        'h-6 w-6 text-xs': size === 'xs',
+        'h-7 w-7 text-sm': size === 'sm',
+        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
+        'h-12 w-12 text-lg': size === 'lg',
+        'h-20 w-20 text-2xl': size === 'xl',
+        'h-36 w-36 text-2xl': size === '2xl',
       },
+      squared ? 'rounded-md' : 'rounded-full'
     ]"
   >
     <span
-      v-if="!$props.src && $props.name"
+      v-if="!source && name"
       class="leading-none"
-    >{{ $options.initials($props.name) }}</span>
+    >{{ initials }}</span>
 
     <img
-      v-if="$props.src"
-      :alt="$props.alt"
-      :src="$props.src"
+      v-if="source"
+      :alt="alt"
+      :src="src"
       class="h-full w-full"
     />
   </component>
@@ -47,17 +36,6 @@
 
 <script>
 const validator = {
-  color: [
-    'blue',
-    'gray',
-    'green',
-    'indigo',
-    'pink',
-    'primary',
-    'purple',
-    'red',
-    'yellow',
-  ],
   variant: [
     'rounded',
     'squared',
@@ -69,53 +47,74 @@ export default {
 
   validator,
 
-  initials(name) {
-    if (name) {
-      const initials = name.match(/\b\w/g) || []
-
-      return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
-    }
-
-    return ''
-  },
-
   props: {
     alt: {
-      default: null,
       type: String,
+      default: null,
     },
 
     color: {
-      default: 'primary',
       type: String,
-      validator: (value) => validator.color.includes(value),
+      default: 'primary',
     },
 
     name: {
-      default: null,
       type: String,
+      default: null,
     },
 
     size: {
-      default: null,
       type: String,
+      default: null,
+    },
+
+    outlined: {
+      type: Boolean,
+      default: false,
     },
 
     src: {
-      default: null,
       type: String,
+      default: null,
     },
 
     tag: {
-      default: 'span',
       type: String,
+      default: 'span',
     },
 
-    variant: {
-      default: 'rounded',
-      type: String,
-      validator: (value) => validator.variant.includes(value),
+    squared: {
+      type: Boolean,
+      default: false,
     },
   },
+
+  data() {
+    return {
+      source: null,
+    }
+  },
+
+  computed: {
+    initials() {
+      if (this.name) {
+        const initials = this.name.match(/\b\w/g) || []
+
+        return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
+      }
+
+      return ''
+    },
+  },
+
+  mounted() {
+    if (this.src) {
+      const img = new Image()
+
+      img.onload = () => { this.source = this.src }
+      img.onerror = () => { }
+      img.src = this.src
+    }
+  },
 }
 </script>

package/src/components/button/Button.vue

@@ -1,148 +1,90 @@
 <template>
   <component
-    :is="$props.to ? 'router-link' : $props.tag"
-    :to="$props.to"
-    v-bind="$attrs"
-    class="relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none flex items-center justify-center font-medium"
+    :is="to ? 'router-link' : tag"
+    ref="focusRef"
+    :to="to"
+    class="relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none inline-block items-center justify-center font-medium"
     :class="[
       {
-        // shadow
-        'shadow': !$props.flat,
+        'shadow': !flat && !glow,
+        [`shadow-lg shadow-${color}-500/50`]: !flat && glow,
       },
-      $props.disabled ?
+      disabled ?
         // disabled
         'border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 cursor-not-allowed'
         : {
           // not disabled
-
-          // borders
-          'border border-primary-500 dark:border-primary-700 hover:border-primary-600 dark:hover:border-primary-500':
-            $props.color === 'primary',
-          'border border-secondary-500 dark:border-secondary-700 hover:border-secondary-600 dark:hover:border-secondary-500':
-            $props.color === 'secondary',
-          'border border-success-500 dark:border-success-700 hover:border-success-600 dark:hover:border-success-500':
-            $props.color === 'success',
-          'border border-error-500 dark:border-error-700 hover:border-error-600 dark:hover:border-error-500':
-            $props.color === 'error',
-          'border border-warning-500 dark:border-warning-700 hover:border-warning-600 dark:hover:border-warning-500':
-            $props.color === 'warning',
-          'border border-gray dark:border-gray-900 hover:border-gray-700 dark:hover:border-gray-500':
-            $props.color === 'gray',
+          [`border border-${color}-500 text-${color}-500`]: outlined,
 
           // colors
-          'text-primary-50 bg-primary-500':
-            $props.color === 'primary' && !$props.outlined,
-          'text-secondary-50 bg-secondary-500':
-            $props.color === 'secondary' && !$props.outlined,
-          'text-success-50 bg-success-500':
-            $props.color === 'success' && !$props.outlined,
-          'text-error-50 bg-error-500':
-            $props.color === 'error' && !$props.outlined,
-          'text-warning-50 bg-warning-500':
-            $props.color === 'warning' && !$props.outlined,
-          'text-gray-50 bg-gray-800':
-            $props.color === 'gray' && !$props.outlined,
-
-          'border border-gray-300 dark:border-gray-600': $props.outlined,
+          [`border border-transparent text-${color}-50 bg-${color}-500`]: !outlined,
 
           // colors hovers | actives
-          'hover:bg-primary-600 active:bg-primary-800':
-            $props.color === 'primary' && !$props.loading && !$props.outlined,
-          'hover:bg-secondary-600 active:bg-secondary-800':
-            $props.color === 'secondary' && !$props.loading && !$props.outlined,
-          'hover:bg-success-600 active:bg-success-800':
-            $props.color === 'success' && !$props.loading && !$props.outlined,
-          'hover:bg-error-600 active:bg-error-800':
-            $props.color === 'error' && !$props.loading && !$props.outlined,
-          'hover:bg-warning-600 active:bg-warning-800':
-            $props.color === 'warning' && !$props.loading && !$props.outlined,
-          'hover:bg-gray-700 active:bg-gray-800':
-            $props.color === 'gray' && !$props.loading && !$props.outlined,
-          'hover:bg-gray-100 dark:hover:bg-gray-700 active:bg-gray-200 dark:active:bg-gray-600':
-            $props.color === 'none' && !$props.loading && $props.outlined,
-          'hover:text-gray-500 dark:hover:text-gray-400':
-            $props.color === 'none' && !$props.loading && !$props.outlined,
+          'hover:bg-dark-image active:bg-darker-image active:shadow-none': !loading && !outlined,
+          [`hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:hover:active:bg-gray-600`]: !loading && outlined,
         },
       $slots.default ? {
         // 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-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes($props.size),
-        'px-6 py-3 text-lg': $props.size === 'lg',
-        'px-10 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-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
+        'px-6 py-3 text-lg': size === 'lg',
+        'px-10 py-6 text-xl': size === 'xl',
       } : 'px-3 py-2',
       {
         // icon
-        'inline-flex items-center': $slots.icon || $props.icon,
+        'inline-flex items-center': icon,
 
         // group
-        'rounded-button': $props.group === false,
-        'rounded-l-button': $props.group === 'first',
-        'rounded-r-button': $props.group === 'last',
+        'rounded-button': group === false,
+        'rounded-l-button': group === 'first',
+        'rounded-r-button': group === 'last',
 
-        '!rounded-full': $props.rounded,
+        '!rounded-full': rounded,
 
         // loading
-        'cursor-default': $props.loading,
+        'cursor-default': loading,
 
         // content
-        'flex items-center justify-center': $props.loading,
-        'flex-row-reverse': $props.icon && $props.iconRight
+        'flex items-center justify-center': loading,
+        'flex-row-reverse': icon && iconRight
       },
 
     ]"
 
-    :aria-busy="$props.loading ? 'true' : null"
-    :aria-disabled="$props.tag !== 'button' && $props.disabled ? 'true' : null"
-    :disabled="$props.disabled || $props.loading"
-    :type="$props.tag === 'button' ? $props.type : null"
+    :aria-busy="loading ? 'true' : null"
+    :aria-disabled="tag !== 'button' && disabled ? 'true' : null"
+    :disabled="disabled || loading"
+    :type="tag === 'button' ? type : null"
   >
-    <x-spinner v-if="$props.loading" :size="$props.size" class="absolute" />
+    <x-spinner v-if="loading" :size="size" class="absolute" />
     <span
-      v-if="$props.icon"
+      v-if="icon"
       class="flex"
       :class="[{
-        'mr-2': $slots.default && !$props.iconRight,
-        'ml-2': $slots.default && $props.iconRight,
-        'invisible': $props.loading
+        'mr-2': $slots.default && !iconRight,
+        'ml-2': $slots.default && iconRight,
+        'invisible': loading
       }]"
     >
-      <x-icon :size="$props.size" :icon="$props.icon" />
+      <x-icon :size="size" :icon="icon" />
     </span>
-    <span
-      :class="{
-        'invisible': $props.loading
-      }"
-    >
+    <span :class="{ 'invisible': loading }">
       <slot></slot>
     </span>
   </component>
 </template>
 
 <script>
-const validator = {
-  group: [
-    false,
-    true,
-    '',
-    'first',
-    'last',
-  ],
-  color: [
-    'primary',
-    'secondary',
-    'success',
-    'error',
-    'warning',
-    'gray',
-    'none',
-  ],
-}
-
+import { withProps, withValidator, useInteractive } from '../../composables/interactive'
 import XSpinner from '../spinner/Spinner.vue'
 import XIcon from '../icon/Icon.vue'
 
+const validator = {
+  group: [false, true, '', 'first', 'last'],
+}
+
 export default {
   name: 'XButton',
   components: {
@@ -150,13 +92,13 @@ export default {
     XIcon,
   },
 
-  validator,
+  validator: {
+    ...withValidator(),
+    ...validator,
+  },
 
   props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    ...withProps(),
 
     group: {
       default: false,
@@ -174,21 +116,11 @@ export default {
       default: false,
     },
 
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
     to: {
       type: String,
       default: undefined,
     },
 
-    size: {
-      type: String,
-      default: null,
-    },
-
     tag: {
       type: String,
       default: 'button',
@@ -209,16 +141,16 @@ export default {
       default: false,
     },
 
-    flat: {
+    glow: {
       type: Boolean,
       default: false,
     },
+  },
 
-    color: {
-      type: String,
-      default: 'primary',
-      validator: (value) => validator.color.includes(value),
-    },
+  setup() {
+    return {
+      ...useInteractive(),
+    }
   },
 }
 </script>

package/src/components/card/Card.vue

@@ -1,11 +1,10 @@
 <template>
   <component
-    :is="$props.tag"
-    v-bind="$attrs"
+    :is="tag"
     class="rounded bg-white dark:bg-gray-800"
     :class="[
       {
-        'shadow': !$props.flat,
+        'shadow': !flat,
       },
     ]"
   >

package/src/components/checkbox/Checkbox.vue

@@ -1,44 +1,48 @@
 <template>
-  <label
-    class="block mb-1 relative cursor-pointer"
-    :class="hideDetails ? 'pb-2' : 'pb-6'"
-  >
+  <label class="inline-block mb-1 relative cursor-pointer pb-2">
     <div
+      ref="focusRef"
       class="flex items-center"
       :class="{ 'cursor-not-allowed': disabled }"
+      :tabindex="0"
+      @keypress.prevent.stop.enter.space="toggle"
     >
       <input
-        ref="input"
-        v-model="selected"
+        v-model="checked"
+        :aria-checked="checked ? 'true' : 'false'"
+        :aria-disabled="disabled ? 'true' : null"
         type="checkbox"
         class="invisible absolute"
-        :disabled="disabled"
+        :disabled="disabled || loading"
         :name="name"
         :required="required"
         :value="modelValue"
       />
       <div
-        class="border rounded flex justify-center items-center flex-none"
+        class="rounded flex justify-center items-center flex-shrink-0"
         :class="[
           {
-            // shadow
-            'shadow': !flat,
+            'shadow': !flat && !loading,
+            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && modelValue,
 
             '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': modelValue && !disabled,
-            'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700': !modelValue && !disabled,
-            // disabled
-            'bg-gray-500 border-gray-600 dark:border-gray-400': modelValue && disabled,
-            'bg-gray-200 border-gray-300 dark:border-gray-700': !modelValue && disabled,
+          },
+          disabled ? {
+            'bg-gray-500 border-gray-600 dark:border-gray-400': modelValue,
+            'bg-gray-200 border-gray-300 dark:border-gray-700': !modelValue,
+          } :
+          {
+            [`bg-${color}-500 border-${color}-500`]: modelValue && !loading,
+            'border bg-white dark:bg-gray-900 border-gray-300 hover:border-gray-900 dark:border-gray-700': !modelValue && !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': !modelValue,
             'h-2 w-2': size === 'sm' || size === 'xs',
@@ -50,71 +54,61 @@
           <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
         </svg>
       </div>
-      <span
-        v-if="label"
-        class="font-medium text-gray-800 dark:text-gray-200 pl-2"
+      <div
+        class="inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"
         :class="{
           'text-xs': size === 'xs',
           'text-sm': size === 'sm',
           'text-lg': size === 'lg',
           'text-xl': size === 'xl',
         }"
-        v-text="label"
-      ></span>
+      >
+        <span v-if="label" v-text="label"></span>
+        <slot v-else></slot>
+      </div>
     </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: 'XCheckbox',
+  components: {
+    XSpinner,
+  },
 
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    name: {
-      type: String,
-      default: null,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
+  validator: {
+    ...withValidator(),
+  },
 
-    size: {
-      type: String,
-      default: null,
-    },
+  props: {
+    ...withProps(),
 
     label: {
       type: String,
       default: null,
     },
 
-    flat: {
+    glow: {
       type: Boolean,
       default: false,
     },
+  },
 
-    modelValue: {
-      type: [String, Number, Boolean, Function, Object, Array],
-      default: null,
-    },
+  emits: withEmits(false),
 
-    hideDetails: {
-      type: Boolean,
-      default: false,
-    },
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit, useListeners: false }),
+    }
   },
 
-  emits: ['update:modelValue'],
-
   computed: {
-    selected: {
+    checked: {
       get() {
         return this.modelValue
       },
@@ -126,8 +120,8 @@ export default {
   },
 
   methods: {
-    focus() {
-      this.$refs.input.focus()
+    toggle() {
+      this.$emit('update:modelValue', !this.modelValue)
     },
   },
 }