@abpjs/theme-shared 1.0.0 → 2.0.0

package/dist/index.js

@@ -111,25 +111,114 @@ var DEFAULT_STYLES = `
   top: 18px;
 }
 
-.modal {
-  background-color: rgba(0, 0, 0, .6);
+.navbar .dropdown-menu {
+  min-width: 215px;
 }
 
-.abp-ellipsis {
+.ui-table-scrollable-body::-webkit-scrollbar {
+  height: 5px !important;
+  width: 5px !important;
+}
+
+.ui-table-scrollable-body::-webkit-scrollbar-track {
+  background: #ddd;
+}
+
+.ui-table-scrollable-body::-webkit-scrollbar-thumb {
+  background: #8a8686;
+}
+
+.abp-ellipsis-inline {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.abp-ellipsis {
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-widget-overlay {
+  z-index: 1000;
+}
+
+.color-white {
+  color: #FFF !important;
+}
+
+.custom-checkbox > label {
+  cursor: pointer;
+}
+
 /* <animations */
 
 .fade-in-top {
-  animation: fadeInTop 0.4s ease-in-out;
+  animation: fadeInTop 0.2s ease-in-out;
 }
 
 .fade-out-top {
-  animation: fadeOutTop 0.4s ease-in-out;
+  animation: fadeOutTop 0.2s ease-in-out;
+}
+
+.abp-collapsed-height {
+  -moz-transition: max-height linear 0.35s;
+  -ms-transition: max-height linear 0.35s;
+  -o-transition: max-height linear 0.35s;
+  -webkit-transition: max-height linear 0.35s;
+  overflow:hidden;
+  transition:max-height 0.35s linear;
+  height:auto;
+  max-height: 0;
+}
+
+.abp-mh-25 {
+  max-height: 25vh;
+}
+
+.abp-mh-50 {
+  transition:max-height 0.65s linear;
+  max-height: 50vh;
+}
+
+.abp-mh-75 {
+  transition:max-height 0.85s linear;
+  max-height: 75vh;
+}
+
+.abp-mh-100 {
+  transition:max-height 1s linear;
+  max-height: 100vh;
+}
+
+/* Sorting icon styles - @since 2.0.0 */
+[class^="sorting"] {
+  opacity: .3;
+  cursor: pointer;
+}
+[class^="sorting"]:before {
+  right: 0.5rem;
+  content: "\u2191";
+}
+[class^="sorting"]:after {
+  right: 0.5rem;
+  content: "\u2193";
+}
+
+.sorting_desc {
+  opacity: 1;
+}
+.sorting_desc:before {
+  opacity: .3;
+}
+
+.sorting_asc {
+  opacity: 1;
+}
+.sorting_asc:after {
+  opacity: .3;
 }
 
 @keyframes fadeInTop {
@@ -139,7 +228,7 @@ var DEFAULT_STYLES = `
   }
 
   to {
-    transform: translateY(5px);
+    transform: translateY(0px);
     opacity: 1;
   }
 }
@@ -179,30 +268,33 @@ var ToasterContext = (0, import_react.createContext)(null);
 var toastCounter = 0;
 function generateId() {
   toastCounter += 1;
-  return `toast-${Date.now()}-${toastCounter}-${Math.random().toString(36).substring(2, 9)}`;
+  return toastCounter;
 }
 var DEFAULT_LIFE = 5e3;
 function ToasterProvider({ children }) {
   const [toasts, setToasts] = (0, import_react.useState)([]);
-  const resolversRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const subscribersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react.useEffect)(() => {
+    subscribersRef.current.forEach((subscriber) => {
+      subscriber(toasts);
+    });
+  }, [toasts]);
   const remove = (0, import_react.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
-    const resolver = resolversRef.current.get(id);
-    if (resolver) {
-      resolver(Toaster.Status.dismiss);
-      resolversRef.current.delete(id);
-    }
   }, []);
   const show = (0, import_react.useCallback)(
-    (message, title, severity, options) => {
-      const id = options?.id?.toString() || generateId();
+    (message, title, severity = "info", options) => {
+      const id = typeof options?.id === "number" ? options.id : generateId();
       const life = options?.sticky ? void 0 : options?.life ?? DEFAULT_LIFE;
       const toast = {
         id,
         message,
         title,
         severity,
-        ...options
+        options: {
+          ...options,
+          id
+        }
       };
       setToasts((prev) => [...prev, toast]);
       if (life) {
@@ -210,9 +302,7 @@ function ToasterProvider({ children }) {
           remove(id);
         }, life);
       }
-      return new Promise((resolve) => {
-        resolversRef.current.set(id, resolve);
-      });
+      return id;
     },
     [remove]
   );
@@ -225,44 +315,40 @@ function ToasterProvider({ children }) {
     [show]
   );
   const warn = (0, import_react.useCallback)(
-    (message, title, options) => show(message, title, "warn", options),
+    (message, title, options) => show(message, title, "warning", options),
     [show]
   );
   const error = (0, import_react.useCallback)(
     (message, title, options) => show(message, title, "error", options),
     [show]
   );
-  const addAll = (0, import_react.useCallback)(
-    (messages) => {
-      messages.forEach((msg) => {
-        show(msg.message, msg.title, msg.severity, msg);
-      });
-    },
-    [show]
-  );
-  const clear = (0, import_react.useCallback)((status) => {
+  const clear = (0, import_react.useCallback)((key) => {
     setToasts((prev) => {
-      prev.forEach((toast) => {
-        const resolver = resolversRef.current.get(toast.id);
-        if (resolver) {
-          resolver(status ?? Toaster.Status.dismiss);
-          resolversRef.current.delete(toast.id);
-        }
-      });
+      if (key) {
+        return prev.filter((toast) => toast.options?.containerKey !== key);
+      }
       return [];
     });
   }, []);
+  const subscribe = (0, import_react.useCallback)((subscriber) => {
+    subscribersRef.current.add(subscriber);
+    subscriber(toasts);
+    return () => {
+      subscribersRef.current.delete(subscriber);
+    };
+  }, [toasts]);
   const service = (0, import_react.useMemo)(
     () => ({
       info,
       success,
       warn,
       error,
-      addAll,
+      show,
+      remove,
       clear,
-      remove
+      subscribe
     }),
-    [info, success, warn, error, addAll, clear, remove]
+    [info, success, warn, error, show, remove, clear, subscribe]
   );
   const value = (0, import_react.useMemo)(
     () => ({ service, toasts }),
@@ -302,6 +388,13 @@ function generateId2() {
 function ConfirmationProvider({ children }) {
   const [confirmation, setConfirmation] = (0, import_react2.useState)(null);
   const resolverRef = (0, import_react2.useRef)(null);
+  const subscribersRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const escapeListenerRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    subscribersRef.current.forEach((subscriber) => {
+      subscriber(confirmation);
+    });
+  }, [confirmation]);
   const respond = (0, import_react2.useCallback)((status) => {
     if (resolverRef.current) {
       resolverRef.current(status);
@@ -309,20 +402,34 @@ function ConfirmationProvider({ children }) {
     }
     setConfirmation(null);
   }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!escapeListenerRef.current) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && confirmation && confirmation.options?.closable !== false) {
+        respond(Toaster.Status.dismiss);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [confirmation, respond]);
   const show = (0, import_react2.useCallback)(
-    (message, title, severity, options = {}) => {
+    (message, title, severity = "neutral", options = {}) => {
       if (resolverRef.current) {
         resolverRef.current(Toaster.Status.dismiss);
       }
       const id = options.id?.toString() || generateId2();
-      const confirmationMessage = {
-        id,
+      const dialogData = {
         message,
         title,
         severity,
-        options
+        options: {
+          ...options,
+          id
+        }
       };
-      setConfirmation(confirmationMessage);
+      setConfirmation(dialogData);
       return new Promise((resolve) => {
         resolverRef.current = resolve;
       });
@@ -338,7 +445,7 @@ function ConfirmationProvider({ children }) {
     [show]
   );
   const warn = (0, import_react2.useCallback)(
-    (message, title, options) => show(message, title, "warn", options),
+    (message, title, options) => show(message, title, "warning", options),
     [show]
   );
   const error = (0, import_react2.useCallback)(
@@ -351,15 +458,28 @@ function ConfirmationProvider({ children }) {
     },
     [respond]
   );
+  const listenToEscape = (0, import_react2.useCallback)(() => {
+    escapeListenerRef.current = true;
+  }, []);
+  const subscribe = (0, import_react2.useCallback)((subscriber) => {
+    subscribersRef.current.add(subscriber);
+    subscriber(confirmation);
+    return () => {
+      subscribersRef.current.delete(subscriber);
+    };
+  }, [confirmation]);
   const service = (0, import_react2.useMemo)(
     () => ({
       info,
       success,
       warn,
       error,
-      clear
+      show,
+      clear,
+      listenToEscape,
+      subscribe
     }),
-    [info, success, warn, error, clear]
+    [info, success, warn, error, show, clear, listenToEscape, subscribe]
   );
   const value = (0, import_react2.useMemo)(
     () => ({ service, confirmation, respond }),
@@ -477,6 +597,11 @@ var import_react5 = require("@chakra-ui/react");
 var import_core = require("@abpjs/core");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function resolveLocalizationParam(param) {
+  if (param === void 0) return void 0;
+  if (typeof param === "string") return param;
+  return param.defaultValue || param.key;
+}
 function SeverityIcon({ severity }) {
   const iconProps = { size: 20 };
   switch (severity) {
@@ -484,10 +609,13 @@ function SeverityIcon({ severity }) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
-    case "warn":
+    case "warning":
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+    case "neutral":
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette(severity) {
@@ -496,10 +624,13 @@ function getSeverityColorPalette(severity) {
       return "green";
     case "info":
       return "blue";
-    case "warn":
+    case "warning":
       return "yellow";
     case "error":
       return "red";
+    case "neutral":
+    default:
+      return "gray";
   }
 }
 function getSeverityBg(severity) {
@@ -508,10 +639,13 @@ function getSeverityBg(severity) {
       return "green.50";
     case "info":
       return "blue.50";
-    case "warn":
+    case "warning":
       return "yellow.50";
     case "error":
       return "red.50";
+    case "neutral":
+    default:
+      return "gray.50";
   }
 }
 function getSeverityBorderColor(severity) {
@@ -520,10 +654,13 @@ function getSeverityBorderColor(severity) {
       return "green.200";
     case "info":
       return "blue.200";
-    case "warn":
+    case "warning":
       return "yellow.200";
     case "error":
       return "red.200";
+    case "neutral":
+    default:
+      return "gray.200";
   }
 }
 function mapSeverityToType(severity) {
@@ -532,10 +669,13 @@ function mapSeverityToType(severity) {
       return "success";
     case "info":
       return "info";
-    case "warn":
+    case "warning":
       return "warning";
     case "error":
       return "error";
+    case "neutral":
+    default:
+      return "info";
   }
 }
 function getPlacement(position) {
@@ -567,31 +707,38 @@ function getToaster(placement) {
   }
   return toasterCache.get(placement);
 }
-function ToastContainer({ position = "bottom-right" }) {
+function ToastContainer({ position = "bottom-right", containerKey }) {
   const { toasts, service } = useToasterContext();
   const { t } = (0, import_core.useLocalization)();
   const displayedToastsRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
   const placement = (0, import_react4.useMemo)(() => getPlacement(position), [position]);
   const toaster = (0, import_react4.useMemo)(() => getToaster(placement), [placement]);
+  const filteredToasts = (0, import_react4.useMemo)(() => {
+    if (!containerKey) return toasts;
+    return toasts.filter((toast) => toast.options?.containerKey === containerKey);
+  }, [toasts, containerKey]);
   (0, import_react4.useEffect)(() => {
-    const newToasts = toasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
+    const newToasts = filteredToasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
     newToasts.forEach((toast) => {
       displayedToastsRef.current.add(toast.id);
+      const messageStr = resolveLocalizationParam(toast.message) || "";
       const localizedMessage = t(
-        toast.message,
-        ...toast.messageLocalizationParams || []
+        messageStr,
+        ...toast.options?.messageLocalizationParams || []
       );
-      const localizedTitle = toast.title ? t(toast.title, ...toast.titleLocalizationParams || []) : void 0;
+      const titleStr = resolveLocalizationParam(toast.title);
+      const localizedTitle = titleStr ? t(titleStr, ...toast.options?.titleLocalizationParams || []) : void 0;
+      const severity = toast.severity || "info";
       requestAnimationFrame(() => {
         toaster.create({
-          id: toast.id,
+          id: String(toast.id),
           title: localizedTitle,
           description: localizedMessage,
-          type: mapSeverityToType(toast.severity),
-          duration: toast.sticky ? void 0 : toast.life || 5e3,
+          type: mapSeverityToType(severity),
+          duration: toast.options?.sticky ? void 0 : toast.options?.life || 5e3,
           meta: {
-            closable: toast.closable !== false,
-            severity: toast.severity
+            closable: toast.options?.closable !== false,
+            severity
           },
           onStatusChange: (details) => {
             if (details.status === "unmounted") {
@@ -602,7 +749,7 @@ function ToastContainer({ position = "bottom-right" }) {
         });
       });
     });
-  }, [toasts, t, service, toaster]);
+  }, [filteredToasts, t, service, toaster]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
     const severity = toast.meta?.severity || "info";
     const closable = toast.meta?.closable !== false;
@@ -634,6 +781,16 @@ var import_react7 = require("@chakra-ui/react");
 var import_core2 = require("@abpjs/core");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function resolveLocalizationParam2(param) {
+  if (param === void 0) return void 0;
+  if (typeof param === "string") return param;
+  return param.defaultValue || param.key;
+}
+function getLocalizationKey(param) {
+  if (param === void 0) return void 0;
+  if (typeof param === "string") return param;
+  return param.key;
+}
 function SeverityIcon2({ severity }) {
   const iconProps = { size: 24 };
   switch (severity) {
@@ -641,10 +798,13 @@ function SeverityIcon2({ severity }) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
-    case "warn":
+    case "warning":
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+    case "neutral":
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette2(severity) {
@@ -653,10 +813,13 @@ function getSeverityColorPalette2(severity) {
       return "green";
     case "info":
       return "blue";
-    case "warn":
+    case "warning":
       return "yellow";
     case "error":
       return "red";
+    case "neutral":
+    default:
+      return "gray";
   }
 }
 function ConfirmationDialog({ className }) {
@@ -666,14 +829,18 @@ function ConfirmationDialog({ className }) {
   if (!confirmation) {
     return null;
   }
-  const { message, title, severity, options } = confirmation;
+  const { message, title, severity = "neutral", options } = confirmation;
+  const messageStr = resolveLocalizationParam2(message) || "";
   const localizedMessage = t(
-    message,
-    ...options.messageLocalizationParams || []
+    messageStr,
+    ...options?.messageLocalizationParams || []
   );
-  const localizedTitle = title ? t(title, ...options.titleLocalizationParams || []) : void 0;
-  const yesCopy = options.yesCopy ? t(options.yesCopy) : t("AbpUi::Yes");
-  const cancelCopy = options.cancelCopy ? t(options.cancelCopy) : t("AbpUi::Cancel");
+  const titleStr = resolveLocalizationParam2(title);
+  const localizedTitle = titleStr ? t(titleStr, ...options?.titleLocalizationParams || []) : void 0;
+  const yesKey = getLocalizationKey(options?.yesText);
+  const cancelKey = getLocalizationKey(options?.cancelText);
+  const yesCopy = yesKey ? t(yesKey) : t("AbpUi::Yes");
+  const cancelCopy = cancelKey ? t(cancelKey) : t("AbpUi::Cancel");
   const handleConfirm = () => {
     respond(Toaster.Status.confirm);
   };
@@ -684,7 +851,7 @@ function ConfirmationDialog({ className }) {
     respond(Toaster.Status.dismiss);
   };
   const handleOpenChange = (details) => {
-    if (!details.open) {
+    if (!details.open && options?.closable !== false) {
       handleDismiss();
     }
   };
@@ -705,7 +872,7 @@ function ConfirmationDialog({ className }) {
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Text, { color: "gray.600", children: localizedMessage }) }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Dialog.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react7.Flex, { gap: 3, children: [
-            !options.hideCancelBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            !options?.hideCancelBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               import_react7.Button,
               {
                 ref: cancelRef,
@@ -714,7 +881,7 @@ function ConfirmationDialog({ className }) {
                 children: cancelCopy
               }
             ),
-            !options.hideYesBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            !options?.hideYesBtn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               import_react7.Button,
               {
                 colorPalette: getSeverityColorPalette2(severity),
@@ -769,7 +936,9 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function LoaderBar({
   containerClass = "abp-loader-bar",
   progressClass = "abp-progress",
-  filter
+  filter,
+  intervalPeriod = 300,
+  stopDelay = 400
 }) {
   const { loading } = (0, import_core3.useLoader)();
   const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
@@ -806,7 +975,7 @@ function LoaderBar({
         }
         return prev + 10;
       });
-    }, 300);
+    }, intervalPeriod);
   };
   const stopLoading = () => {
     setProgressLevel(100);
@@ -817,7 +986,7 @@ function LoaderBar({
     setTimeout(() => {
       setIsLoading(false);
       setProgressLevel(0);
-    }, 400);
+    }, stopDelay);
   };
   if (!isLoading && progressLevel === 0) {
     return null;