From b95a4c2786d472ffcc64edee403f77a377cce6c8 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Thu, 28 Mar 2024 14:20:06 +0530 Subject: [PATCH 01/11] Update modus-table cell dropdown editable --- .../modus-table-cell-editor.tsx | 20 +++++++++++++------ .../cell/modus-table-cell-editor/readme.md | 15 +++++++------- .../modus-table-cell-main.tsx | 1 + 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index c31e8f35d..d42765ef1 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -25,12 +25,13 @@ import { ModusAutocompleteOption } from '../../../../modus-autocomplete/modus-au }) export class ModusTableCellEditor { @Prop() args: ModusTableCellEditorArgs; + @Prop() dataType: string; @Prop() value: string; @Prop() type: string; @Prop() valueChange: (newValue: string) => void; @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; - private editedValue: string; + private editedValue: unknown; private inputElement: HTMLElement; connectedCallback(): void { @@ -42,11 +43,11 @@ export class ModusTableCellEditor { } handleBlur: () => void = () => { - this.valueChange(this.editedValue); + this.valueChange(this.editedValue as string); }; handleKeyDown: (e: KeyboardEvent) => void = (e) => { - this.keyDown(e, this.editedValue); + this.keyDown(e, this.editedValue as string); }; getDefaultProps = (ariaLabel) => ({ @@ -91,7 +92,7 @@ export class ModusTableCellEditor { renderDropdownInput(): JSX.Element[] { const valueKey = 'display'; const options = (this.args as ModusTableCellDropdownEditorArgs)?.options || []; - const selectedOption = options.find((option) => option[valueKey] === this.value); + const selectedOption = options.find((option) => option[valueKey] === this.value) as any; function handleEnter(e: KeyboardEvent, callback: (e: KeyboardEvent) => void) { const code = e.key.toLowerCase(); @@ -111,7 +112,14 @@ export class ModusTableCellEditor { onInputBlur={this.handleBlur} onKeyDown={(e) => handleEnter(e, this.handleKeyDown)} onValueChange={(e: CustomEvent) => { - this.editedValue = e.detail[valueKey]; + if (this.dataType === 'badge') { + const { display, ...restProps } = e.detail as any; + this.editedValue = { ...restProps, text: display }; + } else if (this.dataType === 'link') { + this.editedValue = e.detail; + } else { + this.editedValue = e.detail[valueKey]; + } }}> ); @@ -148,7 +156,7 @@ export class ModusTableCellEditor { // onInputBlur={this.handleBlur} onOptionSelected={(e: CustomEvent) => { this.editedValue = e.detail; - this.valueChange(this.editedValue); + this.valueChange(this.editedValue as string); }} // value={selectedOption} // onKeyDown={(e) => e.stopPropagation()} diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md index 0418b7043..4dfcc6088 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md @@ -7,13 +7,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------- | ----------- | ------------------------------------------------ | ----------- | -| `args` | -- | | `{ format: string; } \| { options: unknown[]; }` | `undefined` | -| `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | -| `type` | `type` | | `string` | `undefined` | -| `value` | `value` | | `string` | `undefined` | -| `valueChange` | -- | | `(newValue: string) => void` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | ----------- | ----------- | ------------------------------------------------ | ----------- | +| `args` | -- | | `{ format: string; } \| { options: unknown[]; }` | `undefined` | +| `dataType` | `data-type` | | `string` | `undefined` | +| `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | +| `type` | `type` | | `string` | `undefined` | +| `value` | `value` | | `string` | `undefined` | +| `valueChange` | -- | | `(newValue: string) => void` | `undefined` | ## Dependencies diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 0248f76db..1b37e973c 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -197,6 +197,7 @@ export class ModusTableCellMain { {this.editMode ? ( Date: Mon, 1 Apr 2024 10:51:19 +0530 Subject: [PATCH 02/11] Update auto complete to badge and link --- .../modus-table-cell-editor.tsx | 40 +++++++++++++++---- .../cell/modus-table-cell-editor/readme.md | 15 +++---- .../modus-table-cell-main.tsx | 1 + 3 files changed, 41 insertions(+), 15 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index c31e8f35d..a44d354ab 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -25,12 +25,13 @@ import { ModusAutocompleteOption } from '../../../../modus-autocomplete/modus-au }) export class ModusTableCellEditor { @Prop() args: ModusTableCellEditorArgs; + @Prop() dataType: string; @Prop() value: string; @Prop() type: string; @Prop() valueChange: (newValue: string) => void; @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; - private editedValue: string; + private editedValue: unknown; private inputElement: HTMLElement; connectedCallback(): void { @@ -42,11 +43,11 @@ export class ModusTableCellEditor { } handleBlur: () => void = () => { - this.valueChange(this.editedValue); + this.valueChange(this.editedValue as string); }; handleKeyDown: (e: KeyboardEvent) => void = (e) => { - this.keyDown(e, this.editedValue); + this.keyDown(e, this.editedValue as string); }; getDefaultProps = (ariaLabel) => ({ @@ -137,18 +138,41 @@ export class ModusTableCellEditor { } renderAutocompleteInput(): JSX.Element[] { - const options = ((this.args as ModusTableCellDropdownEditorArgs)?.options || []) as ModusAutocompleteOption[] | string[]; + let options; + const args = (this.args as ModusTableCellDropdownEditorArgs)?.options; + if (this.dataType === 'badge') { + options = args.map((option: any) => option.text) as ModusAutocompleteOption[] | string[]; + } else if (this.dataType === 'link') { + options = args.map((option: any) => option.display) as ModusAutocompleteOption[] | string[]; + } else { + options = (args || []) as ModusAutocompleteOption[] | string[]; + console.log('options', options); + } return ( e.stopPropagation()} + //onClick={(e: MouseEvent) => e.stopPropagation()} options={options} - // onInputBlur={this.handleBlur} + onBlur={this.handleBlur} onOptionSelected={(e: CustomEvent) => { - this.editedValue = e.detail; - this.valueChange(this.editedValue); + if (this.dataType === 'badge') { + args.map((option: any) => { + if (option.text == e.detail) { + this.editedValue = option; + } + }); + } else if (this.dataType === 'link') { + args.map((option: any) => { + if (option.display == e.detail) { + this.editedValue = option; + } + }); + } else { + console.log('e.detail', e.detail); + this.editedValue = e.detail; + } }} // value={selectedOption} // onKeyDown={(e) => e.stopPropagation()} diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md index 0418b7043..4dfcc6088 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md @@ -7,13 +7,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------- | ----------- | ------------------------------------------------ | ----------- | -| `args` | -- | | `{ format: string; } \| { options: unknown[]; }` | `undefined` | -| `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | -| `type` | `type` | | `string` | `undefined` | -| `value` | `value` | | `string` | `undefined` | -| `valueChange` | -- | | `(newValue: string) => void` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | ----------- | ----------- | ------------------------------------------------ | ----------- | +| `args` | -- | | `{ format: string; } \| { options: unknown[]; }` | `undefined` | +| `dataType` | `data-type` | | `string` | `undefined` | +| `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | +| `type` | `type` | | `string` | `undefined` | +| `value` | `value` | | `string` | `undefined` | +| `valueChange` | -- | | `(newValue: string) => void` | `undefined` | ## Dependencies diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 0248f76db..1b37e973c 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -197,6 +197,7 @@ export class ModusTableCellMain { {this.editMode ? ( Date: Mon, 1 Apr 2024 18:26:10 +0530 Subject: [PATCH 03/11] Update focus of datepicker --- .../modus-table-cell-editor.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index c31e8f35d..a53b7770d 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -32,6 +32,7 @@ export class ModusTableCellEditor { private editedValue: string; private inputElement: HTMLElement; + private outsideClickListener: (event: any) => void; connectedCallback(): void { this.editedValue = this.value; @@ -39,6 +40,16 @@ export class ModusTableCellEditor { componentDidLoad(): void { if (this.inputElement['focusInput']) this.inputElement['focusInput'](); + + this.outsideClickListener = (event) => { + if (!this.inputElement.contains(event.target)) { + this.handleBlur(); + } + }; + document.addEventListener('click', this.outsideClickListener); + } + disconnectedCallback(): void { + document.removeEventListener('click', this.outsideClickListener); } handleBlur: () => void = () => { @@ -121,17 +132,16 @@ export class ModusTableCellEditor { const valueKey = 'value'; const format = (this.args as ModusTableCellDateEditorArgs)?.format; return ( - + e.stopPropagation()}> e.stopPropagation()} - onValueChange={(e: CustomEvent) => - (this.editedValue = e.detail[valueKey]) - }> + onValueChange={(e: CustomEvent) => { + this.editedValue = e.detail[valueKey]; + }}> ); } From b8ecefd9194a481d42f892374f447ed329e242fd Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Thu, 4 Apr 2024 11:00:04 +0530 Subject: [PATCH 04/11] Merge PRs and Format Code --- .../cell/modus-table-cell-editor/modus-table-cell-editor.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 861ba19fa..cd11a24dd 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -163,7 +163,6 @@ export class ModusTableCellEditor { options = args.map((option: any) => option.display) as ModusAutocompleteOption[] | string[]; } else { options = (args || []) as ModusAutocompleteOption[] | string[]; - console.log('options', options); } return ( Date: Thu, 4 Apr 2024 16:09:51 +0530 Subject: [PATCH 05/11] Update listener and docs --- .../modus-table-cell-editor.tsx | 2 +- .../modus-table-storybook-docs.mdx | 73 +++++++++++++++++++ .../modus-table/modus-table.stories.tsx | 52 ++++++++++++- 3 files changed, 124 insertions(+), 3 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index cd11a24dd..5d2027045 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -47,7 +47,7 @@ export class ModusTableCellEditor { this.handleBlur(); } }; - document.addEventListener('click', this.outsideClickListener); + if (this.type == 'date') document.addEventListener('click', this.outsideClickListener); } disconnectedCallback(): void { document.removeEventListener('click', this.outsideClickListener); diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx index 90a764869..63fe86f0f 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx @@ -502,6 +502,79 @@ Refer to the [Accessibility](#accessibility) section for how to use keyboard for ] }, }, + { + header: 'Priority', + accessorKey: 'priority', + id: 'priority', + dataType: 'badge', + cellEditable: true, + cellEditorType: 'autocomplete', + cellEditorArgs: { + options: [ + { size: 'medium', type: 'counter', text: 'High', color: 'success' }, + { size: 'medium', type: 'counter', text: 'Low', color: 'danger' }, + { size: 'medium', type: 'counter', text: 'Medium', color: 'warning' }, + ] + }, +}, +{ + header: 'Email', + accessorKey: 'email', + id: 'email', + dataType: 'link', + size: 230, + minSize: 80, + cellEditable: true, + cellEditorType: 'autocomplete', + cellEditorArgs: { + options: [ + { display: 'Google', url: 'https://www.google.com' }, + { display: 'Yahoo', url: 'https://www.yahoo.com' }, + { display: 'Bing', url: 'https://www.bing.com' }, + ] + }, +}, +{ + header: 'Priority', + accessorKey: 'priority', + id: 'priority', + dataType: 'badge', + cellEditable: true, + cellEditorType: 'dropdown', + cellEditorArgs: { + options: [ + { size: 'medium', type: 'counter', display: 'High', color: 'success' }, + { size: 'medium', type: 'counter', display: 'Low', color: 'danger' }, + { size: 'medium', type: 'counter', display: 'Medium', color: 'warning' }, + ] + }, +}, +{ + header: 'Email', + accessorKey: 'email', + id: 'email', + dataType: 'link', + size: 230, + minSize: 80, + cellEditable: true, + cellEditorType: 'dropdown', + cellEditorArgs: { + options: [ + { display: 'Google', url: 'https://www.google.com' }, + { display: 'Yahoo', url: 'https://www.yahoo.com' }, + { display: 'Bing', url: 'https://www.bing.com' }, + ] + }, +}, +{ + header: 'Date', + accessorKey: 'date', + id: 'date', + dataType: 'date', + cellEditable: true, + cellEditorType: 'date', +}, + ``` ### Row Actions diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx index 2a60abcfc..ba4187f6e 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx @@ -790,8 +790,18 @@ CheckboxRowSelection.args = { }, data: makeData(7) }; -const EditableColumns =DefaultColumns.map(col =>{ - if(col.dataType === 'link') return col; +const DefaultColumnsWithPriority = [ + ...DefaultColumns, + { + header: 'Priority', + accessorKey: 'priority', + sortingFn: 'sortForBadge', + id: 'priority', + dataType: 'badge', + maxSize: 100, + }, +]; +const EditableColumns =DefaultColumnsWithPriority.map(col =>{ if(col.accessorKey === 'status'){ return {...col, cellEditable:true, cellEditorType: 'dropdown', @@ -803,6 +813,44 @@ const EditableColumns =DefaultColumns.map(col =>{ ] } }; } + if(col.accessorKey === 'firstName'){ + return {...col, cellEditable:true, + cellEditorType: 'autocomplete', + cellEditorArgs: { + options:[ + "Tom", + "Patrick", + "Jerry", + ], + }, + } +} +if(col.accessorKey === 'email'){ + return {...col, cellEditable:true, + cellEditorType: 'autocomplete', + cellEditorArgs: { + options:[ + { display: 'jerry', url: 'jerrymouse@example.com'}, + {display:'tomcat@example.com', url: 'tomcat@example.com'}, + {display:'patrickstar@example.com', url: 'sss'}, + ], + } +} +} +if (col.accessorKey === 'priority') { + return { + ...col, + cellEditable: true, + cellEditorType: 'dropdown', + cellEditorArgs: { + options: [ + { display: 'Low',type: 'counter', color: 'danger', size: 'medium'}, + { display: 'Medium',type: 'counter', color: 'primary', size: 'medium',}, + { display: 'High',type: 'counter', color: 'success', size: 'medium'}, + ], + }, + }; +} else return {...col, cellEditable: true}; }); export const InlineEditing = Template.bind({}); From f0a667f49ae8427370dc5aaa38c41d8148ab7b7c Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Mon, 29 Apr 2024 20:19:45 +0530 Subject: [PATCH 06/11] Update behavior --- .../modus-autocomplete.scss | 4 ++- .../modus-dropdown/modus-dropdown.scss | 2 +- .../modus-table-cell-editor.scss | 5 ++++ .../modus-table-cell-editor.tsx | 15 ++++++---- .../cell/modus-table-cell-editor/readme.md | 2 +- .../modus-table-cell-main.tsx | 2 +- .../modus-text-input/modus-text-input.scss | 2 +- .../modus-table/modus-table.stories.tsx | 30 +++++++++++-------- 8 files changed, 39 insertions(+), 23 deletions(-) diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss index 0b60b2918..440e7e01c 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss @@ -29,7 +29,7 @@ .chips-container { align-items: center; background-color: $modus-autocomplete-bg; - border: $rem-1px solid $modus-autocomplete-container-border-color; + border: var(--modus-autocomplete-border, #{$rem-1px solid $modus-autocomplete-container-border-color}); border-bottom-color: $modus-autocomplete-container-bottom-line-color; box-sizing: border-box; display: flex; @@ -57,6 +57,8 @@ height: auto !important; position: relative; + --input-font-size: var(--modus-autocomplete-font-size, #{12px}); + &::part(input-container) { border: none !important; } diff --git a/stencil-workspace/src/components/modus-dropdown/modus-dropdown.scss b/stencil-workspace/src/components/modus-dropdown/modus-dropdown.scss index 442780b81..ca1c72ca9 100644 --- a/stencil-workspace/src/components/modus-dropdown/modus-dropdown.scss +++ b/stencil-workspace/src/components/modus-dropdown/modus-dropdown.scss @@ -54,4 +54,4 @@ top: 0; } } -} \ No newline at end of file +} diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss index 955f06f33..15165d5e9 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss @@ -1,3 +1,8 @@ +:host { + --modus-autocomplete-border: none; + --modus-autocomplete-font-size: 14px; +} + .editor::part(input-container), .editor::part(input) { border: none !important; diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 5d2027045..73590c22c 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -26,12 +26,12 @@ import { ModusAutocompleteOption } from '../../../../modus-autocomplete/modus-au export class ModusTableCellEditor { @Prop() args: ModusTableCellEditorArgs; @Prop() dataType: string; - @Prop() value: string; + @Prop() value: any; @Prop() type: string; @Prop() valueChange: (newValue: string) => void; @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; - private editedValue: unknown; + private editedValue: any; private inputElement: HTMLElement; private outsideClickListener: (event: any) => void; @@ -155,23 +155,28 @@ export class ModusTableCellEditor { } renderAutocompleteInput(): JSX.Element[] { - let options; + let options, selectedOption; const args = (this.args as ModusTableCellDropdownEditorArgs)?.options; if (this.dataType === 'badge') { options = args.map((option: any) => option.text) as ModusAutocompleteOption[] | string[]; + selectedOption = this.value['text']; } else if (this.dataType === 'link') { options = args.map((option: any) => option.display) as ModusAutocompleteOption[] | string[]; + selectedOption = this.value['display']; } else { options = (args || []) as ModusAutocompleteOption[] | string[]; + selectedOption = this.editedValue; } return ( e.stopPropagation()} options={options} + showOptionsOnFocus onBlur={this.handleBlur} + onKeyDown={(e) => e.stopPropagation()} onOptionSelected={(e: CustomEvent) => { if (this.dataType === 'badge') { args.map((option: any) => { @@ -189,7 +194,7 @@ export class ModusTableCellEditor { this.editedValue = e.detail; } }} - // value={selectedOption} + value={selectedOption} // onKeyDown={(e) => e.stopPropagation()} > ); diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md index 4dfcc6088..73e658631 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md @@ -13,7 +13,7 @@ | `dataType` | `data-type` | | `string` | `undefined` | | `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | | `type` | `type` | | `string` | `undefined` | -| `value` | `value` | | `string` | `undefined` | +| `value` | `value` | | `any` | `undefined` | | `valueChange` | -- | | `(newValue: string) => void` | `undefined` | diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 1b37e973c..aacafb877 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -198,7 +198,7 @@ export class ModusTableCellMain { {this.editMode ? ( this.handleCellEditorValueChange(newVal, valueString)} diff --git a/stencil-workspace/src/components/modus-text-input/modus-text-input.scss b/stencil-workspace/src/components/modus-text-input/modus-text-input.scss index 0361550f2..e4d532615 100644 --- a/stencil-workspace/src/components/modus-text-input/modus-text-input.scss +++ b/stencil-workspace/src/components/modus-text-input/modus-text-input.scss @@ -57,7 +57,7 @@ border: none; color: $modus-input-color; font-family: $primary-font; - font-size: $rem-12px; + font-size: var(--input-font-size, #{$rem-12px}); outline: none; padding: 0 $rem-8px; width: 100%; diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx index ba4187f6e..e66705da6 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx @@ -21,6 +21,8 @@ function newPerson() { const firstName = Names[namesIndex].split(' ')[0]; const lastName = Names[namesIndex].split(' ')[1]; const email: string = `${firstName}${lastName}@example.com`.toLowerCase(); + const randomDate = new Date(randomNumber(1990, 2020), randomNumber(0, 11), randomNumber(1, 30)); + const formattedDate = `${randomDate.getFullYear()}-${(randomDate.getMonth() + 1).toString().padStart(2, '0')}-${randomDate.getDate().toString().padStart(2, '0')}`; return { firstName, lastName, @@ -29,7 +31,7 @@ function newPerson() { email:{ display: email, url: email }, progress: randomNumber(1, 100) * 100, status: randomNumber(1, 100) > 66 ? 'Verified' : randomNumber(0, 100) > 33 ? 'Pending' : 'Rejected', - createdAt: new Date(randomNumber(1990, 2020), randomNumber(0, 11), randomNumber(1, 30)).toDateString(), + createdAt: formattedDate, priority: Priorities[ randomNumber(1, 100) > 66 ? 'high': randomNumber(0, 100) > 33 ? 'medium' @@ -271,7 +273,7 @@ const DefaultColumns = [ header: 'Created At', accessorKey: 'createdAt', id: 'createdAt', - dataType: 'string', + dataType: 'date', size: 150, minSize: 150, }, @@ -814,26 +816,20 @@ const EditableColumns =DefaultColumnsWithPriority.map(col =>{ } }; } if(col.accessorKey === 'firstName'){ + const nameOptions = Names.map(name => (name.split(' ')[0])); return {...col, cellEditable:true, cellEditorType: 'autocomplete', - cellEditorArgs: { - options:[ - "Tom", - "Patrick", - "Jerry", - ], + cellEditorArgs: { + options:nameOptions, }, } } if(col.accessorKey === 'email'){ + const emailOptions = Names.map(name => ({display: `${name.split(' ')[0]}${name.split(' ')[1]}@example.com`, url: `${name.split(' ')[0]}${name.split(' ')[1]}@example.com`})); return {...col, cellEditable:true, cellEditorType: 'autocomplete', cellEditorArgs: { - options:[ - { display: 'jerry', url: 'jerrymouse@example.com'}, - {display:'tomcat@example.com', url: 'tomcat@example.com'}, - {display:'patrickstar@example.com', url: 'sss'}, - ], + options:emailOptions, } } } @@ -850,6 +846,14 @@ if (col.accessorKey === 'priority') { ], }, }; +} +if(col.accessorKey==='createdAt'){ + return {...col, cellEditable:true, + cellEditorType: 'date', + cellEditorArgs: { + format: 'yyyy-mm-dd', + }, + }; } else return {...col, cellEditable: true}; }); From e6daf3c7d4f9fa0c614b9f1f7f429b63d4635f91 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Tue, 30 Apr 2024 14:50:11 +0530 Subject: [PATCH 07/11] Align autocomplete cell --- .../modus-table-cell-editor.scss | 4 ++ .../modus-table-cell-editor.tsx | 60 ++++++++++--------- 2 files changed, 35 insertions(+), 29 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss index 15165d5e9..412aa382a 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss @@ -22,3 +22,7 @@ table.density-compact { height: calc($rem-24px - $rem-4px) !important; } } +.autocomplete-container { + margin-top: 5px; + margin-left: 4px; +} diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 73590c22c..c4ec6789a 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -168,35 +168,37 @@ export class ModusTableCellEditor { selectedOption = this.editedValue; } return ( - e.stopPropagation()} - options={options} - showOptionsOnFocus - onBlur={this.handleBlur} - onKeyDown={(e) => e.stopPropagation()} - onOptionSelected={(e: CustomEvent) => { - if (this.dataType === 'badge') { - args.map((option: any) => { - if (option.text == e.detail) { - this.editedValue = option; - } - }); - } else if (this.dataType === 'link') { - args.map((option: any) => { - if (option.display == e.detail) { - this.editedValue = option; - } - }); - } else { - this.editedValue = e.detail; - } - }} - value={selectedOption} - // onKeyDown={(e) => e.stopPropagation()} - > +
+ e.stopPropagation()} + options={options} + showOptionsOnFocus + onBlur={this.handleBlur} + onKeyDown={(e) => e.stopPropagation()} + onOptionSelected={(e: CustomEvent) => { + if (this.dataType === 'badge') { + args.map((option: any) => { + if (option.text == e.detail) { + this.editedValue = option; + } + }); + } else if (this.dataType === 'link') { + args.map((option: any) => { + if (option.display == e.detail) { + this.editedValue = option; + } + }); + } else { + this.editedValue = e.detail; + } + }} + value={selectedOption} + // onKeyDown={(e) => e.stopPropagation()} + > +
); } From 79bb111a0e721c33def64e330f3b3a7b3ab782e0 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Tue, 30 Apr 2024 15:50:57 +0530 Subject: [PATCH 08/11] Update css --- .../cell/modus-table-cell-editor/modus-table-cell-editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss index 412aa382a..a7d27a7b4 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss @@ -22,7 +22,8 @@ table.density-compact { height: calc($rem-24px - $rem-4px) !important; } } + .autocomplete-container { - margin-top: 5px; margin-left: 4px; + margin-top: 5px; } From 3e81f631dd75b492ccc3a4a3093b8726bb226905 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Wed, 5 Jun 2024 11:11:04 +0530 Subject: [PATCH 09/11] Update storybook and code logic --- .../modus-autocomplete.scss | 5 +-- .../modus-autocomplete.vars.scss | 1 + .../modus-date-input/modus-date-input.scss | 4 +-- .../components/modus-select/modus-select.scss | 4 +-- .../modus-table/models/modus-table.models.ts | 26 ++++++++++++--- .../components/modus-table/modus-table.tsx | 5 +++ .../modus-table-cell-editor.scss | 2 ++ .../modus-table-cell-editor.tsx | 33 ++++++++++--------- .../cell/modus-table-cell-editor/readme.md | 16 ++++----- .../src/components/modus-table/readme.md | 1 + .../modus-table-storybook-docs.mdx | 21 +++++++----- 11 files changed, 76 insertions(+), 42 deletions(-) diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss index 984c43d33..ae545ba55 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss @@ -166,6 +166,7 @@ } .autocomplete .chips-container:focus-within { - border-color: $modus-autocomplete-container-border-active-color; - box-shadow: 0 0 0 1px $modus-autocomplete-container-border-active-color; + border: var(--modus-autocomplete-border-active, #{$rem-1px solid $modus-autocomplete-container-border-active-color}); + box-shadow: 0 0 0 1px + var(--modus-autocomplete-border-active, #{$rem-1px solid $modus-autocomplete-container-border-active-color}); } diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.vars.scss b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.vars.scss index 8d1a52f51..3a15768d9 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.vars.scss +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.vars.scss @@ -5,6 +5,7 @@ $modus-autocomplete-options-border-active-color: var(--modus-list-item-border-co $modus-autocomplete-no-results-message-color: var(--modus-autocomplete-no-results-message-color, #252a2e) !default; $modus-autocomplete-no-results-subtext-color: var(--modus-autocomplete-no-results-subtext-color, #252a2e) !default; $modus-autocomplete-container-border-color: var(--modus-input-border-bottom-color, #6a6e79) !default; +$modus-autocomplete-container-bottom-line-color: var(--modus-input-bottom-line-color, #6a6e79) !default; $modus-autocomplete-container-border-active-color: var(--modus-input-border-active-line-color, #217cbb) !default; $modus-autocomplete-bg: var(--modus-autocomplete-bg, #fff) !default; $modus-autocomplete-label-color: var(--modus-autocomplete-label-color, #464b52) !default; diff --git a/stencil-workspace/src/components/modus-date-input/modus-date-input.scss b/stencil-workspace/src/components/modus-date-input/modus-date-input.scss index c8581aa51..d6e67b08b 100644 --- a/stencil-workspace/src/components/modus-date-input/modus-date-input.scss +++ b/stencil-workspace/src/components/modus-date-input/modus-date-input.scss @@ -95,8 +95,8 @@ } &:focus-within { - border-color: $modus-input-bottom-line-active-color; - box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color; + border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); + box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); svg.icon-calendar path { fill: $modus-input-bottom-line-active-color; diff --git a/stencil-workspace/src/components/modus-select/modus-select.scss b/stencil-workspace/src/components/modus-select/modus-select.scss index 41dd6af6c..2f0faaa1d 100644 --- a/stencil-workspace/src/components/modus-select/modus-select.scss +++ b/stencil-workspace/src/components/modus-select/modus-select.scss @@ -61,8 +61,8 @@ } &:focus-within { - border-color: $modus-input-bottom-line-active-color; - box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color; + border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); + box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); } &.large { diff --git a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts b/stencil-workspace/src/components/modus-table/models/modus-table.models.ts index 47bf2caeb..435fcacd8 100644 --- a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts +++ b/stencil-workspace/src/components/modus-table/models/modus-table.models.ts @@ -16,9 +16,14 @@ import { COLUMN_DEF_DATATYPE_INTEGER, COLUMN_DEF_DATATYPE_LINK, COLUMN_DEF_DATATYPE_TEXT, - CELL_EDIT_TYPE_DROPDOWN, COLUMN_DEF_DATATYPE_BADGE, + CELL_EDIT_TYPE_SELECT, + CELL_EDIT_TYPE_DATE, + CELL_EDIT_TYPE_AUTOCOMPLETE, + CELL_EDIT_TYPE_INT, + CELL_EDIT_TYPE_TEXT, } from '../modus-table.constants'; +import { ModusAutocompleteOption } from '../../modus-autocomplete/modus-autocomplete'; export type ModusTableRowData = RowData; export type ModusTableSortingState = SortingState; @@ -37,12 +42,23 @@ export type ModusTableColumnDataType = | typeof COLUMN_DEF_DATATYPE_BADGE; // | typeof COLUMN_DEF_DATATYPE_DATE; -export type ModusTableCellEditorType = typeof CELL_EDIT_TYPE_DROPDOWN; -// typeof CELL_EDIT_TYPE_AUTOCOMPLETE | +export type ModusTableCellEditorType = + | typeof CELL_EDIT_TYPE_SELECT + | typeof CELL_EDIT_TYPE_TEXT + | typeof CELL_EDIT_TYPE_INT + | typeof CELL_EDIT_TYPE_AUTOCOMPLETE + | typeof CELL_EDIT_TYPE_DATE; export type ModusTableCellDateEditorArgs = { format: string }; -export type ModusTableCellDropdownEditorArgs = { options: unknown[] }; -export type ModusTableCellEditorArgs = ModusTableCellDropdownEditorArgs | ModusTableCellDateEditorArgs; +export type ModusTableCellSelectEditorArgs = { options: unknown[]; optionsDisplayProp?: string }; +export type ModusTableCellAutocompleteEditorArgs = { + options: ModusAutocompleteOption[]; + noResultsFoundText: string; + noResultsFoundSubtext: string; + showNoResultsFoundMessage: boolean; + showOptionsOnFocus: boolean; +}; +export type ModusTableCellEditorArgs = ModusTableCellSelectEditorArgs | ModusTableCellDateEditorArgs; export type ModusTableSortingFunction = SortingFnOption | 'sortForHyperlink' | 'sortForBadge'; diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index 401fefdcd..f938f6075 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/stencil-workspace/src/components/modus-table/modus-table.tsx @@ -86,6 +86,10 @@ import { createGuid } from '../../utils/utils'; export class ModusTable { @Element() element: HTMLElement; + @Prop() editableCellId: string[] = []; + @Watch('editableCellId') onEditableCellIdsChange(newVal: string[]) { + console.log('editableCellIds', newVal); + } /** (Required) To display headers in the table. */ @Prop({ mutable: true }) columns!: ModusTableColumn[]; @Watch('columns') onColumnsChange(newVal: ModusTableColumn[]) { @@ -373,6 +377,7 @@ export class ModusTable { this.setTableState(initialTableState); this.onRowsExpandableChange(this.rowsExpandable); this.initializeTable(); + console.log('editableCellId232s', this.editableCellId); } componentWillRender(): void { diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss index a7d27a7b4..854525cee 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss @@ -1,6 +1,8 @@ :host { --modus-autocomplete-border: none; + --modus-autocomplete-border-active: none; --modus-autocomplete-font-size: 14px; + --modus-input-border-color: none; } .editor::part(input-container), diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index c4ec6789a..917b9a351 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -4,7 +4,7 @@ import { KEYBOARD_ENTER, CELL_EDIT_TYPE_AUTOCOMPLETE, CELL_EDIT_TYPE_DATE, - CELL_EDIT_TYPE_DROPDOWN, + CELL_EDIT_TYPE_SELECT, CELL_EDIT_TYPE_TEXT, CELL_EDIT_TYPE_INT, KEYBOARD_UP, @@ -12,8 +12,9 @@ import { } from '../../../modus-table.constants'; import { + ModusTableCellAutocompleteEditorArgs, ModusTableCellDateEditorArgs, - ModusTableCellDropdownEditorArgs, + ModusTableCellSelectEditorArgs, ModusTableCellEditorArgs, } from '../../../models/modus-table.models'; import { ModusDateInputEventDetails } from '../../../../modus-date-input/utils/modus-date-input.models'; @@ -100,10 +101,12 @@ export class ModusTableCellEditor { ); } - renderDropdownInput(): JSX.Element[] { + renderSelectInput(): JSX.Element[] { const valueKey = 'display'; - const options = (this.args as ModusTableCellDropdownEditorArgs)?.options || []; - const selectedOption = options.find((option) => option[valueKey] === this.value) as any; + const args = this.args as ModusTableCellSelectEditorArgs; + const options = args?.options || []; + const optionsDisplayProp = args?.optionsDisplayProp || valueKey; + const selectedOption = options.find((option) => option[optionsDisplayProp] === this.value) as any; function handleEnter(e: KeyboardEvent, callback: (e: KeyboardEvent) => void) { const code = e.key.toLowerCase(); @@ -117,7 +120,7 @@ export class ModusTableCellEditor { option.text) as ModusAutocompleteOption[] | string[]; + options = args?.options.map((option: any) => option.text) as ModusAutocompleteOption[] | string[]; selectedOption = this.value['text']; } else if (this.dataType === 'link') { - options = args.map((option: any) => option.display) as ModusAutocompleteOption[] | string[]; + options = args?.options.map((option: any) => option.display) as ModusAutocompleteOption[] | string[]; selectedOption = this.value['display']; } else { - options = (args || []) as ModusAutocompleteOption[] | string[]; + options = (args?.options || []) as ModusAutocompleteOption[] | string[]; selectedOption = this.editedValue; } return ( @@ -175,18 +179,17 @@ export class ModusTableCellEditor { size="medium" //onClick={(e: MouseEvent) => e.stopPropagation()} options={options} - showOptionsOnFocus onBlur={this.handleBlur} onKeyDown={(e) => e.stopPropagation()} onOptionSelected={(e: CustomEvent) => { if (this.dataType === 'badge') { - args.map((option: any) => { + args?.options.map((option: any) => { if (option.text == e.detail) { this.editedValue = option; } }); } else if (this.dataType === 'link') { - args.map((option: any) => { + args?.options.map((option: any) => { if (option.display == e.detail) { this.editedValue = option; } @@ -204,8 +207,8 @@ export class ModusTableCellEditor { renderEditor(): JSX.Element[] { switch (this.type) { - case CELL_EDIT_TYPE_DROPDOWN: - return this.renderDropdownInput(); + case CELL_EDIT_TYPE_SELECT: + return this.renderSelectInput(); case CELL_EDIT_TYPE_AUTOCOMPLETE: return this.renderAutocompleteInput(); case CELL_EDIT_TYPE_DATE: diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md index 73e658631..1d46fb46c 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md @@ -7,14 +7,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ----------- | ----------- | ------------------------------------------------ | ----------- | -| `args` | -- | | `{ format: string; } \| { options: unknown[]; }` | `undefined` | -| `dataType` | `data-type` | | `string` | `undefined` | -| `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | -| `type` | `type` | | `string` | `undefined` | -| `value` | `value` | | `any` | `undefined` | -| `valueChange` | -- | | `(newValue: string) => void` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | ----------- | ----------- | ----------------------------------------------------------------------------- | ----------- | +| `args` | -- | | `{ format: string; } \| { options: unknown[]; optionsDisplayProp?: string; }` | `undefined` | +| `dataType` | `data-type` | | `string` | `undefined` | +| `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | +| `type` | `type` | | `string` | `undefined` | +| `value` | `value` | | `any` | `undefined` | +| `valueChange` | -- | | `(newValue: string) => void` | `undefined` | ## Dependencies diff --git a/stencil-workspace/src/components/modus-table/readme.md b/stencil-workspace/src/components/modus-table/readme.md index eae245b38..b55196e17 100644 --- a/stencil-workspace/src/components/modus-table/readme.md +++ b/stencil-workspace/src/components/modus-table/readme.md @@ -16,6 +16,7 @@ | `defaultSort` | -- | (Optional) To set the default sorting for the table. | `ColumnSort` | `undefined` | | `density` | `density` | (optional) The density of the table. | `"comfortable" \| "compact" \| "relaxed"` | `'relaxed'` | | `displayOptions` | -- | (Optional) To control display options of table. | `ModusTableDisplayOptions` | `{ borderless: false, cellBorderless: false, }` | +| `editableCellId` | -- | | `string[]` | `[]` | | `fullWidth` | `full-width` | | `boolean` | `false` | | `hover` | `hover` | (Optional) To enable row hover in table. | `boolean` | `false` | | `manualPaginationOptions` | -- | (Optional) To enable manual pagination mode. When enabled, the table will not automatically paginate rows, instead will expect the current page index and other details to be passed. | `ModusTableManualPaginationOptions` | `undefined` | diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx index 63fe86f0f..17fe1a5b9 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx @@ -481,7 +481,7 @@ To select rows, users can use the checkbox provided on each row. Normally, the M ### Inline Editing -To enable Cell Editing for a Column use the `cellEditable` property on the Column object. The component renders a text box by default based on column's `dataType`. To render a dropdown, use the `cellEditorType` property on the Column object. The `cellEditorArgs` property can be used to pass additional arguments to the editor. After editing a cell, the table automatically updates the `data` and emits a `cellValueChanged` event. +To enable Cell Editing for a Column use the `cellEditable` property on the Column object. The component renders a text box by default based on column's `dataType`. To render a select, use the `cellEditorType` property on the Column object. The `cellEditorArgs` property can be used to pass additional arguments to the editor. After editing a cell, the table automatically updates the `data` and emits a `cellValueChanged` event. Note: If rows are nested, the table will be able to save the changes up to 2 levels of nested data. Refer to the [Accessibility](#accessibility) section for how to use keyboard for inline editing. @@ -493,7 +493,7 @@ Refer to the [Accessibility](#accessibility) section for how to use keyboard for dataType: 'text', minSize: 80, cellEditable:true, - cellEditorType: 'dropdown', + cellEditorType: 'select', cellEditorArgs: { options:[ { display: 'Verified' }, @@ -540,7 +540,7 @@ Refer to the [Accessibility](#accessibility) section for how to use keyboard for id: 'priority', dataType: 'badge', cellEditable: true, - cellEditorType: 'dropdown', + cellEditorType: 'select', cellEditorArgs: { options: [ { size: 'medium', type: 'counter', display: 'High', color: 'success' }, @@ -557,7 +557,7 @@ Refer to the [Accessibility](#accessibility) section for how to use keyboard for size: 230, minSize: 80, cellEditable: true, - cellEditorType: 'dropdown', + cellEditorType: 'select', cellEditorArgs: { options: [ { display: 'Google', url: 'https://www.google.com' }, @@ -609,10 +609,15 @@ type ModusTableColumnDataType = | typeof COLUMN_DEF_DATATYPE_TEXT | typeof COLUMN_DEF_DATATYPE_INTEGER | typeof COLUMN_DEF_DATATYPE_LINK; -type ModusTableCellEditorType = typeof CELL_EDIT_TYPE_DROPDOWN; +type ModusTableCellEditorType = + | typeof CELL_EDIT_TYPE_SELECT + | typeof CELL_EDIT_TYPE_TEXT + | typeof CELL_EDIT_TYPE_INT + | typeof CELL_EDIT_TYPE_AUTOCOMPLETE + | typeof CELL_EDIT_TYPE_DATE; type ModusTableCellDateEditorArgs = { format: string }; -type ModusTableCellDropdownEditorArgs = { options: unknown[] }; -type ModusTableCellEditorArgs = ModusTableCellDropdownEditorArgs | ModusTableCellDateEditorArgs; +type ModusTableCellSelectEditorArgs = { options: unknown[] }; +type ModusTableCellEditorArgs = ModusTableCellSelectEditorArgs | ModusTableCellDateEditorArgs; type ModusTableDataUpdaterProps = { rowId: string; accessorKey: string; newValue: string; oldValue?: string }; type ModusTableSortingFunction = SortingFnOption | 'sortForHyperlink' | 'sortForBadge'; @@ -713,7 +718,7 @@ Users can use keyboard navigation to perform different actions. | Column Reorder | Users can navigate to the column to be reorder by using the Tab key. By pressing Enter key selects the column header, to move to the desired location user can use `left`/`right` keys and the column can be dropped by Enter key. | | Column Visibility | The meatball icon buttom will get focus by using the Tab key. By pressing Enter or Space, a dropdown will be opened; press the Escape key to close the dropdown. Using `Tab or Shift+Tab` / `ArrowUp or ArrowDown`, column checkboxes/items can get focus to change state by pressing the Enter or Space. | | Cell Navigation | Table cells can be navigated using keys like Tab, `Shift+Tab`, `ArrowUp`, and `ArrowDown`. Additionally, the Tab key can be used to focus on elements inside a cell. | -| Inline Editing | When a cell is in focus, pressing the Enter key will activate the cell editor. The cell's value will be saved either when the focus shifts to another cell or when the Enter key is pressed again, which will also move the focus to the cell below in the same row. Escape key reverts the cell value to its original state and closes the editor. Note: Dropdown cell editor saves the value only when the cell loses focus. | +| Inline Editing | When a cell is in focus, pressing the Enter key will activate the cell editor. The cell's value will be saved either when the focus shifts to another cell or when the Enter key is pressed again, which will also move the focus to the cell below in the same row. Escape key reverts the cell value to its original state and closes the editor. Note: Select cell editor saves the value only when the cell loses focus. | ## Properties From a3dbb68de81388905207547c7215895a30cad688 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Wed, 5 Jun 2024 11:11:32 +0530 Subject: [PATCH 10/11] Update input component css --- .../src/components/modus-number-input/modus-number-input.scss | 4 ++-- .../src/components/modus-table/modus-table.constants.ts | 4 ++-- .../src/components/modus-text-input/modus-text-input.scss | 4 ++-- .../stories/components/modus-table/modus-table.stories.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/stencil-workspace/src/components/modus-number-input/modus-number-input.scss b/stencil-workspace/src/components/modus-number-input/modus-number-input.scss index c29078442..45c649153 100644 --- a/stencil-workspace/src/components/modus-number-input/modus-number-input.scss +++ b/stencil-workspace/src/components/modus-number-input/modus-number-input.scss @@ -58,8 +58,8 @@ } &:focus-within { - border-color: $modus-input-bottom-line-active-color; - box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color; + border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); + box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); } &.error { diff --git a/stencil-workspace/src/components/modus-table/modus-table.constants.ts b/stencil-workspace/src/components/modus-table/modus-table.constants.ts index a7149fd94..46df38fb3 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.constants.ts +++ b/stencil-workspace/src/components/modus-table/modus-table.constants.ts @@ -22,14 +22,14 @@ export const COLUMN_DEF_DATATYPE_BADGE = 'badge'; export const CELL_EDIT_TYPE_TEXT = COLUMN_DEF_DATATYPE_TEXT; export const CELL_EDIT_TYPE_INT = COLUMN_DEF_DATATYPE_INTEGER; -export const CELL_EDIT_TYPE_DROPDOWN = 'dropdown'; +export const CELL_EDIT_TYPE_SELECT = 'select'; export const CELL_EDIT_TYPE_AUTOCOMPLETE = 'autocomplete'; export const CELL_EDIT_TYPE_DATE = COLUMN_DEF_DATATYPE_DATE; export const ALLOWED_CELL_EDIT_TYPES = [ CELL_EDIT_TYPE_TEXT, CELL_EDIT_TYPE_INT, - CELL_EDIT_TYPE_DROPDOWN, + CELL_EDIT_TYPE_SELECT, CELL_EDIT_TYPE_AUTOCOMPLETE, CELL_EDIT_TYPE_DATE, ]; diff --git a/stencil-workspace/src/components/modus-text-input/modus-text-input.scss b/stencil-workspace/src/components/modus-text-input/modus-text-input.scss index 9fe8d4e7f..47b8ea66b 100644 --- a/stencil-workspace/src/components/modus-text-input/modus-text-input.scss +++ b/stencil-workspace/src/components/modus-text-input/modus-text-input.scss @@ -105,8 +105,8 @@ } &:focus-within { - border-color: $modus-input-bottom-line-active-color; - box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color; + border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); + box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color}); } &.error { diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx index e66705da6..0c2923f6f 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx @@ -806,7 +806,7 @@ const DefaultColumnsWithPriority = [ const EditableColumns =DefaultColumnsWithPriority.map(col =>{ if(col.accessorKey === 'status'){ return {...col, cellEditable:true, - cellEditorType: 'dropdown', + cellEditorType: 'select', cellEditorArgs: { options:[ { display: 'Verified' }, @@ -837,7 +837,7 @@ if (col.accessorKey === 'priority') { return { ...col, cellEditable: true, - cellEditorType: 'dropdown', + cellEditorType: 'select', cellEditorArgs: { options: [ { display: 'Low',type: 'counter', color: 'danger', size: 'medium'}, From 317ece504c1b4a26d766c2fc50a7558254afed2f Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Fri, 7 Jun 2024 13:17:34 +0530 Subject: [PATCH 11/11] Update logic --- .../components/modus-table/modus-table.tsx | 5 - .../cell/modus-table-cell-badge-element.tsx | 13 ++- .../modus-table-cell-editor.tsx | 92 ++++++++++--------- .../cell/modus-table-cell-editor/readme.md | 2 +- .../modus-table-cell-main.tsx | 10 +- .../src/components/modus-table/readme.md | 1 - 6 files changed, 68 insertions(+), 55 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index 5cf574d5a..fa77d9782 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/stencil-workspace/src/components/modus-table/modus-table.tsx @@ -86,10 +86,6 @@ import { createGuid } from '../../utils/utils'; export class ModusTable { @Element() element: HTMLElement; - @Prop() editableCellId: string[] = []; - @Watch('editableCellId') onEditableCellIdsChange(newVal: string[]) { - console.log('editableCellIds', newVal); - } /** (Required) To display headers in the table. */ @Prop({ mutable: true }) columns!: ModusTableColumn[]; @Watch('columns') onColumnsChange(newVal: ModusTableColumn[]) { @@ -377,7 +373,6 @@ export class ModusTable { this.setTableState(initialTableState); this.onRowsExpandableChange(this.rowsExpandable); this.initializeTable(); - console.log('editableCellId232s', this.editableCellId); } componentWillRender(): void { diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-badge-element.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-badge-element.tsx index c2b09596d..d57df4aad 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-badge-element.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-badge-element.tsx @@ -3,15 +3,24 @@ import { h, // eslint-disable-line @typescript-eslint/no-unused-vars } from '@stencil/core'; import { ModusTableCellBadge } from '../../models/modus-table.models'; +import { KEYBOARD_ENTER, KEYBOARD_SPACE } from '../../modus-table.constants'; interface ModusTableCellBadgeProps { badge: ModusTableCellBadge; onBadgeClick?: (badge: ModusTableCellBadge) => void; } -export const ModusTableCellBadgeElement: FunctionalComponent = ({ badge }) => { +export const ModusTableCellBadgeElement: FunctionalComponent = ({ badge, onBadgeClick }) => { + function handleBadgeKeyDown(e: KeyboardEvent) { + const key = e.key.toLowerCase(); + if (key === KEYBOARD_ENTER || key === KEYBOARD_SPACE) { + onBadgeClick(badge); + e.stopImmediatePropagation(); + } + } + return ( -
+
onBadgeClick(badge)} onKeyDown={() => handleBadgeKeyDown}> {badge.text} diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 917b9a351..ef543f206 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -1,5 +1,5 @@ // eslint-disable-next-line -import { Host, JSX, Component, Prop, h } from '@stencil/core'; +import { Host, JSX, Component, Prop, h, Listen } from '@stencil/core'; import { KEYBOARD_ENTER, CELL_EDIT_TYPE_AUTOCOMPLETE, @@ -18,7 +18,6 @@ import { ModusTableCellEditorArgs, } from '../../../models/modus-table.models'; import { ModusDateInputEventDetails } from '../../../../modus-date-input/utils/modus-date-input.models'; -import { ModusAutocompleteOption } from '../../../../modus-autocomplete/modus-autocomplete'; @Component({ tag: 'modus-table-cell-editor', @@ -27,31 +26,34 @@ import { ModusAutocompleteOption } from '../../../../modus-autocomplete/modus-au export class ModusTableCellEditor { @Prop() args: ModusTableCellEditorArgs; @Prop() dataType: string; - @Prop() value: any; + @Prop() value: unknown; @Prop() type: string; @Prop() valueChange: (newValue: string) => void; @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; - private editedValue: any; + private editedValue: unknown; private inputElement: HTMLElement; - private outsideClickListener: (event: any) => void; connectedCallback(): void { this.editedValue = this.value; } componentDidLoad(): void { - if (this.inputElement['focusInput']) this.inputElement['focusInput'](); - - this.outsideClickListener = (event) => { - if (!this.inputElement.contains(event.target)) { - this.handleBlur(); - } - }; - if (this.type == 'date') document.addEventListener('click', this.outsideClickListener); + if (this.inputElement['focusInput']) { + this.inputElement['focusInput'](); + } } - disconnectedCallback(): void { - document.removeEventListener('click', this.outsideClickListener); + + @Listen('click', { target: 'document' }) + handleDocumentClick(event: MouseEvent) { + if (this.type != 'date') { + return; + } + + const target = event.target as HTMLElement; + if (!this.inputElement.contains(target)) { + this.handleBlur(); + } } handleBlur: () => void = () => { @@ -79,7 +81,7 @@ export class ModusTableCellEditor { return ( ) => (this.editedValue = e.detail)} onBlur={this.handleBlur} onKeyDown={this.handleKeyDown} @@ -106,7 +108,7 @@ export class ModusTableCellEditor { const args = this.args as ModusTableCellSelectEditorArgs; const options = args?.options || []; const optionsDisplayProp = args?.optionsDisplayProp || valueKey; - const selectedOption = options.find((option) => option[optionsDisplayProp] === this.value) as any; + const selectedOption = options.find((option) => option[optionsDisplayProp] === this.value) as unknown; function handleEnter(e: KeyboardEvent, callback: (e: KeyboardEvent) => void) { const code = e.key.toLowerCase(); @@ -126,13 +128,14 @@ export class ModusTableCellEditor { onInputBlur={this.handleBlur} onKeyDown={(e) => handleEnter(e, this.handleKeyDown)} onValueChange={(e: CustomEvent) => { + const detail = e.detail as { display: string; [key: string]: unknown }; if (this.dataType === 'badge') { - const { display, ...restProps } = e.detail as any; + const { display, ...restProps } = detail; this.editedValue = { ...restProps, text: display }; } else if (this.dataType === 'link') { - this.editedValue = e.detail; + this.editedValue = detail; } else { - this.editedValue = e.detail[valueKey]; + this.editedValue = detail[valueKey]; } }}>
@@ -149,7 +152,7 @@ export class ModusTableCellEditor { format={format} size="large" show-calendar-icon="true" - value={this.value} + value={this.value as string} onValueChange={(e: CustomEvent) => { this.editedValue = e.detail[valueKey]; }}> @@ -158,49 +161,48 @@ export class ModusTableCellEditor { } renderAutocompleteInput(): JSX.Element[] { - let options, selectedOption; const args = this.args as ModusTableCellAutocompleteEditorArgs; - // const { noResultsFoundText, noResultsFoundSubtext, showNoResultsFoundMessage, showOptionsOnFocus } = args; + let options: string[] = []; + let selectedOption = ''; + if (this.dataType === 'badge') { - options = args?.options.map((option: any) => option.text) as ModusAutocompleteOption[] | string[]; - selectedOption = this.value['text']; + options = args?.options.map((option) => (option as unknown as { text: string }).text); + selectedOption = (this.value as { text: string })?.text || ''; } else if (this.dataType === 'link') { - options = args?.options.map((option: any) => option.display) as ModusAutocompleteOption[] | string[]; - selectedOption = this.value['display']; + options = args?.options.map((option) => (option as unknown as { display: string }).display); + selectedOption = (this.value as { display: string })?.display || ''; } else { - options = (args?.options || []) as ModusAutocompleteOption[] | string[]; - selectedOption = this.editedValue; + options = (args?.options || []) as unknown as string[]; + selectedOption = this.editedValue as string; } + return (
e.stopPropagation()} options={options} onBlur={this.handleBlur} onKeyDown={(e) => e.stopPropagation()} onOptionSelected={(e: CustomEvent) => { + const selectedDetail = e.detail; + if (this.dataType === 'badge') { - args?.options.map((option: any) => { - if (option.text == e.detail) { - this.editedValue = option; - } - }); + const selectedOption = args?.options.find( + (option) => (option as unknown as { text: string }).text === selectedDetail + ); + this.editedValue = selectedOption; } else if (this.dataType === 'link') { - args?.options.map((option: any) => { - if (option.display == e.detail) { - this.editedValue = option; - } - }); + const selectedOption = args?.options.find( + (option) => (option as unknown as { display: string }).display === selectedDetail + ); + this.editedValue = selectedOption; } else { - this.editedValue = e.detail; + this.editedValue = selectedDetail; } }} - value={selectedOption} - // onKeyDown={(e) => e.stopPropagation()} - > + value={selectedOption}>
); } diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md index 1d46fb46c..2fa317ea8 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md @@ -13,7 +13,7 @@ | `dataType` | `data-type` | | `string` | `undefined` | | `keyDown` | -- | | `(e: KeyboardEvent, newValue: string) => void` | `undefined` | | `type` | `type` | | `string` | `undefined` | -| `value` | `value` | | `any` | `undefined` | +| `value` | -- | | `unknown` | `undefined` | | `valueChange` | -- | | `(newValue: string) => void` | `undefined` | diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index aacafb877..e61d8c2d7 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -170,12 +170,20 @@ export class ModusTableCellMain { { + this.cellEl.focus(); cellLinkClick.emit(link); }} /> ); } else if (cellDataType === COLUMN_DEF_DATATYPE_BADGE) { - return ; + return ( + { + this.cellEl.focus(); + }} + /> + ); } else { return CellFormatter(this.cell.column.columnDef.cell, this.cell.getContext()); } diff --git a/stencil-workspace/src/components/modus-table/readme.md b/stencil-workspace/src/components/modus-table/readme.md index b55196e17..eae245b38 100644 --- a/stencil-workspace/src/components/modus-table/readme.md +++ b/stencil-workspace/src/components/modus-table/readme.md @@ -16,7 +16,6 @@ | `defaultSort` | -- | (Optional) To set the default sorting for the table. | `ColumnSort` | `undefined` | | `density` | `density` | (optional) The density of the table. | `"comfortable" \| "compact" \| "relaxed"` | `'relaxed'` | | `displayOptions` | -- | (Optional) To control display options of table. | `ModusTableDisplayOptions` | `{ borderless: false, cellBorderless: false, }` | -| `editableCellId` | -- | | `string[]` | `[]` | | `fullWidth` | `full-width` | | `boolean` | `false` | | `hover` | `hover` | (Optional) To enable row hover in table. | `boolean` | `false` | | `manualPaginationOptions` | -- | (Optional) To enable manual pagination mode. When enabled, the table will not automatically paginate rows, instead will expect the current page index and other details to be passed. | `ModusTableManualPaginationOptions` | `undefined` |