@codbex/harmonia 1.11.0 → 1.12.0

package/dist/harmonia.esm.js

@@ -6770,13 +6770,13 @@ function list_default(Alpine) {
 // src/components/menu.js
 function menu_default(Alpine) {
   Alpine.directive("h-menu-trigger", (el, { modifiers }) => {
-    el._menu_trigger = {
+    el._h_menu_trigger = {
       isDropdown: modifiers.includes("dropdown"),
       setOpen(open) {
         el.setAttribute("aria-expanded", open);
       }
     };
-    if (el._menu_trigger.isDropdown) {
+    if (el._h_menu_trigger.isDropdown) {
       el.setAttribute("aria-haspopup", "true");
       el.setAttribute("aria-expanded", "false");
       if (!el.hasAttribute("id")) {
@@ -6818,10 +6818,10 @@ function menu_default(Alpine) {
     const menuTrigger = (() => {
       if (isSubmenu) return;
       let sibling = el.previousElementSibling;
-      while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
+      while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_h_menu_trigger")) {
         sibling = sibling.previousElementSibling;
       }
-      if (!Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
+      if (!Object.prototype.hasOwnProperty.call(sibling, "_h_menu_trigger")) {
         throw new Error(`${original} menu must be placed after a menu trigger element`);
       }
       return sibling;
@@ -6843,16 +6843,22 @@ function menu_default(Alpine) {
       }
       setAriaAttrubutes(menuSubItem);
     } else if (menuTrigger) {
-      setAriaAttrubutes(menuTrigger._menu_trigger.isDropdown ? menuTrigger : void 0);
+      if (menuTrigger._h_menu_trigger.isDropdown) {
+        if (!el.hasAttribute("id")) {
+          el.setAttribute("id", `m${uuid_default()}`);
+        }
+        menuTrigger.setAttribute("aria-controls", el.getAttribute("id"));
+        setAriaAttrubutes(menuTrigger);
+      } else setAriaAttrubutes();
     } else {
       setAriaAttrubutes();
     }
     function listenForTrigger(listen) {
       if (listen) {
-        if (menuTrigger._menu_trigger.isDropdown) menuTrigger.addEventListener("click", openDropdown);
+        if (menuTrigger._h_menu_trigger.isDropdown) menuTrigger.addEventListener("click", openDropdown);
         else menuTrigger.addEventListener("contextmenu", onContextmenu);
       } else {
-        if (menuTrigger._menu_trigger.isDropdown) menuTrigger.removeEventListener("click", openDropdown);
+        if (menuTrigger._h_menu_trigger.isDropdown) menuTrigger.removeEventListener("click", openDropdown);
         else menuTrigger.removeEventListener("contextmenu", onContextmenu);
       }
     }
@@ -6881,8 +6887,8 @@ function menu_default(Alpine) {
       } else {
         listenForTrigger(true);
         if (focusTrigger) menuTrigger.focus();
-        if (menuTrigger._menu_trigger.isDropdown) {
-          menuTrigger._menu_trigger.setOpen(false);
+        if (menuTrigger._h_menu_trigger.isDropdown) {
+          menuTrigger._h_menu_trigger.setOpen(false);
         }
       }
     }
@@ -6997,7 +7003,7 @@ function menu_default(Alpine) {
         let getPlacement = function() {
           if (isSubmenu) {
             return "right-start";
-          } else if (menuTrigger._menu_trigger.isDropdown) {
+          } else if (menuTrigger._h_menu_trigger.isDropdown) {
             return el.getAttribute("data-align") || "bottom-start";
           }
           return "right-start";
@@ -7042,7 +7048,7 @@ function menu_default(Alpine) {
         el.classList.remove("hidden");
         el.pauseKeyEvents = false;
         let firstOpen = true;
-        if (!isSubmenu && menuTrigger._menu_trigger.isDropdown) {
+        if (!isSubmenu && menuTrigger._h_menu_trigger.isDropdown) {
           autoUpdateCleanup = autoUpdate(parent, el, updatePosition);
         } else {
           updatePosition();
@@ -7050,8 +7056,8 @@ function menu_default(Alpine) {
       }
     }
     function openDropdown() {
-      if (menuTrigger._menu_trigger.isDropdown) {
-        menuTrigger._menu_trigger.setOpen(true);
+      if (menuTrigger._h_menu_trigger.isDropdown) {
+        menuTrigger._h_menu_trigger.setOpen(true);
       }
       open(menuTrigger);
     }
@@ -7077,6 +7083,10 @@ function menu_default(Alpine) {
       menuSubItem._menu_sub.open = open;
       menuSubItem._menu_sub.close = close;
     } else {
+      if (menuTrigger._h_menu_trigger.navItem) {
+        menuTrigger._h_menu_trigger.openMenu = openDropdown;
+        menuTrigger._h_menu_trigger.closeMenu = close;
+      }
       listenForTrigger(true);
     }
     function onTransitionEnd(event) {
@@ -7445,6 +7455,154 @@ function menu_default(Alpine) {
   });
 }
 
+// src/components/navigation-menu.js
+var navItemTriggerClasses = [
+  "inline-flex",
+  "h-9",
+  "w-max",
+  "items-center",
+  "justify-center",
+  "rounded-control",
+  "px-3",
+  "py-2",
+  "text-sm",
+  "font-medium",
+  "whitespace-nowrap",
+  "gap-1.5",
+  "transition-colors",
+  "duration-100",
+  "motion-reduce:transition-none",
+  "hover:bg-secondary-hover",
+  "hover:text-secondary-foreground",
+  "focus:bg-secondary-hover",
+  "focus:text-secondary-foreground",
+  "outline-ring/50",
+  "focus-visible:outline-[calc(var(--spacing)*0.75)]",
+  "focus-visible:outline",
+  "cursor-pointer",
+  "shrink-0",
+  "[&_svg]:shrink-0",
+  "[&_svg:not([class*='size-'])]:size-4",
+  "has-[>svg]:px-2.5"
+];
+function navigation_menu_default(Alpine) {
+  Alpine.directive("h-nav", (el, { original }) => {
+    if (el.tagName !== "NAV") {
+      throw new Error(`${original} must be a nav element`);
+    }
+    if (!el.hasAttribute("aria-label")) {
+      throw new Error(`${original} must have an "aria-label" attribute`);
+    }
+    el.classList.add("relative", "z-10", "flex", "items-center");
+    el.setAttribute("data-slot", "nav");
+  });
+  Alpine.directive("h-nav-list", (el, { original }, { Alpine: Alpine2 }) => {
+    if (el.tagName !== "UL") {
+      throw new Error(`${original} must be a ul element`);
+    }
+    const nav = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "nav");
+    if (!nav) {
+      throw new Error(`${original} must be inside a ${Alpine2.prefixed("h-nav")} element`);
+    }
+    el.classList.add("flex", "flex-1", "list-none", "items-center", "gap-1");
+    el.setAttribute("data-slot", "nav-list");
+  });
+  Alpine.directive("h-nav-item", (el, { original }) => {
+    if (el.tagName !== "LI") {
+      throw new Error(`${original} must be a li element`);
+    }
+    if (el.parentElement?.getAttribute("data-slot") !== "nav-list") {
+      throw new Error(`${original} must be a direct child of a x-h-nav-list element`);
+    }
+    el.classList.add("relative");
+    el.setAttribute("data-slot", "nav-item");
+  });
+  Alpine.directive("h-nav-trigger", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+    if (el.tagName !== "BUTTON") {
+      throw new Error(`${original} must be a button element`);
+    }
+    const navItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "nav-item");
+    if (!navItem) {
+      throw new Error(`${original} must be inside a ${Alpine2.prefixed("h-nav-item")} element`);
+    }
+    if (!el.hasAttribute("id")) {
+      el.setAttribute("id", `nnt${uuid_default()}`);
+    }
+    const chevron = createSvg({
+      icon: ChevronDown,
+      classes: "size-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none [[data-state=open]_&]:rotate-180",
+      attrs: { "aria-hidden": "true", role: "presentation" }
+    });
+    el._h_menu_trigger = {
+      isDropdown: true,
+      navItem: true,
+      openMenu: void 0,
+      closeMenu: void 0,
+      setOpen(open) {
+        el.setAttribute("aria-expanded", String(open));
+        el.setAttribute("data-state", open ? "open" : "closed");
+      }
+    };
+    el.setAttribute("aria-haspopup", "menu");
+    el.setAttribute("aria-expanded", "false");
+    el.setAttribute("data-state", "closed");
+    el.classList.add("bg-transparent", "data-[state=open]:bg-secondary-hover", "disabled:opacity-50", "disabled:pointer-events-none", ...navItemTriggerClasses);
+    el.appendChild(chevron);
+    el.setAttribute("data-slot", "nav-trigger");
+    const nav = Alpine2.findClosest(el.parentElement, (p) => p.getAttribute("data-slot") === "nav");
+    let cancelHoverCleanup = null;
+    if (nav?.hasAttribute("data-open-on-hover")) {
+      let scheduleClose = function() {
+        closeTimer = setTimeout(() => {
+          el._h_menu_trigger.closeMenu?.();
+          closeTimer = null;
+        }, 100);
+      }, cancelClose = function() {
+        if (closeTimer) {
+          clearTimeout(closeTimer);
+          closeTimer = null;
+        }
+      }, onNavItemEnter = function() {
+        cancelClose();
+        el._h_menu_trigger.openMenu?.();
+      };
+      el.classList.remove("cursor-pointer");
+      let closeTimer = null;
+      navItem.addEventListener("mouseenter", onNavItemEnter);
+      navItem.addEventListener("mouseleave", scheduleClose);
+      cancelHoverCleanup = () => {
+        cancelClose();
+        navItem.removeEventListener("mouseenter", onNavItemEnter);
+        navItem.removeEventListener("mouseleave", scheduleClose);
+      };
+    }
+    cleanup(() => {
+      if (cancelHoverCleanup) cancelHoverCleanup();
+      if (chevron.parentElement === el) el.removeChild(chevron);
+    });
+  });
+  Alpine.directive("h-nav-link", (el, { original }, { cleanup }) => {
+    if (el.tagName !== "A" && el.tagName !== "BUTTON") {
+      throw new Error(`${original} must be an anchor or button element`);
+    } else if (el.tagName === "BUTTON") {
+      el.setAttribute("type", "button");
+    }
+    el.classList.add(...navItemTriggerClasses, "no-underline", "text-inherit", "data-[active]:bg-secondary-hover", "data-[active]:font-semibold");
+    function syncActive() {
+      if (el.hasAttribute("data-active")) {
+        el.setAttribute("aria-current", "page");
+      } else {
+        el.removeAttribute("aria-current");
+      }
+    }
+    syncActive();
+    const observer = new MutationObserver(syncActive);
+    observer.observe(el, { attributes: true, attributeFilter: ["data-active"] });
+    el.setAttribute("data-slot", "nav-link");
+    cleanup(() => observer.disconnect());
+  });
+}
+
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768, frame = false) {
   let bps = Number.isFinite(breakpoint) ? `${breakpoint}px` : breakpoint;
@@ -9342,8 +9500,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);
@@ -9378,26 +9541,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) => {
@@ -9410,6 +9591,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) => {
@@ -9443,6 +9628,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 = () => {
@@ -9477,7 +9666,6 @@ function split_default(Alpine) {
         queueLayout();
       },
       panelHidden() {
-        initialized = false;
         refreshGutters();
         queueLayout();
       },
@@ -9488,6 +9676,9 @@ function split_default(Alpine) {
       panelChange() {
         queueLayout();
       },
+      resetInit() {
+        initialized = false;
+      },
       normalize,
       saveSizes
     };
@@ -9651,6 +9842,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) {
@@ -9755,7 +9949,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;
@@ -9779,19 +9973,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 {
@@ -11579,7 +11786,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.11.0";
+var version = "1.12.0";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -11789,6 +11996,7 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(label_default);
   registerPlugin(list_default);
   registerPlugin(menu_default);
+  registerPlugin(navigation_menu_default);
   registerPlugin(notifications_default);
   registerPlugin(pagination_default);
   registerPlugin(popover_default);
@@ -11839,6 +12047,7 @@ export {
   label_default as Label,
   list_default as List,
   menu_default as Menu,
+  navigation_menu_default as NavigationMenu,
   notifications_default as Notifications,
   pagination_default as Pagination,
   popover_default as Popover,