@indielayer/ui 1.8.4 → 1.9.1

package/src/components/table/Table.vue

@@ -32,6 +32,17 @@ const tableProps = {
     default: true,
   },
   expandable: Boolean,
+  virtualList: Boolean,
+  virtualListOffsetTop: Number,
+  virtualListOffsetBottom: Number,
+  virtualListItemHeight: {
+    type: Number,
+    default: 54,
+  },
+  virtualListOverscan: {
+    type: Number,
+    default: 5,
+  },
 }
 
 export type TableHeader = {
@@ -54,8 +65,9 @@ export default { name: 'XTable' }
 </script>
 
 <script setup lang="ts" generic="T">
-import { ref, type ExtractPublicPropTypes, type PropType, watch } from 'vue'
+import { ref, type ExtractPublicPropTypes, type PropType, watch, computed, type MaybeRef } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useVirtualList } from '../../composables/useVirtualList'
 
 import XTableHead from './TableHead.vue'
 import XTableHeader, { type TableHeaderSort, type TableHeaderAlign } from './TableHeader.vue'
@@ -78,6 +90,10 @@ const props = defineProps({
   },
 })
 
+const selectedIndex = defineModel<number | number[]>('selected')
+
+const hasSelectedIndex = computed(() => typeof selectedIndex.value === 'number')
+
 type internalT = T & {
   __expanded?: boolean;
 }
@@ -90,10 +106,23 @@ function clone<T>(source: T[]): T[] {
   }
 }
 
+const items = computed(() => props.items)
+
+const { list, containerProps, wrapperProps } = useVirtualList(
+  items,
+  {
+    disabled: !props.virtualList,
+    itemHeight: props.virtualListItemHeight || 54,
+    topOffset: props.virtualListOffsetTop || 0,
+    bottomOffset: props.virtualListOffsetBottom || 0,
+    overscan: props.virtualListOverscan,
+  },
+)
+
 const internalItems = ref<internalT[]>([])
 
-watch(() => props.items, (newValue) => {
-  if (props.expandable) internalItems.value = clone(newValue as any)
+watch(items, (newValue) => {
+  if (props.expandable) internalItems.value = clone(newValue as any) as internalT[]
 }, { immediate: true })
 
 const emit = defineEmits(['update:sort', 'click-row'])
@@ -153,125 +182,140 @@ const { styles, classes, className } = useTheme('Table', {}, props)
 </script>
 
 <template>
-  <div :class="[className, classes.wrapper]">
+  <div
+    :class="[className, classes.wrapper]"
+    v-bind="containerProps"
+  >
     <slot name="title"></slot>
     <slot name="actions"></slot>
 
-    <table
-      :style="styles"
-      :class="classes.table"
+    <div
+      v-bind="wrapperProps"
+      :class="{
+        '!h-auto': props.loading
+      }"
     >
-      <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"
-          :sticky-header="stickyHeader"
-          :text-align="header.align"
-          :sort="getSort(header.value, sort)"
-          :sortable="header.sortable"
-          :width="header.width"
-          @click="header.sortable ? sortHeader(header) : null"
-        >
-          <slot :name="`header-${header.value}`" :header="header">
-            {{ header.text }}
-          </slot>
-        </x-table-header>
-      </x-table-head>
-      <x-table-body>
-        <template v-if="loading">
-          <x-table-row
-            v-for="(item, index) in Number(loadingLines)"
+      <table
+        :style="styles"
+        :class="classes.table"
+      >
+        <x-table-head :sticky-header="stickyHeader">
+          <x-table-header v-if="expandable" width="48" class="!p-0"/>
+          <x-table-header
+            v-for="(header, index) in headers"
             :key="index"
-            :striped="striped"
+            :text-align="header.align"
+            :sort="getSort(header.value, sort)"
+            :sortable="header.sortable"
+            :width="header.width"
+            @click="header.sortable ? sortHeader(header) : null"
           >
-            <x-table-cell
-              v-for="(header, index2) in headers"
-              :key="index2"
-              :text-align="header.align"
-              :width="header.width"
-              :dense="dense"
-              :fixed="fixed"
+            <slot :name="`header-${header.value}`" :header="header">
+              {{ header.text }}
+            </slot>
+          </x-table-header>
+        </x-table-head>
+        <x-table-body>
+          <template v-if="loading">
+            <x-table-row
+              v-for="(item, index) in Number(loadingLines)"
+              :key="index"
+              :striped="striped"
             >
-              <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="999">
-              <slot name="error"></slot>
-            </td>
-          </tr>
-        </template>
-        <template v-else-if="!items || items.length === 0">
-          <tr>
-            <td colspan="999">
-              <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)"
-          >
-            <x-table-cell v-if="expandable" width="48" class="!p-1">
-              <button
-                type="button"
-                class="px-3 p-2"
-                :class="[dense ? 'p-0.5' : 'px-3 py-2']"
-                @click="internalItems[index].__expanded = !internalItems[index].__expanded"
+              <x-table-cell
+                v-for="(header, index2) in headers"
+                :key="index2"
+                :text-align="header.align"
+                :width="header.width"
+                :dense="dense"
+                :fixed="fixed"
               >
-                <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="`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="999">
+                <slot name="error"></slot>
+              </td>
+            </tr>
+          </template>
+          <template v-else-if="!items || items.length === 0">
+            <tr>
+              <td colspan="999">
+                <slot name="empty"></slot>
+              </td>
+            </tr>
+          </template>
+          <template v-for="(item, index) in list" v-else :key="index">
+            <x-table-row
+              :pointer="pointer"
+              :striped="striped"
+              :selected="hasSelectedIndex ? selectedIndex === item.index : undefined"
+              @click="$emit('click-row', item.data, item.index)"
             >
-              <slot :name="`item-${header.value}`" :item="item">
-                {{ getValue(item, header.value) }}
-              </slot>
-            </x-table-cell>
-          </x-table-row>
-          <tr v-if="expandable" :class="{ 'hidden': !internalItems[index]?.__expanded }">
-            <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"
-        :class="classes.loadingWrapper"
-      >
-        <x-spinner size="lg"/>
-      </div>
-    </table>
+              <x-table-cell v-if="expandable" width="48" class="!p-1">
+                <button
+                  type="button"
+                  class="px-3 p-2"
+                  :class="[dense ? 'p-0.5' : 'px-3 py-2']"
+                  @click="internalItems[item.index].__expanded = !internalItems[item.index].__expanded"
+                >
+                  <x-icon
+                    :icon="chevronDownIcon"
+                    :size="dense ? 'xs' : 'md'"
+                    class="transition-transform"
+                    :class="{
+                      'rotate-180': internalItems[item.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"
+                :style="[props.virtualList ? {
+                  height: `${props.virtualListItemHeight}px`,
+                  maxHeight: `${props.virtualListItemHeight}px`,
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                } : {}]"
+              >
+                <slot :name="`item-${header.value}`" :item="item.data">
+                  {{ getValue(item.data, header.value) }}
+                </slot>
+              </x-table-cell>
+            </x-table-row>
+            <tr v-if="expandable" :class="{ 'hidden': !internalItems[item.index]?.__expanded }">
+              <td colspan="999">
+                <div class="overflow-hidden transition-opacity" :class="[internalItems[item.index]?.__expanded ? '' : 'opacity-0 max-h-0']">
+                  <slot name="expanded-row" :item="item.data"></slot>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </x-table-body>
+        <div
+          v-if="loading"
+          :class="classes.loadingWrapper"
+        >
+          <x-spinner size="lg"/>
+        </div>
+      </table>
+    </div>
   </div>
 </template>

package/src/components/table/TableHead.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
-const tableHeadProps = {}
+const tableHeadProps = {
+  stickyHeader: Boolean,
+}
 
 export type TableHeadProps = ExtractPublicPropTypes<typeof tableHeadProps>
 
@@ -13,7 +15,9 @@ export default { name: 'XTableHead' }
 import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
-const { styles, classes, className } = useTheme('TableHead', {}, {})
+const props = defineProps(tableHeadProps)
+
+const { styles, classes, className } = useTheme('TableHead', {}, props)
 </script>
 
 <template>

package/src/components/table/TableHeader.vue

@@ -15,7 +15,6 @@ const tableHeaderProps = {
     default: 'left',
     validator: (value: string) => validators.textAlign.includes(value as any),
   },
-  stickyHeader: Boolean,
 }
 
 export type TableHeaderSort = typeof validators.sort[number]

package/src/components/table/TableRow.vue

@@ -6,6 +6,7 @@ const validators = {
 const tableRowProps = {
   pointer: Boolean,
   striped: Boolean,
+  selected: Boolean,
   verticalAlign: {
     type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
     default: 'top',

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

@@ -2,7 +2,13 @@ import type { TableHeadTheme } from '../TableHead.vue'
 
 const theme: TableHeadTheme = {
   classes: {
-    thead: 'align-bottom bg-secondary-50 dark:bg-secondary-700',
+    thead: ({ props }) => {
+      const classes = ['align-bottom bg-secondary-50 dark:bg-secondary-700']
+
+      if (props.stickyHeader) classes.push('sticky top-0 z-10')
+
+      return classes
+    },
     row: 'text-sm text-secondary-600 dark:text-secondary-200 border-b',
   },
 }

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

@@ -2,7 +2,13 @@ import type { TableHeadTheme } from '../TableHead.vue'
 
 const theme: TableHeadTheme = {
   classes: {
-    thead: 'align-bottom',
+    thead: ({ props }) => {
+      const classes = ['align-bottom']
+
+      if (props.stickyHeader) classes.push('sticky top-0 z-10')
+
+      return classes
+    },
     row: 'text-secondary-900 dark:text-secondary-50',
   },
 }

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

@@ -7,8 +7,6 @@ const theme: TableHeaderTheme = {
 
       if (props.sortable) classes.push('cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-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')

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

@@ -7,8 +7,6 @@ const theme: TableHeaderTheme = {
 
       if (props.sortable) classes.push('cursor-pointer hover:bg-secondary-300 dark:hover:bg-secondary-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')

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

@@ -5,6 +5,10 @@ const theme: TableRowTheme = {
     row: ({ props }) => {
       const classes = []
 
+      if (props.selected) {
+        classes.push('shadow-[inset_3px_0] shadow-primary-500')
+      }
+
       if (props.striped) {
         classes.push('even:bg-secondary-50 dark:even:bg-secondary-700')
       } else {

package/src/composables/index.ts

@@ -5,3 +5,4 @@ export * from './useCSS'
 export * from './useInputtable'
 export * from './useInteractive'
 export * from './useNotifications'
+export * from './useVirtualList'