Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implemented logic to perform form validation #1170

Merged
merged 1 commit into from
Sep 25, 2024
Merged

Implemented logic to perform form validation #1170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .hintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"extends": [
"development"
],
"hints": {
"axe/name-role-value": "off",
"no-inline-styles": "off"
}
}
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 14 additions & 5 deletions packages/stencil-library/custom-elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,15 @@
"tagName": "dnn-button",
"description": "",
"attributes": [
{
"name": "appearance",
"type": {
"text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\""
},
"description": "Defines the look of the button.",
"default": "'primary'",
"required": false
},
{
"name": "confirm",
"type": {
Expand Down Expand Up @@ -234,7 +243,7 @@
"type": {
"text": "\"button\" | \"reset\" | \"submit\""
},
"description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.",
"description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.\nWarning: This will be deprecated in the next version and replaced with a new 'type' property.",
"default": "'button'",
"required": false
},
Expand All @@ -261,7 +270,7 @@
"type": {
"text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\""
},
"description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
"description": "Optional button style,",
"default": "'primary'",
"required": false
}
Expand Down Expand Up @@ -1803,9 +1812,9 @@
"members": [
{
"kind": "method",
"name": "reportValidity",
"description": "Reports the element validity.",
"signature": "reportValidity(valid: boolean, message?: string) => Promise<void>"
"name": "checkValidity",
"description": "Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState",
"signature": "checkValidity() => Promise<ValidityState>"
}
],
"events": [
Expand Down
28 changes: 18 additions & 10 deletions packages/stencil-library/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ export namespace Components {
"value": string;
}
interface DnnButton {
/**
* Defines the look of the button.
*/
"appearance": 'primary' | 'danger' | 'secondary' | 'tertiary';
/**
* Optionally add a confirmation dialog before firing the action.
*/
Expand All @@ -104,7 +108,7 @@ export namespace Components {
*/
"disabled": boolean;
/**
* Optional button type, can be either submit, reset or button and defaults to button if not specified. Warning: DNN wraps the whole page in a form, only use this if you are handling form submission manually.
* Optional button type, can be either submit, reset or button and defaults to button if not specified. Warning: DNN wraps the whole page in a form, only use this if you are handling form submission manually. Warning: This will be deprecated in the next version and replaced with a new 'type' property.
*/
"formButtonType": 'submit' | 'reset' | 'button';
/**
Expand All @@ -116,7 +120,8 @@ export namespace Components {
*/
"size"?: 'small' | 'normal' | 'large';
/**
* Optional button style, can be either primary, secondary or tertiary or danger and defaults to primary if not specified
* Optional button style,
* @deprecated This property will be reused in the next version to represent the type of button like "submit" or "reset". Use the appearance property instead.
*/
"type": 'primary' | 'danger' | 'secondary' | 'tertiary';
}
Expand Down Expand Up @@ -566,6 +571,10 @@ export namespace Components {
"query": string;
}
interface DnnSelect {
/**
* Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
*/
"checkValidity": () => Promise<ValidityState>;
/**
* @deprecated This control has its own validatin reporting, will be removed in v0.25.0
*/
Expand All @@ -586,12 +595,6 @@ export namespace Components {
* The name for this input, if used in forms.
*/
"name": string;
/**
* Reports the element validity.
* @param valid - Whether the element is valid or not.
* @param message - The message to show when the element is invalid, optional if valid.
*/
"reportValidity": (valid: boolean, message?: string) => Promise<void>;
/**
* Defines whether the field requires having a value.
*/
Expand Down Expand Up @@ -1344,6 +1347,10 @@ declare namespace LocalJSX {
"value"?: string;
}
interface DnnButton {
/**
* Defines the look of the button.
*/
"appearance"?: 'primary' | 'danger' | 'secondary' | 'tertiary';
/**
* Optionally add a confirmation dialog before firing the action.
*/
Expand All @@ -1365,7 +1372,7 @@ declare namespace LocalJSX {
*/
"disabled"?: boolean;
/**
* Optional button type, can be either submit, reset or button and defaults to button if not specified. Warning: DNN wraps the whole page in a form, only use this if you are handling form submission manually.
* Optional button type, can be either submit, reset or button and defaults to button if not specified. Warning: DNN wraps the whole page in a form, only use this if you are handling form submission manually. Warning: This will be deprecated in the next version and replaced with a new 'type' property.
*/
"formButtonType"?: 'submit' | 'reset' | 'button';
/**
Expand All @@ -1385,7 +1392,8 @@ declare namespace LocalJSX {
*/
"size"?: 'small' | 'normal' | 'large';
/**
* Optional button style, can be either primary, secondary or tertiary or danger and defaults to primary if not specified
* Optional button style,
* @deprecated This property will be reused in the next version to represent the type of button like "submit" or "reset". Use the appearance property instead.
*/
"type"?: 'primary' | 'danger' | 'secondary' | 'tertiary';
}
Expand Down
53 changes: 42 additions & 11 deletions packages/stencil-library/src/components/dnn-button/dnn-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,21 @@ export class DnnButton {

/**
* Optional button style,
* can be either primary, secondary or tertiary or danger and defaults to primary if not specified
* @deprecated This property will be reused in the next version to represent the type of button like "submit" or "reset". Use the appearance property instead.
*/
@Prop() type: 'primary' | 'danger' | 'secondary' | 'tertiary' = 'primary';

/**
* Defines the look of the button.
*/
@Prop() appearance: 'primary' | 'danger' | 'secondary' | 'tertiary' = 'primary';

/**
* Optional button type,
* can be either submit, reset or button and defaults to button if not specified.
* Warning: DNN wraps the whole page in a form, only use this if you are handling
* form submission manually.
* Warning: This will be deprecated in the next version and replaced with a new 'type' property.
*/
@Prop() formButtonType: 'submit' | 'reset' | 'button' = 'button';

Expand Down Expand Up @@ -104,18 +110,44 @@ export class DnnButton {
if (this.confirm && !this.modalVisible){
this.modal.show();
this.modalVisible = true;
return;
}

if (this.formButtonType === 'submit')
{
var form = this.internals.form;
if (form){
var submitButton = document.createElement('button');
submitButton.type = 'submit';
submitButton.style.display = 'none';
form.appendChild(submitButton);
submitButton.click();
form.removeChild(submitButton);
var validity = form.checkValidity();
if (validity){
const submitButton = document.createElement('button');
submitButton.type = 'submit';
submitButton.style.display = 'none';
form.appendChild(submitButton);
submitButton.click();
form.removeChild(submitButton);
}
else
{
var formControls = form.elements;
for (let i = 0; i < formControls.length; i++){
var control = formControls[i] as HTMLFormElement;
try{
if ('checkValidity' in control && typeof control['checkValidity'] === 'function') {
control.checkValidity();
}
}
catch(e){
console.error(e, control);
}
}
var elementToScrollTo = form.querySelector(':invalid');
if (elementToScrollTo){
elementToScrollTo.scrollIntoView({behavior: 'smooth', block: 'center'});
if ('focus' in elementToScrollTo && typeof elementToScrollTo['focus'] === 'function') {
elementToScrollTo.focus();
}
}
}
}
}
if (this.formButtonType === 'reset')
Expand All @@ -134,7 +166,7 @@ export class DnnButton {

private getElementClasses(): string | { [className: string]: boolean; } {
const classes: string[] = [];
classes.push(this.type);
classes.push(this.appearance);
if (this.reversed){
classes.push('reversed');
}
Expand All @@ -147,7 +179,6 @@ export class DnnButton {
return classes.join(' ');
}


render() {
return (
<Host
Expand Down Expand Up @@ -175,8 +206,8 @@ export class DnnButton {
justifyContent: 'flex-end'
}
}>
<dnn-button type='primary' reversed style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>
<dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>
<dnn-button appearance='primary' reversed style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>
<dnn-button appearance='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>
</div>
</dnn-modal>
}
Expand Down
23 changes: 12 additions & 11 deletions packages/stencil-library/src/components/dnn-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,18 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------ |
| `confirm` | `confirm` | Optionally add a confirmation dialog before firing the action. | `boolean` | `false` |
| `confirmMessage` | `confirm-message` | The text of the confirmation message; | `string` | `"Are you sure ?"` |
| `confirmNoText` | `confirm-no-text` | The text of the no button for confirmation. | `string` | `"No"` |
| `confirmYesText` | `confirm-yes-text` | The text of the yes button for confirmation. | `string` | `"Yes"` |
| `disabled` | `disabled` | Disables the button | `boolean` | `false` |
| `formButtonType` | `form-button-type` | Optional button type, can be either submit, reset or button and defaults to button if not specified. Warning: DNN wraps the whole page in a form, only use this if you are handling form submission manually. | `"button" \| "reset" \| "submit"` | `'button'` |
| `reversed` | `reversed` | Optionally reverses the button style. | `boolean` | `false` |
| `size` | `size` | Optionally sets the button size, small normal or large, defaults to normal | `"large" \| "normal" \| "small"` | `'normal'` |
| `type` | `type` | Optional button style, can be either primary, secondary or tertiary or danger and defaults to primary if not specified | `"danger" \| "primary" \| "secondary" \| "tertiary"` | `'primary'` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------ |
| `appearance` | `appearance` | Defines the look of the button. | `"danger" \| "primary" \| "secondary" \| "tertiary"` | `'primary'` |
| `confirm` | `confirm` | Optionally add a confirmation dialog before firing the action. | `boolean` | `false` |
| `confirmMessage` | `confirm-message` | The text of the confirmation message; | `string` | `"Are you sure ?"` |
| `confirmNoText` | `confirm-no-text` | The text of the no button for confirmation. | `string` | `"No"` |
| `confirmYesText` | `confirm-yes-text` | The text of the yes button for confirmation. | `string` | `"Yes"` |
| `disabled` | `disabled` | Disables the button | `boolean` | `false` |
| `formButtonType` | `form-button-type` | Optional button type, can be either submit, reset or button and defaults to button if not specified. Warning: DNN wraps the whole page in a form, only use this if you are handling form submission manually. Warning: This will be deprecated in the next version and replaced with a new 'type' property. | `"button" \| "reset" \| "submit"` | `'button'` |
| `reversed` | `reversed` | Optionally reverses the button style. | `boolean` | `false` |
| `size` | `size` | Optionally sets the button size, small normal or large, defaults to normal | `"large" \| "normal" \| "small"` | `'normal'` |
| `type` | `type` | <span style="color:red">**[DEPRECATED]**</span> This property will be reused in the next version to represent the type of button like "submit" or "reset". Use the appearance property instead.<br/><br/>Optional button style, | `"danger" \| "primary" \| "secondary" \| "tertiary"` | `'primary'` |


## Events
Expand Down
Loading
Loading