@codbex/harmonia 1.10.1 → 1.11.0

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: [
@@ -5324,7 +5447,9 @@ function chip_default(Alpine) {
       "has-[>[data-slot=chip-close]]:pr-0",
       "has-[>[data-slot=spinner]]:px-2",
       "text-secondary-foreground",
-      "border"
+      "border",
+      "[&>:is(div,span:not([data-slot=chip-close]),p)]:py-1",
+      "[&>:is(div,span:not([data-slot=chip-close]),p)]:truncate"
     );
     if (!el.hasAttribute("type")) {
       el.setAttribute("type", "button");
@@ -5397,8 +5522,8 @@ function chip_default(Alpine) {
     });
   });
   Alpine.directive("h-chip-close", (el, { original }, { effect, cleanup }) => {
-    if (el.tagName === "BUTTON") {
-      throw new Error(`${original} must NOT be a button element`);
+    if (el.tagName !== "SPAN") {
+      throw new Error(`${original} must be a span element`);
     }
     const chip = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_chip"));
     el.classList.add(
@@ -6733,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, {
@@ -6862,6 +6991,7 @@ function menu_default(Alpine) {
         }
       }
     }
+    let autoUpdateCleanup;
     function open(parent) {
       if (el.classList.contains("hidden")) {
         let getPlacement = function() {
@@ -6871,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() {
@@ -6949,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);
@@ -6988,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");
@@ -7402,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");
@@ -11434,7 +11579,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.10.1";
+var version = "1.11.0";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -11627,6 +11772,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);
@@ -11675,6 +11821,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,