@soft-stech/bootsman-ui-shadcn 1.1.16 → 1.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "type": "module",
   "files": [
     "dist",
@@ -60,6 +60,7 @@
     "bumpp": "9.4.0",
     "eslint": "8.57.0",
     "eslint-plugin-vue": "9.24.0",
+    "fast-sort": "^3.4.0",
     "glob": "10.3.10",
     "histoire": "0.17.15",
     "jsdom": "23.2.0",

package/src/components/stories/{Collapsible.story.vue → BuiCollapsible.story.vue}

@@ -8,7 +8,7 @@ const isOpen = ref(false)
 
 <template>
   <Story title="BuiCollapsible" autoPropsDisabled>
-    <Variant :key="`variant-default`" :title="`Tooltip`">
+    <Variant :key="`variant-default`" :title="`Default`">
       <div class="flex justify-center pt-12">
         <BuiCollapsible v-model:open="isOpen" class="w-[350px] space-y-2">
           <div class="flex items-center justify-between space-x-4 px-4">

package/src/components/stories/BuiDataTable.story.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
 import { BuiDataTable } from '@/components/ui/table'
-import type {
-  ColumnDef,
-  PaginationState,
-  RowSelectionState,
-  SortingState
-} from '@tanstack/vue-table'
-import { h, ref } from 'vue'
-import { z } from 'zod'
-import { BuiButton, BuiCheckbox } from '@/index'
+import { BuiButton, BuiCheckbox, BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/index'
 import { tableColumnSortCommon } from '@/lib/utils'
+import type { ColumnDef, PaginationState, Row, RowSelectionState } from '@tanstack/vue-table'
+import { sort, type ISortByObjectSorter } from 'fast-sort'
 import { logEvent } from 'histoire/client'
+import { AlignJustifyIcon, FolderIcon } from 'lucide-vue-next'
+import { computed, h, ref } from 'vue'
+import { z } from 'zod'
 import tasks from './data/tasks.json'
 
 const taskSchema = z.object({
@@ -18,7 +15,8 @@ const taskSchema = z.object({
   title: z.string(),
   status: z.string(),
   label: z.string(),
-  priority: z.string()
+  priority: z.string(),
+  errorMessage: z.string().optional()
 })
 type Task = z.infer<typeof taskSchema>
 const columns: ColumnDef<Task>[] = [
@@ -59,7 +57,8 @@ const columns: ColumnDef<Task>[] = [
 ]
 const data = ref<Task[]>(tasks)
 
-const sorting = ref<SortingState>([{ id: 'status', desc: false }])
+type TaskSortingState = { id: keyof Task; desc: boolean }
+const sorting = ref<TaskSortingState[]>([{ id: 'id', desc: false }])
 const pagination = ref<PaginationState>({
   pageIndex: 0,
   pageSize: 10
@@ -71,14 +70,42 @@ function updateSelection(val: RowSelectionState) {
   logEvent('selection was changed', val)
   selection.value = val
 }
+
+type GroupBy = 'none' | 'status'
+const groupBy = ref<GroupBy>('none')
+const groupLabels = {
+  status: 'Status'
+}
+
+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]: groupByStr === 'none' ? sortColumn : [(row) => row[groupByStr], sortColumn]
+    }
+  ]
+
+  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
+  }
+}
 </script>
 
 <template>
   <Story title="BuiDataTable" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
-    <Variant key="variant" title="Sorting, Pagination">
+    <Variant key="variant" title="Sorting, Pagination, Grouping, Subrow">
       <BuiDataTable
         :columns="columns"
-        :data="data"
+        :data="sortedData"
         v-model:sorting="sorting"
         v-model:pagination="pagination"
         @update:selection="updateSelection"
@@ -86,14 +113,29 @@ function updateSelection(val: RowSelectionState) {
         class="caption-top"
         :manualPagination="false"
         :getRowId="(row) => row.id"
+        :groupBy="groupBy === 'none' ? undefined : groupBy"
+        :groupLabels="groupLabels"
+        :renderSubComponent="renderSubComponent"
       >
         <template #caption="{ table }">
           <div class="flex justify-between">
             <BuiButton variant="outline">Download YAML</BuiButton>
-            <span
-              >{{ table.getFilteredSelectedRowModel().rows?.length }} of
-              {{ table.getFilteredRowModel().rows?.length }} row(s) selected</span
-            >
+
+            <BuiTabs v-model="groupBy">
+              <BuiTabsList class="grid w-full grid-cols-2" :variant="'default'">
+                <BuiTabsTrigger value="none" :variant="'default'"
+                  ><AlignJustifyIcon
+                /></BuiTabsTrigger>
+                <BuiTabsTrigger value="status" :variant="'default'">
+                  <FolderIcon />
+                </BuiTabsTrigger>
+              </BuiTabsList>
+            </BuiTabs>
+
+            <span>
+              {{ table.getFilteredSelectedRowModel().rows?.length }} of
+              {{ table.getFilteredRowModel().rows?.length }} row(s) selected
+            </span>
           </div>
         </template>
       </BuiDataTable>

package/src/components/stories/data/tasks.json

@@ -417,7 +417,8 @@
     "title": "Backing up the driver won't do anything, we need to parse the redundant RAM pixel!",
     "status": "done",
     "label": "feature",
-    "priority": "medium"
+    "priority": "medium",
+    "errorMessage": "ERROR"
   },
   {
     "id": "TASK-1427",

package/src/components/ui/pagination/BuiPaginationCommon.vue

@@ -46,7 +46,7 @@ const pageSizeString = computed({
       :itemsPerPage="pageSize"
       v-model:page="pageIndex"
     >
-      <BuiPaginationList class="flex items-center justify-center gap-2">
+      <BuiPaginationList class="relative flex items-center justify-center gap-2">
         <p class="text-sm text-muted-foreground">Items per page</p>
         <BuiSelect v-model.number="pageSizeString">
           <BuiSelectTrigger class="mr-2 w-[70px]">

package/src/components/ui/table/BuiDataTable.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts" generic="TData, TValue">
+import {
+  BuiCollapsible,
+  BuiCollapsibleContent,
+  BuiCollapsibleTrigger
+} from '@/components/ui/collapsible'
+import { BuiPaginationCommon, type PageSize } from '@/components/ui/pagination'
+import BuiTableRowSubrow from '@/components/ui/table/BuiTableRowSubrow.vue'
+import { valueUpdater } from '@/lib/utils'
 import type {
   ColumnDef,
-  SortingState,
   PaginationState,
+  Row,
   RowSelectionState,
-  Row
+  SortingState
 } from '@tanstack/vue-table'
 import {
   FlexRender,
@@ -13,6 +21,7 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
+import { computed } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -24,9 +33,6 @@ import {
   BuiTableHeader,
   BuiTableRow
 } from './'
-import { BuiPaginationCommon, type PageSize } from '@/components/ui/pagination'
-import { valueUpdater } from '@/lib/utils'
-import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -37,7 +43,10 @@ const props = withDefaults(
     totalItems?: number
     manualPagination?: boolean
     manualSorting?: boolean
+    groupBy?: keyof TData
+    groupLabels?: { [key in keyof TData]?: string }
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
+    renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
   }>(),
   { pageSize: 10, showPagination: true, manualPagination: true, manualSorting: true, totalItems: 0 }
 )
@@ -105,6 +114,17 @@ const pageIndex = computed({
     table.setPageIndex(index - 1)
   }
 })
+
+const groupedRows = computed(() => {
+  if (!props.groupBy) return null
+
+  return table.getRowModel().rows.reduce((acc, row) => {
+    const col = row.getValue(props.groupBy! as string) as string
+    acc[col] = acc[col] || []
+    acc[col].push(row)
+    return acc
+  }, Object.create(null))
+})
 </script>
 
 <template>
@@ -123,21 +143,44 @@ const pageIndex = computed({
     </BuiTableHeader>
     <BuiTableBody>
       <template v-if="table.getRowModel().rows?.length">
-        <BuiTableRow
-          v-for="row in table.getRowModel().rows"
-          :key="row.id"
-          :data-state="row.getIsSelected() ? 'selected' : undefined"
-        >
-          <BuiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-          </BuiTableCell>
-        </BuiTableRow>
+        <template v-if="props.groupBy && groupedRows">
+          <BuiCollapsible asChild v-for="(value, key) in groupedRows" :key="key" :open="true">
+            <BuiCollapsibleTrigger asChild>
+              <BuiTableRow class="bg-foreground/[0.04]">
+                <BuiTableCell :colspan="columns.length" class="!pb-0">
+                  <div class="inline-block rounded-t bg-background px-4 py-3">
+                    {{ props.groupLabels && props.groupLabels[props.groupBy] }}: {{ key }}
+                  </div>
+                </BuiTableCell>
+              </BuiTableRow>
+            </BuiCollapsibleTrigger>
+            <BuiCollapsibleContent asChild>
+              <template v-for="row in value" :key="row.id">
+                <BuiTableRowSubrow
+                  :columns="props.columns"
+                  :row="row"
+                  :renderSubComponent="props.renderSubComponent"
+                />
+              </template>
+            </BuiCollapsibleContent>
+          </BuiCollapsible>
+        </template>
+
+        <template v-else>
+          <template v-for="row in table.getRowModel().rows" :key="row.id">
+            <BuiTableRowSubrow
+              :columns="props.columns"
+              :row="row"
+              :renderSubComponent="props.renderSubComponent"
+            />
+          </template>
+        </template>
       </template>
       <template v-else>
         <BuiTableEmpty :colspan="columns.length">No data</BuiTableEmpty>
       </template>
     </BuiTableBody>
-    <BuiTableFooter v-if="showPagination && table.getPageCount()">
+    <BuiTableFooter v-if="showPagination && table.getPageCount() > 1">
       <BuiTableRow>
         <BuiTableCell :colspan="columns.length">
           <BuiPaginationCommon

package/src/components/ui/table/BuiTableRowSubrow.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts" generic="TData, TValue">
+import { BuiTableCell, BuiTableRow } from '@/components/ui/table'
+import { FlexRender, type ColumnDef, type Row } from '@tanstack/vue-table'
+
+const props = defineProps<{
+  row: Row<TData>
+  renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
+  columns: ColumnDef<TData, TValue>[]
+}>()
+</script>
+
+<template>
+  <BuiTableRow
+    :data-state="row.getIsSelected() ? 'selected' : undefined"
+    :class="props.renderSubComponent?.(row) ? 'border-b-0' : ''"
+  >
+    <BuiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+      <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+    </BuiTableCell>
+  </BuiTableRow>
+
+  <BuiTableRow
+    v-if="props.renderSubComponent?.(row)"
+    :data-state="row.getIsSelected() ? 'selected' : undefined"
+  >
+    <BuiTableCell :colspan="columns.length" class="pt-0">
+      <component :is="props.renderSubComponent?.(row)?.()"></component>
+    </BuiTableCell>
+  </BuiTableRow>
+</template>

package/src/components/ui/table/index.ts

@@ -4,6 +4,7 @@ export { default as BuiTableCell } from './BuiTableCell.vue'
 export { default as BuiTableHead } from './BuiTableHead.vue'
 export { default as BuiTableHeader } from './BuiTableHeader.vue'
 export { default as BuiTableRow } from './BuiTableRow.vue'
+export { default as BuiTableRowSubrow } from './BuiTableRowSubrow.vue'
 export { default as BuiTableCaption } from './BuiTableCaption.vue'
 export { default as BuiTableEmpty } from './BuiTableEmpty.vue'
 export { default as BuiTableFooter } from './BuiTableFooter.vue'