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

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/switch.wrn
+8 -8
View File
@@ -18,7 +18,7 @@ component Switch {
icon: string = ""
iconPosition: string = "start"
value: string = "on"
checked: boolean = false
checked: boolean | null = null
helperText: string = ""
cornerHint: string = ""
error: string = ""
@@ -28,16 +28,16 @@ component Switch {
required: boolean = false
class: string = ""
}
state currentChecked = checked
state currentChecked = !!checked
functions {
client function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); currentChecked = sourceEvent.currentTarget.checked; output[nameEvent]({ checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent }) }
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
client function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); if (checked === null || checked === undefined) { currentChecked = sourceEvent.currentTarget.checked } output[nameEvent]({ checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent }) }
client function preventReadonly(sourceEvent) { if (readonly) { sourceEvent.preventDefault() } }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--choice-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wrn-next__field-heading">{#if cornerHint}<span class="{hiddenLabel ? 'wrn-next__sr-only' : ''}">{label}</span><span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<label class="wrn-next__choice wrn-next--switch" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="checkbox" role="switch" name="{name}" value="{value}" checked="{currentChecked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{currentChecked ? '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)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
<div data-wrn-owner="Switch" data-wrn-part="root" data-wrn-component="Switch" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--choice-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div data-wrn-owner="Switch" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-heading">{#if cornerHint}<span class="{hiddenLabel ? 'wrn-next__sr-only' : ''}">{label}</span><span data-wrn-owner="Switch" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<label class="wrn-next__choice wrn-next--switch" data-variant="{variant}" data-icon-position="{iconPosition}"><input data-wrn-owner="Switch" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" id="{id || name}" type="checkbox" role="switch" name="{name}" value="{value}" checked="{checked === null || checked === undefined ? currentChecked : checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{(checked === null || checked === undefined ? currentChecked : 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)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
{#if helperText}<small data-wrn-owner="Switch" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-help">{helperText}</small>{/if}<small data-wrn-owner="Switch" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-error" data-error="{name}">{error}</small>
</div>
}