@indielayer/ui 0.1.0 → 0.2.2

package/src/components/spacer/Spacer.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="flex-grow"></div>
+</template>

package/src/components/spinner/Spinner.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg
+    :class="[
+      {
+        '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',
+      },
+
+    ]"
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    style="stroke: currentColor"
+  >
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)" stroke-width="2">
+        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="0.5s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'XSpinner',
+
+  props: {
+    size: {
+      type: String,
+      default: null,
+    },
+  },
+}
+</script>

package/src/components/status/StatusDot.vue

@@ -0,0 +1,41 @@
+<template>
+  <component
+    :is="tag"
+    class="inline-block relative"
+  >
+    <slot></slot>
+    <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 -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10"
+      :class="[`bg-${color}-500`]"
+    ></div>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XStatusDot',
+
+  props: {
+    animate: {
+      type: Boolean,
+      default: false,
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+}
+</script>

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,109 @@
+<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',
+      },
+    ]"
+  >
+    <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,51 @@
+<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',
+      },
+    ]"
+  >
+    <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,81 @@
+<template>
+  <component
+    :is="to ? 'router-link' : tag"
+    :to="to"
+    class="pb-2 transition-colors duration-150 ease-in-out"
+    :class="[
+      {
+        [`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="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',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
+    },
+
+    tag: {
+      type: String,
+      default: 'li',
+    },
+
+    to: {
+      type: String,
+      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>

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,44 @@
+<template>
+  <component
+    :is="tag"
+    class="flex border-b border-gray-200 dark:border-gray-700 space-x-4"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+import { reactive, computed, provide } from 'vue'
+
+export default {
+  name: 'XTabs',
+
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: null,
+    },
+    tag: {
+      type: String,
+      default: 'ul',
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const state = reactive({
+      active: computed(() => props.modelValue),
+    })
+
+    provide('tabs', {
+      state,
+      activateTab,
+    })
+
+    function activateTab(tab) {
+      emit('update:modelValue', tab)
+    }
+  },
+}
+</script>