@codbex/harmonia 1.10.2 → 1.11.1

package/dist/harmonia.esm.js

@@ -1948,6 +1948,7 @@ var CircleError = 25;
 var CircleSuccess = 26;
 var CircleUnknown = 27;
 var CircleUser = 28;
+var Home = 29;
 function setCalendarContent(svg) {
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   path.setAttributeNS(
@@ -2290,6 +2291,15 @@ function setCircleUserContent(svg) {
   );
   svg.appendChild(path2);
 }
+function setHomeContent(svg) {
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttributeNS(
+    null,
+    "d",
+    "m8 0.8252c-0.51124 0-1.0243 0.19615-1.416 0.58789l-4.4316 4.4297c-0.27162 0.2733-0.65234 0.7207-0.65234 1.6055v5.7266c0 1.108 0.892 2 2 2h9c1.108 0 2-0.892 2-2v-5.7266c0-0.88477-0.38073-1.3322-0.65234-1.6055l-4.4316-4.4297c-0.39174-0.39174-0.90478-0.58789-1.416-0.58789zm0 1.4258c0.25431-2.91e-4 0.5101 0.096117 0.70703 0.29297l4.2207 4.2188v0.00195c0.17404 0.1851 0.27111 0.42951 0.27148 0.68359v5.4277c0 0.554-0.446 1-1 1h-1.5078v-4.1289c0-1.108-0.892-2-2-2h-1.3828c-1.108 0-2 0.892-2 2v4.1289h-1.5078c-0.554 0-1-0.446-1-1v-5.4277c3.752e-4 -0.25408 0.09744-0.4985 0.27148-0.68359v-0.00195l4.2207-4.2188c0.19693-0.19685 0.45273-0.29326 0.70703-0.29297zm-0.58984 6.7949h1.1797c0.44244-4.323e-4 0.80121 0.35834 0.80078 0.80078v4.0293h-2.7812v-4.0293c-4.322e-4 -0.44244 0.35834-0.80121 0.80078-0.80078z"
+  );
+  svg.appendChild(path);
+}
 function createSvg({ icon, classes = "size-4", attrs } = {}) {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttributeNS(null, "width", "16");
@@ -2390,6 +2400,9 @@ function createSvg({ icon, classes = "size-4", attrs } = {}) {
     case CircleUser:
       setCircleUserContent(svg);
       break;
+    case Home:
+      setHomeContent(svg);
+      break;
     default:
       break;
   }
@@ -2489,6 +2502,9 @@ function setSvgContent(svg, icon) {
     case "circle-user":
       setCircleUserContent(svg);
       break;
+    case "home":
+      setHomeContent(svg);
+      break;
     default:
       break;
   }
@@ -2923,6 +2939,113 @@ function badge_default(Alpine) {
   });
 }
 
+// src/components/breadcrumb.js
+function breadcrumb_default(Alpine) {
+  Alpine.directive("h-breadcrumb", (el, _, { Alpine: Alpine2, cleanup }) => {
+    el.classList.add("flex", "items-center", "break-words", "text-sm", "text-muted-foreground", "rounded-control");
+    el.setAttribute("role", "navigation");
+    el.setAttribute("aria-label", "breadcrumb");
+    el.setAttribute("data-slot", "breadcrumb");
+    const variants = {
+      outline: ["border"]
+    };
+    const allVariantClasses = Object.values(variants).flat();
+    const sizes = {
+      default: ["h-9", "px-3"],
+      md: ["h-8", "px-2.5"],
+      sm: ["h-6.5", "px-2"]
+    };
+    const allSizeClasses = Object.values(sizes).flat();
+    function applyClasses() {
+      const variant = el.getAttribute("data-variant");
+      const size3 = el.getAttribute("data-size") ?? "default";
+      el.classList.remove(...allVariantClasses, ...allSizeClasses);
+      if (variant && Object.prototype.hasOwnProperty.call(variants, variant)) {
+        el.classList.add(...variants[variant]);
+        el.classList.add(...sizes[size3] ?? sizes.default);
+      } else {
+        el.classList.add("px-2");
+      }
+    }
+    applyClasses();
+    const observer = new MutationObserver(() => applyClasses());
+    observer.observe(el, { attributes: true, attributeFilter: ["data-variant", "data-size"] });
+    if (el.getAttribute("data-overflow") === "scroll") {
+      el.classList.add("overflow-x-scroll", "scrollbar-none");
+      let preserveScroll = false;
+      const scrollToEnd = () => {
+        el.scrollLeft = el.scrollWidth;
+      };
+      Alpine2.nextTick(scrollToEnd);
+      const handleScroll = () => {
+        preserveScroll = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+      };
+      const handleResize = () => {
+        if (!preserveScroll) scrollToEnd();
+      };
+      el.addEventListener("scroll", handleScroll);
+      window.addEventListener("resize", handleResize);
+      cleanup(() => {
+        el.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("resize", handleResize);
+        observer.disconnect();
+      });
+    } else if (el.getAttribute("data-overflow") === "nowrap") {
+      el.classList.add("flex-nowrap");
+      cleanup(() => observer.disconnect());
+    } else {
+      el.classList.add("flex-wrap");
+      cleanup(() => observer.disconnect());
+    }
+  });
+  Alpine.directive("h-breadcrumb-list", (el, _, { Alpine: Alpine2 }) => {
+    el.classList.add("flex", "items-center", "gap-1.5");
+    el.setAttribute("data-slot", "breadcrumb-list");
+    const nav = Alpine2.findClosest(el, (node) => node.getAttribute("data-slot") === "breadcrumb");
+    const overflow = nav?.getAttribute("data-overflow");
+    if (overflow === "scroll" || overflow === "nowrap") {
+      el.classList.add("flex-nowrap");
+    } else {
+      el.classList.add("flex-wrap");
+    }
+  });
+  Alpine.directive("h-breadcrumb-item", (el) => {
+    el.classList.add("group", "inline-flex", "items-center", "gap-1.5");
+    el.setAttribute("data-slot", "breadcrumb-item");
+    const separator = createSvg({
+      icon: ChevronRight,
+      classes: "size-3.5 group-first-of-type:hidden",
+      attrs: { "aria-hidden": "true", role: "presentation" }
+    });
+    el.prepend(separator);
+  });
+  Alpine.directive("h-breadcrumb-link", (el) => {
+    el.classList.add(
+      "cursor-pointer",
+      "hbox",
+      "gap-1.5",
+      "items-center",
+      "whitespace-nowrap",
+      "text-primary",
+      "transition-colors",
+      "underline-offset-4",
+      "hover:underline",
+      "hover:text-primary-hover",
+      "active:text-primary-active",
+      "[&>svg]:size-4",
+      "[&>svg]:text-current"
+    );
+    el.setAttribute("data-slot", "breadcrumb-link");
+  });
+  Alpine.directive("h-breadcrumb-page", (el) => {
+    el.classList.add("hbox", "gap-1.5", "items-center", "whitespace-nowrap", "text-foreground", "font-normal", "[&>svg]:size-4", "[&>svg]:text-current");
+    el.setAttribute("role", "link");
+    el.setAttribute("aria-current", "page");
+    el.setAttribute("aria-disabled", "true");
+    el.setAttribute("data-slot", "breadcrumb-page");
+  });
+}
+
 // src/components/button.js
 var buttonVariants = {
   default: [
@@ -6735,6 +6858,10 @@ function menu_default(Alpine) {
     }
     function close(closeParent = false, focusTrigger = false) {
       el.pauseKeyEvents = false;
+      if (autoUpdateCleanup) {
+        autoUpdateCleanup();
+        autoUpdateCleanup = null;
+      }
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
         el.classList.add("hidden", "scale-95", "opacity-0");
         Object.assign(el.style, {
@@ -6864,6 +6991,7 @@ function menu_default(Alpine) {
         }
       }
     }
+    let autoUpdateCleanup;
     function open(parent) {
       if (el.classList.contains("hidden")) {
         let getPlacement = function() {
@@ -6873,41 +7001,52 @@ function menu_default(Alpine) {
             return el.getAttribute("data-align") || "bottom-start";
           }
           return "right-start";
+        }, updatePosition = function() {
+          const isFirst = firstOpen;
+          firstOpen = false;
+          computePosition2(parent, el, {
+            placement: getPlacement(),
+            strategy: "fixed",
+            middleware: [
+              offset2(isSubmenu ? 0 : 4),
+              flip2(),
+              shift2({ padding: 4 }),
+              size2({
+                apply({ availableWidth, availableHeight, elements }) {
+                  Object.assign(elements.floating.style, {
+                    maxWidth: `${Math.max(0, availableWidth) - 4}px`,
+                    maxHeight: `${Math.max(0, availableHeight) - 4}px`
+                  });
+                }
+              })
+            ]
+          }).then(({ x, y }) => {
+            if (isFirst) {
+              if (!isSubmenu) {
+                Alpine2.nextTick(() => el.focus());
+                listenForTrigger(false);
+              }
+              Alpine2.nextTick(() => {
+                top.addEventListener("contextmenu", onClick);
+                top.addEventListener("click", onClick);
+                el.addEventListener("keydown", onKeyDown);
+              });
+            }
+            Object.assign(el.style, {
+              left: `${x}px`,
+              top: `${y}px`
+            });
+            el.classList.remove("scale-95", "opacity-0");
+          });
         };
         el.classList.remove("hidden");
         el.pauseKeyEvents = false;
-        computePosition2(parent, el, {
-          placement: getPlacement(),
-          strategy: "fixed",
-          middleware: [
-            offset2(isSubmenu ? 0 : 4),
-            flip2(),
-            shift2({ padding: 4 }),
-            size2({
-              apply({ availableWidth, availableHeight, elements }) {
-                Object.assign(elements.floating.style, {
-                  maxWidth: `${Math.max(0, availableWidth) - 4}px`,
-                  maxHeight: `${Math.max(0, availableHeight) - 4}px`
-                });
-              }
-            })
-          ]
-        }).then(({ x, y }) => {
-          if (!isSubmenu) {
-            Alpine2.nextTick(() => el.focus());
-            listenForTrigger(false);
-          }
-          Alpine2.nextTick(() => {
-            top.addEventListener("contextmenu", onClick);
-            top.addEventListener("click", onClick);
-            el.addEventListener("keydown", onKeyDown);
-          });
-          Object.assign(el.style, {
-            left: `${x}px`,
-            top: `${y}px`
-          });
-          el.classList.remove("scale-95", "opacity-0");
-        });
+        let firstOpen = true;
+        if (!isSubmenu && menuTrigger._menu_trigger.isDropdown) {
+          autoUpdateCleanup = autoUpdate(parent, el, updatePosition);
+        } else {
+          updatePosition();
+        }
       }
     }
     function openDropdown() {
@@ -6951,6 +7090,7 @@ function menu_default(Alpine) {
     }
     el.addEventListener("transitionend", onTransitionEnd);
     cleanup(() => {
+      if (autoUpdateCleanup) autoUpdateCleanup();
       if (menuTrigger) listenForTrigger(false);
       top.removeEventListener("click", onClick);
       top.removeEventListener("contextmenu", onClick);
@@ -6990,7 +7130,10 @@ function menu_default(Alpine) {
       "data-[inset=true]:pl-8",
       "[&_svg]:pointer-events-none",
       "[&_svg]:shrink-0",
-      "[&_svg:not([class*='size-'])]:size-4"
+      "[&_svg:not([class*='size-'])]:size-4",
+      "[&>a]:no-underline",
+      "[&>a]:text-inherit",
+      "[&>a]:size-full"
     );
     el.setAttribute("role", "menuitem");
     el.setAttribute("tabindex", "-1");
@@ -7404,8 +7547,8 @@ function notifications_default(Alpine) {
     el.setAttribute("aria-atomic", "false");
     el.setAttribute("data-slot", "notification-overlay");
     const commonListClasses = ["flex", "flex-col", "py-4", "p-10", "gap-4", "overflow-visible", "size-full"];
-    const commonTopClasses = ["[mask-image:linear-gradient(to_bottom,black_80%,transparent)]", "row-1"];
-    const commonBottomClasses = ["[mask-image:linear-gradient(to_top,black_80%,transparent)]", "row-2"];
+    const commonTopClasses = ["mask-[linear-gradient(to_bottom,black_85%,transparent)]", "row-1"];
+    const commonBottomClasses = ["mask-[linear-gradient(to_top,black_85%,transparent)]", "row-2"];
     const olTopLeft = document.createElement("ol");
     olTopLeft.classList.add(...commonListClasses, ...commonTopClasses, "max-lg:hidden", "items-start");
     olTopLeft.setAttribute("tabindex", "-1");
@@ -9199,8 +9342,13 @@ function split_default(Alpine) {
       if (!storageKey) return;
       if (saveTimer) clearTimeout(saveTimer);
       saveTimer = setTimeout(() => {
+        const usable = usableSize();
+        if (usable <= 0) {
+          saveTimer = null;
+          return;
+        }
         const visible = panels.filter((p) => !p.hidden);
-        const sizes = visible.map((p) => p.size / usableSize());
+        const sizes = visible.map((p) => p.size / usable);
         localStorage.setItem(storageKey, JSON.stringify(sizes));
         saveTimer = null;
       }, SAVE_DELAY);
@@ -9235,26 +9383,44 @@ function split_default(Alpine) {
       const total = usableSize();
       if (!initialized) {
         initialized = true;
-        const visible2 = panels.filter((p) => !p.hidden);
-        const stored = loadSizes();
-        if (stored && stored.length === visible2.length) {
-          visible2.forEach((p, i) => {
-            p.size = stored[i] * usableSize();
-            p.explicit = true;
-          });
-        } else {
-          const explicitTotal = visible2.filter((p) => p.explicit).reduce((sum, p) => sum + p.declaredSize, 0);
-          const autoPanels = visible2.filter((p) => !p.explicit);
-          const remaining = total - explicitTotal;
-          const share = autoPanels.length ? remaining / autoPanels.length : 0;
-          visible2.forEach((p) => {
-            if (p.explicit) {
-              p.size = p.declaredSize;
+        const anyRestore = visible.some((p) => p.restoreFraction != null);
+        if (anyRestore) {
+          const restoreFractionSum = visible.reduce((sum, p) => sum + (p.restoreFraction ?? 0), 0);
+          const remainingSpace = total * (1 - restoreFractionSum);
+          const nonRestorePanels = visible.filter((p) => p.restoreFraction == null);
+          const nonRestoreDeclaredTotal = nonRestorePanels.reduce((s, p) => s + (p.declaredSize ?? 0), 0);
+          visible.forEach((p) => {
+            if (p.restoreFraction != null) {
+              p.size = p.restoreFraction * total;
+              p.explicit = true;
+              p.restoreFraction = null;
+            } else if (nonRestoreDeclaredTotal > 0) {
+              p.size = (p.declaredSize ?? 0) / nonRestoreDeclaredTotal * remainingSpace;
             } else {
-              p.size = share;
+              p.size = nonRestorePanels.length > 0 ? remainingSpace / nonRestorePanels.length : 0;
             }
-            p.size = Math.min(Math.max(p.size ?? share, p.min), p.max);
           });
+        } else {
+          const stored = loadSizes();
+          if (stored && stored.length === visible.length) {
+            visible.forEach((p, i) => {
+              p.size = stored[i] * usableSize();
+              p.explicit = true;
+            });
+          } else {
+            const explicitTotal = visible.filter((p) => p.explicit).reduce((sum, p) => sum + p.declaredSize, 0);
+            const autoPanels = visible.filter((p) => !p.explicit);
+            const remaining = total - explicitTotal;
+            const share = autoPanels.length ? remaining / autoPanels.length : 0;
+            visible.forEach((p) => {
+              if (p.explicit) {
+                p.size = p.declaredSize;
+              } else {
+                p.size = share;
+              }
+              p.size = Math.min(Math.max(p.size ?? share, p.min), p.max);
+            });
+          }
         }
       }
       visible.forEach((p) => {
@@ -9267,6 +9433,10 @@ function split_default(Alpine) {
       let delta = total - currentTotal;
       if (Math.abs(delta) < DELTA_ABS) {
         visible.forEach((p) => p.apply());
+        if (total > 0)
+          visible.forEach((p) => {
+            p.savedFraction = p.size / total;
+          });
         return;
       }
       let flexible = visible.filter((p) => {
@@ -9300,6 +9470,10 @@ function split_default(Alpine) {
         if (Math.abs(consumed) < DELTA_ABS) break;
       }
       visible.forEach((p) => p.apply());
+      if (total > 0)
+        visible.forEach((p) => {
+          p.savedFraction = p.size / total;
+        });
     };
     let layoutFrame = null;
     const queueLayout = () => {
@@ -9334,7 +9508,6 @@ function split_default(Alpine) {
         queueLayout();
       },
       panelHidden() {
-        initialized = false;
         refreshGutters();
         queueLayout();
       },
@@ -9345,6 +9518,9 @@ function split_default(Alpine) {
       panelChange() {
         queueLayout();
       },
+      resetInit() {
+        initialized = false;
+      },
       normalize,
       saveSizes
     };
@@ -9508,6 +9684,9 @@ function split_default(Alpine) {
       max: split._h_split.normalize(el.getAttribute("data-max")) ?? Infinity,
       collapsed: false,
       prevSize: null,
+      prevHiddenFraction: null,
+      savedFraction: null,
+      restoreFraction: null,
       apply() {
         el.style.flexBasis = `${this.size.toFixed(2)}px`;
         if (split._h_split.state.isBorder) {
@@ -9612,7 +9791,7 @@ function split_default(Alpine) {
     gutter.addEventListener("pointerdown", drag);
     const collapse = () => {
       if (panel.collapsed) return;
-      panel.prevSize = panel.size;
+      panel.prevSize = panel.size > (panel.min ?? 0) ? panel.size : panel.declaredSize;
       panel.size = panel.min ?? 0;
       panel.collapsed = true;
       panel.explicit = true;
@@ -9636,19 +9815,32 @@ function split_default(Alpine) {
       panel.explicit = true;
       split._h_split.panelChange();
     };
+    const setState = () => {
+      if (panel.hidden) {
+        el.classList.add("hidden");
+      } else {
+        el.classList.remove("hidden");
+      }
+      split._h_split.panelHidden();
+    };
+    setState();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === "data-gutterless") {
           gutterless = el.getAttribute("data-gutterless") === "true";
           split._h_split.gutterHidden();
         } else if (mutation.attributeName === "data-hidden") {
-          panel.hidden = el.getAttribute("data-hidden") === "true";
-          if (panel.hidden) {
-            el.classList.add("hidden");
-          } else {
-            el.classList.remove("hidden");
+          const newHidden = el.getAttribute("data-hidden") === "true";
+          if (!panel.hidden && newHidden) {
+            panel.prevHiddenFraction = panel.savedFraction;
+          } else if (panel.hidden && !newHidden) {
+            if (panel.prevHiddenFraction != null) {
+              panel.restoreFraction = panel.prevHiddenFraction;
+            }
+            split._h_split.resetInit();
           }
-          split._h_split.panelHidden();
+          panel.hidden = newHidden;
+          setState();
         } else if (mutation.attributeName === "data-locked") {
           panel.setLocked();
         } else {
@@ -11436,7 +11628,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.10.2";
+var version = "1.11.1";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -11629,6 +11821,7 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(alert_default);
   registerPlugin(avatar_default);
   registerPlugin(badge_default);
+  registerPlugin(breadcrumb_default);
   registerPlugin(button_default);
   registerPlugin(calendar_default);
   registerPlugin(card_default);
@@ -11677,6 +11870,7 @@ export {
   alert_default as Alert,
   avatar_default as Avatar,
   badge_default as Badge,
+  breadcrumb_default as Breadcrumb,
   button_default as Button,
   calendar_default as Calendar,
   card_default as Card,