Skip to content

Commit a52ceab

Browse files
salihudicksonsalihudickson
authored
feat: readonly fields (#380)
Co-authored-by: Salihu <salihudickson@gmail.com>
1 parent 58f257d commit a52ceab

3 files changed

Lines changed: 31 additions & 19 deletions

File tree

‎.changeset/shy-buses-double.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@elixir-cloud/design": patch
3+
---
4+
5+
add support for readonly attribute to ecc-utils-design-form fields. This allows users to make fields uneditable.

‎apps/documentation/pages/docs/design/components/form.mdx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -79,24 +79,25 @@ This component is used to render a form with the given fields.
7979

8080
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.
8181

82-
| Property | Required | Default | Type | Description |
83-
| ----------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
84-
| key | `true` | `null` | `string` | Unique key for the field. |
85-
| label | `true` | `null` | `string` | Label for the field. |
86-
| type | `false` | `text` | `text`, `date`, `number`, `email`, `password`, `tel`, `url`, `search`, `datetime-local`, `time`, `file`, `switch`, `array`, `group` | Type of the field. |
87-
| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows fields to be added dynamically |
88-
| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. |
89-
| fieldOptions.default | `false` | `null` | `string, boolean` | Value of the field |
90-
| fieldOptions.multiple | `false` | `false` | `boolean` | Whether fields of type `file` accept multiple values. Only applies to fields of type `file` |
91-
| fieldOptions.tooltip | `false` | `null` | `string` | Tooltip or help-text that will render a popup when hovered over label of form field. |
92-
| 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` |
93-
| fieldOptions.returnIfEmpty | `false` | `false` | `boolean` | Determines if the data from an empty input field will be returned in the form data when empty. |
94-
| arrayOptions.defaultInstances | `false` | `null` | `number` | Sets a default number of instances for fields of type `array` Only applies to fields of type `array` |
95-
| arrayOptions.max | `false` | `null` | `number` | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array` |
96-
| 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 |
97-
| groupOptions.collapsible | `false` | `null` | `number`
98-
| 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 |
99-
| fileOptions.tusOptions | `false` | `null` | `Object ({ endpoint: string })` | Determines if a field of type `group` will be collapsible |
82+
| Property | Required | Default | Type | Description |
83+
| ----------------------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
84+
| key | `true` | `null` | `string` | Unique key for the field. |
85+
| label | `true` | `null` | `string` | Label for the field. |
86+
| type | `false` | `text` | `text`, `date`, `number`, `email`, `password`, `tel`, `url`, `search`, `datetime-local`, `time`, `file`, `switch`, `array`, `group` | Type of the field. |
87+
| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows fields to be added dynamically |
88+
| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. |
89+
| fieldOptions.readonly | `false` | `false` | `boolean` | Determines is the field will be editable |
90+
| fieldOptions.default | `false` | `null` | `string, boolean` | Value of the field |
91+
| fieldOptions.multiple | `false` | `false` | `boolean` | Whether fields of type `file` accept multiple values. Only applies to fields of type `file` |
92+
| fieldOptions.tooltip | `false` | `null` | `string` | Tooltip or help-text that will render a popup when hovered over label of form field. |
93+
| 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` |
94+
| fieldOptions.returnIfEmpty | `false` | `false` | `boolean` | Determines if the data from an empty input field will be returned in the form data when empty. |
95+
| arrayOptions.defaultInstances | `false` | `null` | `number` | Sets a default number of instances for fields of type `array` Only applies to fields of type `array` |
96+
| arrayOptions.max | `false` | `null` | `number` | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array` |
97+
| 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 |
98+
| groupOptions.collapsible | `false` | `null` | `number` |
99+
| 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 |
100+
| fileOptions.tusOptions | `false` | `null` | `Object ({ endpoint: string })` | Determines if a field of type `group` will be collapsible |
100101

101102
## Events
102103

‎packages/ecc-utils-design/src/components/form/form.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import "@shoelace-style/shoelace/dist/components/details/details.js";
99
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
1010
import "@shoelace-style/shoelace/dist/components/select/select.js";
1111
import "@shoelace-style/shoelace/dist/components/option/option.js";
12-
import _ from "lodash-es";
12+
import * as _ from "lodash-es";
1313
import { hostStyles } from "../../styles/host.styles.js";
1414
import formStyles from "./form.styles.js";
1515
import { primitiveStylesheet } from "../../styles/primitive.styles.js";
@@ -41,6 +41,7 @@ export interface Field {
4141
accept?: string;
4242
returnIfEmpty?: boolean;
4343
tooltip?: string;
44+
readonly?: boolean;
4445
};
4546
selectOptions?: Array<{ label: string; value: string }>;
4647
arrayOptions?: {
@@ -144,6 +145,7 @@ export default class EccUtilsDesignForm extends LitElement {
144145
data-testid="form-switch"
145146
label=${field.label}
146147
?required=${field.fieldOptions?.required}
148+
?disabled=${field.fieldOptions?.readonly}
147149
?checked=${_.get(this.form, path)}
148150
@sl-change=${(e: Event) => {
149151
const value = (e.target as HTMLInputElement).checked;
@@ -244,6 +246,7 @@ export default class EccUtilsDesignForm extends LitElement {
244246
<input
245247
type="file"
246248
class="file-input"
249+
?disabled=${field.fieldOptions?.readonly}
247250
@change=${async (e: Event) => {
248251
await this.handleTusFileUpload(e, field);
249252
}}
@@ -268,6 +271,7 @@ export default class EccUtilsDesignForm extends LitElement {
268271
data-label=${field.label}
269272
data-testid="form-input-file"
270273
accept=${field.fieldOptions?.accept || "*"}
274+
?disabled=${field.fieldOptions?.readonly}
271275
?multiple=${field.fieldOptions?.multiple}
272276
?required=${field.fieldOptions?.required}
273277
@change=${async (e: Event) => {
@@ -313,6 +317,7 @@ export default class EccUtilsDesignForm extends LitElement {
313317
<sl-select
314318
class="select"
315319
?required=${field.fieldOptions?.required}
320+
?disabled=${field.fieldOptions?.readonly}
316321
value=${_.get(this.form, path)?.label || ""}
317322
@sl-change=${(e: Event) => {
318323
const selectElement = e.target as HTMLSelectElement;
@@ -342,6 +347,7 @@ export default class EccUtilsDesignForm extends LitElement {
342347
?required=${field.fieldOptions?.required}
343348
value=${_.get(this.form, path)}
344349
?password-toggle=${field.type === "password"}
350+
?disabled=${field.fieldOptions?.readonly}
345351
@sl-input=${(e: Event) => {
346352
const { value } = e.target as HTMLInputElement;
347353
if (!value) {

0 commit comments

Comments
 (0)