Pre Release New Changes
This commit is contained in:
Clintchiz committed
1 parent
358a520bc5
commit
3e565e8d03
189 files changed
+36727
-17249
No files matched your search
@@ -6,40 +6,40 @@ page ComboBoxDetail {
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default autocomplete"
|
||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1"
|
||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||
state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"value\": \"design\",\n \"label\": \"Design\",\n \"description\": \"Product and visual design\",\n \"icon\": \"icon-[lucide--palette]\",\n \"color\": \"#8b5cf6\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"engineering\",\n \"label\": \"Engineering\",\n \"description\": \"Platform and application engineering\",\n \"icon\": \"icon-[lucide--code-2]\",\n \"color\": \"#0ea5e9\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"growth\",\n \"label\": \"Growth\",\n \"description\": \"Marketing and customer growth\",\n \"icon\": \"icon-[lucide--trending-up]\",\n \"color\": \"#10b981\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"support\",\n \"label\": \"Support\",\n \"description\": \"Customer operations\",\n \"icon\": \"icon-[lucide--life-buoy]\",\n \"color\": \"#f59e0b\"\n }\n]"
|
||||
state playground_groups = ctx.url.searchParams.get("pg_groups") ?? "[]"
|
||||
state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"value\":\"design\",\"label\":\"Design\",\"description\":\"Product and visual design\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"#8b5cf6\",\"avatar\":\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"},{\"value\":\"engineering\",\"label\":\"Engineering\",\"description\":\"Platform and application engineering\",\"icon\":\"icon-[lucide--code-2]\",\"color\":\"#0ea5e9\",\"avatar\":\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"},{\"value\":\"growth\",\"label\":\"Growth\",\"description\":\"Marketing and customer growth\",\"icon\":\"icon-[lucide--trending-up]\",\"color\":\"#10b981\",\"avatar\":\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"},{\"value\":\"support\",\"label\":\"Support\",\"description\":\"Customer operations\",\"icon\":\"icon-[lucide--life-buoy]\",\"color\":\"#f59e0b\"}]")
|
||||
state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]")
|
||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams"
|
||||
state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…"
|
||||
state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true"
|
||||
state playground_allowCustomValue = ctx.url.searchParams.get("pg_allowCustomValue") ?? "false"
|
||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||
state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
|
||||
state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
|
||||
state playground_allowCustomValue = (ctx.url.searchParams.get("pg_allowCustomValue") ?? "false") === "true"
|
||||
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
|
||||
state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
|
||||
state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
|
||||
state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? ""
|
||||
state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
|
||||
state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false"
|
||||
state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true"
|
||||
state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading suggestions…"
|
||||
state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No matching options"
|
||||
state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear value"
|
||||
state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Toggle suggestions"
|
||||
state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains"
|
||||
state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description"
|
||||
state playground_minSearchLength = ctx.url.searchParams.get("pg_minSearchLength") ?? "0"
|
||||
state playground_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0"
|
||||
state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "0")
|
||||
state playground_searchResultLimit = Number(ctx.url.searchParams.get("pg_searchResultLimit") ?? "0")
|
||||
state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default"
|
||||
state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false"
|
||||
state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true"
|
||||
state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false"
|
||||
state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
|
||||
state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
|
||||
state playground_fixed = (ctx.url.searchParams.get("pg_fixed") ?? "false") === "true"
|
||||
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
|
||||
state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
|
||||
state playground_remote = ctx.url.searchParams.get("pg_remote") ?? "false"
|
||||
state playground_remote = (ctx.url.searchParams.get("pg_remote") ?? "false") === "true"
|
||||
state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? ""
|
||||
state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q"
|
||||
state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250"
|
||||
state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true"
|
||||
state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false"
|
||||
state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false"
|
||||
state playground_page = ctx.url.searchParams.get("pg_page") ?? "1"
|
||||
state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250")
|
||||
state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true"
|
||||
state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true"
|
||||
state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true"
|
||||
state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
|
||||
state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||
seo {
|
||||
@@ -59,12 +59,12 @@ page ComboBoxDetail {
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="ComboBox" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="ComboBox" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="search,select,change,clear,open,close,load,error">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Combo Box</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><div data-component="ComboBox" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" options="{playground_options}" groups="{playground_groups}" placeholder="{playground_placeholder}" searchPlaceholder="{playground_searchPlaceholder}" clearable="{playground_clearable}" allowCustomValue="{playground_allowCustomValue}" disabled="{playground_disabled}" required="{playground_required}" invalid="{playground_invalid}" validationMessage="{playground_validationMessage}" helpText="{playground_helpText}" loading="{playground_loading}" loadingLabel="{playground_loadingLabel}" emptyLabel="{playground_emptyLabel}" clearLabel="{playground_clearLabel}" toggleLabel="{playground_toggleLabel}" searchMode="{playground_searchMode}" searchFields="{playground_searchFields}" minSearchLength="{playground_minSearchLength}" searchResultLimit="{playground_searchResultLimit}" optionTemplate="{playground_optionTemplate}" defaultOpen="{playground_defaultOpen}" closeOnSelect="{playground_closeOnSelect}" fixed="{playground_fixed}" placement="{playground_placement}" autocomplete="{playground_autocomplete}" remote="{playground_remote}" remoteUrl="{playground_remoteUrl}" remoteQueryParam="{playground_remoteQueryParam}" remoteDebounce="{playground_remoteDebounce}" remoteAutoLoad="{playground_remoteAutoLoad}" infinite="{playground_infinite}" hasMore="{playground_hasMore}" page="{playground_page}" loadMoreLabel="{playground_loadMoreLabel}" class="{playground_class}"></div></div>
|
||||
<div class="playground-preview-source" data-playground-preview><ComboBox size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' options='{playground_options}' groups='{playground_groups}' placeholder='{playground_placeholder}' searchPlaceholder='{playground_searchPlaceholder}' clearable='{playground_clearable}' allowCustomValue='{playground_allowCustomValue}' disabled='{playground_disabled}' required='{playground_required}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' helpText='{playground_helpText}' loading='{playground_loading}' loadingLabel='{playground_loadingLabel}' emptyLabel='{playground_emptyLabel}' clearLabel='{playground_clearLabel}' toggleLabel='{playground_toggleLabel}' searchMode='{playground_searchMode}' searchFields='{playground_searchFields}' minSearchLength='{playground_minSearchLength}' searchResultLimit='{playground_searchResultLimit}' optionTemplate='{playground_optionTemplate}' defaultOpen='{playground_defaultOpen}' closeOnSelect='{playground_closeOnSelect}' fixed='{playground_fixed}' placement='{playground_placement}' autocomplete='{playground_autocomplete}' remote='{playground_remote}' remoteUrl='{playground_remoteUrl}' remoteQueryParam='{playground_remoteQueryParam}' remoteDebounce='{playground_remoteDebounce}' remoteAutoLoad='{playground_remoteAutoLoad}' infinite='{playground_infinite}' hasMore='{playground_hasMore}' page='{playground_page}' loadMoreLabel='{playground_loadMoreLabel}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><ComboBox
|
||||
@@ -77,7 +77,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -85,7 +85,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -93,7 +93,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -108,6 +108,7 @@ page ComboBoxDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>41 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -143,7 +144,7 @@ page ComboBoxDetail {
|
||||
"icon": "icon-[lucide--life-buoy]",
|
||||
"color": "#f59e0b"
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-groups"><span><strong>groups</strong><small>string</small></span><textarea id="playground-combo-box-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-combo-box-placeholder" name="pg_placeholder" type="text" value="Search teams" /></label><label class="playground-field" for="playground-combo-box-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-combo-box-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Start typing…" /></label><label class="playground-toggle" for="playground-combo-box-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-combo-box-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-allowCustomValue"><span><strong>allow Custom Value</strong><small>boolean</small></span><input id="playground-combo-box-allowCustomValue" name="pg_allowCustomValue" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-combo-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-combo-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-combo-box-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-combo-box-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-combo-box-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-combo-box-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-combo-box-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-combo-box-loadingLabel" name="pg_loadingLabel" type="text" value="Loading suggestions…" /></label><label class="playground-field" for="playground-combo-box-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-combo-box-emptyLabel" name="pg_emptyLabel" type="text" value="No matching options" /></label><label class="playground-field" for="playground-combo-box-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-combo-box-clearLabel" name="pg_clearLabel" type="text" value="Clear value" /></label><label class="playground-field" for="playground-combo-box-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-combo-box-toggleLabel" name="pg_toggleLabel" type="text" value="Toggle suggestions" /></label><label class="playground-field" for="playground-combo-box-searchMode"><span><strong>search Mode</strong><small>string</small></span><select id="playground-combo-box-searchMode" name="pg_searchMode"><option value="contains" selected>contains</option><option value="startsWith">startsWith</option><option value="exact">exact</option></select></label><label class="playground-field" for="playground-combo-box-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-combo-box-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-combo-box-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-combo-box-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-searchResultLimit"><span><strong>search Result Limit</strLine truncated
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-groups"><span><strong>groups</strong><small>string</small></span><textarea id="playground-combo-box-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-combo-box-placeholder" name="pg_placeholder" type="text" value="Search teams" /></label><label class="playground-field" for="playground-combo-box-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-combo-box-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Start typing…" /></label><label class="playground-toggle" for="playground-combo-box-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-combo-box-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-allowCustomValue"><span><strong>allow Custom Value</strong><small>boolean</small></span><input id="playground-combo-box-allowCustomValue" name="pg_allowCustomValue" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-combo-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-combo-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-combo-box-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-combo-box-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-combo-box-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-combo-box-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-combo-box-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-combo-box-loadingLabel" name="pg_loadingLabel" type="text" value="Loading suggestions…" /></label><label class="playground-field" for="playground-combo-box-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-combo-box-emptyLabel" name="pg_emptyLabel" type="text" value="No matching options" /></label><label class="playground-field" for="playground-combo-box-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-combo-box-clearLabel" name="pg_clearLabel" type="text" value="Clear value" /></label><label class="playground-field" for="playground-combo-box-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-combo-box-toggleLabel" name="pg_toggleLabel" type="text" value="Toggle suggestions" /></label><label class="playground-field" for="playground-combo-box-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-combo-box-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-combo-box-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-combo-box-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-combo-box-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-combo-box-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-combo-box-searchResultLimit" name="pg_searchResultLimit" tLine truncated
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -158,7 +159,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Default autocomplete" name="combobox-1" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default autocomplete usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -172,7 +174,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -180,7 +182,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -188,7 +190,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -212,7 +214,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Local HTML options" name="combobox-2" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Local HTML options usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -226,7 +229,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -234,7 +237,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -242,7 +245,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -266,7 +269,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Grouped suggestions" name="combobox-3" value="" options="[]" groups="[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped suggestions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -284,7 +288,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -292,7 +296,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -305,7 +309,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -330,7 +334,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Minimum search length" name="combobox-4" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -344,7 +349,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -352,7 +357,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -360,7 +365,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -385,7 +390,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Search result limit" name="combobox-5" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -399,7 +405,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -407,7 +413,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -415,7 +421,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -440,7 +446,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Starts-with matching" name="combobox-6" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Starts-with matching usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -454,7 +461,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -462,7 +469,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -470,7 +477,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -495,7 +502,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Search labels and descriptions" name="combobox-7" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -509,7 +517,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -517,7 +525,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -525,7 +533,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -549,7 +557,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Suggestions with icons" name="combobox-8" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with icons usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -563,7 +572,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -571,7 +580,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -579,7 +588,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -604,7 +613,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Suggestions with avatars" name="combobox-9" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with avatars usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -618,7 +628,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -626,7 +636,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -634,7 +644,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -659,7 +669,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Suggestions with color indicators" name="combobox-10" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with color indicators usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -673,7 +684,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -681,7 +692,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -689,7 +700,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -714,7 +725,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Clearable value" name="combobox-11" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clearable value usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -728,7 +740,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -736,7 +748,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -744,7 +756,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -768,7 +780,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Custom text values" name="combobox-12" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom text values usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -782,7 +795,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -790,7 +803,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -798,7 +811,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -823,7 +836,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Preselected value" name="combobox-13" value="engineering" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected value usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -838,7 +852,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -846,7 +860,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -854,7 +868,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -878,7 +892,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Disabled combobox" name="combobox-14" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled combobox usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -892,7 +907,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -900,7 +915,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -908,7 +923,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -933,7 +948,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><div data-component="ComboBox" label="Validation state" name="combobox-15" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||
|
||||
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -947,7 +963,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -955,7 +971,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -963,7 +979,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -988,7 +1004,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Remote data with automatic preload" name="combobox-16" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data with automatic preload usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1002,7 +1019,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1010,7 +1027,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1018,7 +1035,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1045,7 +1062,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Remote search API" name="combobox-17" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote search API usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1059,7 +1077,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1067,7 +1085,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1075,7 +1093,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1102,7 +1120,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Remote query parameters" name="combobox-18" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote query parameters usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1116,7 +1135,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1124,7 +1143,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1132,7 +1151,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1159,7 +1178,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Infinite remote suggestions" name="combobox-19" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite remote suggestions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1173,7 +1193,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1181,7 +1201,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1189,7 +1209,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1218,7 +1238,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="Fixed-position suggestions" name="combobox-20" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position suggestions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1232,7 +1253,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1240,7 +1261,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1248,7 +1269,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1273,7 +1294,8 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="ComboBox" label="JavaScript methods" name="combobox-21" value="" options="[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1287,7 +1309,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1295,7 +1317,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1303,7 +1325,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1319,11 +1341,48 @@ page ComboBoxDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the search query changes or is submitted.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the current search query changes.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@load</code><span>Fires after remote or deferred content loads successfully.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><ComboBox
|
||||
@search='console.log(event.detail)'
|
||||
@select='console.log(event.detail)'
|
||||
@change='console.log(event.detail)'
|
||||
@clear='console.log(event.detail)'
|
||||
@open='console.log(event.detail)'
|
||||
@close='console.log(event.detail)'
|
||||
@load='console.log(event.detail)'
|
||||
@error='console.log(event.detail)'
|
||||
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"ComboBox\"], [data-component=\"ComboBox\"]")
|
||||
|
||||
component.addEventListener('search', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
component?.addEventListener("search", (event) => {
|
||||
console.log("search", event.detail)
|
||||
})
|
||||
|
||||
component?.addEventListener("select", (event) => {
|
||||
console.log("select", event.detail)
|
||||
})
|
||||
|
||||
component?.addEventListener("change", (event) => {
|
||||
console.log("change", event.detail)
|
||||
})
|
||||
|
||||
component?.addEventListener("clear", (event) => {
|
||||
console.log("clear", event.detail)
|
||||
})
|
||||
|
||||
component?.addEventListener("open", (event) => {
|
||||
console.log("open", event.detail)
|
||||
})
|
||||
|
||||
component?.addEventListener("close", (event) => {
|
||||
console.log("close", event.detail)
|
||||
})
|
||||
|
||||
component?.addEventListener("load", (event) => {
|
||||
console.log("load", event.detail)
|
||||
})
|
||||
|
||||
component?.addEventListener("error", (event) => {
|
||||
console.log("error", event.detail)
|
||||
})</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"ComboBox"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Search or select an option"</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Start typing…"</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowCustomValue</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading suggestions…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No matching options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear value"</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Toggle suggestions"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>hasMore</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
Reference in new issue
Block a user