release: WRNexusJS 0.5.10

.publish/ui/components/Dropdown.wrn

@@ -1,23 +1,53 @@
 component Dropdown {
   props {
+    @event toggle = function
     @event open = function
     @event close = function
     @event select = function
-    @event change = function
     size = "default"
     color = "primary"
-    title = "Dropdown"
-    description = ""
-    open = false
-    placement = "bottom"
-    closeLabel = "Close"
+    label = "Open menu"
+    items = []
+    placement = "end"
     class = ""
   }
+
+  functions {
+    function toggleMenu(event) {
+      $emit("toggle", { open: event.currentTarget.open })
+      $emit(event.currentTarget.open ? "open" : "close", { source: "trigger" })
+    }
+
+    function selectItem(item) {
+      $emit("select", { item: item, value: item.value || "" })
+    }
+  }
+
   view {
-    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--dropdown wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
-      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
-      {#if description}<p>{description}</p>{/if}
-      <slot />
-    </div>
+    <details class="wire-dropdown wire-dropdown--{placement} wire-next--color-{color} wire-next--size-{size} {class}" data-wrn-dropdown @toggle="toggleMenu($event)">
+      <summary aria-label="{label}">
+        <slot name="trigger" />
+        <span class="wire-dropdown__chevron icon-[lucide--chevron-down]" aria-hidden="true"></span>
+      </summary>
+      <div class="wire-dropdown__panel" role="menu" aria-label="{label}">
+        <slot name="header" />
+        {#each items as item}
+          {#if item.type === "divider"}
+            <hr />
+          {:else}
+            {#if item.type === "header"}
+              <span class="wire-dropdown__heading">{item.label}</span>
+            {:else}
+              <a class="wire-dropdown__item {item.danger ? 'wire-dropdown__item--danger' : ''}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" role="menuitem" @click="selectItem(item)">
+                {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
+                {#if item.external}<span class="icon-[lucide--arrow-up-right]" aria-hidden="true"></span>{/if}
+              </a>
+            {/if}
+          {/if}
+        {/each}
+        <slot name="footer" />
+      </div>
+    </details>
   }
 }