@soft-stech/bootsman-ui-shadcn 1.4.29 → 1.4.31

package/dist/components/ui/table/index.js

@@ -1,23 +1,23 @@
-import { _ as Q } from "../../../BuiTable.vue_vue_type_script_setup_true_lang-QoPGiEYZ.js";
-import { _ as X } from "../../../BuiTableBody.vue_vue_type_script_setup_true_lang-DblqmDim.js";
-import { _ as O } from "../../../BuiTableCell.vue_vue_type_script_setup_true_lang-CYBx0oJL.js";
-import { _ as Z } from "../../../BuiTableHead.vue_vue_type_script_setup_true_lang-BDSRArVd.js";
-import { _ as ee } from "../../../BuiTableHeader.vue_vue_type_script_setup_true_lang-BXgL487_.js";
-import { _ as T } from "../../../BuiTableRow.vue_vue_type_script_setup_true_lang-Bl4nF6yV.js";
-import { defineComponent as G, computed as w, openBlock as r, createElementBlock as d, Fragment as p, createBlock as c, unref as t, normalizeClass as oe, withCtx as l, renderSlot as y, renderList as k, normalizeStyle as K, createVNode as s, createCommentVNode as S, resolveDynamicComponent as te, mergeModels as ne, useModel as _, watchEffect as le, ref as x, watch as ae, createSlots as re, createElementVNode as g, createTextVNode as C, toDisplayString as $ } from "vue";
+import { _ as X } from "../../../BuiTable.vue_vue_type_script_setup_true_lang-QoPGiEYZ.js";
+import { _ as Z } from "../../../BuiTableBody.vue_vue_type_script_setup_true_lang-DblqmDim.js";
+import { _ as T } from "../../../BuiTableCell.vue_vue_type_script_setup_true_lang-CYBx0oJL.js";
+import { _ as ee } from "../../../BuiTableHead.vue_vue_type_script_setup_true_lang-Dyf8tkSZ.js";
+import { _ as oe } from "../../../BuiTableHeader.vue_vue_type_script_setup_true_lang-BXgL487_.js";
+import { _ as N } from "../../../BuiTableRow.vue_vue_type_script_setup_true_lang-Bl4nF6yV.js";
+import { defineComponent as G, computed as S, openBlock as s, createElementBlock as d, Fragment as p, createBlock as f, unref as t, normalizeClass as K, withCtx as l, renderSlot as b, renderList as k, normalizeStyle as W, createVNode as r, createCommentVNode as v, resolveDynamicComponent as te, mergeModels as ne, useModel as C, watchEffect as le, ref as V, watch as ae, createSlots as se, createElementVNode as g, createTextVNode as _, toDisplayString as $ } from "vue";
 import { _ as go } from "../../../BuiTableCaption.vue_vue_type_script_setup_true_lang-CTEP1Sde.js";
-import { _ as se } from "../../../BuiTableEmpty.vue_vue_type_script_setup_true_lang-BTyX0sT5.js";
-import { _ as co } from "../../../BuiTableFooter.vue_vue_type_script_setup_true_lang-CRyh8XF5.js";
+import { _ as re } from "../../../BuiTableEmpty.vue_vue_type_script_setup_true_lang-BTyX0sT5.js";
+import { _ as po } from "../../../BuiTableFooter.vue_vue_type_script_setup_true_lang-CRyh8XF5.js";
 import { _ as ie } from "../../../BuiCollapsible.vue_vue_type_script_setup_true_lang-DjuQBjGZ.js";
 import { _ as ue } from "../../../BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-l-nmwAwq.js";
 import { _ as de } from "../../../BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-BiD89zzH.js";
 import { _ as me } from "../../../variables-Ct6TXY_l.js";
-import { h as ge, v as h, g as pe, _ as ce } from "../../../utils-CwP7Up6y.js";
-import { FlexRender as W, useVueTable as fe, getCoreRowModel as be, getPaginationRowModel as ye, getSortedRowModel as ve } from "@tanstack/vue-table";
+import { h as ge, v as h, g as fe, _ as pe } from "../../../utils-CwP7Up6y.js";
+import { FlexRender as Y, useVueTable as ce, getCoreRowModel as be, getPaginationRowModel as ye, getSortedRowModel as ve } from "@tanstack/vue-table";
 import { _ as we } from "../../../BuiCommand.vue_vue_type_script_setup_true_lang-BiBVfuW-.js";
 import { _ as Se } from "../../../BuiCommandEmpty.vue_vue_type_script_setup_true_lang-BkPg_0iY.js";
-import { _ as _e } from "../../../BuiCommandInput.vue_vue_type_script_setup_true_lang-Dxua89Ba.js";
-import { _ as Ce } from "../../../BuiCommandItem.vue_vue_type_script_setup_true_lang--K56eLIm.js";
+import { _ as Ce } from "../../../BuiCommandInput.vue_vue_type_script_setup_true_lang-Dxua89Ba.js";
+import { _ as _e } from "../../../BuiCommandItem.vue_vue_type_script_setup_true_lang--K56eLIm.js";
 import { _ as he } from "../../../BuiCommandList.vue_vue_type_script_setup_true_lang-CczssFsO.js";
 import { _ as $e } from "../../../BuiPopover.vue_vue_type_script_setup_true_lang-CGkz30K2.js";
 import { _ as ke } from "../../../BuiPopoverTrigger.vue_vue_type_script_setup_true_lang-Du2ZN56l.js";
@@ -35,33 +35,33 @@ const Ie = ge("Settings2Icon", [
   ["path", { d: "M14 17H5", key: "gfn3mx" }],
   ["circle", { cx: "17", cy: "17", r: "3", key: "18b49y" }],
   ["circle", { cx: "7", cy: "7", r: "3", key: "dfmy0x" }]
-]), Me = "[!fake-empty!]", j = /* @__PURE__ */ G({
+]), Pe = "[!fake-empty!]", j = /* @__PURE__ */ G({
   __name: "BuiTableRowSubrow",
   props: {
     row: {},
     renderSubComponent: { type: Function },
     columns: {}
   },
-  setup(f) {
-    const a = f, z = w(() => a.row.original.name?.includes(Me));
-    return (i, R) => (r(), d(p, null, [
-      z.value ? S("", !0) : (r(), c(t(T), {
+  setup(c) {
+    const a = c, z = S(() => a.row.original.name?.includes(Pe));
+    return (i, R) => (s(), d(p, null, [
+      z.value ? v("", !0) : (s(), f(t(N), {
         key: 0,
         "data-row-state": i.row.getIsSelected() ? "selected" : void 0,
-        class: oe(a.renderSubComponent?.(i.row) ? "border-b-0" : "")
+        class: K(a.renderSubComponent?.(i.row) ? "border-b-0" : "")
       }, {
         actions: l(() => [
-          y(i.$slots, "actions")
+          b(i.$slots, "actions")
         ]),
         default: l(() => [
-          (r(!0), d(p, null, k(i.row.getVisibleCells(), (v) => (r(), c(t(O), {
-            key: v.id,
-            style: K({ ...t(Y)(v.column) })
+          (s(!0), d(p, null, k(i.row.getVisibleCells(), (w) => (s(), f(t(T), {
+            key: w.id,
+            style: W({ ...t(q)(w.column) })
           }, {
             default: l(() => [
-              s(t(W), {
-                render: v.column.columnDef.cell,
-                props: v.getContext()
+              r(t(Y), {
+                render: w.column.columnDef.cell,
+                props: w.getContext()
               }, null, 8, ["render", "props"])
             ]),
             _: 2
@@ -69,34 +69,34 @@ const Ie = ge("Settings2Icon", [
         ]),
         _: 3
       }, 8, ["data-row-state", "class"])),
-      a.renderSubComponent?.(i.row) ? (r(), c(t(T), {
+      a.renderSubComponent?.(i.row) ? (s(), f(t(N), {
         key: 1,
         "data-row-state": i.row.getIsSelected() ? "selected" : void 0
       }, {
         actions: l(() => [
-          y(i.$slots, "actions")
+          b(i.$slots, "actions")
         ]),
         default: l(() => [
-          s(t(O), {
+          r(t(T), {
             colspan: i.columns.length,
             class: "pt-0"
           }, {
             default: l(() => [
-              (r(), c(te(a.renderSubComponent?.(i.row)?.())))
+              (s(), f(te(a.renderSubComponent?.(i.row)?.())))
             ]),
             _: 1
           }, 8, ["colspan"])
         ]),
         _: 3
-      }, 8, ["data-row-state"])) : S("", !0)
+      }, 8, ["data-row-state"])) : v("", !0)
     ], 64));
   }
-}), Pe = {
+}), Oe = {
   key: 0,
   class: "w-full py-3"
-}, Ve = { class: "absolute right-0 top-0 z-10 h-10 bg-background" }, xe = { class: "flex h-full items-center border-l border-border/[0.16] bg-foreground/[0.04] px-1" }, Oe = ["onDblclick", "onMousedown", "className"], Te = { class: "mt-1 flex w-full items-center justify-between" }, Ne = { class: "relative -mb-[6px] inline-block rounded-t-lg bg-background px-4 py-2 text-sm font-medium shadow-top-shadow" }, Le = {
-  key: 1,
-  class: "flex w-full justify-end border-x border-b border-border/[0.16] bg-primary/[0.04] px-4 py-1 text-base text-muted-foreground"
+}, Me = { class: "absolute right-0 top-0 z-10 h-10 bg-background" }, Ve = { class: "flex h-full items-center border-b border-l border-border/[0.16] bg-foreground/[0.04] px-1" }, Te = ["onDblclick", "onMousedown", "className"], Ne = { class: "mt-1 flex w-full items-center justify-between" }, Le = { class: "relative -mb-[6px] inline-block rounded-t-lg bg-background px-4 py-2 text-sm font-medium shadow-top-shadow" }, xe = {
+  key: 0,
+  class: "flex min-h-8 items-center"
 }, A = "#UNDEFINED#", io = /* @__PURE__ */ G({
   __name: "BuiDataTable",
   props: /* @__PURE__ */ ne({
@@ -131,13 +131,13 @@ const Ie = ge("Settings2Icon", [
     columnOrderModifiers: {}
   }),
   emits: ["update:sorting", "update:pagination", "update:selection", "update:columnVisibility", "update:columnSizing", "update:columnOrder"],
-  setup(f) {
-    const a = f, z = _(f, "sorting"), i = _(f, "pagination"), R = _(f, "selection"), v = _(f, "columnVisibility"), N = _(f, "columnSizing"), b = _(f, "columnOrder"), L = w(
+  setup(c) {
+    const a = c, z = C(c, "sorting"), i = C(c, "pagination"), R = C(c, "selection"), w = C(c, "columnVisibility"), L = C(c, "columnSizing"), y = C(c, "columnOrder"), x = S(
       () => a.manualPagination ? a.totalItems : a.data.length
-    ), q = a.columns.map((e) => e.meta?.pinLeft && e.id ? e.id : "").filter(Boolean), u = fe({
+    ), J = a.columns.map((e) => e.meta?.pinLeft && e.id ? e.id : "").filter(Boolean), u = ce({
       initialState: {
         // TODO: column freeze
-        columnPinning: { left: q },
+        columnPinning: { left: J },
         pagination: { pageSize: a.pageSize }
       },
       get data() {
@@ -159,13 +159,13 @@ const Ie = ge("Settings2Icon", [
         h(e, R);
       },
       onColumnVisibilityChange: (e) => {
-        h(e, v);
+        h(e, w);
       },
       onColumnSizingChange: (e) => {
-        h(e, N);
+        h(e, L);
       },
       onColumnOrderChange: (e) => {
-        h(e, b);
+        h(e, y);
       },
       autoResetPageIndex: !1,
       manualPagination: a.manualPagination,
@@ -185,24 +185,24 @@ const Ie = ge("Settings2Icon", [
           return R.value;
         },
         get columnVisibility() {
-          return v.value;
+          return w.value;
         },
         get columnSizing() {
-          return N.value;
+          return L.value;
         },
         get columnOrder() {
-          return b.value;
+          return y.value;
         }
       },
       getRowId: a.getRowId
-    }), D = w({
+    }), D = S({
       get() {
         return u.getState().pagination.pageSize;
       },
       set(e) {
         i.value && (i.value.pageSize = e, u.setPageSize(e), u.setPageIndex(0));
       }
-    }), B = w({
+    }), B = S({
       get() {
         return u.getState().pagination.pageIndex + 1;
       },
@@ -214,40 +214,40 @@ const Ie = ge("Settings2Icon", [
       const e = u.getPageCount();
       e && e < B.value && (B.value = e);
     });
-    const H = w(() => a.groupBy ? u.getRowModel().rows.reduce((e, o) => {
+    const H = S(() => a.groupBy ? u.getRowModel().rows.reduce((e, o) => {
       const m = o.getValue(a.groupBy) ?? A;
       return e[m] = e[m] || [], e[m].push(o), e;
     }, /* @__PURE__ */ Object.create(null)) : null);
     function E(e) {
       return (a.groupBy && a.groupLabels ? a.groupLabels[a.groupBy] || [] : [])[e];
     }
-    const I = x(
-      u.getAllColumns().filter((e) => typeof e.accessorFn < "u" && e.getCanHide()).sort((e, o) => b.value ? b.value?.indexOf(e.id) < 0 && b.value?.indexOf(o.id) >= 0 ? 1 : b.value?.indexOf(e.id) >= 0 && b.value?.indexOf(o.id) < 0 ? -1 : b.value?.indexOf(e.id) - b.value?.indexOf(o.id) : 0)
-    ), M = w(() => I.value.map((e) => e.id)), J = w(
-      () => M.value.reduce((e, o) => ({ ...e, [o]: !0 }), {})
-    ), F = x(!1), P = x(""), U = w(
+    const I = V(
+      u.getAllColumns().filter((e) => typeof e.accessorFn < "u" && e.getCanHide()).sort((e, o) => y.value ? y.value?.indexOf(e.id) < 0 && y.value?.indexOf(o.id) >= 0 ? 1 : y.value?.indexOf(e.id) >= 0 && y.value?.indexOf(o.id) < 0 ? -1 : y.value?.indexOf(e.id) - y.value?.indexOf(o.id) : 0)
+    ), P = S(() => I.value.map((e) => e.id)), Q = S(
+      () => P.value.reduce((e, o) => ({ ...e, [o]: !0 }), {})
+    ), F = V(!1), O = V(""), U = S(
       () => u.getHeaderGroups().length > 0 ? u.getHeaderGroups()[0].headers : void 0
     );
-    return ae(M, () => {
-      u.setColumnOrder(M.value);
-    }), (e, o) => (r(), d(p, null, [
-      e.$slots.caption ? (r(), d("div", Pe, [
-        y(e.$slots, "caption", { table: t(u) })
-      ])) : S("", !0),
-      s(t(Q), null, re({
+    return ae(P, () => {
+      u.setColumnOrder(P.value);
+    }), (e, o) => (s(), d(p, null, [
+      e.$slots.caption ? (s(), d("div", Oe, [
+        b(e.$slots, "caption", { table: t(u) })
+      ])) : v("", !0),
+      r(t(X), null, se({
         default: l(() => [
-          U.value ? (r(), c(t(ee), {
+          U.value ? (s(), f(t(oe), {
             key: 0,
             "freeze-header": a.freezeHeader
           }, {
             default: l(() => [
-              (r(!0), d(p, null, k(U.value, (n) => (r(), c(t(Z), {
+              (s(!0), d(p, null, k(U.value, (n) => (s(), f(t(ee), {
                 key: n.id,
-                style: K({ ...t(Y)(n.column), width: n.getSize() + "px" }),
+                style: W({ ...t(q)(n.column), width: n.getSize() + "px" }),
                 "freeze-header": a.freezeHeader
               }, {
                 default: l(() => [
-                  n.isPlaceholder ? S("", !0) : (r(), c(t(W), {
+                  n.isPlaceholder ? v("", !0) : (s(), f(t(Y), {
                     key: 0,
                     render: n.column.columnDef.header,
                     props: n.getContext()
@@ -255,40 +255,40 @@ const Ie = ge("Settings2Icon", [
                   g("div", {
                     onDblclick: () => n.column.resetSize(),
                     onMousedown: (m) => n.getResizeHandler()?.(m),
-                    className: t(pe)(
+                    className: t(fe)(
                       "absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50",
                       n.column.getIsResizing() ? "bg-primary opacity-50" : ""
                     )
-                  }, null, 40, Oe)
+                  }, null, 40, Te)
                 ]),
                 _: 2
               }, 1032, ["style", "freeze-header"]))), 128))
             ]),
             _: 1
-          }, 8, ["freeze-header"])) : S("", !0),
-          s(t(X), null, {
+          }, 8, ["freeze-header"])) : v("", !0),
+          r(t(Z), null, {
             default: l(() => [
-              t(u).getRowModel().rows?.length ? (r(), d(p, { key: 0 }, [
-                a.groupBy && H.value ? (r(!0), d(p, { key: 0 }, k(H.value, (n, m) => (r(), c(t(ie), {
+              t(u).getRowModel().rows?.length ? (s(), d(p, { key: 0 }, [
+                a.groupBy && H.value ? (s(!0), d(p, { key: 0 }, k(H.value, (n, m) => (s(), f(t(ie), {
                   asChild: "",
                   key: m,
                   open: !0
                 }, {
                   default: l(() => [
-                    s(t(ue), { asChild: "" }, {
+                    r(t(ue), { asChild: "" }, {
                       default: l(() => [
-                        s(t(T), { class: "bg-foreground/[0.04]" }, {
+                        r(t(N), { class: "bg-foreground/[0.04]" }, {
                           actions: l(() => [
-                            y(e.$slots, "groupActions", { group: m })
+                            b(e.$slots, "groupActions", { group: m })
                           ]),
                           default: l(() => [
-                            s(t(O), {
+                            r(t(T), {
                               colspan: e.columns.length,
                               class: "!pb-0"
                             }, {
                               default: l(() => [
-                                g("div", Te, [
-                                  g("div", Ne, [
+                                g("div", Ne, [
+                                  g("div", Le, [
                                     o[7] || (o[7] = g("div", { class: "absolute -left-2 bottom-0 h-2 w-2 bg-background" }, null, -1)),
                                     o[8] || (o[8] = g("div", { class: "absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-background" }, null, -1)),
                                     o[9] || (o[9] = g("div", { class: "absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]" }, null, -1)),
@@ -296,22 +296,22 @@ const Ie = ge("Settings2Icon", [
                                     o[11] || (o[11] = g("div", { class: "absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-background" }, null, -1)),
                                     o[12] || (o[12] = g("div", { class: "absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]" }, null, -1)),
                                     o[13] || (o[13] = g("div", null, null, -1)),
-                                    m === A ? (r(), d(p, { key: 0 }, [
-                                      C($(E(1)), 1)
-                                    ], 64)) : (r(), d(p, { key: 1 }, [
-                                      C($(E(0)) + ": ", 1),
-                                      e.$slots.groupName ? y(e.$slots, "groupName", {
+                                    m === A ? (s(), d(p, { key: 0 }, [
+                                      _($(E(1)), 1)
+                                    ], 64)) : (s(), d(p, { key: 1 }, [
+                                      _($(E(0)) + ": ", 1),
+                                      e.$slots.groupName ? b(e.$slots, "groupName", {
                                         key: 0,
                                         group: m
-                                      }) : (r(), d(p, { key: 1 }, [
-                                        C($(m), 1)
+                                      }) : (s(), d(p, { key: 1 }, [
+                                        _($(m), 1)
                                       ], 64))
                                     ], 64))
                                   ]),
-                                  e.$slots.groupByRow ? y(e.$slots, "groupByRow", {
+                                  e.$slots.groupByRow ? b(e.$slots, "groupByRow", {
                                     key: 0,
                                     group: m
-                                  }) : S("", !0)
+                                  }) : v("", !0)
                                 ])
                               ]),
                               _: 2
@@ -322,17 +322,17 @@ const Ie = ge("Settings2Icon", [
                       ]),
                       _: 2
                     }, 1024),
-                    s(t(de), { asChild: "" }, {
+                    r(t(de), { asChild: "" }, {
                       default: l(() => [
-                        (r(!0), d(p, null, k(n, (V) => (r(), c(j, {
-                          key: V.id,
+                        (s(!0), d(p, null, k(n, (M) => (s(), f(j, {
+                          key: M.id,
                           columns: a.columns,
-                          row: V,
+                          row: M,
                           renderSubComponent: a.renderSubComponent
                         }, {
                           actions: l(() => [
-                            y(e.$slots, "rowActions", {
-                              row: V.original
+                            b(e.$slots, "rowActions", {
+                              row: M.original
                             })
                           ]),
                           _: 2
@@ -342,26 +342,26 @@ const Ie = ge("Settings2Icon", [
                     }, 1024)
                   ]),
                   _: 2
-                }, 1024))), 128)) : (r(!0), d(p, { key: 1 }, k(t(u).getRowModel().rows, (n) => (r(), c(j, {
+                }, 1024))), 128)) : (s(!0), d(p, { key: 1 }, k(t(u).getRowModel().rows, (n) => (s(), f(j, {
                   key: n.id,
                   columns: a.columns,
                   row: n,
                   renderSubComponent: a.renderSubComponent
                 }, {
                   actions: l(() => [
-                    y(e.$slots, "rowActions", {
+                    b(e.$slots, "rowActions", {
                       row: n.original
                     })
                   ]),
                   _: 2
                 }, 1032, ["columns", "row", "renderSubComponent"]))), 128))
-              ], 64)) : (r(), c(t(se), {
+              ], 64)) : (s(), f(t(re), {
                 key: 1,
                 colspan: e.columns.length
               }, {
                 default: l(() => [
-                  y(e.$slots, "nodata", {}, () => [
-                    o[14] || (o[14] = C("No data"))
+                  b(e.$slots, "nodata", {}, () => [
+                    o[14] || (o[14] = _("No data"))
                   ])
                 ]),
                 _: 3
@@ -375,21 +375,21 @@ const Ie = ge("Settings2Icon", [
         e.enableColumnListControl ? {
           name: "columnVisibility",
           fn: l(() => [
-            s(t($e), {
+            r(t($e), {
               open: F.value,
               "onUpdate:open": o[4] || (o[4] = (n) => F.value = n)
             }, {
               default: l(() => [
-                s(t(ke), { "as-child": "" }, {
+                r(t(ke), { "as-child": "" }, {
                   default: l(() => [
-                    g("div", Ve, [
-                      g("div", xe, [
-                        s(t(ce), {
+                    g("div", Me, [
+                      g("div", Ve, [
+                        r(t(pe), {
                           variant: "ghost",
                           class: "flex h-8 w-8 items-center justify-center text-foreground"
                         }, {
                           default: l(() => [
-                            s(t(Ie), { class: "h-4 w-4 flex-shrink-0 opacity-50" })
+                            r(t(Ie), { class: "h-4 w-4 flex-shrink-0 opacity-50" })
                           ]),
                           _: 1
                         })
@@ -398,40 +398,40 @@ const Ie = ge("Settings2Icon", [
                   ]),
                   _: 1
                 }),
-                s(t(ze), {
+                r(t(ze), {
                   class: "w-[250px] p-0",
                   align: "start"
                 }, {
                   default: l(() => [
-                    s(t(we), null, {
+                    r(t(we), null, {
                       default: l(() => [
-                        s(t(_e), {
+                        r(t(Ce), {
                           placeholder: e.columnSearchPlaceholder,
-                          modelValue: P.value,
-                          "onUpdate:modelValue": o[0] || (o[0] = (n) => P.value = n),
-                          onInput: o[1] || (o[1] = (n) => P.value = n.target.value)
+                          modelValue: O.value,
+                          "onUpdate:modelValue": o[0] || (o[0] = (n) => O.value = n),
+                          onInput: o[1] || (o[1] = (n) => O.value = n.target.value)
                         }, null, 8, ["placeholder", "modelValue"]),
-                        s(t(he), null, {
+                        r(t(he), null, {
                           default: l(() => [
-                            s(t(Be), { class: "h-[300px]" }, {
+                            r(t(Be), { class: "h-[300px]" }, {
                               default: l(() => [
-                                s(t(Se), null, {
+                                r(t(Se), null, {
                                   default: l(() => [
-                                    C($(e.columnSearchNotFound), 1)
+                                    _($(e.columnSearchNotFound), 1)
                                   ]),
                                   _: 1
                                 }),
-                                s(t(Re), {
+                                r(t(Re), {
                                   "columns-list": I.value,
                                   "onUpdate:columnsList": o[2] || (o[2] = (n) => I.value = n)
                                 }, null, 8, ["columns-list"]),
-                                s(t(Ce), {
+                                r(t(_e), {
                                   value: "reset_columns_visibility",
                                   class: "px-2 py-1.5 font-medium text-muted-foreground",
-                                  onSelect: o[3] || (o[3] = (n) => t(u).setColumnVisibility({ ...v.value, ...J.value }))
+                                  onSelect: o[3] || (o[3] = (n) => t(u).setColumnVisibility({ ...w.value, ...Q.value }))
                                 }, {
                                   default: l(() => [
-                                    C($(e.columnResetVisibility), 1)
+                                    _($(e.columnResetVisibility), 1)
                                   ]),
                                   _: 1
                                 })
@@ -454,33 +454,44 @@ const Ie = ge("Settings2Icon", [
           key: "0"
         } : void 0
       ]), 1024),
-      e.showPagination && L.value > 0 ? (r(), d("div", Le, [
-        s(t(me), {
-          total: L.value,
+      (e.showPagination || e.$slots.numberOfItems) && x.value > 0 ? (s(), d("div", {
+        key: 1,
+        class: K(["flex w-full border-x border-b border-border/[0.16] bg-primary/[0.04] px-4 py-1 text-sm text-muted-foreground", {
+          "justify-between": e.showPagination && e.$slots.numberOfItems,
+          "justify-start": e.$slots.numberOfItems && !e.showPagination,
+          "justify-end": e.showPagination && !e.$slots.numberOfItems
+        }])
+      }, [
+        e.$slots.numberOfItems ? (s(), d("div", xe, [
+          b(e.$slots, "numberOfItems")
+        ])) : v("", !0),
+        e.showPagination ? (s(), f(t(me), {
+          key: 1,
+          total: x.value,
           pageIndex: B.value,
           "onUpdate:pageIndex": o[5] || (o[5] = (n) => B.value = n),
           pageSize: D.value,
           "onUpdate:pageSize": o[6] || (o[6] = (n) => D.value = n)
-        }, null, 8, ["total", "pageIndex", "pageSize"])
-      ])) : S("", !0)
+        }, null, 8, ["total", "pageIndex", "pageSize"])) : v("", !0)
+      ], 2)) : v("", !0)
     ], 64));
   }
 });
-function Y(f) {
+function q(c) {
   return { position: "relative" };
 }
 export {
   io as BuiDataTable,
   Re as BuiDataTableColumnList,
-  Q as BuiTable,
-  X as BuiTableBody,
+  X as BuiTable,
+  Z as BuiTableBody,
   go as BuiTableCaption,
-  O as BuiTableCell,
-  se as BuiTableEmpty,
-  co as BuiTableFooter,
-  Z as BuiTableHead,
-  ee as BuiTableHeader,
-  T as BuiTableRow,
+  T as BuiTableCell,
+  re as BuiTableEmpty,
+  po as BuiTableFooter,
+  ee as BuiTableHead,
+  oe as BuiTableHeader,
+  N as BuiTableRow,
   j as BuiTableRowSubrow,
-  Y as getPinningStyle
+  q as getPinningStyle
 };

package/dist/index.js

@@ -148,7 +148,7 @@ import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
 import { _ as Bi } from "./BuiTable.vue_vue_type_script_setup_true_lang-QoPGiEYZ.js";
 import { _ as fi } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-DblqmDim.js";
 import { _ as _i } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-CYBx0oJL.js";
-import { _ as di } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-BDSRArVd.js";
+import { _ as di } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-Dyf8tkSZ.js";
 import { _ as Ci } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-BXgL487_.js";
 import { _ as Fi } from "./BuiTableRow.vue_vue_type_script_setup_true_lang-Bl4nF6yV.js";
 import { _ as Si } from "./BuiTableCaption.vue_vue_type_script_setup_true_lang-CTEP1Sde.js";

package/package.json

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

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

@@ -246,6 +246,7 @@ function groupName(group: string | number) {
             @select="(action) => onRowAction(row, action)"
           />
         </template>
+        <template #numberOfItems>{{ data.length }} tasks</template>
       </BuiDataTable>
     </Variant>
   </Story>

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

@@ -30,8 +30,8 @@ import { ref } from 'vue'
 
         <div class="m-4 flex flex-col gap-2">
           <BuiProgress :model-value="0" />
-          <BuiProgress :model-value="1" />
-          <BuiProgress :model-value="50" />
+          <BuiProgress :model-value="1" :separators="[10, 35]" />
+          <BuiProgress :model-value="50" :separators="[10, 35]" />
           <BuiProgress :model-value="99" />
           <BuiProgress :model-value="100" />
         </div>
@@ -48,7 +48,7 @@ import { ref } from 'vue'
 
     <Variant title="Colors">
       <div class="m-4 flex flex-col gap-2">
-        <BuiProgress :model-value="50" class="max-w-[300px]" color="primary" />
+        <BuiProgress :model-value="50" class="max-w-[300px]" color="green" />
         <BuiProgress :model-value="50" class="max-w-[300px]" color="red" />
         <BuiProgress :model-value="50" class="max-w-[300px]" color="orange" />
       </div>

package/src/components/ui/progress/BuiProgress.vue

@@ -3,7 +3,7 @@ import { ProgressIndicator, ProgressRoot, type ProgressRootProps } from 'radix-v
 import { cn } from '@/lib/utils'
 import { type HTMLAttributes, computed } from 'vue'
 
-import { progressVariants, capVariants, indicatorVariants } from '.'
+import { progressVariants, indicatorVariants } from '.'
 
 const props = withDefaults(
   defineProps<
@@ -11,6 +11,7 @@ const props = withDefaults(
       class?: HTMLAttributes['class']
       variant?: NonNullable<Parameters<typeof progressVariants>[0]>['variant']
       color?: NonNullable<Parameters<typeof indicatorVariants>[0]>['color']
+      separators?: NonNullable<Array<number>>
     }
   >(),
   {
@@ -20,9 +21,13 @@ const props = withDefaults(
     variant: 'default'
   }
 )
-const indicatorClass = computed(() =>
-  !props.modelValue || props.modelValue < 100 ? 'rounded-r-none border-r-2' : ''
-)
+const indicatorClass = computed(() => {
+  if (!props.modelValue || props.modelValue >= 100) {
+    return ''
+  }
+
+  return 'rounded-r-none border-r-2'
+})
 </script>
 
 <template>
@@ -38,9 +43,16 @@ const indicatorClass = computed(() =>
   >
     <ProgressIndicator
       :class="cn(indicatorVariants({ color, variant }), indicatorClass, props.class)"
-      :style="`width: calc(calc(100% - ${capVariants[variant ?? 'default']}) * ${
-        (props.modelValue ?? 0) * 0.01
-      })`"
+      :style="`width: ${props.modelValue ?? 0}%;`"
     />
+    <template v-if="props.modelValue && props.separators && props.separators.length > 0">
+      <template v-for="separator in props.separators">
+        <div
+          v-if="separator > 0 && separator < 100 && separator < props.modelValue"
+          class="absolute bottom-0 top-0 w-px bg-background !p-0"
+          :style="`left:${separator}%`"
+        ></div>
+      </template>
+    </template>
   </ProgressRoot>
 </template>