From 6e1a57696d7ed09a27b83374ae063d2f12d3527d Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Mon, 23 Dec 2024 16:57:02 +0100 Subject: [PATCH] feat/fix-cell data --- packages/ketchup/src/components.d.ts | 24 ++++----- .../src/components/kup-autocomplete/readme.md | 50 +++++++++---------- .../src/components/kup-combobox/readme.md | 42 ++++++++-------- .../kup-data-table/kup-data-table-helper.ts | 3 +- .../kup-data-table/kup-data-table.tsx | 4 +- .../components/kup-dropdown-button/readme.md | 30 +++++------ .../ketchup/src/components/kup-list/readme.md | 30 +++++------ 7 files changed, 91 insertions(+), 92 deletions(-) diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 223b27c18..787e74bb0 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -237,7 +237,7 @@ export namespace Components { */ "disabled": boolean; /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION */ "displayMode": ItemsDisplayMode; @@ -311,7 +311,7 @@ export namespace Components { */ "refresh": () => Promise; /** - * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.CODE */ "selectMode": ItemsDisplayMode; @@ -1309,7 +1309,7 @@ export namespace Components { */ "disabled": boolean; /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ "displayMode": ItemsDisplayMode; /** @@ -1370,7 +1370,7 @@ export namespace Components { */ "refresh": () => Promise; /** - * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ "selectMode": ItemsDisplayMode; /** @@ -2037,7 +2037,7 @@ export namespace Components { */ "disabled": boolean; /** - * Sets how to show the selected item value. Suported values: "code", "description", "both". + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION */ "displayMode": ItemsDisplayMode; @@ -2081,7 +2081,7 @@ export namespace Components { */ "refresh": () => Promise; /** - * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.CODE */ "selectMode": ItemsDisplayMode; @@ -6219,7 +6219,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION */ "displayMode"?: ItemsDisplayMode; @@ -6285,7 +6285,7 @@ declare namespace LocalJSX { */ "readOnly"?: boolean; /** - * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.CODE */ "selectMode"?: ItemsDisplayMode; @@ -7167,7 +7167,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ "displayMode"?: ItemsDisplayMode; /** @@ -7220,7 +7220,7 @@ declare namespace LocalJSX { */ "readOnly"?: boolean; /** - * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". */ "selectMode"?: ItemsDisplayMode; /** @@ -7776,7 +7776,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * Sets how to show the selected item value. Suported values: "code", "description", "both". + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.DESCRIPTION */ "displayMode"?: ItemsDisplayMode; @@ -7826,7 +7826,7 @@ declare namespace LocalJSX { */ "placeholderIcon"?: string; /** - * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". + * Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". * @default ItemsDisplayMode.CODE */ "selectMode"?: ItemsDisplayMode; diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md index 2d1ac81d9..89965ebee 100644 --- a/packages/ketchup/src/components/kup-autocomplete/readme.md +++ b/packages/ketchup/src/components/kup-autocomplete/readme.md @@ -5,31 +5,31 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -| `alert` | `alert` | Set alert message | `string` | `''` | -| `allowInconsistentValues` | `allow-inconsistent-values` | When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. | `boolean` | `false` | -| `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` | -| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `error` | `error` | Set error message | `string` | `''` | -| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | -| `initialValue` | `initial-value` | Sets the initial value of the component. | `string` | `''` | -| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | -| `inputDelay` | `input-delay` | Input event emission delay in milliseconds. | `number` | `300` | -| `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` | -| `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` | -| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE` | -| `serverHandledFilter` | `server-handled-filter` | When true, the items filter is managed server side, otherwise items filter is done client side. | `boolean` | `false` | -| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | -| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | -| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `allowInconsistentValues` | `allow-inconsistent-values` | When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. | `boolean` | `false` | +| `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` | +| `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` | +| `initialValue` | `initial-value` | Sets the initial value of the component. | `string` | `''` | +| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | +| `inputDelay` | `input-delay` | Input event emission delay in milliseconds. | `number` | `300` | +| `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` | +| `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` | +| `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` | +| `serverHandledFilter` | `server-handled-filter` | When true, the items filter is managed server side, otherwise items filter is done client side. | `boolean` | `false` | +| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | +| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | ## Events diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md index 2f08188c2..ebbd1163a 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -5,27 +5,27 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -| `alert` | `alert` | Set alert message | `string` | `''` | -| `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` | -| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `error` | `error` | Set error message | `string` | `''` | -| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | -| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | -| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | -| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | -| `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` | -| `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". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE` | -| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | -| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | -| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `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` | +| `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` | +| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | +| `initialValueDecode` | `initial-value-decode` | Sets the initial value decode of the component | `string` | `''` | +| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | +| `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` | +| `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` | +| `showMarker` | `show-marker` | When true shows a small marker on the component. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | ## Events diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table-helper.ts b/packages/ketchup/src/components/kup-data-table/kup-data-table-helper.ts index dd91e02e2..cd243e1d7 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table-helper.ts +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table-helper.ts @@ -1167,7 +1167,6 @@ export function decorateDataTable(data: KupDataTableDataset) { const value = cell.value; const options = cell['options']; cell.isEditable = cell.isEditable ?? cell['editable']; - const shapeAdapters = { [FCellShapes.AUTOCOMPLETE]: () => CMBandACPAdapter(value, '', options), @@ -1182,7 +1181,7 @@ export function decorateDataTable(data: KupDataTableDataset) { const adapterFunction = shapeAdapters[cell.shape]; if (adapterFunction) { - cell.data = adapterFunction(); + cell.data = { ...adapterFunction(), ...cell.data }; } }); }); 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 568bb2ed9..0fba94c0d 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 @@ -3478,7 +3478,7 @@ export class KupDataTable { return details; } - getVisibleColumns({includeCodVer = false} = {}): Array { + getVisibleColumns({ includeCodVer = false } = {}): Array { if (includeCodVer) { return this.getColumns().filter((col) => { if (this.visibleColumns) { @@ -5331,7 +5331,7 @@ export class KupDataTable { const rowActions = this.#kupManager.data.row.buildRowActions( row, - this.getVisibleColumns({includeCodVer:true}), + this.getVisibleColumns({ includeCodVer: true }), this.rowActions, this.commands ?? [] ); diff --git a/packages/ketchup/src/components/kup-dropdown-button/readme.md b/packages/ketchup/src/components/kup-dropdown-button/readme.md index 14fe978e5..76fe21372 100644 --- a/packages/ketchup/src/components/kup-dropdown-button/readme.md +++ b/packages/ketchup/src/components/kup-dropdown-button/readme.md @@ -7,21 +7,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the sub-components. | `Object` | `null` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `dropdownOnly` | `dropdown-only` | Default value is false. When set to true, the arrow dropdown button is the only button displayed. | `boolean` | `false` | -| `icon` | `icon` | Defaults at null. When set, the button will show this icon. | `string` | `null` | -| `initialValue` | `initial-value` | Sets the initial value of the component. | `string` | `''` | -| `label` | `label` | Defaults at null. When set, the button will show this text. | `string` | `null` | -| `placeholderIcon` | `placeholder-icon` | When set, the button will show this icon, if icon/image not found. | `string` | `null` | -| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "CodeOnly", "DescOnly", "Both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE` | -| `sizing` | `sizing` | Defines the size of the buttons. Available styles are from "extra-small" to "extra-large". Small will be the default | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | -| `styling` | `styling` | Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default. | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.RAISED` | -| `trailingIcon` | `trailing-icon` | Defaults at null. When set, the icon will be shown after the text. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the sub-components. | `Object` | `null` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `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` | +| `dropdownOnly` | `dropdown-only` | Default value is false. When set to true, the arrow dropdown button is the only button displayed. | `boolean` | `false` | +| `icon` | `icon` | Defaults at null. When set, the button will show this icon. | `string` | `null` | +| `initialValue` | `initial-value` | Sets the initial value of the component. | `string` | `''` | +| `label` | `label` | Defaults at null. When set, the button will show this text. | `string` | `null` | +| `placeholderIcon` | `placeholder-icon` | When set, the button will show this icon, if icon/image not found. | `string` | `null` | +| `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` | +| `sizing` | `sizing` | Defines the size of the buttons. Available styles are from "extra-small" to "extra-large". Small will be the default | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.SMALL` | +| `styling` | `styling` | Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default. | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.RAISED` | +| `trailingIcon` | `trailing-icon` | Defaults at null. When set, the icon will be shown after the text. | `boolean` | `false` | ## Events diff --git a/packages/ketchup/src/components/kup-list/readme.md b/packages/ketchup/src/components/kup-list/readme.md index 8a2341e46..3cd0d10f6 100644 --- a/packages/ketchup/src/components/kup-list/readme.md +++ b/packages/ketchup/src/components/kup-list/readme.md @@ -5,21 +5,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------ | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | The data of the list. | `KupListNode[]` | `[]` | -| `displayMode` | `display-mode` | Selects how the items must display their label and how they can be filtered for. | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `filter` | `filter` | Keeps string for filtering elements when filter mode is active | `string` | `''` | -| `hideText` | `hide-text` | Hides rows' text, ideally to display a list of icons only. | `boolean` | `false` | -| `isMenu` | `is-menu` | Defines whether the list is a menu or not. | `boolean` | `false` | -| `keyboardNavigation` | `keyboard-navigation` | When true, enables items' navigation through arrow keys. | `boolean` | `true` | -| `menuVisible` | `menu-visible` | Sets the status of the menu, when false it's hidden otherwise it's visible. | `boolean` | `false` | -| `roleType` | `role-type` | Defines the type of selection. Values accepted: listbox, radiogroup or group. | `KupListRole.GROUP \| KupListRole.LISTBOX \| KupListRole.RADIOGROUP` | `KupListRole.LISTBOX` | -| `selectable` | `selectable` | Defines whether items are selectable or not. | `boolean` | `true` | -| `showFilter` | `show-filter` | Show filter for filter elements in list | `boolean` | `false` | -| `showIcons` | `show-icons` | Displays the icons associated to each row when set to true. | `boolean` | `false` | -| `twoLine` | `two-line` | The list elements descriptions will be arranged in two lines. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| -------------------- | --------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | The data of the list. | `KupListNode[]` | `[]` | +| `displayMode` | `display-mode` | Selects how the items must display their label and how they can be filtered for. | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | +| `filter` | `filter` | Keeps string for filtering elements when filter mode is active | `string` | `''` | +| `hideText` | `hide-text` | Hides rows' text, ideally to display a list of icons only. | `boolean` | `false` | +| `isMenu` | `is-menu` | Defines whether the list is a menu or not. | `boolean` | `false` | +| `keyboardNavigation` | `keyboard-navigation` | When true, enables items' navigation through arrow keys. | `boolean` | `true` | +| `menuVisible` | `menu-visible` | Sets the status of the menu, when false it's hidden otherwise it's visible. | `boolean` | `false` | +| `roleType` | `role-type` | Defines the type of selection. Values accepted: listbox, radiogroup or group. | `KupListRole.GROUP \| KupListRole.LISTBOX \| KupListRole.RADIOGROUP` | `KupListRole.LISTBOX` | +| `selectable` | `selectable` | Defines whether items are selectable or not. | `boolean` | `true` | +| `showFilter` | `show-filter` | Show filter for filter elements in list | `boolean` | `false` | +| `showIcons` | `show-icons` | Displays the icons associated to each row when set to true. | `boolean` | `false` | +| `twoLine` | `two-line` | The list elements descriptions will be arranged in two lines. | `boolean` | `false` | ## Events