@rimelight/ui 0.0.47 → 0.0.49

package/src/components/dropdown-menu/RLADropdownMenu.astro

@@ -1,241 +1,250 @@
----
-import type { DropdownMenuProps, DropdownMenuItem } from "./dropdown-menu"
-import { dropdownMenuTheme } from "./dropdown-menu.theme"
-import RLAIcon from "../icon/RLAIcon.astro"
-
-
-const {
-  items = [],
-  label,
-  icon,
-  size = "md",
-  color = "primary",
-  arrow = false,
-  content: contentProp = {},
-  disabled = false,
-  ...rest
-} = Astro.props as DropdownMenuProps
-
-const align = contentProp?.align || "start"
-const side = contentProp?.side || "bottom"
-
-const classes = dropdownMenuTheme(Astro.props)
-
-// Standardize item groups: array of arrays vs array of items
-const itemGroups: DropdownMenuItem[][] = Array.isArray(items) && items.length > 0 && Array.isArray(items[0])
-  ? (items as DropdownMenuItem[][])
-  : [items as DropdownMenuItem[]]
----
-<rla-dropdown-menu data-align={align} data-side={side} {...rest}>
-  <div class={classes.root} data-slot="root" data-dropdown-menu>
-    <button
-      type="button"
-      class={classes.trigger}
-      data-slot="trigger"
-      data-dropdown-trigger
-      disabled={disabled}
-    >
-      <slot name="trigger">
-        <slot>
-          {icon && <span class={icon + " shrink-0"} />}
-          {label && <span>{label}</span>}
-          {!icon && !label && <RLAIcon name="i-lucide-ellipsis-vertical" class="size-4" />}
-        </slot>
-      </slot>
-    </button>
-
-    <div
-      class={`${classes.content} hidden`}
-      data-slot="content"
-      data-dropdown-content
-    >
-
-      {arrow && <div class={classes.arrow} />}
-      <div class={classes.viewport}>
-        {itemGroups.map((group, groupIdx) => (
-          <div class={classes.group}>
-            {groupIdx > 0 && <div class={classes.separator} />}
-            {group.map((item) => {
-              if (item.type === "separator") {
-                return <div class={classes.separator} />
-              }
-              if (item.type === "label") {
-                return <div class={classes.label}>{item.label}</div>
-              }
-
-              const itemColorClass = item.color === "error"
-                ? "text-destructive hover:bg-destructive/10 hover:text-destructive"
-                : item.color === "primary"
-                ? "text-primary hover:bg-primary/10"
-                : ""
-
-              const ItemTag = item.to ? "a" : "button"
-
-              return (
-                <ItemTag
-                  href={item.to}
-                  target={item.target}
-                  type={item.to ? undefined : "button"}
-                  class={`${classes.item} ${itemColorClass} ${item.class || ""}`}
-                  data-slot="item"
-                  data-dropdown-item
-                  data-item-type={item.type}
-                  data-item-id={item["id"] || item["label"]}
-                  data-item-action={item.label}
-                  disabled={item.disabled}
-                >
-                  {item.type === "checkbox" && (
-                    <span class="shrink-0 size-4 flex items-center justify-center border border-default rounded bg-default" data-checkbox-box>
-                      <RLAIcon name="i-lucide-check" class={`size-3 text-primary ${item.checked !== false ? "" : "hidden"}`} data-checkbox-check />
-                    </span>
-                  )}
-
-                  {item.avatar && (
-                    <img src={item.avatar.src} alt={item.avatar.alt || item.label || ""} class={classes.itemLeadingAvatar} />
-                  )}
-
-                  {item.icon && !item.avatar && (
-                    <span class={`${item.icon} ${classes.itemLeadingIcon}`} />
-                  )}
-
-                  <span class={classes.itemLabel}>{item.label}</span>
-
-                  {(item.shortcut || (item.kbds && item.kbds.length > 0)) && (
-                    <span class={classes.itemTrailing}>
-                      {item.shortcut && <span class={classes.shortcut}>{item.shortcut}</span>}
-                      {item.kbds && item.kbds.map(kbd => (
-                        <kbd class={classes.itemTrailingKbds}>{kbd}</kbd>
-                      ))}
-                    </span>
-                  )}
-                </ItemTag>
-              )
-            })}
-          </div>
-        ))}
-      </div>
-    </div>
-  </div>
-</rla-dropdown-menu>
-
-<script>
-  class RLADropdownMenu extends HTMLElement {
-    private dropdownCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'inline-block';
-      const trigger = this.querySelector("[data-dropdown-trigger]") as HTMLElement | null;
-      const content = this.querySelector("[data-dropdown-content]") as HTMLElement | null;
-
-      if (!trigger || !content) return;
-
-      const updatePosition = () => {
-        if (content.classList.contains("hidden")) return;
-        const rect = trigger.getBoundingClientRect();
-        const align = this.getAttribute("data-align") || "start";
-        const side = this.getAttribute("data-side") || "bottom";
-
-        content.style.position = "fixed";
-        content.style.zIndex = "9999";
-
-        if (side === "top") {
-          content.style.top = `${rect.top - content.offsetHeight - 4}px`;
-        } else {
-          content.style.top = `${rect.bottom + 4}px`;
-        }
-
-        if (align === "end") {
-          content.style.left = `${rect.right - content.offsetWidth}px`;
-        } else if (align === "center") {
-          content.style.left = `${rect.left + (rect.width / 2) - (content.offsetWidth / 2)}px`;
-        } else {
-          content.style.left = `${rect.left}px`;
-        }
-      };
-
-      const toggleMenu = (e: MouseEvent) => {
-        e.stopPropagation();
-        const isHidden = content.classList.contains("hidden");
-
-        document.querySelectorAll("[data-dropdown-content]").forEach(el => {
-          if (el !== content) el.classList.add("hidden");
-        });
-
-        if (isHidden) {
-          content.classList.remove("hidden");
-          updatePosition();
-        } else {
-          content.classList.add("hidden");
-        }
-      };
-
-      trigger.addEventListener("click", toggleMenu);
-
-      const onDocumentClick = (e: MouseEvent) => {
-        if (!this.contains(e.target as Node) && !content.contains(e.target as Node)) {
-          content.classList.add("hidden");
-        }
-      };
-      document.addEventListener("click", onDocumentClick);
-
-      const onScrollOrResize = () => {
-        if (!content.classList.contains("hidden")) {
-          updatePosition();
-        }
-      };
-      window.addEventListener("scroll", onScrollOrResize, true);
-      window.addEventListener("resize", onScrollOrResize);
-
-      const onItemClick = (e: MouseEvent) => {
-        const itemEl = (e.target as HTMLElement).closest("[data-dropdown-item]") as HTMLElement | null;
-        if (itemEl && !itemEl.hasAttribute("disabled")) {
-          const itemType = itemEl.getAttribute("data-item-type");
-          if (itemType === "checkbox") {
-            e.stopPropagation();
-            const checkIcon = itemEl.querySelector("[data-checkbox-check]");
-            const isCurrentlyChecked = checkIcon ? !checkIcon.classList.contains("hidden") : false;
-            const newChecked = !isCurrentlyChecked;
-            if (checkIcon) {
-              if (newChecked) {
-                checkIcon.classList.remove("hidden");
-              } else {
-                checkIcon.classList.add("hidden");
-              }
-            }
-            this.dispatchEvent(new CustomEvent("rla-dropdown-checkbox-change", {
-              detail: {
-                id: itemEl.getAttribute("data-item-id"),
-                action: itemEl.getAttribute("data-item-action"),
-                checked: newChecked,
-                event: e
-              },
-              bubbles: true
-            }));
-          } else {
-            content.classList.add("hidden");
-          }
-        }
-      };
-      content.addEventListener("click", onItemClick);
-
-      this.dropdownCleanup = () => {
-        trigger.removeEventListener("click", toggleMenu);
-        document.removeEventListener("click", onDocumentClick);
-        window.removeEventListener("scroll", onScrollOrResize, true);
-        window.removeEventListener("resize", onScrollOrResize);
-        content.removeEventListener("click", onItemClick);
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.dropdownCleanup) {
-        this.dropdownCleanup();
-        this.dropdownCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-dropdown-menu')) {
-    customElements.define('rla-dropdown-menu', RLADropdownMenu);
-  }
-</script>
+---
+import type { DropdownMenuProps, DropdownMenuItem } from "./dropdown-menu"
+import { dropdownMenuTheme } from "./dropdown-menu.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  items = [],
+  label,
+  icon,
+  size = "md",
+  color = "primary",
+  arrow = false,
+  content: contentProp = {},
+  disabled = false,
+  ...rest
+} = Astro.props as DropdownMenuProps
+
+const align = contentProp?.align || "start"
+const side = contentProp?.side || "bottom"
+
+const classes = dropdownMenuTheme(Astro.props)
+
+// Standardize item groups: array of arrays vs array of items
+const itemGroups: DropdownMenuItem[][] = Array.isArray(items) && items.length > 0 && Array.isArray(items[0])
+  ? (items as DropdownMenuItem[][])
+  : [items as DropdownMenuItem[]]
+---
+<rla-dropdown-menu data-align={align} data-side={side} {...rest}>
+  <div class={classes.root} data-slot="root" data-dropdown-menu>
+    <button
+      type="button"
+      class={classes.trigger}
+      data-slot="trigger"
+      data-dropdown-trigger
+      disabled={disabled}
+    >
+      <slot name="trigger">
+        <slot>
+          {icon && <span class={icon + " shrink-0"} />}
+          {label && <span>{label}</span>}
+          {!icon && !label && <RLAIcon name="i-lucide-ellipsis-vertical" class="size-4" />}
+        </slot>
+      </slot>
+    </button>
+
+    <div
+      class={`${classes.content} hidden`}
+      data-slot="content"
+      data-dropdown-content
+    >
+
+      {arrow && <div class={classes.arrow} />}
+      <div class={classes.viewport}>
+        {itemGroups.map((group, groupIdx) => (
+          <div class={classes.group}>
+            {groupIdx > 0 && <div class={classes.separator} />}
+            {group.map((item) => {
+              if (item.type === "separator") {
+                return <div class={classes.separator} />
+              }
+              if (item.type === "label") {
+                return <div class={classes.label}>{item.label}</div>
+              }
+
+              const itemColorClass = item.color === "error"
+                ? "text-destructive hover:bg-destructive/10 hover:text-destructive"
+                : item.color === "primary"
+                ? "text-primary hover:bg-primary/10"
+                : ""
+
+              const ItemTag = item.to ? "a" : "button"
+
+              return (
+                <ItemTag
+                  href={item.to}
+                  target={item.target}
+                  type={item.to ? undefined : "button"}
+                  class={`${classes.item} ${itemColorClass} ${item.class || ""}`}
+                  data-slot="item"
+                  data-dropdown-item
+                  data-item-type={item.type}
+                  data-item-id={item["id"] || item["label"]}
+                  data-item-action={item.label}
+                  disabled={item.disabled}
+                >
+                  {item.type === "checkbox" && (
+                    <span class="shrink-0 size-4 flex items-center justify-center border border-default rounded bg-default" data-checkbox-box>
+                      <RLAIcon name="i-lucide-check" class={`size-3 text-primary ${item.checked !== false ? "" : "hidden"}`} data-checkbox-check />
+                    </span>
+                  )}
+
+                  {item.avatar && (
+                    <img src={item.avatar.src} alt={item.avatar.alt || item.label || ""} class={classes.itemLeadingAvatar} />
+                  )}
+
+                  {item.icon && !item.avatar && (
+                    <span class={`${item.icon} ${classes.itemLeadingIcon}`} />
+                  )}
+
+                  <span class={classes.itemLabel}>{item.label}</span>
+
+                  {(item.shortcut || (item.kbds && item.kbds.length > 0)) && (
+                    <span class={classes.itemTrailing}>
+                      {item.shortcut && <span class={classes.shortcut}>{item.shortcut}</span>}
+                      {item.kbds && item.kbds.map(kbd => (
+                        <kbd class={classes.itemTrailingKbds}>{kbd}</kbd>
+                      ))}
+                    </span>
+                  )}
+                </ItemTag>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+</rla-dropdown-menu>
+
+<script>
+  class RLADropdownMenu extends HTMLElement {
+    private dropdownCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'inline-block';
+      const trigger = this.querySelector("[data-dropdown-trigger]") as HTMLElement | null;
+      const content = this.querySelector("[data-dropdown-content]") as HTMLElement | null;
+
+      if (!trigger || !content) return;
+
+      const updatePosition = () => {
+        if (content.classList.contains("hidden")) return;
+        const rect = trigger.getBoundingClientRect();
+        const align = this.getAttribute("data-align") || "start";
+        const side = this.getAttribute("data-side") || "bottom";
+
+        content.style.position = "fixed";
+        content.style.zIndex = "99999";
+
+        if (side === "top") {
+          content.style.top = `${rect.top - content.offsetHeight - 4}px`;
+        } else {
+          content.style.top = `${rect.bottom + 4}px`;
+        }
+
+        if (align === "end") {
+          content.style.right = `${window.innerWidth - rect.right}px`;
+          content.style.left = "auto";
+        } else if (align === "center") {
+          content.style.left = `${rect.left + (rect.width / 2) - (content.offsetWidth / 2)}px`;
+          content.style.right = "auto";
+        } else {
+          content.style.left = `${rect.left}px`;
+          content.style.right = "auto";
+        }
+      };
+
+      const toggleMenu = (e: MouseEvent) => {
+        e.stopPropagation();
+        const isHidden = content.classList.contains("hidden");
+
+        document.querySelectorAll("[data-dropdown-content]").forEach(el => {
+          if (el !== content) el.classList.add("hidden");
+        });
+
+        if (isHidden) {
+          if (content.parentElement !== document.body) {
+            document.body.appendChild(content);
+          }
+          content.classList.remove("hidden");
+          updatePosition();
+        } else {
+          content.classList.add("hidden");
+        }
+      };
+
+      trigger.addEventListener("click", toggleMenu);
+
+      const onDocumentClick = (e: MouseEvent) => {
+        if (!this.contains(e.target as Node) && !content.contains(e.target as Node)) {
+          content.classList.add("hidden");
+        }
+      };
+      document.addEventListener("click", onDocumentClick);
+
+      const onScrollOrResize = () => {
+        if (!content.classList.contains("hidden")) {
+          updatePosition();
+        }
+      };
+      window.addEventListener("scroll", onScrollOrResize, true);
+      window.addEventListener("resize", onScrollOrResize);
+
+      const onItemClick = (e: MouseEvent) => {
+        const itemEl = (e.target as HTMLElement).closest("[data-dropdown-item]") as HTMLElement | null;
+        if (itemEl && !itemEl.hasAttribute("disabled")) {
+          const itemType = itemEl.getAttribute("data-item-type");
+          if (itemType === "checkbox") {
+            e.stopPropagation();
+            const checkIcon = itemEl.querySelector("[data-checkbox-check]");
+            const isCurrentlyChecked = checkIcon ? !checkIcon.classList.contains("hidden") : false;
+            const newChecked = !isCurrentlyChecked;
+            if (checkIcon) {
+              if (newChecked) {
+                checkIcon.classList.remove("hidden");
+              } else {
+                checkIcon.classList.add("hidden");
+              }
+            }
+            this.dispatchEvent(new CustomEvent("rla-dropdown-checkbox-change", {
+              detail: {
+                id: itemEl.getAttribute("data-item-id"),
+                action: itemEl.getAttribute("data-item-action"),
+                checked: newChecked,
+                event: e
+              },
+              bubbles: true
+            }));
+          } else {
+            content.classList.add("hidden");
+          }
+        }
+      };
+      content.addEventListener("click", onItemClick);
+
+      this.dropdownCleanup = () => {
+        trigger.removeEventListener("click", toggleMenu);
+        document.removeEventListener("click", onDocumentClick);
+        window.removeEventListener("scroll", onScrollOrResize, true);
+        window.removeEventListener("resize", onScrollOrResize);
+        content.removeEventListener("click", onItemClick);
+        if (content.parentElement === document.body) {
+          content.remove();
+        }
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.dropdownCleanup) {
+        this.dropdownCleanup();
+        this.dropdownCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-dropdown-menu')) {
+    customElements.define('rla-dropdown-menu', RLADropdownMenu);
+  }
+</script>