From a432beb8a240f046d716ea1e9bcc62cade3e835d Mon Sep 17 00:00:00 2001 From: Lucas Murta Date: Tue, 18 Jul 2023 17:39:13 -0300 Subject: [PATCH] fix(input-chips): fixind maxlenght on component --- src/components.d.ts | 16 ++++++++ src/components/counter-text/readme.md | 2 + src/components/input-chips/input-chips.tsx | 42 +++++++++++++------- src/components/input-chips/readme.md | 45 ++++++++++++---------- src/components/test-component/readme.md | 1 + 5 files changed, 72 insertions(+), 34 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index cc3eafd4..163a5fec 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -848,6 +848,10 @@ export namespace Components { * Clear all chips */ "clear": () => Promise; + /** + * Passing true to display a counter of available size, it is necessary to pass another maxlength property. + */ + "counterLength"?: boolean; /** * Add state danger on input, use for use feedback. */ @@ -900,6 +904,10 @@ export namespace Components { * label in input, with he the input size increases. */ "label"?: string; + /** + * Set maximum length value for chips + */ + "maxChipsLength"?: number; /** * Set maximum length value for the chip content */ @@ -3550,6 +3558,10 @@ declare namespace LocalJSX { * The chips on the component Should be passed this way: chips='["chip1", "chip2"]' */ "chips"?: string[] | string; + /** + * Passing true to display a counter of available size, it is necessary to pass another maxlength property. + */ + "counterLength"?: boolean; /** * Add state danger on input, use for use feedback. */ @@ -3594,6 +3606,10 @@ declare namespace LocalJSX { * label in input, with he the input size increases. */ "label"?: string; + /** + * Set maximum length value for chips + */ + "maxChipsLength"?: number; /** * Set maximum length value for the chip content */ diff --git a/src/components/counter-text/readme.md b/src/components/counter-text/readme.md index 3ad1349b..0c132d19 100644 --- a/src/components/counter-text/readme.md +++ b/src/components/counter-text/readme.md @@ -21,6 +21,7 @@ ### Used by - [bds-input](../input) + - [bds-input-chips](../input-chips) ### Depends on @@ -31,6 +32,7 @@ graph TD; bds-counter-text --> bds-typo bds-input --> bds-counter-text + bds-input-chips --> bds-counter-text style bds-counter-text fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/input-chips/input-chips.tsx b/src/components/input-chips/input-chips.tsx index 52876222..fe9a5525 100644 --- a/src/components/input-chips/input-chips.tsx +++ b/src/components/input-chips/input-chips.tsx @@ -51,6 +51,10 @@ export class InputChips { */ @Prop() maxlength?: number; + /** + * Set maximum length value for chips + */ + @Prop() maxChipsLength?: number; /** * used for add icon in input left. Uses the bds-icon component. */ @@ -112,6 +116,11 @@ export class InputChips { */ @Prop() placeholder?: string = ''; + /** + * Passing true to display a counter of available size, it is necessary to + * pass another maxlength property. + */ + @Prop() counterLength? = false; /** * Data test is the prop to specifically test the component action object. */ @@ -501,22 +510,27 @@ export class InputChips { {this.renderLabel()}
{this.internalChips.length > 0 && {this.renderChips()}} - (this.nativeInput = input)} - class={{ input__container__text: true }} - name={this.inputName} - maxlength={this.maxlength} - placeholder={this.placeholder} - onInput={this.onInput} - onFocus={this.onFocus} - onBlur={() => this.handleOnBlur()} - onChange={() => this.handleChange} - value={this.value} - disabled={this.disabled} - data-test={this.dataTest} - > + {this.internalChips.length < this.maxChipsLength && ( + (this.nativeInput = input)} + class={{ input__container__text: true }} + name={this.inputName} + maxlength={this.maxlength} + placeholder={this.placeholder} + onInput={this.onInput} + onFocus={this.onFocus} + onBlur={() => this.handleOnBlur()} + onChange={() => this.handleChange} + value={this.value} + disabled={this.disabled} + data-test={this.dataTest} + > + )}
+ {this.counterLength && ( + + )} {this.success && } diff --git a/src/components/input-chips/readme.md b/src/components/input-chips/readme.md index bc40fadf..7ca4dfa1 100644 --- a/src/components/input-chips/readme.md +++ b/src/components/input-chips/readme.md @@ -7,26 +7,28 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | -| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` | -| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | -| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | -| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` | -| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` | -| `disabled` | `disabled` | Disabled input | `boolean` | `false` | -| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` | -| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` | -| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | -| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | -| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` | -| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | -| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` | -| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` | -| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | -| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | -| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` | -| `value` | `value` | The value of the input. | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | +| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` | +| `counterLength` | `counter-length` | Passing true to display a counter of available size, it is necessary to pass another maxlength property. | `boolean` | `false` | +| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` | +| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` | +| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` | +| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` | +| `disabled` | `disabled` | Disabled input | `boolean` | `false` | +| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` | +| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` | +| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` | +| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` | +| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` | +| `label` | `label` | label in input, with he the input size increases. | `string` | `''` | +| `maxChipsLength` | `max-chips-length` | Set maximum length value for chips | `number` | `undefined` | +| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` | +| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` | +| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` | +| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` | +| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` | +| `value` | `value` | The value of the input. | `string` | `''` | ## Events @@ -124,6 +126,7 @@ Type: `Promise` - [bds-tooltip](../tooltip) - [bds-icon](../icon) - [bds-typo](../typo) +- [bds-counter-text](../counter-text) ### Graph ```mermaid @@ -132,12 +135,14 @@ graph TD; bds-input-chips --> bds-tooltip bds-input-chips --> bds-icon bds-input-chips --> bds-typo + bds-input-chips --> bds-counter-text bds-chip-clickable --> bds-icon bds-chip-clickable --> bds-avatar bds-chip-clickable --> bds-typo bds-avatar --> bds-typo bds-avatar --> bds-icon bds-tooltip --> bds-typo + bds-counter-text --> bds-typo bds-test-component --> bds-input-chips style bds-input-chips fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/test-component/readme.md b/src/components/test-component/readme.md index 7f933ef1..f70f1a90 100644 --- a/src/components/test-component/readme.md +++ b/src/components/test-component/readme.md @@ -138,6 +138,7 @@ graph TD; bds-input-chips --> bds-tooltip bds-input-chips --> bds-icon bds-input-chips --> bds-typo + bds-input-chips --> bds-counter-text bds-tooltip --> bds-typo bds-input-editable --> bds-icon bds-input-editable --> bds-typo