@iris-ui-kit/vue 0.2.13 → 0.2.15

package/dist/index.cjs

@@ -835,16 +835,229 @@ var IrisIcon = vue.defineComponent({
 // src/admin/styles.ts
 var __NAV_MENU_STYLE_ID = "iris-nav-menu-styles";
 var CSS2 = `
+:where(.iris-nav-menu) {
+  --iris-nav-indent-step: 16px;
+  --iris-nav-item-padding-inline: 10px;
+  --iris-nav-item-padding-block: 8px;
+  --iris-nav-item-border-radius: var(--iris-radius-md, 6px);
+  --iris-nav-item-hover: var(--iris-surface-hover, var(--iris-surface));
+  --iris-nav-item-height: 34px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+  width: 100%;
+}
+
+:where(.iris-nav-menu--horizontal) {
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+}
+
+:where(.iris-nav-menu-group) {
+  position: relative;
+}
+
+:where(.iris-nav-menu-item) {
+  appearance: none;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  width: 100%;
+  min-height: var(--iris-nav-item-height);
+  border: none;
+  border-radius: var(--iris-nav-item-border-radius);
+  background: transparent;
+  color: var(--iris-foreground, var(--iris-color-text, var(--iris-foreground)));
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.2;
+  font-weight: 400;
+  text-align: start;
+  cursor: pointer;
+  opacity: 1;
+  margin: 0;
+  gap: 10px;
+  padding-block: var(--iris-nav-item-padding-block);
+  padding-inline: var(--iris-nav-item-padding-inline);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.iris-nav-menu--horizontal .iris-nav-menu-item) {
+  width: auto;
+  padding-inline-start: var(--iris-nav-item-padding-inline);
+}
+
+:where(.iris-nav-menu-item[data-depth='0']) {
+  --iris-nav-item-padding-inline-start: 10px;
+}
+
+:where(.iris-nav-menu-item[data-depth='1']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step));
+}
+
+:where(.iris-nav-menu-item[data-depth='2']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 2);
+}
+
+:where(.iris-nav-menu-item[data-depth='3']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 3);
+}
+
+:where(.iris-nav-menu-item[data-depth='4']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 4);
+}
+
+:where(.iris-nav-menu-item[data-depth='5']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 5);
+}
+
+:where(.iris-nav-menu-item[data-depth='6']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 6);
+}
+
+:where(.iris-nav-menu-item[data-depth='7']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 7);
+}
+
+:where(.iris-nav-menu-item[data-depth='8']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 8);
+}
+
+:where(.iris-nav-menu-item[data-depth='9']) {
+  --iris-nav-item-padding-inline-start: calc(12px + var(--iris-nav-indent-step) * 9);
+}
+
+:where(.iris-nav-menu--vertical .iris-nav-menu-item[data-depth]) {
+  padding-inline-start: var(--iris-nav-item-padding-inline-start);
+}
+
+:where(.iris-nav-menu-item:hover),
+:where(.iris-nav-menu-item.is-hovered):not([disabled], .is-disabled) {
+  background: var(--iris-nav-item-hover);
+}
+
+:where(.iris-nav-menu-item[data-active='true']) {
+  background: var(--iris-primary);
+  color: var(--iris-primary-foreground, #fff);
+  font-weight: 600;
+}
+
+:where(.iris-nav-menu-item[data-active-trail='true']) {
+  color: var(--iris-primary);
+  font-weight: 600;
+}
+
+:where(.iris-nav-menu-item[disabled], .iris-nav-menu-item.is-disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:where(.iris-nav-menu-item:focus-visible) {
+  outline: 2px solid var(--iris-ring, var(--iris-primary));
+  outline-offset: 1px;
+}
+
+:where(.iris-nav-menu-label) {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:where(.iris-nav-menu-badge) {
+  margin-inline-start: 6px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: var(--iris-danger, #e5484d);
+  color: #fff;
+  flex: 0 0 auto;
+}
+
 :where(.iris-nav-menu-arrow) {
   flex: 0 0 auto;
   opacity: 0.6;
   transform: rotate(0deg);
   transform-origin: center;
   transition: transform 160ms ease;
+  margin-inline-start: auto;
 }
-:where(.iris-nav-menu-arrow[data-reversed="true"]) {
+
+:where(.iris-nav-menu-arrow[data-reversed='true']) {
   transform: rotate(180deg);
 }
+
+:where(.iris-nav-menu-fallback-icon) {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+
+:where(.iris-nav-menu-item.is-disabled) .iris-nav-menu-label {
+  opacity: 0.75;
+}
+
+:where(.iris-nav-menu-group--depth-0 > .iris-nav-menu-children) {
+  display: none;
+}
+
+:where(.iris-nav-menu-group--depth-1 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-2 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-3 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-4 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-5 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-6 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-7 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-8 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group--depth-9 > .iris-nav-menu-children),
+:where(.iris-nav-menu-group > .iris-nav-menu-children) {
+  display: none;
+}
+
+:where(.iris-nav-menu-group[data-open='true'] > .iris-nav-menu-children) {
+  display: block;
+}
+
+:where(.iris-nav-menu--horizontal .iris-nav-menu-group > .iris-nav-menu-children) {
+  position: absolute;
+  min-width: 220px;
+  padding: 6px;
+  border: 1px solid var(--iris-border);
+  border-radius: var(--iris-radius-md, 6px);
+  background: var(--iris-surface);
+  box-shadow: var(--iris-shadow-md);
+}
+
+:where(.iris-nav-menu--horizontal .iris-nav-menu-group[data-depth='0'] > .iris-nav-menu-children) {
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  z-index: 60;
+}
+
+:where(.iris-nav-menu--horizontal .iris-nav-menu-group[data-depth]:not([data-depth='0']) > .iris-nav-menu-children) {
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  z-index: 61;
+}
+
+:where(.iris-nav-menu--collapsed .iris-nav-menu-item) {
+  justify-content: center;
+  padding-inline-start: var(--iris-nav-item-padding-inline);
+}
+
+:where(.iris-nav-menu-item.is-collapsed) {
+  justify-content: center;
+  padding-inline: var(--iris-nav-item-padding-inline);
+}
+
 @media (prefers-reduced-motion: reduce) {
   :where(.iris-nav-menu-arrow) {
     transition: none;
@@ -958,49 +1171,25 @@ var IrisNavMenu = vue.defineComponent({
       if (hoveredAtDepth) return hoveredAtDepth === key;
       return interactionKeyAtDepth(focusedBranches.value, depth) === key;
     };
-    const itemStyle = (opts) => {
-      const bg = opts.active ? "var(--iris-primary)" : opts.hovered && !opts.disabled ? "var(--iris-surface-hover, var(--iris-surface))" : "transparent";
-      return {
-        display: "flex",
-        alignItems: "center",
-        gap: "10px",
-        width: props.orientation === "horizontal" && opts.depth === 0 ? "auto" : "100%",
-        boxSizing: "border-box",
-        border: "none",
-        borderRadius: "var(--iris-radius-md, 6px)",
-        background: bg,
-        color: opts.active ? "var(--iris-primary-foreground, #fff)" : opts.trail ? "var(--iris-primary)" : "var(--iris-foreground)",
-        font: "inherit",
-        fontSize: "14px",
-        fontWeight: opts.active || opts.trail ? "600" : "400",
-        textAlign: "start",
-        cursor: opts.disabled ? "not-allowed" : "pointer",
-        opacity: opts.disabled ? "0.5" : "1",
-        padding: props.collapsed ? "10px" : "8px 10px",
-        paddingInlineStart: props.collapsed || props.orientation === "horizontal" ? "10px" : `${12 + opts.depth * 16}px`,
-        justifyContent: props.collapsed ? "center" : "flex-start"
-      };
+    const itemClass = (opts) => {
+      const depth = Math.min(9, opts.depth);
+      return [
+        "iris-nav-menu-item",
+        `iris-nav-menu-item--depth-${depth}`,
+        `iris-nav-menu-item--${opts.branch ? "branch" : "leaf"}`,
+        opts.active ? "is-active" : void 0,
+        opts.trail ? "is-trail" : void 0,
+        opts.hovered ? "is-hovered" : void 0,
+        opts.open ? "is-open" : void 0,
+        opts.disabled ? "is-disabled" : void 0
+      ].filter(Boolean);
     };
-    const hoverHandlers = (key) => ({
-      onMouseenter: () => hovered.value = key,
-      onMouseleave: () => {
-        if (hovered.value === key) hovered.value = null;
-      }
-    });
     const iconNode = (node, size = 18) => node.icon ? vue.h(IrisIcon, { name: node.icon, size }) : null;
     const badgeNode = (node) => node.badge !== void 0 && node.badge !== "" && !props.collapsed ? vue.h(
       "span",
       {
-        "data-iris-nav-badge": "",
-        style: {
-          marginInlineStart: "auto",
-          fontSize: "11px",
-          lineHeight: "1",
-          padding: "2px 6px",
-          borderRadius: "999px",
-          background: "var(--iris-danger, #e5484d)",
-          color: "#fff"
-        }
+        class: "iris-nav-menu-badge",
+        "data-iris-nav-badge": ""
       },
       String(node.badge)
     ) : null;
@@ -1012,25 +1201,38 @@ var IrisNavMenu = vue.defineComponent({
         {
           key: node.key,
           type: "button",
+          class: [
+            ...itemClass({
+              depth: 0,
+              active,
+              trail: false,
+              hovered: hovered.value === node.key,
+              open: false,
+              disabled: !!node.disabled,
+              branch
+            }),
+            "is-collapsed"
+          ],
           "data-iris-nav-item": "",
           "data-key": node.key,
           "data-active": active ? "true" : void 0,
           "data-branch": branch ? "true" : void 0,
+          "data-hovered": hovered.value === node.key ? "true" : void 0,
           disabled: node.disabled,
           title: node.title,
           "aria-label": branch ? `${node.title} (section)` : node.title,
           "aria-current": active && !branch ? "page" : void 0,
-          style: itemStyle({
-            depth: 0,
-            active,
-            trail: false,
-            hovered: hovered.value === node.key,
-            disabled: !!node.disabled
-          }),
-          ...hoverHandlers(node.key),
+          onMouseenter: () => {
+            if (!node.disabled) hovered.value = node.key;
+          },
+          onMouseleave: () => {
+            if (hovered.value === node.key) hovered.value = null;
+          },
           onClick: () => select(branch ? core.firstLeaf(node) : node)
         },
-        [iconNode(node, 20) ?? vue.h("span", { style: { fontWeight: "700" } }, node.title.charAt(0))]
+        [
+          iconNode(node, 20) ?? vue.h("span", { class: "iris-nav-menu-fallback-icon" }, node.title.charAt(0))
+        ]
       );
     });
     const renderItem = (node, depth) => {
@@ -1045,24 +1247,33 @@ var IrisNavMenu = vue.defineComponent({
         "button",
         {
           type: "button",
+          class: itemClass({
+            depth,
+            active,
+            trail,
+            hovered: hovered.value === node.key,
+            open: branch ? shown : false,
+            disabled: !!node.disabled,
+            branch
+          }),
           "data-iris-nav-item": "",
           "data-key": node.key,
           "data-branch": branch ? "true" : void 0,
           "data-active": active ? "true" : void 0,
           "data-active-trail": trail ? "true" : void 0,
           "data-open": branch && shown ? "true" : void 0,
+          "data-hovered": hovered.value === node.key ? "true" : void 0,
           "data-depth": String(depth),
+          "data-orientation": props.orientation,
           disabled: node.disabled,
           "aria-expanded": branch ? shown ? "true" : "false" : void 0,
           "aria-current": active ? "page" : void 0,
-          style: itemStyle({
-            depth,
-            active,
-            trail,
-            hovered: hovered.value === node.key,
-            disabled: !!node.disabled
-          }),
-          ...hoverHandlers(node.key),
+          onMouseenter: () => {
+            if (!node.disabled) hovered.value = node.key;
+          },
+          onMouseleave: () => {
+            if (hovered.value === node.key) hovered.value = null;
+          },
           onClick: () => branch ? toggle(node.key) : select(node)
         },
         [
@@ -1070,12 +1281,7 @@ var IrisNavMenu = vue.defineComponent({
           vue.h(
             "span",
             {
-              style: {
-                flex: branch ? "1" : "0 1 auto",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              }
+              class: "iris-nav-menu-label"
             },
             node.title
           ),
@@ -1084,16 +1290,18 @@ var IrisNavMenu = vue.defineComponent({
             name: horizontal && depth === 0 ? "chevron-down" : "chevron-right",
             size: 16,
             class: "iris-nav-menu-arrow",
-            "data-reversed": arrowReversed ? "true" : void 0,
-            style: { marginInlineStart: badgeNode(node) ? "6px" : "auto" }
+            "data-reversed": arrowReversed ? "true" : void 0
           }) : null
         ]
       );
-      const groupStyle = horizontal && branch ? { position: "relative" } : void 0;
       if (!branch || !horizontal && !open)
         return vue.h(
           "div",
-          { key: node.key, "data-iris-nav-group": branch ? "" : void 0, style: groupStyle },
+          {
+            key: node.key,
+            "data-iris-nav-group": branch ? "" : void 0,
+            class: ["iris-nav-menu-group", `iris-nav-menu-group--depth-${Math.min(9, depth)}`]
+          },
           [row]
         );
       return vue.h(
@@ -1102,7 +1310,11 @@ var IrisNavMenu = vue.defineComponent({
           key: node.key,
           "data-iris-nav-group": "",
           "data-open": shown ? "true" : void 0,
-          style: groupStyle,
+          "data-depth": String(depth),
+          class: [
+            "iris-nav-menu-group",
+            `iris-nav-menu-group--depth-${Math.min(9, depth)}`
+          ],
           ...horizontal ? {
             onMouseenter: () => setBranchInteraction(hoveredBranches, node.key, true),
             onMouseleave: () => setBranchInteraction(hoveredBranches, node.key, false),
@@ -1121,22 +1333,10 @@ var IrisNavMenu = vue.defineComponent({
           vue.h(
             "div",
             {
+              class: "iris-nav-menu-children",
               "data-iris-nav-children": "",
               role: "group",
-              "aria-hidden": horizontal && !shown ? "true" : void 0,
-              style: horizontal ? {
-                display: shown ? "block" : "none",
-                position: "absolute",
-                insetBlockStart: depth === 0 ? "100%" : "0",
-                insetInlineStart: depth === 0 ? "0" : "100%",
-                zIndex: depth === 0 ? "60" : "61",
-                minWidth: "220px",
-                padding: "6px",
-                border: "1px solid var(--iris-border)",
-                borderRadius: "var(--iris-radius-md, 6px)",
-                background: "var(--iris-surface)",
-                boxShadow: "var(--iris-shadow-md)"
-              } : void 0
+              "aria-hidden": horizontal && !shown ? "true" : void 0
             },
             (node.children ?? []).map((child) => renderItem(child, depth + 1))
           )
@@ -1190,22 +1390,22 @@ var IrisNavMenu = vue.defineComponent({
         }
       }
     };
+    const menuClass = [
+      "iris-nav-menu",
+      `iris-nav-menu--${props.orientation}`,
+      props.collapsed ? "iris-nav-menu--collapsed" : "iris-nav-menu--expanded"
+    ];
     return () => vue.h(
       "nav",
       {
         ...attrs,
+        class: [...menuClass, attrs.class],
         "data-iris-nav-menu": "",
         "data-collapsed": props.collapsed ? "true" : void 0,
         "data-orientation": props.orientation,
         "aria-label": props.ariaLabel ?? t("admin.nav"),
         onKeydown,
-        style: {
-          display: "flex",
-          flexDirection: props.orientation === "horizontal" ? "row" : "column",
-          alignItems: props.orientation === "horizontal" ? "center" : void 0,
-          gap: "2px",
-          ...attrs.style ?? {}
-        }
+        style: attrs.style
       },
       props.collapsed ? renderCollapsed() : tree.value.map((node) => renderItem(node, 0))
     );