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/Dropdown.wrn
+109 -109
View File
@@ -82,7 +82,7 @@ items: unknown[] = []
}
client function moveFocus(sourceEvent, direction) {
const root = sourceEvent.currentTarget.closest(".wire-dropdown") || sourceEvent.currentTarget
const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
if (!options.length) {
return
@@ -110,14 +110,14 @@ items: unknown[] = []
moveFocus(sourceEvent, -1)
} else if (sourceEvent.key === "Home" && isOpen()) {
sourceEvent.preventDefault()
const root = sourceEvent.currentTarget.closest(".wire-dropdown") || sourceEvent.currentTarget
const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
const first = root.querySelector("[data-dropdown-item]:not([disabled])")
if (first) {
first.focus()
}
} else if (sourceEvent.key === "End" && isOpen()) {
sourceEvent.preventDefault()
const root = sourceEvent.currentTarget.closest(".wire-dropdown") || sourceEvent.currentTarget
const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
if (options.length) {
options[options.length - 1].focus()
@@ -136,12 +136,12 @@ items: unknown[] = []
data-size='{size}'
data-color='{color}'
data-variant='{variant}'
class='wire-dropdown {class}'
class='wrn-dropdown {class}'
@keydown='handleKeydown(event)'
>
<button
type="button"
class="wire-dropdown__trigger"
class="wrn-dropdown__trigger"
disabled='{disabled}'
aria-haspopup="menu"
aria-expanded='{open || visible ? "true" : "false"}'
@@ -149,20 +149,20 @@ items: unknown[] = []
>
<slot name="trigger"></slot>
{#if icon}
<span class='wire-dropdown__trigger-icon {icon}' aria-hidden="true"></span>
<span class='wrn-dropdown__trigger-icon {icon}' aria-hidden="true"></span>
{/if}
{#if label}
<span class="wire-dropdown__trigger-label">{label}</span>
<span class="wrn-dropdown__trigger-label">{label}</span>
{/if}
{#if showChevron}
<span class="icon-[lucide--chevron-down] wire-dropdown__chevron" aria-hidden="true"></span>
<span class="icon-[lucide--chevron-down] wrn-dropdown__chevron" aria-hidden="true"></span>
{/if}
</button>
{#if closeOnOutside}
<button
type="button"
class="wire-dropdown__dismiss-layer"
class="wrn-dropdown__dismiss-layer"
data-show='{open || visible}'
aria-label="Close menu"
@click='hideMenu("outside", event)'
@@ -170,7 +170,7 @@ items: unknown[] = []
{/if}
<div
class="wire-dropdown__panel"
class="wrn-dropdown__panel"
data-wrn-anchored="true"
data-show='{open || visible}'
role="menu"
@@ -178,12 +178,12 @@ items: unknown[] = []
>
<slot name="header"></slot>
<div class="wire-dropdown__items">
<div class="wrn-dropdown__items">
{#each items as item, itemIndex}
{#if item.type === "divider"}
<div class="wire-dropdown__divider" role="separator"></div>
<div class="wrn-dropdown__divider" role="separator"></div>
{:else if item.type === "header"}
<div class="wire-dropdown__section-label">{item.label || item.title}</div>
<div class="wrn-dropdown__section-label">{item.label || item.title}</div>
{:else if item.href}
<a
href='{item.href}'
@@ -194,26 +194,26 @@ items: unknown[] = []
data-danger='{item.danger ? "true" : "false"}'
data-selected='{item.selected || item.checked ? "true" : "false"}'
aria-disabled='{item.disabled ? "true" : "false"}'
class="wire-dropdown__item"
class="wrn-dropdown__item"
@click='chooseItem(item, itemIndex, event)'
>
{#if item.icon}
<span class='wire-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
{/if}
<span class="wire-dropdown__copy">
<span class="wrn-dropdown__copy">
<strong>{item.label || item.title}</strong>
{#if item.description}
<small>{item.description}</small>
{/if}
</span>
{#if item.badge}
<span class="wire-dropdown__badge">{item.badge}</span>
<span class="wrn-dropdown__badge">{item.badge}</span>
{:else if item.shortcut}
<kbd>{item.shortcut}</kbd>
{:else if item.checked || item.selected}
<span class="icon-[lucide--check] wire-dropdown__status" aria-hidden="true"></span>
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
{:else if item.external}
<span class="icon-[lucide--arrow-up-right] wire-dropdown__status" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-up-right] wrn-dropdown__status" aria-hidden="true"></span>
{/if}
</a>
{:else}
@@ -224,29 +224,29 @@ items: unknown[] = []
data-danger='{item.danger ? "true" : "false"}'
data-selected='{item.selected || item.checked ? "true" : "false"}'
disabled='{item.disabled}'
class="wire-dropdown__item"
class="wrn-dropdown__item"
@click='chooseItem(item, itemIndex, event)'
>
{#if item.icon}
<span class='wire-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
{/if}
<span class="wire-dropdown__copy">
<span class="wrn-dropdown__copy">
<strong>{item.label || item.title}</strong>
{#if item.description}
<small>{item.description}</small>
{/if}
</span>
{#if item.badge}
<span class="wire-dropdown__badge">{item.badge}</span>
<span class="wrn-dropdown__badge">{item.badge}</span>
{:else if item.shortcut}
<kbd>{item.shortcut}</kbd>
{:else if item.checked || item.selected}
<span class="icon-[lucide--check] wire-dropdown__status" aria-hidden="true"></span>
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
{/if}
</button>
{/if}
{:empty}
<div class="wire-dropdown__empty">{emptyLabel}</div>
<div class="wrn-dropdown__empty">{emptyLabel}</div>
{/each}
</div>
@@ -257,40 +257,40 @@ items: unknown[] = []
}
style {
.wire-dropdown {
--dropdown-accent: var(--wire-color-primary);
--dropdown-soft: var(--wire-color-primary-soft);
.wrn-dropdown {
--dropdown-accent: var(--wrn-color-primary);
--dropdown-soft: var(--wrn-color-primary-soft);
position: relative;
display: inline-flex;
min-width: 0;
}
.wire-dropdown[data-color="secondary"] {
--dropdown-accent: var(--wire-color-secondary);
--dropdown-soft: var(--wire-color-secondary-soft);
.wrn-dropdown[data-color="secondary"] {
--dropdown-accent: var(--wrn-color-secondary);
--dropdown-soft: var(--wrn-color-secondary-soft);
}
.wire-dropdown[data-color="info"] {
--dropdown-accent: var(--wire-color-info);
--dropdown-soft: var(--wire-color-info-soft);
.wrn-dropdown[data-color="info"] {
--dropdown-accent: var(--wrn-color-info);
--dropdown-soft: var(--wrn-color-info-soft);
}
.wire-dropdown[data-color="success"] {
--dropdown-accent: var(--wire-color-success);
--dropdown-soft: var(--wire-color-success-soft);
.wrn-dropdown[data-color="success"] {
--dropdown-accent: var(--wrn-color-success);
--dropdown-soft: var(--wrn-color-success-soft);
}
.wire-dropdown[data-color="warning"] {
--dropdown-accent: var(--wire-color-warning);
--dropdown-soft: var(--wire-color-warning-soft);
.wrn-dropdown[data-color="warning"] {
--dropdown-accent: var(--wrn-color-warning);
--dropdown-soft: var(--wrn-color-warning-soft);
}
.wire-dropdown[data-color="danger"] {
--dropdown-accent: var(--wire-color-danger);
--dropdown-soft: var(--wire-color-danger-soft);
.wrn-dropdown[data-color="danger"] {
--dropdown-accent: var(--wrn-color-danger);
--dropdown-soft: var(--wrn-color-danger-soft);
}
.wire-dropdown__trigger {
.wrn-dropdown__trigger {
appearance: none;
display: inline-flex;
align-items: center;
@@ -298,9 +298,9 @@ items: unknown[] = []
gap: 0.55rem;
min-height: 2.55rem;
padding: 0.65rem 0.9rem;
color: var(--wire-color-text);
background: var(--wire-color-surface-raised);
border: 1px solid var(--wire-color-border);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 0.78rem;
font: inherit;
font-size: 0.84rem;
@@ -309,47 +309,47 @@ items: unknown[] = []
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.wire-dropdown__trigger:hover,
.wire-dropdown__trigger:focus-visible,
.wire-dropdown[data-open="true"] .wire-dropdown__trigger {
.wrn-dropdown__trigger:hover,
.wrn-dropdown__trigger:focus-visible,
.wrn-dropdown[data-open="true"] .wrn-dropdown__trigger {
color: var(--dropdown-accent);
background: var(--dropdown-soft);
border-color: color-mix(in srgb, var(--dropdown-accent) 38%, var(--wire-color-border));
border-color: color-mix(in srgb, var(--dropdown-accent) 38%, var(--wrn-color-border));
outline: none;
}
.wire-dropdown__trigger:disabled {
.wrn-dropdown__trigger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wire-dropdown__trigger-icon,
.wire-dropdown__chevron {
.wrn-dropdown__trigger-icon,
.wrn-dropdown__chevron {
width: 1rem;
height: 1rem;
}
.wire-dropdown__chevron {
.wrn-dropdown__chevron {
transition: transform 160ms ease;
}
.wire-dropdown[data-open="true"] .wire-dropdown__chevron {
.wrn-dropdown[data-open="true"] .wrn-dropdown__chevron {
transform: rotate(180deg);
}
.wire-dropdown[data-size="sm"] .wire-dropdown__trigger {
.wrn-dropdown[data-size="sm"] .wrn-dropdown__trigger {
min-height: 2.2rem;
padding: 0.5rem 0.72rem;
font-size: 0.78rem;
}
.wire-dropdown[data-size="lg"] .wire-dropdown__trigger {
.wrn-dropdown[data-size="lg"] .wrn-dropdown__trigger {
min-height: 2.9rem;
padding: 0.78rem 1.05rem;
font-size: 0.9rem;
}
.wire-dropdown__dismiss-layer {
.wrn-dropdown__dismiss-layer {
position: fixed;
inset: 0;
z-index: 1100;
@@ -359,7 +359,7 @@ items: unknown[] = []
border: 0;
}
.wire-dropdown__panel {
.wrn-dropdown__panel {
position: absolute;
z-index: 1101;
top: calc(100% + 0.55rem);
@@ -368,11 +368,11 @@ items: unknown[] = []
min-width: 12rem;
max-width: min(22rem, calc(100vw - 1.5rem));
padding: 0.45rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
background:
linear-gradient(145deg, color-mix(in srgb, var(--dropdown-accent) 5%, transparent), transparent 60%),
color-mix(in srgb, var(--wire-color-surface-raised) 97%, transparent);
border: 1px solid color-mix(in srgb, var(--dropdown-accent) 18%, var(--wire-color-border));
color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
border: 1px solid color-mix(in srgb, var(--dropdown-accent) 18%, var(--wrn-color-border));
border-radius: 1rem;
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
@@ -380,73 +380,73 @@ items: unknown[] = []
backdrop-filter: blur(18px);
}
.wire-dropdown[data-width="trigger"] .wire-dropdown__panel {
.wrn-dropdown[data-width="trigger"] .wrn-dropdown__panel {
width: 100%;
min-width: 100%;
}
.wire-dropdown[data-width="sm"] .wire-dropdown__panel {
.wrn-dropdown[data-width="sm"] .wrn-dropdown__panel {
width: 12rem;
}
.wire-dropdown[data-width="md"] .wire-dropdown__panel {
.wrn-dropdown[data-width="md"] .wrn-dropdown__panel {
width: 17rem;
}
.wire-dropdown[data-width="lg"] .wire-dropdown__panel {
.wrn-dropdown[data-width="lg"] .wrn-dropdown__panel {
width: 22rem;
}
.wire-dropdown[data-placement="bottom-end"] .wire-dropdown__panel {
.wrn-dropdown[data-placement="bottom-end"] .wrn-dropdown__panel {
right: 0;
left: auto;
}
.wire-dropdown[data-placement="top-start"] .wire-dropdown__panel {
.wrn-dropdown[data-placement="top-start"] .wrn-dropdown__panel {
top: auto;
bottom: calc(100% + 0.55rem);
}
.wire-dropdown[data-placement="top-end"] .wire-dropdown__panel {
.wrn-dropdown[data-placement="top-end"] .wrn-dropdown__panel {
top: auto;
right: 0;
bottom: calc(100% + 0.55rem);
left: auto;
}
.wire-dropdown[data-variant="soft"] .wire-dropdown__panel {
.wrn-dropdown[data-variant="soft"] .wrn-dropdown__panel {
background:
linear-gradient(145deg, var(--dropdown-soft), transparent 70%),
var(--wire-color-surface-raised);
var(--wrn-color-surface-raised);
box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
}
.wire-dropdown[data-variant="outline"] .wire-dropdown__panel {
background: var(--wire-color-surface-raised);
.wrn-dropdown[data-variant="outline"] .wrn-dropdown__panel {
background: var(--wrn-color-surface-raised);
box-shadow: none;
}
.wire-dropdown__items {
.wrn-dropdown__items {
display: grid;
gap: 0.15rem;
}
.wire-dropdown__section-label {
.wrn-dropdown__section-label {
padding: 0.55rem 0.72rem 0.3rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.wire-dropdown__divider {
.wrn-dropdown__divider {
height: 1px;
margin: 0.3rem 0.4rem;
background: var(--wire-color-border);
background: var(--wrn-color-border);
}
.wire-dropdown__item {
.wrn-dropdown__item {
appearance: none;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
@@ -455,7 +455,7 @@ items: unknown[] = []
width: 100%;
min-width: 0;
padding: 0.68rem 0.72rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
background: transparent;
border: 0;
border-radius: 0.72rem;
@@ -466,46 +466,46 @@ items: unknown[] = []
transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.wire-dropdown__item:hover,
.wire-dropdown__item:focus-visible,
.wire-dropdown__item[data-selected="true"] {
.wrn-dropdown__item:hover,
.wrn-dropdown__item:focus-visible,
.wrn-dropdown__item[data-selected="true"] {
color: var(--dropdown-accent);
background: var(--dropdown-soft);
outline: none;
}
.wire-dropdown__item:active {
.wrn-dropdown__item:active {
transform: scale(0.985);
}
.wire-dropdown__item[data-danger="true"] {
color: var(--wire-color-danger);
.wrn-dropdown__item[data-danger="true"] {
color: var(--wrn-color-danger);
}
.wire-dropdown__item[data-danger="true"]:hover,
.wire-dropdown__item[data-danger="true"]:focus-visible {
background: var(--wire-color-danger-soft);
.wrn-dropdown__item[data-danger="true"]:hover,
.wrn-dropdown__item[data-danger="true"]:focus-visible {
background: var(--wrn-color-danger-soft);
}
.wire-dropdown__item[disabled],
.wire-dropdown__item[aria-disabled="true"] {
.wrn-dropdown__item[disabled],
.wrn-dropdown__item[aria-disabled="true"] {
opacity: 0.48;
pointer-events: none;
}
.wire-dropdown__item-icon,
.wire-dropdown__status {
.wrn-dropdown__item-icon,
.wrn-dropdown__status {
width: 1rem;
height: 1rem;
}
.wire-dropdown__copy {
.wrn-dropdown__copy {
display: grid;
gap: 0.12rem;
min-width: 0;
}
.wire-dropdown__copy strong {
.wrn-dropdown__copy strong {
overflow: hidden;
font-size: 0.82rem;
font-weight: 600;
@@ -514,16 +514,16 @@ items: unknown[] = []
white-space: nowrap;
}
.wire-dropdown__copy small {
.wrn-dropdown__copy small {
overflow: hidden;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.7rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.wire-dropdown__badge {
.wrn-dropdown__badge {
padding: 0.18rem 0.45rem;
color: var(--dropdown-accent);
background: var(--dropdown-soft);
@@ -532,25 +532,25 @@ items: unknown[] = []
font-weight: 700;
}
.wire-dropdown kbd {
.wrn-dropdown kbd {
padding: 0.16rem 0.38rem;
color: var(--wire-color-text-muted);
background: var(--wire-color-surface-soft);
border: 1px solid var(--wire-color-border);
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
border: 1px solid var(--wrn-color-border);
border-radius: 0.36rem;
font-size: 0.64rem;
font-family: inherit;
}
.wire-dropdown__empty {
.wrn-dropdown__empty {
padding: 1rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
text-align: center;
}
@media (max-width: 639px) {
.wire-dropdown__panel {
.wrn-dropdown__panel {
position: fixed;
right: 0.75rem;
bottom: 0.75rem;
@@ -563,9 +563,9 @@ items: unknown[] = []
}
@media (prefers-reduced-motion: reduce) {
.wire-dropdown__trigger,
.wire-dropdown__chevron,
.wire-dropdown__item {
.wrn-dropdown__trigger,
.wrn-dropdown__chevron,
.wrn-dropdown__item {
transition: none;
}
}