@indielayer/ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -18,15 +18,15 @@
   ],
   "files": [
     "lib",
-    "types"
+    "src"
   ],
-  "main": "lib/cjs/src",
-  "module": "lib/esm/src",
+  "main": "lib/cjs",
+  "module": "lib/esm",
   "browser": "lib/umd",
   "exports": {
     ".": {
-      "import": "./lib/esm/src/index.js",
-      "require": "./lib/cjs/src/index.js"
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
     },
     "./tailwind.preset": "./lib/tailwind.preset.js",
     "./tailwind.preset.js": "./lib/tailwind.preset.js"
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7cfa31e85d049e4f82cea4b1aeb95faf222dc08a"
+  "gitHead": "7b8d5ef1f9022fa4e3da29f914a763f785dfbda8"
 }

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,121 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    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',
+      } : {},
+      {
+        // 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',
+      },
+    ]"
+  >
+    <span
+      v-if="!$props.src && $props.name"
+      class="leading-none"
+    >{{ $options.initials($props.name) }}</span>
+
+    <img
+      v-if="$props.src"
+      :alt="$props.alt"
+      :src="$props.src"
+      class="h-full w-full"
+    />
+  </component>
+</template>
+
+<script>
+const validator = {
+  color: [
+    'blue',
+    'gray',
+    'green',
+    'indigo',
+    'pink',
+    'primary',
+    'purple',
+    'red',
+    'yellow',
+  ],
+  variant: [
+    'rounded',
+    'squared',
+  ],
+}
+
+export default {
+  name: 'XAvatar',
+
+  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,
+    },
+
+    color: {
+      default: 'primary',
+      type: String,
+      validator: (value) => validator.color.includes(value),
+    },
+
+    name: {
+      default: null,
+      type: String,
+    },
+
+    size: {
+      default: null,
+      type: String,
+    },
+
+    src: {
+      default: null,
+      type: String,
+    },
+
+    tag: {
+      default: 'span',
+      type: String,
+    },
+
+    variant: {
+      default: 'rounded',
+      type: String,
+      validator: (value) => validator.variant.includes(value),
+    },
+  },
+}
+</script>

package/src/components/button/Button.vue

@@ -0,0 +1,224 @@
+<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"
+    :class="[
+      {
+        // shadow
+        'shadow': !$props.flat,
+      },
+      $props.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',
+
+          // 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,
+
+          // 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,
+        },
+      $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',
+      } : 'px-3 py-2',
+      {
+        // icon
+        'inline-flex items-center': $slots.icon || $props.icon,
+
+        // group
+        'rounded-button': $props.group === false,
+        'rounded-l-button': $props.group === 'first',
+        'rounded-r-button': $props.group === 'last',
+
+        '!rounded-full': $props.rounded,
+
+        // loading
+        'cursor-default': $props.loading,
+
+        // content
+        'flex items-center justify-center': $props.loading,
+        'flex-row-reverse': $props.icon && $props.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"
+  >
+    <x-spinner v-if="$props.loading" :size="$props.size" class="absolute" />
+    <span
+      v-if="$props.icon"
+      class="flex"
+      :class="[{
+        'mr-2': $slots.default && !$props.iconRight,
+        'ml-2': $slots.default && $props.iconRight,
+        'invisible': $props.loading
+      }]"
+    >
+      <x-icon :size="$props.size" :icon="$props.icon" />
+    </span>
+    <span
+      :class="{
+        'invisible': $props.loading
+      }"
+    >
+      <slot></slot>
+    </span>
+  </component>
+</template>
+
+<script>
+const validator = {
+  group: [
+    false,
+    true,
+    '',
+    'first',
+    'last',
+  ],
+  color: [
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'gray',
+    'none',
+  ],
+}
+
+import XSpinner from '../spinner/Spinner.vue'
+import XIcon from '../icon/Icon.vue'
+
+export default {
+  name: 'XButton',
+  components: {
+    XSpinner,
+    XIcon,
+  },
+
+  validator,
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    group: {
+      default: false,
+      type: [String, Boolean],
+      validator: (value) => validator.group.includes(value),
+    },
+
+    icon: {
+      type: String,
+      default: null,
+    },
+
+    iconRight: {
+      type: Boolean,
+      default: false,
+    },
+
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
+    to: {
+      type: String,
+      default: undefined,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    tag: {
+      type: String,
+      default: 'button',
+    },
+
+    type: {
+      type: String,
+      default: 'button',
+    },
+
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
+      validator: (value) => validator.color.includes(value),
+    },
+  },
+}
+</script>

package/src/components/card/Card.vue

@@ -0,0 +1,31 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    class="rounded bg-white dark:bg-gray-800"
+    :class="[
+      {
+        'shadow': !$props.flat,
+      },
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XCard',
+  props: {
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+}
+</script>

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,134 @@
+<template>
+  <label
+    class="block mb-1 relative cursor-pointer"
+    :class="hideDetails ? 'pb-2' : 'pb-6'"
+  >
+    <div
+      class="flex items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+    >
+      <input
+        ref="input"
+        v-model="selected"
+        type="checkbox"
+        class="invisible absolute"
+        :disabled="disabled"
+        :name="name"
+        :required="required"
+        :value="modelValue"
+      />
+      <div
+        class="border rounded flex justify-center items-center flex-none"
+        :class="[
+          {
+            // shadow
+            'shadow': !flat,
+
+            '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,
+          }
+        ]"
+      >
+        <svg
+          class="fill-current text-primary-100"
+          :class="{
+            'opacity-0': !modelValue,
+            'h-2 w-2': size === 'sm' || size === 'xs',
+            'h-3 w-3': !['xs', 'sm', 'xl'].includes(size),
+            'h-4 w-4': size === 'xl',
+          }"
+          viewBox="0 0 20 20"
+        >
+          <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"
+        :class="{
+          'text-xs': size === 'xs',
+          'text-sm': size === 'sm',
+          'text-lg': size === 'lg',
+          'text-xl': size === 'xl',
+        }"
+        v-text="label"
+      ></span>
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'XCheckbox',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    modelValue: {
+      type: [String, Number, Boolean, Function, Object, Array],
+      default: null,
+    },
+
+    hideDetails: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue
+      },
+
+      set(val) {
+        this.$emit('update:modelValue', val)
+      },
+    },
+  },
+
+  methods: {
+    focus() {
+      this.$refs.input.focus()
+    },
+  },
+}
+</script>