@indielayer/ui 1.3.0 → 1.4.0

package/src/components/table/Table.vue

@@ -13,6 +13,12 @@ const tableProps = {
     default: () => [],
   },
   loading: Boolean,
+  loadingSkeleton: Boolean,
+  loadingLines: {
+    type: [Number, String],
+    default: 3,
+  },
+  error: Boolean,
   dense: Boolean,
   fixed: Boolean,
   striped: Boolean,
@@ -25,6 +31,7 @@ const tableProps = {
     type: Boolean,
     default: true,
   },
+  expandable: Boolean,
 }
 
 export type TableHeader = {
@@ -34,26 +41,32 @@ export type TableHeader = {
   value?: string;
   text?: string;
   width?: string | number;
+  truncate?: boolean;
+  skeletonShape?: SkeletonShape;
 }
 
 export type TableProps = ExtractPublicPropTypes<typeof tableProps>
 
-type InternalClasses = 'wrapper' | 'loadingWrapper'
+type InternalClasses = 'wrapper' | 'table' | 'loadingWrapper'
 export interface TableTheme extends ThemeComponent<TableProps, InternalClasses> {}
 
 export default { name: 'XTable' }
 </script>
 
 <script setup lang="ts" generic="T">
-import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { ref, type ExtractPublicPropTypes, type PropType, watch } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
-import XTableHead from './TableHead'
+import XTableHead from './TableHead.vue'
 import XTableHeader, { type TableHeaderSort, type TableHeaderAlign } from './TableHeader.vue'
 import XTableBody from './TableBody'
 import XTableRow from './TableRow.vue'
 import XTableCell from './TableCell.vue'
 import XSpinner from '../spinner/Spinner.vue'
+import XSkeleton from '../skeleton/Skeleton.vue'
+import type { SkeletonShape } from '../skeleton/Skeleton.vue'
+
+import { chevronDownIcon } from '../../common/icons'
 
 const props = defineProps({
   ...tableProps,
@@ -63,6 +76,24 @@ const props = defineProps({
   },
 })
 
+type internalT = T & {
+  __expanded?: boolean;
+}
+
+function clone<T>(source: T[]): T[] {
+  try {
+    return JSON.parse(JSON.stringify(source))
+  } catch (e) {
+    return []
+  }
+}
+
+const internalItems = ref<internalT[]>([])
+
+watch(() => props.items, (newValue) => {
+  if (props.expandable) internalItems.value = clone(newValue as any)
+}, { immediate: true })
+
 const emit = defineEmits(['update:sort', 'click-row'])
 
 function getSort(headerValue: string | undefined, sort: string[]): TableHeaderSort {
@@ -120,15 +151,16 @@ const { styles, classes, className } = useTheme('Table', {}, props)
 </script>
 
 <template>
-  <div class="w-full overflow-x-auto">
+  <div :class="[className, classes.wrapper]">
+    <slot name="title"></slot>
+    <slot name="actions"></slot>
+
     <table
       :style="styles"
-      :class="[
-        className,
-        classes.wrapper,
-      ]"
+      :class="classes.table"
     >
       <x-table-head>
+        <x-table-header v-if="expandable" width="48" class="!p-0" :sticky-header="stickyHeader"/>
         <x-table-header
           v-for="(header, index) in headers"
           :key="index"
@@ -139,29 +171,93 @@ const { styles, classes, className } = useTheme('Table', {}, props)
           :width="header.width"
           @click="header.sortable ? sortHeader(header) : null"
         >
-          {{ header.text }}
+          <slot :name="`header-${header.value}`" :header="header">
+            {{ header.text }}
+          </slot>
         </x-table-header>
       </x-table-head>
       <x-table-body>
-        <x-table-row
-          v-for="(item, index) in (items as T[])"
-          :key="index"
-          :pointer="pointer"
-          :striped="striped"
-          @click="$emit('click-row', item)"
-        >
-          <x-table-cell
-            v-for="(header, index2) in headers"
-            :key="index2"
-            :text-align="header.align"
-            :dense="dense"
-            :fixed="fixed"
+        <template v-if="loading">
+          <x-table-row
+            v-for="(item, index) in Number(loadingLines)"
+            :key="index"
+            :striped="striped"
+          >
+            <x-table-cell
+              v-for="(header, index2) in headers"
+              :key="index2"
+              :text-align="header.align"
+              :width="header.width"
+              :dense="dense"
+              :fixed="fixed"
+            >
+              <slot :name="`loading-${header.value}`" :item="item">
+                <x-skeleton
+                  class="max-w-[60%]"
+                  :shape="header.skeletonShape || 'line'"
+                  :class="{
+                    'mx-auto': header.align === 'center',
+                    'ml-auto': header.align === 'right',
+                  }"
+                />
+              </slot>
+            </x-table-cell>
+          </x-table-row>
+        </template>
+        <template v-else-if="error">
+          <tr>
+            <td :colspan="headers.length">
+              <slot name="error"></slot>
+            </td>
+          </tr>
+        </template>
+        <template v-else-if="!items || items.length === 0">
+          <tr>
+            <td :colspan="headers.length">
+              <slot name="empty"></slot>
+            </td>
+          </tr>
+        </template>
+        <template v-for="(item, index) in items" v-else :key="index">
+          <x-table-row
+            :pointer="pointer"
+            :striped="striped"
+            @click="$emit('click-row', item)"
           >
-            <slot :name="`item-${header.value}`" :item="item">
-              {{ getValue(item, header.value) }}
-            </slot>
-          </x-table-cell>
-        </x-table-row>
+            <x-table-cell v-if="expandable" width="48" class="!p-1">
+              <button class="p-4" @click="internalItems[index].__expanded = !internalItems[index].__expanded">
+                <x-icon
+                  :icon="chevronDownIcon"
+                  :size="dense ? 'xs' : 'md'"
+                  class="transition-transform"
+                  :class="{
+                    'rotate-180': internalItems[index]?.__expanded,
+                  }"
+                />
+              </button>
+            </x-table-cell>
+            <x-table-cell
+              v-for="(header, index2) in headers"
+              :key="index2"
+              :text-align="header.align"
+              :truncate="header.truncate"
+              :width="header.width"
+              :dense="dense"
+              :fixed="fixed"
+            >
+              <slot :name="`item-${header.value}`" :item="item">
+                {{ getValue(item, header.value) }}
+              </slot>
+            </x-table-cell>
+          </x-table-row>
+          <tr v-if="expandable">
+            <td colspan="999">
+              <div class="overflow-hidden transition-opacity" :class="[internalItems[index]?.__expanded ? '' : 'opacity-0 max-h-0']">
+                <slot name="expanded-row" :item="item"></slot>
+              </div>
+            </td>
+          </tr>
+        </template>
       </x-table-body>
       <div
         v-if="loading"

package/src/components/table/TableCell.vue

@@ -10,7 +10,7 @@ const tableCellProps = {
   },
   truncate: Boolean,
   dense: Boolean,
-  fixed: Boolean,
+  width: [String, Number],
   verticalAlign: {
     type: String as PropType<TableCellVerticalAlign>,
     default: 'middle',
@@ -32,22 +32,21 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(tableCellProps)
 
-if (props.truncate && !props.fixed) {
-  console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
-}
+const computedWidth = computed(() => typeof props.width === 'number' ? `${props.width}px` : props.width)
 
 const { styles, classes, className } = useTheme('TableCell', {}, props)
 </script>
 
 <template>
   <td
-    :style="styles"
+    :style="[styles, { width: computedWidth, minWidth: computedWidth, maxWidth: computedWidth }]"
     :class="[
+      'relative',
       className,
       classes.wrapper,
     ]"

package/src/components/table/TableHead.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+const tableHeadProps = {}
+
+export type TableHeadProps = ExtractPublicPropTypes<typeof tableHeadProps>
+
+type InternalClasses = 'thead' | 'row'
+export interface TableHeadTheme extends ThemeComponent<TableHeadProps, InternalClasses> {}
+
+export default { name: 'XTableHead' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const { styles, classes, className } = useTheme('TableHead', {}, {})
+</script>
+
+<template>
+  <thead :class="[className, classes.thead]" :style="styles">
+    <tr :class="classes.row">
+      <slot></slot>
+    </tr>
+  </thead>
+</template>

package/src/components/table/TableHeader.vue

@@ -22,74 +22,53 @@ export type TableHeaderSort = typeof validators.sort[number]
 export type TableHeaderAlign = typeof validators.textAlign[number]
 export type TableHeaderProps = ExtractPublicPropTypes<typeof tableHeaderProps>
 
+type InternalClasses = 'th' | 'sortIcon'
+export interface TableHeaderTheme extends ThemeComponent<TableHeaderProps, InternalClasses> {}
+
 export default { name: 'XTableHeader', validators }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(tableHeaderProps)
 
-defineProps(tableHeaderProps)
+const { styles, classes, className } = useTheme('TableHeader', {}, props)
 </script>
 
 <template>
-  <th
-    class="py-2 font-semibold tracking-widest uppercase text-xs px-3"
-    :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-right': textAlign === 'right',
-        'text-center': textAlign === 'center',
-        'text-justify': textAlign === 'justify',
-      },
-    ]"
-  >
-    <div
+  <th :style="styles" :class="[className, classes.th, 'group/th']">
+    <slot></slot>
+
+    <svg
       v-if="sortable"
-      class="relative inline-block"
+      :class="[
+        classes.sortIcon,
+        [sort && [1, -1].includes(sort) ? '' : 'invisible group-hover/th:visible']
+      ]"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-linejoin="round"
+      stroke-linecap="round"
+      fill="none"
+      role="presentation"
     >
-      <slot></slot>
-
-      <svg
-        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"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill="none"
-        role="presentation"
-      >
-        <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="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-if="sort === 1">
+        <line x1="12" y1="19" x2="12" y2="5"/>
+        <polyline points="5 12 12 5 19 12" />
+      </template>
 
-    <template v-else>
-      <slot></slot>
-    </template>
+      <template v-else>
+        <path d="m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"/>
+      </template>
+    </svg>
   </th>
 </template>

package/src/components/table/TableRow.vue

@@ -3,13 +3,7 @@ const validators = {
   verticalAlign: ['baseline', 'bottom', 'middle', 'text-bottom', 'text-top', 'top'],
 }
 
-export default { name: 'XTableRow', validators }
-</script>
-
-<script setup lang="ts">
-import { computed, type PropType } from 'vue'
-
-const props = defineProps({
+const tableRowProps = {
   pointer: Boolean,
   striped: Boolean,
   verticalAlign: {
@@ -17,7 +11,21 @@ const props = defineProps({
     default: 'top',
     validator: (value: string) => validators.verticalAlign.includes(value),
   },
-})
+}
+
+export type TableRowProps = ExtractPublicPropTypes<typeof tableRowProps>
+
+type InternalClasses = 'row'
+export interface TableRowTheme extends ThemeComponent<TableRowProps, InternalClasses> {}
+
+export default { name: 'XTableRow', validators }
+</script>
+
+<script setup lang="ts">
+import { computed, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(tableRowProps)
 
 const alignClass = computed(() => {
   if (props.verticalAlign === 'baseline') return 'align-baseline'
@@ -29,18 +37,12 @@ const alignClass = computed(() => {
 
   return ''
 })
+
+const { styles, classes, className } = useTheme('TableRow', {}, props)
 </script>
 
 <template>
-  <tr
-    :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': pointer,
-      },
-      alignClass
-    ]"
-  >
+  <tr :style="styles" :class="[className, classes.row, alignClass]">
     <slot></slot>
   </tr>
 </template>

package/src/components/table/index.ts

@@ -1,10 +1,12 @@
 export { default as XTable } from './Table.vue'
 export { default as XTableBody } from './TableBody'
 export { default as XTableCell } from './TableCell.vue'
-export { default as XTableHead } from './TableHead'
+export { default as XTableHead } from './TableHead.vue'
 export { default as XTableHeader } from './TableHeader.vue'
 export { default as XTableRow } from './TableRow.vue'
 
 export type { TableProps, TableHeader, TableTheme } from './Table.vue'
-export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort } from './TableHeader.vue'
+export type { TableHeadProps, TableHeadTheme } from './TableHead.vue'
+export type { TableRowProps, TableRowTheme } from './TableRow.vue'
+export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort, TableHeaderTheme } from './TableHeader.vue'
 export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign, TableCellTheme } from './TableCell.vue'

package/src/components/table/theme/Table.base.theme.ts

@@ -2,19 +2,21 @@ import type { TableTheme } from '../Table.vue'
 
 const theme: TableTheme = {
   classes: {
-    wrapper: ({ props }) => {
-      const c = ['w-full relative']
+    wrapper: 'w-full h-full overflow-x-auto',
 
-      if (props.scrollable) c.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table')
+    table: ({ props }) => {
+      const classes = ['w-full relative']
 
-      if (props.stickyHeader) c.push('relative')
+      if (props.scrollable) classes.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal')
 
-      if (props.fixed) c.push('table-fixed')
+      if (props.stickyHeader) classes.push('relative')
 
-      return c
+      if (props.fixed) classes.push('md:table-fixed')
+
+      return classes
     },
 
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
   },
 }
 

package/src/components/table/theme/Table.carbon.theme.ts

@@ -1,7 +1,23 @@
 import type { TableTheme } from '../Table.vue'
 
-import BaseTheme from './Table.base.theme'
+const theme: TableTheme = {
+  classes: {
+    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-gray-800',
 
-const theme: TableTheme = BaseTheme
+    table: ({ props }) => {
+      const classes = ['w-full relative']
+
+      if (props.scrollable) classes.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal')
+
+      if (props.stickyHeader) classes.push('relative')
+
+      if (props.fixed) classes.push('md:table-fixed')
+
+      return classes
+    },
+
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
+  },
+}
 
 export default theme

package/src/components/table/theme/TableCell.base.theme.ts

@@ -19,7 +19,7 @@ const theme: TableCellTheme = {
       else if (props.verticalAlign === 'text-top') c.push('align-text-top')
       else if (props.verticalAlign === 'top') c.push('align-top')
 
-      if (props.truncate && props.fixed) c.push('truncate')
+      if (props.truncate) c.push('truncate')
 
       return c
     },

package/src/components/table/theme/TableCell.carbon.theme.ts

@@ -1,7 +1,29 @@
 import type { TableCellTheme } from '../TableCell.vue'
 
-import BaseTheme from './TableCell.base.theme'
+const theme: TableCellTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const c = ['last:pr-0 px-3']
 
-const theme: TableCellTheme = BaseTheme
+      c.push(props.dense ? 'py-2' : 'py-4')
+
+      if (props.textAlign === 'left') c.push('text-left')
+      else if (props.textAlign === 'center') c.push('text-center')
+      else if (props.textAlign === 'right') c.push('text-right')
+      else if (props.textAlign === 'justify') c.push('text-justify')
+
+      if (props.verticalAlign === 'baseline') c.push('align-baseline')
+      else if (props.verticalAlign === 'bottom') c.push('align-bottom')
+      else if (props.verticalAlign === 'middle') c.push('align-middle')
+      else if (props.verticalAlign === 'text-bottom') c.push('align-text-bottom')
+      else if (props.verticalAlign === 'text-top') c.push('align-text-top')
+      else if (props.verticalAlign === 'top') c.push('align-top')
+
+      if (props.truncate) c.push('truncate')
+
+      return c
+    },
+  },
+}
 
 export default theme

package/src/components/table/theme/TableHead.base.theme.ts

@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-sm text-gray-600 dark:text-gray-400 border-b',
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHead.carbon.theme.ts

@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-gray-900 dark:text-gray-50',
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-2 font-semibold tracking-widest uppercase text-xs px-3']
+
+      if (props.sortable) classes.push('cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-3 h-3 top-2.5 right-0.5']
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHeader.carbon.theme.ts

@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-gray-200 dark:bg-gray-700 select-none']
+
+      if (props.sortable) classes.push('cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-150 ease-in-out pr-5')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-4 h-4 top-4 right-2']
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableRow.base.theme.ts

@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+      } else {
+        classes.push('border-b border-gray-200 dark:border-gray-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme