@underverse-ui/underverse 0.1.26 → 0.1.30

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.
Files changed (7) hide show
  1. package/dist/index.cjs +132 -98
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +3 -1
  4. package/dist/index.d.ts +3 -1
  5. package/dist/index.js +132 -98
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -4239,6 +4239,7 @@ var Pagination = ({
4239
4239
  showPageNumbers = true,
4240
4240
  showInfo = false,
4241
4241
  disabled = false,
4242
+ alignment = "left",
4242
4243
  pageSize,
4243
4244
  pageSizeOptions,
4244
4245
  onPageSizeChange,
@@ -4246,6 +4247,17 @@ var Pagination = ({
4246
4247
  labels
4247
4248
  }) => {
4248
4249
  const t = (0, import_next_intl4.useTranslations)("Pagination");
4250
+ const getTextAlignmentClass = (align) => {
4251
+ switch (align) {
4252
+ case "left":
4253
+ return "text-left";
4254
+ case "center":
4255
+ return "text-center";
4256
+ case "right":
4257
+ return "text-right";
4258
+ }
4259
+ };
4260
+ const textAlignmentClass = getTextAlignmentClass(alignment);
4249
4261
  const createPageArray = () => {
4250
4262
  const delta = 2;
4251
4263
  const range = [];
@@ -4298,103 +4310,107 @@ var Pagination = ({
4298
4310
  };
4299
4311
  if (totalPages <= 1) return null;
4300
4312
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: cn("flex flex-col gap-4", className), "aria-label": labels?.navigationLabel || t("navigationLabel"), children: [
4301
- showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm text-muted-foreground text-center", children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
4302
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
4303
- showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4304
- Button_default,
4305
- {
4306
- variant: getButtonVariant(false),
4307
- size,
4308
- icon: import_lucide_react13.ChevronsLeft,
4309
- onClick: () => onChange(1),
4310
- disabled: disabled || page === 1,
4311
- className: "hidden sm:flex",
4312
- title: labels?.firstPage || t("firstPage"),
4313
- "aria-label": labels?.firstPage || t("firstPage"),
4314
- "aria-disabled": disabled || page === 1
4315
- }
4316
- ),
4317
- showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4318
- Button_default,
4319
- {
4320
- variant: getButtonVariant(false),
4321
- size,
4322
- icon: import_lucide_react13.ChevronLeft,
4323
- onClick: () => onChange(Math.max(1, page - 1)),
4324
- disabled: disabled || page === 1,
4325
- title: labels?.previousPage || t("previousPage"),
4326
- "aria-label": labels?.previousPage || t("previousPage"),
4327
- "aria-disabled": disabled || page === 1,
4328
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
4329
- }
4330
- ),
4331
- showPageNumbers && createPageArray().map((p, i) => {
4332
- if (p === "...") {
4333
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button_default, { variant: "ghost", size, disabled: true, icon: import_lucide_react13.MoreHorizontal, className: "cursor-default" }, i);
4334
- }
4335
- const pageNumber = p;
4336
- const isActive = page === pageNumber;
4337
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4313
+ showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("text-sm text-muted-foreground", textAlignmentClass), children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
4314
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center justify-between", {
4315
+ "flex-row-reverse": alignment === "right" || alignment === "center"
4316
+ }), children: [
4317
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center gap-1"), children: [
4318
+ showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4338
4319
  Button_default,
4339
4320
  {
4340
- variant: getButtonVariant(isActive),
4321
+ variant: getButtonVariant(false),
4341
4322
  size,
4342
- onClick: () => onChange(pageNumber),
4343
- disabled,
4344
- className: cn("min-w-[2.5rem]", isActive && "font-semibold"),
4345
- "aria-label": labels?.pageNumber ? labels.pageNumber(pageNumber) : t("pageNumber", { page: pageNumber }),
4346
- "aria-current": isActive ? "page" : void 0,
4347
- children: pageNumber
4348
- },
4349
- i
4350
- );
4351
- }),
4352
- showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4353
- Button_default,
4354
- {
4355
- variant: getButtonVariant(false),
4356
- size,
4357
- iconRight: import_lucide_react13.ChevronRight,
4358
- onClick: () => onChange(Math.min(totalPages, page + 1)),
4359
- disabled: disabled || page === totalPages,
4360
- title: labels?.nextPage || t("nextPage"),
4361
- "aria-label": labels?.nextPage || t("nextPage"),
4362
- "aria-disabled": disabled || page === totalPages,
4363
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
4364
- }
4365
- ),
4366
- showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4367
- Button_default,
4368
- {
4369
- variant: getButtonVariant(false),
4370
- size,
4371
- icon: import_lucide_react13.ChevronsRight,
4372
- onClick: () => onChange(totalPages),
4373
- disabled: disabled || page === totalPages,
4374
- className: "hidden sm:flex",
4375
- title: labels?.lastPage || t("lastPage"),
4376
- "aria-label": labels?.lastPage || t("lastPage"),
4377
- "aria-disabled": disabled || page === totalPages
4378
- }
4379
- )
4380
- ] }),
4381
- pageSizeOptions && onPageSizeChange && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-center gap-2 text-sm", children: [
4382
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "text-muted-foreground", children: [
4383
- labels?.itemsPerPage || t("itemsPerPage"),
4384
- ":"
4323
+ icon: import_lucide_react13.ChevronsLeft,
4324
+ onClick: () => onChange(1),
4325
+ disabled: disabled || page === 1,
4326
+ className: "hidden sm:flex",
4327
+ title: labels?.firstPage || t("firstPage"),
4328
+ "aria-label": labels?.firstPage || t("firstPage"),
4329
+ "aria-disabled": disabled || page === 1
4330
+ }
4331
+ ),
4332
+ showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4333
+ Button_default,
4334
+ {
4335
+ variant: getButtonVariant(false),
4336
+ size,
4337
+ icon: import_lucide_react13.ChevronLeft,
4338
+ onClick: () => onChange(Math.max(1, page - 1)),
4339
+ disabled: disabled || page === 1,
4340
+ title: labels?.previousPage || t("previousPage"),
4341
+ "aria-label": labels?.previousPage || t("previousPage"),
4342
+ "aria-disabled": disabled || page === 1,
4343
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
4344
+ }
4345
+ ),
4346
+ showPageNumbers && createPageArray().map((p, i) => {
4347
+ if (p === "...") {
4348
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button_default, { variant: "ghost", size, disabled: true, icon: import_lucide_react13.MoreHorizontal, className: "cursor-default" }, i);
4349
+ }
4350
+ const pageNumber = p;
4351
+ const isActive = page === pageNumber;
4352
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4353
+ Button_default,
4354
+ {
4355
+ variant: getButtonVariant(isActive),
4356
+ size,
4357
+ onClick: () => onChange(pageNumber),
4358
+ disabled,
4359
+ className: cn("min-w-[2.5rem]", isActive && "font-semibold"),
4360
+ "aria-label": labels?.pageNumber ? labels.pageNumber(pageNumber) : t("pageNumber", { page: pageNumber }),
4361
+ "aria-current": isActive ? "page" : void 0,
4362
+ children: pageNumber
4363
+ },
4364
+ i
4365
+ );
4366
+ }),
4367
+ showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4368
+ Button_default,
4369
+ {
4370
+ variant: getButtonVariant(false),
4371
+ size,
4372
+ iconRight: import_lucide_react13.ChevronRight,
4373
+ onClick: () => onChange(Math.min(totalPages, page + 1)),
4374
+ disabled: disabled || page === totalPages,
4375
+ title: labels?.nextPage || t("nextPage"),
4376
+ "aria-label": labels?.nextPage || t("nextPage"),
4377
+ "aria-disabled": disabled || page === totalPages,
4378
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
4379
+ }
4380
+ ),
4381
+ showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4382
+ Button_default,
4383
+ {
4384
+ variant: getButtonVariant(false),
4385
+ size,
4386
+ icon: import_lucide_react13.ChevronsRight,
4387
+ onClick: () => onChange(totalPages),
4388
+ disabled: disabled || page === totalPages,
4389
+ className: "hidden sm:flex",
4390
+ title: labels?.lastPage || t("lastPage"),
4391
+ "aria-label": labels?.lastPage || t("lastPage"),
4392
+ "aria-disabled": disabled || page === totalPages
4393
+ }
4394
+ )
4385
4395
  ] }),
4386
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4387
- Combobox,
4388
- {
4389
- options: pageSizeOptionsStrings,
4390
- value: pageSize?.toString() || "10",
4391
- onChange: handlePageSizeChange,
4392
- placeholder: "10",
4393
- searchPlaceholder: labels?.search || t("search"),
4394
- emptyText: labels?.noOptions || t("noOptions"),
4395
- disabled
4396
- }
4397
- ) })
4396
+ pageSizeOptions && onPageSizeChange && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center gap-2 text-sm"), children: [
4397
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "text-muted-foreground", children: [
4398
+ labels?.itemsPerPage || t("itemsPerPage"),
4399
+ ":"
4400
+ ] }),
4401
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4402
+ Combobox,
4403
+ {
4404
+ options: pageSizeOptionsStrings,
4405
+ value: pageSize?.toString() || "10",
4406
+ onChange: handlePageSizeChange,
4407
+ placeholder: "10",
4408
+ searchPlaceholder: labels?.search || t("search"),
4409
+ emptyText: labels?.noOptions || t("noOptions"),
4410
+ disabled
4411
+ }
4412
+ ) })
4413
+ ] })
4398
4414
  ] })
4399
4415
  ] });
4400
4416
  };
@@ -7147,6 +7163,7 @@ function DataTable({
7147
7163
  total = 0,
7148
7164
  page = 1,
7149
7165
  pageSize = 20,
7166
+ pageSizeOptions,
7150
7167
  onQueryChange,
7151
7168
  caption,
7152
7169
  toolbar,
@@ -7165,6 +7182,12 @@ function DataTable({
7165
7182
  const [curPage, setCurPage] = import_react21.default.useState(page);
7166
7183
  const [curPageSize, setCurPageSize] = import_react21.default.useState(pageSize);
7167
7184
  const debouncedFilters = useDebounced(filters, 350);
7185
+ import_react21.default.useEffect(() => {
7186
+ setCurPage(page);
7187
+ }, [page]);
7188
+ import_react21.default.useEffect(() => {
7189
+ setCurPageSize(pageSize);
7190
+ }, [pageSize]);
7168
7191
  import_react21.default.useEffect(() => {
7169
7192
  if (!onQueryChange) return;
7170
7193
  onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
@@ -7326,6 +7349,12 @@ function DataTable({
7326
7349
  },
7327
7350
  col.key
7328
7351
  )) });
7352
+ const isServerMode = Boolean(onQueryChange);
7353
+ const displayedData = isServerMode ? data : import_react21.default.useMemo(() => {
7354
+ const start = (curPage - 1) * curPageSize;
7355
+ return data.slice(start, start + curPageSize);
7356
+ }, [data, curPage, curPageSize]);
7357
+ const totalItems = isServerMode ? total : data.length;
7329
7358
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("space-y-2", className), children: [
7330
7359
  /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
7331
7360
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
@@ -7397,7 +7426,7 @@ function DataTable({
7397
7426
  )
7398
7427
  ] }),
7399
7428
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm", children: "Loading..." })
7400
- ] }) }) }) : !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : data.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
7429
+ ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
7401
7430
  const value = col.dataIndex ? row[col.dataIndex] : void 0;
7402
7431
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
7403
7432
  TableCell,
@@ -7417,16 +7446,21 @@ function DataTable({
7417
7446
  ]
7418
7447
  }
7419
7448
  ) }),
7420
- total > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
7449
+ totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
7421
7450
  Pagination,
7422
7451
  {
7423
7452
  page: curPage,
7424
- totalPages: Math.ceil(total / curPageSize),
7453
+ totalPages: Math.ceil(totalItems / curPageSize),
7425
7454
  onChange: (p) => setCurPage(p),
7426
7455
  className: "",
7427
7456
  showInfo: true,
7428
- totalItems: total,
7429
- pageSize: curPageSize
7457
+ totalItems,
7458
+ pageSize: curPageSize,
7459
+ pageSizeOptions,
7460
+ onPageSizeChange: (s) => {
7461
+ setCurPage(1);
7462
+ setCurPageSize(s);
7463
+ }
7430
7464
  }
7431
7465
  ) })
7432
7466
  ] });