@underverse-ui/underverse 0.1.26 → 0.1.30

package/dist/index.d.cts

@@ -596,6 +596,7 @@ interface PaginationProps {
     showPageNumbers?: boolean;
     showInfo?: boolean;
     disabled?: boolean;
+    alignment?: "left" | "center" | "right";
     pageSize?: number;
     pageSizeOptions?: number[];
     onPageSizeChange?: (size: number) => void;
@@ -949,6 +950,7 @@ interface DataTableProps<T> {
     total?: number;
     page?: number;
     pageSize?: number;
+    pageSizeOptions?: number[];
     onQueryChange?: (q: DataTableQuery) => void;
     caption?: React__default.ReactNode;
     toolbar?: React__default.ReactNode;
@@ -964,7 +966,7 @@ interface DataTableProps<T> {
         comfortable?: string;
     };
 }
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
 className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.d.ts

@@ -596,6 +596,7 @@ interface PaginationProps {
     showPageNumbers?: boolean;
     showInfo?: boolean;
     disabled?: boolean;
+    alignment?: "left" | "center" | "right";
     pageSize?: number;
     pageSizeOptions?: number[];
     onPageSizeChange?: (size: number) => void;
@@ -949,6 +950,7 @@ interface DataTableProps<T> {
     total?: number;
     page?: number;
     pageSize?: number;
+    pageSizeOptions?: number[];
     onQueryChange?: (q: DataTableQuery) => void;
     caption?: React__default.ReactNode;
     toolbar?: React__default.ReactNode;
@@ -964,7 +966,7 @@ interface DataTableProps<T> {
         comfortable?: string;
     };
 }
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
 className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.js

@@ -4095,6 +4095,7 @@ var Pagination = ({
   showPageNumbers = true,
   showInfo = false,
   disabled = false,
+  alignment = "left",
   pageSize,
   pageSizeOptions,
   onPageSizeChange,
@@ -4102,6 +4103,17 @@ var Pagination = ({
   labels
 }) => {
   const t = useTranslations4("Pagination");
+  const getTextAlignmentClass = (align) => {
+    switch (align) {
+      case "left":
+        return "text-left";
+      case "center":
+        return "text-center";
+      case "right":
+        return "text-right";
+    }
+  };
+  const textAlignmentClass = getTextAlignmentClass(alignment);
   const createPageArray = () => {
     const delta = 2;
     const range = [];
@@ -4154,103 +4166,107 @@ var Pagination = ({
   };
   if (totalPages <= 1) return null;
   return /* @__PURE__ */ jsxs22("nav", { className: cn("flex flex-col gap-4", className), "aria-label": labels?.navigationLabel || t("navigationLabel"), children: [
-    showInfo && totalItems && /* @__PURE__ */ jsx24("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 }) }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-center gap-1", children: [
-      showFirstLast && /* @__PURE__ */ jsx24(
-        Button_default,
-        {
-          variant: getButtonVariant(false),
-          size,
-          icon: ChevronsLeft,
-          onClick: () => onChange(1),
-          disabled: disabled || page === 1,
-          className: "hidden sm:flex",
-          title: labels?.firstPage || t("firstPage"),
-          "aria-label": labels?.firstPage || t("firstPage"),
-          "aria-disabled": disabled || page === 1
-        }
-      ),
-      showPrevNext && /* @__PURE__ */ jsx24(
-        Button_default,
-        {
-          variant: getButtonVariant(false),
-          size,
-          icon: ChevronLeft,
-          onClick: () => onChange(Math.max(1, page - 1)),
-          disabled: disabled || page === 1,
-          title: labels?.previousPage || t("previousPage"),
-          "aria-label": labels?.previousPage || t("previousPage"),
-          "aria-disabled": disabled || page === 1,
-          children: /* @__PURE__ */ jsx24("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
-        }
-      ),
-      showPageNumbers && createPageArray().map((p, i) => {
-        if (p === "...") {
-          return /* @__PURE__ */ jsx24(Button_default, { variant: "ghost", size, disabled: true, icon: MoreHorizontal2, className: "cursor-default" }, i);
-        }
-        const pageNumber = p;
-        const isActive = page === pageNumber;
-        return /* @__PURE__ */ jsx24(
+    showInfo && totalItems && /* @__PURE__ */ jsx24("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 }) }),
+    /* @__PURE__ */ jsxs22("div", { className: cn("flex items-center justify-between", {
+      "flex-row-reverse": alignment === "right" || alignment === "center"
+    }), children: [
+      /* @__PURE__ */ jsxs22("div", { className: cn("flex items-center gap-1"), children: [
+        showFirstLast && /* @__PURE__ */ jsx24(
           Button_default,
           {
-            variant: getButtonVariant(isActive),
+            variant: getButtonVariant(false),
             size,
-            onClick: () => onChange(pageNumber),
-            disabled,
-            className: cn("min-w-[2.5rem]", isActive && "font-semibold"),
-            "aria-label": labels?.pageNumber ? labels.pageNumber(pageNumber) : t("pageNumber", { page: pageNumber }),
-            "aria-current": isActive ? "page" : void 0,
-            children: pageNumber
-          },
-          i
-        );
-      }),
-      showPrevNext && /* @__PURE__ */ jsx24(
-        Button_default,
-        {
-          variant: getButtonVariant(false),
-          size,
-          iconRight: ChevronRight2,
-          onClick: () => onChange(Math.min(totalPages, page + 1)),
-          disabled: disabled || page === totalPages,
-          title: labels?.nextPage || t("nextPage"),
-          "aria-label": labels?.nextPage || t("nextPage"),
-          "aria-disabled": disabled || page === totalPages,
-          children: /* @__PURE__ */ jsx24("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
-        }
-      ),
-      showFirstLast && /* @__PURE__ */ jsx24(
-        Button_default,
-        {
-          variant: getButtonVariant(false),
-          size,
-          icon: ChevronsRight,
-          onClick: () => onChange(totalPages),
-          disabled: disabled || page === totalPages,
-          className: "hidden sm:flex",
-          title: labels?.lastPage || t("lastPage"),
-          "aria-label": labels?.lastPage || t("lastPage"),
-          "aria-disabled": disabled || page === totalPages
-        }
-      )
-    ] }),
-    pageSizeOptions && onPageSizeChange && /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsxs22("span", { className: "text-muted-foreground", children: [
-        labels?.itemsPerPage || t("itemsPerPage"),
-        ":"
+            icon: ChevronsLeft,
+            onClick: () => onChange(1),
+            disabled: disabled || page === 1,
+            className: "hidden sm:flex",
+            title: labels?.firstPage || t("firstPage"),
+            "aria-label": labels?.firstPage || t("firstPage"),
+            "aria-disabled": disabled || page === 1
+          }
+        ),
+        showPrevNext && /* @__PURE__ */ jsx24(
+          Button_default,
+          {
+            variant: getButtonVariant(false),
+            size,
+            icon: ChevronLeft,
+            onClick: () => onChange(Math.max(1, page - 1)),
+            disabled: disabled || page === 1,
+            title: labels?.previousPage || t("previousPage"),
+            "aria-label": labels?.previousPage || t("previousPage"),
+            "aria-disabled": disabled || page === 1,
+            children: /* @__PURE__ */ jsx24("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
+          }
+        ),
+        showPageNumbers && createPageArray().map((p, i) => {
+          if (p === "...") {
+            return /* @__PURE__ */ jsx24(Button_default, { variant: "ghost", size, disabled: true, icon: MoreHorizontal2, className: "cursor-default" }, i);
+          }
+          const pageNumber = p;
+          const isActive = page === pageNumber;
+          return /* @__PURE__ */ jsx24(
+            Button_default,
+            {
+              variant: getButtonVariant(isActive),
+              size,
+              onClick: () => onChange(pageNumber),
+              disabled,
+              className: cn("min-w-[2.5rem]", isActive && "font-semibold"),
+              "aria-label": labels?.pageNumber ? labels.pageNumber(pageNumber) : t("pageNumber", { page: pageNumber }),
+              "aria-current": isActive ? "page" : void 0,
+              children: pageNumber
+            },
+            i
+          );
+        }),
+        showPrevNext && /* @__PURE__ */ jsx24(
+          Button_default,
+          {
+            variant: getButtonVariant(false),
+            size,
+            iconRight: ChevronRight2,
+            onClick: () => onChange(Math.min(totalPages, page + 1)),
+            disabled: disabled || page === totalPages,
+            title: labels?.nextPage || t("nextPage"),
+            "aria-label": labels?.nextPage || t("nextPage"),
+            "aria-disabled": disabled || page === totalPages,
+            children: /* @__PURE__ */ jsx24("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
+          }
+        ),
+        showFirstLast && /* @__PURE__ */ jsx24(
+          Button_default,
+          {
+            variant: getButtonVariant(false),
+            size,
+            icon: ChevronsRight,
+            onClick: () => onChange(totalPages),
+            disabled: disabled || page === totalPages,
+            className: "hidden sm:flex",
+            title: labels?.lastPage || t("lastPage"),
+            "aria-label": labels?.lastPage || t("lastPage"),
+            "aria-disabled": disabled || page === totalPages
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx24("div", { className: "w-20", children: /* @__PURE__ */ jsx24(
-        Combobox,
-        {
-          options: pageSizeOptionsStrings,
-          value: pageSize?.toString() || "10",
-          onChange: handlePageSizeChange,
-          placeholder: "10",
-          searchPlaceholder: labels?.search || t("search"),
-          emptyText: labels?.noOptions || t("noOptions"),
-          disabled
-        }
-      ) })
+      pageSizeOptions && onPageSizeChange && /* @__PURE__ */ jsxs22("div", { className: cn("flex items-center gap-2 text-sm"), children: [
+        /* @__PURE__ */ jsxs22("span", { className: "text-muted-foreground", children: [
+          labels?.itemsPerPage || t("itemsPerPage"),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx24("div", { className: "w-20", children: /* @__PURE__ */ jsx24(
+          Combobox,
+          {
+            options: pageSizeOptionsStrings,
+            value: pageSize?.toString() || "10",
+            onChange: handlePageSizeChange,
+            placeholder: "10",
+            searchPlaceholder: labels?.search || t("search"),
+            emptyText: labels?.noOptions || t("noOptions"),
+            disabled
+          }
+        ) })
+      ] })
     ] })
   ] });
 };
@@ -7003,6 +7019,7 @@ function DataTable({
   total = 0,
   page = 1,
   pageSize = 20,
+  pageSizeOptions,
   onQueryChange,
   caption,
   toolbar,
@@ -7021,6 +7038,12 @@ function DataTable({
   const [curPage, setCurPage] = React30.useState(page);
   const [curPageSize, setCurPageSize] = React30.useState(pageSize);
   const debouncedFilters = useDebounced(filters, 350);
+  React30.useEffect(() => {
+    setCurPage(page);
+  }, [page]);
+  React30.useEffect(() => {
+    setCurPageSize(pageSize);
+  }, [pageSize]);
   React30.useEffect(() => {
     if (!onQueryChange) return;
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
@@ -7182,6 +7205,12 @@ function DataTable({
     },
     col.key
   )) });
+  const isServerMode = Boolean(onQueryChange);
+  const displayedData = isServerMode ? data : React30.useMemo(() => {
+    const start = (curPage - 1) * curPageSize;
+    return data.slice(start, start + curPageSize);
+  }, [data, curPage, curPageSize]);
+  const totalItems = isServerMode ? total : data.length;
   return /* @__PURE__ */ jsxs33("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
       /* @__PURE__ */ jsx39("div", { className: "text-sm text-muted-foreground", children: caption }),
@@ -7253,7 +7282,7 @@ function DataTable({
               )
             ] }),
             /* @__PURE__ */ jsx39("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !data || data.length === 0 ? /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : data.map((row, idx) => /* @__PURE__ */ jsx39(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ jsx39(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
             const value = col.dataIndex ? row[col.dataIndex] : void 0;
             return /* @__PURE__ */ jsx39(
               TableCell,
@@ -7273,16 +7302,21 @@ function DataTable({
         ]
       }
     ) }),
-    total > 0 && /* @__PURE__ */ jsx39("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ jsx39(
+    totalItems > 0 && /* @__PURE__ */ jsx39("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ jsx39(
       Pagination,
       {
         page: curPage,
-        totalPages: Math.ceil(total / curPageSize),
+        totalPages: Math.ceil(totalItems / curPageSize),
         onChange: (p) => setCurPage(p),
         className: "",
         showInfo: true,
-        totalItems: total,
-        pageSize: curPageSize
+        totalItems,
+        pageSize: curPageSize,
+        pageSizeOptions,
+        onPageSizeChange: (s) => {
+          setCurPage(1);
+          setCurPageSize(s);
+        }
       }
     ) })
   ] });