@soft-stech/bootsman-ui-shadcn 2.0.20 → 2.0.22

package/src/components/pagination/BuiPaginationCommon.vue

@@ -24,6 +24,7 @@ const props = defineProps<{
   total: number
   translations?: {
     itemsPerPage: string
+    itemsPerPageAuto: string
     page: string
     of: string
   }
@@ -31,14 +32,21 @@ const props = defineProps<{
 
 const pageSize = defineModel<PageSize>('pageSize', { default: 10, required: true })
 const pageIndex = defineModel<number>('pageIndex', { default: 1, required: true })
+const pageAuto = defineModel<boolean | undefined>('pageAuto', { default: false, required: true })
 const totalPages = computed(() => Math.ceil(props.total / pageSize.value))
 
 const pageSizeString = computed({
   get() {
-    return String(pageSize.value)
+    return pageAuto.value ? props.translations?.itemsPerPageAuto || 'Auto' : String(pageSize.value)
   },
   set(value: string) {
-    pageSize.value = parseInt(value) as PageSize
+    pageAuto.value = value === 'auto'
+
+    if (value === 'auto') {
+      pageIndex.value = 1
+    } else {
+      pageSize.value = parseInt(value) as PageSize
+    }
   }
 })
 </script>
@@ -56,15 +64,19 @@ const pageSizeString = computed({
       </p>
       <BuiSelect v-model="pageSizeString">
         <BuiSelectTrigger class="mr-2 w-[70px]">
-          <BuiSelectValue :placeholder="pageSize.toString()" />
+          <BuiSelectValue :placeholder="pageSizeString" />
         </BuiSelectTrigger>
         <BuiSelectContent side="top">
+          <BuiSelectItem key="auto" value="auto">
+            {{ props.translations?.itemsPerPageAuto || 'Auto' }}
+          </BuiSelectItem>
+
           <BuiSelectItem v-for="pageSize in pageSizes" :key="pageSize" :value="pageSize.toString()">
             {{ pageSize }}
           </BuiSelectItem>
         </BuiSelectContent>
       </BuiSelect>
-      <template v-if="totalPages > 1">
+      <template v-if="!pageAuto && totalPages > 1">
         <p class="text-muted-foreground text-sm">
           {{ translations?.page || 'Page' }} {{ page }} {{ translations?.of || 'of' }}
           {{ totalPages }}

package/src/components/scroll-area/BuiScrollArea.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed, ref } from 'vue'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
@@ -16,10 +16,17 @@ const delegatedProps = computed(() => {
 
   return delegated
 })
+
+const tableWrapperRef = ref<InstanceType<typeof ScrollAreaRoot> | null>(null)
+defineExpose({ tableWrapperRef })
 </script>
 
 <template>
-  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+  <ScrollAreaRoot
+    ref="tableWrapperRef"
+    v-bind="delegatedProps"
+    :class="cn('relative overflow-hidden', props.class)"
+  >
     <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>

package/src/components/scroll-area/BuiScrollBar.vue

@@ -22,13 +22,13 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'z-2 flex touch-none select-none transition-colors',
-        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
-        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
+        'z-10 flex touch-none transition-colors select-none',
+        props.orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+        props.orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
         props.class
       )
     "
   >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaThumb class="bg-border relative flex-1 rounded-full" />
   </ScrollAreaScrollbar>
 </template>

package/src/components/table/BuiDataTable.vue

@@ -1,17 +1,38 @@
+<script lang="ts">
+import type { PaginationState } from '@tanstack/vue-table'
+
+export type PaginationAutoState = PaginationState & {
+  pageAuto?: boolean
+}
+</script>
+
 <script setup lang="ts" generic="TData, TValue">
+import { BuiButton } from '@/components/button'
 import {
   BuiCollapsible,
   BuiCollapsibleContent,
   BuiCollapsibleTrigger
 } from '@/components/collapsible'
+import {
+  BuiCommand,
+  BuiCommandEmpty,
+  BuiCommandInput,
+  BuiCommandItem,
+  BuiCommandList,
+  BuiCommandSeparator
+} from '@/components/command'
+import { BuiContextMenuContent, BuiContextMenuItem } from '@/components/context-menu'
 import { BuiPaginationCommon, type PageSize } from '@/components/pagination'
+import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/popover'
+import { BuiScrollArea } from '@/components/scroll-area'
 import BuiTableRowSubrow from '@/components/table/BuiTableRowSubrow.vue'
+import { useResizeColumns } from '@/lib/useResizeColumns'
+import { cn, valueUpdater } from '@/lib/utils'
 import type {
   Column,
   ColumnDef,
   ColumnOrderState,
   Header,
-  PaginationState,
   Row,
   RowSelectionState,
   SortingState,
@@ -24,8 +45,18 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed, watchEffect, ref, watch, onMounted, onBeforeMount, nextTick } from 'vue'
 import {
+  useElementSize,
+  useEventListener,
+  useSessionStorage,
+  useIntersectionObserver,
+  useElementVisibility
+} from '@vueuse/core'
+import { isEqual } from 'lodash-es'
+import { ChevronDown, Settings2Icon } from 'lucide-vue-next'
+import { computed, nextTick, onBeforeMount, onMounted, ref, watch, watchEffect } from 'vue'
+import {
+  BuiDataTableColumnList,
   BuiTable,
   BuiTableBody,
   BuiTableCell,
@@ -33,32 +64,15 @@ import {
   BuiTableHead,
   BuiTableHeader,
   BuiTableRow,
-  getPinningStyle,
-  BuiDataTableColumnList
+  getPinningStyle
 } from './'
-import {
-  BuiCommand,
-  BuiCommandEmpty,
-  BuiCommandInput,
-  BuiCommandList,
-  BuiCommandItem,
-  BuiCommandSeparator
-} from '@/components/command'
-import { BuiContextMenuContent, BuiContextMenuItem } from '@/components/context-menu'
-import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/popover'
-import { BuiScrollArea } from '@/components/scroll-area'
-import { BuiButton } from '@/components/button'
-import { Settings2Icon, ChevronDown } from 'lucide-vue-next'
-import { useElementSize, useEventListener } from '@vueuse/core'
-import { isEqual } from 'lodash-es'
-import { cn, valueUpdater } from '@/lib/utils'
-import { useResizeColumns } from '@/lib/useResizeColumns'
-import { useSessionStorage } from '@vueuse/core'
+import { useGlobalCursor } from '@/lib/useGlobalCursor'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 const defaultColumnContextMenuTranslations = {
   hideColumn: 'Hide column',
-  resetSize: 'Reset size',
+  resetThisSize: 'Reset size for this column',
+  resetSize: 'Reset size for all columns',
   sortAsc: 'Sort ascending',
   sortDesc: 'Sort descending'
 }
@@ -85,11 +99,13 @@ const props = withDefaults(
     columnResetVisibility?: string
     paginationTranslations?: {
       itemsPerPage: string
+      itemsPerPageAuto: string
       page: string
       of: string
     }
     headerContextMenuTranslations?: {
       hideColumn?: string
+      resetThisSize?: string
       resetSize?: string
       sortAsc?: string
       sortDesc?: string
@@ -110,7 +126,7 @@ const props = withDefaults(
 )
 
 const sorting = defineModel<SortingState>('sorting')
-const pagination = defineModel<PaginationState>('pagination')
+const pagination = defineModel<PaginationAutoState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
 const columnVisibility = defineModel<VisibilityState>('columnVisibility')
 const columnOrder = defineModel<ColumnOrderState>('columnOrder')
@@ -152,7 +168,6 @@ const table = useVueTable({
     await nextTick()
 
     resetCells()
-    setInitialColumnWidths()
   },
   onColumnOrderChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnOrder)
@@ -180,6 +195,15 @@ const table = useVueTable({
   getRowId: props.getRowId
 })
 
+const pageAuto = computed({
+  get() {
+    return pagination.value?.pageAuto || false
+  },
+  set: (state: boolean) => {
+    if (!pagination.value) return
+    pagination.value.pageAuto = state
+  }
+})
 const tablePageSize = computed<PageSize>({
   get() {
     return table.getState().pagination.pageSize as PageSize
@@ -257,18 +281,20 @@ watch(columnsListIds, () => {
 })
 
 const tableHeaderRef = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+const tableElementRef = ref<InstanceType<typeof BuiTable> | null>(null)
 const { height } = useElementSize(tableHeaderRef)
 
 const {
   tableHeaderElement,
+  tableElement,
   calculatedColumnSizing,
   isResizing,
   resizingCellId,
+  resetCell,
   resetCells,
   handleResizeControlMouseDown,
   handleResizeControlMouseUp,
   setInitialColumnWidths,
-  setProvidedCellWidths,
   isMouseDownOnHandler,
   isMouseUpOnHandler
 } = useResizeColumns()
@@ -278,10 +304,10 @@ onBeforeMount(() => {
 })
 
 onMounted(() => {
-  if (tableHeaderRef.value) {
+  if (tableElementRef.value && tableHeaderRef.value) {
+    tableElement.value = tableElementRef.value
     tableHeaderElement.value = tableHeaderRef.value
 
-    setProvidedCellWidths(columnSizing.value)
     setInitialColumnWidths()
   }
 
@@ -304,7 +330,7 @@ const getHeaderCellSortingButton = (header: Header<TData, unknown>) => {
   return currentHeaderCell?.querySelector('button[sorting-enabled]')
 }
 
-type HeaderCellAction = 'hideColumn' | 'resetSize' | 'sortAsc' | 'sortDesc'
+type HeaderCellAction = 'hideColumn' | 'resetThisSize' | 'resetSize' | 'sortAsc' | 'sortDesc'
 const availableHeaderCellActions = (header: Header<TData, unknown>) => {
   const out: HeaderCellAction[] = []
 
@@ -319,6 +345,7 @@ const availableHeaderCellActions = (header: Header<TData, unknown>) => {
   }
 
   if (props.enableColumnResizing) {
+    out.push('resetThisSize')
     out.push('resetSize')
   }
 
@@ -329,6 +356,9 @@ const onHeaderCellAction = (header: Header<TData, unknown>, action: HeaderCellAc
     case 'hideColumn':
       header.column.toggleVisibility()
       break
+    case 'resetThisSize':
+      resetCell(header.id)
+      break
     case 'resetSize':
       resetCells()
       break
@@ -399,13 +429,82 @@ const handleHeaderCellMouseDown = (e: Event) => {
   isMouseDownOnHandler.value =
     targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
 }
+
+const { setCursor, resetCursor } = useGlobalCursor()
+
+watch(isResizing, () => {
+  if (isResizing.value) {
+    setCursor('col-resize')
+  } else {
+    resetCursor()
+  }
+})
+
+const rows = computed(() => table.getRowModel().rows)
+const rowsLength = computed(() => rows.value.length)
+const sentinel = ref<HTMLElement | null>(null)
+const sentinelVisible = useElementVisibility(sentinel)
+const sentinelKey = computed(() => `sentinel-${rowsLength.value}`)
+
+const { stop } = useIntersectionObserver(
+  sentinel,
+  async ([{ isIntersecting }]) => {
+    if (isIntersecting && pageAuto.value) {
+      await nextTick()
+      loadMore()
+    }
+
+    if (tablePageSize.value >= props.totalItems) {
+      stop()
+    }
+  },
+  {
+    rootMargin: '0px 0px 50px 0px'
+  }
+)
+
+let loadingMore = false
+async function loadMore() {
+  if (loadingMore) return
+  loadingMore = true
+
+  const newSize = Math.min(tablePageSize.value + 50, props.totalItems)
+  table.setPageSize(newSize)
+
+  await nextTick()
+  loadingMore = false
+}
+
+watch(pageAuto, (newPageAuto, oldPageAuto) => {
+  if (newPageAuto && !oldPageAuto) {
+    if (tableElementRef.value && tableElementRef.value.scrollAreaElementRef?.tableWrapperRef) {
+      tableElementRef.value.scrollAreaElementRef.tableWrapperRef.scrollTop()
+    }
+  }
+})
+
+const isUpdating = ref(false)
+watch(rowsLength, async () => {
+  if (!pageAuto.value || isUpdating.value) return
+
+  isUpdating.value = true
+  await nextTick()
+
+  //Add a small delay to ensure rendering is complete
+  setTimeout(() => {
+    if (sentinelVisible.value) {
+      loadMore()
+    }
+    isUpdating.value = false
+  }, 50)
+})
 </script>
 
 <template>
   <div v-if="$slots.caption" class="w-full py-3">
     <slot name="caption" :table="table" />
   </div>
-  <BuiTable>
+  <BuiTable ref="tableElementRef">
     <template v-if="enableColumnListControl" #columnVisibility>
       <BuiPopover v-model:open="open">
         <BuiPopoverTrigger as-child>
@@ -449,6 +548,17 @@ const handleHeaderCellMouseDown = (e: Event) => {
                 >
                   {{ columnResetVisibility }}
                 </BuiCommandItem>
+                <BuiCommandItem
+                  value="reset_columns_size"
+                  key="reset_columns_size"
+                  class="text-muted-foreground px-2 py-1.5 font-medium"
+                  @select="resetCells"
+                >
+                  {{
+                    headerContextMenuTranslations?.['resetSize'] ??
+                    defaultColumnContextMenuTranslations['resetSize']
+                  }}
+                </BuiCommandItem>
               </BuiScrollArea>
             </BuiCommandList>
           </BuiCommand>
@@ -499,9 +609,8 @@ const handleHeaderCellMouseDown = (e: Event) => {
                 :key="idx"
               >
                 {{
-                  headerContextMenuTranslations && headerContextMenuTranslations[action]
-                    ? headerContextMenuTranslations[action]
-                    : defaultColumnContextMenuTranslations[action]
+                  headerContextMenuTranslations?.[action] ??
+                  defaultColumnContextMenuTranslations[action]
                 }}
               </BuiContextMenuItem>
             </BuiContextMenuContent>
@@ -518,7 +627,7 @@ const handleHeaderCellMouseDown = (e: Event) => {
             v-for="(value, key) in groupedRows"
             :key="key"
             v-model:open="groupsOpenStateRef[key]"
-            @update:open="(value) => handleGroupToggle(value, key)"
+            @update:open="(value: boolean) => handleGroupToggle(value, key)"
           >
             <BuiTableRow class="bg-foreground/4 border-b-0">
               <BuiTableCell :colspan="columns.length" class="pb-0!">
@@ -607,6 +716,14 @@ const handleHeaderCellMouseDown = (e: Event) => {
           <slot name="nodata">No data</slot>
         </BuiTableEmpty>
       </template>
+
+      <tr
+        v-if="pageAuto && tablePageSize < props.totalItems"
+        ref="sentinel"
+        class="h-4 w-full"
+        :data-key="sentinelKey"
+        :key="sentinelKey"
+      />
     </BuiTableBody>
   </BuiTable>
   <div
@@ -626,6 +743,7 @@ const handleHeaderCellMouseDown = (e: Event) => {
       :total="computedItems"
       v-model:pageIndex="pageIndex"
       v-model:pageSize="tablePageSize"
+      v-model:pageAuto="pageAuto"
       :translations="paginationTranslations"
     >
     </BuiPaginationCommon>

package/src/components/table/BuiTable.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import { BuiScrollArea, BuiScrollBar } from '@/components/scroll-area'
 import { cn } from '@/lib/utils'
+import { ref } from 'vue'
 
 const props = defineProps<{ class?: string }>()
+const tableRef = ref<HTMLTableElement | undefined>(undefined)
+const scrollAreaElementRef = ref<InstanceType<typeof BuiScrollArea> | null>(null)
+
+defineExpose({ tableRef, scrollAreaElementRef })
 </script>
 
 <template>
-  <BuiScrollArea class="border-border/16 w-full grow overflow-auto rounded-sm border">
+  <BuiScrollArea
+    ref="scrollAreaElementRef"
+    class="border-border/16 w-full grow overflow-auto rounded-sm border"
+    :scroll-hide-delay="100"
+  >
     <slot name="columnVisibility" />
-    <div class="flex min-h-[90px] grow flex-col">
-      <table :class="cn('h-full w-full caption-top text-sm', props.class)">
+    <div class="flex min-h-[90px] w-full grow flex-col">
+      <table ref="tableRef" :class="cn('h-full caption-top text-sm', props.class)">
         <slot />
       </table>
     </div>

package/src/components/table/BuiTableRow.vue

@@ -4,6 +4,10 @@ import { cn } from '@/lib/utils'
 
 const props = defineProps<{ class?: string }>()
 const emits = defineEmits(['mouseenter', 'mouseleave'])
+
+defineOptions({
+  inheritAttrs: false
+})
 </script>
 
 <template>
@@ -19,6 +23,7 @@ const emits = defineEmits(['mouseenter', 'mouseleave'])
         :data-row-state="$attrs['data-row-state']"
         @mouseenter="emits('mouseenter')"
         @mouseleave="emits('mouseleave')"
+        v-bind="$attrs"
       >
         <slot />
       </tr>
@@ -36,6 +41,7 @@ const emits = defineEmits(['mouseenter', 'mouseleave'])
     :data-row-state="$attrs['data-row-state']"
     @mouseenter="emits('mouseenter')"
     @mouseleave="emits('mouseleave')"
+    v-bind="$attrs"
   >
     <slot />
   </tr>

package/src/components/table/index.ts

@@ -14,6 +14,8 @@ export { default as BuiTableFooter } from './BuiTableFooter.vue'
 export { default as BuiDataTable } from './BuiDataTable.vue'
 export { default as BuiDataTableColumnList } from './BuiDataTableColumnList.vue'
 
+export type { PaginationAutoState } from './BuiDataTable.vue'
+
 export function getPinningStyle<TData>(_column: Column<TData, unknown>): CSSProperties {
   // FYI sticky columns not possible with transparent background colors
   // const isPinned = column.getIsPinned()

package/src/lib/useGlobalCursor.ts

@@ -0,0 +1,17 @@
+import { onUnmounted } from 'vue'
+
+export function useGlobalCursor() {
+  function setCursor(cursor: string) {
+    document.body.style.cursor = cursor
+  }
+
+  function resetCursor() {
+    document.body.style.cursor = ''
+  }
+
+  onUnmounted(() => {
+    resetCursor()
+  })
+
+  return { setCursor, resetCursor }
+}