@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLANavigationMenu.astro

@@ -1,137 +1,381 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { NavigationMenuProps } from "../../types"
-import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigation-menu.theme"
-
-const navigationMenuTheme = navigationMenuThemeDefault
-const navigationMenu = scv(navigationMenuTheme)
-
-const {
-  items = [],
-  color = "primary",
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as NavigationMenuProps
-
-const classes = resolveClasses(navigationMenu, { theme }, useUi("navigationMenu", uiProp), className)
----
-
-<nav class={classes.root} data-slot="root" data-nav-menu {...rest}>
-  <ul class={classes.list} data-slot="list" role="list">
-    {items.map((item, i) => {
-      const hasChildren = item.children && item.children.length > 0
-      return (
-        <li class={classes.item} data-slot="item" data-nav-item>
-          {hasChildren ? (
-            <button
-              type="button"
-              class={classes.trigger}
-              data-slot="trigger"
-              data-nav-trigger
-              aria-expanded="false"
-              aria-haspopup="true"
-            >
-              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
-              {item.label}
-              <span class="i-lucide-chevron-down ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" />
-            </button>
-          ) : (
-            <a
-              href={item.href ?? item.to ?? "#"}
-              class={classes.link}
-              data-slot="link"
-            >
-              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
-              {item.label}
-            </a>
-          )}
-
-          {hasChildren && (
-            <div class={classes.content + " hidden"} data-slot="content" data-nav-content role="region">
-              <ul role="list" class="py-1">
-                {item.children!.map(child => (
-                  <li>
-                    <a
-                      href={child.href ?? child.to ?? "#"}
-                      class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
-                    >
-                      {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
-                      <div>
-                        <div class="font-medium leading-none">{child.label}</div>
-                        {child.description && (
-                          <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
-                        )}
-                      </div>
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </li>
-      )
-    })}
-  </ul>
-
-  <slot />
-
-  <div class={classes.viewport} data-slot="viewport" />
-</nav>
-
-<script>
-  document.querySelectorAll("[data-nav-menu]").forEach(menu => {
-    const items = menu.querySelectorAll("[data-nav-item]");
-
-    items.forEach(item => {
-      const trigger = item.querySelector("[data-nav-trigger]");
-      const content = item.querySelector("[data-nav-content]");
-
-      if (!trigger || !content) return;
-
-      const open = () => {
-        content.classList.remove("hidden");
-        trigger.setAttribute("aria-expanded", "true");
-        const icon = trigger.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
-      };
-
-      const close = () => {
-        content.classList.add("hidden");
-        trigger.setAttribute("aria-expanded", "false");
-        const icon = trigger.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "";
-      };
-
-      trigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const isOpen = !content.classList.contains("hidden");
-        // Close all others
-        items.forEach(other => {
-          const otherContent = other.querySelector("[data-nav-content]");
-          const otherTrigger = other.querySelector("[data-nav-trigger]");
-          if (otherContent && !otherContent.classList.contains("hidden")) {
-            otherContent.classList.add("hidden");
-            otherTrigger?.setAttribute("aria-expanded", "false");
-            const icon = otherTrigger?.querySelector(".i-lucide-chevron-down");
-            if (icon) (icon as HTMLElement).style.transform = "";
-          }
-        });
-        if (!isOpen) open();
-      });
-    });
-
-    document.addEventListener("click", () => {
-      items.forEach(item => {
-        const content = item.querySelector("[data-nav-content]");
-        const trigger = item.querySelector("[data-nav-trigger]");
-        if (content) content.classList.add("hidden");
-        if (trigger) trigger.setAttribute("aria-expanded", "false");
-        const icon = trigger?.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "";
-      });
-    });
-  });
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { NavigationMenuProps } from "../../types"
+import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigation-menu.theme"
+
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const navigationMenuTheme = uiConfig.colors ? createNavigationMenuTheme() : navigationMenuThemeDefault
+const navigationMenu = scv(navigationMenuTheme)
+
+const {
+  items = [],
+  color = "primary",
+  theme,
+  orientation = "horizontal",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as NavigationMenuProps & { theme?: string }
+
+const classes = resolveClasses(navigationMenu, { theme: theme as "dark", orientation }, useUi("navigationMenu", uiProp), className)
+
+const slotContents: Record<string, string> = {}
+await Promise.all(
+  items.map(async (item) => {
+    if (item.slot && Astro.slots.has(`${item.slot}-content`)) {
+      slotContents[`${item.slot}-content`] = await Astro.slots.render(`${item.slot}-content`)
+    }
+  })
+)
+---
+
+<rla-navigation-menu orientation={orientation} {...rest}>
+  <nav class={classes.root} data-slot="root" data-nav-menu data-orientation={orientation}>
+    <ul class={classes.list} data-slot="list" role="list">
+      {items.map((item, i) => {
+        const hasChildren = item.children && item.children.length > 0
+        
+        const itemPath = (item.href ?? item.to ?? "#") as string
+        const normalizedPath = itemPath.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
+        const currentPath = Astro.url.pathname.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
+        
+        const isActive = item.active ?? (
+          normalizedPath !== '' && normalizedPath !== '/' 
+            ? currentPath.startsWith(normalizedPath)
+            : currentPath === '/'
+        )
+        
+        return (
+          <li class={classes.item} data-slot="item" data-nav-item data-index={i}>
+            {hasChildren ? (
+              <button
+                type="button"
+                class={classes.link}
+                data-slot="trigger"
+                data-nav-trigger
+                aria-expanded="false"
+                aria-haspopup="true"
+              >
+                {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
+                {item.label}
+                <span class="i-lucide-chevron-down ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" />
+              </button>
+            ) : (
+              <a
+                href={typeof item.href === "string" ? item.href : (typeof item.to === "string" ? item.to : "#")}
+                class={classes.link}
+                data-slot="link"
+                aria-current={isActive ? "page" : undefined}
+              >
+                {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
+                {item.label}
+              </a>
+            )}
+
+            {hasChildren && (
+              <div 
+                class={classes.content + " hidden"} 
+                data-slot="content" 
+                data-nav-content 
+                data-item-index={i}
+                role="region"
+              >
+                {item.slot && Astro.slots.has(`${item.slot}-content`) ? (
+                  <Fragment set:html={slotContents[`${item.slot}-content`]} />
+                ) : (
+                  <ul role="list" class="py-1">
+                    {item.children!.map(child => (
+                      <li>
+                        <a
+                          href={typeof child.href === "string" ? child.href : (typeof child.to === "string" ? child.to : "#")}
+                          class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                        >
+                          {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
+                          <div>
+                            <div class="font-medium leading-none">{child.label}</div>
+                            {child.description && (
+                              <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
+                            )}
+                          </div>
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+
+    <slot />
+
+    <div class={classes.viewportWrapper + " hidden"} data-slot="viewport-wrapper" data-nav-viewport-wrapper>
+      <div class={classes.viewport} data-slot="viewport" data-nav-viewport />
+    </div>
+  </nav>
+</rla-navigation-menu>
+
+<script>
+  class RLANavigationMenu extends HTMLElement {
+    private navCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const menu = this.querySelector("[data-nav-menu]") as HTMLElement | null;
+      if (!menu) return;
+
+      const orientation = menu.getAttribute("data-orientation") || "horizontal";
+      const items = menu.querySelectorAll("[data-nav-item]");
+      const viewportWrapper = (orientation === "horizontal" ? menu.querySelector("[data-nav-viewport-wrapper]") : null) as HTMLElement | null;
+      const viewport = orientation === "horizontal" ? menu.querySelector("[data-nav-viewport]") : null;
+
+      // Teleport viewport wrapper to body to escape parent transforms (e.g. translate-x on header)
+      if (viewportWrapper && viewportWrapper.parentNode !== document.body) {
+        document.body.appendChild(viewportWrapper);
+      }
+
+      let activeItem = null as HTMLElement | null;
+      let hoverTimeout = null as any;
+
+      const updatePosition = () => {
+        if (viewportWrapper && activeItem) {
+          const header = menu.closest("header") || document.querySelector("header");
+          if (header) {
+            const headerRect = header.getBoundingClientRect();
+            viewportWrapper.style.top = `${headerRect.bottom}px`;
+          }
+        }
+      };
+
+      window.addEventListener("scroll", updatePosition, { passive: true });
+      window.addEventListener("resize", updatePosition, { passive: true });
+
+      const open = (item: HTMLElement, trigger: HTMLElement, content: HTMLElement) => {
+        clearTimeout(hoverTimeout);
+        
+        if (orientation === "horizontal" && activeItem && activeItem !== item) {
+          close(activeItem);
+        }
+
+        if (orientation === "horizontal") {
+          activeItem = item;
+          updatePosition();
+        }
+
+        if (viewport) {
+          viewport.innerHTML = "";
+          viewport.appendChild(content);
+          content.classList.remove("hidden");
+          if (viewportWrapper) {
+            viewportWrapper.classList.remove("hidden");
+            viewportWrapper.setAttribute("data-state", "open");
+          }
+        } else {
+          content.classList.remove("hidden");
+        }
+
+        trigger.setAttribute("aria-expanded", "true");
+        trigger.setAttribute("data-state", "open");
+        const icon = trigger.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
+      };
+
+      const close = (item: HTMLElement) => {
+        const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
+        const itemIndex = item.getAttribute("data-index");
+        
+        let content = item.querySelector("[data-nav-content]") as HTMLElement | null;
+        if (!content && viewport) {
+          content = viewport.querySelector(`[data-nav-content][data-item-index="${itemIndex}"]`) as HTMLElement | null;
+        }
+
+        if (content) {
+          content.classList.add("hidden");
+          if (viewport && viewport.contains(content)) {
+            item.appendChild(content);
+          }
+        }
+
+        if (trigger) {
+          trigger.setAttribute("aria-expanded", "false");
+          trigger.setAttribute("data-state", "closed");
+          const icon = trigger.querySelector(".i-lucide-chevron-down");
+          if (icon) (icon as HTMLElement).style.transform = "";
+        }
+
+        if (orientation === "horizontal" && activeItem === item) {
+          activeItem = null;
+        }
+
+        if (orientation === "horizontal" && !activeItem && viewportWrapper) {
+          viewportWrapper.classList.add("hidden");
+          viewportWrapper.setAttribute("data-state", "closed");
+          if (viewport) viewport.innerHTML = "";
+        }
+      };
+
+      const closeAll = () => {
+        items.forEach(item => {
+          close(item as HTMLElement);
+        });
+      };
+
+      const clickListeners: (() => void)[] = [];
+      const enterListeners: (() => void)[] = [];
+      const leaveListeners: (() => void)[] = [];
+
+      items.forEach(itemNode => {
+        const item = itemNode as HTMLElement;
+        const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
+        const content = item.querySelector("[data-nav-content]") as HTMLElement | null;
+
+        if (!trigger || !content) return;
+
+        const onClick = (e: MouseEvent) => {
+          e.stopPropagation();
+          const isOpen = trigger.getAttribute("aria-expanded") === "true";
+          if (isOpen) {
+            close(item);
+          } else {
+            open(item, trigger, content);
+          }
+        };
+        trigger.addEventListener("click", onClick);
+        clickListeners.push(() => trigger.removeEventListener("click", onClick));
+
+        if (orientation === "horizontal") {
+          const onMouseEnter = () => {
+            clearTimeout(hoverTimeout);
+            open(item, trigger, content);
+          };
+          const onMouseLeave = () => {
+            hoverTimeout = setTimeout(() => {
+              if (activeItem === item) {
+                close(item);
+              }
+            }, 150);
+          };
+          item.addEventListener("mouseenter", onMouseEnter);
+          item.addEventListener("mouseleave", onMouseLeave);
+          enterListeners.push(() => item.removeEventListener("mouseenter", onMouseEnter));
+          leaveListeners.push(() => item.removeEventListener("mouseleave", onMouseLeave));
+        }
+      });
+
+      let viewportEnter: (() => void) | null = null;
+      let viewportLeave: (() => void) | null = null;
+
+      if (viewportWrapper) {
+        const onVpEnter = () => {
+          clearTimeout(hoverTimeout);
+        };
+        const onVpLeave = () => {
+          hoverTimeout = setTimeout(() => {
+            if (activeItem) {
+              close(activeItem);
+            }
+          }, 150);
+        };
+        viewportWrapper.addEventListener("mouseenter", onVpEnter);
+        viewportWrapper.addEventListener("mouseleave", onVpLeave);
+        viewportEnter = () => viewportWrapper.removeEventListener("mouseenter", onVpEnter);
+        viewportLeave = () => viewportWrapper.removeEventListener("mouseleave", onVpLeave);
+      }
+
+      const onDocumentClick = (e: MouseEvent) => {
+        const target = e.target as HTMLElement;
+        if (!menu.contains(target) && (!viewportWrapper || !viewportWrapper.contains(target))) {
+          closeAll();
+        }
+      };
+      document.addEventListener("click", onDocumentClick);
+
+      this.navCleanup = () => {
+        window.removeEventListener("scroll", updatePosition);
+        window.removeEventListener("resize", updatePosition);
+        document.removeEventListener("click", onDocumentClick);
+        clickListeners.forEach(fn => fn());
+        enterListeners.forEach(fn => fn());
+        leaveListeners.forEach(fn => fn());
+        if (viewportEnter) viewportEnter();
+        if (viewportLeave) viewportLeave();
+        if (viewportWrapper && viewportWrapper.parentNode === document.body) {
+          viewportWrapper.remove();
+        }
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.navCleanup) {
+        this.navCleanup();
+        this.navCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-navigation-menu')) {
+    customElements.define('rla-navigation-menu', RLANavigationMenu);
+  }
+</script>
+
+<style is:global>
+  /* Reset margins, borders, rounding, and rings on the main viewport container */
+  [data-nav-viewport] {
+    margin-top: 0 !important;
+    border: none !important;
+    border-width: 0px !important;
+    border-style: none !important;
+    border-color: transparent !important;
+    border-radius: 0 !important;
+    outline: none !important;
+    outline-width: 0px !important;
+    outline-color: transparent !important;
+    
+    /* Wiping out any UnoCSS/Tailwind rings on the viewport container */
+    --un-ring-width: 0px !important;
+    --tw-ring-width: 0px !important;
+    --un-ring-offset-width: 0px !important;
+    --tw-ring-offset-width: 0px !important;
+    --un-ring-color: transparent !important;
+    --tw-ring-color: transparent !important;
+    --un-ring-shadow: none !important;
+    --tw-ring-shadow: none !important;
+    --un-ring-offset-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+    
+    /* Premium card shadow */
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.35), 0 8px 10px -6px rgb(0 0 0 / 0.35) !important; /* Premium shadow-xl */
+  }
+
+  /* Reset layout and strip standard dropdown styling (borders/shadows/padding) from teleported content nodes */
+  [data-nav-viewport] [data-nav-content] {
+    position: static !important;
+    width: 100% !important;
+    margin: 0 !important;
+    transform: none !important;
+    border: none !important;
+    border-width: 0px !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    background: transparent !important;
+    
+    /* Wiping out any UnoCSS/Tailwind rings on content */
+    --un-ring-width: 0px !important;
+    --tw-ring-width: 0px !important;
+    --un-ring-offset-width: 0px !important;
+    --tw-ring-offset-width: 0px !important;
+    --un-ring-color: transparent !important;
+    --tw-ring-color: transparent !important;
+    --un-ring-shadow: none !important;
+    --tw-ring-shadow: none !important;
+    --un-ring-offset-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+    --un-shadow: none !important;
+    --tw-shadow: none !important;
+  }
+</style>