@soft-stech/bootsman-ui-shadcn 2.0.21 → 2.0.23

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,27 +64,8 @@ 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#'
@@ -87,6 +99,7 @@ const props = withDefaults(
     columnResetVisibility?: string
     paginationTranslations?: {
       itemsPerPage: string
+      itemsPerPageAuto: string
       page: string
       of: string
     }
@@ -113,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')
@@ -182,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
@@ -277,16 +299,35 @@ const {
   isMouseUpOnHandler
 } = useResizeColumns()
 
+const isColumnSizingEnabled = computed(() => props.enableColumnResizing && columnSizing.value)
+
 onBeforeMount(() => {
   calculatedColumnSizing.value = columnSizing.value
 })
 
 onMounted(() => {
-  if (tableElementRef.value && tableHeaderRef.value) {
+  if (isColumnSizingEnabled.value && tableElementRef.value && tableHeaderRef.value) {
     tableElement.value = tableElementRef.value
     tableHeaderElement.value = tableHeaderRef.value
 
-    setInitialColumnWidths()
+    //проставляем изначальные значения ширины колонок, только если на маунте таблицу видно
+    if (tableElementRef.value.tableRef?.offsetWidth !== 0) {
+      setInitialColumnWidths()
+    }
+
+    //дополнительно проставляем значения ширины колонок, когда таблица появляется на экране
+    const { stop } = useIntersectionObserver(
+      tableElementRef.value.tableRef,
+      ([{ isIntersecting }]) => {
+        if (isIntersecting) {
+          if (!tableElementRef.value?.tableRef?.getAttribute('initialResize')) {
+            setInitialColumnWidths()
+          }
+
+          stop()
+        }
+      }
+    )
   }
 
   groupsOpenStateInStorage.value = {}
@@ -417,6 +458,65 @@ watch(isResizing, () => {
     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>
@@ -506,7 +606,7 @@ watch(isResizing, () => {
           />
           <div
             v-if="
-              enableColumnResizing &&
+              isColumnSizingEnabled &&
               index < tableHeaders.length - 1 &&
               header.column.getCanResize()
             "
@@ -635,6 +735,14 @@ watch(isResizing, () => {
           <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
@@ -654,6 +762,7 @@ watch(isResizing, () => {
       :total="computedItems"
       v-model:pageIndex="pageIndex"
       v-model:pageSize="tablePageSize"
+      v-model:pageAuto="pageAuto"
       :translations="paginationTranslations"
     >
     </BuiPaginationCommon>

package/src/components/table/BuiTable.vue

@@ -14,6 +14,7 @@ defineExpose({ tableRef, scrollAreaElementRef })
   <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] w-full grow flex-col">

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/useResizeColumns.ts

@@ -36,7 +36,10 @@ export function useResizeColumns() {
       headerCells.forEach((cell) => {
         const cellId = getCellId(cell)
 
-        cell.style.width = columnSizing && columnSizing[cellId] ? columnSizing[cellId] + 'px' : ''
+        cell.style.width =
+          columnSizing && columnSizing[cellId] && columnSizing[cellId] !== 0
+            ? columnSizing[cellId] + 'px'
+            : ''
       })
     }
   }
@@ -49,6 +52,12 @@ export function useResizeColumns() {
       tableElement.value?.tableRef
     ) {
       const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
+
+      if (calculatedColumnSizing.value && calculatedColumnSizing.value['table'] === 0) {
+        calculatedColumnSizing.value = {}
+        tableElement.value.tableRef.style.width = ''
+      }
+
       const tableInitialWidth = getTableWidth()
 
       tableElement.value.tableRef.style.width = 'min-content'
@@ -316,11 +325,14 @@ export function useResizeColumns() {
         } else {
           initialTableWidth.value = tableOffsetWidth
           tableElement.value.tableRef.style.width = tableOffsetWidth + 'px'
+
+          tableElement.value.tableRef.setAttribute('initialResize', 'set')
           updatedColumnSizingValue['table'] = tableOffsetWidth
         }
       }
 
       minTableWidth.value = getTableWrapperWidth()
+
       calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }

package/src/stories/BuiDataTable.stories.ts

@@ -1,5 +1,6 @@
 import { BuiDataTable } from '@/components/table'
 import BuiDataTableStory from '@/stories/components/BuiDataTableStory.vue'
+import BuiDataTableWithScrollStory from '@/stories/components/BuiDataTableWithScrollStory.vue'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 const meta = {
@@ -24,3 +25,15 @@ export const Default: Story = {
     template: `<BuiDataTableStory v-bind="args" />`
   })
 }
+
+export const WithScroll: Story = {
+  // @ts-expect-error no need to describe all args, see BuiDataTableStory
+  args: {},
+  render: (args) => ({
+    components: { BuiDataTableWithScrollStory },
+    setup() {
+      return { args }
+    },
+    template: `<BuiDataTableWithScrollStory v-bind="args" />`
+  })
+}

package/src/stories/components/BuiDataTableStory.vue

@@ -3,7 +3,6 @@ import { BuiDataTable } from '@/components/table'
 import RowActionsMenuContent from './ActionsMenuContent.vue'
 import type {
   ColumnDef,
-  PaginationState,
   Row,
   RowSelectionState,
   VisibilityState,
@@ -25,6 +24,7 @@ import { BuiCheckbox } from '@/components/checkbox'
 import { tableColumnSortCommon } from '@/lib/utils'
 import { BuiButton } from '@/components/button'
 import { BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/components/tabs'
+import type { PaginationAutoState } from '@/components/table/BuiDataTable.vue'
 
 const taskSchema = z.object({
   id: z.string(),
@@ -102,7 +102,7 @@ function onGroupAction(group: string | number, action: string) {
 
 type TaskSortingState = { id: keyof Task; desc: boolean }
 const sorting = ref<TaskSortingState[]>([{ id: 'id', desc: false }])
-const pagination = ref<PaginationState>({
+const pagination = ref<PaginationAutoState>({
   pageIndex: 0,
   pageSize: 10
 })
@@ -202,7 +202,6 @@ function groupName(group: string | number) {
         v-model:column-order="columnOrder"
         @update:selection="updateSelection"
         :total-items="totalItems"
-        class="caption-top"
         :manualPagination="false"
         :getRowId="(row) => row.id"
         :groupBy="groupBy === 'none' ? undefined : groupBy"
@@ -212,6 +211,7 @@ function groupName(group: string | number) {
         :enable-group-folding="true"
         :pagination-translations="{
           itemsPerPage: 'Tasks per page',
+          itemsPerPageAuto: 'Auto',
           page: 'Page',
           of: 'of'
         }"