@soft-stech/bootsman-ui-shadcn 1.4.32 → 1.4.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/pagination/BuiPaginationCommon.js +1 -1
- package/dist/components/ui/pagination/BuiPaginationCommon.vue.d.ts +5 -0
- package/dist/components/ui/pagination/index.js +1 -1
- package/dist/components/ui/table/BuiDataTable.vue.d.ts +5 -0
- package/dist/components/ui/table/index.js +37 -35
- package/dist/index.js +1 -1
- package/dist/{variables-Ct6TXY_l.js → variables-Cp5imn3x.js} +37 -36
- package/package.json +1 -1
- package/src/components/stories/BuiDataTable.story.vue +5 -0
- package/src/components/ui/pagination/BuiPaginationCommon.vue +12 -2
- package/src/components/ui/table/BuiDataTable.vue +6 -0
@@ -2,6 +2,11 @@ declare const pageSizes: readonly [10, 20, 30, 40, 50];
|
|
2
2
|
export type PageSize = (typeof pageSizes)[number];
|
3
3
|
declare let __VLS_typeProps: {
|
4
4
|
total: number;
|
5
|
+
translations?: {
|
6
|
+
itemsPerPage: string;
|
7
|
+
page: string;
|
8
|
+
of: string;
|
9
|
+
};
|
5
10
|
};
|
6
11
|
type __VLS_PublicProps = {
|
7
12
|
'pageSize': PageSize;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { _ as o } from "../../../variables-
|
1
|
+
import { _ as o } from "../../../variables-Cp5imn3x.js";
|
2
2
|
import { f as n, y as r, g as s } from "../../../index-DKlaqzM0.js";
|
3
3
|
import { _ as g } from "../../../BuiPaginationFirst.vue_vue_type_script_setup_true_lang-CwmCuGgF.js";
|
4
4
|
import { _ as P } from "../../../BuiPaginationLast.vue_vue_type_script_setup_true_lang-CSOtvyld.js";
|
@@ -38,6 +38,11 @@ declare const _default: <TData, TValue>(__VLS_props: NonNullable<Awaited<typeof
|
|
38
38
|
columnSearchPlaceholder?: string;
|
39
39
|
columnSearchNotFound?: string;
|
40
40
|
columnResetVisibility?: string;
|
41
|
+
paginationTranslations?: {
|
42
|
+
itemsPerPage: string;
|
43
|
+
page: string;
|
44
|
+
of: string;
|
45
|
+
};
|
41
46
|
})> & import('vue').PublicProps;
|
42
47
|
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
43
48
|
attrs: any;
|
@@ -4,15 +4,15 @@ import { _ as T } from "../../../BuiTableCell.vue_vue_type_script_setup_true_lan
|
|
4
4
|
import { _ as ee } from "../../../BuiTableHead.vue_vue_type_script_setup_true_lang-Dyf8tkSZ.js";
|
5
5
|
import { _ as oe } from "../../../BuiTableHeader.vue_vue_type_script_setup_true_lang-BXgL487_.js";
|
6
6
|
import { _ as N } from "../../../BuiTableRow.vue_vue_type_script_setup_true_lang-Bl4nF6yV.js";
|
7
|
-
import { defineComponent as G, computed as S, openBlock as s, createElementBlock as d, Fragment as
|
7
|
+
import { defineComponent as G, computed as S, openBlock as s, createElementBlock as d, Fragment as f, createBlock as p, 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";
|
8
8
|
import { _ as go } from "../../../BuiTableCaption.vue_vue_type_script_setup_true_lang-CTEP1Sde.js";
|
9
9
|
import { _ as re } from "../../../BuiTableEmpty.vue_vue_type_script_setup_true_lang-BTyX0sT5.js";
|
10
|
-
import { _ as
|
10
|
+
import { _ as fo } from "../../../BuiTableFooter.vue_vue_type_script_setup_true_lang-CRyh8XF5.js";
|
11
11
|
import { _ as ie } from "../../../BuiCollapsible.vue_vue_type_script_setup_true_lang-DjuQBjGZ.js";
|
12
12
|
import { _ as ue } from "../../../BuiCollapsibleTrigger.vue_vue_type_script_setup_true_lang-l-nmwAwq.js";
|
13
13
|
import { _ as de } from "../../../BuiCollapsibleContent.vue_vue_type_script_setup_true_lang-BiD89zzH.js";
|
14
|
-
import { _ as me } from "../../../variables-
|
15
|
-
import { h as ge, v as h, g as
|
14
|
+
import { _ as me } from "../../../variables-Cp5imn3x.js";
|
15
|
+
import { h as ge, v as h, g as pe, _ as fe } from "../../../utils-CwP7Up6y.js";
|
16
16
|
import { FlexRender as Y, useVueTable as ce, getCoreRowModel as be, getPaginationRowModel as ye, getSortedRowModel as ve } from "@tanstack/vue-table";
|
17
17
|
import { _ as we } from "../../../BuiCommand.vue_vue_type_script_setup_true_lang-BiBVfuW-.js";
|
18
18
|
import { _ as Se } from "../../../BuiCommandEmpty.vue_vue_type_script_setup_true_lang-BkPg_0iY.js";
|
@@ -44,8 +44,8 @@ const Ie = ge("Settings2Icon", [
|
|
44
44
|
},
|
45
45
|
setup(c) {
|
46
46
|
const a = c, z = S(() => a.row.original.name?.includes(Pe));
|
47
|
-
return (i, R) => (s(), d(
|
48
|
-
z.value ? v("", !0) : (s(),
|
47
|
+
return (i, R) => (s(), d(f, null, [
|
48
|
+
z.value ? v("", !0) : (s(), p(t(N), {
|
49
49
|
key: 0,
|
50
50
|
"data-row-state": i.row.getIsSelected() ? "selected" : void 0,
|
51
51
|
class: K(a.renderSubComponent?.(i.row) ? "border-b-0" : "")
|
@@ -54,7 +54,7 @@ const Ie = ge("Settings2Icon", [
|
|
54
54
|
b(i.$slots, "actions")
|
55
55
|
]),
|
56
56
|
default: l(() => [
|
57
|
-
(s(!0), d(
|
57
|
+
(s(!0), d(f, null, k(i.row.getVisibleCells(), (w) => (s(), p(t(T), {
|
58
58
|
key: w.id,
|
59
59
|
style: W({ ...t(q)(w.column) })
|
60
60
|
}, {
|
@@ -69,7 +69,7 @@ const Ie = ge("Settings2Icon", [
|
|
69
69
|
]),
|
70
70
|
_: 3
|
71
71
|
}, 8, ["data-row-state", "class"])),
|
72
|
-
a.renderSubComponent?.(i.row) ? (s(),
|
72
|
+
a.renderSubComponent?.(i.row) ? (s(), p(t(N), {
|
73
73
|
key: 1,
|
74
74
|
"data-row-state": i.row.getIsSelected() ? "selected" : void 0
|
75
75
|
}, {
|
@@ -82,7 +82,7 @@ const Ie = ge("Settings2Icon", [
|
|
82
82
|
class: "pt-0"
|
83
83
|
}, {
|
84
84
|
default: l(() => [
|
85
|
-
(s(),
|
85
|
+
(s(), p(te(a.renderSubComponent?.(i.row)?.())))
|
86
86
|
]),
|
87
87
|
_: 1
|
88
88
|
}, 8, ["colspan"])
|
@@ -94,7 +94,7 @@ const Ie = ge("Settings2Icon", [
|
|
94
94
|
}), Oe = {
|
95
95
|
key: 0,
|
96
96
|
class: "w-full py-3"
|
97
|
-
}, 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" },
|
97
|
+
}, 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" }, De = {
|
98
98
|
key: 0,
|
99
99
|
class: "flex min-h-8 items-center"
|
100
100
|
}, A = "#UNDEFINED#", io = /* @__PURE__ */ G({
|
@@ -115,7 +115,8 @@ const Ie = ge("Settings2Icon", [
|
|
115
115
|
enableColumnListControl: { type: Boolean },
|
116
116
|
columnSearchPlaceholder: { default: "Column name" },
|
117
117
|
columnSearchNotFound: { default: "Not found" },
|
118
|
-
columnResetVisibility: { default: "Reset column visibility" }
|
118
|
+
columnResetVisibility: { default: "Reset column visibility" },
|
119
|
+
paginationTranslations: {}
|
119
120
|
}, {
|
120
121
|
sorting: {},
|
121
122
|
sortingModifiers: {},
|
@@ -132,7 +133,7 @@ const Ie = ge("Settings2Icon", [
|
|
132
133
|
}),
|
133
134
|
emits: ["update:sorting", "update:pagination", "update:selection", "update:columnVisibility", "update:columnSizing", "update:columnOrder"],
|
134
135
|
setup(c) {
|
135
|
-
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"),
|
136
|
+
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"), D = S(
|
136
137
|
() => a.manualPagination ? a.totalItems : a.data.length
|
137
138
|
), J = a.columns.map((e) => e.meta?.pinLeft && e.id ? e.id : "").filter(Boolean), u = ce({
|
138
139
|
initialState: {
|
@@ -195,7 +196,7 @@ const Ie = ge("Settings2Icon", [
|
|
195
196
|
}
|
196
197
|
},
|
197
198
|
getRowId: a.getRowId
|
198
|
-
}),
|
199
|
+
}), x = S({
|
199
200
|
get() {
|
200
201
|
return u.getState().pagination.pageSize;
|
201
202
|
},
|
@@ -230,24 +231,24 @@ const Ie = ge("Settings2Icon", [
|
|
230
231
|
);
|
231
232
|
return ae(P, () => {
|
232
233
|
u.setColumnOrder(P.value);
|
233
|
-
}), (e, o) => (s(), d(
|
234
|
+
}), (e, o) => (s(), d(f, null, [
|
234
235
|
e.$slots.caption ? (s(), d("div", Oe, [
|
235
236
|
b(e.$slots, "caption", { table: t(u) })
|
236
237
|
])) : v("", !0),
|
237
238
|
r(t(X), null, se({
|
238
239
|
default: l(() => [
|
239
|
-
U.value ? (s(),
|
240
|
+
U.value ? (s(), p(t(oe), {
|
240
241
|
key: 0,
|
241
242
|
"freeze-header": a.freezeHeader
|
242
243
|
}, {
|
243
244
|
default: l(() => [
|
244
|
-
(s(!0), d(
|
245
|
+
(s(!0), d(f, null, k(U.value, (n) => (s(), p(t(ee), {
|
245
246
|
key: n.id,
|
246
247
|
style: W({ ...t(q)(n.column), width: n.getSize() + "px" }),
|
247
248
|
"freeze-header": a.freezeHeader
|
248
249
|
}, {
|
249
250
|
default: l(() => [
|
250
|
-
n.isPlaceholder ? v("", !0) : (s(),
|
251
|
+
n.isPlaceholder ? v("", !0) : (s(), p(t(Y), {
|
251
252
|
key: 0,
|
252
253
|
render: n.column.columnDef.header,
|
253
254
|
props: n.getContext()
|
@@ -255,7 +256,7 @@ const Ie = ge("Settings2Icon", [
|
|
255
256
|
g("div", {
|
256
257
|
onDblclick: () => n.column.resetSize(),
|
257
258
|
onMousedown: (m) => n.getResizeHandler()?.(m),
|
258
|
-
className: t(
|
259
|
+
className: t(pe)(
|
259
260
|
"absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50",
|
260
261
|
n.column.getIsResizing() ? "bg-primary opacity-50" : ""
|
261
262
|
)
|
@@ -268,8 +269,8 @@ const Ie = ge("Settings2Icon", [
|
|
268
269
|
}, 8, ["freeze-header"])) : v("", !0),
|
269
270
|
r(t(Z), null, {
|
270
271
|
default: l(() => [
|
271
|
-
t(u).getRowModel().rows?.length ? (s(), d(
|
272
|
-
a.groupBy && H.value ? (s(!0), d(
|
272
|
+
t(u).getRowModel().rows?.length ? (s(), d(f, { key: 0 }, [
|
273
|
+
a.groupBy && H.value ? (s(!0), d(f, { key: 0 }, k(H.value, (n, m) => (s(), p(t(ie), {
|
273
274
|
asChild: "",
|
274
275
|
key: m,
|
275
276
|
open: !0
|
@@ -296,14 +297,14 @@ const Ie = ge("Settings2Icon", [
|
|
296
297
|
o[11] || (o[11] = g("div", { class: "absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-background" }, null, -1)),
|
297
298
|
o[12] || (o[12] = g("div", { class: "absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]" }, null, -1)),
|
298
299
|
o[13] || (o[13] = g("div", null, null, -1)),
|
299
|
-
m === A ? (s(), d(
|
300
|
+
m === A ? (s(), d(f, { key: 0 }, [
|
300
301
|
_($(E(1)), 1)
|
301
|
-
], 64)) : (s(), d(
|
302
|
+
], 64)) : (s(), d(f, { key: 1 }, [
|
302
303
|
_($(E(0)) + ": ", 1),
|
303
304
|
e.$slots.groupName ? b(e.$slots, "groupName", {
|
304
305
|
key: 0,
|
305
306
|
group: m
|
306
|
-
}) : (s(), d(
|
307
|
+
}) : (s(), d(f, { key: 1 }, [
|
307
308
|
_($(m), 1)
|
308
309
|
], 64))
|
309
310
|
], 64))
|
@@ -324,7 +325,7 @@ const Ie = ge("Settings2Icon", [
|
|
324
325
|
}, 1024),
|
325
326
|
r(t(de), { asChild: "" }, {
|
326
327
|
default: l(() => [
|
327
|
-
(s(!0), d(
|
328
|
+
(s(!0), d(f, null, k(n, (M) => (s(), p(j, {
|
328
329
|
key: M.id,
|
329
330
|
columns: a.columns,
|
330
331
|
row: M,
|
@@ -342,7 +343,7 @@ const Ie = ge("Settings2Icon", [
|
|
342
343
|
}, 1024)
|
343
344
|
]),
|
344
345
|
_: 2
|
345
|
-
}, 1024))), 128)) : (s(!0), d(
|
346
|
+
}, 1024))), 128)) : (s(!0), d(f, { key: 1 }, k(t(u).getRowModel().rows, (n) => (s(), p(j, {
|
346
347
|
key: n.id,
|
347
348
|
columns: a.columns,
|
348
349
|
row: n,
|
@@ -355,7 +356,7 @@ const Ie = ge("Settings2Icon", [
|
|
355
356
|
]),
|
356
357
|
_: 2
|
357
358
|
}, 1032, ["columns", "row", "renderSubComponent"]))), 128))
|
358
|
-
], 64)) : (s(),
|
359
|
+
], 64)) : (s(), p(t(re), {
|
359
360
|
key: 1,
|
360
361
|
colspan: e.columns.length
|
361
362
|
}, {
|
@@ -384,7 +385,7 @@ const Ie = ge("Settings2Icon", [
|
|
384
385
|
default: l(() => [
|
385
386
|
g("div", Me, [
|
386
387
|
g("div", Ve, [
|
387
|
-
r(t(
|
388
|
+
r(t(fe), {
|
388
389
|
variant: "ghost",
|
389
390
|
class: "flex h-8 w-8 items-center justify-center text-foreground"
|
390
391
|
}, {
|
@@ -454,7 +455,7 @@ const Ie = ge("Settings2Icon", [
|
|
454
455
|
key: "0"
|
455
456
|
} : void 0
|
456
457
|
]), 1024),
|
457
|
-
(e.showPagination || e.$slots.numberOfItems) &&
|
458
|
+
(e.showPagination || e.$slots.numberOfItems) && D.value > 0 ? (s(), d("div", {
|
458
459
|
key: 1,
|
459
460
|
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", {
|
460
461
|
"justify-between": e.showPagination && e.$slots.numberOfItems,
|
@@ -462,17 +463,18 @@ const Ie = ge("Settings2Icon", [
|
|
462
463
|
"justify-end": e.showPagination && !e.$slots.numberOfItems
|
463
464
|
}])
|
464
465
|
}, [
|
465
|
-
e.$slots.numberOfItems ? (s(), d("div",
|
466
|
+
e.$slots.numberOfItems ? (s(), d("div", De, [
|
466
467
|
b(e.$slots, "numberOfItems")
|
467
468
|
])) : v("", !0),
|
468
|
-
e.showPagination ? (s(),
|
469
|
+
e.showPagination ? (s(), p(t(me), {
|
469
470
|
key: 1,
|
470
|
-
total:
|
471
|
+
total: D.value,
|
471
472
|
pageIndex: B.value,
|
472
473
|
"onUpdate:pageIndex": o[5] || (o[5] = (n) => B.value = n),
|
473
|
-
pageSize:
|
474
|
-
"onUpdate:pageSize": o[6] || (o[6] = (n) =>
|
475
|
-
|
474
|
+
pageSize: x.value,
|
475
|
+
"onUpdate:pageSize": o[6] || (o[6] = (n) => x.value = n),
|
476
|
+
translations: e.paginationTranslations
|
477
|
+
}, null, 8, ["total", "pageIndex", "pageSize", "translations"])) : v("", !0)
|
476
478
|
], 2)) : v("", !0)
|
477
479
|
], 64));
|
478
480
|
}
|
@@ -488,7 +490,7 @@ export {
|
|
488
490
|
go as BuiTableCaption,
|
489
491
|
T as BuiTableCell,
|
490
492
|
re as BuiTableEmpty,
|
491
|
-
|
493
|
+
fo as BuiTableFooter,
|
492
494
|
ee as BuiTableHead,
|
493
495
|
oe as BuiTableHeader,
|
494
496
|
N as BuiTableRow,
|
package/dist/index.js
CHANGED
@@ -77,7 +77,7 @@ import { _ as se } from "./BuiHoverCardTrigger.vue_vue_type_script_setup_true_la
|
|
77
77
|
import { _ as Be } from "./BuiHoverCardContent.vue_vue_type_script_setup_true_lang-BdyvfFrD.js";
|
78
78
|
import { BuiBadgedInput as fe, BuiInput as ne, BuiPasswordInput as _e, inputVariants as le } from "./components/ui/input/index.js";
|
79
79
|
import { _ as ge } from "./BuiLabel.vue_vue_type_script_setup_true_lang-BRu9znJb.js";
|
80
|
-
import { _ as Te } from "./variables-
|
80
|
+
import { _ as Te } from "./variables-Cp5imn3x.js";
|
81
81
|
import { _ as ce } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-CwmCuGgF.js";
|
82
82
|
import { _ as be } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-CSOtvyld.js";
|
83
83
|
import { _ as De } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-B4HmMbjL.js";
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent as
|
1
|
+
import { defineComponent as V, mergeModels as $, useModel as _, computed as c, openBlock as u, createBlock as y, unref as e, withCtx as r, createVNode as t, createElementVNode as v, toDisplayString as m, createElementBlock as x, Fragment as P, renderList as I, createTextVNode as M, createCommentVNode as k } from "vue";
|
2
2
|
/* empty css */
|
3
3
|
import { f as z, y as B } from "./index-DKlaqzM0.js";
|
4
4
|
import "vee-validate";
|
@@ -9,20 +9,21 @@ import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-KcSVihcY
|
|
9
9
|
import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-BNN6bEtZ.js";
|
10
10
|
import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-B5WlMfC3.js";
|
11
11
|
import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-B0NFOsOl.js";
|
12
|
-
import { _ as
|
12
|
+
import { _ as h } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-B6bF0Vu2.js";
|
13
13
|
import "@tanstack/vue-table";
|
14
14
|
import "./components/ui/toast/use-toast.js";
|
15
15
|
import "@vee-validate/zod";
|
16
16
|
import "zod";
|
17
17
|
import "./index-BGsblnmA.js";
|
18
|
-
import { _ as
|
19
|
-
import { _ as
|
20
|
-
import { _ as
|
21
|
-
import { _ as
|
22
|
-
const L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */
|
18
|
+
import { _ as q } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-CwmCuGgF.js";
|
19
|
+
import { _ as E } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-CSOtvyld.js";
|
20
|
+
import { _ as j } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-B4HmMbjL.js";
|
21
|
+
import { _ as D } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-3UkM3Scg.js";
|
22
|
+
const F = { class: "text-sm text-muted-foreground" }, L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ V({
|
23
23
|
__name: "BuiPaginationCommon",
|
24
|
-
props: /* @__PURE__ */
|
25
|
-
total: {}
|
24
|
+
props: /* @__PURE__ */ $({
|
25
|
+
total: {},
|
26
|
+
translations: {}
|
26
27
|
}, {
|
27
28
|
pageSize: { default: 10, required: !0 },
|
28
29
|
pageSizeModifiers: {},
|
@@ -30,47 +31,47 @@ const L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ $({
|
|
30
31
|
pageIndexModifiers: {}
|
31
32
|
}),
|
32
33
|
emits: ["update:pageSize", "update:pageIndex"],
|
33
|
-
setup(
|
34
|
-
const
|
34
|
+
setup(n) {
|
35
|
+
const S = [10, 20, 30, 40, 50], d = n, s = _(n, "pageSize"), i = _(n, "pageIndex"), f = c(() => Math.ceil(d.total / s.value)), g = c({
|
35
36
|
get() {
|
36
|
-
return String(
|
37
|
+
return String(s.value);
|
37
38
|
},
|
38
|
-
set(
|
39
|
-
|
39
|
+
set(l) {
|
40
|
+
s.value = parseInt(l);
|
40
41
|
}
|
41
42
|
});
|
42
|
-
return (
|
43
|
-
total:
|
44
|
-
itemsPerPage:
|
45
|
-
page:
|
46
|
-
"onUpdate:page":
|
43
|
+
return (l, o) => (u(), y(e(z), {
|
44
|
+
total: d.total,
|
45
|
+
itemsPerPage: s.value,
|
46
|
+
page: i.value,
|
47
|
+
"onUpdate:page": o[2] || (o[2] = (p) => i.value = p)
|
47
48
|
}, {
|
48
|
-
default: r(({ page:
|
49
|
+
default: r(({ page: p }) => [
|
49
50
|
t(e(B), { class: "relative flex items-center justify-center gap-2" }, {
|
50
51
|
default: r(() => [
|
51
|
-
|
52
|
+
v("p", F, m(l.translations?.itemsPerPage || "Items per page"), 1),
|
52
53
|
t(e(N), {
|
53
|
-
modelValue:
|
54
|
-
"onUpdate:modelValue":
|
54
|
+
modelValue: g.value,
|
55
|
+
"onUpdate:modelValue": o[0] || (o[0] = (a) => g.value = a),
|
55
56
|
modelModifiers: { number: !0 }
|
56
57
|
}, {
|
57
58
|
default: r(() => [
|
58
59
|
t(e(U), { class: "mr-2 w-[70px]" }, {
|
59
60
|
default: r(() => [
|
60
61
|
t(e(w), {
|
61
|
-
placeholder:
|
62
|
+
placeholder: s.value.toString()
|
62
63
|
}, null, 8, ["placeholder"])
|
63
64
|
]),
|
64
65
|
_: 1
|
65
66
|
}),
|
66
67
|
t(e(b), { side: "top" }, {
|
67
68
|
default: r(() => [
|
68
|
-
(
|
69
|
-
key:
|
70
|
-
value:
|
69
|
+
(u(), x(P, null, I(S, (a) => t(e(h), {
|
70
|
+
key: a,
|
71
|
+
value: a.toString()
|
71
72
|
}, {
|
72
73
|
default: r(() => [
|
73
|
-
M(
|
74
|
+
M(m(a), 1)
|
74
75
|
]),
|
75
76
|
_: 2
|
76
77
|
}, 1032, ["value"])), 64))
|
@@ -80,18 +81,18 @@ const L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ $({
|
|
80
81
|
]),
|
81
82
|
_: 1
|
82
83
|
}, 8, ["modelValue"]),
|
83
|
-
|
84
|
-
v("p", L, "Page " +
|
85
|
-
t(e(
|
86
|
-
t(e(
|
84
|
+
f.value > 1 ? (u(), x(P, { key: 0 }, [
|
85
|
+
v("p", L, m(l.translations?.page || "Page") + " " + m(p) + " " + m(l.translations?.of || "of") + " " + m(f.value), 1),
|
86
|
+
t(e(q)),
|
87
|
+
t(e(D)),
|
87
88
|
t(e(C), {
|
88
|
-
modelValue:
|
89
|
-
"onUpdate:modelValue":
|
89
|
+
modelValue: i.value,
|
90
|
+
"onUpdate:modelValue": o[1] || (o[1] = (a) => i.value = a),
|
90
91
|
class: "w-28",
|
91
92
|
placeholder: "Page number"
|
92
93
|
}, null, 8, ["modelValue"]),
|
93
|
-
t(e(
|
94
|
-
t(e(
|
94
|
+
t(e(j)),
|
95
|
+
t(e(E))
|
95
96
|
], 64)) : k("", !0)
|
96
97
|
]),
|
97
98
|
_: 2
|
package/package.json
CHANGED
@@ -202,6 +202,11 @@ function groupName(group: string | number) {
|
|
202
202
|
:groupLabels="groupLabels"
|
203
203
|
:renderSubComponent="renderSubComponent"
|
204
204
|
enable-column-list-control
|
205
|
+
:pagination-translations="{
|
206
|
+
itemsPerPage: 'Tasks per page',
|
207
|
+
page: 'Page',
|
208
|
+
of: 'of'
|
209
|
+
}"
|
205
210
|
>
|
206
211
|
<template #caption="{ table }">
|
207
212
|
<div class="flex justify-between">
|
@@ -22,6 +22,11 @@ export type PageSize = (typeof pageSizes)[number]
|
|
22
22
|
|
23
23
|
const props = defineProps<{
|
24
24
|
total: number
|
25
|
+
translations?: {
|
26
|
+
itemsPerPage: string
|
27
|
+
page: string
|
28
|
+
of: string
|
29
|
+
}
|
25
30
|
}>()
|
26
31
|
|
27
32
|
const pageSize = defineModel<PageSize>('pageSize', { default: 10, required: true })
|
@@ -46,7 +51,9 @@ const pageSizeString = computed({
|
|
46
51
|
v-model:page="pageIndex"
|
47
52
|
>
|
48
53
|
<BuiPaginationList class="relative flex items-center justify-center gap-2">
|
49
|
-
<p class="text-sm text-muted-foreground">
|
54
|
+
<p class="text-sm text-muted-foreground">
|
55
|
+
{{ translations?.itemsPerPage || 'Items per page' }}
|
56
|
+
</p>
|
50
57
|
<BuiSelect v-model.number="pageSizeString">
|
51
58
|
<BuiSelectTrigger class="mr-2 w-[70px]">
|
52
59
|
<BuiSelectValue :placeholder="pageSize.toString()" />
|
@@ -58,7 +65,10 @@ const pageSizeString = computed({
|
|
58
65
|
</BuiSelectContent>
|
59
66
|
</BuiSelect>
|
60
67
|
<template v-if="totalPages > 1">
|
61
|
-
<p class="text-sm text-muted-foreground">
|
68
|
+
<p class="text-sm text-muted-foreground">
|
69
|
+
{{ translations?.page || 'Page' }} {{ page }} {{ translations?.of || 'of' }}
|
70
|
+
{{ totalPages }}
|
71
|
+
</p>
|
62
72
|
<BuiPaginationFirst />
|
63
73
|
<BuiPaginationPrev />
|
64
74
|
<BuiInput v-model="pageIndex" class="w-28" placeholder="Page number" />
|
@@ -69,6 +69,11 @@ const props = withDefaults(
|
|
69
69
|
columnSearchPlaceholder?: string
|
70
70
|
columnSearchNotFound?: string
|
71
71
|
columnResetVisibility?: string
|
72
|
+
paginationTranslations?: {
|
73
|
+
itemsPerPage: string
|
74
|
+
page: string
|
75
|
+
of: string
|
76
|
+
}
|
72
77
|
}>(),
|
73
78
|
{
|
74
79
|
pageSize: 10,
|
@@ -402,6 +407,7 @@ watch(columnsListIds, () => {
|
|
402
407
|
:total="computedItems"
|
403
408
|
v-model:pageIndex="pageIndex"
|
404
409
|
v-model:pageSize="tablePageSize"
|
410
|
+
:translations="paginationTranslations"
|
405
411
|
>
|
406
412
|
</BuiPaginationCommon>
|
407
413
|
</div>
|