@indielayer/ui 0.1.0 → 0.1.1

package/src/components/table/Table.vue

@@ -0,0 +1,157 @@
+<template>
+  <table
+    class="w-full relative"
+    :class="[
+      {
+        'overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table': scrollable,
+        'relative': stickyHeader,
+        'table-fixed': fixed,
+      }
+    ]"
+  >
+    <table-head>
+      <table-header
+        v-for="(header, index) in headers"
+        :key="index"
+        :sticky-header="stickyHeader"
+        :text-align="header.align"
+        :sort="getSort(header.value, sort)"
+        :sortable="header.sortable"
+        @click="header.sortable ? sortHeader(header) : null"
+      >
+        {{ header.text }}
+      </table-header>
+    </table-head>
+    <table-body>
+      <table-row v-for="(item, index) in items" :key="index" clickable @click="$emit('click-row', item)">
+        <table-cell
+          v-for="(header, index2) in headers"
+          :key="index2"
+          :text-align="header.align"
+          :dense="dense"
+          :fixed="fixed"
+        >
+          <slot :name="`item-${header.value}`" :item="item">
+            {{ getPath(item, header.value) }}
+          </slot>
+        </table-cell>
+      </table-row>
+    </table-body>
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center z-40 bg-gray-300 rounded opacity-50"
+    >
+      <x-spinner size="lg"/>
+    </div>
+  </table>
+</template>
+
+<script>
+import TableHead from './TableHead.vue'
+import TableHeader from './TableHeader.vue'
+import TableBody from './TableBody.vue'
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+import XSpinner from '../spinner/Spinner.vue'
+
+export default {
+  name: 'XTable',
+
+  components: {
+    TableHead,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableCell,
+    XSpinner,
+  },
+
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
+    headers: {
+      type: Array,
+      default: () => [],
+    },
+
+    items: {
+      type: Array,
+      default: () => [],
+    },
+
+    sort: {
+      type: Array,
+      default: () => [],
+    },
+
+    dense: {
+      type: Boolean,
+      default: false,
+    },
+
+    fixed: {
+      type: Boolean,
+      default: false,
+    },
+
+    scrollable: {
+      type: Boolean,
+      default: true,
+    },
+
+    stickyHeader: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  methods: {
+    getSort(headerValue, sort) {
+      for (let i = 0; i < sort.length; i++) {
+        const { 0: value, 1: order } = sort[i].split(',')
+
+        if (headerValue === value) return parseInt(order)
+      }
+
+      return null
+    },
+    sortHeader(header) {
+      // update sort array
+      const sort = this.sort.slice(0)
+      let exists = false
+
+      for (let i = 0; i < sort.length; i++) {
+        const { 0: value, 1: order } = sort[i].split(',')
+
+        if (value === header.value) {
+          exists = true
+
+          if (order === '-1') {
+            // update position to 1
+            sort.splice(i, 1, `${header.value},1`)
+            break
+          } else if (order === '1') {
+            // delete position
+            sort.splice(i, 1)
+            break
+          }
+        }
+      }
+
+      if (!exists) sort.push(`${header.value},-1`)
+
+      this.$emit('update:sort', sort)
+    },
+    getPath(obj, path, defValue) {
+      if (!path) return undefined
+      const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
+      const result = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)
+
+      return result === undefined ? defValue : result
+    },
+  },
+}
+</script>

package/src/components/table/TableBody.vue

@@ -0,0 +1,11 @@
+<template>
+  <tbody>
+    <slot></slot>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: 'XTableBody',
+}
+</script>

package/src/components/table/TableCell.vue

@@ -0,0 +1,90 @@
+<template>
+  <td
+    class="last:pr-0"
+    :class="[
+      {
+        // density
+        'py-1 pr-2': dense,
+        'py-2 pr-4': !dense,
+        // text-align
+        'text-left': textAlign === 'left',
+        'text-center': textAlign === 'center',
+        'text-right': textAlign === 'right',
+        'text-justify': textAlign === 'justify',
+        // vertical-align
+        'align-baseline': verticalAlign === 'baseline',
+        'align-bottom': verticalAlign === 'bottom',
+        'align-middle': verticalAlign === 'middle',
+        'align-text-bottom': verticalAlign === 'text-bottom',
+        'align-text-top': verticalAlign === 'text-top',
+        'align-top': verticalAlign === 'top',
+        // truncate
+        'truncate': truncate && fixed,
+      },
+    ]"
+  >
+    <slot></slot>
+  </td>
+</template>
+
+<script>
+const validator = {
+  textAlign: [
+    null,
+    'left',
+    'center',
+    'right',
+    'justify',
+  ],
+  verticalAlign: [
+    null,
+    'baseline',
+    'bottom',
+    'middle',
+    'text-bottom',
+    'text-top',
+    'top',
+  ],
+}
+
+export default {
+  name: 'XTableCell',
+
+  validator,
+
+  props: {
+    textAlign: {
+      default: null,
+      type: String,
+      validator: (value) => validator.textAlign.includes(value),
+    },
+
+    truncate: {
+      default: false,
+      type: Boolean,
+    },
+
+    dense: {
+      default: false,
+      type: Boolean,
+    },
+
+    fixed: {
+      default: false,
+      type: Boolean,
+    },
+
+    verticalAlign: {
+      default: null,
+      type: String,
+      validator: (value) => validator.verticalAlign.includes(value),
+    },
+  },
+
+  created() {
+    if (this.truncate && !this.fixed) {
+      console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
+    }
+  },
+}
+</script>

package/src/components/table/TableHead.vue

@@ -0,0 +1,13 @@
+<template>
+  <thead class="align-bottom">
+    <tr class="text-sm text-gray-700 dark:text-gray-400">
+      <slot></slot>
+    </tr>
+  </thead>
+</template>
+
+<script>
+export default {
+  name: 'XTableHead',
+}
+</script>

package/src/components/table/TableHeader.vue

@@ -0,0 +1,110 @@
+<template>
+  <th
+    class="py-2 bg-gray-50 dark:bg-gray-800 font-medium tracking-wide uppercase text-xs pr-1 last:pr-0"
+    :class="[
+      {
+        //sort
+        'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': sortable,
+        //stickyHeader
+        'sticky top-0': stickyHeader,
+        // textAlign
+        'text-left': textAlign === 'left',
+        'text-center': textAlign === 'center',
+        'text-right': textAlign === 'right',
+        'text-justify': textAlign === 'justify',
+      },
+    ]"
+    v-bind="$attrs"
+  >
+    <div
+      v-if="sortable"
+      class="flex items-center"
+    >
+      <slot></slot>
+
+      <svg
+        v-if="[1, -1].includes(sort)"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill="none"
+        role="presentation"
+        class="inline-block stroke-2 w-3 h-3 ml-0.5"
+      >
+        <template v-if="sort === -1">
+          <line
+            x1="12"
+            y1="5"
+            x2="12"
+            y2="19"
+          />
+          <polyline points="19 12 12 19 5 12" />
+        </template>
+
+        <template v-if="sort === 1">
+          <line
+            x1="12"
+            y1="19"
+            x2="12"
+            y2="5"
+          />
+          <polyline points="5 12 12 5 19 12" />
+        </template>
+      </svg>
+    </div>
+
+    <template v-else>
+      <slot></slot>
+    </template>
+  </th>
+</template>
+
+<script>
+const validator = {
+  sort: [
+    null,
+    1,
+    -1,
+  ],
+  textAlign: [
+    null,
+    'left',
+    'center',
+    'right',
+    'justify',
+  ],
+}
+
+export default {
+  name: 'XTableHeader',
+
+  validator,
+
+  props: {
+    sort: {
+      type: [Number, Boolean],
+      default: null,
+      validator: (value) => validator.sort.includes(value),
+    },
+
+    sortable: {
+      type: Boolean,
+      default: false,
+    },
+
+    textAlign: {
+      type: String,
+      default: 'left',
+      validator: (value) => validator.textAlign.includes(value),
+    },
+
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

package/src/components/table/TableRow.vue

@@ -0,0 +1,52 @@
+<template>
+  <tr
+    class="border-b border-gray-200 dark:border-gray-700"
+    :class="[
+      {
+        'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': clickable,
+        // vertical-align
+        'align-baseline': verticalAlign === 'baseline',
+        'align-bottom': verticalAlign === 'bottom',
+        'align-middle': verticalAlign === 'middle',
+        'align-text-bottom': verticalAlign === 'text-bottom',
+        'align-text-top': verticalAlign === 'text-top',
+        'align-top': verticalAlign === 'top',
+      },
+    ]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </tr>
+</template>
+
+<script>
+const validator = {
+  verticalAlign: [
+    'baseline',
+    'bottom',
+    'middle',
+    'text-bottom',
+    'text-top',
+    'top',
+  ],
+}
+
+export default {
+  name: 'XTableRow',
+
+  validator,
+
+  props: {
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+
+    verticalAlign: {
+      type: String,
+      default: 'top',
+      validator: (value) => validator.verticalAlign.includes(value),
+    },
+  },
+}
+</script>

package/src/components/tabs/Tab.vue

@@ -0,0 +1,49 @@
+<template>
+  <component
+    :is="$props.to ? 'router-link' : $props.tag"
+    v-bind="$attrs"
+    :to="$props.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,
+      },
+    ]"
+    :aria-disabled="$props.disabled ? 'true' : null"
+    :aria-selected="$props.selected ? 'true' : 'false'"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XTab',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
+    tag: {
+      type: String,
+      default: 'li',
+    },
+
+    to: {
+      type: String,
+      default: undefined,
+    },
+  },
+}
+</script>

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,22 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    class="flex border-b border-gray-200 dark:border-gray-700 space-x-4"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XTabs',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'ul',
+    },
+  },
+}
+</script>

package/src/components/tag/Tag.vue

@@ -0,0 +1,123 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    class="inline-block leading-none"
+    :class="
+      [
+        {
+          // 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',
+
+          // 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',
+
+          // 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',
+        },
+      ]"
+  >
+    <span
+      v-if="$props.removable"
+      class="flex items-center"
+    >
+      <slot></slot>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        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"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </span>
+
+    <template v-else>
+      <slot></slot>
+    </template>
+  </component>
+</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: {
+      type: String,
+      default: 'full',
+    },
+
+    removable: {
+      type: Boolean,
+      default: false,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    tag: {
+      type: String,
+      default: 'span',
+    },
+
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>