@underverse-ui/underverse 2.0.19 → 2.0.21

package/dist/index.d.cts

@@ -2976,9 +2976,11 @@ interface DataTableProps<T> {
     enableHeaderAutoFit?: boolean;
     labels?: DataTableLabels;
     borderMode?: BorderMode;
+    /** Pagination variant: "default" (ellipsis) or "classic" (blocks of 10 with fast forward/backward) */
+    paginationVariant?: "default" | "classic";
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, columnColorGroups, borderMode, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, columnColorGroups, borderMode, paginationVariant, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /** Public props for the `Table` component. */
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.d.ts

@@ -2976,9 +2976,11 @@ interface DataTableProps<T> {
     enableHeaderAutoFit?: boolean;
     labels?: DataTableLabels;
     borderMode?: BorderMode;
+    /** Pagination variant: "default" (ellipsis) or "classic" (blocks of 10 with fast forward/backward) */
+    paginationVariant?: "default" | "classic";
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, columnColorGroups, borderMode, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, columnColorGroups, borderMode, paginationVariant, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /** Public props for the `Table` component. */
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.js

@@ -22053,10 +22053,20 @@ function DataTablePagination({
   setCurPageSize,
   size,
   align,
-  paginationRange
+  paginationRange,
+  borderMode,
+  variant = "default"
 }) {
   const totalPages = Math.ceil(totalItems / curPageSize);
+  const isClassic = variant === "classic";
+  const classicBlockSize = 10;
   const pages = React51.useMemo(() => {
+    if (isClassic) {
+      const blockIndex = Math.floor((curPage - 1) / classicBlockSize);
+      const startPage = blockIndex * classicBlockSize + 1;
+      const endPage = Math.min(startPage + classicBlockSize - 1, totalPages);
+      return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+    }
     const edgeCount = Math.max(1, Math.floor(paginationRange ?? (totalPages < 14 ? 3 : 5)));
     if (totalPages <= edgeCount * 2 + 3) return Array.from({ length: totalPages }, (_, index) => index + 1);
     const pageNumbers = /* @__PURE__ */ new Set();
@@ -22064,14 +22074,17 @@ function DataTablePagination({
     for (let page = totalPages - edgeCount + 1; page <= totalPages; page += 1) pageNumbers.add(page);
     for (let page = Math.max(1, curPage - 1); page <= Math.min(totalPages, curPage + 1); page += 1) pageNumbers.add(page);
     return Array.from(pageNumbers).sort((a, b) => a - b).flatMap((page, index, sortedPages) => index > 0 && page - sortedPages[index - 1] > 1 ? ["...", page] : [page]);
-  }, [curPage, paginationRange, totalPages]);
+  }, [curPage, paginationRange, totalPages, isClassic]);
   if (totalItems === 0) return null;
   const controlButtonSize = size === "lg" ? "md" : "sm";
   const navBtnClass = size === "sm" ? "h-6 w-6 p-0 rounded-full" : size === "lg" ? "h-8 w-8 p-0 rounded-full" : "h-7 w-7 p-0 rounded-full";
   const navIconClass = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
-  const pageBtnClass = size === "sm" ? "h-6 min-w-6 px-1.5 rounded-full text-[11px] font-medium transition-colors" : size === "lg" ? "h-8 min-w-8 px-2.5 rounded-full text-sm font-medium transition-colors" : "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors";
+  const pageBtnRadiusClass = getBorderRadiusClass(borderMode);
+  const pageBtnClass = size === "sm" ? "h-6 min-w-6 px-1.5 text-[11px] font-medium transition-colors" : size === "lg" ? "h-8 min-w-8 px-2.5 text-sm font-medium transition-colors" : "h-7 min-w-7 px-2 text-xs font-medium transition-colors";
   const containerTextClass = size === "sm" ? "text-[11px]" : size === "lg" ? "text-sm" : "text-xs";
   const pageSizeClass = size === "sm" ? "w-16" : size === "lg" ? "w-24" : "w-20";
+  const showClassicNav = isClassic && totalPages > classicBlockSize;
+  const showArrowNav = !isClassic || showClassicNav;
   return /* @__PURE__ */ jsxs51("div", { className: cn("relative flex items-center gap-2 px-1 pt-3 text-muted-foreground", containerTextClass), children: [
     /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs51("div", { className: "tabular-nums", children: [
@@ -22081,7 +22094,7 @@ function DataTablePagination({
         "/",
         totalItems
       ] }),
-      pageSizeOptions && /* @__PURE__ */ jsx59(
+      pageSizeOptions && pageSizeOptions.length > 0 && /* @__PURE__ */ jsx59(
         Combobox,
         {
           options: pageSizeOptions.map(String),
@@ -22099,42 +22112,78 @@ function DataTablePagination({
       "div",
       {
         className: cn(
-          "flex items-center gap-0.5",
+          "flex items-center gap-3",
           align === "center" && "absolute left-1/2 -translate-x-1/2",
           align === "right" && "ml-auto"
         ),
         children: [
-          /* @__PURE__ */ jsx59(
+          showClassicNav && /* @__PURE__ */ jsx59(
             Button_default,
             {
               variant: "ghost",
               size: controlButtonSize,
               className: navBtnClass,
-              onClick: () => setCurPage(Math.max(1, curPage - 1)),
+              onClick: () => setCurPage(1),
               disabled: curPage === 1,
+              children: /* @__PURE__ */ jsx59("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }) })
+            }
+          ),
+          showArrowNav && /* @__PURE__ */ jsx59(
+            Button_default,
+            {
+              variant: "ghost",
+              size: controlButtonSize,
+              className: navBtnClass,
+              onClick: () => {
+                if (isClassic) {
+                  const startPage = Math.floor((curPage - 1) / classicBlockSize) * classicBlockSize + 1;
+                  setCurPage(Math.max(1, startPage - classicBlockSize));
+                } else {
+                  setCurPage(Math.max(1, curPage - 1));
+                }
+              },
+              disabled: isClassic ? Math.floor((curPage - 1) / classicBlockSize) === 0 : curPage === 1,
               children: /* @__PURE__ */ jsx59("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
-          pages.map(
+          /* @__PURE__ */ jsx59("div", { className: "flex items-center gap-2", children: pages.map(
             (p, i) => p === "..." ? /* @__PURE__ */ jsx59("span", { className: "px-1 text-muted-foreground/60", children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ jsx59(
               "button",
               {
                 onClick: () => setCurPage(p),
-                className: cn(pageBtnClass, curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"),
+                className: cn(pageBtnClass, pageBtnRadiusClass, curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"),
                 children: p
               },
               p
             )
+          ) }),
+          showArrowNav && /* @__PURE__ */ jsx59(
+            Button_default,
+            {
+              variant: "ghost",
+              size: controlButtonSize,
+              className: navBtnClass,
+              onClick: () => {
+                if (isClassic) {
+                  const startPage = Math.floor((curPage - 1) / classicBlockSize) * classicBlockSize + 1;
+                  setCurPage(Math.min(totalPages, startPage + classicBlockSize));
+                } else {
+                  setCurPage(Math.min(totalPages, curPage + 1));
+                }
+              },
+              disabled: isClassic ? Math.floor((curPage - 1) / classicBlockSize) === Math.floor((totalPages - 1) / classicBlockSize) : curPage === totalPages,
+              children: /* @__PURE__ */ jsx59("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
           ),
-          /* @__PURE__ */ jsx59(
+          showClassicNav && /* @__PURE__ */ jsx59(
             Button_default,
             {
               variant: "ghost",
               size: controlButtonSize,
               className: navBtnClass,
-              onClick: () => setCurPage(Math.min(totalPages, curPage + 1)),
+              onClick: () => setCurPage(totalPages),
               disabled: curPage === totalPages,
-              children: /* @__PURE__ */ jsx59("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              children: /* @__PURE__ */ jsx59("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
             }
           )
         ]
@@ -22852,7 +22901,8 @@ function DataTable({
   enableHeaderAutoFit = true,
   labels,
   columnColorGroups,
-  borderMode
+  borderMode,
+  paginationVariant = "default"
 }) {
   const t = useSmartTranslations("Common");
   const globalConfig = useUnderverseUIConfig();
@@ -23102,7 +23152,9 @@ function DataTable({
         setCurPageSize,
         size,
         align: paginationAlign,
-        paginationRange
+        paginationRange,
+        borderMode: resolvedBorderMode,
+        variant: paginationVariant
       }
     )
   ] });