@underverse-ui/underverse 0.2.5 → 0.2.8

package/dist/index.d.cts

@@ -343,11 +343,16 @@ interface ModalProps {
     title?: string;
     description?: string;
     className?: string;
+    contentClassName?: string;
     overlayClassName?: string;
     showCloseButton?: boolean;
     closeOnOverlayClick?: boolean;
     closeOnEsc?: boolean;
     size?: "sm" | "md" | "lg" | "xl" | "full";
+    noPadding?: boolean;
+    fullWidth?: boolean;
+    width?: string | number;
+    height?: string | number;
 }
 declare const Modal: React$1.FC<ModalProps>;
 
@@ -828,6 +833,8 @@ interface ComboboxProps {
     label?: string;
     required?: boolean;
     fontBold?: boolean;
+    loading?: boolean;
+    loadingText?: string;
 }
 declare const Combobox: React$1.FC<ComboboxProps>;
 
@@ -847,11 +854,14 @@ interface MultiComboboxProps {
     showClear?: boolean;
     className?: string;
     disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     label?: string;
     title?: string;
     required?: boolean;
     displayFormat?: (option: MultiComboboxOption) => string;
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
 }
 declare const MultiCombobox: React$1.FC<MultiComboboxProps>;
 

package/dist/index.d.ts

@@ -343,11 +343,16 @@ interface ModalProps {
     title?: string;
     description?: string;
     className?: string;
+    contentClassName?: string;
     overlayClassName?: string;
     showCloseButton?: boolean;
     closeOnOverlayClick?: boolean;
     closeOnEsc?: boolean;
     size?: "sm" | "md" | "lg" | "xl" | "full";
+    noPadding?: boolean;
+    fullWidth?: boolean;
+    width?: string | number;
+    height?: string | number;
 }
 declare const Modal: React$1.FC<ModalProps>;
 
@@ -828,6 +833,8 @@ interface ComboboxProps {
     label?: string;
     required?: boolean;
     fontBold?: boolean;
+    loading?: boolean;
+    loadingText?: string;
 }
 declare const Combobox: React$1.FC<ComboboxProps>;
 
@@ -847,11 +854,14 @@ interface MultiComboboxProps {
     showClear?: boolean;
     className?: string;
     disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     label?: string;
     title?: string;
     required?: boolean;
     displayFormat?: (option: MultiComboboxOption) => string;
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
 }
 declare const MultiCombobox: React$1.FC<MultiComboboxProps>;
 

package/dist/index.js

@@ -2107,7 +2107,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,
@@ -2116,11 +2116,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);
@@ -2188,14 +2193,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: [
@@ -2217,7 +2225,7 @@ var Modal = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx13("div", { className: "p-6", children })
+          /* @__PURE__ */ jsx13("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
         ]
       }
     )
@@ -3846,7 +3854,7 @@ import { ChevronLeft, ChevronRight as ChevronRight2, MoreHorizontal as MoreHoriz
 import * as React18 from "react";
 import { useId as useId2 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { ChevronDown, Search as Search2, Check as Check3, X as X7 } from "lucide-react";
+import { ChevronDown, Search as Search2, SearchX, Check as Check3, X as X7, Loader2 as Loader22 } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var getOptionLabel = (option) => {
   return typeof option === "string" ? option : option.label;
@@ -3872,7 +3880,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("");
@@ -3890,6 +3900,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();
@@ -3918,11 +3929,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) => {
@@ -3966,6 +3976,7 @@ var Combobox = ({
     "div",
     {
       "data-combobox-dropdown": true,
+      ref: dropdownRef,
       style: {
         position: "absolute",
         top: dropdownPosition?.top || 0,
@@ -4023,7 +4034,10 @@ var Combobox = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx24("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx24("ul", { className: "p-1 space-y-1", children: filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
+        /* @__PURE__ */ jsx24("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx24("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ jsx24("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsx24(Loader22, { className: "h-6 w-6 animate-spin text-primary" }),
+          /* @__PURE__ */ jsx24("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;
@@ -4057,9 +4071,18 @@ var Combobox = ({
             },
             `${itemValue}-${index}`
           );
-        }) : /* @__PURE__ */ jsx24("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx24(Search2, { className: "h-6 w-6 opacity-50" }),
-          /* @__PURE__ */ jsx24("span", { children: emptyText })
+        }) : /* @__PURE__ */ jsx24("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsx24(SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+          /* @__PURE__ */ jsx24("span", { className: "text-sm", children: emptyText }),
+          query && /* @__PURE__ */ jsx24(
+            "button",
+            {
+              type: "button",
+              onClick: () => setQuery(""),
+              className: "text-xs text-primary hover:underline",
+              children: "Clear search"
+            }
+          )
         ] }) }) }) })
       ] })
     }
@@ -4135,7 +4158,15 @@ var Combobox = ({
                 children: /* @__PURE__ */ jsx24(X7, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ jsx24(ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180") })
+            /* @__PURE__ */ jsx24(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 text-muted-foreground transition-all duration-200",
+                  open && "rotate-180 scale-110 text-primary"
+                )
+              }
+            )
           ] })
         ]
       }
@@ -6044,7 +6075,7 @@ function Calendar2({
 import * as React24 from "react";
 import { useId as useId4 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
-import { ChevronDown as ChevronDown2, Search as Search3, Check as Check5 } from "lucide-react";
+import { ChevronDown as ChevronDown2, Search as Search3, Check as Check5, SearchX as SearchX2, Loader2 as Loader23 } from "lucide-react";
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var MultiCombobox = ({
   id,
@@ -6062,7 +6093,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);
@@ -6071,6 +6105,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;
@@ -6100,11 +6135,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) => {
@@ -6273,7 +6307,12 @@ var MultiCombobox = ({
             value.length,
             " selected"
           ] }) : /* @__PURE__ */ jsx31("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-          /* @__PURE__ */ jsx31(ChevronDown2, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
+          /* @__PURE__ */ jsx31(
+            ChevronDown2,
+            {
+              className: cn("opacity-50 transition-all duration-200", sizeStyles8[size].icon, open && "rotate-180 scale-110 text-primary opacity-100")
+            }
+          )
         ]
       }
     ),
@@ -6281,6 +6320,7 @@ var MultiCombobox = ({
       /* @__PURE__ */ jsx31(
         "div",
         {
+          ref: dropdownRef,
           "data-dropdown": "multicombobox",
           style: {
             position: "absolute",
@@ -6298,10 +6338,7 @@ var MultiCombobox = ({
           children: /* @__PURE__ */ jsxs26(
             "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__ */ jsx31("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ jsx31(
                   "button",
@@ -6333,7 +6370,10 @@ var MultiCombobox = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx31("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__ */ jsx31("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: loading2 ? /* @__PURE__ */ jsx31("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+                  /* @__PURE__ */ jsx31(Loader23, { className: "h-6 w-6 animate-spin text-primary" }),
+                  /* @__PURE__ */ jsx31("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__ */ jsxs26(
@@ -6365,7 +6405,20 @@ var MultiCombobox = ({
                     },
                     item.value
                   );
-                }) : /* @__PURE__ */ jsx31("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
+                }) : /* @__PURE__ */ jsx31(
+                  "li",
+                  {
+                    className: cn(
+                      "px-3 py-8 text-center text-muted-foreground",
+                      size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"
+                    ),
+                    children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+                      /* @__PURE__ */ jsx31(SearchX2, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+                      /* @__PURE__ */ jsx31("span", { children: emptyText }),
+                      query && /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+                    ] })
+                  }
+                ) })
               ]
             }
           )
@@ -7393,7 +7446,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
 
 // ../../components/ui/ImageUpload.tsx
 import { useState as useState25, useRef as useRef10, useCallback as useCallback9 } from "react";
-import { Upload, X as X9, Image as ImageIcon, Loader2 as Loader22, Check as Check7 } from "lucide-react";
+import { Upload, X as X9, Image as ImageIcon, Loader2 as Loader24, Check as Check7 } from "lucide-react";
 import { useTranslations as useTranslations6 } from "next-intl";
 import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function ImageUpload({
@@ -7532,7 +7585,7 @@ function ImageUpload({
         onDrop: handleDrop,
         children: [
           uploading && /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx36(Loader22, { className: "w-6 h-6 animate-spin text-primary" }),
+            /* @__PURE__ */ jsx36(Loader24, { className: "w-6 h-6 animate-spin text-primary" }),
             /* @__PURE__ */ jsx36("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
           /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
@@ -10035,11 +10088,44 @@ function DataTable({
     col.key
   )) });
   const isServerMode = Boolean(onQueryChange);
+  const processedData = React37.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 : React37.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__ */ jsxs41("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
       /* @__PURE__ */ jsx47("div", { className: "text-sm text-muted-foreground", children: caption }),
@@ -10111,24 +10197,27 @@ function DataTable({
               )
             ] }),
             /* @__PURE__ */ jsx47("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ jsx47(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__ */ jsx47(
-              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__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(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__ */ jsx47(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__ */ jsx47(
+                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));
+          }) })
         ]
       }
     ) }),