From a52ceab5a15ea5a9704e2382053f06e4874f4e4d Mon Sep 17 00:00:00 2001 From: Salihu <91833785+SalihuDickson@users.noreply.github.com> Date: Tue, 5 Nov 2024 07:43:30 +0100 Subject: [PATCH] feat: readonly fields (#380) Co-authored-by: Salihu --- .changeset/shy-buses-double.md | 5 +++ .../pages/docs/design/components/form.mdx | 37 ++++++++++--------- .../src/components/form/form.ts | 8 +++- 3 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 .changeset/shy-buses-double.md diff --git a/.changeset/shy-buses-double.md b/.changeset/shy-buses-double.md new file mode 100644 index 00000000..b2c30469 --- /dev/null +++ b/.changeset/shy-buses-double.md @@ -0,0 +1,5 @@ +--- +"@elixir-cloud/design": patch +--- + +add support for readonly attribute to ecc-utils-design-form fields. This allows users to make fields uneditable. diff --git a/apps/documentation/pages/docs/design/components/form.mdx b/apps/documentation/pages/docs/design/components/form.mdx index 0db29b68..a3460ade 100644 --- a/apps/documentation/pages/docs/design/components/form.mdx +++ b/apps/documentation/pages/docs/design/components/form.mdx @@ -79,24 +79,25 @@ This component is used to render a form with the given fields. This property is used to render the fields in the form. Fields can be passed as the array of objects. Each object represents a field. The object can have the following properties. -| Property | Required | Default | Type | Description | -| ----------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| key | `true` | `null` | `string` | Unique key for the field. | -| label | `true` | `null` | `string` | Label for the field. | -| type | `false` | `text` | `text`, `date`, `number`, `email`, `password`, `tel`, `url`, `search`, `datetime-local`, `time`, `file`, `switch`, `array`, `group` | Type of the field. | -| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows fields to be added dynamically | -| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. | -| fieldOptions.default | `false` | `null` | `string, boolean` | Value of the field | -| fieldOptions.multiple | `false` | `false` | `boolean` | Whether fields of type `file` accept multiple values. Only applies to fields of type `file` | -| fieldOptions.tooltip | `false` | `null` | `string` | Tooltip or help-text that will render a popup when hovered over label of form field. | -| fieldOptions.accept | `false` | `null` | `string` | A comma separated string that determines the types of files that fields of type `file` will accept. [Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept). Only applies to fields of type `file` | -| fieldOptions.returnIfEmpty | `false` | `false` | `boolean` | Determines if the data from an empty input field will be returned in the form data when empty. | -| arrayOptions.defaultInstances | `false` | `null` | `number` | Sets a default number of instances for fields of type `array` Only applies to fields of type `array` | -| arrayOptions.max | `false` | `null` | `number` | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array` | -| arrayOptions.min | `false` | `null` | `number` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min | -| groupOptions.collapsible | `false` | `null` | `number` -| fileOptions.protocol | `false` | `native`| `string` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min | -| fileOptions.tusOptions | `false` | `null` | `Object ({ endpoint: string })` | Determines if a field of type `group` will be collapsible | +| Property | Required | Default | Type | Description | +| ----------------------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| key | `true` | `null` | `string` | Unique key for the field. | +| label | `true` | `null` | `string` | Label for the field. | +| type | `false` | `text` | `text`, `date`, `number`, `email`, `password`, `tel`, `url`, `search`, `datetime-local`, `time`, `file`, `switch`, `array`, `group` | Type of the field. | +| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows fields to be added dynamically | +| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. | +| fieldOptions.readonly | `false` | `false` | `boolean` | Determines is the field will be editable | +| fieldOptions.default | `false` | `null` | `string, boolean` | Value of the field | +| fieldOptions.multiple | `false` | `false` | `boolean` | Whether fields of type `file` accept multiple values. Only applies to fields of type `file` | +| fieldOptions.tooltip | `false` | `null` | `string` | Tooltip or help-text that will render a popup when hovered over label of form field. | +| fieldOptions.accept | `false` | `null` | `string` | A comma separated string that determines the types of files that fields of type `file` will accept. [Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept). Only applies to fields of type `file` | +| fieldOptions.returnIfEmpty | `false` | `false` | `boolean` | Determines if the data from an empty input field will be returned in the form data when empty. | +| arrayOptions.defaultInstances | `false` | `null` | `number` | Sets a default number of instances for fields of type `array` Only applies to fields of type `array` | +| arrayOptions.max | `false` | `null` | `number` | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array` | +| arrayOptions.min | `false` | `null` | `number` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min | +| groupOptions.collapsible | `false` | `null` | `number` | +| fileOptions.protocol | `false` | `native` | `string` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min | +| fileOptions.tusOptions | `false` | `null` | `Object ({ endpoint: string })` | Determines if a field of type `group` will be collapsible | ## Events diff --git a/packages/ecc-utils-design/src/components/form/form.ts b/packages/ecc-utils-design/src/components/form/form.ts index 0efe5030..1dd2df26 100644 --- a/packages/ecc-utils-design/src/components/form/form.ts +++ b/packages/ecc-utils-design/src/components/form/form.ts @@ -9,7 +9,7 @@ import "@shoelace-style/shoelace/dist/components/details/details.js"; import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js"; import "@shoelace-style/shoelace/dist/components/select/select.js"; import "@shoelace-style/shoelace/dist/components/option/option.js"; -import _ from "lodash-es"; +import * as _ from "lodash-es"; import { hostStyles } from "../../styles/host.styles.js"; import formStyles from "./form.styles.js"; import { primitiveStylesheet } from "../../styles/primitive.styles.js"; @@ -41,6 +41,7 @@ export interface Field { accept?: string; returnIfEmpty?: boolean; tooltip?: string; + readonly?: boolean; }; selectOptions?: Array<{ label: string; value: string }>; arrayOptions?: { @@ -144,6 +145,7 @@ export default class EccUtilsDesignForm extends LitElement { data-testid="form-switch" label=${field.label} ?required=${field.fieldOptions?.required} + ?disabled=${field.fieldOptions?.readonly} ?checked=${_.get(this.form, path)} @sl-change=${(e: Event) => { const value = (e.target as HTMLInputElement).checked; @@ -244,6 +246,7 @@ export default class EccUtilsDesignForm extends LitElement { { await this.handleTusFileUpload(e, field); }} @@ -268,6 +271,7 @@ export default class EccUtilsDesignForm extends LitElement { data-label=${field.label} data-testid="form-input-file" accept=${field.fieldOptions?.accept || "*"} + ?disabled=${field.fieldOptions?.readonly} ?multiple=${field.fieldOptions?.multiple} ?required=${field.fieldOptions?.required} @change=${async (e: Event) => { @@ -313,6 +317,7 @@ export default class EccUtilsDesignForm extends LitElement { { const selectElement = e.target as HTMLSelectElement; @@ -342,6 +347,7 @@ export default class EccUtilsDesignForm extends LitElement { ?required=${field.fieldOptions?.required} value=${_.get(this.form, path)} ?password-toggle=${field.type === "password"} + ?disabled=${field.fieldOptions?.readonly} @sl-input=${(e: Event) => { const { value } = e.target as HTMLInputElement; if (!value) {