feat: release design system engine, studio and component contracts
This commit is contained in:
Clintchiz committed
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -268,13 +268,13 @@ component AdvancedSelect {
|
||||
data-page="{page}"
|
||||
data-wrn-select
|
||||
@focusout="if (!event.currentTarget.contains(event.relatedTarget)) { open = false }"
|
||||
>
|
||||
<div class="wrn-next__row">
|
||||
<label id="{name}-label" for="{name}-trigger">{label}</label>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="root" data-wrn-component="AdvancedSelect" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<div class="wrn-next__row" data-wrn-owner="AdvancedSelect" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<label id="{name}-label" for="{name}-trigger" data-wrn-owner="AdvancedSelect" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
|
||||
<small data-show="showCounter" data-text="counterText()">{counterText()}</small>
|
||||
</div>
|
||||
|
||||
<div class="wrn-next__select-control">
|
||||
<div class="wrn-next__select-control" data-wrn-owner="AdvancedSelect" data-wrn-part="selectControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<button
|
||||
{...attrs}
|
||||
id="{name}-trigger"
|
||||
@@ -289,8 +289,8 @@ component AdvancedSelect {
|
||||
disabled="{disabled}"
|
||||
@click="toggle()"
|
||||
@keydown="handleKeydown(event)"
|
||||
>
|
||||
<span class="wrn-next__select-value">
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectTrigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<span class="wrn-next__select-value" data-wrn-owner="AdvancedSelect" data-wrn-part="selectValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<span data-show="!multiple" data-text="triggerText()">{triggerText()}</span>
|
||||
<span
|
||||
data-show="multiple && selectedTemplate === 'count' && selectedCount() > 0"
|
||||
@@ -304,25 +304,25 @@ component AdvancedSelect {
|
||||
class="wrn-next__select-tags"
|
||||
aria-label="{selectedOptionsLabel}"
|
||||
data-show="multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' && selectedCount() > 0"
|
||||
>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectTags" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
{#each multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' ? selectedOptions() : [] as option}
|
||||
<span data-show="isSelected(option)">
|
||||
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
|
||||
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
|
||||
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
|
||||
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="AdvancedSelect" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
|
||||
{option.label}
|
||||
</span>
|
||||
{/each}
|
||||
</span>
|
||||
<span data-show="multiple && selectedCount() === 0">
|
||||
{#if placeholderIcon}<i class="{placeholderIcon}" aria-hidden="true"></i>{/if}
|
||||
<span class="wrn-next__placeholder">{placeholder}</span>
|
||||
<span class="wrn-next__placeholder" data-wrn-owner="AdvancedSelect" data-wrn-part="placeholder" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{placeholder}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="wrn-next__select-chevron icon-[lucide--chevrons-up-down]"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectChevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -332,7 +332,7 @@ component AdvancedSelect {
|
||||
aria-label="{clearLabel}"
|
||||
title="{clearLabel}"
|
||||
@click="clearSelection(event)"
|
||||
>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="clearSelect" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<span class="icon-[lucide--x]" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -341,11 +341,11 @@ component AdvancedSelect {
|
||||
class="wrn-next__select-dropdown {fixed ? 'wrn-next__select-dropdown--fixed' : ''}"
|
||||
data-show="open"
|
||||
style="{open ? '' : 'display: none'}"
|
||||
>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectDropdown" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
{#if searchable}
|
||||
<label class="wrn-next__select-search">
|
||||
<label class="wrn-next__select-search" data-wrn-owner="AdvancedSelect" data-wrn-part="selectSearch" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<span class="wrn-visually-hidden">{searchPlaceholder}</span>
|
||||
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true"></span>
|
||||
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true" data-wrn-owner="AdvancedSelect" data-wrn-part="searchIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
|
||||
<input
|
||||
type="search"
|
||||
value="{query}"
|
||||
@@ -353,15 +353,15 @@ component AdvancedSelect {
|
||||
autocomplete="off"
|
||||
@input="query = event.target.value; activeIndex = flatVisibleOptions().length ? 0 : -1"
|
||||
@keydown="handleKeydown(event)"
|
||||
/>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="wrn-next__select-message"
|
||||
data-show="remote && query.length !== 0 && query.length < minSearchLength"
|
||||
>Enter at least {minSearchLength} characters.</div>
|
||||
<div class="wrn-next__select-message" data-show="loading" role="status">
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Enter at least {minSearchLength} characters.</div>
|
||||
<div class="wrn-next__select-message" data-show="loading" role="status" data-wrn-owner="AdvancedSelect" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<i class="wrn-spinner wrn-spinner--inline" aria-hidden="true"></i>
|
||||
{loadingLabel}
|
||||
</div>
|
||||
@@ -371,11 +371,11 @@ component AdvancedSelect {
|
||||
data-show="(!remote || (query.length === 0 && remoteAutoLoad) || query.length >= minSearchLength) && !loading"
|
||||
role="listbox"
|
||||
aria-multiselectable="{multiple}"
|
||||
>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
{#each open ? groups : [] as group}
|
||||
{#if visibleOptions(group.options || []).length}
|
||||
<div class="wrn-next__option-group" role="group" aria-label="{group.label}">
|
||||
<div class="wrn-next__group-label">{group.label}</div>
|
||||
<div class="wrn-next__option-group" role="group" aria-label="{group.label}" data-wrn-owner="AdvancedSelect" data-wrn-part="optionGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<div class="wrn-next__group-label" data-wrn-owner="AdvancedSelect" data-wrn-part="groupLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{group.label}</div>
|
||||
{#each visibleOptions(group.options || []) as option}
|
||||
<button
|
||||
type="button"
|
||||
@@ -387,16 +387,16 @@ component AdvancedSelect {
|
||||
disabled="{!canSelect(option)}"
|
||||
@mouseenter="activeIndex = optionIndex(option)"
|
||||
@click="chooseOption(option)"
|
||||
>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
|
||||
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
|
||||
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
|
||||
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="AdvancedSelect" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
|
||||
<span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
|
||||
<i
|
||||
class="wrn-next__check icon-[lucide--check]"
|
||||
data-show="isSelected(option)"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -414,33 +414,33 @@ component AdvancedSelect {
|
||||
disabled="{!canSelect(option)}"
|
||||
@mouseenter="activeIndex = optionIndex(option)"
|
||||
@click="chooseOption(option)"
|
||||
>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="selectOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
|
||||
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
|
||||
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
|
||||
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="AdvancedSelect" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
|
||||
<span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
|
||||
<i
|
||||
class="wrn-next__check icon-[lucide--check]"
|
||||
data-show="isSelected(option)"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if !loading && !flatVisibleOptions().length}
|
||||
<div class="wrn-next__select-message">{emptyLabel}</div>
|
||||
<div class="wrn-next__select-message" data-wrn-owner="AdvancedSelect" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{emptyLabel}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())}
|
||||
<button type="button" class="wrn-next__create-option">{createLabel} “{query}”</button>
|
||||
<button type="button" class="wrn-next__create-option" data-wrn-owner="AdvancedSelect" data-wrn-part="createOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{createLabel} “{query}”</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-next__load-more"
|
||||
data-wrn-select-load-more
|
||||
data-show="infinite && hasMore"
|
||||
>{loadMoreLabel}</button>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="loadMore" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{loadMoreLabel}</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
@@ -449,14 +449,14 @@ component AdvancedSelect {
|
||||
value="{multiple ? selectedValues.join(',') : selectedValue}"
|
||||
required="{required}"
|
||||
aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
|
||||
/>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
|
||||
|
||||
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
|
||||
<small
|
||||
id="{name}-validation"
|
||||
class="wrn-next__validation"
|
||||
data-error="{name}"
|
||||
>{validationMessage}</small>
|
||||
data-wrn-owner="AdvancedSelect" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{validationMessage}</small>
|
||||
</div>
|
||||
<SelectStyles hidden />
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user