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

release: WRNexusJS 0.5.10

Browse Source
This commit is contained in:
Clintchiz
2026-07-30 13:36:29 +05:30
parent 8fc6f15402
commit d1b0c55b53
159 changed files with 7509 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.publish/ui/components/checkbox.wrn
+123 -12
View File
@@ -38,25 +38,136 @@ component Checkbox {
function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-orientation="{orientation}" data-card="{card}" data-list="{list}" data-right-aligned="{rightAligned}">
<div class="wire-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
<div
{...attrs}
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}"
data-inline="{inline}"
data-invalid="{error ? 'true' : 'false'}"
data-orientation="{orientation}"
data-card="{card}"
data-list="{list}"
data-right-aligned="{rightAligned}"
>
<div
class="wire-next__field-heading"
>
{#if options.length || cornerHint}
<span
class="{hiddenLabel ? 'wire-next__sr-only' : ''}"
>
{label}
</span>
{#if cornerHint}
<span
class="wire-next__field-hint"
>
{cornerHint}
</span>
{/if}
{/if}
</div>
{#if options.length}
<div class="wire-next__checkbox-group" role="group" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
<div
class="wire-next__checkbox-group"
role="group"
aria-label="{hiddenLabel ? label : ''}"
aria-invalid="{error ? 'true' : 'false'}"
>
{#each options as option}
<label class="wire-next__choice wire-next--checkbox" for="{id || name}-{option.value}" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
<input id="{id || name}-{option.value}" type="checkbox" name="{name}" value="{option.value}" checked="{values.includes(option.value) || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
<span class="wire-next__choice-copy"><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
<label
class="wire-next__choice wire-next--checkbox"
for="{id || name}-{option.value}"
data-variant="{variant}"
data-disabled="{disabled || option.disabled}"
>
<input
id="{id || name}-{option.value}"
type="checkbox"
name="{name}"
value="{option.value}"
checked="{values.includes(option.value) || option.checked}"
disabled="{disabled || option.disabled}"
required="{required}"
readonly="{readonly}"
@click="preventReadonly(event)"
@input="emitField('input', event)"
@change="emitField('change', event)"
@focus="emitField('focus', event)"
@blur="emitField('blur', event)"
@invalid="emitField('invalid', event)"
/>
<span
class="wire-next__choice-copy"
>
<strong>{option.label}</strong>
{#if option.description}
<small>{option.description}</small>
{/if}
</span>
</label>
{/each}
</div>
{:else}
<label class="wire-next__choice wire-next--checkbox" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}">
<input id="{id || name}" type="checkbox" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}
<span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span>
</label>
<div
class="wire-next__checkbox-content"
>
<label
class="wire-next__choice wire-next--checkbox"
for="{id || name}"
data-variant="{variant}"
data-icon-position="{iconPosition}"
>
<input
id="{id || name}"
type="checkbox"
name="{name}"
value="{value}"
checked="{checked}"
disabled="{disabled}"
required="{required}"
readonly="{readonly}"
aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}"
aria-invalid="{error ? 'true' : 'false'}"
@click="preventReadonly(event)"
@input="emitField('input', event)"
@change="emitField('change', event)"
@focus="emitField('focus', event)"
@blur="emitField('blur', event)"
@invalid="emitField('invalid', event)"
/>
{#if icon}
<span
class="{icon}"
aria-hidden="true"
>
</span>
{/if}
<span
class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}"
>
{label}
</span>
<div
class="wire-next__checkbox-slot"
>
<slot></slot>
</div>
</label>
</div>
{/if}
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
{#if helperText}
<small
class="wire-next__field-help"
>
{helperText}
</small>
{/if}
<small
class="wire-next__field-error"
data-error="{name}"
>
{error}
</small>
</div>
}
}