99 lines
3.1 KiB
Plaintext
99 lines
3.1 KiB
Plaintext
component Collapse {
|
|
outputs {
|
|
toggle(payload: { index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] })
|
|
open(payload: { index: number; item: string | number | boolean | null | object })
|
|
close(payload: { index: number; item: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
items: unknown[] = []
|
|
multiple: boolean = false
|
|
mode: string = "panel"
|
|
initialOpenIndexes: unknown[] = []
|
|
ariaLabel: string = "Collapsible content"
|
|
class: string = ""
|
|
}
|
|
|
|
state openIndexes = initialOpenIndexes
|
|
|
|
functions {
|
|
shared function isOpen(index) {
|
|
return openIndexes.includes(index)
|
|
}
|
|
|
|
client function toggleItem(index, item, opening) {
|
|
if (item.disabled) {
|
|
return
|
|
}
|
|
opening = !isOpen(index)
|
|
if (opening) {
|
|
if (multiple) {
|
|
openIndexes = openIndexes.concat(index)
|
|
} else {
|
|
openIndexes = [index]
|
|
}
|
|
output.open({ index: index, item: item })
|
|
} else {
|
|
openIndexes = openIndexes.filter((openIndex) => openIndex !== index)
|
|
output.close({ index: index, item: item })
|
|
}
|
|
output.toggle({
|
|
index: index,
|
|
item: item,
|
|
open: opening,
|
|
openIndexes: openIndexes
|
|
})
|
|
}
|
|
}
|
|
|
|
view {
|
|
<section
|
|
{...attrs}
|
|
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--collapse {class}"
|
|
data-mode="{mode}"
|
|
aria-label="{ariaLabel}"
|
|
>
|
|
{#each items as item, index}
|
|
<article class="wire-next__collapse-item" data-open="{isOpen(index)}">
|
|
{#if mode === "inline" && item.preview}
|
|
<p class="wire-next__collapse-preview">{item.preview}</p>
|
|
{/if}
|
|
|
|
<button
|
|
class="wire-next__collapse-trigger"
|
|
type="button"
|
|
aria-expanded="{isOpen(index) ? 'true' : 'false'}"
|
|
aria-controls="{item.id || 'collapse-panel-' + index}"
|
|
disabled="{item.disabled}"
|
|
@click="toggleItem(index, item)"
|
|
>
|
|
<span>{isOpen(index) ? (item.closeLabel || "Read less") : item.label}</span>
|
|
<span class="icon-[lucide--chevron-down] wire-next__collapse-chevron" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<div
|
|
id="{item.id || 'collapse-panel-' + index}"
|
|
class="wire-next__collapse-panel"
|
|
data-open="{isOpen(index)}"
|
|
aria-hidden="{isOpen(index) ? 'false' : 'true'}"
|
|
inert="{!isOpen(index)}"
|
|
>
|
|
<div class="wire-next__collapse-content">
|
|
{#if item.title}<h4>{item.title}</h4>{/if}
|
|
{#if item.content}<p>{item.content}</p>{/if}
|
|
{#if item.links && item.links.length}
|
|
<nav aria-label="Related links">
|
|
{#each item.links as link}<a href="{link.href || '#'}">{link.label}</a>{/each}
|
|
</nav>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{/each}
|
|
<slot />
|
|
</section>
|
|
}
|
|
}
|