kopia lustrzana https://github.com/shoelace-style/shoelace
use @watch and reorder handlers
rodzic
af61f45ecb
commit
a28942f264
|
@ -64,14 +64,6 @@ export default class SlCheckbox extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (changedProps.get('disabled')) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
/** Simulates a click on the checkbox. */
|
||||
click() {
|
||||
this.input.click();
|
||||
|
@ -108,6 +100,15 @@ export default class SlCheckbox extends LitElement {
|
|||
this.slBlur.emit();
|
||||
}
|
||||
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (this.input) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.hasFocus = true;
|
||||
this.slFocus.emit();
|
||||
|
|
|
@ -156,14 +156,6 @@ export default class SlInput extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (changedProps.get('disabled')) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
|
||||
|
@ -220,28 +212,14 @@ export default class SlInput extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
this.value = this.input.value;
|
||||
this.slChange.emit();
|
||||
}
|
||||
|
||||
handleInput() {
|
||||
this.value = this.input.value;
|
||||
this.slInput.emit();
|
||||
}
|
||||
|
||||
handleInvalid() {
|
||||
this.invalid = true;
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.hasFocus = true;
|
||||
this.slFocus.emit();
|
||||
handleChange() {
|
||||
this.value = this.input.value;
|
||||
this.slChange.emit();
|
||||
}
|
||||
|
||||
handleClearClick(event: MouseEvent) {
|
||||
|
@ -254,6 +232,29 @@ export default class SlInput extends LitElement {
|
|||
event.stopPropagation();
|
||||
}
|
||||
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (this.input) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.hasFocus = true;
|
||||
this.slFocus.emit();
|
||||
}
|
||||
|
||||
handleInput() {
|
||||
this.value = this.input.value;
|
||||
this.slInput.emit();
|
||||
}
|
||||
|
||||
handleInvalid() {
|
||||
this.invalid = true;
|
||||
}
|
||||
|
||||
handlePasswordToggle() {
|
||||
this.isPasswordVisible = !this.isPasswordVisible;
|
||||
}
|
||||
|
|
|
@ -56,14 +56,6 @@ export default class SlRadio extends LitElement {
|
|||
/** Emitted when the control gains focus. */
|
||||
@event('sl-focus') slFocus: EventEmitter<void>;
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (changedProps.get('disabled')) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
/** Simulates a click on the radio. */
|
||||
click() {
|
||||
this.input.click();
|
||||
|
@ -105,6 +97,11 @@ export default class SlRadio extends LitElement {
|
|||
return this.getAllRadios().filter(radio => radio !== this) as this[];
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
}
|
||||
|
||||
@watch('checked', { waitUntilFirstUpdate: true })
|
||||
handleCheckedChange() {
|
||||
if (this.checked) {
|
||||
|
@ -117,9 +114,13 @@ export default class SlRadio extends LitElement {
|
|||
this.checked = true;
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (this.input) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
|
|
|
@ -100,14 +100,6 @@ export default class SlRange extends LitElement {
|
|||
});
|
||||
}
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (changedProps.get('disabled')) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.resizeObserver.unobserve(this.input);
|
||||
|
@ -143,6 +135,15 @@ export default class SlRange extends LitElement {
|
|||
this.slBlur.emit();
|
||||
}
|
||||
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (this.input) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.hasFocus = true;
|
||||
this.hasTooltip = true;
|
||||
|
|
|
@ -137,14 +137,6 @@ export default class SlSelect extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (changedProps.get('disabled')) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.resizeObserver.unobserve(this);
|
||||
|
@ -195,6 +187,19 @@ export default class SlSelect extends LitElement {
|
|||
this.syncItemsFromValue();
|
||||
}
|
||||
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
if (this.disabled && this.isOpen) {
|
||||
this.dropdown.hide();
|
||||
}
|
||||
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (this.input) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
if (!this.hasFocus) {
|
||||
this.hasFocus = true;
|
||||
|
@ -282,13 +287,6 @@ export default class SlSelect extends LitElement {
|
|||
this.box.focus();
|
||||
}
|
||||
|
||||
@watch('disabled')
|
||||
async handleDisabledChange() {
|
||||
if (this.disabled && this.isOpen) {
|
||||
this.dropdown.hide();
|
||||
}
|
||||
}
|
||||
|
||||
@watch('multiple')
|
||||
handleMultipleChange() {
|
||||
// Cast to array | string based on `this.multiple`
|
||||
|
|
|
@ -64,14 +64,6 @@ export default class SlSwitch extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (changedProps.get('disabled')) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
/** Simulates a click on the switch. */
|
||||
click() {
|
||||
this.input.click();
|
||||
|
@ -98,13 +90,31 @@ export default class SlSwitch extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
}
|
||||
|
||||
@watch('checked')
|
||||
handleCheckedChange() {
|
||||
if (this.input) {
|
||||
this.input.checked = this.checked;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
this.slChange.emit();
|
||||
}
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.checked = !this.checked;
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (this.input) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
|
@ -130,15 +140,6 @@ export default class SlSwitch extends LitElement {
|
|||
this.input.focus();
|
||||
}
|
||||
|
||||
@watch('checked')
|
||||
handleCheckedChange() {
|
||||
if (this.input) {
|
||||
this.input.checked = this.checked;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
this.slChange.emit();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<label
|
||||
|
|
|
@ -144,14 +144,6 @@ export default class SlTextarea extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
updated(changedProps: Map<string, any>) {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (changedProps.get('disabled')) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.resizeObserver.unobserve(this.input);
|
||||
|
@ -229,27 +221,36 @@ export default class SlTextarea extends LitElement {
|
|||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
this.value = this.input.value;
|
||||
this.slChange.emit();
|
||||
}
|
||||
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
// Disabled form controls are always valid, so we need to recheck validity when the state changes
|
||||
if (this.input) {
|
||||
this.input.disabled = this.disabled;
|
||||
this.invalid = !this.input.checkValidity();
|
||||
}
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.hasFocus = true;
|
||||
this.slFocus.emit();
|
||||
}
|
||||
|
||||
handleInput() {
|
||||
this.value = this.input.value;
|
||||
this.setTextareaHeight();
|
||||
this.slInput.emit();
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.hasFocus = true;
|
||||
this.slFocus.emit();
|
||||
}
|
||||
|
||||
@watch('rows')
|
||||
handleRowsChange() {
|
||||
this.setTextareaHeight();
|
||||
|
|
Ładowanie…
Reference in New Issue