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

package/dist/lib/utils.js

@@ -1,4 +1,4 @@
-import { c as m, t as r, v as e } from "../utils-Ctmb9SvZ.js";
+import { c as m, t as r, v as e } from "../utils-DMgok1im.js";
 import "vue";
 export {
   m as cn,

package/dist/{useFormField-DIILqNsN.js → useFormField-B4RKKA7i.js}

@@ -1,5 +1,5 @@
 import { ref as se, reactive as We, computed as k, unref as P, nextTick as me, warn as Rt, onMounted as Ut, isRef as qe, watch as fe, provide as Dt, toValue as S, readonly as dn, watchEffect as cn, getCurrentInstance as Ee, onUnmounted as Lt, defineComponent as Je, toRef as _e, resolveDynamicComponent as ht, h as Ge, shallowRef as fn, inject as Ce, onBeforeUnmount as $t } from "vue";
-import { F as vn } from "./BuiFormItem.vue_vue_type_script_setup_true_lang-Bl3E-8AX.js";
+import { F as vn } from "./BuiFormItem.vue_vue_type_script_setup_true_lang-BhdQMLMy.js";
 function mn() {
   return xt().__VUE_DEVTOOLS_GLOBAL_HOOK__;
 }

package/dist/{utils-Ctmb9SvZ.js → utils-DMgok1im.js}

@@ -1,5 +1,5 @@
 import { defineComponent as pe, openBlock as fe, createBlock as be, unref as O, normalizeClass as ge, withCtx as me, renderSlot as he, h as V } from "vue";
-import { bk as ye } from "./index-A8pqx8Hm.js";
+import { bm as ye } from "./index-BWXL7qjH.js";
 function se(e) {
   var r, t, o = "";
   if (typeof e == "string" || typeof e == "number")

package/dist/{x-CdDVes2u.js → x-BK5-DOwl.js}

@@ -1,4 +1,4 @@
-import { d as e } from "./utils-Ctmb9SvZ.js";
+import { d as e } from "./utils-DMgok1im.js";
 /**
  * @license lucide-vue-next v0.365.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.1.15",
+  "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/BuiToggleGroup.story.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { BuiToggleGroup, BuiToggleGroupItem } from '@/index'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Story title="BuiToggleGroup" autoPropsDisabled :layout="{ type: 'grid', width: '33%' }">
+    <Variant title="Single">
+      <BuiToggleGroup type="single">
+        <BuiToggleGroupItem value="bold" aria-label="Toggle bold">
+          <Bold class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="italic" aria-label="Toggle italic">
+          <Italic class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="underline" aria-label="Toggle underline">
+          <Underline class="h-4 w-4" />
+        </BuiToggleGroupItem>
+      </BuiToggleGroup>
+    </Variant>
+
+    <Variant title="Multiple">
+      <BuiToggleGroup type="multiple">
+        <BuiToggleGroupItem value="bold" aria-label="Toggle bold">
+          <Bold class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="italic" aria-label="Toggle italic">
+          <Italic class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="underline" aria-label="Toggle underline">
+          <Underline class="h-4 w-4" />
+        </BuiToggleGroupItem>
+      </BuiToggleGroup>
+    </Variant>
+  </Story>
+</template>

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'

package/src/components/ui/toggle-group/BuiToggleGroup.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, provide } from 'vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import type { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/ui/toggle-group/BuiToggleGroupItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, inject } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as BuiToggleGroup } from './BuiToggleGroup.vue'
+export { default as BuiToggleGroupItem } from './BuiToggleGroupItem.vue'

package/src/index.ts

@@ -32,6 +32,7 @@ export * from './components/ui/textarea/index'
 export * from './components/ui/toast/index'
 export * from './components/ui/tooltip/index'
 export * from './components/ui/toggle/index'
+export * from './components/ui/toggle-group/index'
 export * from './components/ui/slider/index'
 export * from './components/ui/skeleton/index'
 export * from './components/ui/scroll-area/index'