WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 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/MegaMenu.wrn
+66 -66
View File
@@ -80,7 +80,7 @@ component MegaMenu {
<div
{...attrs}
data-ui-component="MegaMenu"
class='wire-mega {class}'
class='wrn-mega {class}'
data-color='{color}'
data-size='{size}'
data-open='{visible}'
@@ -89,46 +89,46 @@ component MegaMenu {
>
<button
type="button"
class="wire-mega__trigger"
class="wrn-mega__trigger"
aria-haspopup="true"
aria-expanded='{visible}'
@click='togglePanel(event)'
@mouseenter='showPanel(event)'
@focus='showPanel(event)'
>
<span class='wire-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true"></span>
<span class="wire-mega__trigger-label">{label}</span>
<span class="wire-mega__arrow" aria-hidden="true">&#8250;</span>
<span class='wrn-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true"></span>
<span class="wrn-mega__trigger-label">{label}</span>
<span class="wrn-mega__arrow" aria-hidden="true">&#8250;</span>
</button>
<div
class="wire-mega__panel"
class="wrn-mega__panel"
data-wrn-anchored="true"
data-show="visible"
data-wrn-roving="both"
>
<div class="wire-mega__columns">
<div class="wrn-mega__columns">
{#each columnList() as column}
<section class="wire-mega__column">
<h3 class="wire-mega__heading" data-show="column.heading">{column.heading}</h3>
<ul class="wire-mega__list">
<section class="wrn-mega__column">
<h3 class="wrn-mega__heading" data-show="column.heading">{column.heading}</h3>
<ul class="wrn-mega__list">
{#each itemsOf(column) as item}
<li>
<a
class="wire-mega__link"
class="wrn-mega__link"
href='{item.href || "#"}'
data-wrn-roving-item="true"
aria-disabled='{item.disabled ? "true" : "false"}'
@click='choose(item)'
>
<span
class='wire-mega__link-icon {item.icon}'
class='wrn-mega__link-icon {item.icon}'
data-show="item.icon"
aria-hidden="true"
></span>
<span class="wire-mega__link-body">
<span class="wire-mega__link-label">{item.label}</span>
<span class="wire-mega__link-description" data-show="item.description">
<span class="wrn-mega__link-body">
<span class="wrn-mega__link-label">{item.label}</span>
<span class="wrn-mega__link-description" data-show="item.description">
{item.description}
</span>
</span>
@@ -140,77 +140,77 @@ component MegaMenu {
{/each}
</div>
<p class="wire-mega__footer" data-show="footer">{footer}</p>
<p class="wrn-mega__footer" data-show="footer">{footer}</p>
<slot />
</div>
</div>
}
style {
.wire-mega {
--mega-accent: var(--wire-color-primary);
.wrn-mega {
--mega-accent: var(--wrn-color-primary);
position: relative;
display: inline-block;
max-width: 100%;
}
.wire-mega[data-color="secondary"] {
--mega-accent: var(--wire-color-secondary);
.wrn-mega[data-color="secondary"] {
--mega-accent: var(--wrn-color-secondary);
}
.wire-mega[data-color="success"] {
--mega-accent: var(--wire-color-success);
.wrn-mega[data-color="success"] {
--mega-accent: var(--wrn-color-success);
}
.wire-mega[data-color="danger"] {
--mega-accent: var(--wire-color-danger);
.wrn-mega[data-color="danger"] {
--mega-accent: var(--wrn-color-danger);
}
.wire-mega[data-color="info"] {
--mega-accent: var(--wire-color-info);
.wrn-mega[data-color="info"] {
--mega-accent: var(--wrn-color-info);
}
.wire-mega[data-size="sm"] {
.wrn-mega[data-size="sm"] {
font-size: 0.82rem;
}
.wire-mega[data-size="lg"] {
.wrn-mega[data-size="lg"] {
font-size: 1rem;
}
.wire-mega__trigger {
.wrn-mega__trigger {
appearance: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.7rem;
border: 1px solid transparent;
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.9rem;
font-weight: 600;
cursor: pointer;
}
.wire-mega__trigger:hover,
.wire-mega[data-open="true"] .wire-mega__trigger {
background: var(--wire-color-surface-soft);
color: var(--wire-color-text);
.wrn-mega__trigger:hover,
.wrn-mega[data-open="true"] .wrn-mega__trigger {
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text);
}
.wire-mega__trigger:focus-visible {
.wrn-mega__trigger:focus-visible {
outline: 2px solid var(--mega-accent);
outline-offset: 2px;
}
.wire-mega__arrow {
.wrn-mega__arrow {
display: inline-block;
transition: transform 160ms ease;
}
.wire-mega[data-open="true"] .wire-mega__arrow {
.wrn-mega[data-open="true"] .wrn-mega__arrow {
transform: rotate(90deg);
}
@@ -220,7 +220,7 @@ component MegaMenu {
* element, so crossing it fired mouseleave on the root. The bridge below
* covers the gap with a descendant, so the pointer never actually leaves.
*/
.wire-mega__panel::before {
.wrn-mega__panel::before {
content: "";
position: absolute;
left: 0;
@@ -229,7 +229,7 @@ component MegaMenu {
height: 0.6rem;
}
.wire-mega__panel {
.wrn-mega__panel {
position: absolute;
z-index: 40;
top: calc(100% + 0.4rem);
@@ -237,32 +237,32 @@ component MegaMenu {
width: max-content;
max-width: min(60rem, calc(100vw - 2rem));
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-lg);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wire-mega__columns {
.wrn-mega__columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 1.25rem;
}
.wire-mega__column {
.wrn-mega__column {
min-width: 0;
}
.wire-mega__heading {
.wrn-mega__heading {
margin: 0 0 0.5rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wire-mega__list {
.wrn-mega__list {
display: grid;
gap: 0.15rem;
margin: 0;
@@ -270,52 +270,52 @@ component MegaMenu {
list-style: none;
}
.wire-mega__link {
.wrn-mega__link {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.45rem 0.5rem;
border-radius: var(--wire-radius-sm);
color: var(--wire-color-text);
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-text);
text-decoration: none;
}
.wire-mega__link:hover {
background: var(--wire-color-surface-soft);
.wrn-mega__link:hover {
background: var(--wrn-color-surface-soft);
}
.wire-mega__link:focus-visible {
.wrn-mega__link:focus-visible {
outline: 2px solid var(--mega-accent);
outline-offset: 2px;
}
.wire-mega__link[aria-disabled="true"] {
.wrn-mega__link[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
.wire-mega__link-body {
.wrn-mega__link-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.wire-mega__link-label {
.wrn-mega__link-label {
font-size: 0.88rem;
font-weight: 600;
}
.wire-mega__link-description {
color: var(--wire-color-text-muted);
.wrn-mega__link-description {
color: var(--wrn-color-text-muted);
font-size: 0.78rem;
line-height: 1.5;
}
.wire-mega__footer {
.wrn-mega__footer {
margin: 1rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--wire-color-border);
color: var(--wire-color-text-muted);
border-top: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
}
@@ -325,18 +325,18 @@ component MegaMenu {
* a 60rem grid has nowhere to go on a 360px screen.
*/
@media (max-width: 767px) {
.wire-mega {
.wrn-mega {
display: block;
}
.wire-mega__panel {
.wrn-mega__panel {
position: static;
width: auto;
max-width: 100%;
box-shadow: none;
}
.wire-mega__columns {
.wrn-mega__columns {
grid-template-columns: 1fr;
}
}