kopia lustrzana https://github.com/shoelace-style/shoelace
add getForm() method; closes #1180
rodzic
8a1efac9b8
commit
218e78e947
|
@ -10,6 +10,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
|||
|
||||
- Added TypeScript types to all custom events [#1183](https://github.com/shoelace-style/shoelace/pull/1183)
|
||||
- Added the `svg` part to `<sl-icon>`
|
||||
- Added the `getForm()` method to all form controls [#1180](https://github.com/shoelace-style/shoelace/issues/1180)
|
||||
- Fixed a bug in `<sl-select>` that caused the display label to render incorrectly in Chrome after form validation [#1197](https://github.com/shoelace-style/shoelace/discussions/1197)
|
||||
- Fixed a bug in `<sl-input>` that prevented users from applying their own value for `autocapitalize`, `autocomplete`, and `autocorrect` when using `type="password` [#1205](https://github.com/shoelace-style/shoelace/issues/1205)
|
||||
- Fixed a bug in `<sl-tab-group>` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208)
|
||||
|
|
|
@ -257,6 +257,11 @@ export default class SlButton extends ShoelaceElement implements ShoelaceFormCon
|
|||
return true;
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
if (this.isButton()) {
|
||||
|
|
|
@ -158,6 +158,11 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
|
|||
return this.input.checkValidity();
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
return this.input.reportValidity();
|
||||
|
|
|
@ -764,6 +764,11 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
|
|||
return this.input.checkValidity();
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
if (!this.inline && !this.validity.valid) {
|
||||
|
|
|
@ -377,6 +377,11 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
|
|||
return this.input.checkValidity();
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
return this.input.reportValidity();
|
||||
|
|
|
@ -252,12 +252,9 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
|
|||
return true;
|
||||
}
|
||||
|
||||
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
||||
setCustomValidity(message = '') {
|
||||
this.customValidityMessage = message;
|
||||
this.errorMessage = message;
|
||||
this.validationInput.setCustomValidity(message);
|
||||
this.formControlController.updateValidity();
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
|
@ -279,6 +276,14 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
|
|||
return isValid;
|
||||
}
|
||||
|
||||
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
||||
setCustomValidity(message = '') {
|
||||
this.customValidityMessage = message;
|
||||
this.errorMessage = message;
|
||||
this.validationInput.setCustomValidity(message);
|
||||
this.formControlController.updateValidity();
|
||||
}
|
||||
|
||||
render() {
|
||||
const hasLabelSlot = this.hasSlotController.test('label');
|
||||
const hasHelpTextSlot = this.hasSlotController.test('help-text');
|
||||
|
|
|
@ -254,6 +254,11 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
|
|||
return this.input.checkValidity();
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
return this.input.reportValidity();
|
||||
|
|
|
@ -639,6 +639,11 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
|||
return this.valueInput.checkValidity();
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
return this.valueInput.reportValidity();
|
||||
|
|
|
@ -163,6 +163,11 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
|
|||
return this.input.checkValidity();
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
return this.input.reportValidity();
|
||||
|
|
|
@ -281,6 +281,11 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
|
|||
return this.input.checkValidity();
|
||||
}
|
||||
|
||||
/** Gets the associated form, if one exists. */
|
||||
getForm(): HTMLFormElement | null {
|
||||
return this.formControlController.getForm();
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity() {
|
||||
return this.input.reportValidity();
|
||||
|
|
|
@ -95,7 +95,7 @@ export default class ShoelaceElement extends LitElement {
|
|||
}
|
||||
|
||||
export interface ShoelaceFormControl extends ShoelaceElement {
|
||||
// Standard form attributes
|
||||
// Form attributes
|
||||
name: string;
|
||||
value: unknown;
|
||||
disabled?: boolean;
|
||||
|
@ -103,7 +103,7 @@ export interface ShoelaceFormControl extends ShoelaceElement {
|
|||
defaultChecked?: boolean;
|
||||
form?: string;
|
||||
|
||||
// Standard validation attributes
|
||||
// Constraint validation attributes
|
||||
pattern?: string;
|
||||
min?: number | Date;
|
||||
max?: number | Date;
|
||||
|
@ -112,13 +112,13 @@ export interface ShoelaceFormControl extends ShoelaceElement {
|
|||
minlength?: number;
|
||||
maxlength?: number;
|
||||
|
||||
// Validation properties
|
||||
// Form validation properties
|
||||
readonly validity: ValidityState;
|
||||
readonly validationMessage: string;
|
||||
|
||||
// Validation methods
|
||||
// Form validation methods
|
||||
checkValidity: () => boolean;
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
getForm: () => HTMLFormElement | null;
|
||||
reportValidity: () => boolean;
|
||||
setCustomValidity: (message: string) => void;
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue