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
@@ -28,22 +28,22 @@ label: string = "Breadcrumb"
|
||||
data-variant='{variant}'
|
||||
aria-label='{label}'
|
||||
class='wrn-breadcrumb {class}'
|
||||
>
|
||||
<ol class="wrn-breadcrumb__list">
|
||||
data-wrn-owner="Breadcrumb" data-wrn-part="root" data-wrn-component="Breadcrumb" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
<ol class="wrn-breadcrumb__list" data-wrn-owner="Breadcrumb" data-wrn-part="list" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if showHome}
|
||||
<li class="wrn-breadcrumb__item wrn-breadcrumb__item--home">
|
||||
<li class="wrn-breadcrumb__item wrn-breadcrumb__item--home" data-wrn-owner="Breadcrumb" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<a
|
||||
href='{homeHref || "/"}'
|
||||
class="wrn-breadcrumb__link wrn-breadcrumb__home"
|
||||
@click='output.select({ item: { label: homeLabel, href: homeHref || "/", value: "home" }, itemIndex: -1 })'
|
||||
>
|
||||
data-wrn-owner="Breadcrumb" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if homeIcon === "icon-[lucide--house]"}
|
||||
<span class="icon-[lucide--house] wrn-breadcrumb__icon" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--house] wrn-breadcrumb__icon" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{:else if homeIcon}
|
||||
<span class='{homeIcon} wrn-breadcrumb__icon' aria-hidden="true"></span>
|
||||
<span class='{homeIcon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
|
||||
<span class="wrn-breadcrumb__home-label">{homeLabel}</span>
|
||||
<span class="wrn-breadcrumb__home-label" data-wrn-owner="Breadcrumb" data-wrn-part="homeLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{homeLabel}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
@@ -52,9 +52,9 @@ label: string = "Breadcrumb"
|
||||
<li
|
||||
class="wrn-breadcrumb__item"
|
||||
data-current='{item.active || item.current || (active && active === (item.value || item.label || item.title)) || (!active && itemIndex === items.length - 1) ? "true" : "false"}'
|
||||
>
|
||||
data-wrn-owner="Breadcrumb" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if showHome || itemIndex > 0}
|
||||
<span class="wrn-breadcrumb__separator" aria-hidden="true">
|
||||
<span class="wrn-breadcrumb__separator" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="separator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if separator === "slash"}
|
||||
<span>/</span>
|
||||
{:else if separator === "dot"}
|
||||
@@ -62,7 +62,7 @@ label: string = "Breadcrumb"
|
||||
{:else if separator === "arrow"}
|
||||
<span>→</span>
|
||||
{:else}
|
||||
<span class="wrn-breadcrumb__separator-icon">›</span>
|
||||
<span class="wrn-breadcrumb__separator-icon" data-wrn-owner="Breadcrumb" data-wrn-part="separatorIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">›</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -74,15 +74,15 @@ label: string = "Breadcrumb"
|
||||
rel='{item.external ? "noopener noreferrer" : (item.rel || "")}'
|
||||
class="wrn-breadcrumb__link"
|
||||
@click='output.select({ item: item, itemIndex: itemIndex })'
|
||||
>
|
||||
data-wrn-owner="Breadcrumb" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true"></span>
|
||||
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
|
||||
<span class="wrn-breadcrumb__label">{item.label || item.title}</span>
|
||||
<span class="wrn-breadcrumb__label" data-wrn-owner="Breadcrumb" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</span>
|
||||
|
||||
{#if item.external}
|
||||
<span class="icon-[lucide--arrow-up-right] wrn-breadcrumb__external" aria-hidden="true"></span>
|
||||
<span class="icon-[lucide--arrow-up-right] wrn-breadcrumb__external" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="external" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
@@ -90,21 +90,21 @@ label: string = "Breadcrumb"
|
||||
class="wrn-breadcrumb__current"
|
||||
aria-current='{item.active || item.current || (active && active === (item.value || item.label || item.title)) || (!active && itemIndex === items.length - 1) ? "page" : "false"}'
|
||||
aria-disabled='{item.disabled ? "true" : "false"}'
|
||||
>
|
||||
data-wrn-owner="Breadcrumb" data-wrn-part="current" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if item.icon}
|
||||
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true"></span>
|
||||
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
|
||||
<span class="wrn-breadcrumb__label">{item.label || item.title}</span>
|
||||
<span class="wrn-breadcrumb__label" data-wrn-owner="Breadcrumb" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</span>
|
||||
</span>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
{#if active && !items.some((item) => active === (item.value || item.label || item.title))}
|
||||
<li class="wrn-breadcrumb__item" data-current="true">
|
||||
<li class="wrn-breadcrumb__item" data-current="true" data-wrn-owner="Breadcrumb" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if showHome || items.length > 0}
|
||||
<span class="wrn-breadcrumb__separator" aria-hidden="true">
|
||||
<span class="wrn-breadcrumb__separator" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="separator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if separator === "slash"}
|
||||
<span>/</span>
|
||||
{:else if separator === "dot"}
|
||||
@@ -112,15 +112,15 @@ label: string = "Breadcrumb"
|
||||
{:else if separator === "arrow"}
|
||||
<span>→</span>
|
||||
{:else}
|
||||
<span class="wrn-breadcrumb__separator-icon">›</span>
|
||||
<span class="wrn-breadcrumb__separator-icon" data-wrn-owner="Breadcrumb" data-wrn-part="separatorIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">›</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="wrn-breadcrumb__current" aria-current="page">
|
||||
<span class="wrn-breadcrumb__current" aria-current="page" data-wrn-owner="Breadcrumb" data-wrn-part="current" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if activeIcon}
|
||||
<span class='{activeIcon} wrn-breadcrumb__icon' aria-hidden="true"></span>
|
||||
<span class='{activeIcon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
{/if}
|
||||
<span class="wrn-breadcrumb__label">{active}</span>
|
||||
<span class="wrn-breadcrumb__label" data-wrn-owner="Breadcrumb" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{active}</span>
|
||||
</span>
|
||||
</li>
|
||||
{/if}
|
||||
|
||||
Reference in new issue
Block a user