From b0cbb5dbf0dbc027875d07f6e2a7fc2bf4c550a1 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Fri, 28 Feb 2025 12:53:24 +0100 Subject: [PATCH 1/7] feat / correct display mode --- .../src/components/kup-autocomplete/kup-autocomplete.tsx | 7 +------ .../ketchup/src/components/kup-combobox/kup-combobox.tsx | 2 +- packages/ketchup/src/f-components/f-cell/f-cell.tsx | 2 -- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx index 53abfc75e..a11405a64 100644 --- a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx +++ b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx @@ -583,14 +583,9 @@ export class KupAutocomplete { } #prepList() { - const displayModeForList = - this.data['kup-list'].options?.length === 1 - ? ItemsDisplayMode.CODE - : ItemsDisplayMode.CODE_AND_DESC; - return ( ) => diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx index 7a429b074..eb49e9ab5 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx @@ -523,7 +523,7 @@ export class KupCombobox { #prepList() { return ( @@ -842,7 +841,6 @@ function setEditableCell( class="kup-full-width" slot="field" displayMode={ItemsDisplayMode.CODE_AND_DESC} - selectMode={ItemsDisplayMode.CODE_AND_DESC} sizing={KupComponentSizing.EXTRA_SMALL} onKup-combobox-blur={( e: CustomEvent From 59645660e6eb79f1613b30af8cd92fa3cb8ec638 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Fri, 28 Feb 2025 12:53:39 +0100 Subject: [PATCH 2/7] fix: use correct method --- .../src/f-components/f-chip/f-chip.tsx | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx index 60a2cd520..6666858c0 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx +++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx @@ -14,6 +14,7 @@ import { KupChipNode } from '../../components/kup-chip/kup-chip-declarations'; import { KupDom } from '../../managers/kup-manager/kup-manager-declarations'; import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations'; import { ItemsDisplayMode } from '../../components/kup-list/kup-list-declarations'; +import { getIdOfItemByDisplayMode } from '../../components/kup-list/kup-list-helper'; const dom: KupDom = document.documentElement as KupDom; @@ -191,22 +192,11 @@ function createChipList( ); } - let chipText: string = ''; - - switch (props.displayMode) { - case ItemsDisplayMode.CODE: - chipText = chip.id; - break; - case ItemsDisplayMode.DESCRIPTION: - chipText = chip.value; - break; - case ItemsDisplayMode.CODE_AND_DESC: - chipText = chip.id + ' - ' + chip.value; - break; - default: - chipText = chip.value ?? chip.id; - break; - } + let chipText: string = getIdOfItemByDisplayMode( + chip, + chip.value == '' ? ItemsDisplayMode.CODE : this.displayMode, + ' - ' + ); return (
Date: Mon, 3 Mar 2025 13:58:32 +0100 Subject: [PATCH 3/7] feat / manage chip and aml --- packages/ketchup/src/components.d.ts | 10 ++++++++++ .../ketchup/src/components/kup-chip/kup-chip.tsx | 7 +++++++ .../ketchup/src/components/kup-chip/readme.md | 1 + .../kup-input-panel/kup-input-panel.tsx | 7 ++----- .../f-components/f-cell/f-cell-declarations.ts | 2 +- .../ketchup/src/f-components/f-cell/f-cell.tsx | 1 + .../f-components/f-chip/f-chip-declarations.ts | 1 + .../ketchup/src/f-components/f-chip/f-chip.scss | 16 ++++++++++++++++ .../ketchup/src/f-components/f-chip/f-chip.tsx | 12 ++++++++---- .../f-components/f-text-field/f-text-field.scss | 1 + 10 files changed, 48 insertions(+), 10 deletions(-) diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 73d542b03..655fe7c88 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -1200,6 +1200,11 @@ export namespace Components { * @default [] */ "data": KupChipNode[]; + /** + * When true, the chip cannot be edited, nor removed. + * @default false + */ + "disabled": boolean; /** * When enabled, the chip's text will display both the id and description. * @default ItemsDisplayMode.DESCRIPTION @@ -7176,6 +7181,11 @@ declare namespace LocalJSX { * @default [] */ "data"?: KupChipNode[]; + /** + * When true, the chip cannot be edited, nor removed. + * @default false + */ + "disabled"?: boolean; /** * When enabled, the chip's text will display both the id and description. * @default ItemsDisplayMode.DESCRIPTION diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index 59ede2489..7430ae04e 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -73,6 +73,11 @@ export class KupChip { * @default false */ @Prop() enableInput = false; + /** + * When true, the chip cannot be edited, nor removed. + * @default false + */ + @Prop() disabled: boolean = false; /** * The type of chip. Available types: input, filter, choice or empty for default. * @default FChipType.STANDARD @@ -409,7 +414,9 @@ export class KupChip { warning: this.rootElement.classList.contains('kup-warning') ? true : false, + disabled: this.disabled, }; + for (let j = 0; this.data && j < this.data.length; j++) { props.onBlur.push((chip) => this.onKupBlur(chip)); props.onClick.push((chip) => this.onKupClick(chip)); diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md index 1e512c1e6..a28612d6e 100644 --- a/packages/ketchup/src/components/kup-chip/readme.md +++ b/packages/ketchup/src/components/kup-chip/readme.md @@ -9,6 +9,7 @@ | ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | List of elements. | `KupChipNode[]` | `[]` | +| `disabled` | `disabled` | When true, the chip cannot be edited, nor removed. | `boolean` | `false` | | `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` | | `sizing` | `sizing` | Sets the size of the chip | `FChipSize.MEDIUM \| FChipSize.SMALL` | `FChipSize.SMALL` | 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..e9340120f 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 @@ -615,8 +615,8 @@ export class KupInputPanel { cell, column, row, - component: this, editable: true, + component: this, renderKup: true, setSizes: true, }; @@ -1166,6 +1166,7 @@ export class KupInputPanel { disabled: !cell.isEditable, id: column.name, }; + const cellType = dom.ketchup.data.cell.getType(cell, cell.shape); const { data, ...noDataProps } = cell.data || {}; @@ -1299,10 +1300,6 @@ export class KupInputPanel { #slotData(cell: KupInputPanelCell, col: KupInputPanelColumn) { const cellType = dom.ketchup.data.cell.getType(cell, cell.shape); - if (!cell.isEditable) { - return null; - } - if (cellType === FCellTypes.CHIP) { return { trailingIcon: true, diff --git a/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts b/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts index 71fcea5aa..6f58da732 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts +++ b/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts @@ -22,10 +22,10 @@ export interface FCellProps extends FComponent { column?: KupDataColumn; component?: unknown; density?: FCellPadding; - editable?: boolean; indents?: VNode[]; previousValue?: string; renderKup?: boolean; + editable?: boolean; row?: KupDataRow; setSizes?: boolean; shape?: FCellShapes; 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 ec8d41e73..cbf377461 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx +++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx @@ -819,6 +819,7 @@ function setEditableCell( } showDropDownIcon={false} {...cell.slotData} + disabled={cell.data.disabled} error={cell.data.error} showMarker={cell.tooltip ?? false} > diff --git a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts index 3233a069e..bbaa5d710 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts +++ b/packages/ketchup/src/f-components/f-chip/f-chip-declarations.ts @@ -16,6 +16,7 @@ export interface FChipsProps extends FComponent { sizing?: FChipSize; styling?: FChipStyling; type?: FChipType; + disabled?: boolean; } /** * Types of the f-chip component. diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss index d2e188c33..06f981ce1 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.scss +++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss @@ -3,6 +3,14 @@ --kup-chip-background-color, var(--kup-layer-3) ); + --kup_chip_background_color_disabled: var( + --kup-chip-background-color-disabled, + var(--kup-layer-2) + ); + --kup_chip_font_color_disabled: var( + --kup-chip-font-color-disabled, + var(--kup-layer-3) + ); --kup_chip_border_color: var( --kup-chip-border-color, var(--kup-border-strong) @@ -187,6 +195,14 @@ white-space: nowrap; } } + + &--disabled { + background-color: var(--kup_chip_background_color_disabled); + color: var(--kup_chip_font_color_disabled); + & .kup-icon { + background: var(--kup_chip_font_color_disabled); + } + } } &.chip-set--choice { diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx index 6666858c0..f12a5c398 100644 --- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx +++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx @@ -29,6 +29,9 @@ export const FChip: FunctionalComponent = (props: FChipsProps) => { if (!props.type) { props.type = FChipType.STANDARD; } + if (!props.displayMode) { + props.displayMode = ItemsDisplayMode.DESCRIPTION; + } const isChoice = props.type.toLowerCase() === FChipType.CHOICE; const isFilter = props.type.toLowerCase() === FChipType.FILTER; @@ -89,6 +92,7 @@ function createChipList( const indentStyle = { ['--kup_chip_indent_offset']: indent.toString(), }; + const isDisabled = props.disabled; chipGroup.push(
) : null} - {createChip(chip)} + {createChip(chip, isDisabled)}
); if (showChildren) { @@ -145,11 +149,11 @@ function createChipList( } } - function createChip(chip: KupChipNode): VNode { + function createChip(chip: KupChipNode, disabled: boolean): VNode { const onlyIcon = !!(chip.icon && !chip.value); let componentClass: string = `chip ${ onlyIcon ? 'chip--only-icon' : '' - }`; + } ${disabled && 'chip--disabled'}`; let iconEl = []; let iconClass = 'chip__icon chip__icon--leading'; @@ -194,7 +198,7 @@ function createChipList( let chipText: string = getIdOfItemByDisplayMode( chip, - chip.value == '' ? ItemsDisplayMode.CODE : this.displayMode, + chip.value == '' ? ItemsDisplayMode.CODE : props.displayMode, ' - ' ); diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss index 66e9e8b87..e432e882c 100644 --- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss +++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss @@ -233,6 +233,7 @@ border: unset; .#{$kup-icon} { pointer-events: none; + background-color: var(--kup-text-disabled); } } From e5c60443ffb337ba3876263f05a81a75d449d76b Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 3 Mar 2025 17:01:25 +0100 Subject: [PATCH 4/7] feat / manage displayListMode --- packages/ketchup/src/components.d.ts | 16 ++++++++++++++++ .../kup-autocomplete/kup-autocomplete.tsx | 6 +++++- .../src/components/kup-autocomplete/readme.md | 1 + .../src/components/kup-combobox/kup-combobox.tsx | 6 +++++- .../src/components/kup-combobox/readme.md | 1 + 5 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 655fe7c88..5f840f2f7 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -244,6 +244,10 @@ export namespace Components { * @default false */ "disabled": boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "displayListMode": ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION @@ -1328,6 +1332,10 @@ export namespace Components { * Defaults at false. When set to true, the component is disabled. */ "disabled": boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "displayListMode": ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ @@ -6330,6 +6338,10 @@ declare namespace LocalJSX { * @default false */ "disabled"?: boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "displayListMode"?: ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION @@ -7286,6 +7298,10 @@ declare namespace LocalJSX { * Defaults at false. When set to true, the component is disabled. */ "disabled"?: boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "displayListMode"?: ItemsDisplayMode; /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ diff --git a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx index a11405a64..e8e40906f 100644 --- a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx +++ b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx @@ -97,6 +97,10 @@ export class KupAutocomplete { * @default ItemsDisplayMode.DESCRIPTION */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + @Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; /** * Set error message * @default ''' @@ -585,7 +589,7 @@ export class KupAutocomplete { #prepList() { return ( ) => diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md index 2fb6ab76d..79e235202 100644 --- a/packages/ketchup/src/components/kup-autocomplete/readme.md +++ b/packages/ketchup/src/components/kup-autocomplete/readme.md @@ -12,6 +12,7 @@ | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | Props of the sub-components. | `Object` | `undefined` | | `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `displayListMode` | `display-list-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `error` | `error` | Set error message | `string` | `''` | | `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx index eb49e9ab5..6684fdaaf 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx @@ -86,6 +86,10 @@ export class KupCombobox { * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + @Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; /** * Set error message * @default ''' @@ -523,7 +527,7 @@ export class KupCombobox { #prepList() { return ( Date: Mon, 3 Mar 2025 17:32:52 +0100 Subject: [PATCH 5/7] feat / readme --- packages/ketchup/src/components/kup-autocomplete/readme.md | 2 +- packages/ketchup/src/components/kup-combobox/readme.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md index 79e235202..9ea43e308 100644 --- a/packages/ketchup/src/components/kup-autocomplete/readme.md +++ b/packages/ketchup/src/components/kup-autocomplete/readme.md @@ -12,7 +12,6 @@ | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | Props of the sub-components. | `Object` | `undefined` | | `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `displayListMode` | `display-list-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `error` | `error` | Set error message | `string` | `''` | | `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | @@ -22,6 +21,7 @@ | `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | | `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | | `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | +| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `minimumChars` | `minimum-chars` | The minimum number of chars to trigger the autocomplete | `number` | `3` | | `placeholder` | `placeholder` | Set custom placeholder / watermark for text field | `string` | `'Type code or description'` | | `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md index 2292ff0b8..9be14d357 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -11,7 +11,6 @@ | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | Props of the sub-components (date input text field). | `Object` | `undefined` | | `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `displayListMode` | `display-list-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `error` | `error` | Set error message | `string` | `''` | | `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | @@ -21,6 +20,7 @@ | `isSelect` | `is-select` | Lets the combobox behave as a select element, making the textfield readable only but interactable. | `boolean` | `true` | | `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | | `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | +| `listDisplayMode` | `list-display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | | `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.CODE` | | `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | From adb6fdb26207ce8dff39641398dd7094b084ee06 Mon Sep 17 00:00:00 2001 From: SerenaGiumentaroApuliasoft Date: Tue, 4 Mar 2025 09:05:52 +0000 Subject: [PATCH 6/7] fix: fix state on first render --- .../src/components/kup-data-table/kup-data-table.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index 676878947..3443cf80c 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -243,6 +243,12 @@ export class KupDataTable { this.visibleColumns = state.visibleColumns ? [...state.visibleColumns] : undefined; + } else { + this.#kupManager.debug.logMessage( + this, + 'Persisting initial stateId ' + this.stateId + ); + this.store.persistState(this.stateId, this.state); } } } From 24d713fb38b6d3c8b1f67b4d011eefcfb9f150d5 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Tue, 4 Mar 2025 12:09:26 +0100 Subject: [PATCH 7/7] feat: list-display-mode default value --- .../src/components/kup-autocomplete/kup-autocomplete.tsx | 2 +- packages/ketchup/src/components/kup-combobox/kup-combobox.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx index e8e40906f..0ea13d9fa 100644 --- a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx +++ b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx @@ -100,7 +100,7 @@ export class KupAutocomplete { /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ - @Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + @Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.CODE_AND_DESC; /** * Set error message * @default ''' diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx index 6684fdaaf..7f5e327ed 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx @@ -89,7 +89,7 @@ export class KupCombobox { /** * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ - @Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + @Prop() listDisplayMode: ItemsDisplayMode = ItemsDisplayMode.CODE_AND_DESC; /** * Set error message * @default '''