diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 979c77b54..f21773908 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -244,10 +244,6 @@ 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 @@ -303,6 +299,10 @@ export namespace Components { * @default false */ "leadingLabel": boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode": ItemsDisplayMode; /** * The minimum number of chars to trigger the autocomplete * @default 3 @@ -1337,10 +1337,6 @@ 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". */ @@ -1393,6 +1389,10 @@ export namespace Components { * @default false */ "leadingLabel": boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode": ItemsDisplayMode; /** * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. * @default false @@ -6343,10 +6343,6 @@ 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 @@ -6391,6 +6387,10 @@ declare namespace LocalJSX { * @default false */ "leadingLabel"?: boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode"?: ItemsDisplayMode; /** * The minimum number of chars to trigger the autocomplete * @default 3 @@ -7308,10 +7308,6 @@ 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". */ @@ -7353,6 +7349,10 @@ declare namespace LocalJSX { * @default false */ "leadingLabel"?: boolean; + /** + * Sets how to show the selected item value. Suported values: "CodeOnly", "DescOnly", "Both" or "CodeAndDesc" and "DescAndCode". + */ + "listDisplayMode"?: ItemsDisplayMode; "onKup-combobox-blur"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-change"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-click"?: (event: KupComboboxCustomEvent) => void; diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md index 9ea43e308..3fd08c6f2 100644 --- a/packages/ketchup/src/components/kup-autocomplete/readme.md +++ b/packages/ketchup/src/components/kup-autocomplete/readme.md @@ -5,32 +5,32 @@ ## 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" 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` | -| `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` | -| `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` | +| 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` | +| `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.CODE_AND_DESC` | +| `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 9be14d357..3dedc61f2 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -5,28 +5,28 @@ ## 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" 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` | -| `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` | -| `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` | +| `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.CODE_AND_DESC` | +| `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