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

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
@@ -417,6 +439,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>
@@ -635,6 +716,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 +743,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/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'
         }"

package/src/stories/components/BuiDataTableWithScrollStory.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { BuiDataTable } from '@/components/table'
+import RowActionsMenuContent from './ActionsMenuContent.vue'
+import type {
+  ColumnDef,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+  ColumnOrderState
+} from '@tanstack/vue-table'
+import { sort, type ISortByObjectSorter } from 'fast-sort'
+import {
+  AlignJustifyIcon,
+  ArrowUpNarrowWideIcon,
+  FolderIcon,
+  SignalHighIcon,
+  SignalMediumIcon,
+  SignalLowIcon
+} from 'lucide-vue-next'
+import { computed, h, ref, withModifiers } from 'vue'
+import { z } from 'zod'
+import tasks from '@/stories/data/tasks.json'
+import { BuiCheckbox } from '@/components/checkbox'
+import { tableColumnSortCommon } from '@/lib/utils'
+import { BuiButton } from '@/components/button'
+import { BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/components/tabs'
+
+const taskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  status: z.string().nullable().optional(),
+  label: z.string(),
+  priority: z.string(),
+  errorMessage: z.string().optional(),
+  age: z.string().optional()
+})
+type Task = z.infer<typeof taskSchema>
+
+const columns: ColumnDef<Task>[] = [
+  {
+    id: 'id',
+    accessorKey: 'id',
+    header: ({ table, column }) => {
+      return h('div', { class: 'flex items-center gap-2' }, [
+        h(BuiCheckbox, {
+          modelValue: table.getIsSomePageRowsSelected()
+            ? 'indeterminate'
+            : table.getIsAllPageRowsSelected(),
+          'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+            table.getIsSomePageRowsSelected()
+              ? table.toggleAllPageRowsSelected(false)
+              : table.toggleAllPageRowsSelected(!!value),
+          ariaLabel: 'Select row',
+          onClick: withModifiers(() => {}, ['stop'])
+        }),
+        tableColumnSortCommon(column, 'ID')
+      ])
+    },
+    cell: ({ row }) =>
+      h('div', { class: 'flex items-center gap-2' }, [
+        h(BuiCheckbox, {
+          modelValue: row.getIsSelected(),
+          'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+          ariaLabel: 'Select row'
+        }),
+        `${row.getValue('id')}`
+      ]),
+    enableHiding: false,
+    meta: { title: 'ID', pinLeft: true }
+  },
+  {
+    accessorKey: 'title',
+    header: 'Title',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => tableColumnSortCommon(column, 'Очень длинный заголовок для статуса'),
+    meta: { title: 'Статус таска' }
+  },
+  {
+    accessorKey: 'priority',
+    header: ({ column }) => tableColumnSortCommon(column, 'Priorities')
+  },
+  {
+    accessorKey: 'age',
+    header: ({ column }) => tableColumnSortCommon(column, 'Age')
+  },
+  { id: 'hiddenColumn', header: 'Hidden Column', cell: 'secret info' }
+]
+const data = ref<Task[]>(tasks)
+
+function onRowAction(row: Task, action: string) {
+  const str = `${action}: ${row.id}`
+  alert(str)
+}
+function onGroupAction(group: string | number, action: string) {
+  const str = `${action}: ${group}`
+  alert(str)
+}
+
+type TaskSortingState = { id: keyof Task; desc: boolean }
+const sorting = ref<TaskSortingState[]>([{ id: 'id', desc: false }])
+const pagination = ref<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10
+})
+const totalItems = tasks.length
+
+const selection = ref<RowSelectionState | undefined>({})
+function updateSelection(val?: RowSelectionState) {
+  console.log('selection was changed', val)
+  selection.value = val
+}
+
+const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
+const columnSizing = ref<Record<string, number>>({ title: 450 })
+const columnOrder = ref<ColumnOrderState>()
+
+type GroupBy = 'none' | 'status' | 'priority'
+const groupBy = ref<GroupBy>('none')
+const groupLabels = {
+  status: ['Status', 'Not in any status'],
+  priority: ['Priority', 'Not in any priorities']
+}
+
+const sortedData = computed(() => {
+  const sortDirection = (sorting.value[0].desc ? 'desc' : 'asc') as 'asc'
+  const sortColumn = sorting.value[0].id
+  const groupByStr = groupBy.value
+
+  const sortBy: ISortByObjectSorter<Task> | ISortByObjectSorter<Task>[] = [
+    {
+      [sortDirection]: sortColumn
+    }
+  ]
+
+  // sort by grouping column first, but not when manually sorting by it
+  if (groupByStr !== 'none' && sortColumn !== groupByStr) {
+    sortBy.unshift({
+      asc: groupByStr
+    })
+  }
+
+  // sort by ID when possible
+  if (sortColumn !== 'id') {
+    sortBy.push({
+      asc: 'id'
+    })
+  }
+
+  return sort(data.value).by([...sortBy])
+})
+
+function renderSubComponent(row: Row<Task>) {
+  if (row.original.errorMessage) {
+    return () => h('span', { style: 'color: red' }, `Subrow: ${row.original.errorMessage}`)
+  } else {
+    return undefined
+  }
+}
+
+function deleteRow() {
+  data.value = data.value.map((a) => a)
+}
+function updateRows() {
+  data.value.shift()
+}
+
+function groupName(group: string | number) {
+  if (groupBy.value === 'priority') {
+    if (group === 'high') {
+      return () => h(SignalHighIcon, { class: 'size-4 inline-block' })
+    }
+
+    if (group === 'medium') {
+      return () => h(SignalMediumIcon, { class: 'size-4 inline-block' })
+    }
+
+    if (group === 'low') {
+      return () => h(SignalLowIcon, { class: 'size-4 inline-block' })
+    }
+
+    return () => group
+  }
+
+  return () => group
+}
+</script>
+
+<template>
+  <Story title="BuiDataTable" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
+    <Variant key="variant" title="Sorting, Pagination, Grouping, Subrow">
+      <div class="page-wrapper">
+        <div class="table-wrapper">
+          <BuiDataTable
+            :columns="columns"
+            :data="sortedData"
+            v-model:sorting="sorting"
+            v-model:pagination="pagination"
+            v-model:column-visibility="columnVisibility"
+            v-model:column-sizing="columnSizing"
+            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"
+            :groupLabels="groupLabels"
+            :renderSubComponent="renderSubComponent"
+            :freeze-header="true"
+            enable-column-list-control
+            :enable-group-folding="true"
+            :pagination-translations="{
+              itemsPerPage: 'Tasks per page',
+              itemsPerPageAuto: 'Auto',
+              page: 'Page',
+              of: 'of'
+            }"
+          >
+            <template #caption="{ table }">
+              <div class="flex h-fit items-center justify-between">
+                <div class="flex h-full flex-row items-center gap-3">
+                  <BuiButton variant="outline">Download YAML</BuiButton>
+                  <BuiButton variant="outline" @click="updateRows"> Delete row </BuiButton>
+                  <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
+                </div>
+
+                <div class="flex h-full flex-row items-center gap-3">
+                  <BuiTabs v-model="groupBy">
+                    <BuiTabsList class="grid w-full grid-cols-3" variant="default">
+                      <BuiTabsTrigger value="none" variant="default">
+                        <AlignJustifyIcon :size="14" />
+                      </BuiTabsTrigger>
+                      <BuiTabsTrigger value="status" variant="default">
+                        <FolderIcon :size="14" />
+                      </BuiTabsTrigger>
+                      <BuiTabsTrigger value="priority" variant="default">
+                        <ArrowUpNarrowWideIcon :size="14" />
+                      </BuiTabsTrigger>
+                    </BuiTabsList>
+                  </BuiTabs>
+
+                  <span>
+                    {{ table.getFilteredSelectedRowModel().rows?.length }} of
+                    {{ table.getFilteredRowModel().rows?.length }} row(s) selected
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template #nodata>No data</template>
+            <template #groupByRow="{ group }"> Optional slot for: `{{ group }}` </template>
+            <template #groupName="{ group }">
+              <component :is="groupName(group)"></component>
+            </template>
+            <template #groupActions="{ group }">
+              <RowActionsMenuContent
+                :actions="['Group action']"
+                @select="(action) => onGroupAction(group, action)"
+              />
+            </template>
+            <template #rowActions="{ row }">
+              <RowActionsMenuContent
+                :actions="['action 1', 'action 2']"
+                @select="(action) => onRowAction(row, action)"
+              />
+            </template>
+            <template #numberOfItems>{{ data.length }} tasks</template>
+          </BuiDataTable>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.page-wrapper {
+  height: 95vh;
+  flex-direction: column;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden auto;
+}
+
+.table-wrapper {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+</style>