@underverse-ui/underverse 0.2.5 → 0.2.8

package/dist/index.cjs

@@ -2262,7 +2262,7 @@ var sizeStyles3 = {
   md: "max-w-md",
   lg: "max-w-lg",
   xl: "max-w-xl",
-  full: "max-w-full mx-4"
+  full: "max-w-full"
 };
 var Modal = ({
   isOpen,
@@ -2271,11 +2271,16 @@ var Modal = ({
   title,
   description,
   className,
+  contentClassName,
   overlayClassName,
   showCloseButton = true,
   closeOnOverlayClick = true,
   closeOnEsc = true,
-  size = "md"
+  size = "md",
+  noPadding = false,
+  fullWidth = false,
+  width,
+  height
 }) => {
   const [isMounted, setIsMounted] = React9.useState(false);
   const [isVisible, setIsVisible] = React9.useState(false);
@@ -2343,14 +2348,17 @@ var Modal = ({
         className: cn(
           "relative w-full rounded-lg  bg-card text-card-foreground shadow-xl",
           "transition-all duration-200 ease-out",
-          sizeStyles3[size],
+          fullWidth ? "max-w-full" : sizeStyles3[size],
+          fullWidth && "mx-0",
           className
         ),
         style: {
           opacity: isOpen && !isAnimating ? 1 : 0,
           transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
           // Thêm dòng này để tạo hiệu ứng nảy
-          transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)"
+          transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
+          width,
+          height
         },
         onClick: (e) => e.stopPropagation(),
         children: [
@@ -2372,7 +2380,7 @@ var Modal = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-6", children })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
         ]
       }
     )
@@ -4027,7 +4035,9 @@ var Combobox = ({
   usePortal = true,
   label,
   required,
-  fontBold = false
+  fontBold = false,
+  loading: loading2 = false,
+  loadingText = "Loading..."
 }) => {
   const [open, setOpen] = React18.useState(false);
   const [query, setQuery] = React18.useState("");
@@ -4045,6 +4055,7 @@ var Combobox = ({
   );
   const [dropdownPosition, setDropdownPosition] = React18.useState(null);
   const triggerRef = React18.useRef(null);
+  const dropdownRef = React18.useRef(null);
   const calculatePosition = React18.useCallback(() => {
     if (!triggerRef.current) return null;
     const rect = triggerRef.current.getBoundingClientRect();
@@ -4073,11 +4084,10 @@ var Combobox = ({
     if (!open) return;
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector("[data-combobox-dropdown]");
-        if (dropdown && !dropdown.contains(target)) {
-          setOpen(false);
-        }
+      const triggerEl = triggerRef.current;
+      const dropdownEl = dropdownRef.current;
+      if (triggerEl && !triggerEl.contains(target) && dropdownEl && !dropdownEl.contains(target)) {
+        setOpen(false);
       }
     };
     const handleEscape = (event) => {
@@ -4121,6 +4131,7 @@ var Combobox = ({
     "div",
     {
       "data-combobox-dropdown": true,
+      ref: dropdownRef,
       style: {
         position: "absolute",
         top: dropdownPosition?.top || 0,
@@ -4178,7 +4189,10 @@ var Combobox = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "p-1 space-y-1", children: filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading..." })
+        ] }) }) : filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
           const itemValue = getOptionValue(item);
           const itemLabel = getOptionLabel(item);
           const isSelected = itemValue === value;
@@ -4212,9 +4226,18 @@ var Combobox = ({
             },
             `${itemValue}-${index}`
           );
-        }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Search, { className: "h-6 w-6 opacity-50" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: emptyText })
+        }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm", children: emptyText }),
+          query && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setQuery(""),
+              className: "text-xs text-primary hover:underline",
+              children: "Clear search"
+            }
+          )
         ] }) }) }) })
       ] })
     }
@@ -4290,7 +4313,15 @@ var Combobox = ({
                 children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180") })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_lucide_react12.ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 text-muted-foreground transition-all duration-200",
+                  open && "rotate-180 scale-110 text-primary"
+                )
+              }
+            )
           ] })
         ]
       }
@@ -6217,7 +6248,10 @@ var MultiCombobox = ({
   label,
   title,
   required,
-  displayFormat = (option) => option.label
+  displayFormat = (option) => option.label,
+  loading: loading2 = false,
+  loadingText = "Loading...",
+  emptyText = "No results found"
 }) => {
   const [query, setQuery] = React24.useState("");
   const [open, setOpen] = React24.useState(false);
@@ -6226,6 +6260,7 @@ var MultiCombobox = ({
   const listRef = React24.useRef([]);
   const [dropdownPosition, setDropdownPosition] = React24.useState(null);
   const triggerRef = React24.useRef(null);
+  const dropdownRef = React24.useRef(null);
   useShadCNAnimations();
   const calculatePosition = React24.useCallback(() => {
     if (!triggerRef.current) return null;
@@ -6255,11 +6290,10 @@ var MultiCombobox = ({
     if (!open) return;
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector('[data-dropdown="multicombobox"]');
-        if (dropdown && !dropdown.contains(target)) {
-          setOpen(false);
-        }
+      const triggerEl = triggerRef.current;
+      const dropdownEl = dropdownRef.current;
+      if (triggerEl && !triggerEl.contains(target) && dropdownEl && !dropdownEl.contains(target)) {
+        setOpen(false);
       }
     };
     const handleEscape = (event) => {
@@ -6428,7 +6462,12 @@ var MultiCombobox = ({
             value.length,
             " selected"
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            import_lucide_react17.ChevronDown,
+            {
+              className: cn("opacity-50 transition-all duration-200", sizeStyles8[size].icon, open && "rotate-180 scale-110 text-primary opacity-100")
+            }
+          )
         ]
       }
     ),
@@ -6436,6 +6475,7 @@ var MultiCombobox = ({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
+          ref: dropdownRef,
           "data-dropdown": "multicombobox",
           style: {
             position: "absolute",
@@ -6453,10 +6493,7 @@ var MultiCombobox = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "div",
             {
-              className: cn(
-                "rounded-md border bg-popover text-popover-foreground shadow-md",
-                "backdrop-blur-sm bg-popover/95 border-border/60"
-              ),
+              className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"),
               children: [
                 showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "button",
@@ -6488,7 +6525,10 @@ var MultiCombobox = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-muted-foreground", children: loadingText })
+                ] }) }) : filtered.length ? filtered.map((item, index) => {
                   const isSelected = value.includes(item.value);
                   const isDisabled = disabledOptions.includes(item.value);
                   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -6520,7 +6560,20 @@ var MultiCombobox = ({
                     },
                     item.value
                   );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
+                }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "li",
+                  {
+                    className: cn(
+                      "px-3 py-8 text-center text-muted-foreground",
+                      size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: emptyText }),
+                      query && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+                    ] })
+                  }
+                ) })
               ]
             }
           )
@@ -10190,11 +10243,44 @@ function DataTable({
     col.key
   )) });
   const isServerMode = Boolean(onQueryChange);
+  const processedData = import_react23.default.useMemo(() => {
+    if (isServerMode) return data;
+    let result = [...data];
+    if (Object.keys(filters).length > 0) {
+      result = result.filter((row) => {
+        return Object.entries(filters).every(([key, value]) => {
+          if (value === void 0 || value === null || value === "") return true;
+          const col = columns.find((c) => c.key === key);
+          const rowValue = col?.dataIndex ? row[col.dataIndex] : row[key];
+          if (col?.filter?.type === "date" && value instanceof Date) {
+            return new Date(rowValue).toDateString() === value.toDateString();
+          }
+          return String(rowValue ?? "").toLowerCase().includes(String(value).toLowerCase());
+        });
+      });
+    }
+    if (sort) {
+      result.sort((a, b) => {
+        const col = columns.find((c) => c.key === sort.key);
+        const aValue = col?.dataIndex ? a[col.dataIndex] : a[sort.key];
+        const bValue = col?.dataIndex ? b[col.dataIndex] : b[sort.key];
+        if (aValue === bValue) return 0;
+        if (typeof aValue === "number" && typeof bValue === "number") {
+          return sort.order === "asc" ? aValue - bValue : bValue - aValue;
+        }
+        const compare = String(aValue).localeCompare(String(bValue));
+        return sort.order === "asc" ? compare : -compare;
+      });
+    }
+    return result;
+  }, [data, isServerMode, filters, sort, columns]);
+  const totalItems = isServerMode ? total : processedData.length;
   const displayedData = isServerMode ? data : import_react23.default.useMemo(() => {
     const start = (curPage - 1) * curPageSize;
-    return data.slice(start, start + curPageSize);
-  }, [data, curPage, curPageSize]);
-  const totalItems = isServerMode ? total : data.length;
+    if (start >= processedData.length && curPage > 1) {
+    }
+    return processedData.slice(start, start + curPageSize);
+  }, [processedData, curPage, curPageSize]);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
@@ -10266,24 +10352,27 @@ function DataTable({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
-            const value = col.dataIndex ? row[col.dataIndex] : void 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              TableCell,
-              {
-                className: cn(
-                  cellPadding,
-                  col.align === "right" && "text-right",
-                  col.align === "center" && "text-center",
-                  columnDividers && colIdx > 0 && "border-l border-border/60",
-                  idx === data.length - 1 && col === visibleColumns[0] && "rounded-bl-md",
-                  idx === data.length - 1 && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
-                ),
-                children: col.render ? col.render(value, row, idx) : String(value ?? "")
-              },
-              col.key
-            );
-          }) }, getRowKey(row, idx))) })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
+            const isLastRow = idx === displayedData.length - 1;
+            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
+              const value = col.dataIndex ? row[col.dataIndex] : void 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                TableCell,
+                {
+                  className: cn(
+                    cellPadding,
+                    col.align === "right" && "text-right",
+                    col.align === "center" && "text-center",
+                    columnDividers && colIdx > 0 && "border-l border-border/60",
+                    isLastRow && col === visibleColumns[0] && "rounded-bl-md",
+                    isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
+                  ),
+                  children: col.render ? col.render(value, row, idx) : String(value ?? "")
+                },
+                col.key
+              );
+            }) }, getRowKey(row, idx));
+          }) })
         ]
       }
     ) }),