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
@@ -241,11 +241,11 @@ component ComboBox {
|
||||
data-wrn-select
|
||||
data-wrn-combobox
|
||||
@focusout="if (!event.currentTarget.contains(event.relatedTarget)) { closeDropdown() }"
|
||||
>
|
||||
<label id="{name}-label" for="{name}-input">{label}</label>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="root" data-wrn-component="ComboBox" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<label id="{name}-label" for="{name}-input" data-wrn-owner="ComboBox" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
|
||||
|
||||
<div class="wrn-next__select-control wrn-next__combobox-control">
|
||||
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true"></span>
|
||||
<div class="wrn-next__select-control wrn-next__combobox-control" data-wrn-owner="ComboBox" data-wrn-part="selectControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="searchIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
|
||||
<input
|
||||
{...attrs}
|
||||
id="{name}-input"
|
||||
@@ -268,7 +268,7 @@ component ComboBox {
|
||||
@click="openDropdown()"
|
||||
@input="updateQuery(event)"
|
||||
@keydown="handleKeydown(event)"
|
||||
/>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="selectTrigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@@ -277,7 +277,7 @@ component ComboBox {
|
||||
aria-label="{clearLabel}"
|
||||
title="{clearLabel}"
|
||||
@click="clearValue(event)"
|
||||
>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="clearSelect" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<span class="icon-[lucide--x]" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button
|
||||
@@ -287,8 +287,8 @@ component ComboBox {
|
||||
tabindex="-1"
|
||||
disabled="{disabled}"
|
||||
@click="toggle()"
|
||||
>
|
||||
<span class="wrn-next__select-chevron icon-[lucide--chevrons-up-down]" aria-hidden="true"></span>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="comboboxToggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<span class="wrn-next__select-chevron icon-[lucide--chevrons-up-down]" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="selectChevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -296,12 +296,12 @@ component ComboBox {
|
||||
class="wrn-next__select-dropdown {fixed ? 'wrn-next__select-dropdown--fixed' : ''}"
|
||||
data-show="shouldShowDropdown()"
|
||||
style="{shouldShowDropdown() ? '' : 'display: none'}"
|
||||
>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="selectDropdown" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<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="ComboBox" 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="ComboBox" 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>
|
||||
@@ -311,10 +311,10 @@ component ComboBox {
|
||||
class="wrn-next__select-list"
|
||||
data-show="(!remote || (query.length === 0 && remoteAutoLoad) || query.length >= minSearchLength) && !loading"
|
||||
role="listbox"
|
||||
>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="selectList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
{#each groups as group}
|
||||
<div class="wrn-next__option-group" role="group" aria-label="{group.label}" data-show="visibleOptions(group.options || []).length > 0">
|
||||
<div class="wrn-next__group-label">{group.label}</div>
|
||||
<div class="wrn-next__option-group" role="group" aria-label="{group.label}" data-show="visibleOptions(group.options || []).length > 0" data-wrn-owner="ComboBox" data-wrn-part="optionGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
|
||||
<div class="wrn-next__group-label" data-wrn-owner="ComboBox" data-wrn-part="groupLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{group.label}</div>
|
||||
{#each group.options || [] as option}
|
||||
<button
|
||||
type="button"
|
||||
@@ -327,12 +327,12 @@ component ComboBox {
|
||||
@mouseenter="activeIndex = optionIndex(option)"
|
||||
@mousedown="event.preventDefault()"
|
||||
@click="chooseOption(option)"
|
||||
>
|
||||
data-wrn-owner="ComboBox" 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="ComboBox" 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>
|
||||
<i class="wrn-next__check icon-[lucide--check]" data-show="isSelected(option)" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -350,12 +350,12 @@ component ComboBox {
|
||||
@mouseenter="activeIndex = optionIndex(option)"
|
||||
@mousedown="event.preventDefault()"
|
||||
@click="chooseOption(option)"
|
||||
>
|
||||
data-wrn-owner="ComboBox" 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="ComboBox" 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>
|
||||
<i class="wrn-next__check icon-[lucide--check]" data-show="isSelected(option)" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -365,7 +365,7 @@ component ComboBox {
|
||||
class="wrn-next__load-more"
|
||||
data-wrn-select-load-more
|
||||
data-show="infinite && hasMore"
|
||||
>{loadMoreLabel}</button>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="loadMore" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{loadMoreLabel}</button>
|
||||
</div>
|
||||
|
||||
{#if !allowCustomValue}
|
||||
@@ -376,7 +376,7 @@ component ComboBox {
|
||||
required="{required}"
|
||||
data-error="{name}"
|
||||
aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
|
||||
/>
|
||||
data-wrn-owner="ComboBox" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
|
||||
{/if}
|
||||
|
||||
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
|
||||
@@ -384,7 +384,7 @@ component ComboBox {
|
||||
id="{name}-validation"
|
||||
class="wrn-next__validation"
|
||||
data-error="{name}"
|
||||
>{validationMessage}</small>
|
||||
data-wrn-owner="ComboBox" 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