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
.publish/ui/components/PinInput.wrn
+109 -43
View File
@@ -1,5 +1,3 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component PinInput {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -51,7 +49,7 @@ component PinInput {
view {
<fieldset
{...attrs}
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--pin-input {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--pin-input {invalid ? 'wrn-next--invalid' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
data-wrn-pin-input
data-length="{length}"
data-pattern="{pattern}"
@@ -61,11 +59,11 @@ component PinInput {
disabled="{disabled}"
aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
>
<div class="wire-next__pin-heading">
<div class="wrn-next__pin-heading">
<legend>{label}</legend>
<button
type="button"
class="wire-next__pin-clear"
class="wrn-next__pin-clear"
data-pin-clear
aria-label="{clearLabel}"
title="{clearLabel}"
@@ -76,7 +74,7 @@ component PinInput {
</button>
</div>
<div class="wire-next__pin-cells" role="group" aria-label="{label}">
<div class="wrn-next__pin-cells" role="group" aria-label="{label}">
{#each inputIndexes() as index}
<input
data-pin-cell
@@ -95,7 +93,7 @@ component PinInput {
autofocus="{autoFocus && index === 0}"
/>
{#if separator && groupSize !== 0 && (index + 1) % groupSize === 0 && index + 1 !== length}
<span class="wire-next__pin-separator" aria-hidden="true">{separator}</span>
<span class="wrn-next__pin-separator" aria-hidden="true">{separator}</span>
{/if}
{/each}
</div>
@@ -111,49 +109,48 @@ component PinInput {
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
<small
id="{name}-validation"
class="wire-next__validation"
class="wrn-next__validation"
data-error="{name}"
>{validationMessage}</small>
</fieldset>
<ComponentBaseStyles hidden />
}
style {
.wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input,
.wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input {
border-color: var(--wire-color-danger);
.wrn-next--pin-input.wrn-next--invalid .wrn-next__pin-cells input,
.wrn-next--pin-input:has(input.wrn-invalid) .wrn-next__pin-cells input {
border-color: var(--wrn-color-danger);
}
.wire-next--pin-input {
.wrn-next--pin-input {
display: grid;
width: 100%;
min-width: 0;
gap: 0.65rem;
padding: 0;
border: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
.wire-next__pin-heading {
.wrn-next__pin-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wire-next__pin-heading legend {
.wrn-next__pin-heading legend {
padding: 0;
font-size: 0.82em;
font-weight: 700;
}
.wire-next__pin-clear {
.wrn-next__pin-clear {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0;
border: 0;
color: var(--wire-component-color);
color: var(--wrn-component-color);
background: transparent;
font: inherit;
font-size: 0.7em;
@@ -161,12 +158,12 @@ component PinInput {
cursor: pointer;
}
.wire-next__pin-clear > span:first-child {
.wrn-next__pin-clear > span:first-child {
width: 0.9rem;
height: 0.9rem;
}
.wire-next__pin-cells {
.wrn-next__pin-cells {
display: flex;
max-width: 100%;
align-items: center;
@@ -176,66 +173,135 @@ component PinInput {
scrollbar-width: thin;
}
.wire-next--pin-input .wire-next__pin-cells input {
.wrn-next--pin-input .wrn-next__pin-cells input {
flex: 0 0 clamp(2.4rem, 8vw, 3.25rem);
width: clamp(2.4rem, 8vw, 3.25rem);
height: clamp(2.75rem, 9vw, 3.5rem);
min-width: clamp(2.4rem, 8vw, 3.25rem);
padding: 0;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
color: var(--wire-color-text);
background: var(--wire-color-bg);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
font: inherit;
font-size: clamp(1rem, 3vw, 1.25rem);
font-weight: 750;
text-align: center;
caret-color: var(--wire-component-color);
caret-color: var(--wrn-component-color);
transition:
border-color var(--wire-motion-base) var(--wire-ease-standard),
box-shadow var(--wire-motion-base) var(--wire-ease-standard),
transform var(--wire-motion-fast) var(--wire-ease-standard);
border-color var(--wrn-motion-base) var(--wrn-ease-standard),
box-shadow var(--wrn-motion-base) var(--wrn-ease-standard),
transform var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wire-next--pin-input .wire-next__pin-cells input::placeholder {
color: var(--wire-color-muted);
.wrn-next--pin-input .wrn-next__pin-cells input::placeholder {
color: var(--wrn-color-muted);
opacity: 0.45;
}
.wire-next--pin-input .wire-next__pin-cells input:focus-visible {
border-color: var(--wire-component-color);
.wrn-next--pin-input .wrn-next__pin-cells input:focus-visible {
border-color: var(--wrn-component-color);
outline: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
transform: translateY(-1px);
}
.wire-next--pin-input .wire-next__pin-cells input:disabled,
.wire-next--pin-input .wire-next__pin-cells input:read-only {
.wrn-next--pin-input .wrn-next__pin-cells input:disabled,
.wrn-next--pin-input .wrn-next__pin-cells input:read-only {
cursor: not-allowed;
opacity: 0.55;
}
.wire-next__pin-separator {
color: var(--wire-color-muted);
.wrn-next__pin-separator {
color: var(--wrn-color-muted);
font-size: 1.1rem;
font-weight: 800;
}
.wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input {
border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border));
background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg));
.wrn-next--pin-input[data-complete="true"] .wrn-next__pin-cells input {
border-color: color-mix(in srgb, var(--wrn-component-color) 72%, var(--wrn-color-border));
background: color-mix(in srgb, var(--wrn-component-color) 7%, var(--wrn-color-bg));
}
@media (max-width: 480px) {
.wire-next__pin-cells {
.wrn-next__pin-cells {
gap: 0.3rem;
}
.wire-next--pin-input .wire-next__pin-cells input {
.wrn-next--pin-input .wrn-next__pin-cells input {
flex-basis: min(2.7rem, 12vw);
width: min(2.7rem, 12vw);
min-width: min(2.7rem, 12vw);
height: min(3rem, 14vw);
}
}
/* Shared component foundation. */
.wrn-component {
--wrn-component-color: var(--wrn-color-primary);
--wrn-component-scale: 1;
margin: 0;
color: var(--wrn-color-text);
font-family: var(--wrn-font-sans, inherit);
}
.wrn-component--color-primary {
--wrn-component-color: var(--wrn-color-primary);
}
.wrn-component--color-secondary {
--wrn-component-color: var(--wrn-color-secondary);
}
.wrn-component--color-success {
--wrn-component-color: var(--wrn-color-success);
}
.wrn-component--color-warning {
--wrn-component-color: var(--wrn-color-warning);
}
.wrn-component--color-danger {
--wrn-component-color: var(--wrn-color-danger);
}
.wrn-component--color-info {
--wrn-component-color: var(--wrn-color-info);
}
.wrn-component--size-xs {
--wrn-component-scale: 0.78;
}
.wrn-component--size-sm {
--wrn-component-scale: 0.88;
}
.wrn-component--size-default,
.wrn-component--size-md {
--wrn-component-scale: 1;
}
.wrn-component--size-lg {
--wrn-component-scale: 1.14;
}
.wrn-component--size-xl {
--wrn-component-scale: 1.28;
}
.wrn-component:not(.wrn-btn) {
font-size: calc(1em * var(--wrn-component-scale));
}
.wrn-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wrn-component-color);
}
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
line-height: 1.6;
}
}
}