WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release: WRNexusJS 0.6.0

Browse Source
This commit is contained in:
Clintchiz
2026-08-01 01:09:58 +05:30
parent 3e565e8d03
commit 687d345882
502 changed files with 33038 additions and 11358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/TogglePassword.wrn
+41 -38
View File
@@ -1,49 +1,52 @@
component TogglePassword {
props {
size = "default"
color = "primary"
label = "Password"
name = "password"
value = ""
placeholder = "Enter your password"
autocomplete = "current-password"
minlength = ""
maxlength = ""
pattern = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"
fields = []
visible = false
toggleable = true
toggleMode = "button"
checkboxLabel = "Show password"
showLabel = "Show password"
hideLabel = "Hide password"
disabled = false
readonly = false
required = false
invalid = false
helpText = ""
validationMessage = ""
class = ""
@event input = function
@event change = function
@event toggle = function
outputs {
input(payload: { name?: string; value: string | number | boolean | null | object; visible: boolean })
change(payload: { name?: string; value: string | number | boolean | null | object; visible: boolean })
toggle(payload: { visible: boolean })
}
props {
size: string = "default"
color: string = "primary"
label: string = "Password"
name: string = "password"
value: string = ""
placeholder: string = "Enter your password"
autocomplete: string = "current-password"
minlength: string = ""
maxlength: string = ""
pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"
fields: unknown[] = []
visible: boolean = false
toggleable: boolean = true
toggleMode: string = "button"
checkboxLabel: string = "Show password"
showLabel: string = "Show password"
hideLabel: string = "Hide password"
disabled: boolean = false
readonly: boolean = false
required: boolean = false
invalid: boolean = false
helpText: string = ""
validationMessage: string = ""
class: string = ""
}
state revealed = visible
functions {
function toggleVisibility() {
shared function toggleVisibility() {
if (disabled || readonly || !toggleable) {
return
}
revealed = !revealed
}
function fieldId(field, index) {
shared function fieldId(field, index) {
return field.id || field.name || name + "-" + index
}
function fieldName(field, index) {
shared function fieldName(field, index) {
return field.name || name + "-" + index
}
}
@@ -74,8 +77,8 @@ component TogglePassword {
readonly="{readonly || field.readonly}"
required="{required || field.required}"
aria-invalid="{invalid ? 'true' : 'false'}"
@input="$emit('input', { name: event.target.name, value: event.target.value, visible: revealed })"
@change="$emit('change', { name: event.target.name, value: event.target.value, visible: revealed })"
@input="output.input({ name: event.target.name, value: event.target.value, visible: revealed })"
@change="output.change({ name: event.target.name, value: event.target.value, visible: revealed })"
/>
{#if toggleable && toggleMode === "button"}
<button
@@ -85,7 +88,7 @@ component TogglePassword {
title="{revealed ? hideLabel : showLabel}"
aria-pressed="{revealed ? 'true' : 'false'}"
disabled="{disabled || readonly}"
@click="toggleVisibility(); $emit('toggle', { visible: revealed })"
@click="toggleVisibility(); output.toggle({ visible: revealed })"
>
<span class="wire-next__password-icon wire-next__password-icon--show" aria-hidden="true"></span>
</button>
@@ -113,8 +116,8 @@ component TogglePassword {
required="{required}"
aria-invalid="{invalid ? 'true' : 'false'}"
aria-describedby="{validationMessage ? name + '-validation' : helpText ? name + '-help' : ''}"
@input="$emit('input', { value: event.target.value, visible: revealed })"
@change="$emit('change', { value: event.target.value, visible: revealed })"
@input="output.input({ value: event.target.value, visible: revealed })"
@change="output.change({ value: event.target.value, visible: revealed })"
/>
{#if toggleable && toggleMode === "button"}
<button
@@ -124,7 +127,7 @@ component TogglePassword {
title="{revealed ? hideLabel : showLabel}"
aria-pressed="{revealed ? 'true' : 'false'}"
disabled="{disabled || readonly}"
@click="toggleVisibility(); $emit('toggle', { visible: revealed })"
@click="toggleVisibility(); output.toggle({ visible: revealed })"
>
<span class="wire-next__password-icon wire-next__password-icon--show" aria-hidden="true"></span>
</button>
@@ -137,7 +140,7 @@ component TogglePassword {
type="checkbox"
checked="{revealed}"
disabled="{disabled || readonly}"
@change="revealed = event.target.checked; $emit('toggle', { visible: revealed })"
@change="revealed = event.target.checked; output.toggle({ visible: revealed })"
/>
<span>{checkboxLabel}</span>
</label>