494 lines
30 KiB
Plaintext
494 lines
30 KiB
Plaintext
page AdvancedSelectcomponent {
|
|
seo {
|
|
title = "AdvancedSelect component"
|
|
description = "Theme-aware, responsive advanced select component."
|
|
}
|
|
|
|
view {
|
|
<div class="docs-shell">
|
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
<header class="topbar">
|
|
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
|
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
|
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
|
</header>
|
|
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
|
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedSelect</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>AdvancedSelect</h1><p>Theme-aware, responsive advanced select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>51 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedSelect
|
|
size="default"
|
|
color="primary"
|
|
label="Advanced Select"
|
|
name="name"
|
|
value="value"
|
|
/></code></pre><p>Legacy mount name: <code>data-component="AdvancedSelect"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Advanced Select"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>values</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>groups</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>"Select an option"</code></td></tr><tr><td><code>placeholderIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>searchPlaceholder</code></td><td><code>string</code></td><td>Optional</td><td><code>"Search options…"</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>searchable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>defaultOpen</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>clearable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>allowEmpty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>tags</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>invalid</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>validationMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>helpText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Loading options…"</code></td></tr><tr><td><code>emptyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"No options found"</code></td></tr><tr><td><code>selectedOptionsLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Selected options"</code></td></tr><tr><td><code>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Clear selection"</code></td></tr><tr><td><code>createLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Create"</code></td></tr><tr><td><code>loadMoreLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Load more"</code></td></tr><tr><td><code>searchMode</code></td><td><code>string</code></td><td>Optional</td><td><code>"contains"</code></td></tr><tr><td><code>searchFields</code></td><td><code>string</code></td><td>Optional</td><td><code>"label,description"</code></td></tr><tr><td><code>minSearchLength</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>searchResultLimit</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>maxSelections</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>showCounter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>counterTemplate</code></td><td><code>string</code></td><td>Optional</td><td><code>"{selected} selected"</code></td></tr><tr><td><code>optionTemplate</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>selectedTemplate</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>closeOnSelect</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>scrollToSelected</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>fixed</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>remote</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>remoteUrl</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>remoteQueryParam</code></td><td><code>string</code></td><td>Optional</td><td><code>"q"</code></td></tr><tr><td><code>remoteDebounce</code></td><td><code>number</code></td><td>Optional</td><td><code>250</code></td></tr><tr><td><code>remoteAutoLoad</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>infinite</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>hasMore</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>page</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>search</code></li><li><code>select</code></li><li><code>change</code></li><li><code>clear</code></li><li><code>open</code></li><li><code>close</code></li><li><code>load</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedSelect.wrn</code></p><pre data-language="wrn"><code>component AdvancedSelect {
|
|
props {
|
|
size = "default"
|
|
color = "primary"
|
|
label = "Advanced Select"
|
|
name = ""
|
|
value = ""
|
|
values = []
|
|
options = []
|
|
groups = []
|
|
placeholder = "Select an option"
|
|
placeholderIcon = ""
|
|
searchPlaceholder = "Search options…"
|
|
multiple = false
|
|
searchable = true
|
|
defaultOpen = false
|
|
clearable = true
|
|
allowEmpty = true
|
|
tags = false
|
|
disabled = false
|
|
required = false
|
|
invalid = false
|
|
validationMessage = ""
|
|
helpText = ""
|
|
loading = false
|
|
loadingLabel = "Loading options…"
|
|
emptyLabel = "No options found"
|
|
selectedOptionsLabel = "Selected options"
|
|
clearLabel = "Clear selection"
|
|
createLabel = "Create"
|
|
loadMoreLabel = "Load more"
|
|
searchMode = "contains"
|
|
searchFields = "label,description"
|
|
minSearchLength = 0
|
|
searchResultLimit = 0
|
|
maxSelections = 0
|
|
showCounter = false
|
|
counterTemplate = "{selected} selected"
|
|
optionTemplate = "default"
|
|
selectedTemplate = "default"
|
|
closeOnSelect = true
|
|
scrollToSelected = true
|
|
fixed = false
|
|
placement = "bottom"
|
|
remote = false
|
|
remoteUrl = ""
|
|
remoteQueryParam = "q"
|
|
remoteDebounce = 250
|
|
remoteAutoLoad = true
|
|
infinite = false
|
|
hasMore = false
|
|
page = 1
|
|
class = ""
|
|
@event search = function
|
|
@event select = function
|
|
@event change = function
|
|
@event clear = function
|
|
@event open = function
|
|
@event close = function
|
|
@event load = function
|
|
@event error = function
|
|
}
|
|
|
|
state open = defaultOpen
|
|
state query = ""
|
|
state activeIndex = -1
|
|
state selectedValue = value
|
|
state selectedValues = values
|
|
|
|
functions {
|
|
function allOptions() {
|
|
return [...groups.flatMap((group) => group.options || []), ...options]
|
|
}
|
|
|
|
function searchableText(option) {
|
|
return ((option.label || "") + " " + (option.description || "")).toLowerCase()
|
|
}
|
|
|
|
function matches(option) {
|
|
if (!query || query.length < Number(minSearchLength || 0)) {
|
|
return true
|
|
}
|
|
if (searchMode === "startsWith") {
|
|
return searchableText(option).startsWith(query.toLowerCase())
|
|
}
|
|
if (searchMode === "exact") {
|
|
return searchableText(option) === query.toLowerCase()
|
|
}
|
|
return searchableText(option).includes(query.toLowerCase())
|
|
}
|
|
|
|
function matchingOptions(list) {
|
|
return list.filter((option) => matches(option))
|
|
}
|
|
|
|
function visibleOptions(list) {
|
|
if (searchResultLimit > 0) {
|
|
return matchingOptions(list).slice(0, Number(searchResultLimit))
|
|
}
|
|
return matchingOptions(list)
|
|
}
|
|
|
|
function flatVisibleOptions() {
|
|
return visibleOptions(allOptions())
|
|
}
|
|
|
|
function isSelected(option) {
|
|
return (
|
|
multiple
|
|
? selectedValues.includes(option.value)
|
|
: selectedValue === option.value
|
|
)
|
|
}
|
|
|
|
function selectedOptions() {
|
|
return allOptions().filter((option) => isSelected(option))
|
|
}
|
|
|
|
function selectedCount() {
|
|
return multiple ? selectedValues.length : selectedValue ? 1 : 0
|
|
}
|
|
|
|
function counterText() {
|
|
return (
|
|
maxSelections
|
|
? selectedCount() + " / " + maxSelections + " selected"
|
|
: selectedCount() + " selected"
|
|
)
|
|
}
|
|
|
|
function selectedText() {
|
|
return (
|
|
multiple
|
|
? selectedValues.join(", ")
|
|
: selectedOptions().length
|
|
? selectedOptions()[0].label
|
|
: ""
|
|
)
|
|
}
|
|
|
|
function triggerText() {
|
|
return selectedCount() ? selectedText() : placeholder
|
|
}
|
|
|
|
function canSelect(option) {
|
|
if (option.disabled) {
|
|
return false
|
|
}
|
|
if (!multiple || isSelected(option)) {
|
|
return true
|
|
}
|
|
if (maxSelections <= 0) {
|
|
return true
|
|
}
|
|
return selectedCount() < maxSelections
|
|
}
|
|
|
|
function chooseSingle(option) {
|
|
if (!canSelect(option)) {
|
|
return
|
|
}
|
|
selectedValue = option.value
|
|
query = ""
|
|
if (closeOnSelect) {
|
|
open = false
|
|
}
|
|
}
|
|
|
|
function chooseMultiple(option) {
|
|
if (!canSelect(option)) {
|
|
return
|
|
}
|
|
if (isSelected(option)) {
|
|
selectedValues = selectedValues.filter((item) => item !== option.value)
|
|
} else {
|
|
selectedValues = selectedValues.concat([option.value])
|
|
}
|
|
query = ""
|
|
}
|
|
|
|
function chooseOption(option) {
|
|
if (multiple) {
|
|
chooseMultiple(option)
|
|
return
|
|
}
|
|
chooseSingle(option)
|
|
}
|
|
|
|
function clearSelection(event) {
|
|
event.stopPropagation()
|
|
selectedValue = ""
|
|
selectedValues = []
|
|
query = ""
|
|
open = false
|
|
}
|
|
|
|
function toggle() {
|
|
if (disabled) {
|
|
return;
|
|
};
|
|
open = !open;
|
|
activeIndex = open && flatVisibleOptions().length ? 0 : -1;
|
|
}
|
|
|
|
function moveActive(direction) {
|
|
if (!flatVisibleOptions().length) {
|
|
return
|
|
}
|
|
activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
|
|
}
|
|
|
|
function handleKeydown(event) {
|
|
if (disabled) {
|
|
return
|
|
}
|
|
if (event.key === "ArrowDown") {
|
|
event.preventDefault()
|
|
if (!open) {
|
|
open = true
|
|
}
|
|
moveActive(1)
|
|
} else if (event.key === "ArrowUp") {
|
|
event.preventDefault()
|
|
if (!open) {
|
|
open = true
|
|
}
|
|
moveActive(-1)
|
|
} else if (event.key === "Enter" || event.key === " ") {
|
|
event.preventDefault()
|
|
if (!open) {
|
|
open = true
|
|
} else if (activeIndex >= 0) {
|
|
chooseOption(flatVisibleOptions()[activeIndex])
|
|
}
|
|
} else if (event.key === "Escape") {
|
|
open = false
|
|
} else if (event.key === "Home" && open) {
|
|
event.preventDefault()
|
|
activeIndex = 0
|
|
} else if (event.key === "End" && open) {
|
|
event.preventDefault()
|
|
activeIndex = flatVisibleOptions().length - 1
|
|
}
|
|
}
|
|
|
|
function optionIndex(option) {
|
|
return flatVisibleOptions().findIndex((item) => item.value === option.value)
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--advanced-select {open ? 'wire-next--open' : ''} {fixed ? 'wire-next--advanced-select-fixed' : ''} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
|
|
data-placement="{placement}"
|
|
data-search-mode="{searchMode}"
|
|
data-remote="{remote ? 'true' : 'false'}"
|
|
data-remote-url="{remoteUrl}"
|
|
data-remote-query-param="{remoteQueryParam}"
|
|
data-remote-debounce="{remoteDebounce}"
|
|
data-remote-auto-load="{remoteAutoLoad ? 'true' : 'false'}"
|
|
data-infinite="{infinite ? 'true' : 'false'}"
|
|
data-page="{page}"
|
|
data-wrn-select
|
|
@focusout="if (!event.currentTarget.contains(event.relatedTarget)) { open = false }"
|
|
>
|
|
<div class="wire-next__row">
|
|
<label id="{name}-label" for="{name}-trigger">{label}</label>
|
|
<small data-show="showCounter" data-text="counterText()">{counterText()}</small>
|
|
</div>
|
|
<div class="wire-next__select-control">
|
|
<button
|
|
{...attrs}
|
|
id="{name}-trigger"
|
|
type="button"
|
|
class="wire-next__select-trigger"
|
|
role="combobox"
|
|
aria-haspopup="listbox"
|
|
aria-expanded="{open}"
|
|
aria-controls="{name}-listbox"
|
|
aria-labelledby="{name}-label"
|
|
aria-invalid="{invalid}"
|
|
disabled="{disabled}"
|
|
@click="toggle()"
|
|
@keydown="handleKeydown(event)"
|
|
>
|
|
<span class="wire-next__select-value">
|
|
<span data-show="!multiple" data-text="triggerText()">{triggerText()}</span>
|
|
<span
|
|
data-show="multiple && selectedTemplate === 'count' && selectedCount() > 0"
|
|
data-text="selectedCount() + ' selected'"
|
|
>{selectedCount()} selected</span>
|
|
<span
|
|
data-show="multiple && selectedTemplate === 'text' && selectedCount() > 0"
|
|
data-text="selectedText()"
|
|
>{selectedText()}</span>
|
|
<span
|
|
class="wire-next__select-tags"
|
|
aria-label="{selectedOptionsLabel}"
|
|
data-show="multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' && selectedCount() > 0"
|
|
>
|
|
{#each allOptions() as option}
|
|
<span data-show="isSelected(option)">
|
|
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true">
|
|
</i>{/if}
|
|
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
|
|
{#if optionTemplate === "color" && option.color}<i class="wire-next__color-dot" style="--option-color: {option.color}">
|
|
</i>{/if}
|
|
{option.label}
|
|
</span>
|
|
{/each}
|
|
</span>
|
|
<span data-show="multiple && selectedCount() === 0">
|
|
{#if placeholderIcon}<i class="{placeholderIcon}" aria-hidden="true">
|
|
</i>{/if}
|
|
<span class="wire-next__placeholder">{placeholder}</span>
|
|
</span>
|
|
</span>
|
|
<span
|
|
class="wire-next__select-chevron icon-[lucide--chevrons-up-down]"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="wire-next__clear-select"
|
|
data-show="clearable && allowEmpty && selectedCount() > 0 && !disabled"
|
|
aria-label="{clearLabel}"
|
|
title="{clearLabel}"
|
|
@click="clearSelection(event)"
|
|
>
|
|
<span class="icon-[lucide--x]" aria-hidden="true">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="wire-next__select-dropdown {fixed ? 'wire-next__select-dropdown--fixed' : ''}"
|
|
data-show="open"
|
|
style="{open ? '' : 'display: none'}"
|
|
>
|
|
{#if searchable}
|
|
<label class="wire-next__select-search">
|
|
<span class="wire-visually-hidden">{searchPlaceholder}</span>
|
|
<span class="wire-next__search-icon" aria-hidden="true">⌕</span>
|
|
<input
|
|
type="search"
|
|
value="{query}"
|
|
placeholder="{searchPlaceholder}"
|
|
autocomplete="off"
|
|
@input="query = event.target.value; activeIndex = flatVisibleOptions().length ? 0 : -1"
|
|
@keydown="handleKeydown(event)"
|
|
/>
|
|
</label>
|
|
{/if}
|
|
|
|
<div
|
|
class="wire-next__select-message"
|
|
data-show="remote && query.length !== 0 && query.length < minSearchLength"
|
|
>Enter at least {minSearchLength} characters.</div>
|
|
<div class="wire-next__select-message" data-show="loading" role="status">
|
|
<i class="wire-spinner wire-spinner--inline" aria-hidden="true">
|
|
</i>
|
|
{loadingLabel}
|
|
</div>
|
|
<div
|
|
id="{name}-listbox"
|
|
class="wire-next__select-list"
|
|
data-show="(!remote || (query.length === 0 && remoteAutoLoad) || query.length >= minSearchLength) && !loading"
|
|
role="listbox"
|
|
aria-multiselectable="{multiple}"
|
|
>
|
|
{#each groups as group}
|
|
{#if visibleOptions(group.options || []).length}
|
|
<div class="wire-next__option-group" role="group" aria-label="{group.label}">
|
|
<div class="wire-next__group-label">{group.label}</div>
|
|
{#each group.options || [] as option}
|
|
<button
|
|
type="button"
|
|
class="wire-next__select-option {isSelected(option) ? 'wire-next__select-option--selected' : ''} {optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''}"
|
|
data-option-value="{option.value}"
|
|
data-show="matches(option)"
|
|
role="option"
|
|
aria-selected="{isSelected(option)}"
|
|
disabled="{!canSelect(option)}"
|
|
@mouseenter="activeIndex = optionIndex(option)"
|
|
@click="chooseOption(option)"
|
|
>
|
|
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true">
|
|
</i>{/if}
|
|
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
|
|
{#if optionTemplate === "color" && option.color}<i class="wire-next__color-dot" style="--option-color: {option.color}">
|
|
</i>{/if}
|
|
<span>
|
|
<strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
|
|
<i
|
|
class="wire-next__check icon-[lucide--check]"
|
|
data-show="isSelected(option)"
|
|
aria-hidden="true"
|
|
>
|
|
</i>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
|
|
{#each options as option}
|
|
<button
|
|
type="button"
|
|
class="wire-next__select-option {isSelected(option) ? 'wire-next__select-option--selected' : ''} {optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''}"
|
|
data-option-value="{option.value}"
|
|
data-show="matches(option)"
|
|
role="option"
|
|
aria-selected="{isSelected(option)}"
|
|
disabled="{!canSelect(option)}"
|
|
@mouseenter="activeIndex = optionIndex(option)"
|
|
@click="chooseOption(option)"
|
|
>
|
|
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true">
|
|
</i>{/if}
|
|
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
|
|
{#if optionTemplate === "color" && option.color}<i class="wire-next__color-dot" style="--option-color: {option.color}">
|
|
</i>{/if}
|
|
<span>
|
|
<strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
|
|
<i
|
|
class="wire-next__check icon-[lucide--check]"
|
|
data-show="isSelected(option)"
|
|
aria-hidden="true"
|
|
>
|
|
</i>
|
|
</button>
|
|
{/each}
|
|
|
|
{#if !loading && !flatVisibleOptions().length}
|
|
<div class="wire-next__select-message">{emptyLabel}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())}
|
|
<button type="button" class="wire-next__create-option">{createLabel} “{query}”</button>
|
|
{/if}
|
|
<button
|
|
type="button"
|
|
class="wire-next__load-more"
|
|
data-wrn-select-load-more
|
|
data-show="infinite && hasMore"
|
|
>{loadMoreLabel}</button>
|
|
</div>
|
|
<input
|
|
type="hidden"
|
|
name="{name}"
|
|
value="{multiple ? selectedValues.join(',') : selectedValue}"
|
|
required="{required}"
|
|
aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
|
|
/>
|
|
|
|
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
|
|
<small
|
|
id="{name}-validation"
|
|
class="wire-next__validation"
|
|
data-error="{name}"
|
|
>{validationMessage}</small>
|
|
</div>
|
|
}
|
|
}
|
|
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
|
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
|
<BackToTop />
|
|
</div>
|
|
}
|
|
}
|