@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLAInput.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { InputProps } from "../../types"
 import inputThemeDefault, { createInputTheme } from "../../themes/input.theme"
 
-const inputTheme = inputThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const inputTheme = uiConfig.colors ? createInputTheme() : inputThemeDefault
 const input = scv(inputTheme)
 
 const {
@@ -18,6 +21,7 @@ const {
   error = false,
   leadingIcon,
   trailingIcon,
+  variant = "default",
   size = "md",
   color = "primary",
   theme,
@@ -26,10 +30,11 @@ const {
   ...rest
 } = Astro.props as InputProps
 
-const hasLeading = !!leadingIcon
-const hasTrailing = !!trailingIcon
+const hasLeading = !!leadingIcon || Astro.slots.has("leading")
+const hasTrailing = !!trailingIcon || Astro.slots.has("trailing")
 
 const classes = resolveClasses(input, {
+  variant,
   size,
   hasLeading,
   hasTrailing,
@@ -38,9 +43,9 @@ const classes = resolveClasses(input, {
 }, useUi("input", uiProp), className);
 ---
 <div class={classes.root} data-slot="root">
-  {leadingIcon && (
-    <span class={classes.leading} data-slot="leading-icon">
-      <span class={leadingIcon} />
+  {(leadingIcon || Astro.slots.has("leading")) && (
+    <span class={classes.leading} data-slot="leading">
+      {leadingIcon ? <span class={leadingIcon} /> : <slot name="leading" />}
     </span>
   )}
   <input
@@ -54,9 +59,9 @@ const classes = resolveClasses(input, {
     required={required}
     {...rest}
   />
-  {trailingIcon && (
-    <span class={classes.trailing} data-slot="trailing-icon">
-      <span class={trailingIcon} />
+  {(trailingIcon || Astro.slots.has("trailing")) && (
+    <span class={classes.trailing} data-slot="trailing">
+      {trailingIcon ? <span class={trailingIcon} /> : <slot name="trailing" />}
     </span>
   )}
 </div>

package/src/components/astro/RLAInputMenu.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { InputMenuProps } from "../../types"
 import inputMenuThemeDefault, { createInputMenuTheme } from "../../themes/input-menu.theme"
 
-const inputMenuTheme = inputMenuThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const inputMenuTheme = uiConfig.colors ? createInputMenuTheme() : inputMenuThemeDefault
 const inputMenu = scv(inputMenuTheme)
 
 const {
@@ -35,97 +38,130 @@ const normalizedItems = items.map(item => {
 const selectedItem = normalizedItems.find(item => item.value === value)
 const initialLabel = selectedItem ? selectedItem.label : ""
 ---
-<div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
-  {label && <label class={classes.label} data-slot="label">{label}</label>}
-  
-  <div class="relative w-full" data-inputMenu-wrapper>
-    <button
-      type="button"
-      class={classes.trigger}
-      data-slot="trigger"
-      disabled={disabled}
-      data-inputMenu-trigger
-      {...rest}
-    >
-      <span data-inputMenu-value>{initialLabel || placeholder}</span>
-      <span class="i-lucide-chevrons-up-down opacity-50" />
-    </button>
-
-    <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
-      <input
-        type="text"
-        class={classes.input}
-        placeholder="Search..."
-        data-inputMenu-search
-      />
-      <div class="py-1" data-inputMenu-items>
-        {normalizedItems.map(item => (
-          <div
-            class={classes.item}
-            data-slot="item"
-            data-value={item.value}
-            data-label={item.label}
-            data-inputMenu-item
-          >
-            <span class={classes.itemText}>{item.label}</span>
-            <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
-          </div>
-        ))}
+<rla-input-menu {...rest}>
+  <div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
+    {label && <label class={classes.label} data-slot="label">{label}</label>}
+    
+    <div class="relative w-full" data-inputMenu-wrapper>
+      <button
+        type="button"
+        class={classes.trigger}
+        data-slot="trigger"
+        disabled={disabled}
+        data-inputMenu-trigger
+      >
+        <span data-inputMenu-value>{initialLabel || placeholder}</span>
+        <span class="i-lucide-chevrons-up-down opacity-50" />
+      </button>
+
+      <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
+        <input
+          type="text"
+          class={classes.input}
+          placeholder="Search..."
+          data-inputMenu-search
+        />
+        <div class="py-1" data-inputMenu-items>
+          {normalizedItems.map(item => (
+            <div
+              class={classes.item}
+              data-slot="item"
+              data-value={item.value}
+              data-label={item.label}
+              data-inputMenu-item
+            >
+              <span class={classes.itemText}>{item.label}</span>
+              <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
+    <input type="hidden" name={name} value={value} data-inputMenu-hidden-input />
   </div>
-  <input type="hidden" name={name} value={value} data-inputMenu-hidden-input />
-</div>
+</rla-input-menu>
 
 <script>
-  document.querySelectorAll("[data-inputMenu-wrapper]").forEach(wrapper => {
-    const trigger = wrapper.querySelector("[data-inputMenu-trigger]") as HTMLButtonElement;
-    const dropdown = wrapper.querySelector("[data-inputMenu-dropdown]") as HTMLDivElement;
-    const search = wrapper.querySelector("[data-inputMenu-search]") as HTMLInputElement;
-    const items = wrapper.querySelectorAll("[data-inputMenu-item]");
-    const valueSpan = wrapper.querySelector("[data-inputMenu-value]");
-    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-inputMenu-hidden-input]") as HTMLInputElement;
-
-    if (!trigger || !dropdown) return;
-
-    trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      dropdown.classList.toggle("hidden");
-      if (!dropdown.classList.contains("hidden")) {
-        search?.focus();
-      }
-    });
+  class RLAInputMenu extends HTMLElement {
+    private inputMenuCleanup: (() => void) | null = null;
 
-    search?.addEventListener("input", (e) => {
-      const q = (e.target as HTMLInputElement).value.toLowerCase();
-      items.forEach(item => {
-        const label = (item as HTMLElement).dataset.label?.toLowerCase() || "";
-        if (label.includes(q)) {
-          (item as HTMLElement).classList.remove("hidden");
-        } else {
-          (item as HTMLElement).classList.add("hidden");
+    connectedCallback() {
+      this.style.display = 'contents';
+      const wrapper = this.querySelector("[data-inputMenu-wrapper]") as HTMLElement | null;
+      if (!wrapper) return;
+
+      const trigger = wrapper.querySelector("[data-inputMenu-trigger]") as HTMLButtonElement;
+      const dropdown = wrapper.querySelector("[data-inputMenu-dropdown]") as HTMLDivElement;
+      const search = wrapper.querySelector("[data-inputMenu-search]") as HTMLInputElement;
+      const items = wrapper.querySelectorAll<HTMLElement>("[data-inputMenu-item]");
+      const valueSpan = wrapper.querySelector("[data-inputMenu-value]");
+      const hiddenInput = this.querySelector("[data-inputMenu-hidden-input]") as HTMLInputElement;
+
+      if (!trigger || !dropdown) return;
+
+      const onTriggerClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        dropdown.classList.toggle("hidden");
+        if (!dropdown.classList.contains("hidden")) {
+          search?.focus();
         }
+      };
+      trigger.addEventListener("click", onTriggerClick);
+
+      const onSearchInput = (e: Event) => {
+        const q = (e.target as HTMLInputElement).value.toLowerCase();
+        items.forEach(item => {
+          const label = (item as HTMLElement).dataset.label?.toLowerCase() || "";
+          if (label.includes(q)) {
+            (item as HTMLElement).classList.remove("hidden");
+          } else {
+            (item as HTMLElement).classList.add("hidden");
+          }
+        });
+      };
+      search?.addEventListener("input", onSearchInput);
+
+      const itemCleanups: (() => void)[] = [];
+      items.forEach(item => {
+        const onItemClick = (e: MouseEvent) => {
+          e.stopPropagation();
+          const val = (item as HTMLElement).dataset.value || "";
+          const label = (item as HTMLElement).dataset.label || "";
+          
+          if (hiddenInput) hiddenInput.value = val;
+          if (valueSpan) valueSpan.textContent = label;
+          
+          items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+          item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+          
+          dropdown.classList.add("hidden");
+        };
+        item.addEventListener("click", onItemClick);
+        itemCleanups.push(() => item.removeEventListener("click", onItemClick));
       });
-    });
 
-    items.forEach(item => {
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const val = (item as HTMLElement).dataset.value || "";
-        const label = (item as HTMLElement).dataset.label || "";
-        
-        if (hiddenInput) hiddenInput.value = val;
-        if (valueSpan) valueSpan.textContent = label;
-        
-        items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
-        item.querySelector("[data-check-icon]")?.classList.remove("hidden");
-        
+      const onDocumentClick = () => {
         dropdown.classList.add("hidden");
-      });
-    });
+      };
+      document.addEventListener("click", onDocumentClick);
+
+      this.inputMenuCleanup = () => {
+        trigger.removeEventListener("click", onTriggerClick);
+        search?.removeEventListener("input", onSearchInput);
+        itemCleanups.forEach(fn => fn());
+        document.removeEventListener("click", onDocumentClick);
+      };
+    }
 
-    document.addEventListener("click", () => {
-      dropdown.classList.add("hidden");
-    });
-  });
+    disconnectedCallback() {
+      if (this.inputMenuCleanup) {
+        this.inputMenuCleanup();
+        this.inputMenuCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-input-menu')) {
+    customElements.define('rla-input-menu', RLAInputMenu);
+  }
 </script>

package/src/components/astro/RLAKbd.astro

@@ -6,7 +6,7 @@ import kbdThemeDefault, { createKbdTheme } from "../../themes/kbd.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const uiConfig = getUIConfig()
-const kbdTheme = uiConfig.colors ? createKbdTheme() : kbdThemeDefault
+const kbdTheme = uiConfig.colors ? createKbdTheme(uiConfig.colors) : kbdThemeDefault
 
 const kbd = scv(kbdTheme)
 
@@ -18,13 +18,13 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as KbdProps
+} = Astro.props as KbdProps & { color?: string; variant?: string; theme?: string }
 
 const classes = resolveClasses(kbd, {
   size,
-  color,
-  variant,
-  theme
+  color: color as "neutral",
+  variant: variant as "solid",
+  theme: theme as "dark"
 }, useUi("kbd", uiProp), className)
 ---
 <kbd class={classes.root} data-slot="root" {...rest}>