@indielayer/ui 1.2.0 → 1.4.0

package/src/components/tab/theme/Tab.carbon.theme.ts

@@ -0,0 +1,34 @@
+import type { TabTheme } from '../Tab.vue'
+
+const theme: TabTheme = {
+  classes: {
+    wrapper: ({ props, data }) => {
+      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left']
+
+      if (data.variant === 'block') c.push('px-4')
+      else c.push('px-4')
+
+      if (props.size === 'lg') c.push('text-lg')
+      else if (props.size === 'xl') c.push('text-xl')
+      else c.push('text-sm')
+
+      return c
+    },
+
+    content: 'flex items-center justify-start',
+
+    label: ({ data }) => {
+      const c = ['']
+
+      if (data.selected) c.push('font-medium')
+
+      return c
+    },
+
+    icon: 'mr-1.5',
+
+    tabpanel: 'py-4',
+  },
+}
+
+export default theme

package/src/components/tab/{TabGroup.theme.ts → theme/TabGroup.base.theme.ts}

@@ -1,17 +1,19 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TabGroupProps } from './TabGroup.vue'
+import type { TabGroupTheme } from '../TabGroup.vue'
 
-type InternalClasses = 'wrapper' | 'list' | 'tracker'
-
-interface InternalTheme extends ThemeComponent<TabGroupProps, InternalClasses> {}
-export interface TabGroupTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TabGroupProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: TabGroupTheme = {
   classes: {
     wrapper: '',
 
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+      if (props.variant === 'block') c.push('rounded-md')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-slate-100 dark:bg-gray-800 p-1')
+
+      return c
+    },
+
     list: ({ props }) => {
       const c = ['flex min-w-full w-fit']
 
@@ -27,9 +29,9 @@ const theme: InternalTheme = {
     tracker: ({ props }) => {
       const c = ['absolute transition-all duration-150']
 
-      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tabs-text)] dark:bg-[color:var(--x-tabs-dark-text)]')
+      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('rounded-md h-full top-0 bg-[color:var(--x-tabs-bg)] dark:bg-[color:var(--x-tabs-dark-bg)]')
+      if (props.variant === 'block') c.push('rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]')
 
       return c
     },

package/src/components/tab/theme/TabGroup.carbon.theme.ts

@@ -0,0 +1,55 @@
+import type { TabGroupTheme } from '../TabGroup.vue'
+
+const theme: TabGroupTheme = {
+  classes: {
+    wrapper: '',
+
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+      if (props.variant === 'block') c.push('')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-gray-200 dark:bg-gray-800')
+
+      return c
+    },
+
+    list: ({ props }) => {
+      const c = ['flex min-w-full w-fit']
+
+      if (props.variant === 'line') c.push('border-b border-gray-200 dark:border-gray-700')
+      if (props.variant === 'line' && !props.grow) c.push('')
+      if (props.variant === 'block') c.push('z-[1] py-1.5')
+      if (props.align === 'center') c.push('justify-center')
+      if (props.align === 'right') c.push('justify-end')
+
+      return c
+    },
+
+    tracker: ({ props }) => {
+      const c = ['absolute transition-all duration-150']
+
+      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
+
+      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-gray-100 dark:bg-gray-700')
+
+      return c
+    },
+  },
+
+  styles: ({ props, colors, css }) => {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      text: color[600],
+      bg: props.ghost ? color[50] : '#fff',
+      dark: {
+        text: color[400],
+        bg: props.ghost ? color[900] : gray[700],
+      },
+    })
+  },
+}
+
+export default theme

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,25 +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' | '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 { useTheme } from '../../composables/theme'
+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 theme from './Table.theme'
+import { chevronDownIcon } from '../../common/icons'
 
 const props = defineProps({
   ...tableProps,
@@ -62,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 {
@@ -115,19 +147,20 @@ function getValue(item: any, path: string | string[] | undefined) {
   return result ?? ''
 }
 
-const { styles, classes, className } = useTheme('table', theme, props)
+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"
@@ -138,29 +171,93 @@ const { styles, classes, className } = useTheme('table', theme, 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',
@@ -22,6 +22,9 @@ export type TableCellTextAlign = typeof validators.textAlign[number]
 export type TableCellVerticalAlign = typeof validators.verticalAlign[number]
 export type TableCellProps = ExtractPublicPropTypes<typeof tableCellProps>
 
+type InternalClasses = 'wrapper'
+export interface TableCellTheme extends ThemeComponent<TableCellProps, InternalClasses> {}
+
 export default {
   name: 'XTableCell',
   validators,
@@ -29,24 +32,21 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes, PropType } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme  from './TableCell.theme'
+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('table-cell', theme, props)
+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 } from './Table.vue'
-export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort } from './TableHeader.vue'
-export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign } from './TableCell.vue'
+export type { TableProps, TableHeader, TableTheme } from './Table.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

@@ -0,0 +1,23 @@
+import type { TableTheme } from '../Table.vue'
+
+const theme: TableTheme = {
+  classes: {
+    wrapper: 'w-full h-full overflow-x-auto',
+
+    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/Table.carbon.theme.ts

@@ -0,0 +1,23 @@
+import type { TableTheme } from '../Table.vue'
+
+const theme: TableTheme = {
+  classes: {
+    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-gray-800',
+
+    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