@indielayer/ui 1.8.4 → 1.9.0

package/src/components/select/Select.vue

@@ -14,6 +14,17 @@ const selectProps = {
     type: String,
     default: 'Filter by...',
   },
+  virtualList: Boolean,
+  virtualListOffsetTop: Number,
+  virtualListOffsetBottom: Number,
+  virtualListItemHeight: {
+    type: Number,
+    default: 33,
+  },
+  virtualListOverscan: {
+    type: Number,
+    default: 5,
+  },
 }
 
 export type SelectOption = {
@@ -44,6 +55,7 @@ import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useVirtualList } from '../../composables/useVirtualList'
 import { checkIcon, selectIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
@@ -113,6 +125,17 @@ const internalOptions = computed(() => {
 
 const availableOptions = computed(() => internalOptions.value.filter((option) => !option.disabled))
 
+const { list, scrollTo: scrollToVirtualList, containerProps, wrapperProps } = useVirtualList(
+  internalOptions,
+  {
+    disabled: !props.virtualList,
+    itemHeight: props.virtualListItemHeight,
+    topOffset: props.virtualListOffsetTop || 0,
+    bottomOffset: props.virtualListOffsetBottom || 0,
+    overscan: props.virtualListOverscan,
+  },
+)
+
 const isOpen = computed(() => popoverRef.value?.isOpen)
 
 watch(filter, (val) => {
@@ -158,7 +181,8 @@ function findSelectedIndex() {
 }
 
 function scrollToIndex(index: number) {
-  if (itemsRef.value) itemsRef.value[index]?.$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  if (props.virtualList) scrollToVirtualList(index)
+  else if (itemsRef.value) itemsRef.value[index]?.$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 
 watch(selectedIndex, (index) => {
@@ -419,7 +443,9 @@ defineExpose({ focus, blur, reset, validate, setError })
         </div>
 
         <template #content>
-          <x-popover-container :class="classes.content">
+          <x-popover-container
+            :class="classes.content"
+          >
             <slot name="content-header">
               <div v-if="filterable" :class="classes.search">
                 <x-input
@@ -431,22 +457,24 @@ defineExpose({ focus, blur, reset, validate, setError })
                 />
               </div>
             </slot>
-            <div v-if="internalOptions.length > 0" :class="classes.contentBody">
-              <x-menu-item
-                v-for="(item, index) in internalOptions"
-                :key="index"
-                ref="itemsRef"
-                :item="item"
-                :size="size"
-                :disabled="item.disabled"
-                :selected="index === selectedIndex"
-                :color="color"
-                filled
-                @click="() => !multiple && popoverRef?.hide()"
-              />
-            </div>
-            <div v-else class="px-2 text-center text-secondary-400">
-              No options
+            <div v-bind="containerProps" :class="classes.contentBody">
+              <div v-bind="wrapperProps">
+                <x-menu-item
+                  v-for="item in list"
+                  :key="item.index"
+                  ref="itemsRef"
+                  :item="item.data"
+                  :size="size"
+                  :disabled="item.data.disabled"
+                  :selected="item.index === selectedIndex"
+                  :color="color"
+                  filled
+                  @click="() => !multiple && popoverRef?.hide()"
+                />
+              </div>
+              <div v-if="list.length === 0" class="p-2 text-center text-secondary-400">
+                No options
+              </div>
             </div>
             <slot name="content-footer"></slot>
           </x-popover-container>
@@ -465,14 +493,16 @@ defineExpose({ focus, blur, reset, validate, setError })
         :readonly="readonly"
         v-on="inputListeners"
       >
-        <option
-          v-for="(option, index) in options"
-          :key="index"
-          :value="option.value"
-          :disabled="option.disabled"
-        >
-          {{ option.label }}
-        </option>
+        <template v-if="native">
+          <option
+            v-for="(option, index) in options"
+            :key="index"
+            :value="option.value"
+            :disabled="option.disabled"
+          >
+            {{ option.label }}
+          </option>
+        </template>
       </select>
 
       <div :class="classes.iconWrapper">

package/src/components/select/theme/Select.base.theme.ts

@@ -31,7 +31,7 @@ const theme: SelectTheme = {
 
     search: 'p-1 mb-0.5',
 
-    contentBody: 'overflow-y-auto max-h-64',
+    contentBody: 'overflow-y-auto max-h-64 min-w-[280px]',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 

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 } 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'
@@ -90,9 +102,22 @@ 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) => {
+watch(items, (newValue) => {
   if (props.expandable) internalItems.value = clone(newValue as any)
 }, { immediate: true })
 
@@ -153,125 +178,139 @@ 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"
+              @click="$emit('click-row', item.data)"
             >
-              <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.virtualListItemHeight ? {
+                  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/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/composables/index.ts

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