@soft-stech/bootsman-ui-shadcn 1.2.0 → 1.2.2

package/dist/{BuiDataTable.vue_vue_type_script_setup_true_lang-B9r03KU3.js → BuiDataTable.vue_vue_type_script_setup_true_lang-CBCScilf.js}

@@ -1,21 +1,21 @@
-import { defineComponent as V, mergeModels as D, useModel as S, computed as _, openBlock as n, createBlock as s, unref as t, withCtx as a, renderSlot as E, createCommentVNode as b, createVNode as g, createElementBlock as d, Fragment as m, renderList as f, createElementVNode as L, createTextVNode as y, toDisplayString as w } from "vue";
-import { _ as U } from "./BuiCollapsible.vue_vue_type_script_setup_true_lang-BfgRYJts.js";
-import { _ as F } from "./BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-DJ8YMCCp.js";
-import { _ as O } from "./BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-eieHE5yV.js";
-import { _ as T } from "./BuiPaginationCommon.vue_vue_type_script_setup_true_lang-6BhiWgI6.js";
+import { defineComponent as V, mergeModels as D, useModel as b, computed as S, watchEffect as L, openBlock as n, createBlock as i, unref as t, withCtx as a, renderSlot as h, createCommentVNode as w, createVNode as g, createElementBlock as d, Fragment as m, renderList as f, createElementVNode as U, createTextVNode as y, toDisplayString as v } 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-6BhiWgI6.js";
 import { v as C } from "./utils-DPuEjrVV.js";
-import { _ as h } from "./BuiTableRowSubrow.vue_vue_type_script_setup_true_lang-Ch5gemw2.js";
-import { useVueTable as G, getCoreRowModel as j, getPaginationRowModel as H, getSortedRowModel as K, FlexRender as Y } from "@tanstack/vue-table";
-import { _ as q } from "./BuiTable.vue_vue_type_script_setup_true_lang-CUPSwE5z.js";
-import { _ as A } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-CWT4u-Ma.js";
-import { _ as z } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-BrTQJCiZ.js";
-import { _ as J } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-bRr43VQ9.js";
-import { _ as Q } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-DZOqi3dp.js";
-import { _ as v } from "./BuiTableRow.vue_vue_type_script_setup_true_lang-CpEilJsW.js";
-import { _ as W } from "./BuiTableCaption.vue_vue_type_script_setup_true_lang-053YvtXp.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 = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UNDEFINED#", be = /* @__PURE__ */ V({
+import { _ as z } 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 x } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-BrTQJCiZ.js";
+import { _ as Q } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-bRr43VQ9.js";
+import { _ as W } 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 "./BuiTableCaption.vue_vue_type_script_setup_true_lang-053YvtXp.js";
+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 = { class: "inline-block rounded-t bg-background px-4 py-3" }, N = "#UNDEFINED#", we = /* @__PURE__ */ V({
   __name: "BuiDataTable",
   props: /* @__PURE__ */ D({
     columns: {},
@@ -39,9 +39,9 @@ const ee = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UN
   }),
   emits: ["update:sorting", "update:pagination", "update:selection"],
   setup(c) {
-    const o = c, k = S(c, "sorting"), p = S(c, "pagination"), P = S(c, "selection"), N = _(
+    const o = c, R = b(c, "sorting"), p = b(c, "pagination"), $ = b(c, "selection"), E = S(
       () => o.manualPagination ? o.totalItems : o.data.length
-    ), u = G({
+    ), l = j({
       initialState: { pagination: { pageSize: o.pageSize } },
       get data() {
         return o.data;
@@ -49,76 +49,82 @@ const ee = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UN
       get columns() {
         return o.columns;
       },
-      getCoreRowModel: j(),
-      getPaginationRowModel: H(),
-      getSortedRowModel: K(),
+      getCoreRowModel: H(),
+      getPaginationRowModel: K(),
+      getSortedRowModel: Y(),
       onSortingChange: (e) => {
-        C(e, k);
+        C(e, R);
       },
       onPaginationChange: (e) => {
         C(e, p);
       },
       onRowSelectionChange: (e) => {
-        C(e, P);
+        C(e, $);
       },
+      autoResetPageIndex: !1,
       manualPagination: o.manualPagination,
       // set to false to enable client-side pagination
       manualSorting: o.manualSorting,
       state: {
         get sorting() {
-          return k.value;
+          return R.value;
         },
         get pagination() {
           return p.value;
         },
         get rowSelection() {
-          return P.value;
+          return $.value;
         }
       },
       getRowId: o.getRowId
-    }), R = _({
+    }), k = S({
       get() {
-        return u.getState().pagination.pageSize;
+        return l.getState().pagination.pageSize;
       },
       set(e) {
-        p.value && (p.value.pageSize = e, u.setPageSize(e), u.setPageIndex(0));
+        p.value && (p.value.pageSize = e, l.setPageSize(e), l.setPageIndex(0));
       }
-    }), $ = _({
+    }), _ = S({
       get() {
-        return u.getState().pagination.pageIndex + 1;
+        return l.getState().pagination.pageIndex + 1;
       },
       set(e) {
-        p.value && (p.value.pageIndex = e - 1, u.setPageIndex(e - 1));
+        p.value && (p.value.pageIndex = e - 1, l.setPageIndex(e - 1));
       }
-    }), I = _(() => o.groupBy ? u.getRowModel().rows.reduce((e, i) => {
-      const l = i.getValue(o.groupBy) ?? x;
-      return e[l] = e[l] || [], e[l].push(i), e;
+    });
+    L(() => {
+      const e = l.getPageCount();
+      e && e < _.value && (_.value = e);
+    });
+    const I = S(() => o.groupBy ? l.getRowModel().rows.reduce((e, s) => {
+      const u = s.getValue(o.groupBy) ?? N;
+      return e[u] = e[u] || [], e[u].push(s), e;
     }, /* @__PURE__ */ Object.create(null)) : null);
     function M(e) {
       return (o.groupBy && o.groupLabels ? o.groupLabels[o.groupBy] || [] : [])[e];
     }
-    return (e, i) => (n(), s(t(q), null, {
+    return (e, s) => (n(), i(t(A), null, {
       default: a(() => [
-        e.$slots.caption ? (n(), s(t(W), { key: 0 }, {
+        e.$slots.caption ? (n(), i(t(X), { key: 0 }, {
           default: a(() => [
-            E(e.$slots, "caption", { table: t(u) })
+            h(e.$slots, "caption", { table: t(l) })
           ]),
           _: 3
-        })) : b("", !0),
-        g(t(Q), null, {
+        })) : w("", !0),
+        g(t(W), null, {
           default: a(() => [
-            (n(!0), d(m, null, f(t(u).getHeaderGroups(), (r) => (n(), s(t(v), {
+            (n(!0), d(m, null, f(t(l).getHeaderGroups(), (r) => (n(), i(t(P), {
               key: r.id
             }, {
               default: a(() => [
-                (n(!0), d(m, null, f(r.headers, (l) => (n(), s(t(J), {
-                  key: l.id
+                (n(!0), d(m, null, f(r.headers, (u) => (n(), i(t(Q), {
+                  key: u.id
                 }, {
                   default: a(() => [
-                    l.isPlaceholder ? b("", !0) : (n(), s(t(Y), {
+                    u.isPlaceholder ? w("", !0) : (n(), i(t(q), {
                       key: 0,
-                      render: l.column.columnDef.header,
-                      props: l.getContext()
+                      render: u.column.columnDef.header,
+                      props: u.getContext()
                     }, null, 8, ["render", "props"]))
                   ]),
                   _: 2
@@ -129,29 +135,29 @@ const ee = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UN
           ]),
           _: 1
         }),
-        g(t(A), null, {
+        g(t(J), null, {
           default: a(() => [
-            t(u).getRowModel().rows?.length ? (n(), d(m, { key: 0 }, [
-              o.groupBy && I.value ? (n(!0), d(m, { key: 0 }, f(I.value, (r, l) => (n(), s(t(U), {
+            t(l).getRowModel().rows?.length ? (n(), d(m, { key: 0 }, [
+              o.groupBy && I.value ? (n(!0), d(m, { key: 0 }, f(I.value, (r, u) => (n(), i(t(F), {
                 asChild: "",
-                key: l,
+                key: u,
                 open: !0
               }, {
                 default: a(() => [
-                  g(t(F), { asChild: "" }, {
+                  g(t(O), { asChild: "" }, {
                     default: a(() => [
-                      g(t(v), { class: "bg-foreground/[0.04]" }, {
+                      g(t(P), { class: "bg-foreground/[0.04]" }, {
                         default: a(() => [
-                          g(t(z), {
+                          g(t(x), {
                             colspan: e.columns.length,
                             class: "!pb-0"
                           }, {
                             default: a(() => [
-                              L("div", ee, [
-                                l === x ? (n(), d(m, { key: 0 }, [
-                                  y(w(M(1)), 1)
+                              U("div", te, [
+                                u === N ? (n(), d(m, { key: 0 }, [
+                                  y(v(M(1)), 1)
                                 ], 64)) : (n(), d(m, { key: 1 }, [
-                                  y(w(M(0)) + ": " + w(l), 1)
+                                  y(v(M(0)) + ": " + v(u), 1)
                                 ], 64))
                               ])
                             ]),
@@ -163,9 +169,9 @@ const ee = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UN
                     ]),
                     _: 2
                   }, 1024),
-                  g(t(O), { asChild: "" }, {
+                  g(t(T), { asChild: "" }, {
                     default: a(() => [
-                      (n(!0), d(m, null, f(r, (B) => (n(), s(h, {
+                      (n(!0), d(m, null, f(r, (B) => (n(), i(z, {
                         key: B.id,
                         columns: o.columns,
                         row: B,
@@ -176,39 +182,41 @@ const ee = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UN
                   }, 1024)
                 ]),
                 _: 2
-              }, 1024))), 128)) : (n(!0), d(m, { key: 1 }, f(t(u).getRowModel().rows, (r) => (n(), s(h, {
+              }, 1024))), 128)) : (n(!0), d(m, { key: 1 }, f(t(l).getRowModel().rows, (r) => (n(), i(z, {
                 key: r.id,
                 columns: o.columns,
                 row: r,
                 renderSubComponent: o.renderSubComponent
               }, null, 8, ["columns", "row", "renderSubComponent"]))), 128))
-            ], 64)) : (n(), s(t(X), {
+            ], 64)) : (n(), i(t(Z), {
               key: 1,
               colspan: e.columns.length
             }, {
-              default: a(() => i[2] || (i[2] = [
-                y("No data")
-              ])),
-              _: 1
+              default: a(() => [
+                h(e.$slots, "nodata", {}, () => [
+                  s[2] || (s[2] = y("No data"))
+                ])
+              ]),
+              _: 3
             }, 8, ["colspan"]))
           ]),
-          _: 1
+          _: 3
         }),
-        e.showPagination && t(u).getPageCount() > 1 ? (n(), s(t(Z), { key: 1 }, {
+        e.showPagination && t(l).getPageCount() > 1 ? (n(), i(t(ee), { key: 1 }, {
           default: a(() => [
-            g(t(v), null, {
+            g(t(P), null, {
               default: a(() => [
-                g(t(z), {
+                g(t(x), {
                   colspan: e.columns.length
                 }, {
                   default: a(() => [
-                    g(t(T), {
+                    g(t(G), {
                       class: "float-right",
-                      total: N.value,
-                      pageIndex: $.value,
-                      "onUpdate:pageIndex": i[0] || (i[0] = (r) => $.value = r),
-                      pageSize: R.value,
-                      "onUpdate:pageSize": i[1] || (i[1] = (r) => R.value = r)
+                      total: E.value,
+                      pageIndex: _.value,
+                      "onUpdate:pageIndex": s[0] || (s[0] = (r) => _.value = r),
+                      pageSize: k.value,
+                      "onUpdate:pageSize": s[1] || (s[1] = (r) => k.value = r)
                     }, null, 8, ["total", "pageIndex", "pageSize"])
                   ]),
                   _: 1
@@ -218,12 +226,12 @@ const ee = { class: "inline-block rounded-t bg-background px-4 py-3" }, x = "#UN
             })
           ]),
           _: 1
-        })) : b("", !0)
+        })) : w("", !0)
       ]),
       _: 3
     }));
   }
 });
 export {
-  be as _
+  we as _
 };

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

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

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

@@ -31,6 +31,7 @@ declare const _default: <TData, TValue>(__VLS_props: NonNullable<Awaited<typeof
         caption?(_: {
             table: import('@tanstack/vue-table').Table<TData>;
         }): any;
+        nodata?(_: {}): any;
     };
     emit: {
         'update:sorting': [sorting: SortingState];

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-B9r03KU3.js";
+import { _ as R } from "../../../BuiDataTable.vue_vue_type_script_setup_true_lang-CBCScilf.js";
 export {
   R as BuiDataTable,
   e as BuiTable,

package/dist/index.js

@@ -116,7 +116,7 @@ import { _ as Et } from "./BuiTableRowSubrow.vue_vue_type_script_setup_true_lang
 import { _ as Nt } from "./BuiTableCaption.vue_vue_type_script_setup_true_lang-053YvtXp.js";
 import { _ as Ut } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BJDYHpRG.js";
 import { _ as zt } from "./BuiTableFooter.vue_vue_type_script_setup_true_lang-Cfxlxsbh.js";
-import { _ as Kt } from "./BuiDataTable.vue_vue_type_script_setup_true_lang-B9r03KU3.js";
+import { _ as Kt } from "./BuiDataTable.vue_vue_type_script_setup_true_lang-CBCScilf.js";
 import { BuiTabsList as Wt, BuiTabsTrigger as Xt, tabsListVariants as Yt, tabsTriggerVariants as Zt } from "./components/ui/tabs/index.js";
 import { BuiTextarea as oa, textareaVariants as ra } from "./components/ui/textarea/index.js";
 import { BuiToast as ta, BuiToaster as aa, toastVariants as ia } from "./components/ui/toast/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "files": [
     "dist",
@@ -16,7 +16,7 @@
   },
   "peerDependencies": {
     "vue": "^3.5.6",
-    "zod": "^3.23.8",
+    "zod": "^3.23.6",
     "vee-validate": "^4.13.2",
     "@tanstack/vue-table": "8.20.5",
     "@vee-validate/zod": "4.13.2",

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

@@ -112,6 +112,13 @@ function renderSubComponent(row: Row<Task>) {
     return undefined
   }
 }
+
+function deleteRow() {
+  data.value = data.value.map((a) => a)
+}
+function updateRows() {
+  data.value.shift()
+}
 </script>
 
 <template>
@@ -134,6 +141,8 @@ function renderSubComponent(row: Row<Task>) {
         <template #caption="{ table }">
           <div class="flex justify-between">
             <BuiButton variant="outline">Download YAML</BuiButton>
+            <BuiButton variant="outline" @click="updateRows"> Delete row </BuiButton>
+            <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
 
             <BuiTabs v-model="groupBy">
               <BuiTabsList class="grid w-full grid-cols-2" :variant="'default'">
@@ -152,6 +161,7 @@ function renderSubComponent(row: Row<Task>) {
             </span>
           </div>
         </template>
+        <template #nodata>Нет данных</template>
       </BuiDataTable>
     </Variant>
   </Story>

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

@@ -21,7 +21,7 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -79,6 +79,7 @@ const table = useVueTable({
   onRowSelectionChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, rowSelection)
   },
+  autoResetPageIndex: false,
   manualPagination: props.manualPagination, // set to false to enable client-side pagination
   manualSorting: props.manualSorting,
   state: {
@@ -117,6 +118,13 @@ const pageIndex = computed({
   }
 })
 
+watchEffect(() => {
+  const totalPages = table.getPageCount()
+  if (totalPages && totalPages < pageIndex.value) {
+    pageIndex.value = totalPages
+  }
+})
+
 const groupedRows = computed<{ [key: string]: Row<TData>[] }>(() => {
   if (!props.groupBy) return null
 
@@ -188,7 +196,9 @@ function getGroupLabel(index: number) {
         </template>
       </template>
       <template v-else>
-        <BuiTableEmpty :colspan="columns.length">No data</BuiTableEmpty>
+        <BuiTableEmpty :colspan="columns.length">
+          <slot name="nodata">No data</slot>
+        </BuiTableEmpty>
       </template>
     </BuiTableBody>
     <BuiTableFooter v-if="showPagination && table.getPageCount() > 1">