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/SearchBox.wrn
+39 -39
View File
@@ -26,19 +26,19 @@ component SearchBox {
<form
data-ui-component="SearchBox"
role="search"
class='wire-search-box {class}'
class='wrn-search-box {class}'
@submit='event.preventDefault(); output.search({ value: query, name: name })'
>
<label
class="wire-search-box__label"
class="wrn-search-box__label"
data-hidden='{label === "" ? "true" : "false"}'
>
{label}
</label>
<div class="wire-search-box__control">
<div class="wrn-search-box__control">
<span
class="icon-[lucide--search] wire-search-box__search-icon"
class="icon-[lucide--search] wrn-search-box__search-icon"
aria-hidden="true"
></span>
@@ -53,7 +53,7 @@ component SearchBox {
disabled='{disabled}'
required='{required}'
autocomplete="off"
class="wire-search-box__input"
class="wrn-search-box__input"
data-size='{size}'
@input='query = event.target.value'
@change='query = event.target.value'
@@ -63,34 +63,34 @@ component SearchBox {
type="button"
aria-label="Clear search"
data-show='query.length > 0 && !disabled'
class="wire-search-box__button wire-search-box__clear"
class="wrn-search-box__button wrn-search-box__clear"
@click='query = ""; event.currentTarget.parentElement.querySelector("input")?.focus(); output.clear({ value: "", name: name })'
>
<span class="icon-[lucide--x] wire-search-box__button-icon" aria-hidden="true"></span>
<span class="icon-[lucide--x] wrn-search-box__button-icon" aria-hidden="true"></span>
</button>
<button
type="submit"
aria-label='{label || "Search"}'
disabled='{disabled}'
class="wire-search-box__button wire-search-box__submit"
class="wrn-search-box__button wrn-search-box__submit"
>
<span class="icon-[lucide--arrow-right] wire-search-box__button-icon" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-right] wrn-search-box__button-icon" aria-hidden="true"></span>
</button>
</div>
</form>
}
style {
.wire-search-box { width: 100%; }
.wire-search-box__label {
.wrn-search-box { width: 100%; }
.wrn-search-box__label {
display: block;
margin-bottom: 0.5rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-size: 0.875rem;
font-weight: 600;
}
.wire-search-box__label[data-hidden="true"] {
.wrn-search-box__label[data-hidden="true"] {
position: absolute;
width: 1px;
height: 1px;
@@ -101,50 +101,50 @@ component SearchBox {
white-space: nowrap;
border: 0;
}
.wire-search-box__control { position: relative; display: flex; align-items: center; }
.wire-search-box__search-icon {
.wrn-search-box__control { position: relative; display: flex; align-items: center; }
.wrn-search-box__search-icon {
position: absolute;
left: 1rem;
width: 1.25rem;
height: 1.25rem;
color: var(--wire-color-input-placeholder);
color: var(--wrn-color-input-placeholder);
pointer-events: none;
}
.wire-search-box__input {
.wrn-search-box__input {
width: 100%;
height: 3rem;
padding: 0 6rem 0 3rem;
border: 1px solid var(--wire-color-input-border);
border-radius: var(--wire-radius);
border: 1px solid var(--wrn-color-input-border);
border-radius: var(--wrn-radius);
outline: none;
color: var(--wire-color-input-text);
background: var(--wire-color-input-background);
transition: border-color var(--wire-motion-base) var(--wire-ease-standard), box-shadow var(--wire-motion-base) var(--wire-ease-standard);
color: var(--wrn-color-input-text);
background: var(--wrn-color-input-background);
transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
}
.wire-search-box__input[data-size="sm"] { height: 2.5rem; }
.wire-search-box__input[data-size="lg"] { height: 3.5rem; }
.wire-search-box__input::placeholder { color: var(--wire-color-input-placeholder); }
.wire-search-box__input:hover { border-color: var(--wire-color-input-border-hover); }
.wire-search-box__input:focus {
border-color: var(--wire-color-input-border-focus);
box-shadow: 0 0 0 2px var(--wire-color-focus);
.wrn-search-box__input[data-size="sm"] { height: 2.5rem; }
.wrn-search-box__input[data-size="lg"] { height: 3.5rem; }
.wrn-search-box__input::placeholder { color: var(--wrn-color-input-placeholder); }
.wrn-search-box__input:hover { border-color: var(--wrn-color-input-border-hover); }
.wrn-search-box__input:focus {
border-color: var(--wrn-color-input-border-focus);
box-shadow: 0 0 0 2px var(--wrn-color-focus);
}
.wire-search-box__input:disabled, .wire-search-box__button:disabled { cursor: not-allowed; opacity: 0.6; }
.wire-search-box__button {
.wrn-search-box__input:disabled, .wrn-search-box__button:disabled { cursor: not-allowed; opacity: 0.6; }
.wrn-search-box__button {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: var(--wire-radius-sm);
transition: color var(--wire-motion-base), background var(--wire-motion-base);
border-radius: var(--wrn-radius-sm);
transition: color var(--wrn-motion-base), background var(--wrn-motion-base);
}
.wire-search-box__clear { right: 3rem; width: 2rem; height: 2rem; color: var(--wire-color-text-muted); background: transparent; }
.wire-search-box__clear:hover { color: var(--wire-color-text); background: var(--wire-color-surface-soft); }
.wire-search-box__submit { right: 0.5rem; width: 2.25rem; height: 2.25rem; color: var(--wire-color-on-primary); background: var(--wire-color-primary); }
.wire-search-box__submit:hover { background: var(--wire-color-primary-hover); }
.wire-search-box__button:focus-visible { outline: 2px solid var(--wire-color-focus); outline-offset: 2px; }
.wire-search-box__button-icon { width: 1rem; height: 1rem; }
.wrn-search-box__clear { right: 3rem; width: 2rem; height: 2rem; color: var(--wrn-color-text-muted); background: transparent; }
.wrn-search-box__clear:hover { color: var(--wrn-color-text); background: var(--wrn-color-surface-soft); }
.wrn-search-box__submit { right: 0.5rem; width: 2.25rem; height: 2.25rem; color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); }
.wrn-search-box__submit:hover { background: var(--wrn-color-primary-hover); }
.wrn-search-box__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: 2px; }
.wrn-search-box__button-icon { width: 1rem; height: 1rem; }
}
}