@soft-stech/bootsman-ui-shadcn 1.3.6 → 1.3.9

package/dist/index.js

@@ -1,9 +1,9 @@
 /* empty css            */
 import { _ as i } from "./BuiAccordion.vue_vue_type_script_setup_true_lang-nxe3iIoM.js";
-import { _ as s } from "./BuiAccordionContent.vue_vue_type_script_setup_true_lang-pCTYRg2Z.js";
+import { _ as m } from "./BuiAccordionContent.vue_vue_type_script_setup_true_lang-pCTYRg2Z.js";
 import { _ as p } from "./BuiAccordionItem.vue_vue_type_script_setup_true_lang-Dp-3E0FN.js";
 import { _ as B } from "./BuiAccordionTrigger.vue_vue_type_script_setup_true_lang-CtFZfwMC.js";
-import { _ as f } from "./BuiAlertDialog.vue_vue_type_script_setup_true_lang-CKpn0FlQ.js";
+import { _ as n } from "./BuiAlertDialog.vue_vue_type_script_setup_true_lang-CKpn0FlQ.js";
 import { _ as l } from "./BuiAlertDialogTrigger.vue_vue_type_script_setup_true_lang-Cz4RKkoF.js";
 import { _ as g } from "./BuiAlertDialogContent.vue_vue_type_script_setup_true_lang-DFUbXcoh.js";
 import { _ as T } from "./BuiAlertDialogHeader.vue_vue_type_script_setup_true_lang-7Dx74gxo.js";
@@ -23,10 +23,10 @@ import { _ as $ } from "./BuiCardHeader.vue_vue_type_script_setup_true_lang-D9mi
 import { _ as ro } from "./BuiCardTitle.vue_vue_type_script_setup_true_lang-B6T0EtFW.js";
 import { _ as to } from "./BuiCardDescription.vue_vue_type_script_setup_true_lang-Bf_1xgzn.js";
 import { _ as io } from "./BuiCardContent.vue_vue_type_script_setup_true_lang-B6clSivQ.js";
-import { _ as so } from "./BuiCardFooter.vue_vue_type_script_setup_true_lang-Bxt8PufJ.js";
+import { _ as mo } from "./BuiCardFooter.vue_vue_type_script_setup_true_lang-Bxt8PufJ.js";
 import { _ as po } from "./BuiCheckbox.vue_vue_type_script_setup_true_lang-B0K_SUAC.js";
 import { _ as Bo } from "./BuiCommand.vue_vue_type_script_setup_true_lang-P_fz9PPV.js";
-import { _ as fo } from "./BuiCommandDialog.vue_vue_type_script_setup_true_lang-CEnlCiUo.js";
+import { _ as no } from "./BuiCommandDialog.vue_vue_type_script_setup_true_lang-CEnlCiUo.js";
 import { _ as lo } from "./BuiCommandEmpty.vue_vue_type_script_setup_true_lang--AzKirWT.js";
 import { _ as Co } from "./BuiCommandGroup.vue_vue_type_script_setup_true_lang-oAo3VvXV.js";
 import { _ as Fo } from "./BuiCommandInput.vue_vue_type_script_setup_true_lang-BEhdQsvD.js";
@@ -50,9 +50,9 @@ import { _ as or } from "./BuiContextMenuSubTrigger.vue_vue_type_script_setup_tr
 import { _ as er } from "./BuiContextMenuSubContent.vue_vue_type_script_setup_true_lang-CvYcdr9E.js";
 import { _ as ar } from "./BuiDialog.vue_vue_type_script_setup_true_lang-DGrI65dh.js";
 import { _ as ur } from "./BuiDialogClose.vue_vue_type_script_setup_true_lang-D9w-FsVq.js";
-import { _ as mr } from "./BuiDialogTrigger.vue_vue_type_script_setup_true_lang-Czib4PX-.js";
+import { _ as sr } from "./BuiDialogTrigger.vue_vue_type_script_setup_true_lang-Czib4PX-.js";
 import { _ as xr } from "./BuiDialogHeader.vue_vue_type_script_setup_true_lang-2BA5kKFA.js";
-import { _ as nr } from "./BuiDialogTitle.vue_vue_type_script_setup_true_lang-D4lcU_Gz.js";
+import { _ as fr } from "./BuiDialogTitle.vue_vue_type_script_setup_true_lang-D4lcU_Gz.js";
 import { _ as _r } from "./BuiDialogDescription.vue_vue_type_script_setup_true_lang-B6RlWji2.js";
 import { _ as dr } from "./BuiDialogContent.vue_vue_type_script_setup_true_lang-3DBhO_IA.js";
 import { _ as Cr } from "./BuiDialogFooter.vue_vue_type_script_setup_true_lang-B89so9mg.js";
@@ -73,9 +73,9 @@ import { _ as Wr } from "./BuiDropdownMenuSubTrigger.vue_vue_type_script_setup_t
 import { _ as Yr } from "./BuiDropdownMenuSubContent.vue_vue_type_script_setup_true_lang-mMWlAm-h.js";
 import { Form as $r, Field as oe, FieldArray as re, useField as ee, useFieldArray as te, useForm as ae } from "vee-validate";
 import { _ as ue } from "./BuiFormItem.vue_vue_type_script_setup_true_lang-COw7Rwow.js";
-import { _ as me } from "./BuiFormLabel.vue_vue_type_script_setup_true_lang-ClJ8XVcR.js";
+import { _ as se } from "./BuiFormLabel.vue_vue_type_script_setup_true_lang-ClJ8XVcR.js";
 import { _ as xe } from "./BuiFormControl.vue_vue_type_script_setup_true_lang-CCJS2wc1.js";
-import { _ as ne } from "./BuiFormMessage.vue_vue_type_script_setup_true_lang-DTdflpS8.js";
+import { _ as fe } from "./BuiFormMessage.vue_vue_type_script_setup_true_lang-DTdflpS8.js";
 import { _ as _e } from "./BuiFormDescription.vue_vue_type_script_setup_true_lang-CeQSv28t.js";
 import { _ as de } from "./BuiHoverCard.vue_vue_type_script_setup_true_lang-UvgUvVQh.js";
 import { _ as Ce } from "./BuiHoverCardTrigger.vue_vue_type_script_setup_true_lang-Cw-9ABpN.js";
@@ -96,9 +96,9 @@ import { BuiHealth as Ze, capHealthVariants as $e, healthVariants as ot } from "
 import { _ as et } from "./BuiRadioGroup.vue_vue_type_script_setup_true_lang-Bzefyzga.js";
 import { _ as at } from "./BuiRadioGroupItem.vue_vue_type_script_setup_true_lang-D1w59zx2.js";
 import { _ as ut } from "./BuiSelect.vue_vue_type_script_setup_true_lang-YVZaZc0x.js";
-import { _ as mt } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-CseYU299.js";
+import { _ as st } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-CseYU299.js";
 import { _ as xt } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-Dh-1xzuh.js";
-import { _ as nt } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-CX82dW-X.js";
+import { _ as ft } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-CX82dW-X.js";
 import { _ as _t } from "./BuiSelectGroup.vue_vue_type_script_setup_true_lang-B7bT-kcN.js";
 import { _ as dt } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-DsWD84S8.js";
 import { _ as Ct } from "./BuiSelectItemText.vue_vue_type_script_setup_true_lang-CMBf17fE.js";
@@ -116,13 +116,13 @@ import { _ as jt } from "./BuiTableRowSubrow.vue_vue_type_script_setup_true_lang
 import { _ as Ot } from "./BuiTableCaption.vue_vue_type_script_setup_true_lang-053YvtXp.js";
 import { _ as qt } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BJDYHpRG.js";
 import { _ as Jt } from "./BuiTableFooter.vue_vue_type_script_setup_true_lang-Cfxlxsbh.js";
-import { _ as Qt } from "./BuiDataTable.vue_vue_type_script_setup_true_lang-CUH3nl15.js";
+import { _ as Qt } from "./BuiDataTable.vue_vue_type_script_setup_true_lang-Bzw8CawP.js";
 import { BuiTabsList as Xt, BuiTabsTrigger as Yt, tabsListVariants as Zt, tabsTriggerVariants as $t } from "./components/ui/tabs/index.js";
 import { BuiTextarea as ra, textareaVariants as ea } from "./components/ui/textarea/index.js";
 import { BuiToast as aa, BuiToaster as ia, toastVariants as ua } from "./components/ui/toast/index.js";
-import { _ as ma } from "./BuiTooltip.vue_vue_type_script_setup_true_lang-CsOjyqI1.js";
+import { _ as sa } from "./BuiTooltip.vue_vue_type_script_setup_true_lang-CsOjyqI1.js";
 import { _ as xa } from "./BuiTooltipContent.vue_vue_type_script_setup_true_lang-DeCynYsO.js";
-import { _ as na } from "./BuiTooltipTrigger.vue_vue_type_script_setup_true_lang-Bb8h7e0Q.js";
+import { _ as fa } from "./BuiTooltipTrigger.vue_vue_type_script_setup_true_lang-Bb8h7e0Q.js";
 import { _ as _a } from "./BuiTooltipProvider.vue_vue_type_script_setup_true_lang-DE2Dcdd0.js";
 import { BuiToggle as da, toggleVariants as ga } from "./components/ui/toggle/index.js";
 import { _ as Ta } from "./BuiToggleGroup.vue_vue_type_script_setup_true_lang-D4bAsz99.js";
@@ -135,39 +135,40 @@ import { _ as va } from "./BuiCollapsible.vue_vue_type_script_setup_true_lang-Bf
 import { _ as La } from "./BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-DJ8YMCCp.js";
 import { _ as Ga } from "./BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-eieHE5yV.js";
 import { getBaseSchema as Ra, getBaseType as ka, getObjectFormSchema as Ea } from "./components/ui/auto-form/utils.js";
-import { _ as Na } from "./BuiAutoForm.vue_vue_type_script_setup_true_lang-BWWNpH1I.js";
-import { _ as Ua, a as qa, b as za } from "./BuiAutoFormField.vue_vue_type_script_setup_true_lang-xmzLQDzl.js";
-import { _ as Ka } from "./BuiAutoFormLabel.vue_vue_type_script_setup_true_lang-DzpWjTLE.js";
-import { _ as Wa } from "./BuiAutoFormFieldBoolean.vue_vue_type_script_setup_true_lang-tuxavlOe.js";
-import { _ as Ya } from "./BuiAutoFormFieldDate.vue_vue_type_script_setup_true_lang-Bzg1m-ii.js";
-import { _ as $a } from "./BuiAutoFormFieldEnum.vue_vue_type_script_setup_true_lang-Bqe8Rt85.js";
-import { _ as ri } from "./BuiAutoFormFieldFile.vue_vue_type_script_setup_true_lang-DrJwn66q.js";
-import { _ as ti } from "./BuiAutoFormFieldInput.vue_vue_type_script_setup_true_lang-DtBFfiOK.js";
-import { _ as ii } from "./BuiAutoFormFieldNumber.vue_vue_type_script_setup_true_lang-ClLqHM1Y.js";
+import { _ as Na } from "./BuiAutoForm.vue_vue_type_script_setup_true_lang-DyG1WRf2.js";
+import { _ as Ua, a as qa } from "./BuiAutoFormField.vue_vue_type_script_setup_true_lang-D0xFhEmy.js";
+import { _ as Ja } from "./BuiAutoFormLabel.vue_vue_type_script_setup_true_lang-DzpWjTLE.js";
+import { _ as Qa } from "./BuiAutoFormFieldBoolean.vue_vue_type_script_setup_true_lang-tuxavlOe.js";
+import { _ as Xa } from "./BuiAutoFormFieldDate.vue_vue_type_script_setup_true_lang-Bzg1m-ii.js";
+import { _ as Za } from "./BuiAutoFormFieldEnum.vue_vue_type_script_setup_true_lang-Bqe8Rt85.js";
+import { _ as oi } from "./BuiAutoFormFieldFile.vue_vue_type_script_setup_true_lang-DrJwn66q.js";
+import { _ as ei } from "./BuiAutoFormFieldInput.vue_vue_type_script_setup_true_lang-DtBFfiOK.js";
+import { _ as ai } from "./BuiAutoFormFieldNumber.vue_vue_type_script_setup_true_lang-ClLqHM1Y.js";
+import { _ as ui } from "./BuiAutoFormFieldObject.vue_vue_type_script_setup_true_lang-C7URAPKt.js";
 import { default as si } from "./tailwind-preset.js";
 /* empty css                   */
-import { _ as pi } from "./BuiAlertTitle.vue_vue_type_script_setup_true_lang-BvU1UhRc.js";
-import { _ as Bi } from "./BuiAlertDescription.vue_vue_type_script_setup_true_lang-CVBdwmJq.js";
-import { _ as fi } from "./BuiAvatarImage.vue_vue_type_script_setup_true_lang-CpDtlLee.js";
-import { _ as li } from "./BuiAvatarFallback.vue_vue_type_script_setup_true_lang-DM4kyiXi.js";
+import { _ as xi } from "./BuiAlertTitle.vue_vue_type_script_setup_true_lang-BvU1UhRc.js";
+import { _ as fi } from "./BuiAlertDescription.vue_vue_type_script_setup_true_lang-CVBdwmJq.js";
+import { _ as _i } from "./BuiAvatarImage.vue_vue_type_script_setup_true_lang-CpDtlLee.js";
+import { _ as di } from "./BuiAvatarFallback.vue_vue_type_script_setup_true_lang-DM4kyiXi.js";
 import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
-import { _ as gi } from "./BuiTabs.vue_vue_type_script_setup_true_lang-DZavy0KI.js";
-import { _ as Ti } from "./BuiTabsContent.vue_vue_type_script_setup_true_lang-BGARj0PN.js";
-import { _ as ci } from "./BuiToastAction.vue_vue_type_script_setup_true_lang-BnduHxHU.js";
-import { _ as Di } from "./BuiToastViewport.vue_vue_type_script_setup_true_lang-DGcOPCBU.js";
-import { _ as Si } from "./BuiToastClose.vue_vue_type_script_setup_true_lang-D8a4DIAU.js";
-import { _ as wi } from "./BuiToastTitle.vue_vue_type_script_setup_true_lang-BTPprH2k.js";
-import { _ as Pi } from "./BuiToastDescription.vue_vue_type_script_setup_true_lang-DttuuxON.js";
-import { _ as vi } from "./BuiToastProvider.vue_vue_type_script_setup_true_lang-V09S1Ros.js";
-import { toast as Li, useToast as yi } from "./components/ui/toast/use-toast.js";
+import { _ as Ci } from "./BuiTabs.vue_vue_type_script_setup_true_lang-DZavy0KI.js";
+import { _ as Fi } from "./BuiTabsContent.vue_vue_type_script_setup_true_lang-BGARj0PN.js";
+import { _ as bi } from "./BuiToastAction.vue_vue_type_script_setup_true_lang-BnduHxHU.js";
+import { _ as Ai } from "./BuiToastViewport.vue_vue_type_script_setup_true_lang-DGcOPCBU.js";
+import { _ as Mi } from "./BuiToastClose.vue_vue_type_script_setup_true_lang-D8a4DIAU.js";
+import { _ as Ii } from "./BuiToastTitle.vue_vue_type_script_setup_true_lang-BTPprH2k.js";
+import { _ as Vi } from "./BuiToastDescription.vue_vue_type_script_setup_true_lang-DttuuxON.js";
+import { _ as hi } from "./BuiToastProvider.vue_vue_type_script_setup_true_lang-V09S1Ros.js";
+import { toast as yi, useToast as Gi } from "./components/ui/toast/use-toast.js";
 export {
   i as BuiAccordion,
-  s as BuiAccordionContent,
+  m as BuiAccordionContent,
   p as BuiAccordionItem,
   B as BuiAccordionTrigger,
   v as BuiAlert,
-  Bi as BuiAlertDescription,
-  f as BuiAlertDialog,
+  fi as BuiAlertDescription,
+  n as BuiAlertDialog,
   w as BuiAlertDialogAction,
   P as BuiAlertDialogCancel,
   g as BuiAlertDialogContent,
@@ -176,22 +177,22 @@ export {
   T as BuiAlertDialogHeader,
   c as BuiAlertDialogTitle,
   l as BuiAlertDialogTrigger,
-  pi as BuiAlertTitle,
+  xi as BuiAlertTitle,
   y as BuiAspectRatio,
   Na as BuiAutoForm,
   Ua as BuiAutoFormField,
   qa as BuiAutoFormFieldArray,
-  Wa as BuiAutoFormFieldBoolean,
-  Ya as BuiAutoFormFieldDate,
-  $a as BuiAutoFormFieldEnum,
-  ri as BuiAutoFormFieldFile,
-  ti as BuiAutoFormFieldInput,
-  ii as BuiAutoFormFieldNumber,
-  za as BuiAutoFormFieldObject,
-  Ka as BuiAutoFormLabel,
+  Qa as BuiAutoFormFieldBoolean,
+  Xa as BuiAutoFormFieldDate,
+  Za as BuiAutoFormFieldEnum,
+  oi as BuiAutoFormFieldFile,
+  ei as BuiAutoFormFieldInput,
+  ai as BuiAutoFormFieldNumber,
+  ui as BuiAutoFormFieldObject,
+  Ja as BuiAutoFormLabel,
   H as BuiAvatar,
-  li as BuiAvatarFallback,
-  fi as BuiAvatarImage,
+  di as BuiAvatarFallback,
+  _i as BuiAvatarImage,
   E as BuiBadge,
   be as BuiBadgedInput,
   O as BuiButton,
@@ -199,7 +200,7 @@ export {
   Y as BuiCard,
   io as BuiCardContent,
   to as BuiCardDescription,
-  so as BuiCardFooter,
+  mo as BuiCardFooter,
   $ as BuiCardHeader,
   ro as BuiCardTitle,
   po as BuiCheckbox,
@@ -207,7 +208,7 @@ export {
   Ga as BuiCollapsibleContent,
   La as BuiCollapsibleTrigger,
   Bo as BuiCommand,
-  fo as BuiCommandDialog,
+  no as BuiCommandDialog,
   lo as BuiCommandEmpty,
   Co as BuiCommandGroup,
   Fo as BuiCommandInput,
@@ -236,8 +237,8 @@ export {
   _r as BuiDialogDescription,
   Cr as BuiDialogFooter,
   xr as BuiDialogHeader,
-  nr as BuiDialogTitle,
-  mr as BuiDialogTrigger,
+  fr as BuiDialogTitle,
+  sr as BuiDialogTrigger,
   Sr as BuiDropdownMenu,
   Rr as BuiDropdownMenuCheckboxItem,
   Pr as BuiDropdownMenuContent,
@@ -259,8 +260,8 @@ export {
   oe as BuiFormField,
   re as BuiFormFieldArray,
   ue as BuiFormItem,
-  me as BuiFormLabel,
-  ne as BuiFormMessage,
+  se as BuiFormLabel,
+  fe as BuiFormMessage,
   Ze as BuiHealth,
   de as BuiHoverCard,
   Fe as BuiHoverCardContent,
@@ -286,14 +287,14 @@ export {
   wa as BuiScrollArea,
   Pa as BuiScrollBar,
   ut as BuiSelect,
-  nt as BuiSelectContent,
+  ft as BuiSelectContent,
   _t as BuiSelectGroup,
   dt as BuiSelectItem,
   Ct as BuiSelectItemText,
   Ft as BuiSelectLabel,
   bt as BuiSelectSeparator,
   xt as BuiSelectTrigger,
-  mt as BuiSelectValue,
+  st as BuiSelectValue,
   At as BuiSeparator,
   Da as BuiSlider,
   Mt as BuiSwitch,
@@ -307,26 +308,26 @@ export {
   Ht as BuiTableHeader,
   kt as BuiTableRow,
   jt as BuiTableRowSubrow,
-  gi as BuiTabs,
-  Ti as BuiTabsContent,
+  Ci as BuiTabs,
+  Fi as BuiTabsContent,
   Xt as BuiTabsList,
   Yt as BuiTabsTrigger,
   ra as BuiTextarea,
   aa as BuiToast,
-  ci as BuiToastAction,
-  Si as BuiToastClose,
-  Pi as BuiToastDescription,
-  vi as BuiToastProvider,
-  wi as BuiToastTitle,
-  Di as BuiToastViewport,
+  bi as BuiToastAction,
+  Mi as BuiToastClose,
+  Vi as BuiToastDescription,
+  hi as BuiToastProvider,
+  Ii as BuiToastTitle,
+  Ai as BuiToastViewport,
   ia as BuiToaster,
   da as BuiToggle,
   Ta as BuiToggleGroup,
   ca as BuiToggleGroupItem,
-  ma as BuiTooltip,
+  sa as BuiTooltip,
   xa as BuiTooltipContent,
   _a as BuiTooltipProvider,
-  na as BuiTooltipTrigger,
+  fa as BuiTooltipTrigger,
   Sa as Skeleton,
   h as alertVariants,
   R as avatarVariant,
@@ -348,12 +349,12 @@ export {
   $t as tabsTriggerVariants,
   si as tailwind,
   ea as textareaVariants,
-  Li as toast,
+  yi as toast,
   ua as toastVariants,
   ga as toggleVariants,
   ee as useBuiField,
   te as useBuiFieldArray,
   ae as useBuiForm,
-  yi as useToast,
+  Gi as useToast,
   J as valueUpdater
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.3.6",
+  "version": "1.3.9",
   "type": "module",
   "files": [
     "dist",

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

@@ -23,6 +23,16 @@ const schema = z.object({
       })
       .describe('Addon')
   ),
+  level1: z
+    .object({
+      level2: z.object({
+        level3: z.object({
+          test: z.string().min(1),
+          something: z.boolean()
+        })
+      })
+    })
+    .describe('Level 1'),
   username: z
     .string({
       required_error: 'Username is required.'

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

@@ -5,7 +5,14 @@ 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 {
+  AlignJustifyIcon,
+  ArrowUpNarrowWideIcon,
+  FolderIcon,
+  SignalHighIcon,
+  SignalMediumIcon,
+  SignalLowIcon
+} from 'lucide-vue-next'
 import { computed, h, ref } from 'vue'
 import { z } from 'zod'
 import tasks from './data/tasks.json'
@@ -72,10 +79,11 @@ function updateSelection(val: RowSelectionState) {
   selection.value = val
 }
 
-type GroupBy = 'none' | 'status'
+type GroupBy = 'none' | 'status' | 'priority'
 const groupBy = ref<GroupBy>('none')
 const groupLabels = {
-  status: ['Status', 'Not in any status']
+  status: ['Status', 'Not in any status'],
+  priority: ['Priority', 'Not in any priorities']
 }
 
 const sortedData = computed(() => {
@@ -120,6 +128,26 @@ function deleteRow() {
 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>
@@ -147,13 +175,16 @@ function updateRows() {
             <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
 
             <BuiTabs v-model="groupBy">
-              <BuiTabsList class="grid w-full grid-cols-2" :variant="'default'">
+              <BuiTabsList class="grid w-full grid-cols-3" :variant="'default'">
                 <BuiTabsTrigger value="none" :variant="'default'"
                   ><AlignJustifyIcon
                 /></BuiTabsTrigger>
                 <BuiTabsTrigger value="status" :variant="'default'">
                   <FolderIcon />
                 </BuiTabsTrigger>
+                <BuiTabsTrigger value="priority" :variant="'default'">
+                  <ArrowUpNarrowWideIcon />
+                </BuiTabsTrigger>
               </BuiTabsList>
             </BuiTabs>
 
@@ -165,6 +196,9 @@ function updateRows() {
         </template>
         <template #nodata>Нет данных</template>
         <template #groupByRow="{ group }"> Optional slot for: `{{ group }}` </template>
+        <template #groupName="{ group }">
+          <component :is="groupName(group)"></component>
+        </template>
       </BuiDataTable>
     </Variant>
   </Story>

package/src/components/ui/auto-form/BuiAutoForm.vue

@@ -86,7 +86,7 @@ const formComponentProps = computed(() => {
 </script>
 
 <template>
-  <component :is="formComponent" v-bind="formComponentProps">
+  <component :is="formComponent" v-bind="formComponentProps" class="flex flex-col gap-5">
     <slot name="customAutoForm" :fields="fields">
       <template v-for="(shape, key) of shapes" :key="key">
         <slot

package/src/components/ui/auto-form/BuiAutoFormFieldObjectCard.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts" generic="T extends ZodRawShape">
+import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
+import { computed, provide } from 'vue'
+import { FieldContextKey, useField } from 'vee-validate'
+import AutoFormField from './BuiAutoFormField.vue'
+import type { Config, ConfigItem, Shape } from './interface'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
+import { BuiCard, BuiCardContent, BuiCardHeader, BuiCardTitle } from '@/components/ui/card'
+import { BuiFormItem as FormItem } from '@/components/ui/form'
+
+const props = defineProps<{
+  fieldName: string
+  required?: boolean
+  config?: Config<T>
+  schema?: ZodObject<T>
+  disabled?: boolean
+}>()
+
+const shapes = computed(() => {
+  // @ts-expect-error ignore {} not assignable to object
+  const val: { [key in keyof T]: Shape } = {}
+
+  if (!props.schema) return
+  const shape = getBaseSchema(props.schema)?.shape
+  if (!shape) return
+  Object.keys(shape).forEach((name) => {
+    const item = shape[name] as ZodAny
+    const baseItem = getBaseSchema(item) as ZodAny
+    let options =
+      baseItem && 'values' in baseItem._def ? (baseItem._def.values as string[]) : undefined
+    if (!Array.isArray(options) && typeof options === 'object') options = Object.values(options)
+
+    val[name as keyof T] = {
+      type: getBaseType(item),
+      default: getDefaultValueInZodStack(item),
+      options,
+      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
+      schema: item
+    }
+  })
+  return val
+})
+
+const fieldContext = useField(props.fieldName)
+// @ts-expect-error ignore missing `id`
+provide(FieldContextKey, fieldContext)
+</script>
+
+<template>
+  <section>
+    <slot v-bind="props">
+      <BuiCard as-child class="w-full border-0 shadow-none">
+        <FormItem>
+          <BuiCardHeader class="border-b-[1px] border-b-border/[0.16] py-1">
+            <BuiCardTitle class="py-0 text-base">
+              {{ schema?.description || fieldName.split('.')[fieldName.split('.').length - 1] }}
+            </BuiCardTitle>
+          </BuiCardHeader>
+          <BuiCardContent class="flex flex-col gap-5 pb-0 pr-0">
+            <template v-for="(shape, key) in shapes" :key="key">
+              <AutoFormField
+                :config="config?.[key as keyof typeof config] as ConfigItem"
+                :field-name="`${fieldName}.${key.toString()}`"
+                :label="key.toString()"
+                :shape="shape"
+              />
+            </template>
+          </BuiCardContent>
+        </FormItem>
+      </BuiCard>
+    </slot>
+  </section>
+</template>

package/src/components/ui/auto-form/constant.ts

@@ -6,6 +6,7 @@ import BuiAutoFormFieldFile from './BuiAutoFormFieldFile.vue'
 import BuiAutoFormFieldInput from './BuiAutoFormFieldInput.vue'
 import BuiAutoFormFieldNumber from './BuiAutoFormFieldNumber.vue'
 import BuiAutoFormFieldObject from './BuiAutoFormFieldObject.vue'
+import BuiAutoFormFieldObjectCard from '@/components/ui/auto-form/BuiAutoFormFieldObjectCard.vue'
 
 export const INPUT_COMPONENTS = {
   date: BuiAutoFormFieldDate,
@@ -18,7 +19,7 @@ export const INPUT_COMPONENTS = {
   string: BuiAutoFormFieldInput,
   file: BuiAutoFormFieldFile,
   array: BuiAutoFormFieldArray,
-  object: BuiAutoFormFieldObject
+  object: BuiAutoFormFieldObjectCard
 }
 
 /**

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

@@ -175,7 +175,13 @@ function getGroupLabel(index: number) {
                       <template v-if="key === NO_GROUP_KEY">
                         {{ getGroupLabel(1) }}
                       </template>
-                      <template v-else> {{ getGroupLabel(0) }}: {{ key }} </template>
+                      <template v-else>
+                        {{ getGroupLabel(0) }}:
+                        <slot v-if="$slots.groupName" name="groupName" :group="key" />
+                        <template v-else>
+                          {{ key }}
+                        </template>
+                      </template>
                     </div>
                     <slot v-if="$slots.groupByRow" name="groupByRow" :group="key" />
                   </div>