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/Marquee.wrn
+39 -39
View File
@@ -21,44 +21,44 @@ component Marquee {
<section
data-ui-component="Marquee"
aria-label='{title}'
class='wire-marquee {class}'
class='wrn-marquee {class}'
>
<div class="wire-marquee__layout">
<div class="wrn-marquee__layout">
{#if title}
<div class="wire-marquee__title">
<span class="icon-[lucide--megaphone] wire-marquee__icon" aria-hidden="true"></span>
<div class="wrn-marquee__title">
<span class="icon-[lucide--megaphone] wrn-marquee__icon" aria-hidden="true"></span>
<span>{title}</span>
</div>
{/if}
<div
class="wire-marquee__window"
class="wrn-marquee__window"
@mouseenter='paused = true; output.pause({})'
@mouseleave='paused = false; output.resume({})'
@focusin='paused = true'
@focusout='paused = false'
>
<div
class="wire-marquee__track"
class:wire-marquee-paused='paused'
class="wrn-marquee__track"
class:wrn-marquee-paused='paused'
>
{#each items as item}
<a
href='{item.href || "#"}'
class="wire-marquee__item"
class="wrn-marquee__item"
>
<span
class="wire-marquee__dot"
class="wrn-marquee__dot"
data-color='{item.color || "primary"}'
aria-hidden="true"
></span>
<span>{item.label || item.title}</span>
{#if item.meta}
<span class="wire-marquee__meta">{item.meta}</span>
<span class="wrn-marquee__meta">{item.meta}</span>
{/if}
</a>
{:empty}
<p class="wire-marquee__empty">{description || "No announcements available."}</p>
<p class="wrn-marquee__empty">{description || "No announcements available."}</p>
{/each}
{#if items.length > 0}
@@ -67,9 +67,9 @@ component Marquee {
href='{item.href || "#"}'
aria-hidden="true"
tabindex="-1"
class="wire-marquee__item"
class="wrn-marquee__item"
>
<span class="wire-marquee__dot" aria-hidden="true"></span>
<span class="wrn-marquee__dot" aria-hidden="true"></span>
<span>{item.label || item.title}</span>
</a>
{/each}
@@ -80,11 +80,11 @@ component Marquee {
<button
type="button"
aria-label='{paused ? "Resume announcements" : "Pause announcements"}'
class="wire-marquee__toggle"
class="wrn-marquee__toggle"
@click='paused = !paused; paused ? output.pause({}) : output.resume({})'
>
<span class="icon-[lucide--pause] wire-marquee__icon" data-show='!paused' aria-hidden="true"></span>
<span class="icon-[lucide--play] wire-marquee__icon" data-show='paused' aria-hidden="true"></span>
<span class="icon-[lucide--pause] wrn-marquee__icon" data-show='!paused' aria-hidden="true"></span>
<span class="icon-[lucide--play] wrn-marquee__icon" data-show='paused' aria-hidden="true"></span>
</button>
</div>
@@ -93,40 +93,40 @@ component Marquee {
}
style {
.wire-marquee { overflow: hidden; border-block: 1px solid var(--wire-color-border); background: var(--wire-color-surface-raised); }
.wire-marquee__layout { display: flex; align-items: stretch; }
.wire-marquee__title { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-right: 1px solid var(--wire-color-border); color: var(--wire-color-on-primary); background: var(--wire-color-primary); font-size: 0.875rem; font-weight: 700; }
.wire-marquee__window { position: relative; min-width: 0; flex: 1; overflow: hidden; }
.wire-marquee__track {
.wrn-marquee { overflow: hidden; border-block: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface-raised); }
.wrn-marquee__layout { display: flex; align-items: stretch; }
.wrn-marquee__title { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-right: 1px solid var(--wrn-color-border); color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 700; }
.wrn-marquee__window { position: relative; min-width: 0; flex: 1; overflow: hidden; }
.wrn-marquee__track {
display: flex; width: max-content; min-width: 100%; align-items: center;
animation: wire-marquee 32s linear infinite;
animation: wrn-marquee 32s linear infinite;
}
.wire-marquee-paused { animation-play-state: paused; }
.wire-marquee__item { display: flex; flex: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; color: var(--wire-color-text); font-size: 0.875rem; font-weight: 500; transition: color var(--wire-motion-base), background var(--wire-motion-base); }
.wire-marquee__item:hover { color: var(--wire-color-primary); background: var(--wire-color-primary-soft); }
.wire-marquee__item:focus-visible, .wire-marquee__toggle:focus-visible { outline: 2px solid var(--wire-color-focus); outline-offset: -2px; }
.wire-marquee__dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--wire-color-primary); }
.wire-marquee__dot[data-color="danger"] { background: var(--wire-color-danger); }
.wire-marquee__dot[data-color="warning"] { background: var(--wire-color-warning); }
.wire-marquee__dot[data-color="success"] { background: var(--wire-color-success); }
.wire-marquee__meta { color: var(--wire-color-text-muted); font-size: 0.75rem; }
.wire-marquee__empty { padding: 0.75rem 1.25rem; color: var(--wire-color-text-muted); font-size: 0.875rem; }
.wire-marquee__toggle { display: flex; flex: none; align-items: center; justify-content: center; padding-inline: 1rem; border: 0; border-left: 1px solid var(--wire-color-border); color: var(--wire-color-text-muted); background: transparent; transition: color var(--wire-motion-base), background var(--wire-motion-base); }
.wire-marquee__toggle:hover { color: var(--wire-color-text); background: var(--wire-color-surface-soft); }
.wire-marquee__icon { width: 1rem; height: 1rem; }
@media (min-width: 40rem) { .wire-marquee__title { padding-inline: 1.25rem; } }
.wrn-marquee-paused { animation-play-state: paused; }
.wrn-marquee__item { display: flex; flex: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 500; transition: color var(--wrn-motion-base), background var(--wrn-motion-base); }
.wrn-marquee__item:hover { color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); }
.wrn-marquee__item:focus-visible, .wrn-marquee__toggle:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -2px; }
.wrn-marquee__dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--wrn-color-primary); }
.wrn-marquee__dot[data-color="danger"] { background: var(--wrn-color-danger); }
.wrn-marquee__dot[data-color="warning"] { background: var(--wrn-color-warning); }
.wrn-marquee__dot[data-color="success"] { background: var(--wrn-color-success); }
.wrn-marquee__meta { color: var(--wrn-color-text-muted); font-size: 0.75rem; }
.wrn-marquee__empty { padding: 0.75rem 1.25rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
.wrn-marquee__toggle { display: flex; flex: none; align-items: center; justify-content: center; padding-inline: 1rem; border: 0; border-left: 1px solid var(--wrn-color-border); color: var(--wrn-color-text-muted); background: transparent; transition: color var(--wrn-motion-base), background var(--wrn-motion-base); }
.wrn-marquee__toggle:hover { color: var(--wrn-color-text); background: var(--wrn-color-surface-soft); }
.wrn-marquee__icon { width: 1rem; height: 1rem; }
@media (min-width: 40rem) { .wrn-marquee__title { padding-inline: 1.25rem; } }
.wire-marquee-paused {
.wrn-marquee-paused {
animation-play-state: paused;
}
@keyframes wire-marquee {
@keyframes wrn-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.wire-marquee__track {
.wrn-marquee__track {
animation: none;
}
}