Skip to content

Commit

Permalink
feat: readonly fields (#380)
Browse files Browse the repository at this point in the history 
Co-authored-by: Salihu <[email protected]>
  • Loading branch information
@SalihuDickson
SalihuDickson and Salihu authored Nov 5, 2024
1 parent 58f257d commit a52ceab
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 19 deletions.
5 changes: 5 additions & 0 deletions .changeset/shy-buses-double.md
View file
Original file line number Diff line number Diff line change
@@ -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.
37 changes: 19 additions & 18 deletions apps/documentation/pages/docs/design/components/form.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 7 additions & 1 deletion packages/ecc-utils-design/src/components/form/form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -41,6 +41,7 @@ export interface Field {
accept?: string;
returnIfEmpty?: boolean;
tooltip?: string;
readonly?: boolean;
};
selectOptions?: Array<{ label: string; value: string }>;
arrayOptions?: {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -244,6 +246,7 @@ export default class EccUtilsDesignForm extends LitElement {
<input
type="file"
class="file-input"
?disabled=${field.fieldOptions?.readonly}
@change=${async (e: Event) => {
await this.handleTusFileUpload(e, field);
}}
Expand All @@ -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) => {
Expand Down Expand Up @@ -313,6 +317,7 @@ export default class EccUtilsDesignForm extends LitElement {
<sl-select
class="select"
?required=${field.fieldOptions?.required}
?disabled=${field.fieldOptions?.readonly}
value=${_.get(this.form, path)?.label || ""}
@sl-change=${(e: Event) => {
const selectElement = e.target as HTMLSelectElement;
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit a52ceab

Please sign in to comment.