54 lines
1.9 KiB
Plaintext
54 lines
1.9 KiB
Plaintext
component Dropdown {
|
|
props {
|
|
@event toggle = function
|
|
@event open = function
|
|
@event close = function
|
|
@event select = function
|
|
size = "default"
|
|
color = "primary"
|
|
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 {
|
|
<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>
|
|
}
|
|
}
|