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

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

@@ -142,7 +142,6 @@
   {
     "id": "TASK-9285",
     "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!",
-    "status": "todo",
     "label": "bug",
     "priority": "high"
   },
@@ -219,7 +218,6 @@
   {
     "id": "TASK-9892",
     "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!",
-    "status": "done",
     "label": "documentation",
     "priority": "high"
   },
@@ -408,7 +406,7 @@
   {
     "id": "TASK-9549",
     "title": "You can't bypass the bus without connecting the neural JBOD bus!",
-    "status": "todo",
+    "status": null,
     "label": "feature",
     "priority": "high"
   },
@@ -417,7 +415,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/calendar/BuiCalendar.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import type { Calendar } from 'v-calendar'
-import { DatePicker } from 'v-calendar'
+import { DatePicker, type Calendar } from 'v-calendar'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from '.'
+import { isVCalendarSlot } from './index'
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 

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,8 @@ import {
   BuiTableHeader,
   BuiTableRow
 } from './'
-import { BuiPaginationCommon, type PageSize } from '@/components/ui/pagination'
-import { valueUpdater } from '@/lib/utils'
-import { computed } from 'vue'
+
+const NO_GROUP_KEY = '#UNDEFINED#'
 
 const props = withDefaults(
   defineProps<{
@@ -37,7 +45,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 +116,23 @@ const pageIndex = computed({
     table.setPageIndex(index - 1)
   }
 })
+
+const groupedRows = computed<{ [key: string]: Row<TData>[] }>(() => {
+  if (!props.groupBy) return null
+
+  return table.getRowModel().rows.reduce((acc, row) => {
+    const value = row.getValue(props.groupBy! as string)
+    const col = (value ?? NO_GROUP_KEY) as string
+    acc[col] = acc[col] || []
+    acc[col].push(row)
+    return acc
+  }, Object.create(null))
+})
+
+function getGroupLabel(index: number) {
+  const labels = props.groupBy && props.groupLabels ? props.groupLabels[props.groupBy] || [] : []
+  return labels[index]
+}
 </script>
 
 <template>
@@ -123,21 +151,47 @@ 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">
+                    <template v-if="key === NO_GROUP_KEY">
+                      {{ getGroupLabel(1) }}
+                    </template>
+                    <template v-else> {{ getGroupLabel(0) }}: {{ key }} </template>
+                  </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/tabs/index.ts

@@ -5,10 +5,10 @@ export { default as BuiTabsContent } from './BuiTabsContent.vue'
 
 import { cva } from 'class-variance-authority'
 
-export const tabsListVariants = cva('inline-flex h-10 items-center justify-center rounded-md p-1', {
+export const tabsListVariants = cva('inline-flex items-center justify-center rounded-md p-1', {
   variants: {
     variant: {
-      default: 'bg-muted text-foreground text-muted-foreground',
+      default: 'bg-muted text-muted-foreground',
       ghost: 'bg-background bg-text-foreground'
     }
   },

package/src/components/ui/toast/use-toast.ts

@@ -1,6 +1,5 @@
-import { computed, ref } from 'vue'
-import type { Component, VNode } from 'vue'
-import type { ToastProps } from './BuiToast.vue'
+import { computed, ref, type Component, type VNode, type ComputedRef } from 'vue'
+import { type ToastProps } from './BuiToast.vue'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -114,7 +113,11 @@ function dispatch(action: Action) {
   }
 }
 
-function useToast() {
+function useToast(): {
+  toasts: ComputedRef<ToasterToast[]>
+  toast: (props: Toast) => ToastResult
+  dismiss: (toastId?: string) => void
+} {
   return {
     toasts: computed(() => state.value.toasts),
     toast,
@@ -123,8 +126,12 @@ function useToast() {
 }
 
 type Toast = Omit<ToasterToast, 'id'>
-
-function toast(props: Toast) {
+type ToastResult = {
+  id: string
+  dismiss: (toastId?: string) => void
+  update: (toast: ToasterToast) => void
+}
+function toast(props: Toast): ToastResult {
   const id = genId()
 
   const update = (props: ToasterToast) =>

package/src/index.ts

@@ -40,4 +40,6 @@ export * from './components/ui/collapsible/index'
 
 export * from './lib/utils'
 export { default as tailwind } from './tailwind-preset'
+
+// @ts-ignore
 export * from './assets/variables.css'

package/dist/BuiScrollArea.vue_vue_type_script_setup_true_lang-BAhbwd8R.js

@@ -1,39 +0,0 @@
-import { defineComponent as n, computed as d, openBlock as p, createBlock as i, unref as e, mergeProps as f, withCtx as a, createVNode as o, renderSlot as m } from "vue";
-import { b1 as u, b2 as _, b3 as h } from "./index-BWXL7qjH.js";
-import { _ as B } from "./BuiScrollBar.vue_vue_type_script_setup_true_lang-3eeK3g-g.js";
-import { c as b } from "./utils-DMgok1im.js";
-const C = /* @__PURE__ */ n({
-  __name: "BuiScrollArea",
-  props: {
-    type: {},
-    dir: {},
-    scrollHideDelay: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(l) {
-    const s = l, c = d(() => {
-      const { class: r, ...t } = s;
-      return t;
-    });
-    return (r, t) => (p(), i(e(u), f(c.value, {
-      class: e(b)("relative overflow-hidden", s.class)
-    }), {
-      default: a(() => [
-        o(e(_), { class: "h-full w-full rounded-[inherit]" }, {
-          default: a(() => [
-            m(r.$slots, "default")
-          ]),
-          _: 3
-        }),
-        o(B),
-        o(e(h))
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-});
-export {
-  C as _
-};