From 38bbd37c62b6a0a4d8296232b473ddd10ffbd21c Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 09:34:33 +0000 Subject: [PATCH 01/10] feat: removing spread of adapter --- .../src/components/kup-input-panel/kup-input-panel.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index b101bed56..833481669 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -1318,7 +1318,6 @@ export class KupInputPanel { cellType === FCellTypes.MULTI_COMBOBOX ) { return { - ...this.#CMBandACPAdapter(cell.options, col.title, null), showDropDownIcon: true, class: '', style: { width: '100%' }, @@ -1388,7 +1387,7 @@ export class KupInputPanel { currentValue: string ) { const configCMandACP = CMBandACPAdapter(currentValue, fieldLabel, []); - + console.log('macp adapt slotdata', configCMandACP, rawOptions); if (rawOptions) { configCMandACP.data['kup-list'].data = this.#optionsTreeComboAdapter(rawOptions, currentValue); @@ -1785,7 +1784,6 @@ export class KupInputPanel { cell.shape === FCellShapes.MULTI_AUTOCOMPLETE ? cell.slotData.data['kup-list'] : cell.data?.data?.['kup-list']; - if (kupListData) { kupListData.data = filteredRows?.length ? this.#optionsTreeComboAdapter( From c83a353c7374eb3a6b00c47684ec2bacd1f05f56 Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 09:35:40 +0000 Subject: [PATCH 02/10] feat: textField prop from adapter without label --- .../src/components/kup-input-panel/kup-input-panel.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 833481669..15310ca0e 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -1317,6 +1317,13 @@ export class KupInputPanel { cellType === FCellTypes.MULTI_AUTOCOMPLETE || cellType === FCellTypes.MULTI_COMBOBOX ) { + const adapter = this.#CMBandACPAdapter( + cell.options, + col.title, + null + ); + const { label, ...textFieldWithoutLabel } = + adapter.data['kup-text-field']; return { showDropDownIcon: true, class: '', From c8d348181be2d79433c4db172c5eae57f7331d5f Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 09:36:28 +0000 Subject: [PATCH 03/10] feat: using new props in slotData object --- .../src/components/kup-input-panel/kup-input-panel.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 15310ca0e..90410e416 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -1324,7 +1324,15 @@ export class KupInputPanel { ); const { label, ...textFieldWithoutLabel } = adapter.data['kup-text-field']; + return { + data: { + ...adapter.data, + 'kup-text-field': textFieldWithoutLabel, + 'kup-list': adapter.data['kup-list'], + }, + initialValue: adapter.initialValue, + label: adapter.label, showDropDownIcon: true, class: '', style: { width: '100%' }, From a3cf0fbc150cf4e8c06ba6c9883ab6488a73ce58 Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 09:48:48 +0000 Subject: [PATCH 04/10] minor --- .../ketchup/src/components/kup-input-panel/kup-input-panel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 90410e416..ad7fb81b6 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -1402,7 +1402,6 @@ export class KupInputPanel { currentValue: string ) { const configCMandACP = CMBandACPAdapter(currentValue, fieldLabel, []); - console.log('macp adapt slotdata', configCMandACP, rawOptions); if (rawOptions) { configCMandACP.data['kup-list'].data = this.#optionsTreeComboAdapter(rawOptions, currentValue); From 7e043881ab2069ba6f3cbb6e0127c3b781a0e70b Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 10:06:06 +0000 Subject: [PATCH 05/10] feat: prop label to kup-chip --- packages/ketchup/src/components.d.ts | 10 ++++++++++ .../ketchup/src/components/kup-chip/kup-chip.tsx | 12 ++++++++++++ 2 files changed, 22 insertions(+) diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index eb2ed1617..e82c2ac14 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -1216,6 +1216,11 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; + /** + * Show a label + * @default null + */ + "label": string; /** * This method is used to trigger a new render of the component. */ @@ -7182,6 +7187,11 @@ declare namespace LocalJSX { * @default false */ "enableInput"?: boolean; + /** + * Show a label + * @default null + */ + "label"?: string; /** * Triggered when a chip loses focus. */ diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index 59ede2489..5d192e366 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -95,6 +95,11 @@ export class KupChip { */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * When set,will be shown a label on the chips + * @default null + */ + @Prop() label: string = null; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ /*-------------------------------------------------*/ @@ -452,6 +457,13 @@ export class KupChip { )}
+ {this.label ? ( +
+ +
+ ) : null} {this.data?.length > 0 ? : null}
From 5092d5f80b657fa40ba9a3c0035803aec6aa5b04 Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 10:06:23 +0000 Subject: [PATCH 06/10] feat: passing label to kup-chip in fcell --- packages/ketchup/src/f-components/f-cell/f-cell.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx index 17f4c3037..8b2391893 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx +++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx @@ -770,13 +770,15 @@ function setEditableCell( ); case FCellTypes.FILE_UPLOAD: return ; - case FCellTypes.MULTI_AUTOCOMPLETE: + case FCellTypes.MULTI_AUTOCOMPLETE: { + const { label, ...slotDataWithoutLabel } = cell.slotData; return ( ); + } case FCellTypes.MULTI_COMBOBOX: return ( Date: Fri, 28 Feb 2025 10:06:37 +0000 Subject: [PATCH 07/10] readme --- packages/ketchup/src/components/kup-chip/readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md index 1e512c1e6..a0b514810 100644 --- a/packages/ketchup/src/components/kup-chip/readme.md +++ b/packages/ketchup/src/components/kup-chip/readme.md @@ -11,6 +11,7 @@ | `data` | -- | List of elements. | `KupChipNode[]` | `[]` | | `displayMode` | `display-mode` | When enabled, the chip's text will display both the id and description. | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` | +| `label` | `label` | Show a label | `string` | `null` | | `sizing` | `sizing` | Sets the size of the chip | `FChipSize.MEDIUM \| FChipSize.SMALL` | `FChipSize.SMALL` | | `styling` | `styling` | Sets the style of the chip | `FChipStyling.OUTLINED \| FChipStyling.RAISED` | `FChipStyling.RAISED` | | `type` | `type` | The type of chip. Available types: input, filter, choice or empty for default. | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD` | From 9733db2fd42ef772d8bff2924bffb2cc5a454770 Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 10:28:43 +0000 Subject: [PATCH 08/10] feat: css prop to show label in kup-chip --- packages/ketchup/src/components.d.ts | 4 ++-- packages/ketchup/src/components/kup-chip/kup-chip.scss | 4 +--- packages/ketchup/src/components/kup-chip/kup-chip.tsx | 4 +--- packages/ketchup/src/components/kup-chip/readme.md | 2 +- .../src/components/kup-chip/styles/kup-chip-main.scss | 7 +++++++ 5 files changed, 12 insertions(+), 9 deletions(-) create mode 100644 packages/ketchup/src/components/kup-chip/styles/kup-chip-main.scss diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index e82c2ac14..24ce697d3 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -1217,7 +1217,7 @@ export namespace Components { */ "getProps": (descriptions?: boolean) => Promise; /** - * Show a label + * When set,will be shown a label on the chips * @default null */ "label": string; @@ -7188,7 +7188,7 @@ declare namespace LocalJSX { */ "enableInput"?: boolean; /** - * Show a label + * When set,will be shown a label on the chips * @default null */ "label"?: string; diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.scss b/packages/ketchup/src/components/kup-chip/kup-chip.scss index 42bd6c47d..c50e32fd1 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.scss +++ b/packages/ketchup/src/components/kup-chip/kup-chip.scss @@ -16,6 +16,4 @@ * @prop --kup-chip-text-color-rgb: Sets text color RGB values of the component (used for shaders). */ -:host { - display: block; -} +@import url('./styles/kup-chip-main.scss'); diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index 5d192e366..eb1e27e3c 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -459,9 +459,7 @@ export class KupChip {
{this.label ? (
- +
) : null} {this.data?.length > 0 ? : null} diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md index a0b514810..51ed9f27e 100644 --- a/packages/ketchup/src/components/kup-chip/readme.md +++ b/packages/ketchup/src/components/kup-chip/readme.md @@ -11,7 +11,7 @@ | `data` | -- | List of elements. | `KupChipNode[]` | `[]` | | `displayMode` | `display-mode` | When enabled, the chip's text will display both the id and description. | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` | -| `label` | `label` | Show a label | `string` | `null` | +| `label` | `label` | When set,will be shown a label on the chips | `string` | `null` | | `sizing` | `sizing` | Sets the size of the chip | `FChipSize.MEDIUM \| FChipSize.SMALL` | `FChipSize.SMALL` | | `styling` | `styling` | Sets the style of the chip | `FChipStyling.OUTLINED \| FChipStyling.RAISED` | `FChipStyling.RAISED` | | `type` | `type` | The type of chip. Available types: input, filter, choice or empty for default. | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD` | diff --git a/packages/ketchup/src/components/kup-chip/styles/kup-chip-main.scss b/packages/ketchup/src/components/kup-chip/styles/kup-chip-main.scss new file mode 100644 index 000000000..e6bb3ae1b --- /dev/null +++ b/packages/ketchup/src/components/kup-chip/styles/kup-chip-main.scss @@ -0,0 +1,7 @@ +:host { + display: block; +} + +.mdc-text-field__label-container { + padding-bottom: 4px; +} From 20e028ea83936a8d845985f5feb0f15f38f70969 Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 14:22:23 +0000 Subject: [PATCH 09/10] fix: return to previous changes --- .../kup-input-panel/kup-input-panel.tsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index ad7fb81b6..fd4f93ade 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -1317,22 +1317,8 @@ export class KupInputPanel { cellType === FCellTypes.MULTI_AUTOCOMPLETE || cellType === FCellTypes.MULTI_COMBOBOX ) { - const adapter = this.#CMBandACPAdapter( - cell.options, - col.title, - null - ); - const { label, ...textFieldWithoutLabel } = - adapter.data['kup-text-field']; - return { - data: { - ...adapter.data, - 'kup-text-field': textFieldWithoutLabel, - 'kup-list': adapter.data['kup-list'], - }, - initialValue: adapter.initialValue, - label: adapter.label, + ...this.#CMBandACPAdapter(cell.options, col.title, null), showDropDownIcon: true, class: '', style: { width: '100%' }, From e2a5fcd6461cc5af3e98ccb640fc35453a897401 Mon Sep 17 00:00:00 2001 From: EmanueleCitarella Date: Fri, 28 Feb 2025 14:22:48 +0000 Subject: [PATCH 10/10] feat: passing props singularly to kup-acp --- packages/ketchup/src/f-components/f-cell/f-cell.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx index 8b2391893..6235c74c2 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx +++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx @@ -771,14 +771,13 @@ function setEditableCell( case FCellTypes.FILE_UPLOAD: return ; case FCellTypes.MULTI_AUTOCOMPLETE: { - const { label, ...slotDataWithoutLabel } = cell.slotData; return (