@indielayer/ui 0.2.3 → 1.0.0-alpha.2

package/src/components/table/Table.vue

@@ -1,60 +1,22 @@
-<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 lang="ts">
+import { defineComponent, type PropType } from 'vue'
 
-<script>
 import TableHead from './TableHead.vue'
-import TableHeader from './TableHeader.vue'
+import TableHeader, { type Sort, type Align } 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 {
+export type Header = {
+  sortable?: boolean,
+  sort?: string[],
+  align?: Align,
+  value: string,
+  text: string,
+}
+
+export default defineComponent({
   name: 'XTable',
 
   components: {
@@ -67,60 +29,52 @@ export default {
   },
 
   props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
     headers: {
-      type: Array,
+      type: Array as PropType<Array<Header>>,
       default: () => [],
     },
-
     items: {
       type: Array,
       default: () => [],
     },
-
     sort: {
-      type: Array,
+      type: Array as PropType<Array<string>>,
       default: () => [],
     },
-
-    dense: {
-      type: Boolean,
-      default: false,
-    },
-
-    fixed: {
-      type: Boolean,
-      default: false,
-    },
-
+    loading: Boolean,
+    dense: Boolean,
+    fixed: Boolean,
+    striped: Boolean,
+    pointer: Boolean,
     scrollable: {
       type: Boolean,
       default: true,
     },
-
     stickyHeader: {
       type: Boolean,
       default: true,
     },
   },
 
-  methods: {
-    getSort(headerValue, sort) {
+  emits: ['update:sort', 'click-row'],
+
+  setup(props, { emit }) {
+    function getSort(headerValue: string, sort: string[]): Sort {
       for (let i = 0; i < sort.length; i++) {
         const { 0: value, 1: order } = sort[i].split(',')
 
-        if (headerValue === value) return parseInt(order)
+        if (headerValue === value) {
+          if (parseInt(order) > 0) return 1
+          else return -1
+        }
       }
 
-      return null
-    },
-    sortHeader(header) {
+      return undefined
+    }
+
+    function sortHeader(header: Header) {
       // update sort array
-      const sort = this.sort.slice(0)
+      const sort = props.sort.slice(0)
       let exists = false
 
       for (let i = 0; i < sort.length; i++) {
@@ -143,15 +97,76 @@ export default {
 
       if (!exists) sort.push(`${header.value},-1`)
 
-      this.$emit('update:sort', sort)
-    },
-    getPath(obj, path, defValue) {
-      if (!path) return undefined
+      emit('update:sort', sort)
+    }
+
+    function getValue(item: any, path: string | string[]) {
+      if (!path) return ''
       const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
-      const result = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)
+      const result = pathArray?.reduce((prevObj: any, key: string) => prevObj && prevObj[key], item)
 
-      return result === undefined ? defValue : result
-    },
+      return result ?? ''
+    }
+
+    return {
+      getSort,
+      getValue,
+      sortHeader,
+    }
   },
-}
+})
 </script>
+
+<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"
+        :pointer="pointer"
+        :striped="striped"
+        @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">
+            {{ getValue(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 dark:bg-gray-600 rounded opacity-50"
+    >
+      <x-spinner size="lg"/>
+    </div>
+  </table>
+</template>

package/src/components/table/TableBody.vue

@@ -1,11 +1,13 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XTableBody',
+})
+</script>
+
 <template>
   <tbody>
     <slot></slot>
   </tbody>
 </template>
-
-<script>
-export default {
-  name: 'XTableBody',
-}
-</script>

package/src/components/table/TableCell.vue

@@ -1,34 +1,7 @@
-<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 lang="ts">
+import { defineComponent } from 'vue'
 
-<script>
-const validator = {
+const validators = {
   textAlign: [
     null,
     'left',
@@ -47,44 +20,59 @@ const validator = {
   ],
 }
 
-export default {
+export default defineComponent({
   name: 'XTableCell',
 
-  validator,
+  validators,
 
   props: {
     textAlign: {
-      default: null,
       type: String,
-      validator: (value) => validator.textAlign.includes(value),
-    },
-
-    truncate: {
-      default: false,
-      type: Boolean,
+      validator: (value: string) => validators.textAlign.includes(value),
     },
-
-    dense: {
-      default: false,
-      type: Boolean,
-    },
-
-    fixed: {
-      default: false,
-      type: Boolean,
-    },
-
+    truncate: Boolean,
+    dense: Boolean,
+    fixed: Boolean,
     verticalAlign: {
-      default: null,
       type: String,
-      validator: (value) => validator.verticalAlign.includes(value),
+      default: 'middle',
+      validator: (value: string) => validators.verticalAlign.includes(value),
     },
   },
 
-  created() {
-    if (this.truncate && !this.fixed) {
+  setup(props) {
+    if (props.truncate && !props.fixed) {
       console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
     }
   },
-}
+})
 </script>
+
+<template>
+  <td
+    class="last:pr-0 px-3"
+    :class="[
+      {
+        // density
+        'py-2': dense,
+        'py-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>

package/src/components/table/TableHead.vue

@@ -1,13 +1,15 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XTableHead',
+})
+</script>
+
 <template>
   <thead class="align-bottom">
-    <tr class="text-sm text-gray-700 dark:text-gray-400">
+    <tr class="text-sm text-gray-600 dark:text-gray-400 border-b">
       <slot></slot>
     </tr>
   </thead>
 </template>
-
-<script>
-export default {
-  name: 'XTableHead',
-}
-</script>

package/src/components/table/TableHeader.vue

@@ -1,28 +1,61 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+export type Sort = 1 | -1 | undefined
+export type Align = 'left' | 'center' | 'right' | 'justify' | undefined
+
+const validators = {
+  sort: [1,-1],
+  textAlign: ['left','center','right','justify'],
+}
+
+export default defineComponent({
+  name: 'XTableHeader',
+
+  validators,
+
+  props: {
+    sort: {
+      type: Number as PropType<Sort>,
+      validator: (value: number) => validators.sort.includes(value),
+    },
+    sortable: Boolean,
+    textAlign: {
+      type: String as PropType<Align>,
+      default: 'left',
+      validator: (value: string) => validators.textAlign.includes(value),
+    },
+    stickyHeader: Boolean,
+  },
+})
+</script>
+
 <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="py-2 font-semibold tracking-widest uppercase text-xs px-3"
     :class="[
       {
-        //sort
+        // sort
         'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': sortable,
-        //stickyHeader
+        // stickyHeader
         'sticky top-0': stickyHeader,
         // textAlign
         'text-left': textAlign === 'left',
-        'text-center': textAlign === 'center',
         'text-right': textAlign === 'right',
+        'text-center': textAlign === 'center',
         'text-justify': textAlign === 'justify',
       },
     ]"
   >
     <div
       v-if="sortable"
-      class="flex items-center"
+      class="relative inline-block"
     >
       <slot></slot>
 
       <svg
-        v-if="[1, -1].includes(sort)"
+        v-if="sort && [1, -1].includes(sort)"
+        class="absolute stroke-2 w-3 h-3 ml-0.5 -right-3 top-0.5"
         width="24"
         height="24"
         viewBox="0 0 24 24"
@@ -31,7 +64,6 @@
         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
@@ -60,50 +92,3 @@
     </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

@@ -1,9 +1,33 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+const validators = {
+  verticalAlign: ['baseline','bottom','middle','text-bottom','text-top','top'],
+}
+
+export default defineComponent({
+  name: 'XTableRow',
+
+  validators,
+
+  props: {
+    pointer: Boolean,
+    striped: Boolean,
+    verticalAlign: {
+      type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
+      default: 'top',
+      validator: (value: string) => validators.verticalAlign.includes(value),
+    },
+  },
+})
+</script>
+
 <template>
   <tr
-    class="border-b border-gray-200 dark:border-gray-700"
     :class="[
+      striped ? 'odd:bg-gray-50 dark:odd:bg-gray-800' : 'border-b border-gray-200 dark:border-gray-700',
       {
-        'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': clickable,
+        'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': pointer,
         // vertical-align
         'align-baseline': verticalAlign === 'baseline',
         'align-bottom': verticalAlign === 'bottom',
@@ -17,35 +41,3 @@
     <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>