WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate legacy wire namespace to wrn
Quality / quality (ubuntu-latest) (push) Failing after 9m49s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-12 18:51:15 +05:30
parent ec23dd4c93
commit 2c960fc1dc
488 changed files with 27306 additions and 19063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Tabs.wrn
+62 -62
View File
@@ -108,7 +108,7 @@ component Tabs {
<section
{...attrs}
data-ui-component="Tabs"
class='wire-tabs {class}'
class='wrn-tabs {class}'
data-orientation='{orientation}'
data-color='{color}'
data-size='{size}'
@@ -117,7 +117,7 @@ component Tabs {
data-param='{param}'
>
<div
class="wire-tabs__list"
class="wrn-tabs__list"
role="tablist"
aria-label='{label}'
aria-orientation='{orientation}'
@@ -126,38 +126,38 @@ component Tabs {
{#each itemList() as item, index}
<button
type="button"
class="wire-tabs__tab"
class="wrn-tabs__tab"
role="tab"
data-value='{valueOf(item, index)}'
data-wrn-roving-item="true"
id='wire-tab-{valueOf(item, index)}'
aria-controls='wire-panel-{valueOf(item, index)}'
id='wrn-tab-{valueOf(item, index)}'
aria-controls='wrn-panel-{valueOf(item, index)}'
aria-selected='{isSelected(item, index) ? "true" : "false"}'
aria-disabled='{item.disabled ? "true" : "false"}'
@click='selectTab(item, index, event)'
>
<span class='wire-tabs__icon {item.icon}' data-show="item.icon" aria-hidden="true"></span>
<span class="wire-tabs__label">{item.label || item.title}</span>
<span class="wire-tabs__badge" data-show="item.badge">{item.badge}</span>
<span class='wrn-tabs__icon {item.icon}' data-show="item.icon" aria-hidden="true"></span>
<span class="wrn-tabs__label">{item.label || item.title}</span>
<span class="wrn-tabs__badge" data-show="item.badge">{item.badge}</span>
</button>
{/each}
</div>
<div class="wire-tabs__panels">
<div class="wrn-tabs__panels">
{#each itemList() as item, index}
<div
class="wire-tabs__panel"
class="wrn-tabs__panel"
role="tabpanel"
id='wire-panel-{valueOf(item, index)}'
aria-labelledby='wire-tab-{valueOf(item, index)}'
id='wrn-panel-{valueOf(item, index)}'
aria-labelledby='wrn-tab-{valueOf(item, index)}'
tabindex="0"
data-show='isSelected(item, index)'
>
<h3 class="wire-tabs__title" data-show="item.title && item.title !== item.label">
<h3 class="wrn-tabs__title" data-show="item.title && item.title !== item.label">
{item.title}
</h3>
<p class="wire-tabs__description" data-show="item.description">{item.description}</p>
<div class="wire-tabs__content" data-show="item.content">{item.content}</div>
<p class="wrn-tabs__description" data-show="item.description">{item.description}</p>
<div class="wrn-tabs__content" data-show="item.content">{item.content}</div>
<slot name="panel-{valueOf(item, index)}"></slot>
</div>
{/each}
@@ -167,63 +167,63 @@ component Tabs {
}
style {
.wire-tabs {
--tabs-accent: var(--wire-color-primary);
.wrn-tabs {
--tabs-accent: var(--wrn-color-primary);
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 100%;
}
.wire-tabs[data-color="secondary"] {
--tabs-accent: var(--wire-color-secondary);
.wrn-tabs[data-color="secondary"] {
--tabs-accent: var(--wrn-color-secondary);
}
.wire-tabs[data-color="success"] {
--tabs-accent: var(--wire-color-success);
.wrn-tabs[data-color="success"] {
--tabs-accent: var(--wrn-color-success);
}
.wire-tabs[data-color="danger"] {
--tabs-accent: var(--wire-color-danger);
.wrn-tabs[data-color="danger"] {
--tabs-accent: var(--wrn-color-danger);
}
.wire-tabs[data-color="info"] {
--tabs-accent: var(--wire-color-info);
.wrn-tabs[data-color="info"] {
--tabs-accent: var(--wrn-color-info);
}
.wire-tabs[data-size="sm"] {
.wrn-tabs[data-size="sm"] {
font-size: 0.82rem;
}
.wire-tabs[data-size="lg"] {
.wrn-tabs[data-size="lg"] {
font-size: 1rem;
}
.wire-tabs[data-orientation="vertical"] {
.wrn-tabs[data-orientation="vertical"] {
flex-direction: row;
align-items: flex-start;
}
.wire-tabs__list {
.wrn-tabs__list {
display: flex;
gap: 0.25rem;
min-width: 0;
padding: 0.25rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface-soft);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface-soft);
/* A long tablist scrolls rather than wrapping into an unusable stack. */
overflow-x: auto;
}
.wire-tabs[data-orientation="vertical"] .wire-tabs__list {
.wrn-tabs[data-orientation="vertical"] .wrn-tabs__list {
flex-direction: column;
flex: 0 0 auto;
width: 14rem;
overflow-x: visible;
}
.wire-tabs__tab {
.wrn-tabs__tab {
appearance: none;
display: inline-flex;
align-items: center;
@@ -232,9 +232,9 @@ component Tabs {
flex: 1 0 auto;
padding: 0.55rem 0.9rem;
border: 0;
border-radius: var(--wire-radius-sm);
border-radius: var(--wrn-radius-sm);
background: transparent;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font: inherit;
font-size: 0.88rem;
font-weight: 600;
@@ -245,31 +245,31 @@ component Tabs {
color 160ms ease;
}
.wire-tabs[data-orientation="vertical"] .wire-tabs__tab {
.wrn-tabs[data-orientation="vertical"] .wrn-tabs__tab {
justify-content: flex-start;
}
.wire-tabs__tab:hover {
color: var(--wire-color-text);
.wrn-tabs__tab:hover {
color: var(--wrn-color-text);
}
.wire-tabs__tab:focus-visible {
.wrn-tabs__tab:focus-visible {
outline: 2px solid var(--tabs-accent);
outline-offset: 2px;
}
.wire-tabs__tab[aria-selected="true"] {
background: var(--wire-color-surface);
.wrn-tabs__tab[aria-selected="true"] {
background: var(--wrn-color-surface);
color: var(--tabs-accent);
box-shadow: var(--wire-shadow-1);
box-shadow: var(--wrn-shadow-1);
}
.wire-tabs__tab[aria-disabled="true"] {
.wrn-tabs__tab[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
.wire-tabs__badge {
.wrn-tabs__badge {
padding: 0.05rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--tabs-accent) 16%, transparent);
@@ -277,48 +277,48 @@ component Tabs {
font-size: 0.72rem;
}
.wire-tabs__panels {
.wrn-tabs__panels {
min-width: 0;
flex: 1 1 auto;
}
.wire-tabs__panel {
.wrn-tabs__panel {
outline: none;
animation: wire-tabs-slide-forward 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation: wrn-tabs-slide-forward 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wire-tabs[data-slide="back"] .wire-tabs__panel {
animation-name: wire-tabs-slide-back;
.wrn-tabs[data-slide="back"] .wrn-tabs__panel {
animation-name: wrn-tabs-slide-back;
}
/* The panels clip their own slide so it never widens the page. */
.wire-tabs__panels {
.wrn-tabs__panels {
overflow-x: clip;
}
.wire-tabs__panel:focus-visible {
.wrn-tabs__panel:focus-visible {
outline: 2px solid var(--tabs-accent);
outline-offset: 4px;
border-radius: var(--wire-radius-sm);
border-radius: var(--wrn-radius-sm);
}
.wire-tabs__title {
.wrn-tabs__title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
}
.wire-tabs__description {
.wrn-tabs__description {
margin: 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
line-height: 1.6;
}
.wire-tabs__content {
.wrn-tabs__content {
margin-top: 0.6rem;
}
@keyframes wire-tabs-slide-forward {
@keyframes wrn-tabs-slide-forward {
from {
opacity: 0;
transform: translateX(1.25rem);
@@ -329,7 +329,7 @@ component Tabs {
}
}
@keyframes wire-tabs-slide-back {
@keyframes wrn-tabs-slide-back {
from {
opacity: 0;
transform: translateX(-1.25rem);
@@ -342,17 +342,17 @@ component Tabs {
/* Respect a reduced-motion preference: swap instantly instead. */
@media (prefers-reduced-motion: reduce) {
.wire-tabs__panel {
.wrn-tabs__panel {
animation: none;
}
}
@media (max-width: 639px) {
.wire-tabs[data-orientation="vertical"] {
.wrn-tabs[data-orientation="vertical"] {
flex-direction: column;
}
.wire-tabs[data-orientation="vertical"] .wire-tabs__list {
.wrn-tabs[data-orientation="vertical"] .wrn-tabs__list {
width: 100%;
flex-direction: row;
overflow-x: auto;