kopia lustrzana https://github.com/shoelace-style/shoelace
fix event docs
rodzic
92a73f21eb
commit
f5bcd03c3f
|
|
@ -20,6 +20,8 @@ const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button'];
|
|||
* @slot - The default slot where radio controls are placed.
|
||||
* @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the label prop.
|
||||
*
|
||||
* @event sl-change - Emitted when the radio group's selected value changes.
|
||||
*
|
||||
* @csspart base - The component's internal wrapper.
|
||||
* @csspart label - The radio group's label.
|
||||
* @csspart button-group - The button group that wraps radio buttons.
|
||||
|
|
@ -81,7 +83,7 @@ export default class SlRadioGroup extends LitElement {
|
|||
get validity(): ValidityState {
|
||||
const hasMissingData = !((this.value && this.required) || !this.required);
|
||||
const hasCustomError = this.customErrorMessage !== '';
|
||||
|
||||
|
||||
return {
|
||||
badInput: false,
|
||||
customError: hasCustomError,
|
||||
|
|
@ -99,7 +101,7 @@ export default class SlRadioGroup extends LitElement {
|
|||
|
||||
reportValidity() {
|
||||
const validity = this.validity;
|
||||
|
||||
|
||||
this.errorMessage = this.customErrorMessage || validity.valid ? '' : this.input.validationMessage;
|
||||
this.isInvalid = !validity.valid;
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import type { CSSResultGroup } from 'lit';
|
|||
* @slot - The radio's label.
|
||||
*
|
||||
* @event sl-blur - Emitted when the control loses focus.
|
||||
* @event sl-change - Emitted when the control's checked state changes.
|
||||
* @event sl-focus - Emitted when the control gains focus.
|
||||
*
|
||||
* @csspart base - The component's internal wrapper.
|
||||
|
|
@ -27,9 +26,8 @@ export default class SlRadio extends LitElement {
|
|||
|
||||
@query('.radio__input') input: HTMLInputElement;
|
||||
|
||||
@state() protected hasFocus = false;
|
||||
|
||||
@state() checked = false;
|
||||
@state() protected hasFocus = false;
|
||||
|
||||
/** The radio's name attribute. */
|
||||
@property({ reflect: true }) name: string;
|
||||
|
|
@ -74,9 +72,9 @@ export default class SlRadio extends LitElement {
|
|||
}
|
||||
|
||||
private addEventListeners() {
|
||||
this.addEventListener('blur', () => this.handleBlur())
|
||||
this.addEventListener('click', () => this.handleClick())
|
||||
this.addEventListener('focus', () => this.handleFocus())
|
||||
this.addEventListener('blur', () => this.handleBlur());
|
||||
this.addEventListener('click', () => this.handleClick());
|
||||
this.addEventListener('focus', () => this.handleFocus());
|
||||
}
|
||||
|
||||
private setInitialAttributes() {
|
||||
|
|
@ -109,7 +107,7 @@ export default class SlRadio extends LitElement {
|
|||
<span part="label" class="radio__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</label>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue