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

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

@@ -1,25 +1,28 @@
-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 { defineComponent as L, mergeModels as U, useModel as b, computed as y, watchEffect as F, openBlock as n, createElementBlock as u, Fragment as d, renderSlot as w, unref as o, createCommentVNode as S, createVNode as g, withCtx as a, renderList as f, createBlock as m, createElementVNode as z, createTextVNode as v, toDisplayString as C } 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 j } 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 { 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 { v as R } from "./utils-DPuEjrVV.js";
+import { _ as N } 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: "flex w-full items-center justify-between" }, ne = { class: "inline-block rounded-t bg-background px-4 py-3" }, ae = {
+  key: 0,
+  class: ""
+}, E = "#UNDEFINED#", ve = /* @__PURE__ */ L({
   __name: "BuiDataTable",
-  props: /* @__PURE__ */ D({
+  props: /* @__PURE__ */ U({
     columns: {},
     data: {},
     pageSize: { default: 10 },
@@ -37,13 +40,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, $ = b(c, "sorting"), p = b(c, "pagination"), k = b(c, "selection"), D = b(c, "columnVisibility"), I = y(
       () => t.manualPagination ? t.totalItems : t.data.length
-    ), u = j({
+    ), i = H({
       initialState: { pagination: { pageSize: t.pageSize } },
       get data() {
         return t.data;
@@ -51,17 +56,17 @@ const ee = {
       get columns() {
         return t.columns;
       },
-      getCoreRowModel: H(),
-      getPaginationRowModel: K(),
-      getSortedRowModel: Y(),
+      getCoreRowModel: K(),
+      getPaginationRowModel: Y(),
+      getSortedRowModel: q(),
       onSortingChange: (e) => {
-        C(e, R);
+        R(e, $);
       },
       onPaginationChange: (e) => {
-        C(e, m);
+        R(e, p);
       },
       onRowSelectionChange: (e) => {
-        C(e, k);
+        R(e, k);
       },
       autoResetPageIndex: !1,
       manualPagination: t.manualPagination,
@@ -69,62 +74,65 @@ const ee = {
       manualSorting: t.manualSorting,
       state: {
         get sorting() {
-          return R.value;
+          return $.value;
         },
         get pagination() {
-          return m.value;
+          return p.value;
         },
         get rowSelection() {
           return k.value;
+        },
+        get columnVisibility() {
+          return D.value;
         }
       },
       getRowId: t.getRowId
-    }), $ = S({
+    }), h = y({
       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({
+    }), _ = y({
       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();
+    F(() => {
+      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 B = y(() => t.groupBy ? i.getRowModel().rows.reduce((e, s) => {
+      const l = s.getValue(t.groupBy) ?? E;
+      return e[l] = e[l] || [], e[l].push(s), e;
     }, /* @__PURE__ */ Object.create(null)) : null);
-    function h(e) {
+    function M(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, s) => (n(), u(d, null, [
+      e.$slots.caption ? (n(), u("div", te, [
+        w(e.$slots, "caption", { table: o(i) })
+      ])) : S("", !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), {
-                key: l.id
+              (n(!0), u(d, null, f(o(i).getHeaderGroups(), (r) => (n(), m(o(P), {
+                key: r.id
               }, {
                 default: a(() => [
-                  (n(!0), i(d, null, f(l.headers, (r) => (n(), p(o(Q), {
-                    key: r.id
+                  (n(!0), u(d, null, f(r.headers, (l) => (n(), m(o(W), {
+                    key: l.id
                   }, {
                     default: a(() => [
-                      r.isPlaceholder ? v("", !0) : (n(), p(o(q), {
+                      l.isPlaceholder ? S("", !0) : (n(), m(o(A), {
                         key: 0,
-                        render: r.column.columnDef.header,
-                        props: r.getContext()
+                        render: l.column.columnDef.header,
+                        props: l.getContext()
                       }, null, 8, ["render", "props"]))
                     ]),
                     _: 2
@@ -135,30 +143,35 @@ 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(), u(d, { key: 0 }, [
+                t.groupBy && B.value ? (n(!0), u(d, { key: 0 }, f(B.value, (r, l) => (n(), m(o(O), {
                   asChild: "",
-                  key: r,
+                  key: l,
                   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)
-                                  ], 64))
+                                z("div", oe, [
+                                  z("div", ne, [
+                                    l === E ? (n(), u(d, { key: 0 }, [
+                                      v(C(M(1)), 1)
+                                    ], 64)) : (n(), u(d, { key: 1 }, [
+                                      v(C(M(0)) + ": " + C(l), 1)
+                                    ], 64))
+                                  ]),
+                                  e.$slots.groupByRow ? (n(), u("div", ae, [
+                                    w(e.$slots, "groupByRow", { group: l })
+                                  ])) : S("", !0)
                                 ])
                               ]),
                               _: 2
@@ -169,12 +182,12 @@ const ee = {
                       ]),
                       _: 2
                     }, 1024),
-                    g(o(T), { asChild: "" }, {
+                    g(o(j), { asChild: "" }, {
                       default: a(() => [
-                        (n(!0), i(d, null, f(l, (B) => (n(), p(x, {
-                          key: B.id,
+                        (n(!0), u(d, null, f(r, (V) => (n(), m(N, {
+                          key: V.id,
                           columns: t.columns,
-                          row: B,
+                          row: V,
                           renderSubComponent: t.renderSubComponent
                         }, null, 8, ["columns", "row", "renderSubComponent"]))), 128))
                       ]),
@@ -182,19 +195,19 @@ const ee = {
                     }, 1024)
                   ]),
                   _: 2
-                }, 1024))), 128)) : (n(!0), i(d, { key: 1 }, f(o(u).getRowModel().rows, (l) => (n(), p(x, {
-                  key: l.id,
+                }, 1024))), 128)) : (n(!0), u(d, { key: 1 }, f(o(i).getRowModel().rows, (r) => (n(), m(N, {
+                  key: r.id,
                   columns: t.columns,
-                  row: l,
+                  row: r,
                   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"))
+                  w(e.$slots, "nodata", {}, () => [
+                    s[2] || (s[2] = v("No data"))
                   ])
                 ]),
                 _: 3
@@ -202,11 +215,11 @@ 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(() => [
@@ -214,9 +227,9 @@ const ee = {
                         class: "float-right",
                         total: I.value,
                         pageIndex: _.value,
-                        "onUpdate:pageIndex": s[0] || (s[0] = (l) => _.value = l),
-                        pageSize: $.value,
-                        "onUpdate:pageSize": s[1] || (s[1] = (l) => $.value = l)
+                        "onUpdate:pageIndex": s[0] || (s[0] = (r) => _.value = r),
+                        pageSize: h.value,
+                        "onUpdate:pageSize": s[1] || (s[1] = (r) => h.value = r)
                       }, null, 8, ["total", "pageIndex", "pageSize"])
                     ]),
                     _: 1
@@ -226,7 +239,7 @@ const ee = {
               })
             ]),
             _: 1
-          })) : v("", !0)
+          })) : S("", !0)
         ]),
         _: 3
       })
@@ -234,5 +247,5 @@ const ee = {
   }
 });
 export {
-  be as _
+  ve 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-B38w7sKR.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[];
@@ -31,12 +34,16 @@ declare const _default: <TData, TValue>(__VLS_props: NonNullable<Awaited<typeof
         caption?(_: {
             table: import('@tanstack/vue-table').Table<TData>;
         }): any;
+        groupByRow?(_: {
+            group: string | number;
+        }): any;
         nodata?(_: {}): any;
     };
     emit: {
         '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-B38w7sKR.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-B38w7sKR.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.5",
   "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">
@@ -162,6 +164,7 @@ function updateRows() {
           </div>
         </template>
         <template #nodata>Нет данных</template>
+        <template #groupByRow="{ group }"> Optional slot for: `{{ group }}` </template>
       </BuiDataTable>
     </Variant>
   </Story>

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
@@ -165,11 +170,16 @@ function getGroupLabel(index: number) {
             <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 class="flex w-full items-center justify-between">
+                    <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>
+                    <div v-if="$slots.groupByRow" class="">
+                      <slot name="groupByRow" :group="key" />
+                    </div>
                   </div>
                 </BuiTableCell>
               </BuiTableRow>