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
@@ -161,7 +161,7 @@ items: unknown[] = []
|
||||
class='wrn-dropdown {class}'
|
||||
@keydown='handleKeydown(event)'
|
||||
@focusout='handleFocusout(event)'
|
||||
>
|
||||
data-wrn-owner="Dropdown" data-wrn-part="root" data-wrn-component="Dropdown" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-dropdown__trigger"
|
||||
@@ -170,16 +170,16 @@ items: unknown[] = []
|
||||
aria-label='{ariaLabel || label}'
|
||||
aria-expanded='{open || visible ? "true" : "false"}'
|
||||
@click='toggleMenu(event)'
|
||||
>
|
||||
data-wrn-owner="Dropdown" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="trigger"></slot>
|
||||
{#if icon}
|
||||
<span class='wrn-dropdown__trigger-icon {icon}' aria-hidden="true"></span>
|
||||
<span class='wrn-dropdown__trigger-icon {icon}' aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="triggerIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
{#if label}
|
||||
<span class="wrn-dropdown__trigger-label">{label}</span>
|
||||
<span class="wrn-dropdown__trigger-label" data-wrn-owner="Dropdown" data-wrn-part="triggerLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</span>
|
||||
{/if}
|
||||
{#if showChevron}
|
||||
<span class="icon-[lucide--chevron-down] wrn-dropdown__chevron" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--chevron-down] wrn-dropdown__chevron" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
@@ -190,7 +190,7 @@ items: unknown[] = []
|
||||
hidden='{!(open || visible)}'
|
||||
aria-label="Close menu"
|
||||
@click='hideMenu("outside", event)'
|
||||
></button>
|
||||
data-wrn-owner="Dropdown" data-wrn-part="dismissLayer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
@@ -199,15 +199,15 @@ items: unknown[] = []
|
||||
hidden='{!(open || visible)}'
|
||||
role="menu"
|
||||
aria-label='{menuLabel}'
|
||||
>
|
||||
data-wrn-owner="Dropdown" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot name="header"></slot>
|
||||
|
||||
<div class="wrn-dropdown__items">
|
||||
<div class="wrn-dropdown__items" data-wrn-owner="Dropdown" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#each items as item, itemIndex}
|
||||
{#if item.type === "divider"}
|
||||
<div class="wrn-dropdown__divider" role="separator"></div>
|
||||
<div class="wrn-dropdown__divider" role="separator" data-wrn-owner="Dropdown" data-wrn-part="divider" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
|
||||
{:else if item.type === "header"}
|
||||
<div class="wrn-dropdown__section-label">{item.label || item.title}</div>
|
||||
<div class="wrn-dropdown__section-label" data-wrn-owner="Dropdown" data-wrn-part="sectionLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</div>
|
||||
{:else if item.href}
|
||||
<a
|
||||
href='{item.href}'
|
||||
@@ -221,24 +221,24 @@ items: unknown[] = []
|
||||
tabindex='{item.disabled ? "-1" : "0"}'
|
||||
class="wrn-dropdown__item"
|
||||
@click='chooseItem(item, itemIndex, event)'
|
||||
>
|
||||
data-wrn-owner="Dropdown" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
|
||||
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="itemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<span class="wrn-dropdown__copy">
|
||||
<span class="wrn-dropdown__copy" data-wrn-owner="Dropdown" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<strong>{item.label || item.title}</strong>
|
||||
{#if item.description}
|
||||
<small>{item.description}</small>
|
||||
{/if}
|
||||
</span>
|
||||
{#if item.badge}
|
||||
<span class="wrn-dropdown__badge">{item.badge}</span>
|
||||
<span class="wrn-dropdown__badge" data-wrn-owner="Dropdown" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.badge}</span>
|
||||
{:else if item.shortcut}
|
||||
<kbd>{item.shortcut}</kbd>
|
||||
{:else if value !== "" ? String(item.value) === String(value) : item.checked || item.selected}
|
||||
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else if item.external}
|
||||
<span class="icon-[lucide--arrow-up-right] wrn-dropdown__status" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--arrow-up-right] wrn-dropdown__status" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
@@ -251,27 +251,27 @@ items: unknown[] = []
|
||||
disabled='{item.disabled}'
|
||||
class="wrn-dropdown__item"
|
||||
@click='chooseItem(item, itemIndex, event)'
|
||||
>
|
||||
data-wrn-owner="Dropdown" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
|
||||
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="itemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<span class="wrn-dropdown__copy">
|
||||
<span class="wrn-dropdown__copy" data-wrn-owner="Dropdown" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<strong>{item.label || item.title}</strong>
|
||||
{#if item.description}
|
||||
<small>{item.description}</small>
|
||||
{/if}
|
||||
</span>
|
||||
{#if item.badge}
|
||||
<span class="wrn-dropdown__badge">{item.badge}</span>
|
||||
<span class="wrn-dropdown__badge" data-wrn-owner="Dropdown" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.badge}</span>
|
||||
{:else if item.shortcut}
|
||||
<kbd>{item.shortcut}</kbd>
|
||||
{:else if value !== "" ? String(item.value) === String(value) : item.checked || item.selected}
|
||||
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{:empty}
|
||||
<div class="wrn-dropdown__empty">{emptyLabel}</div>
|
||||
<div class="wrn-dropdown__empty" data-wrn-owner="Dropdown" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{emptyLabel}</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user