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
.publish/ui/components/Sidebar.wrn
+61 -61
View File
@@ -88,29 +88,29 @@ component Sidebar {
<div
{...attrs}
data-ui-component="Sidebar"
class='wire-sidebar {class}'
class='wrn-sidebar {class}'
data-color='{color}'
data-size='{size}'
>
<button
type="button"
class="wire-sidebar__launcher"
class="wrn-sidebar__launcher"
aria-label='{mobileLabel}'
aria-expanded='{drawerOpen}'
@click='openDrawer(event)'
>
<span class="wire-sidebar__launcher-bar" aria-hidden="true"></span>
<span class="wire-sidebar__launcher-text">{mobileLabel}</span>
<span class="wrn-sidebar__launcher-bar" aria-hidden="true"></span>
<span class="wrn-sidebar__launcher-text">{mobileLabel}</span>
</button>
<nav class="wire-sidebar__rail" aria-label='{label}'>
<ul class="wire-sidebar__list" data-wrn-roving="vertical">
<nav class="wrn-sidebar__rail" aria-label='{label}'>
<ul class="wrn-sidebar__list" data-wrn-roving="vertical">
{#each entryList() as entry}
<li class="wire-sidebar__entry" data-group='{isGroup(entry)}'>
<p class="wire-sidebar__heading" data-show="entry.heading">{entry.heading}</p>
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}'>
<p class="wrn-sidebar__heading" data-show="entry.heading">{entry.heading}</p>
<a
class="wire-sidebar__link"
class="wrn-sidebar__link"
data-show="!entry.heading"
href='{entry.href || "#"}'
data-wrn-roving-item="true"
@@ -120,19 +120,19 @@ component Sidebar {
@click='choose(entry, 1)'
>
<span
class='wire-sidebar__icon {entry.icon}'
class='wrn-sidebar__icon {entry.icon}'
data-show="entry.icon"
aria-hidden="true"
></span>
<span class="wire-sidebar__label">{entry.label}</span>
<span class="wire-sidebar__badge" data-show="entry.badge">{entry.badge}</span>
<span class="wrn-sidebar__label">{entry.label}</span>
<span class="wrn-sidebar__badge" data-show="entry.badge">{entry.badge}</span>
</a>
<ul class="wire-sidebar__sublist" data-show="childrenOf(entry).length > 0">
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0">
{#each childrenOf(entry) as child}
<li class="wire-sidebar__entry">
<li class="wrn-sidebar__entry">
<a
class="wire-sidebar__link"
class="wrn-sidebar__link"
href='{child.href || "#"}'
data-active='{isActive(child)}'
aria-current='{isActive(child) ? "page" : "false"}'
@@ -140,28 +140,28 @@ component Sidebar {
@click='choose(child, 2)'
>
<span
class='wire-sidebar__icon {child.icon}'
class='wrn-sidebar__icon {child.icon}'
data-show="child.icon"
aria-hidden="true"
></span>
<span class="wire-sidebar__label">{child.label}</span>
<span class="wire-sidebar__badge" data-show="child.badge">{child.badge}</span>
<span class="wrn-sidebar__label">{child.label}</span>
<span class="wrn-sidebar__badge" data-show="child.badge">{child.badge}</span>
</a>
<ul
class="wire-sidebar__sublist wire-sidebar__sublist--level3"
class="wrn-sidebar__sublist wrn-sidebar__sublist--level3"
data-show="childrenOf(child).length > 0"
>
{#each childrenOf(child) as leaf}
<li class="wire-sidebar__entry">
<li class="wrn-sidebar__entry">
<a
class="wire-sidebar__link"
class="wrn-sidebar__link"
href='{leaf.href || "#"}'
data-active='{isActive(leaf)}'
aria-current='{isActive(leaf) ? "page" : "false"}'
@click='choose(leaf, 3)'
>
<span class="wire-sidebar__label">{leaf.label}</span>
<span class="wrn-sidebar__label">{leaf.label}</span>
</a>
</li>
{/each}
@@ -188,41 +188,41 @@ component Sidebar {
}
style {
.wire-sidebar {
--sidebar-accent: var(--wire-color-primary);
.wrn-sidebar {
--sidebar-accent: var(--wrn-color-primary);
max-width: 100%;
}
.wire-sidebar[data-color="secondary"] {
--sidebar-accent: var(--wire-color-secondary);
.wrn-sidebar[data-color="secondary"] {
--sidebar-accent: var(--wrn-color-secondary);
}
.wire-sidebar[data-color="success"] {
--sidebar-accent: var(--wire-color-success);
.wrn-sidebar[data-color="success"] {
--sidebar-accent: var(--wrn-color-success);
}
.wire-sidebar[data-color="danger"] {
--sidebar-accent: var(--wire-color-danger);
.wrn-sidebar[data-color="danger"] {
--sidebar-accent: var(--wrn-color-danger);
}
.wire-sidebar[data-color="info"] {
--sidebar-accent: var(--wire-color-info);
.wrn-sidebar[data-color="info"] {
--sidebar-accent: var(--wrn-color-info);
}
.wire-sidebar[data-size="sm"] {
.wrn-sidebar[data-size="sm"] {
font-size: 0.82rem;
}
.wire-sidebar[data-size="lg"] {
.wrn-sidebar[data-size="lg"] {
font-size: 1rem;
}
.wire-sidebar__rail {
.wrn-sidebar__rail {
width: 100%;
}
.wire-sidebar__list,
.wire-sidebar__sublist {
.wrn-sidebar__list,
.wrn-sidebar__sublist {
display: grid;
gap: 0.1rem;
margin: 0;
@@ -230,62 +230,62 @@ component Sidebar {
list-style: none;
}
.wire-sidebar__sublist {
.wrn-sidebar__sublist {
margin-left: 0.85rem;
padding-left: 0.5rem;
border-left: 1px solid var(--wire-color-border);
border-left: 1px solid var(--wrn-color-border);
}
.wire-sidebar__entry[data-group="true"] + .wire-sidebar__entry {
.wrn-sidebar__entry[data-group="true"] + .wrn-sidebar__entry {
margin-top: 0.35rem;
}
.wire-sidebar__heading {
.wrn-sidebar__heading {
margin: 0.9rem 0 0.35rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wire-sidebar__link {
.wrn-sidebar__link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
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.88rem;
font-weight: 600;
text-decoration: none;
}
.wire-sidebar__link:hover {
background: var(--wire-color-surface-soft);
color: var(--wire-color-text);
.wrn-sidebar__link:hover {
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text);
}
.wire-sidebar__link:focus-visible {
.wrn-sidebar__link:focus-visible {
outline: 2px solid var(--sidebar-accent);
outline-offset: 2px;
}
.wire-sidebar__link[data-active="true"] {
.wrn-sidebar__link[data-active="true"] {
background: color-mix(in srgb, var(--sidebar-accent) 16%, transparent);
color: var(--sidebar-accent);
}
.wire-sidebar__link[aria-disabled="true"] {
.wrn-sidebar__link[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
.wire-sidebar__label {
.wrn-sidebar__label {
min-width: 0;
}
.wire-sidebar__badge {
.wrn-sidebar__badge {
margin-left: auto;
padding: 0.05rem 0.4rem;
border-radius: 999px;
@@ -294,21 +294,21 @@ component Sidebar {
font-size: 0.72rem;
}
.wire-sidebar__launcher {
.wrn-sidebar__launcher {
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-sidebar__launcher-bar {
.wrn-sidebar__launcher-bar {
width: 1rem;
height: 2px;
background: currentColor;
@@ -323,11 +323,11 @@ component Sidebar {
* the focus trap and the scroll lock.
*/
@media (max-width: 767px) {
.wire-sidebar__launcher {
.wrn-sidebar__launcher {
display: inline-flex;
}
.wire-sidebar__rail {
.wrn-sidebar__rail {
display: none;
}
}