feat: complete SSR CRM and refine auth UI
This commit is contained in:
@@ -32,11 +32,14 @@ component StrongPassword {
|
||||
required: boolean = false
|
||||
invalid: boolean = false
|
||||
validationMessage: string = ""
|
||||
showLabel: string = "Show password"
|
||||
hideLabel: string = "Hide password"
|
||||
class: string = ""
|
||||
}
|
||||
|
||||
state password = value
|
||||
state detailsOpen: boolean = false
|
||||
state revealed: boolean = false
|
||||
|
||||
functions {
|
||||
shared function hasMinimumLength() {
|
||||
@@ -113,6 +116,12 @@ component StrongPassword {
|
||||
return emptyLabel
|
||||
}
|
||||
|
||||
shared function toggleVisibility() {
|
||||
if (!disabled && !readonly) {
|
||||
revealed = !revealed
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
view {
|
||||
@@ -124,10 +133,11 @@ component StrongPassword {
|
||||
>
|
||||
<label for="{name}-strong-password">{label}</label>
|
||||
<div class="wrn-next__strong-password-anchor">
|
||||
<span class="wrn-next__strong-password-leading-icon" aria-hidden="true"></span>
|
||||
<input
|
||||
{...attrs}
|
||||
id="{name}-strong-password"
|
||||
type="password"
|
||||
type="{revealed ? 'text' : 'password'}"
|
||||
name="{name}"
|
||||
value="{password}"
|
||||
placeholder="{placeholder}"
|
||||
@@ -143,6 +153,15 @@ component StrongPassword {
|
||||
@input="password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
|
||||
@change="output.change({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-next__strong-password-toggle"
|
||||
aria-label="{revealed ? hideLabel : showLabel}"
|
||||
title="{revealed ? hideLabel : showLabel}"
|
||||
aria-pressed="{revealed ? 'true' : 'false'}"
|
||||
disabled="{disabled || readonly}"
|
||||
@click="toggleVisibility()"
|
||||
><span aria-hidden="true"></span></button>
|
||||
|
||||
{#if presentation === "popover"}
|
||||
<div
|
||||
@@ -236,19 +255,72 @@ component StrongPassword {
|
||||
|
||||
.wrn-next--strong-password input {
|
||||
width: 100%;
|
||||
min-height: 2.65rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.75rem 3rem 0.75rem 2.75rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: var(--wrn-radius-sm);
|
||||
outline: 0;
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-surface);
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.wrn-next__strong-password-leading-icon,
|
||||
.wrn-next__strong-password-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.wrn-next__strong-password-leading-icon {
|
||||
left: 0.9rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--wrn-color-muted);
|
||||
background: currentColor;
|
||||
pointer-events: none;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
.wrn-next__strong-password-toggle {
|
||||
right: 0.45rem;
|
||||
display: grid;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: calc(var(--wrn-radius-sm) * 0.72);
|
||||
color: var(--wrn-color-muted);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wrn-next__strong-password-toggle:hover,
|
||||
.wrn-next__strong-password-toggle:focus-visible {
|
||||
color: var(--wrn-component-color);
|
||||
background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
|
||||
outline: 0;
|
||||
}
|
||||
.wrn-next__strong-password-toggle > span {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
background: currentColor;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
.wrn-next__strong-password-toggle[aria-pressed="true"]::after {
|
||||
position: absolute;
|
||||
width: 1.25rem;
|
||||
height: 0.12rem;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 0 1px var(--wrn-color-surface);
|
||||
}
|
||||
|
||||
.wrn-next--strong-password input:focus-visible {
|
||||
border-color: var(--wrn-component-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 16%, transparent);
|
||||
|
||||
@@ -107,6 +107,7 @@ component TogglePassword {
|
||||
{/if}
|
||||
</div>
|
||||
<div class="wrn-next__password-control">
|
||||
<span class="wrn-next__password-leading-icon" aria-hidden="true"></span>
|
||||
<input
|
||||
{...attrs}
|
||||
id="{name}-password"
|
||||
@@ -229,19 +230,32 @@ component TogglePassword {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.75em;
|
||||
padding: 0.65em 3em 0.65em 0.8em;
|
||||
min-height: 3rem;
|
||||
padding: 0.75rem 3rem 0.75rem 2.75rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: var(--wrn-radius-sm);
|
||||
outline: 0;
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-bg);
|
||||
background: var(--wrn-color-surface);
|
||||
font: inherit;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 0.875rem;
|
||||
transition:
|
||||
border-color var(--wrn-motion-base) var(--wrn-ease-standard),
|
||||
box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
|
||||
}
|
||||
|
||||
.wrn-next__password-leading-icon {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
z-index: 1;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--wrn-color-muted);
|
||||
background: currentColor;
|
||||
pointer-events: none;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
|
||||
.wrn-next__password-control > input:focus-visible {
|
||||
border-color: var(--wrn-component-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
|
||||
|
||||
@@ -36,6 +36,7 @@ label: string = "Button"
|
||||
view {
|
||||
<span
|
||||
class="wrn-action {fullWidth ? 'w-full' : ''} {class}"
|
||||
data-full-width="{fullWidth ? 'true' : 'false'}"
|
||||
>
|
||||
{#if as === "a" || (as === "" && href)}
|
||||
<a
|
||||
@@ -414,6 +415,11 @@ label: string = "Button"
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.wrn-action[data-full-width="true"],
|
||||
.wrn-action[data-full-width="true"] > .wrn-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrn-btn--pill {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.8.20",
|
||||
"version": "0.8.21",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -263,6 +263,18 @@ test("auth form uses package schemas, disables native validation, and renders a
|
||||
expect(html).toContain('fullWidth="true"');
|
||||
});
|
||||
|
||||
test("password controls provide matching lock and visibility affordances", () => {
|
||||
const toggle = readFileSync(uiComponentPath("TogglePassword"), "utf8");
|
||||
const strong = readFileSync(uiComponentPath("StrongPassword"), "utf8");
|
||||
const button = readFileSync(uiComponentPath("Button"), "utf8");
|
||||
|
||||
expect(toggle).toContain("wrn-next__password-leading-icon");
|
||||
expect(strong).toContain("wrn-next__strong-password-leading-icon");
|
||||
expect(strong).toContain("wrn-next__strong-password-toggle");
|
||||
expect(strong).toContain("type=\"{revealed ? 'text' : 'password'}\"");
|
||||
expect(button).toContain("data-full-width=\"{fullWidth ? 'true' : 'false'}\"");
|
||||
});
|
||||
|
||||
test("footer supports typed entries, responsive columns, pre/post slots, and events", () => {
|
||||
const source = readFileSync(uiComponentPath("Footer"), "utf8");
|
||||
expect(source).toMatch(/<slot\s+name="pre-footer"\s*>/);
|
||||
|
||||
Reference in New Issue
Block a user