From 06dce6cc26ec1274346b0bb8aa4def607c46f726 Mon Sep 17 00:00:00 2001 From: Yash Maheshwari Date: Wed, 6 Aug 2025 12:20:55 +0530 Subject: [PATCH 1/3] Implemented: design doc for DxpForm proposed component(#420) --- README.md | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) diff --git a/README.md b/README.md index b302e225..0161425b 100644 --- a/README.md +++ b/README.md @@ -66,3 +66,179 @@ No methods are available for this component | Name | Description | | --- | --- | | timeZoneUpdated | Emitted when timeZone is changed | + + +# Proposed Components + +## DxpForm + +This components handles creation and validation of the forms in the app. It wraps the logic for form creation and validation from the developers and then can directly define the form elements and pass the same in this component that automatically renders a Ionic form to be used in the app. + +## Usage + +```html + + +``` + +## Slots + +## Props + +| Name | Description | Type | Default Value | Required | +| --- | --- | --- | --- | --- | +| schema | Schema that the component will use to prepare the form | Object | {} | True | +| fabSaveButton | Show a fab button on the UI at the bottom right to submit the form | Boolean | true | False | +| blockSaveButton | Show a block button on the UI to submit the form | Boolean | false | False | + +> Note: +> +> If both the fabSaveButton and blockSaveButton are passed as true, the component will display the fab button and the blockSaveButton property will be ignored. + +## Events + +| Name | Description | +| --- | --- | +| submitForm | Trigged when the form is submitted by the user | + +## Methods + +## Recommendation + +Pattern for passing the schema prop value + +schema: { + : { + label // Label for the component + val // Value against which the component will bind + childComp // If the component supports some child components, like select having selectOption, radioGroup having radio + options // if having childComp, then define its values in the format [{ id, val }, { id, val }], + labelInline // When the component does not access label as prop, like checkbox, + validations // Validation rules for the component + ...any property supported by the component + } +} + +Following components are currently support: + +input +select +selectOption (only as child comp) +radioGroup +radio (only as child comp) +checkbox +textarea + +## Implementation Details + +We will have a parent `form` element to wrap all the elements inside the form. + +We will use the schema passed a prop to define the complete form structure + +Define a local property as `form` as an object that will help in binding the values for all the elements to its corresponding component + +We can have the following types of buttons to submit the form: +- Fab Button +- Block Button + +This component emits an event `submitForm` that will be handled by the parent component to perform required steps. + +Validations in this component will be applied on the basis of type property defined in the component schema. For validation we need to define the structure for rules. + +All the elements will be displayed in ion-list wrapped by ion-item. + +Define an object consisting the type of component and actual Ionic component using which we will decide which component to render on the UI. +enum Components { + input: "IonInput", + select: "IonSelect", + checkbox: "IonCheckbox", + textarea: "IonTextarea", + radio: "IonRadio" +} + +Label for each component will be passed as a property of component in its schema, but when rendered we will use the pattern defined by Ionic when showing labels on UI, so when the label needs to be inline then we will pass a property as labelInline + + +schema: { + input: { + min: 4 + type: "text" + . + . + . + bind: "" + // all ion-input properties, + label: "Label" + }, + select: { + options: [], + . + . + . + // all ion-select properties, + label: "Label" + }, + textarea: { + rows: 3, + . + . + . + // all ion-textarea properties, + label: "Label" + } +} + +Sample Schema: + +```js +schema: { + input: { + label: 'Id', + type: 'text', + validations: ['required', 'number'], + val: "id" + }, + select: { + label: 'Role', + interface: 'popover', + childComp: 'selectOption', + options: [ + { + id: 'ADMIN', + val: 'Admin', + }, + { + id: 'SUPER', + val: 'Super', + }, + ], + val: 'role', + }, + radioGroup: { + label: 'Type', + childComp: 'radio', + options: [ + { + id: 'ONE', + val: 'One', + }, + { + id: 'TWO', + val: 'Two', + }, + ], + val: 'type', + }, + checkbox: { + labelInline: 'Agree to terms', + val: 'agree', + }, + textarea: { + labelInline: 'Additional Information', + class: 'ion-margin-top', + val: 'textarea', + }, +}, +``` \ No newline at end of file From 4715e4b26db1f45c4c3f8eb63a70189f02b8da02 Mon Sep 17 00:00:00 2001 From: Yash Maheshwari Date: Wed, 6 Aug 2025 12:24:46 +0530 Subject: [PATCH 2/3] Improved: the documents regarding validation value in the form schema(#420) --- README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0161425b..d2e560e2 100644 --- a/README.md +++ b/README.md @@ -145,11 +145,20 @@ We can have the following types of buttons to submit the form: This component emits an event `submitForm` that will be handled by the parent component to perform required steps. -Validations in this component will be applied on the basis of type property defined in the component schema. For validation we need to define the structure for rules. +Validations in the specific component will be applied on the basis of validations property array defined in the component schema. + +Following validations are supported: +'required' +'email' +'number' +'mobile' (10–15 digits, optional +) +{ type: 'min' | 'max', value: number } (for numbers) +{ type: 'minLength' | 'maxLength', value: number } (for strings) + All the elements will be displayed in ion-list wrapped by ion-item. -Define an object consisting the type of component and actual Ionic component using which we will decide which component to render on the UI. +Define an object/enum consisting the type of component and actual Ionic component using which we will decide which component to render on the UI. enum Components { input: "IonInput", select: "IonSelect", From 787781d6b7dca961e1d38eb8168751d677e33eb0 Mon Sep 17 00:00:00 2001 From: Yash Maheshwari Date: Thu, 7 Aug 2025 11:53:52 +0530 Subject: [PATCH 3/3] Improved: the document for dxp form component(#420) --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d2e560e2..cab26456 100644 --- a/README.md +++ b/README.md @@ -72,13 +72,13 @@ No methods are available for this component ## DxpForm -This components handles creation and validation of the forms in the app. It wraps the logic for form creation and validation from the developers and then can directly define the form elements and pass the same in this component that automatically renders a Ionic form to be used in the app. +This component handles creation and validation of the forms in the app. It hides the logic for form creation and validation from the developers and they can directly define the form elements and pass the schema in this component that renders a Ionic form to be used in the app. ## Usage ```html ``` @@ -104,6 +104,7 @@ This components handles creation and validation of the forms in the app. It wrap | submitForm | Trigged when the form is submitted by the user | ## Methods +No methods are available for this component. ## Recommendation @@ -121,7 +122,7 @@ schema: { } } -Following components are currently support: +Following values are currently supported as component-name: input select