@soft-stech/bootsman-ui-shadcn 1.3.3 → 1.3.4

package/dist/{BuiDataTable.vue_vue_type_script_setup_true_lang-CLpLGgTZ.js → BuiDataTable.vue_vue_type_script_setup_true_lang-D2QvMzcY.js}

@@ -1,25 +1,25 @@
-import { defineComponent as V, mergeModels as D, useModel as b, computed as S, watchEffect as L, openBlock as n, createElementBlock as i, Fragment as d, renderSlot as z, unref as o, createCommentVNode as v, createVNode as g, withCtx as a, renderList as f, createBlock as p, createElementVNode as U, createTextVNode as w, toDisplayString as y } from "vue";
-import { _ as F } from "./BuiCollapsible.vue_vue_type_script_setup_true_lang-BfgRYJts.js";
-import { _ as O } from "./BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-DJ8YMCCp.js";
-import { _ as T } from "./BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-eieHE5yV.js";
-import { _ as G } from "./BuiPaginationCommon.vue_vue_type_script_setup_true_lang-DjLAqoa-.js";
+import { defineComponent as D, mergeModels as L, useModel as b, computed as S, watchEffect as U, openBlock as n, createElementBlock as s, Fragment as d, renderSlot as V, unref as o, createCommentVNode as y, createVNode as g, withCtx as a, renderList as f, createBlock as m, createElementVNode as F, createTextVNode as v, toDisplayString as w } from "vue";
+import { _ as O } from "./BuiCollapsible.vue_vue_type_script_setup_true_lang-BfgRYJts.js";
+import { _ as T } from "./BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-DJ8YMCCp.js";
+import { _ as G } from "./BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-eieHE5yV.js";
+import { _ as j } from "./BuiPaginationCommon.vue_vue_type_script_setup_true_lang-DjLAqoa-.js";
 import { v as C } from "./utils-DPuEjrVV.js";
-import { _ as x } from "./BuiTableRowSubrow.vue_vue_type_script_setup_true_lang-Ch5gemw2.js";
-import { useVueTable as j, getCoreRowModel as H, getPaginationRowModel as K, getSortedRowModel as Y, FlexRender as q } from "@tanstack/vue-table";
-import { _ as A } from "./BuiTable.vue_vue_type_script_setup_true_lang-CUPSwE5z.js";
-import { _ as J } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-CWT4u-Ma.js";
-import { _ as N } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-BrTQJCiZ.js";
-import { _ as Q } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-CCXONmtG.js";
-import { _ as W } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-DZOqi3dp.js";
+import { _ as z } from "./BuiTableRowSubrow.vue_vue_type_script_setup_true_lang-Ch5gemw2.js";
+import { useVueTable as H, getCoreRowModel as K, getPaginationRowModel as Y, getSortedRowModel as q, FlexRender as A } from "@tanstack/vue-table";
+import { _ as J } from "./BuiTable.vue_vue_type_script_setup_true_lang-CUPSwE5z.js";
+import { _ as Q } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-CWT4u-Ma.js";
+import { _ as x } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-BrTQJCiZ.js";
+import { _ as W } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-CCXONmtG.js";
+import { _ as X } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-DZOqi3dp.js";
 import { _ as P } from "./BuiTableRow.vue_vue_type_script_setup_true_lang-CpEilJsW.js";
-import { _ as X } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BJDYHpRG.js";
-import { _ as Z } from "./BuiTableFooter.vue_vue_type_script_setup_true_lang-Cfxlxsbh.js";
-const ee = {
+import { _ as Z } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BJDYHpRG.js";
+import { _ as ee } from "./BuiTableFooter.vue_vue_type_script_setup_true_lang-Cfxlxsbh.js";
+const te = {
   key: 0,
   class: "w-full py-4"
-}, te = { class: "inline-block rounded-t bg-background px-4 py-3" }, E = "#UNDEFINED#", be = /* @__PURE__ */ V({
+}, oe = { class: "inline-block rounded-t bg-background px-4 py-3" }, N = "#UNDEFINED#", ye = /* @__PURE__ */ D({
   __name: "BuiDataTable",
-  props: /* @__PURE__ */ D({
+  props: /* @__PURE__ */ L({
     columns: {},
     data: {},
     pageSize: { default: 10 },
@@ -37,13 +37,15 @@ const ee = {
     pagination: {},
     paginationModifiers: {},
     selection: {},
-    selectionModifiers: {}
+    selectionModifiers: {},
+    columnVisibility: {},
+    columnVisibilityModifiers: {}
   }),
-  emits: ["update:sorting", "update:pagination", "update:selection"],
+  emits: ["update:sorting", "update:pagination", "update:selection", "update:columnVisibility"],
   setup(c) {
-    const t = c, R = b(c, "sorting"), m = b(c, "pagination"), k = b(c, "selection"), I = S(
+    const t = c, R = b(c, "sorting"), p = b(c, "pagination"), k = b(c, "selection"), E = b(c, "columnVisibility"), I = S(
       () => t.manualPagination ? t.totalItems : t.data.length
-    ), u = j({
+    ), i = H({
       initialState: { pagination: { pageSize: t.pageSize } },
       get data() {
         return t.data;
@@ -51,14 +53,14 @@ const ee = {
       get columns() {
         return t.columns;
       },
-      getCoreRowModel: H(),
-      getPaginationRowModel: K(),
-      getSortedRowModel: Y(),
+      getCoreRowModel: K(),
+      getPaginationRowModel: Y(),
+      getSortedRowModel: q(),
       onSortingChange: (e) => {
         C(e, R);
       },
       onPaginationChange: (e) => {
-        C(e, m);
+        C(e, p);
       },
       onRowSelectionChange: (e) => {
         C(e, k);
@@ -72,56 +74,59 @@ const ee = {
           return R.value;
         },
         get pagination() {
-          return m.value;
+          return p.value;
         },
         get rowSelection() {
           return k.value;
+        },
+        get columnVisibility() {
+          return E.value;
         }
       },
       getRowId: t.getRowId
     }), $ = S({
       get() {
-        return u.getState().pagination.pageSize;
+        return i.getState().pagination.pageSize;
       },
       set(e) {
-        m.value && (m.value.pageSize = e, u.setPageSize(e), u.setPageIndex(0));
+        p.value && (p.value.pageSize = e, i.setPageSize(e), i.setPageIndex(0));
       }
     }), _ = S({
       get() {
-        return u.getState().pagination.pageIndex + 1;
+        return i.getState().pagination.pageIndex + 1;
       },
       set(e) {
-        m.value && (m.value.pageIndex = e - 1, u.setPageIndex(e - 1));
+        p.value && (p.value.pageIndex = e - 1, i.setPageIndex(e - 1));
       }
     });
-    L(() => {
-      const e = u.getPageCount();
+    U(() => {
+      const e = i.getPageCount();
       e && e < _.value && (_.value = e);
     });
-    const M = S(() => t.groupBy ? u.getRowModel().rows.reduce((e, s) => {
-      const r = s.getValue(t.groupBy) ?? E;
-      return e[r] = e[r] || [], e[r].push(s), e;
+    const M = S(() => t.groupBy ? i.getRowModel().rows.reduce((e, u) => {
+      const r = u.getValue(t.groupBy) ?? N;
+      return e[r] = e[r] || [], e[r].push(u), e;
     }, /* @__PURE__ */ Object.create(null)) : null);
     function h(e) {
       return (t.groupBy && t.groupLabels ? t.groupLabels[t.groupBy] || [] : [])[e];
     }
-    return (e, s) => (n(), i(d, null, [
-      e.$slots.caption ? (n(), i("div", ee, [
-        z(e.$slots, "caption", { table: o(u) })
-      ])) : v("", !0),
-      g(o(A), null, {
+    return (e, u) => (n(), s(d, null, [
+      e.$slots.caption ? (n(), s("div", te, [
+        V(e.$slots, "caption", { table: o(i) })
+      ])) : y("", !0),
+      g(o(J), null, {
         default: a(() => [
-          g(o(W), null, {
+          g(o(X), null, {
             default: a(() => [
-              (n(!0), i(d, null, f(o(u).getHeaderGroups(), (l) => (n(), p(o(P), {
+              (n(!0), s(d, null, f(o(i).getHeaderGroups(), (l) => (n(), m(o(P), {
                 key: l.id
               }, {
                 default: a(() => [
-                  (n(!0), i(d, null, f(l.headers, (r) => (n(), p(o(Q), {
+                  (n(!0), s(d, null, f(l.headers, (r) => (n(), m(o(W), {
                     key: r.id
                   }, {
                     default: a(() => [
-                      r.isPlaceholder ? v("", !0) : (n(), p(o(q), {
+                      r.isPlaceholder ? y("", !0) : (n(), m(o(A), {
                         key: 0,
                         render: r.column.columnDef.header,
                         props: r.getContext()
@@ -135,29 +140,29 @@ const ee = {
             ]),
             _: 1
           }),
-          g(o(J), null, {
+          g(o(Q), null, {
             default: a(() => [
-              o(u).getRowModel().rows?.length ? (n(), i(d, { key: 0 }, [
-                t.groupBy && M.value ? (n(!0), i(d, { key: 0 }, f(M.value, (l, r) => (n(), p(o(F), {
+              o(i).getRowModel().rows?.length ? (n(), s(d, { key: 0 }, [
+                t.groupBy && M.value ? (n(!0), s(d, { key: 0 }, f(M.value, (l, r) => (n(), m(o(O), {
                   asChild: "",
                   key: r,
                   open: !0
                 }, {
                   default: a(() => [
-                    g(o(O), { asChild: "" }, {
+                    g(o(T), { asChild: "" }, {
                       default: a(() => [
                         g(o(P), { class: "bg-foreground/[0.04]" }, {
                           default: a(() => [
-                            g(o(N), {
+                            g(o(x), {
                               colspan: e.columns.length,
                               class: "!pb-0"
                             }, {
                               default: a(() => [
-                                U("div", te, [
-                                  r === E ? (n(), i(d, { key: 0 }, [
-                                    w(y(h(1)), 1)
-                                  ], 64)) : (n(), i(d, { key: 1 }, [
-                                    w(y(h(0)) + ": " + y(r), 1)
+                                F("div", oe, [
+                                  r === N ? (n(), s(d, { key: 0 }, [
+                                    v(w(h(1)), 1)
+                                  ], 64)) : (n(), s(d, { key: 1 }, [
+                                    v(w(h(0)) + ": " + w(r), 1)
                                   ], 64))
                                 ])
                               ]),
@@ -169,9 +174,9 @@ const ee = {
                       ]),
                       _: 2
                     }, 1024),
-                    g(o(T), { asChild: "" }, {
+                    g(o(G), { asChild: "" }, {
                       default: a(() => [
-                        (n(!0), i(d, null, f(l, (B) => (n(), p(x, {
+                        (n(!0), s(d, null, f(l, (B) => (n(), m(z, {
                           key: B.id,
                           columns: t.columns,
                           row: B,
@@ -182,19 +187,19 @@ const ee = {
                     }, 1024)
                   ]),
                   _: 2
-                }, 1024))), 128)) : (n(!0), i(d, { key: 1 }, f(o(u).getRowModel().rows, (l) => (n(), p(x, {
+                }, 1024))), 128)) : (n(!0), s(d, { key: 1 }, f(o(i).getRowModel().rows, (l) => (n(), m(z, {
                   key: l.id,
                   columns: t.columns,
                   row: l,
                   renderSubComponent: t.renderSubComponent
                 }, null, 8, ["columns", "row", "renderSubComponent"]))), 128))
-              ], 64)) : (n(), p(o(X), {
+              ], 64)) : (n(), m(o(Z), {
                 key: 1,
                 colspan: e.columns.length
               }, {
                 default: a(() => [
-                  z(e.$slots, "nodata", {}, () => [
-                    s[2] || (s[2] = w("No data"))
+                  V(e.$slots, "nodata", {}, () => [
+                    u[2] || (u[2] = v("No data"))
                   ])
                 ]),
                 _: 3
@@ -202,21 +207,21 @@ const ee = {
             ]),
             _: 3
           }),
-          e.showPagination && I.value > 0 ? (n(), p(o(Z), { key: 0 }, {
+          e.showPagination && I.value > 0 ? (n(), m(o(ee), { key: 0 }, {
             default: a(() => [
               g(o(P), null, {
                 default: a(() => [
-                  g(o(N), {
+                  g(o(x), {
                     colspan: e.columns.length
                   }, {
                     default: a(() => [
-                      g(o(G), {
+                      g(o(j), {
                         class: "float-right",
                         total: I.value,
                         pageIndex: _.value,
-                        "onUpdate:pageIndex": s[0] || (s[0] = (l) => _.value = l),
+                        "onUpdate:pageIndex": u[0] || (u[0] = (l) => _.value = l),
                         pageSize: $.value,
-                        "onUpdate:pageSize": s[1] || (s[1] = (l) => $.value = l)
+                        "onUpdate:pageSize": u[1] || (u[1] = (l) => $.value = l)
                       }, null, 8, ["total", "pageIndex", "pageSize"])
                     ]),
                     _: 1
@@ -226,7 +231,7 @@ const ee = {
               })
             ]),
             _: 1
-          })) : v("", !0)
+          })) : y("", !0)
         ]),
         _: 3
       })
@@ -234,5 +239,5 @@ const ee = {
   }
 });
 export {
-  be as _
+  ye as _
 };

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

@@ -1,4 +1,4 @@
-import { _ as f } from "../../../BuiDataTable.vue_vue_type_script_setup_true_lang-CLpLGgTZ.js";
+import { _ as f } from "../../../BuiDataTable.vue_vue_type_script_setup_true_lang-D2QvMzcY.js";
 export {
   f as default
 };

package/dist/components/ui/table/BuiDataTable.vue.d.ts

@@ -1,17 +1,20 @@
-import { ColumnDef, PaginationState, Row, RowSelectionState, SortingState } from '@tanstack/vue-table';
+import { ColumnDef, PaginationState, Row, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
 declare const _default: <TData, TValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:sorting"?: ((sorting: SortingState) => any) | undefined;
         readonly "onUpdate:pagination"?: ((pagination: PaginationState) => any) | undefined;
         readonly "onUpdate:selection"?: ((selection: RowSelectionState) => any) | undefined;
+        readonly "onUpdate:columnVisibility"?: ((columnVisibility: VisibilityState) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
         "onUpdate:sorting"?: ((sorting: SortingState) => any) | undefined;
         "onUpdate:pagination"?: ((pagination: PaginationState) => any) | undefined;
         "onUpdate:selection"?: ((selection: RowSelectionState) => any) | undefined;
-    }>, never>, "onUpdate:sorting" | "onUpdate:pagination" | "onUpdate:selection"> & ({
+        "onUpdate:columnVisibility"?: ((columnVisibility: VisibilityState) => any) | undefined;
+    }>, never>, "onUpdate:sorting" | "onUpdate:pagination" | "onUpdate:selection" | "onUpdate:columnVisibility"> & ({
         sorting?: SortingState;
         pagination?: PaginationState;
         selection?: RowSelectionState;
+        columnVisibility?: VisibilityState;
     } & {
         columns: ColumnDef<TData, TValue>[];
         data: TData[];
@@ -37,6 +40,7 @@ declare const _default: <TData, TValue>(__VLS_props: NonNullable<Awaited<typeof
         'update:sorting': [sorting: SortingState];
         'update:pagination': [pagination: PaginationState];
         'update:selection': [selection: RowSelectionState];
+        'update:columnVisibility': [columnVisibility: VisibilityState];
     };
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;

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

@@ -8,7 +8,7 @@ import { _ as x } from "../../../BuiTableRowSubrow.vue_vue_type_script_setup_tru
 import { _ } from "../../../BuiTableCaption.vue_vue_type_script_setup_true_lang-053YvtXp.js";
 import { _ as w } from "../../../BuiTableEmpty.vue_vue_type_script_setup_true_lang-BJDYHpRG.js";
 import { _ as C } from "../../../BuiTableFooter.vue_vue_type_script_setup_true_lang-Cfxlxsbh.js";
-import { _ as R } from "../../../BuiDataTable.vue_vue_type_script_setup_true_lang-CLpLGgTZ.js";
+import { _ as R } from "../../../BuiDataTable.vue_vue_type_script_setup_true_lang-D2QvMzcY.js";
 export {
   R as BuiDataTable,
   e as BuiTable,

package/dist/index.js

@@ -116,7 +116,7 @@ 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-CLpLGgTZ.js";
+import { _ as Qt } from "./BuiDataTable.vue_vue_type_script_setup_true_lang-D2QvMzcY.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";

package/package.json

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

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

@@ -53,7 +53,8 @@ const columns: ColumnDef<Task>[] = [
   {
     accessorKey: 'priority',
     header: ({ column }) => tableColumnSortCommon(column, 'Priorities')
-  }
+  },
+  { id: 'hiddenColumn', header: 'Hidden Column', cell: 'secret info' }
 ]
 const data = ref<Task[]>(tasks)
 
@@ -137,6 +138,7 @@ function updateRows() {
         :groupBy="groupBy === 'none' ? undefined : groupBy"
         :groupLabels="groupLabels"
         :renderSubComponent="renderSubComponent"
+        :columnVisibility="{ hiddenColumn: false }"
       >
         <template #caption="{ table }">
           <div class="flex justify-between">

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

@@ -12,7 +12,8 @@ import type {
   PaginationState,
   Row,
   RowSelectionState,
-  SortingState
+  SortingState,
+  VisibilityState
 } from '@tanstack/vue-table'
 import {
   FlexRender,
@@ -55,6 +56,7 @@ const props = withDefaults(
 const sorting = defineModel<SortingState>('sorting')
 const pagination = defineModel<PaginationState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
+const columnVisibility = defineModel<VisibilityState>('columnVisibility')
 const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
@@ -90,6 +92,9 @@ const table = useVueTable({
     },
     get rowSelection() {
       return rowSelection.value
+    },
+    get columnVisibility() {
+      return columnVisibility.value
     }
   },
   getRowId: props.getRowId