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/Nav.wrn
+70 -70
View File
@@ -60,7 +60,7 @@ component Nav {
<nav
{...attrs}
data-ui-component="Nav"
class='wire-nav {class}'
class='wrn-nav {class}'
data-orientation='{orientation}'
data-color='{color}'
data-size='{size}'
@@ -70,21 +70,21 @@ component Nav {
>
<button
type="button"
class="wire-nav__toggle"
class="wrn-nav__toggle"
data-show="collapsible"
aria-expanded='{expanded}'
aria-label='{toggleLabel}'
@click='toggleMenu()'
>
<span class="wire-nav__toggle-bar" aria-hidden="true"></span>
<span class="wire-nav__toggle-text">{toggleLabel}</span>
<span class="wrn-nav__toggle-bar" aria-hidden="true"></span>
<span class="wrn-nav__toggle-text">{toggleLabel}</span>
</button>
<ul class="wire-nav__list" data-wrn-roving='{rovingAxis()}'>
<ul class="wrn-nav__list" data-wrn-roving='{rovingAxis()}'>
{#each itemList() as item}
<li class="wire-nav__item" data-has-children='{childrenOf(item).length > 0}'>
<li class="wrn-nav__item" data-has-children='{childrenOf(item).length > 0}'>
<a
class="wire-nav__link"
class="wrn-nav__link"
href='{item.href || "#"}'
data-wrn-roving-item="true"
data-active='{isActive(item)}'
@@ -93,28 +93,28 @@ component Nav {
@click='choose(item)'
>
<span
class='wire-nav__icon {item.icon}'
class='wrn-nav__icon {item.icon}'
data-show="item.icon"
aria-hidden="true"
></span>
<span class="wire-nav__label">{item.label}</span>
<span class="wire-nav__badge" data-show="item.badge">{item.badge}</span>
<span class="wrn-nav__label">{item.label}</span>
<span class="wrn-nav__badge" data-show="item.badge">{item.badge}</span>
<span
class="wire-nav__arrow"
class="wrn-nav__arrow"
data-show="childrenOf(item).length > 0"
aria-hidden="true"
>&#8250;</span>
</a>
<ul
class="wire-nav__submenu"
class="wrn-nav__submenu"
data-wrn-anchored="true"
data-show="childrenOf(item).length > 0"
>
{#each childrenOf(item) as child}
<li class="wire-nav__item" data-has-children='{childrenOf(child).length > 0}'>
<li class="wrn-nav__item" data-has-children='{childrenOf(child).length > 0}'>
<a
class="wire-nav__link"
class="wrn-nav__link"
href='{child.href || "#"}'
data-active='{isActive(child)}'
aria-current='{isActive(child) ? "page" : "false"}'
@@ -122,28 +122,28 @@ component Nav {
@click='choose(child)'
>
<span
class='wire-nav__icon {child.icon}'
class='wrn-nav__icon {child.icon}'
data-show="child.icon"
aria-hidden="true"
></span>
<span class="wire-nav__label">{child.label}</span>
<span class="wire-nav__badge" data-show="child.badge">{child.badge}</span>
<span class="wrn-nav__label">{child.label}</span>
<span class="wrn-nav__badge" data-show="child.badge">{child.badge}</span>
<span
class="wire-nav__arrow"
class="wrn-nav__arrow"
data-show="childrenOf(child).length > 0"
aria-hidden="true"
>&#8250;</span>
</a>
<ul
class="wire-nav__submenu wire-nav__submenu--level3"
class="wrn-nav__submenu wrn-nav__submenu--level3"
data-wrn-anchored="true"
data-show="childrenOf(child).length > 0"
>
{#each childrenOf(child) as leaf}
<li class="wire-nav__item">
<li class="wrn-nav__item">
<a
class="wire-nav__link"
class="wrn-nav__link"
href='{leaf.href || "#"}'
data-active='{isActive(leaf)}'
aria-current='{isActive(leaf) ? "page" : "false"}'
@@ -151,11 +151,11 @@ component Nav {
@click='choose(leaf)'
>
<span
class='wire-nav__icon {leaf.icon}'
class='wrn-nav__icon {leaf.icon}'
data-show="leaf.icon"
aria-hidden="true"
></span>
<span class="wire-nav__label">{leaf.label}</span>
<span class="wrn-nav__label">{leaf.label}</span>
</a>
</li>
{/each}
@@ -172,36 +172,36 @@ component Nav {
}
style {
.wire-nav {
--nav-accent: var(--wire-color-primary);
.wrn-nav {
--nav-accent: var(--wrn-color-primary);
max-width: 100%;
}
.wire-nav[data-color="secondary"] {
--nav-accent: var(--wire-color-secondary);
.wrn-nav[data-color="secondary"] {
--nav-accent: var(--wrn-color-secondary);
}
.wire-nav[data-color="success"] {
--nav-accent: var(--wire-color-success);
.wrn-nav[data-color="success"] {
--nav-accent: var(--wrn-color-success);
}
.wire-nav[data-color="danger"] {
--nav-accent: var(--wire-color-danger);
.wrn-nav[data-color="danger"] {
--nav-accent: var(--wrn-color-danger);
}
.wire-nav[data-color="info"] {
--nav-accent: var(--wire-color-info);
.wrn-nav[data-color="info"] {
--nav-accent: var(--wrn-color-info);
}
.wire-nav[data-size="sm"] {
.wrn-nav[data-size="sm"] {
font-size: 0.82rem;
}
.wire-nav[data-size="lg"] {
.wrn-nav[data-size="lg"] {
font-size: 1rem;
}
.wire-nav__list {
.wrn-nav__list {
display: flex;
align-items: center;
gap: 0.25rem;
@@ -210,48 +210,48 @@ component Nav {
list-style: none;
}
.wire-nav[data-orientation="vertical"] .wire-nav__list {
.wrn-nav[data-orientation="vertical"] .wrn-nav__list {
flex-direction: column;
align-items: stretch;
}
.wire-nav__item {
.wrn-nav__item {
position: relative;
}
.wire-nav__link {
.wrn-nav__link {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.7rem;
border-radius: var(--wire-radius-sm);
color: var(--wire-color-text-muted);
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-text-muted);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.wire-nav__link:hover {
background: var(--wire-color-surface-soft);
color: var(--wire-color-text);
.wrn-nav__link:hover {
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text);
}
.wire-nav__link:focus-visible {
.wrn-nav__link:focus-visible {
outline: 2px solid var(--nav-accent);
outline-offset: 2px;
}
.wire-nav__link[data-active="true"] {
.wrn-nav__link[data-active="true"] {
background: color-mix(in srgb, var(--nav-accent) 16%, transparent);
color: var(--nav-accent);
}
.wire-nav__link[aria-disabled="true"] {
.wrn-nav__link[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
.wire-nav__badge {
.wrn-nav__badge {
padding: 0.05rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--nav-accent) 16%, transparent);
@@ -259,17 +259,17 @@ component Nav {
font-size: 0.72rem;
}
.wire-nav__arrow {
.wrn-nav__arrow {
display: inline-block;
transition: transform 160ms ease;
}
.wire-nav__item:hover > .wire-nav__link > .wire-nav__arrow,
.wire-nav__item:focus-within > .wire-nav__link > .wire-nav__arrow {
.wrn-nav__item:hover > .wrn-nav__link > .wrn-nav__arrow,
.wrn-nav__item:focus-within > .wrn-nav__link > .wrn-nav__arrow {
transform: rotate(90deg);
}
.wire-nav__submenu {
.wrn-nav__submenu {
position: absolute;
z-index: 30;
top: 100%;
@@ -277,42 +277,42 @@ component Nav {
min-width: 12rem;
margin: 0;
padding: 0.35rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
list-style: none;
opacity: 0;
visibility: hidden;
transition: opacity 160ms ease;
}
.wire-nav__item:hover > .wire-nav__submenu,
.wire-nav__item:focus-within > .wire-nav__submenu {
.wrn-nav__item:hover > .wrn-nav__submenu,
.wrn-nav__item:focus-within > .wrn-nav__submenu {
opacity: 1;
visibility: visible;
}
.wire-nav__submenu--level3 {
.wrn-nav__submenu--level3 {
top: 0;
left: 100%;
}
.wire-nav__toggle {
.wrn-nav__toggle {
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.7rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface);
color: var(--wire-color-text);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.wire-nav__toggle-bar {
.wrn-nav__toggle-bar {
width: 1rem;
height: 2px;
background: currentColor;
@@ -327,21 +327,21 @@ component Nav {
* unreachable on touch.
*/
@media (max-width: 767px) {
.wire-nav__toggle {
.wrn-nav__toggle {
display: inline-flex;
}
.wire-nav__list {
.wrn-nav__list {
flex-direction: column;
align-items: stretch;
}
.wire-nav[data-expanded="false"] .wire-nav__list {
.wrn-nav[data-expanded="false"] .wrn-nav__list {
display: none;
}
.wire-nav__submenu,
.wire-nav__submenu--level3 {
.wrn-nav__submenu,
.wrn-nav__submenu--level3 {
position: static;
opacity: 1;
visibility: visible;