@genesislcap/foundation-forms 14.121.0 → 14.122.0

package/README.md

@@ -3,7 +3,7 @@
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)
 
-### [API Docs](./docs/api/index.md)
+## [API Docs](./docs/api/index.md)
 
 `foundation-forms` is a library for efficiently building complex forms and filters at scale.
 
@@ -30,9 +30,7 @@ To enable this module in your application, follow the steps below.
 }
 ```
 
-### General usage
-
-#### 1. Register components
+### 1. Register components
 
 ```ts
 import { Form } from '@genesislcap/foundation-forms';
@@ -41,16 +39,15 @@ Form
 ...
 ```
 
-#### 2. Add component to the template
+### 2. Add component to the template
 
 ```html
 <foundation-form resourceName="EVENT_TRADE_INSERT"></foundation-form>
 ```
 
-This should generate working form based on the `JSON schema` for that endpoint.
-DevTools console will output autogenerated `UI schema` that you can use to configure the form
+This should generate working form based on the `JSON schema` for that endpoint. The DevTools console will output autogenerated `UI schema` that you can use to configure the form.
 
-#### 3. Configure form using UI schema
+### 3. Configure form using UI schema
 
 ```ts
 const sampleUISchema = {
@@ -74,7 +71,7 @@ const sampleUISchema = {
 <foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema}></foundation-form>
 ```
 
-#### 4. Configure form using JSON schema (optional)
+### 4. Configure form using JSON schema (optional)
 
 Instead of providing `resourceName`, you can hard-code the `JSON schema` on the client.
 
@@ -106,7 +103,7 @@ const sampleJsonSchema = {
 };
 ```
 
-```ts 
+```ts
 const sampleUiSchema = {
   type: 'VerticalLayout',
   elements: [
@@ -159,7 +156,7 @@ const sampleUiSchema = {
 Use this when you want to avoid fetching metadata from the server, but be aware that it could get out of sync if metadata changes on the server.
 :::
 
-#### 5. Pre-fill forms with data (optional)
+### 5. Pre-fill forms with data (optional)
 
 Use the `data` attribute, which allows you to pre-fill the form with ready-made information.
 
@@ -193,9 +190,7 @@ To enable this module in your application, follow the steps below.
 }
 ```
 
-### General usage
-
-#### 1. Register components
+### 1. Register components
 
 ```ts
 import { Filters } from '@genesislcap/foundation-forms';
@@ -204,7 +199,7 @@ Filters
 ...
 ```
 
-#### 2. Add component to the template
+### 2. Add component to the template
 
 ```html
 <foundation-filters resourceName="ALL_TRADES"></foundation-filters>
@@ -213,7 +208,7 @@ Filters
 This should generate a working form based on the `JSON schema` for that endpoint.
 The DevTools console will output an autogenerated `UI schema` that you can use to configure the filters
 
-#### 3. Configure form using UI schema
+### 3. Configure form using UI schema
 
 ```ts
 const sampleUISchema = {
@@ -237,7 +232,7 @@ const sampleUISchema = {
 <foundation-filters resourceName="ALL_TRADES" :uischema=${() => sampleUISchema}></foundation-filters>
 ```
 
-#### 4. Configure form using JSON schema (optional)
+### 4. Configure form using JSON schema (optional)
 
 Instead of providing `resourceName`, you can hard-code the `JSON schema` on the client.
 
@@ -258,7 +253,7 @@ const sampleJsonSchema = {
 };
 ```
 
-```ts 
+```ts
 const sampleUiSchema = {
   type: 'VerticalLayout',
   elements: [
@@ -284,11 +279,11 @@ const sampleUiSchema = {
 Use this when you want to avoid fetching metadata from the server, but be aware that it could get out of sync if metadata changes on the server.
 :::
 
-#### 5. An example of synchronizing values with datasource criteria
+### 5. An example of synchronizing values with datasource criteria
 
 ```html
   <zero-card>
-    <foundation-filters 
+    <foundation-filters
       resourceName="ALL_USERS"
       :value=${sync((x) => x.allUsersfilters)}>
     </foundation-filters>
@@ -306,9 +301,7 @@ Use this when you want to avoid fetching metadata from the server, but be aware
 
 ### Default layout renderers and examples
 
-#### 1. VerticalLayout
-
-This is the default layout that is defined if no `uiSchema` is specified. This arranges our control elements vertically.
+This is the default layout for `VerticalLayout`, which is defined if no `uiSchema` is specified. This arranges the control elements vertically.
 
 ```ts
 const VerticalUISchema = {
@@ -319,9 +312,7 @@ const VerticalUISchema = {
 };
 ```
 
-#### 2. VerticalLayout - two columns
-
-This arranges our control elements in 2 columns vertically.
+This example arranges the control elements in two columns vertically.
 
 ```ts
 const VerticalColumnsUISchema = {
@@ -332,8 +323,6 @@ const VerticalColumnsUISchema = {
 };
 ```
 
-#### 3. HorizontalLayout
-
 This arranges our control elements horizontally.
 
 ```ts
@@ -345,11 +334,9 @@ const horizontalUISchema = {
 };
 ```
 
-#### 4. Array Layout
-
-Array Layout allows you to create a dynamic form with the ability to add, for example, multiple users.
+An array Layout enables you to create a dynamic form with the ability to add, for example, multiple users.
 
-It is more complicated when it comes to customisation because it needs proper `jsonSchema` and `uiSchema`.
+It is more complicated when it comes to customisation, because it needs proper `jsonSchema` and `uiSchema`.
 
 ```ts
 const arrayUISchema = {
@@ -412,9 +399,7 @@ const arrayJsonSchema = {
 };
 ```
 
-#### 5. Categorization layout
-
-Categorization layout allows you to create more complex forms that can be divided into appropriate categories (for example, personal information and address), which will be in separate tabs.
+Categorization layout enables you to create more complex forms that can be divided into appropriate categories (for example, personal information and address), which will be in separate tabs.
 
 ```ts
 const categoryUISchema = {
@@ -468,9 +453,7 @@ const categoryUISchema = {
 };
 ```
 
-#### 6. Group layout
-
-Group layout similarly to Categorization layout divides forms, but this time into groups. They are visible on the same tab, but they are separated from each other by their own labels.
+Group layout is similar to Categorization layout; it divides forms into groups. These are visible on the same tab, but they are separated from each other by their own labels.
 
 ```ts
 const groupUISchema = {
@@ -525,14 +508,12 @@ const groupUISchema = {
 };
 ```
 
-#### 7. Stepper Layout
+Stepper layout enables you to create more complex forms that can be divided into appropriate groups (for example, personal information and address), which will be in separate steps.
 
-Stepper layout allows you to create more complex forms that can be divided into appropriate steps (for example, personal information and address), which will be in separate steps.
-
-It is more complicated when it comes to customisation because it needs proper `jsonSchema` and `uiSchema` so that validation and data saving work properly.
+It is more complicated when it comes to customisation, because it needs proper `jsonSchema` and `uiSchema` so that validation and data saving work properly.
 
 :::info
-Remember to add `hide-submit-button` attribute to `foundation-forms` because in this case submit is built directly into stepper-layout
+Remember to add a `hide-submit-button` attribute to `foundation-forms`, because in this case, submit is built directly into stepper-layout.
 :::
 
 ```ts
@@ -704,9 +685,7 @@ const jsonSchemaStepper = {
 
 Most renderers are defined directly in the `jsonSchema` that comes from the server, but there are also those that you can add via `uiSchema`.
 
-#### 1. String renderer
-
-This is the default renderer, which creates a `text-field`.
+String renderer is the default renderer, which creates a `text-field`.
 
 ```ts
 const stringJsonSchema = {
@@ -730,8 +709,6 @@ const stringJsonSchema = {
 };
 ```
 
-#### 2. Number renderer
-
 The number renderer creates a `number-field`.
 
 ```ts
@@ -746,8 +723,6 @@ const numberJsonSchema = {
 };
 ```
 
-#### 3. Boolean renderer
-
 The boolean renderer creates a `checkbox-field`.
 
 ```ts
@@ -761,9 +736,7 @@ const booleanJsonSchema = {
 };
 ```
 
-#### 4. Connected Multiselect Renderer
-
-The multiselect renderer creates a `multiselect` component with options from datasource.
+The connected multiselect renderer creates a `multiselect` component with options from datasource.
 
 ```ts
 const connectedMultiselectUISchema = {
@@ -793,9 +766,7 @@ const connectedMultiselectUISchema = {
 };
 ```
 
-#### 5. Connected Select renderer
-
-This is a select renderer that creates a `select` component with options.
+Connected Select renderer is a select renderer that creates a `select` component with options.
 
 ```ts
 const connectedSelectUISchema = {
@@ -825,8 +796,6 @@ const connectedSelectUISchema = {
 };
 ```
 
-#### 6. Date renderer
-
 The date renderer creates a `date-field`.
 
 ```ts
@@ -843,8 +812,6 @@ const dateJsonSchema = {
 
 ### Specific renderers for filters and examples
 
-#### 1. Filter date renderer
-
 The filter date renderer creates two `date-fields` with minimum and maximum value.
 
 ```ts
@@ -859,8 +826,6 @@ const dateJsonSchema = {
 };
 ```
 
-#### 2. Filter number renderer
-
 The filter number renderer creates two `number-fields` with minimum and maximum value.
 
 ```ts
@@ -880,4 +845,4 @@ const numberJsonSchema = {
 Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
 
 ### Licensed components
-Genesis low-code platform
+Genesis low-code platform

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-forms",
   "description": "Genesis Foundation Forms",
-  "version": "14.121.0",
+  "version": "14.122.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -40,17 +40,17 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.121.0",
-    "@genesislcap/genx": "14.121.0",
+    "@genesislcap/foundation-testing": "14.122.0",
+    "@genesislcap/genx": "14.122.0",
     "@types/json-schema": "^7.0.11",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.121.0",
-    "@genesislcap/foundation-criteria": "14.121.0",
-    "@genesislcap/foundation-logger": "14.121.0",
-    "@genesislcap/foundation-ui": "14.121.0",
-    "@genesislcap/foundation-utils": "14.121.0",
+    "@genesislcap/foundation-comms": "14.122.0",
+    "@genesislcap/foundation-criteria": "14.122.0",
+    "@genesislcap/foundation-logger": "14.122.0",
+    "@genesislcap/foundation-ui": "14.122.0",
+    "@genesislcap/foundation-utils": "14.122.0",
     "@jsonforms/core": "^3.0.0",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
@@ -70,5 +70,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "a5a9cb1994ea71cb390b2eea7ece0fab419bb71e"
+  "gitHead": "78b6b5b81da76d97c7475b84b71af074106681f3"
 }