nvis-fe-cms-libs 2.0.8 → 2.1.0

package/README.md

@@ -238,3 +238,5 @@ const SectionRenderer = ({ section }) => {
 
 Thư viện **nvis-fe-cms-libs** giúp tách rời các section thành module độc lập, dễ tái sử dụng và bảo trì.  
 Bạn có thể mở rộng bằng cách thêm component mới và publish phiên bản tiếp theo lên npm.
+
+# Web lấy icon svg https://www.svgrepo.com 

package/dist/nvis-fe-cms-libs.es.js

@@ -938,7 +938,7 @@ const PartnersSection = ({ data, t, imageBaseUrl = "", section }) => {
             "button",
             {
               onClick: () => setCurrentPartnerSlide(index2),
-              className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-brand-primary scale-125 shadow-lg" : "bg-muted hover:bg-brand-primary/70"}`,
+              className: `w-3 h-3 rounded-full transition-all duration-300 ${index2 === currentPartnerSlide ? "bg-brand-primary scale-125 shadow-lg" : "bg-surface hover:bg-brand-primary/70"}`,
               "aria-label": `Slide ${index2 + 1}`
             },
             index2
@@ -1341,17 +1341,17 @@ const PartnerListSection = ({ t, getPartnerList, imageBaseUrl = "", section }) =
                 border: "none",
                 cursor: "pointer",
                 transition: "all 0.3s ease",
-                backgroundColor: index2 === currentPartnerSlide ? "var(--brand-primary)" : "rgba(255, 255, 255, 0.3)",
+                backgroundColor: index2 === currentPartnerSlide ? "var(--brand-primary)" : "rgba(151, 151, 151, 0.8)",
                 transform: index2 === currentPartnerSlide ? "scale(1.3)" : "scale(1)"
               },
               onMouseEnter: (e) => {
                 if (index2 !== currentPartnerSlide) {
-                  e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+                  e.currentTarget.style.backgroundColor = "rgba(151, 151, 151, 0.8)";
                 }
               },
               onMouseLeave: (e) => {
                 if (index2 !== currentPartnerSlide) {
-                  e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+                  e.currentTarget.style.backgroundColor = "rgba(151, 151, 151, 0.8)";
                 }
               },
               "aria-label": `Slide ${index2 + 1}`
@@ -2900,7 +2900,7 @@ const __iconNode = [
   ]
 ];
 const Zap = createLucideIcon("zap", __iconNode);
-const DiagramSection = ({ data, t, isDarkMode }) => {
+const DiagramSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   var _a, _b;
   const [mounted, setMounted] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -2918,12 +2918,55 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
   const diagramData = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.data;
+  const getImageUrl = (images) => {
+    console.log("getImageUrl called with:", images);
+    console.log("Type of images:", typeof images);
+    if (!images) {
+      console.log("No images found");
+      return null;
+    }
+    let imageUrl;
+    if (typeof images === "string") {
+      imageUrl = images;
+    } else if (Array.isArray(images) && images.length > 0) {
+      imageUrl = images[0];
+    } else {
+      console.log("Invalid images format");
+      return null;
+    }
+    console.log("Image URL:", imageUrl);
+    if (!imageUrl || imageUrl.trim() === "") {
+      console.log("Image URL is empty");
+      return null;
+    }
+    if (imageUrl.startsWith("http")) {
+      console.log("Full URL (already has http):", imageUrl);
+      return imageUrl;
+    }
+    const fullUrl = `${imageBaseUrl}${imageUrl}`;
+    console.log("Full URL:", fullUrl);
+    return fullUrl;
+  };
   if (!diagramData) {
     return null;
   }
   const diagramName = diagramData.name || safeT("diagram.defaults.name");
   const diagramDescription = diagramData.description || safeT("diagram.defaults.description");
   const modules = diagramData.diagramChildrenDTOs || [];
+  useEffect(() => {
+    console.log("=== DIAGRAM MODULES DEBUG ===");
+    console.log("Total modules:", modules.length);
+    console.log("imageBaseUrl:", imageBaseUrl);
+    modules.forEach((module, index2) => {
+      console.log(`Module ${index2 + 1}:`, {
+        name: module.name,
+        images: module.images,
+        imagesType: typeof module.images,
+        isArray: Array.isArray(module.images),
+        hasImages: Boolean(module.images)
+      });
+    });
+  }, [modules, imageBaseUrl]);
   const getIconComponent = (iconName) => {
     const icons = {
       Calculator,
@@ -2953,10 +2996,10 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
       };
     }
     return {
-      gradient: "linear-gradient(to right, var(--gradient-accent-soft-start), var(--gradient-accent-soft-end))",
-      border: "var(--gradient-accent-soft-start)",
-      line: "var(--gradient-accent-soft-start)",
-      iconBg: "var(--gradient-accent-soft-start)",
+      gradient: "linear-gradient(to right, var(--gradient-brand-strong-start), var(--gradient-brand-strong-end))",
+      border: "var(--gradient-brand-strong-start)",
+      line: "var(--gradient-brand-strong-start)",
+      iconBg: "var(--gradient-brand-strong-start)",
       shadow: "rgba(139, 92, 246, 0.2)"
     };
   };
@@ -3012,15 +3055,30 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
               animation: `slideUp 0.5s ease-out ${index2 * 0.1}s both`
             },
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "div",
                 {
-                  className: "flex-shrink-0 p-3 rounded-xl border",
+                  className: "flex-shrink-0 p-3 rounded-xl border bg-surface",
                   style: {
                     backgroundColor: `${colors.iconBg}33`,
                     borderColor: colors.border
                   },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2 })
+                  children: [
+                    module.images ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "img",
+                      {
+                        src: getImageUrl(module.images),
+                        alt: module.name,
+                        className: "w-6 h-6 object-contain",
+                        onError: (e) => {
+                          console.error("Image load error:", e.target.src);
+                          e.target.style.display = "none";
+                          e.target.nextElementSibling.style.display = "block";
+                        }
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2, style: { display: module.images ? "none" : "block" } })
+                  ]
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
@@ -3276,7 +3334,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
         ] }, `line-${module.id}`);
       }) }),
       modules.map((module, index2) => {
-        const Icon2 = getIconComponent(module.icon);
+        getIconComponent(module.icon);
         const colors = getColorStyles(index2);
         const angle = angles[index2] * Math.PI / 180;
         const radius = 360;
@@ -3284,6 +3342,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
         const y = Math.sin(angle) * radius;
         const normalizedAngle = (angles[index2] % 360 + 360) % 360;
         const isRightSide = normalizedAngle > 270 || normalizedAngle < 90;
+        const isTopHalf = y < 0;
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           "a",
           {
@@ -3318,36 +3377,40 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
                       style: { borderColor: colors.border }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: "flex-shrink-0 p-2.5 rounded-lg border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10",
-                      style: {
-                        backgroundColor: `${colors.iconBg}33`,
-                        borderColor: colors.border
-                      },
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-inverse", strokeWidth: 2 })
-                    }
-                  ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-inverse text-small tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module.name }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     "div",
                     {
-                      className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs ${isDarkMode ? "bg-surface" : "bg-body"}`,
+                      className: `absolute ${isTopHalf ? "top-full mt-4" : "bottom-full mb-4"} left-1/2 -translate-x-1/2 px-6 py-4 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-50 border-2 ${isDarkMode ? "bg-surface" : "bg-body"}`,
                       style: {
                         borderColor: "var(--border-color)",
-                        maxHeight: "120px",
-                        overflowY: "auto"
+                        maxHeight: "400px",
+                        minWidth: "320px",
+                        maxWidth: "420px",
+                        overflowY: "auto",
+                        whiteSpace: "normal"
                       },
                       children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-main", children: module.name }),
-                        module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-caption text-muted mt-1", children: module.description }),
+                        module.images && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: getImageUrl(module.images),
+                            alt: module.name,
+                            className: "w-full h-48 object-cover rounded-lg",
+                            onError: (e) => {
+                              console.error("Tooltip image load error:", e.target.src);
+                              e.target.style.display = "none";
+                            }
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-base text-main font-bold mb-2", children: module.name }),
+                        module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-muted leading-relaxed", children: module.description }),
                         /* @__PURE__ */ jsxRuntimeExports.jsx(
                           "div",
                           {
-                            className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent",
+                            className: `absolute ${isTopHalf ? "bottom-full" : "top-full"} left-1/2 -translate-x-1/2 ${isTopHalf ? "-mb-px" : "-mt-px"} border-8 border-transparent`,
                             style: {
-                              borderTopColor: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
+                              [isTopHalf ? "borderBottomColor" : "borderTopColor"]: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
                             }
                           }
                         )