From bf4ebe0d24cfd89c69683d7adb816783330fb511 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Wed, 12 Jun 2024 10:53:06 +0200 Subject: [PATCH] Readmes. --- README.md | 2 +- .../basic/iframe/examples/IframeDemo.vue | 2 +- packages/ketchup/README.md | 2 +- packages/ketchup/src/assets/image-list.js | 4 +- .../src/components/kup-accordion/readme.md | 83 ++--- .../src/components/kup-autocomplete/readme.md | 112 +++---- .../ketchup/src/components/kup-box/readme.md | 173 ++++++----- .../src/components/kup-button-list/readme.md | 89 +++--- .../src/components/kup-button/readme.md | 108 ++++--- .../src/components/kup-calendar/readme.md | 87 +++--- .../src/components/kup-card-list/readme.md | 71 +++-- .../ketchup/src/components/kup-cell/readme.md | 84 ++--- .../src/components/kup-chart/readme.md | 96 +++--- .../src/components/kup-checkbox/readme.md | 87 +++--- .../ketchup/src/components/kup-chip/readme.md | 107 ++++--- .../src/components/kup-color-picker/readme.md | 68 +++-- .../src/components/kup-combobox/readme.md | 108 ++++--- .../src/components/kup-dashboard/readme.md | 38 ++- .../src/components/kup-data-table/readme.md | 287 ++++++++++-------- .../src/components/kup-date-picker/readme.md | 78 ++--- .../src/components/kup-drawer/readme.md | 7 + .../components/kup-dropdown-button/readme.md | 7 + .../src/components/kup-echart/readme.md | 7 + .../src/components/kup-editor/readme.md | 7 + .../src/components/kup-family-tree/readme.md | 7 + .../ketchup/src/components/kup-form/readme.md | 23 +- .../src/components/kup-gauge/readme.md | 7 + .../ketchup/src/components/kup-grid/readme.md | 7 + .../src/components/kup-iframe/readme.md | 7 + .../src/components/kup-image-list/readme.md | 9 +- .../src/components/kup-input-panel/readme.md | 7 + .../ketchup/src/components/kup-lazy/readme.md | 7 + .../src/components/kup-magic-box/readme.md | 7 + .../src/components/kup-nav-bar/readme.md | 7 + .../components/kup-numeric-picker/readme.md | 9 + .../ketchup/src/components/kup-pdf/readme.md | 7 + .../src/components/kup-photo-frame/readme.md | 7 + .../src/components/kup-planner/readme.md | 9 + .../src/components/kup-probe/readme.md | 7 + .../src/components/kup-progress-bar/readme.md | 7 + .../ketchup/src/components/kup-qlik/readme.md | 7 + .../src/components/kup-radio/readme.md | 9 + .../src/components/kup-rating/readme.md | 7 + .../src/components/kup-snackbar/readme.md | 8 + .../src/components/kup-switch/readme.md | 22 +- .../src/components/kup-tab-bar/readme.md | 10 +- .../src/components/kup-text-field/readme.md | 98 +++--- .../ketchup/src/components/kup-tree/readme.md | 7 + 48 files changed, 1201 insertions(+), 815 deletions(-) diff --git a/README.md b/README.md index 878252cf17..d3a9000280 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ Ketchup repository is a monorepo multi-package repository managed with [Lerna](h ## Showcase -Go to [Ketchup Showcase](http://ketchup.smeup.com) to see our components live.

(back to top)

+Go to [Ketchup Showcase](http://smeup.github.io/ketchup) to see our components live.

(back to top)

## Getting started diff --git a/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue b/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue index 42ea8f3a42..0eeac98491 100644 --- a/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue +++ b/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue @@ -80,7 +80,7 @@ function createComp() { flat: true, }; comp.id = 'demo-component'; - comp.src = 'https://ketchup.smeup.com'; + comp.src = 'https://smeup.github.io/ketchup'; return comp; } diff --git a/packages/ketchup/README.md b/packages/ketchup/README.md index 8487bd8f47..0bbbbdd918 100644 --- a/packages/ketchup/README.md +++ b/packages/ketchup/README.md @@ -54,7 +54,7 @@ Ketchup repository is a monorepo multi-package repository managed with [Lerna](h ## Showcase -Go to [Ketchup Showcase](http://ketchup.smeup.com) to see our components live.

(back to top)

+Go to [Ketchup Showcase](http://smeup.github.io/ketchup) to see our components live.

(back to top)

## Getting started diff --git a/packages/ketchup/src/assets/image-list.js b/packages/ketchup/src/assets/image-list.js index 7c23e6c80d..7ccb51ad67 100644 --- a/packages/ketchup/src/assets/image-list.js +++ b/packages/ketchup/src/assets/image-list.js @@ -1029,7 +1029,7 @@ const data = [ { imageData: { resource: - 'https://ketchup.smeup.com/ketchup-showcase/header_logo_dark.svg', + 'https://smeup.github.io/ketchup/ketchup-showcase/header_logo_dark.svg', sizeX: '1.75rem', sizeY: 'auto', color: 'var(--kup-text-on-primary-color)', @@ -1079,7 +1079,7 @@ const data = [ { imageData: { resource: - 'https://ketchup.smeup.com/ketchup-showcase/header_logo_dark.svg', + 'https://smeup.github.io/ketchup/ketchup-showcase/header_logo_dark.svg', sizeX: '1.75rem', sizeY: 'auto', color: 'var(--kup-text-on-primary-color)', diff --git a/packages/ketchup/src/components/kup-accordion/readme.md b/packages/ketchup/src/components/kup-accordion/readme.md index 3540c818fa..22dbd03de0 100644 --- a/packages/ketchup/src/components/kup-accordion/readme.md +++ b/packages/ketchup/src/components/kup-accordion/readme.md @@ -2,21 +2,24 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | -| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `false` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | +| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | + ## Events -| Event | Description | Type | -| --- | --- | --- | +| Event | Description | Type | +| ---------------------------- | ------------------------------- | --------------------------------------------------- | | `kup-accordion-itemselected` | Fired when an item is selected. | `CustomEvent` | + ## Methods ### `collapseAll() => Promise` @@ -27,6 +30,8 @@ This method collapses all expandible items. Type: `Promise` + + ### `expandAll() => Promise` This method expands all expandible items. @@ -35,14 +40,16 @@ This method expands all expandible items. Type: `Promise` + + ### `getProps(descriptions?: boolean) => Promise` Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -59,20 +66,24 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + ### `toggleItem(itemName: string) => Promise` This method activates or deactivates an item @@ -87,35 +98,38 @@ This method activates or deactivates an item Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-accordion-background-color` | Sets background of the component. | -| `--kup-accordion-border` | Sets borders color of the accordion. | -| `--kup-accordion-border-radius` | Sets border radius of the first and last items of the accordion. | -| `--kup-accordion-dropdown-icon-color` | Sets color of the dropdown icon. | -| `--kup-accordion-font-family` | Sets font family of the component. | -| `--kup-accordion-font-size` | Sets font size of the component. | -| `--kup-accordion-hover-background-color` | Sets background color of the hover effect. | -| `--kup-accordion-hover-color` | Sets text color of the hover effect. | -| `--kup-accordion-padding` | Sets padding of the accordion's items. | -| `--kup-accordion-primary-color` | Sets primary color of the component. | -| `--kup-accordion-primary-color-rgb` | Sets primary color RGB values of the component. | -| `--kup-accordion-text-color` | Sets text color of the component. | -| `--kup-accordion-text-on-primary-color` | Sets text on primary color of the component. | -| `--kup-accordion-transition` | Sets transition duration for color and background-color. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------------------------------- | +| `--kup-accordion-background-color` | Sets background of the component. | +| `--kup-accordion-border` | Sets borders color of the accordion. | +| `--kup-accordion-border-radius` | Sets border radius of the first and last items of the accordion. | +| `--kup-accordion-dropdown-icon-color` | Sets color of the dropdown icon. | +| `--kup-accordion-font-family` | Sets font family of the component. | +| `--kup-accordion-font-size` | Sets font size of the component. | +| `--kup-accordion-hover-background-color` | Sets background color of the hover effect. | +| `--kup-accordion-hover-color` | Sets text color of the hover effect. | +| `--kup-accordion-padding` | Sets padding of the accordion's items. | +| `--kup-accordion-primary-color` | Sets primary color of the component. | +| `--kup-accordion-primary-color-rgb` | Sets primary color RGB values of the component. | +| `--kup-accordion-text-color` | Sets text color of the component. | +| `--kup-accordion-text-on-primary-color` | Sets text on primary color of the component. | +| `--kup-accordion-transition` | Sets transition duration for color and background-color. | + ## Dependencies ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-accordion --> kup-card @@ -185,7 +199,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -276,6 +289,6 @@ graph TD; style kup-accordion fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md index 1779615b98..b8222a8e01 100644 --- a/packages/ketchup/src/components/kup-autocomplete/readme.md +++ b/packages/ketchup/src/components/kup-autocomplete/readme.md @@ -2,42 +2,45 @@ + ## 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: "code", "description", "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` | `''` | -| `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` | `1` | -| `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: "code", "description", "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` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | -| `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: "code", "description", "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` | `''` | +| `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` | `1` | +| `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: "code", "description", "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` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-autocomplete-blur` | | `CustomEvent` | -| `kup-autocomplete-change` | | `CustomEvent` | -| `kup-autocomplete-click` | | `CustomEvent` | -| `kup-autocomplete-focus` | | `CustomEvent` | -| `kup-autocomplete-iconclick` | | `CustomEvent` | -| `kup-autocomplete-input` | | `CustomEvent` | -| `kup-autocomplete-itemclick` | | `CustomEvent` | +| Event | Description | Type | +| ---------------------------- | ----------- | --------------------------------------------------- | +| `kup-autocomplete-blur` | | `CustomEvent` | +| `kup-autocomplete-change` | | `CustomEvent` | +| `kup-autocomplete-click` | | `CustomEvent` | +| `kup-autocomplete-focus` | | `CustomEvent` | +| `kup-autocomplete-iconclick` | | `CustomEvent` | +| `kup-autocomplete-input` | | `CustomEvent` | +| `kup-autocomplete-itemclick` | | `CustomEvent` | + ## Methods @@ -47,8 +50,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -75,6 +78,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setFocus() => Promise` Sets the focus to the component. @@ -83,20 +88,24 @@ Sets the focus to the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + ### `setValue(value: string) => Promise` Sets the value of the component. @@ -111,28 +120,30 @@ Sets the value of the component. Type: `Promise` + + + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-cell](../kup-cell) -- [kup-data-table](../kup-data-table) -- [kup-form](../kup-form) -- [kup-image-list](../kup-image-list) -- [kup-input-panel](../kup-input-panel) -- [kup-tree](../kup-tree) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-cell](../kup-cell) + - [kup-data-table](../kup-data-table) + - [kup-form](../kup-form) + - [kup-image-list](../kup-image-list) + - [kup-input-panel](../kup-input-panel) + - [kup-tree](../kup-tree) ### Depends on -- [kup-list](../kup-list) -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-list](../kup-list) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-autocomplete --> kup-list @@ -175,7 +186,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -218,6 +228,6 @@ graph TD; style kup-autocomplete fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-box/readme.md b/packages/ketchup/src/components/kup-box/readme.md index 9159068952..39c81bfb82 100644 --- a/packages/ketchup/src/components/kup-box/readme.md +++ b/packages/ketchup/src/components/kup-box/readme.md @@ -2,55 +2,58 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `cardData` | -- | Data of the card linked to the box when the latter's layout must be a premade template. | `GenericObject` | `null` | -| `columns` | `columns` | Number of columns | `number` | `1` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Actual data of the box. | `KupBoxData` | `null` | -| `dragEnabled` | `drag-enabled` | Enable dragging | `boolean` | `false` | -| `dropEnabled` | `drop-enabled` | Enable dropping | `boolean` | `false` | -| `dropOnSection` | `drop-on-section` | Drop can be done in section | `boolean` | `false` | -| `editableData` | `editable-data` | When set to true, editable cells will be rendered using input components. | `boolean` | `false` | -| `enableRowActions` | `enable-row-actions` | If enabled, a button to load / display the row actions will be displayed on the right of every box | `boolean` | `false` | -| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` | -| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` | -| `kanban` | -- | Displays the boxlist as a Kanban. | `KupBoxKanban` | `null` | -| `layout` | -- | How the field will be displayed. If not present, a default one will be created. | `KupBoxLayout` | `undefined` | -| `lazyLoadRows` | `lazy-load-rows` | When set to true, extra rows will be automatically loaded once the last row enters the viewport. | `boolean` | `false` | -| `loadMoreLimit` | `load-more-limit` | Sets a maximum limit of new records which can be required by the load more functionality. | `number` | `1000` | -| `loadMoreMode` | `load-more-mode` | Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. | `LoadMoreMode.CONSTANT \| LoadMoreMode.CONSTANT_INCREMENT \| LoadMoreMode.PROGRESSIVE_THRESHOLD` | `LoadMoreMode.PROGRESSIVE_THRESHOLD` | -| `loadMoreStep` | `load-more-step` | The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. | `number` | `60` | -| `multiSelection` | `multi-selection` | Enable multi selection | `boolean` | `false` | -| `pageSelected` | `page-selected` | Current page number | `number` | `1` | -| `pagination` | `pagination` | Enables pagination | `boolean` | `false` | -| `rowsPerPage` | `rows-per-page` | Number of current rows per page | `number` | `undefined` | -| `scrollOnHover` | `scroll-on-hover` | Activates the scroll on hover function. | `boolean` | `false` | -| `selectBox` | `select-box` | Automatically selects the box at the specified index | `number` | `undefined` | -| `selectedRowsState` | `selected-rows-state` | Multiple selection | `string` | `undefined` | -| `showLoadMore` | `show-load-more` | If set to true, displays the button to load more records. | `boolean` | `false` | -| `showSelection` | `show-selection` | If enabled, highlights the selected box/boxes | `boolean` | `true` | -| `sortBy` | `sort-by` | If sorting is enabled, specifies which column to sort | `string` | `undefined` | -| `sortEnabled` | `sort-enabled` | Enable sorting | `boolean` | `false` | -| `stateId` | `state-id` | | `string` | `''` | -| `store` | -- | | `KupStore` | `undefined` | -| `swipeDisabled` | `swipe-disabled` | Disable swipe | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------ | +| `cardData` | -- | Data of the card linked to the box when the latter's layout must be a premade template. | `GenericObject` | `null` | +| `columns` | `columns` | Number of columns | `number` | `1` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Actual data of the box. | `KupBoxData` | `null` | +| `dragEnabled` | `drag-enabled` | Enable dragging | `boolean` | `false` | +| `dropEnabled` | `drop-enabled` | Enable dropping | `boolean` | `false` | +| `dropOnSection` | `drop-on-section` | Drop can be done in section | `boolean` | `false` | +| `editableData` | `editable-data` | When set to true, editable cells will be rendered using input components. | `boolean` | `false` | +| `enableRowActions` | `enable-row-actions` | If enabled, a button to load / display the row actions will be displayed on the right of every box | `boolean` | `false` | +| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` | +| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` | +| `kanban` | -- | Displays the boxlist as a Kanban. | `KupBoxKanban` | `null` | +| `layout` | -- | How the field will be displayed. If not present, a default one will be created. | `KupBoxLayout` | `undefined` | +| `lazyLoadRows` | `lazy-load-rows` | When set to true, extra rows will be automatically loaded once the last row enters the viewport. | `boolean` | `false` | +| `loadMoreLimit` | `load-more-limit` | Sets a maximum limit of new records which can be required by the load more functionality. | `number` | `1000` | +| `loadMoreMode` | `load-more-mode` | Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. | `LoadMoreMode.CONSTANT \| LoadMoreMode.CONSTANT_INCREMENT \| LoadMoreMode.PROGRESSIVE_THRESHOLD` | `LoadMoreMode.PROGRESSIVE_THRESHOLD` | +| `loadMoreStep` | `load-more-step` | The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. | `number` | `60` | +| `multiSelection` | `multi-selection` | Enable multi selection | `boolean` | `false` | +| `pageSelected` | `page-selected` | Current page number | `number` | `1` | +| `pagination` | `pagination` | Enables pagination | `boolean` | `false` | +| `rowsPerPage` | `rows-per-page` | Number of current rows per page | `number` | `undefined` | +| `scrollOnHover` | `scroll-on-hover` | Activates the scroll on hover function. | `boolean` | `false` | +| `selectBox` | `select-box` | Automatically selects the box at the specified index | `number` | `undefined` | +| `selectedRowsState` | `selected-rows-state` | Multiple selection | `string` | `undefined` | +| `showLoadMore` | `show-load-more` | If set to true, displays the button to load more records. | `boolean` | `false` | +| `showSelection` | `show-selection` | If enabled, highlights the selected box/boxes | `boolean` | `true` | +| `sortBy` | `sort-by` | If sorting is enabled, specifies which column to sort | `string` | `undefined` | +| `sortEnabled` | `sort-enabled` | Enable sorting | `boolean` | `false` | +| `stateId` | `state-id` | | `string` | `''` | +| `store` | -- | | `KupStore` | `undefined` | +| `swipeDisabled` | `swipe-disabled` | Disable swipe | `boolean` | `false` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-box-autoselect` | Triggered when a box is auto selected via selectBox prop | `CustomEvent` | -| `kup-box-click` | Triggered when a box is clicked | `CustomEvent` | -| `kup-box-contextmenu` | Generic right click event on box. | `CustomEvent` | -| `kup-box-didload` | | `CustomEvent` | -| `kup-box-didunload` | Triggered when stop propagation event | `CustomEvent` | -| `kup-box-loadmoreclick` | | `CustomEvent` | -| `kup-box-rowactionclick` | When the row menu action icon is click | `CustomEvent` | -| `kup-box-rowactionmenuclick` | When the row menu action icon is click | `CustomEvent` | -| `kup-box-selected` | Triggered when the multi selection checkbox changes value | `CustomEvent` | +| Event | Description | Type | +| ---------------------------- | --------------------------------------------------------- | ----------------------------------------------- | +| `kup-box-autoselect` | Triggered when a box is auto selected via selectBox prop | `CustomEvent` | +| `kup-box-click` | Triggered when a box is clicked | `CustomEvent` | +| `kup-box-contextmenu` | Generic right click event on box. | `CustomEvent` | +| `kup-box-didload` | | `CustomEvent` | +| `kup-box-didunload` | Triggered when stop propagation event | `CustomEvent` | +| `kup-box-loadmoreclick` | | `CustomEvent` | +| `kup-box-rowactionclick` | When the row menu action icon is click | `CustomEvent` | +| `kup-box-rowactionmenuclick` | When the row menu action icon is click | `CustomEvent` | +| `kup-box-selected` | Triggered when the multi selection checkbox changes value | `CustomEvent` | + ## Methods @@ -60,8 +63,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -72,6 +75,8 @@ List of props as object, each key will be a prop. ### `loadRowActions(row: KupBoxRow, actions: KupDataRowAction[]) => Promise` + + #### Parameters | Name | Type | Description | @@ -83,6 +88,8 @@ List of props as object, each key will be a prop. Type: `Promise` + + ### `refresh() => Promise` This method is used to trigger a new render of the component. @@ -91,62 +98,67 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-box-background-color` | Sets background of the component. | -| `--kup-box-color` | Sets text color of the component. | -| `--kup-box-font-family` | Sets font family of the component. | -| `--kup-box-font-size` | Sets font size of the component. | -| `--kup-box-grid-gap` | Sets gap between each box. | -| `--kup-box-hover-box-shadow` | Sets box shadow for the hover effect. | -| `--kup-box-primary-color-rgb` | Sets RGB values of primary color (used for box selection) . | -| `--kup-box-transition` | Sets transition duration for box-shadow and background-color. | +| Name | Description | +| ----------------------------- | ------------------------------------------------------------- | +| `--kup-box-background-color` | Sets background of the component. | +| `--kup-box-color` | Sets text color of the component. | +| `--kup-box-font-family` | Sets font family of the component. | +| `--kup-box-font-size` | Sets font size of the component. | +| `--kup-box-grid-gap` | Sets gap between each box. | +| `--kup-box-hover-box-shadow` | Sets box shadow for the hover effect. | +| `--kup-box-primary-color-rgb` | Sets RGB values of primary color (used for box selection) . | +| `--kup-box-transition` | Sets transition duration for box-shadow and background-color. | + ## Dependencies ### Used by -- [kup-family-tree](../kup-family-tree) -- [kup-magic-box](../kup-magic-box) + - [kup-family-tree](../kup-family-tree) + - [kup-magic-box](../kup-magic-box) ### Depends on -- [kup-card](../kup-card) -- [kup-checkbox](../kup-checkbox) -- [kup-badge](../kup-badge) -- [kup-combobox](../kup-combobox) -- [kup-text-field](../kup-text-field) -- [kup-dialog](../kup-dialog) -- [kup-autocomplete](../kup-autocomplete) -- [kup-chip](../kup-chip) -- [kup-color-picker](../kup-color-picker) -- [kup-date-picker](../kup-date-picker) -- [kup-rating](../kup-rating) -- [kup-time-picker](../kup-time-picker) -- [kup-image](../kup-image) -- [kup-button-list](../kup-button-list) -- [kup-chart](../kup-chart) -- [kup-gauge](../kup-gauge) -- [kup-progress-bar](../kup-progress-bar) +- [kup-card](../kup-card) +- [kup-checkbox](../kup-checkbox) +- [kup-badge](../kup-badge) +- [kup-combobox](../kup-combobox) +- [kup-text-field](../kup-text-field) +- [kup-dialog](../kup-dialog) +- [kup-autocomplete](../kup-autocomplete) +- [kup-chip](../kup-chip) +- [kup-color-picker](../kup-color-picker) +- [kup-date-picker](../kup-date-picker) +- [kup-rating](../kup-rating) +- [kup-time-picker](../kup-time-picker) +- [kup-image](../kup-image) +- [kup-button-list](../kup-button-list) +- [kup-chart](../kup-chart) +- [kup-gauge](../kup-gauge) +- [kup-progress-bar](../kup-progress-bar) ### Graph - ```mermaid graph TD; kup-box --> kup-card @@ -230,7 +242,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -323,6 +334,6 @@ graph TD; style kup-box fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-button-list/readme.md b/packages/ketchup/src/components/kup-button-list/readme.md index 5533eb8d8e..f15838cf1c 100644 --- a/packages/ketchup/src/components/kup-button-list/readme.md +++ b/packages/ketchup/src/components/kup-button-list/readme.md @@ -2,22 +2,25 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `columns` | `columns` | Number of columns. | `number` | `0` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the sub-components. | `KupButtonListNode[]` | `[]` | -| `disabled` | `disabled` | When set to true, the sub-components are disabled. | `boolean` | `false` | -| `showSelection` | `show-selection` | When set to true, highlights the selected button with the secondary color of KupTheme. | `boolean` | `true` | -| `styling` | `styling` | Defines the style of the buttons. Available styles are "outlined" of "flat" (which is the default). | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.FLAT` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------- | +| `columns` | `columns` | Number of columns. | `number` | `0` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the sub-components. | `KupButtonListNode[]` | `[]` | +| `disabled` | `disabled` | When set to true, the sub-components are disabled. | `boolean` | `false` | +| `showSelection` | `show-selection` | When set to true, highlights the selected button with the secondary color of KupTheme. | `boolean` | `true` | +| `styling` | `styling` | Defines the style of the buttons. Available styles are "outlined" of "flat" (which is the default). | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.FLAT` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-buttonlist-click` | | `CustomEvent` | +| Event | Description | Type | +| ---------------------- | ----------- | --------------------------------------------- | +| `kup-buttonlist-click` | | `CustomEvent` | + ## Methods @@ -27,8 +30,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -45,55 +48,60 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-buttonlist-grid-gap` | Sets gap between each button. | -| `--kup-buttonlist-selected-primary-color` | Sets the primary color of a selected button. | -| `--kup-buttonlist-selected-primary-color-h` | Sets the hue value of primary color of a selected button. | -| `--kup-buttonlist-selected-primary-color-l` | Sets the lightness value of primary color of a selected button. | -| `--kup-buttonlist-selected-primary-color-rgb` | Sets the RGB values of primary color of a selected button. | -| `--kup-buttonlist-selected-primary-color-s` | Sets the saturation value of primary color of a selected button. | -| `--kup-buttonlist-selected-text-on-primary-color` | Sets the text on primary color of a selected button. | +| Name | Description | +| ------------------------------------------------- | ---------------------------------------------------------------- | +| `--kup-buttonlist-grid-gap` | Sets gap between each button. | +| `--kup-buttonlist-selected-primary-color` | Sets the primary color of a selected button. | +| `--kup-buttonlist-selected-primary-color-h` | Sets the hue value of primary color of a selected button. | +| `--kup-buttonlist-selected-primary-color-l` | Sets the lightness value of primary color of a selected button. | +| `--kup-buttonlist-selected-primary-color-rgb` | Sets the RGB values of primary color of a selected button. | +| `--kup-buttonlist-selected-primary-color-s` | Sets the saturation value of primary color of a selected button. | +| `--kup-buttonlist-selected-text-on-primary-color` | Sets the text on primary color of a selected button. | + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-cell](../kup-cell) -- [kup-data-table](../kup-data-table) -- [kup-form](../kup-form) -- [kup-image-list](../kup-image-list) -- [kup-input-panel](../kup-input-panel) -- [kup-magic-box](../kup-magic-box) -- [kup-tree](../kup-tree) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-cell](../kup-cell) + - [kup-data-table](../kup-data-table) + - [kup-form](../kup-form) + - [kup-image-list](../kup-image-list) + - [kup-input-panel](../kup-input-panel) + - [kup-magic-box](../kup-magic-box) + - [kup-tree](../kup-tree) ### Depends on -- [kup-dropdown-button](../kup-dropdown-button) -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-dropdown-button](../kup-dropdown-button) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-button-list --> kup-dropdown-button @@ -144,7 +152,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -180,6 +187,6 @@ graph TD; style kup-button-list fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-button/readme.md b/packages/ketchup/src/components/kup-button/readme.md index ecd651b605..887d69b0a0 100644 --- a/packages/ketchup/src/components/kup-button/readme.md +++ b/packages/ketchup/src/components/kup-button/readme.md @@ -2,30 +2,34 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `buttonType` | `button-type` | Sets the type of the button. | `string` | `null` | -| `checked` | `checked` | When set to true, the icon button state will be on. | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `icon` | `icon` | When set, the button will show this icon. | `string` | `null` | -| `iconOff` | `icon-off` | When set, the icon button off state will show this icon. Otherwise, an outlined version of the icon prop will be displayed. | `string` | `null` | -| `label` | `label` | When set, the button will show this text. | `string` | `null` | -| `showSpinner` | `show-spinner` | When set to true, the button show a spinner received in slot. | `boolean` | `false` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | -| `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` | -| `toggable` | `toggable` | When set to true, the icon button will be toggable on/off. | `boolean` | `false` | -| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `buttonType` | `button-type` | Sets the type of the button. | `string` | `null` | +| `checked` | `checked` | When set to true, the icon button state will be on. | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `icon` | `icon` | When set, the button will show this icon. | `string` | `null` | +| `iconOff` | `icon-off` | When set, the icon button off state will show this icon. Otherwise, an outlined version of the icon prop will be displayed. | `string` | `null` | +| `label` | `label` | 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` | +| `showSpinner` | `show-spinner` | When set to true, the button show a spinner received in slot. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| `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` | +| `toggable` | `toggable` | When set to true, the icon button will be toggable on/off. | `boolean` | `false` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-button-blur` | Triggered when the button loses focus. | `CustomEvent` | -| `kup-button-click` | Triggered when the button is clicked. | `CustomEvent` | -| `kup-button-focus` | Triggered when the button is focused. | `CustomEvent` | +| Event | Description | Type | +| ------------------ | -------------------------------------- | ----------------------------------------- | +| `kup-button-blur` | Triggered when the button loses focus. | `CustomEvent` | +| `kup-button-click` | Triggered when the button is clicked. | `CustomEvent` | +| `kup-button-focus` | Triggered when the button is focused. | `CustomEvent` | + ## Methods @@ -35,8 +39,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -53,56 +57,61 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-button-border-radius` | Sets border radius of the button. | -| `--kup-button-disabled-color` | Sets disabled color of the button. | -| `--kup-button-font-family` | Sets font family of the button. | -| `--kup-button-font-size` | Sets font size of the button. | -| `--kup-button-font-weight` | Sets font weight of the button. | -| `--kup-button-height` | Sets height of the button. | -| `--kup-button-padding` | Sets padding of the button. | -| `--kup-button-primary-color` | Sets the primary color of the button. | -| `--kup-button-primary-color-h` | Sets the primary color Hue value of the button (used for focus/hover effects). | -| `--kup-button-primary-color-l` | Sets the primary color Lightness value of the button (used for focus/hover effects). | -| `--kup-button-primary-color-rgb` | Sets the primary color RGB values of the button (used for shaders). | -| `--kup-button-primary-color-s` | Sets the primary color Saturation value of the button (used for focus/hover effects). | -| `--kup-button-text-on-primary-color` | Sets text and icon color for raised buttons. | -| `--kup-button-text-transform` | Set the label case, default is uppercase. | +| Name | Description | +| ------------------------------------ | ------------------------------------------------------------------------------------- | +| `--kup-button-border-radius` | Sets border radius of the button. | +| `--kup-button-disabled-color` | Sets disabled color of the button. | +| `--kup-button-font-family` | Sets font family of the button. | +| `--kup-button-font-size` | Sets font size of the button. | +| `--kup-button-font-weight` | Sets font weight of the button. | +| `--kup-button-height` | Sets height of the button. | +| `--kup-button-padding` | Sets padding of the button. | +| `--kup-button-primary-color` | Sets the primary color of the button. | +| `--kup-button-primary-color-h` | Sets the primary color Hue value of the button (used for focus/hover effects). | +| `--kup-button-primary-color-l` | Sets the primary color Lightness value of the button (used for focus/hover effects). | +| `--kup-button-primary-color-rgb` | Sets the primary color RGB values of the button (used for shaders). | +| `--kup-button-primary-color-s` | Sets the primary color Saturation value of the button (used for focus/hover effects). | +| `--kup-button-text-on-primary-color` | Sets text and icon color for raised buttons. | +| `--kup-button-text-transform` | Set the label case, default is uppercase. | + ## Dependencies ### Used by -- [kup-card](../kup-card) -- [kup-data-table](../kup-data-table) -- [kup-iframe](../kup-iframe) -- [kup-magic-box](../kup-magic-box) + - [kup-card](../kup-card) + - [kup-data-table](../kup-data-table) + - [kup-iframe](../kup-iframe) + - [kup-magic-box](../kup-magic-box) ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-button --> kup-card @@ -148,7 +157,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -217,6 +225,6 @@ graph TD; style kup-button fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-calendar/readme.md b/packages/ketchup/src/components/kup-calendar/readme.md index e786662b23..d440e58afd 100644 --- a/packages/ketchup/src/components/kup-calendar/readme.md +++ b/packages/ketchup/src/components/kup-calendar/readme.md @@ -2,26 +2,29 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `currentDate` | `current-date` | Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD). | `string` | `null` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Actual data of the calendar. | `KupCalendarData` | `null` | -| `editableEvents` | `editable-events` | When true, events are editable. | `boolean` | `true` | -| `hideNavigation` | `hide-navigation` | When disabled, the navigation toolbar won't be displayed. | `boolean` | `false` | -| `viewType` | `view-type` | Type of the view. | `KupCalendarViewTypes.DAY \| KupCalendarViewTypes.LIST \| KupCalendarViewTypes.MONTH \| KupCalendarViewTypes.WEEK` | `KupCalendarViewTypes.MONTH` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------- | +| `currentDate` | `current-date` | Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD). | `string` | `null` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Actual data of the calendar. | `KupCalendarData` | `null` | +| `editableEvents` | `editable-events` | When true, events are editable. | `boolean` | `true` | +| `hideNavigation` | `hide-navigation` | When disabled, the navigation toolbar won't be displayed. | `boolean` | `false` | +| `viewType` | `view-type` | Type of the view. | `KupCalendarViewTypes.DAY \| KupCalendarViewTypes.LIST \| KupCalendarViewTypes.MONTH \| KupCalendarViewTypes.WEEK` | `KupCalendarViewTypes.MONTH` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-calendar-dateclick` | When a date is clicked. | `CustomEvent` | -| `kup-calendar-eventclick` | When an event is clicked. | `CustomEvent` | -| `kup-calendar-eventdrop` | When a date is dropped. | `CustomEvent` | +| Event | Description | Type | +| ------------------------- | -------------------------- | ------------------------------------------------ | +| `kup-calendar-dateclick` | When a date is clicked. | `CustomEvent` | +| `kup-calendar-eventclick` | When an event is clicked. | `CustomEvent` | +| `kup-calendar-eventdrop` | When a date is dropped. | `CustomEvent` | | `kup-calendar-viewchange` | When the navigation change | `CustomEvent` | + ## Methods ### `getProps(descriptions?: boolean) => Promise` @@ -30,8 +33,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -48,6 +51,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `resizeCallback() => Promise` This method is invoked by KupManager whenever the component changes size. @@ -56,49 +61,54 @@ This method is invoked by KupManager whenever the component changes size. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-calendar-background-color` | Background of the component. | -| `--kup-calendar-border-color` | Sets borders color of the calendar. | -| `--kup-calendar-event-background-color` | Sets background color of events. | -| `--kup-calendar-event-border-color` | Sets border color of events. | -| `--kup-calendar-event-border-radius` | Sets border radius of events. | -| `--kup-calendar-event-color` | Sets text color of events. | -| `--kup-calendar-font-family` | Sets the font family of the component. | -| `--kup-calendar-font-size` | Sets the font size of the component. | -| `--kup-calendar-header-background-color` | Sets background color of the header cell. | -| `--kup-calendar-header-color` | Sets text color of the header cell. | -| `--kup-calendar-navigator-border` | Sets the border of the navigator. | +| Name | Description | +| --------------------------------------------- | --------------------------------------------------- | +| `--kup-calendar-background-color` | Background of the component. | +| `--kup-calendar-border-color` | Sets borders color of the calendar. | +| `--kup-calendar-event-background-color` | Sets background color of events. | +| `--kup-calendar-event-border-color` | Sets border color of events. | +| `--kup-calendar-event-border-radius` | Sets border radius of events. | +| `--kup-calendar-event-color` | Sets text color of events. | +| `--kup-calendar-font-family` | Sets the font family of the component. | +| `--kup-calendar-font-size` | Sets the font size of the component. | +| `--kup-calendar-header-background-color` | Sets background color of the header cell. | +| `--kup-calendar-header-color` | Sets text color of the header cell. | +| `--kup-calendar-navigator-border` | Sets the border of the navigator. | | `--kup-calendar-no-work-day-background-color` | Sets background color of sunday and saturday cells. | -| `--kup-calendar-no-work-day-color` | Sets text color of sunday and saturday cells. | -| `--kup-calendar-today-background-color` | Sets background color of today's cell. | +| `--kup-calendar-no-work-day-color` | Sets text color of sunday and saturday cells. | +| `--kup-calendar-today-background-color` | Sets background color of today's cell. | + ## Dependencies ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-calendar --> kup-card @@ -168,7 +178,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -259,6 +268,6 @@ graph TD; style kup-calendar fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-card-list/readme.md b/packages/ketchup/src/components/kup-card-list/readme.md index a7f86da022..e9dca806d6 100644 --- a/packages/ketchup/src/components/kup-card-list/readme.md +++ b/packages/ketchup/src/components/kup-card-list/readme.md @@ -2,32 +2,35 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `columnsNumber` | `columns-number` | Sets the number of columns. | `number` | `1` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Actual data of the component. | `KupCardListData` | `null` | -| `decvalueCol` | `decvalue-col` | Sets the decimal value column. | `string` | `''` | -| `descrCol` | `descr-col` | Sets the description column. | `string` | `''` | -| `fullWidth` | `full-width` | Sets whether the component occupies all available width. | `boolean` | `true` | -| `horizontal` | `horizontal` | Sets whether the cards are placed horizontally or not. | `boolean` | `false` | -| `iconCol` | `icon-col` | Sets the icon column. | `string` | `''` | -| `iconcolorCol` | `iconcolor-col` | Sets the icon color column. | `string` | `''` | -| `intvalueCol` | `intvalue-col` | Sets the integer value column. | `string` | `''` | -| `isClickable` | `is-clickable` | Sets whether a single card is clickable or not. | `boolean` | `false` | -| `layoutCol` | `layout-col` | Sets the layout column. | `string` | `''` | -| `measureCol` | `measure-col` | Sets the unit of measure column. | `string` | `''` | -| `textcolorCol` | `textcolor-col` | Sets the text color column. | `string` | `''` | -| `valueCol` | `value-col` | Sets the value column. | `string` | `''` | -| `valuecolorCol` | `valuecolor-col` | Sets the value color column. | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | -------------------------------------------------------- | ----------------- | ------- | +| `columnsNumber` | `columns-number` | Sets the number of columns. | `number` | `1` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Actual data of the component. | `KupCardListData` | `null` | +| `decvalueCol` | `decvalue-col` | Sets the decimal value column. | `string` | `''` | +| `descrCol` | `descr-col` | Sets the description column. | `string` | `''` | +| `fullWidth` | `full-width` | Sets whether the component occupies all available width. | `boolean` | `true` | +| `horizontal` | `horizontal` | Sets whether the cards are placed horizontally or not. | `boolean` | `false` | +| `iconCol` | `icon-col` | Sets the icon column. | `string` | `''` | +| `iconcolorCol` | `iconcolor-col` | Sets the icon color column. | `string` | `''` | +| `intvalueCol` | `intvalue-col` | Sets the integer value column. | `string` | `''` | +| `isClickable` | `is-clickable` | Sets whether a single card is clickable or not. | `boolean` | `false` | +| `layoutCol` | `layout-col` | Sets the layout column. | `string` | `''` | +| `measureCol` | `measure-col` | Sets the unit of measure column. | `string` | `''` | +| `textcolorCol` | `textcolor-col` | Sets the text color column. | `string` | `''` | +| `valueCol` | `value-col` | Sets the value column. | `string` | `''` | +| `valuecolorCol` | `valuecolor-col` | Sets the value color column. | `string` | `''` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-cardlist-click` | | `CustomEvent` | +| Event | Description | Type | +| -------------------- | ----------- | ------------------------------------------- | +| `kup-cardlist-click` | | `CustomEvent` | + ## Methods @@ -37,8 +40,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -55,20 +58,25 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties | Name | Description | @@ -78,16 +86,16 @@ Type: `Promise` | `--kup-cardlist-cards-min-height` | Sets the min height of the cards. | | `--kup-cardlist-cards-min-width` | Sets the min width of the cards. | + ## Dependencies ### Depends on -- [kup-card](../kup-card) -- [kup-grid](../kup-grid) -- [kup-dialog](../kup-dialog) +- [kup-card](../kup-card) +- [kup-grid](../kup-grid) +- [kup-dialog](../kup-dialog) ### Graph - ```mermaid graph TD; kup-card-list --> kup-card @@ -157,7 +165,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -250,6 +257,6 @@ graph TD; style kup-card-list fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-cell/readme.md b/packages/ketchup/src/components/kup-cell/readme.md index 26ae3c6d55..e69ba26719 100644 --- a/packages/ketchup/src/components/kup-cell/readme.md +++ b/packages/ketchup/src/components/kup-cell/readme.md @@ -2,14 +2,16 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | The data of the cell. | `KupDataCell` | `null` | -| `density` | `density` | The density of the cell, defaults at 'dense' and can be also set to 'wide' or 'medium'. | `FCellPadding.DENSE \| FCellPadding.MEDIUM \| FCellPadding.NONE \| FCellPadding.WIDE` | `FCellPadding.NONE` | -| `dragEnabled` | `drag-enabled` | When set to true, the component is draggable. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | The data of the cell. | `KupDataCell` | `null` | +| `density` | `density` | The density of the cell, defaults at 'dense' and can be also set to 'wide' or 'medium'. | `FCellPadding.DENSE \| FCellPadding.MEDIUM \| FCellPadding.NONE \| FCellPadding.WIDE` | `FCellPadding.NONE` | +| `dragEnabled` | `drag-enabled` | When set to true, the component is draggable. | `boolean` | `false` | + ## Methods @@ -27,14 +29,16 @@ Adds the given CSS classes to the cell's data. Type: `Promise` + + ### `getProps(descriptions?: boolean) => Promise` Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -51,6 +55,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `removeCssClasses(classes?: string[]) => Promise` Removes the given CSS classes from the cell's data. @@ -65,53 +71,58 @@ Removes the given CSS classes from the cell's data. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-cell-background` | Sets the background of the cell. | -| `--kup-cell-font-family` | Sets the font family of the cell. | -| `--kup-cell-font-family-monospace` | Sets the monospace font family of the cell (for numbers). | -| `--kup-cell-font-size` | Sets the font size of the cell. | -| `--kup-cell-text-color` | Sets the text color of the cell. NOTE: These variables are defined in the "kup-theme.css" file, because they must work even without the kup component (it's a functional component) | +| Name | Description | +| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--kup-cell-background` | Sets the background of the cell. | +| `--kup-cell-font-family` | Sets the font family of the cell. | +| `--kup-cell-font-family-monospace` | Sets the monospace font family of the cell (for numbers). | +| `--kup-cell-font-size` | Sets the font size of the cell. | +| `--kup-cell-text-color` | Sets the text color of the cell. NOTE: These variables are defined in the "kup-theme.css" file, because they must work even without the kup component (it's a functional component) | + ## Dependencies ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-autocomplete](../kup-autocomplete) -- [kup-chip](../kup-chip) -- [kup-text-field](../kup-text-field) -- [kup-color-picker](../kup-color-picker) -- [kup-combobox](../kup-combobox) -- [kup-date-picker](../kup-date-picker) -- [kup-rating](../kup-rating) -- [kup-time-picker](../kup-time-picker) -- [kup-image](../kup-image) -- [kup-button-list](../kup-button-list) -- [kup-chart](../kup-chart) -- [kup-gauge](../kup-gauge) -- [kup-progress-bar](../kup-progress-bar) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-autocomplete](../kup-autocomplete) +- [kup-chip](../kup-chip) +- [kup-text-field](../kup-text-field) +- [kup-color-picker](../kup-color-picker) +- [kup-combobox](../kup-combobox) +- [kup-date-picker](../kup-date-picker) +- [kup-rating](../kup-rating) +- [kup-time-picker](../kup-time-picker) +- [kup-image](../kup-image) +- [kup-button-list](../kup-button-list) +- [kup-chart](../kup-chart) +- [kup-gauge](../kup-gauge) +- [kup-progress-bar](../kup-progress-bar) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-cell --> kup-card @@ -194,7 +205,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -285,6 +295,6 @@ graph TD; style kup-cell fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-chart/readme.md b/packages/ketchup/src/components/kup-chart/readme.md index 54bb525186..3d3c60b5d9 100644 --- a/packages/ketchup/src/components/kup-chart/readme.md +++ b/packages/ketchup/src/components/kup-chart/readme.md @@ -2,38 +2,41 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `asp` | `asp` | Sets the chart to a 2D or 3D aspect. 3D only works for Pie graphs. | `ChartAspect.D2 \| ChartAspect.D3` | `undefined` | -| `axis` | `axis` | Sets the axis of the chart. | `string` | `undefined` | -| `chartTitle` | -- | Title of the graph. | `ChartTitle` | `undefined` | -| `colors` | -- | Colors of the chart. | `string[]` | `[]` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | The actual data of the chart. | `KupDataDataset` | `undefined` | -| `hAxes` | -- | Customize the hAxes for multiple-chart. | `ChartAxis[]` | `undefined` | -| `hAxis` | -- | Customize the hAxis. | `ChartAxis` | `undefined` | -| `legend` | `legend` | Sets the position of the legend. Supported values: bottom, labeled, left, none, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work. | `string` | `'right'` | -| `offlineMode` | -- | Renders charts without the Google API and using jQuery Sparkline. | `ChartOfflineMode` | `undefined` | -| `series` | -- | The data series to be displayed. They must be of the same type. | `ChartSerie[]` | `undefined` | -| `showMarks` | `show-marks` | Displays the numerical values. | `boolean` | `false` | -| `sizeX` | `size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `'100%'` | -| `sizeY` | `size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` | -| `sorting` | -- | Used to sort series. | `KupChartSort[]` | `null` | -| `stacked` | `stacked` | Displays the data columns of an object on top of each other. | `boolean` | `false` | -| `trendlines` | -- | KupChartTrendlines. | `KupChartTrendlines` | `undefined` | -| `types` | -- | The type of the chart. Supported formats: Area, Bubble, Cal, Candlestick, Combo, Geo, Hbar, Line, Ohlc, Pie, Sankey, Scatter, Unk, Vbar. | `ChartType[]` | `[ChartType.Hbar]` | -| `vAxes` | -- | Customize the vAxes for multiple-chart. | `ChartAxis[]` | `undefined` | -| `vAxis` | -- | Customize the vAxis. | `ChartAxis` | `undefined` | -| `version` | `version` | Google chart version to load | `string` | `'45.2'` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------ | +| `asp` | `asp` | Sets the chart to a 2D or 3D aspect. 3D only works for Pie graphs. | `ChartAspect.D2 \| ChartAspect.D3` | `undefined` | +| `axis` | `axis` | Sets the axis of the chart. | `string` | `undefined` | +| `chartTitle` | -- | Title of the graph. | `ChartTitle` | `undefined` | +| `colors` | -- | Colors of the chart. | `string[]` | `[]` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | The actual data of the chart. | `KupDataDataset` | `undefined` | +| `hAxes` | -- | Customize the hAxes for multiple-chart. | `ChartAxis[]` | `undefined` | +| `hAxis` | -- | Customize the hAxis. | `ChartAxis` | `undefined` | +| `legend` | `legend` | Sets the position of the legend. Supported values: bottom, labeled, left, none, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work. | `string` | `'right'` | +| `offlineMode` | -- | Renders charts without the Google API and using jQuery Sparkline. | `ChartOfflineMode` | `undefined` | +| `series` | -- | The data series to be displayed. They must be of the same type. | `ChartSerie[]` | `undefined` | +| `showMarks` | `show-marks` | Displays the numerical values. | `boolean` | `false` | +| `sizeX` | `size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `'100%'` | +| `sizeY` | `size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` | +| `sorting` | -- | Used to sort series. | `KupChartSort[]` | `null` | +| `stacked` | `stacked` | Displays the data columns of an object on top of each other. | `boolean` | `false` | +| `trendlines` | -- | KupChartTrendlines. | `KupChartTrendlines` | `undefined` | +| `types` | -- | The type of the chart. Supported formats: Area, Bubble, Cal, Candlestick, Combo, Geo, Hbar, Line, Ohlc, Pie, Sankey, Scatter, Unk, Vbar. | `ChartType[]` | `[ChartType.Hbar]` | +| `vAxes` | -- | Customize the vAxes for multiple-chart. | `ChartAxis[]` | `undefined` | +| `vAxis` | -- | Customize the vAxis. | `ChartAxis` | `undefined` | +| `version` | `version` | Google chart version to load | `string` | `'45.2'` | + ## Events -| Event | Description | Type | -| --- | --- | --- | +| Event | Description | Type | +| ----------------- | --------------------------------------- | --------------------------------- | | `kup-chart-click` | Triggered when a chart serie is clicked | `CustomEvent` | + ## Methods ### `getProps(descriptions?: boolean) => Promise` @@ -42,8 +45,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -60,6 +63,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `resizeCallback() => Promise` This method is invoked by KupManager whenever the component changes size. @@ -68,41 +73,45 @@ This method is invoked by KupManager whenever the component changes size. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-cell](../kup-cell) -- [kup-data-table](../kup-data-table) -- [kup-form](../kup-form) -- [kup-image-list](../kup-image-list) -- [kup-input-panel](../kup-input-panel) -- [kup-magic-box](../kup-magic-box) -- [kup-tree](../kup-tree) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-cell](../kup-cell) + - [kup-data-table](../kup-data-table) + - [kup-form](../kup-form) + - [kup-image-list](../kup-image-list) + - [kup-input-panel](../kup-input-panel) + - [kup-magic-box](../kup-magic-box) + - [kup-tree](../kup-tree) ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) ### Graph - ```mermaid graph TD; kup-chart --> kup-card @@ -147,7 +156,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -189,6 +197,6 @@ graph TD; style kup-chart fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-checkbox/readme.md b/packages/ketchup/src/components/kup-checkbox/readme.md index 419ea555f5..61e396e1b4 100644 --- a/packages/ketchup/src/components/kup-checkbox/readme.md +++ b/packages/ketchup/src/components/kup-checkbox/readme.md @@ -7,26 +7,29 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `alert` | `alert` | Set alert message | `string` | `''` | -| `checked` | `checked` | Defaults at false. When set to true, the component will be set to 'checked'. | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `disabled` | `disabled` | When set to true, the component is disabled. | `boolean` | `false` | -| `error` | `error` | Set error message | `string` | `''` | -| `indeterminate` | `indeterminate` | When set to true, the component will be set to 'indeterminate'. | `boolean` | `false` | -| `label` | `label` | When specified, 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` | +| Property | Attribute | Description | Type | Default | +| --------------- | --------------- | ---------------------------------------------------------------------------- | --------- | ------- | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `checked` | `checked` | Defaults at false. When set to true, the component will be set to 'checked'. | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `disabled` | `disabled` | When set to true, the component is disabled. | `boolean` | `false` | +| `error` | `error` | Set error message | `string` | `''` | +| `indeterminate` | `indeterminate` | When set to true, the component will be set to 'indeterminate'. | `boolean` | `false` | +| `label` | `label` | When specified, 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` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-checkbox-blur` | Triggered when the input element loses focus. | `CustomEvent` | +| Event | Description | Type | +| --------------------- | ------------------------------------------------- | -------------------------------------- | +| `kup-checkbox-blur` | Triggered when the input element loses focus. | `CustomEvent` | | `kup-checkbox-change` | Triggered when the input element's value changes. | `CustomEvent` | -| `kup-checkbox-focus` | Triggered when the input element gets focused. | `CustomEvent` | +| `kup-checkbox-focus` | Triggered when the input element gets focused. | `CustomEvent` | + ## Methods @@ -36,8 +39,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -54,52 +57,57 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-checkbox-disabled-checkmark-color` | Sets color of the checkmark of a disabled checkbox. | -| `--kup-checkbox-font-family` | Sets font family of the checkbox's label. | -| `--kup-checkbox-font-size` | Sets font size of the checkbox's label. | -| `--kup-checkbox-font-weight` | Sets font weight of the checkbox's label. | -| `--kup-checkbox-padding` | Sets padding of the checkbox. | -| `--kup-checkbox-primary-color` | Sets primary color of the component. | -| `--kup-checkbox-primary-color-rgb` | Sets primary color RGB values of the component (used for shaders). | -| `--kup-checkbox-text-color` | Sets the text color of the component. | -| `--kup-checkbox-text-color-rgb` | Sets the text color RGB values of the component (used for shaders). | -| `--kup-checkbox-text-on-primary-color` | Sets text on primary color of the component. | +| Name | Description | +| ------------------------------------------ | -------------------------------------------------------------------------- | +| `--kup-checkbox-disabled-checkmark-color` | Sets color of the checkmark of a disabled checkbox. | +| `--kup-checkbox-font-family` | Sets font family of the checkbox's label. | +| `--kup-checkbox-font-size` | Sets font size of the checkbox's label. | +| `--kup-checkbox-font-weight` | Sets font weight of the checkbox's label. | +| `--kup-checkbox-padding` | Sets padding of the checkbox. | +| `--kup-checkbox-primary-color` | Sets primary color of the component. | +| `--kup-checkbox-primary-color-rgb` | Sets primary color RGB values of the component (used for shaders). | +| `--kup-checkbox-text-color` | Sets the text color of the component. | +| `--kup-checkbox-text-color-rgb` | Sets the text color RGB values of the component (used for shaders). | +| `--kup-checkbox-text-on-primary-color` | Sets text on primary color of the component. | | `--kup-checkbox-text-on-primary-color-rgb` | Sets text on primary color RGB values of the component (used for shaders). | + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-data-table](../kup-data-table) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-data-table](../kup-data-table) ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-checkbox --> kup-card @@ -145,7 +153,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -213,6 +220,6 @@ graph TD; style kup-checkbox fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md index 54e91c63ae..2a48120cbc 100644 --- a/packages/ketchup/src/components/kup-chip/readme.md +++ b/packages/ketchup/src/components/kup-chip/readme.md @@ -2,27 +2,30 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | List of elements. | `KupChipNode[]` | `[]` | -| `displayId` | `display-id` | When enabled, the chip's text will display both the id and the value. | `boolean` | `false` | -| `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.MEDIUM` | -| `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` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | List of elements. | `KupChipNode[]` | `[]` | +| `displayId` | `display-id` | When enabled, the chip's text will display both the id and the value. | `boolean` | `false` | +| `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.MEDIUM` | +| `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` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-chip-blur` | Triggered when a chip loses focus. | `CustomEvent` | -| `kup-chip-change` | Triggered when the chip dataset changes. | `CustomEvent` | -| `kup-chip-click` | Triggered when a chip is clicked. | `CustomEvent` | -| `kup-chip-focus` | Triggered when a chip gets focused. | `CustomEvent` | -| `kup-chip-iconclick` | Triggered when the removal icon on input chips is clicked. | `CustomEvent` | +| Event | Description | Type | +| -------------------- | ---------------------------------------------------------- | ---------------------------------------- | +| `kup-chip-blur` | Triggered when a chip loses focus. | `CustomEvent` | +| `kup-chip-change` | Triggered when the chip dataset changes. | `CustomEvent` | +| `kup-chip-click` | Triggered when a chip is clicked. | `CustomEvent` | +| `kup-chip-focus` | Triggered when a chip gets focused. | `CustomEvent` | +| `kup-chip-iconclick` | Triggered when the removal icon on input chips is clicked. | `CustomEvent` | + ## Methods @@ -32,8 +35,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -50,60 +53,65 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-chip-background-color` | Sets background color of the component. | -| `--kup-chip-border-radius` | Sets border radius of the chips. | -| `--kup-chip-font-family` | Sets font family of the chips. | -| `--kup-chip-font-size` | Sets font size of the chips. | -| `--kup-chip-font-weight` | Sets font weight of the chips. | -| `--kup-chip-height` | Sets height of the chips. | -| `--kup-chip-indent-multiplier` | Sets the indentation multiplier for children chips. | -| `--kup-chip-margin` | Sets margin of the chips. | -| `--kup-chip-padding` | Sets padding of the chips. | -| `--kup-chip-primary-color` | Sets primary color of the component. | +| Name | Description | +| ------------------------------ | ------------------------------------------------------------------ | +| `--kup-chip-background-color` | Sets background color of the component. | +| `--kup-chip-border-radius` | Sets border radius of the chips. | +| `--kup-chip-font-family` | Sets font family of the chips. | +| `--kup-chip-font-size` | Sets font size of the chips. | +| `--kup-chip-font-weight` | Sets font weight of the chips. | +| `--kup-chip-height` | Sets height of the chips. | +| `--kup-chip-indent-multiplier` | Sets the indentation multiplier for children chips. | +| `--kup-chip-margin` | Sets margin of the chips. | +| `--kup-chip-padding` | Sets padding of the chips. | +| `--kup-chip-primary-color` | Sets primary color of the component. | | `--kup-chip-primary-color-rgb` | Sets primary color RGB values of the component (used for shaders). | -| `--kup-chip-text-color` | Sets text color of the component. | -| `--kup-chip-text-color-rgb` | Sets text color RGB values of the component (used for shaders). | +| `--kup-chip-text-color` | Sets text color of the component. | +| `--kup-chip-text-color-rgb` | Sets text color RGB values of the component (used for shaders). | + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-cell](../kup-cell) -- [kup-data-table](../kup-data-table) -- [kup-form](../kup-form) -- [kup-image-list](../kup-image-list) -- [kup-input-panel](../kup-input-panel) -- [kup-magic-box](../kup-magic-box) -- [kup-tree](../kup-tree) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-cell](../kup-cell) + - [kup-data-table](../kup-data-table) + - [kup-form](../kup-form) + - [kup-image-list](../kup-image-list) + - [kup-input-panel](../kup-input-panel) + - [kup-magic-box](../kup-magic-box) + - [kup-tree](../kup-tree) ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-chip --> kup-card @@ -146,7 +154,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -190,6 +197,6 @@ graph TD; style kup-chip fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-color-picker/readme.md b/packages/ketchup/src/components/kup-color-picker/readme.md index d9fcfbfd91..e975aa38b9 100644 --- a/packages/ketchup/src/components/kup-color-picker/readme.md +++ b/packages/ketchup/src/components/kup-color-picker/readme.md @@ -2,21 +2,24 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the text field. | `Object` | `null` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `initialValue` | `initial-value` | Sets the initial value of the component. Can be css color name, hex code or rgb code (sample: "red" or rgb(255, 0, 0) or "#FF0000" ). | `string` | `''` | -| `swatchOnly` | `swatch-only` | When true, the component's text field will be replaced by a swatch. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the text field. | `Object` | `null` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `initialValue` | `initial-value` | Sets the initial value of the component. Can be css color name, hex code or rgb code (sample: "red" or rgb(255, 0, 0) or "#FF0000" ). | `string` | `''` | +| `swatchOnly` | `swatch-only` | When true, the component's text field will be replaced by a swatch. | `boolean` | `false` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-colorpicker-change` | | `CustomEvent` | +| Event | Description | Type | +| ------------------------ | ----------- | ----------------------------------------- | +| `kup-colorpicker-change` | | `CustomEvent` | + ## Methods @@ -26,8 +29,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -54,6 +57,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setFocus() => Promise` Sets the focus to the component. @@ -62,20 +67,24 @@ Sets the focus to the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + ### `setValue(value: string) => Promise` Sets the component's value. @@ -90,27 +99,29 @@ Sets the component's value. Type: `Promise` + + + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-cell](../kup-cell) -- [kup-data-table](../kup-data-table) -- [kup-form](../kup-form) -- [kup-image-list](../kup-image-list) -- [kup-input-panel](../kup-input-panel) -- [kup-tree](../kup-tree) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-cell](../kup-cell) + - [kup-data-table](../kup-data-table) + - [kup-form](../kup-form) + - [kup-image-list](../kup-image-list) + - [kup-input-panel](../kup-input-panel) + - [kup-tree](../kup-tree) ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-color-picker --> kup-card @@ -153,7 +164,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -196,6 +206,6 @@ graph TD; style kup-color-picker fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md index 27063e7c1c..41623bf3ea 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -2,39 +2,42 @@ + ## 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: "code", "description", "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` | `''` | -| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | -| `isSelect` | `is-select` | Lets the combobox behave as a select element. | `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` | -| `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: "code", "description", "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` | -| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | -| `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: "code", "description", "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` | `''` | +| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | +| `isSelect` | `is-select` | Lets the combobox behave as a select element. | `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` | +| `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: "code", "description", "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` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-combobox-blur` | | `CustomEvent` | -| `kup-combobox-change` | | `CustomEvent` | -| `kup-combobox-click` | | `CustomEvent` | -| `kup-combobox-focus` | | `CustomEvent` | -| `kup-combobox-iconclick` | | `CustomEvent` | -| `kup-combobox-input` | | `CustomEvent` | -| `kup-combobox-itemclick` | | `CustomEvent` | +| Event | Description | Type | +| ------------------------ | ----------- | ----------------------------------------------- | +| `kup-combobox-blur` | | `CustomEvent` | +| `kup-combobox-change` | | `CustomEvent` | +| `kup-combobox-click` | | `CustomEvent` | +| `kup-combobox-focus` | | `CustomEvent` | +| `kup-combobox-iconclick` | | `CustomEvent` | +| `kup-combobox-input` | | `CustomEvent` | +| `kup-combobox-itemclick` | | `CustomEvent` | + ## Methods @@ -44,8 +47,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -72,6 +75,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setFocus() => Promise` Sets the focus to the component. @@ -80,20 +85,24 @@ Sets the focus to the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + ### `setValue(value: string) => Promise` Sets the component's value. @@ -108,29 +117,31 @@ Sets the component's value. Type: `Promise` + + + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-cell](../kup-cell) -- [kup-data-table](../kup-data-table) -- [kup-form](../kup-form) -- [kup-image-list](../kup-image-list) -- [kup-input-panel](../kup-input-panel) -- [kup-magic-box](../kup-magic-box) -- [kup-tree](../kup-tree) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-cell](../kup-cell) + - [kup-data-table](../kup-data-table) + - [kup-form](../kup-form) + - [kup-image-list](../kup-image-list) + - [kup-input-panel](../kup-input-panel) + - [kup-magic-box](../kup-magic-box) + - [kup-tree](../kup-tree) ### Depends on -- [kup-list](../kup-list) -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-list](../kup-list) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-combobox --> kup-list @@ -173,7 +184,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -217,6 +227,6 @@ graph TD; style kup-combobox fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-dashboard/readme.md b/packages/ketchup/src/components/kup-dashboard/readme.md index 0bf2d972d5..224f9d50fd 100644 --- a/packages/ketchup/src/components/kup-dashboard/readme.md +++ b/packages/ketchup/src/components/kup-dashboard/readme.md @@ -2,13 +2,15 @@ + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | The data of the component. | `KupDataDashboard` | `null` | -| `enableDesign` | `enable-design` | Enable drag & drop of the section. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ---------------------------------- | ------------------ | ------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | The data of the component. | `KupDataDashboard` | `null` | +| `enableDesign` | `enable-design` | Enable drag & drop of the section. | `boolean` | `false` | + ## Events @@ -16,6 +18,7 @@ | -------------------- | ----------- | --------------------------------------- | | `kup-dashboard-save` | | `CustomEvent` | + ## Methods ### `getProps(descriptions?: boolean) => Promise` @@ -24,8 +27,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -42,30 +45,34 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + + ## Dependencies ### Depends on -- [kup-badge](../kup-badge) -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) ### Graph - ```mermaid graph TD; kup-dashboard --> kup-badge @@ -135,7 +142,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -226,6 +232,6 @@ graph TD; style kup-dashboard fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-data-table/readme.md b/packages/ketchup/src/components/kup-data-table/readme.md index 2cc3dc7f78..0bb914d8c6 100644 --- a/packages/ketchup/src/components/kup-data-table/readme.md +++ b/packages/ketchup/src/components/kup-data-table/readme.md @@ -30,87 +30,90 @@ If the `sticky` element would be hidden by the scroll, after having specified a + ## Properties -| Property | Attribute | Description | Type | Default | -| --- | --- | --- | --- | --- | -| `autoFillMissingCells` | `auto-fill-missing-cells` | When true and when a row is missing some columns, the missing cells will be autogenerated. | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. For more information: https://smeup.github.io/ketchup/#/customization | `string` | `''` | -| `data` | -- | The data of the table. | `KupDataTableDataset` | `undefined` | -| `density` | `density` | The density of the rows, defaults at 'medium' and can be also set to 'large' or 'small'. | `FCellPadding.DENSE \| FCellPadding.MEDIUM \| FCellPadding.NONE \| FCellPadding.WIDE` | `FCellPadding.DENSE` | -| `dragEnabled` | `drag-enabled` | Enables drag. | `boolean` | `false` | -| `dropEnabled` | `drop-enabled` | Enables drop. | `boolean` | `false` | -| `editableData` | `editable-data` | When set to true, editable cells will be rendered using input components. | `boolean` | `false` | -| `emptyDataLabel` | `empty-data-label` | Defines the label to show when the table is empty. | `string` | `null` | -| `enableColumnsFormula` | `enable-columns-formula` | Enables the choice to set formulas on columns by dragging them into different columns. | `boolean` | `true` | -| `enableExtraColumns` | `enable-extra-columns` | Enables the extracolumns add buttons. | `boolean` | `true` | -| `enableMergeColumns` | `enable-merge-columns` | Enables the merging of columns by dragging them into different columns. | `boolean` | `true` | -| `enableSortableColumns` | `enable-sortable-columns` | Enables the sorting of columns by dragging them into different columns. | `boolean` | `true` | -| `expandGroups` | `expand-groups` | Expands groups when set to true. | `boolean` | `false` | -| `filters` | -- | List of filters set by the user. | `GenericFilter` | `{}` | -| `fixedColumns` | `fixed-columns` | Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedRows. | `number` | `0` | -| `fixedRows` | `fixed-rows` | Fixes the given number of rows so that they stay visible when vertically scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedColumns. | `number` | `0` | -| `forceOneLine` | `force-one-line` | Forces cells with long text and a fixed column size to have an ellipsis set on their text. The reflect attribute is mandatory to allow styling. | `boolean` | `false` | -| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` | -| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` | -| `groupLabelDisplay` | `group-label-display` | How the label of a group must be displayed. For available values [see here]{@link GroupLabelDisplayMode} | `GroupLabelDisplayMode.BOTH \| GroupLabelDisplayMode.LABEL \| GroupLabelDisplayMode.VALUE` | `GroupLabelDisplayMode.BOTH` | -| `groups` | -- | The list of groups. | `GroupObject[]` | `[]` | -| `headerIsPersistent` | `header-is-persistent` | When set to true the header will stick on top of the table when scrolling. | `boolean` | `true` | -| `insertMode` | `insert-mode` | Enables insert mode. | `"" \| "form" \| "row"` | `''` | -| `isFocusable` | `is-focusable` | When set to true, clicked-on rows will have a visual feedback. | `boolean` | `false` | -| `lazyLoadRows` | `lazy-load-rows` | When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled. | `boolean` | `false` | -| `legacyLook` | `legacy-look` | When enabled, the extra whitespaces will be displayed and the font will be set to monospace by default. | `boolean` | `false` | -| `lineBreakCharacter` | `line-break-character` | Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky. | `string` | `'\n'` | -| `loadMoreLimit` | `load-more-limit` | Sets a maximum limit of new records which can be required by the load more functionality. | `number` | `1000` | -| `loadMoreMode` | `load-more-mode` | Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. | `LoadMoreMode.CONSTANT \| LoadMoreMode.CONSTANT_INCREMENT \| LoadMoreMode.PROGRESSIVE_THRESHOLD` | `LoadMoreMode.PROGRESSIVE_THRESHOLD` | -| `loadMoreStep` | `load-more-step` | The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. | `number` | `60` | -| `pageSelected` | `page-selected` | Current selected page set on component load | `number` | `-1` | -| `paginatorPos` | `paginator-pos` | Sets the position of the paginator. Available positions: top, bottom or both. | `PaginatorPos.BOTH \| PaginatorPos.BOTTOM \| PaginatorPos.TOP` | `PaginatorPos.BOTTOM` | -| `removableColumns` | `removable-columns` | Sets the possibility to remove the selected column. | `boolean` | `false` | -| `resizableColumns` | `resizable-columns` | Gives the possibility to resize columns by dragging on their right edge. | `boolean` | `true` | -| `rowActions` | -- | Sets the actions of the rows. | `KupDataRowAction[]` | `undefined` | -| `rowsPerPage` | `rows-per-page` | Sets the number of rows per page to display. | `number` | `10` | -| `scrollOnHover` | `scroll-on-hover` | Activates the scroll on hover function. | `boolean` | `false` | -| `selection` | `selection` | Set the type of the rows selection. | `SelectionMode.MULTIPLE \| SelectionMode.MULTIPLE_CHECKBOX \| SelectionMode.NONE \| SelectionMode.SINGLE` | `SelectionMode.SINGLE` | -| `showCustomization` | `show-customization` | If set to true, displays the button to open the customization panel. | `boolean` | `true` | -| `showDeleteButton` | `show-delete-button` | Enables the delete row button. | `boolean` | `false` | -| `showFilters` | `show-filters` | When set to true enables the column filters. | `boolean` | `false` | -| `showFooter` | `show-footer` | When set to true shows the footer. | `boolean` | `false` | -| `showGrid` | `show-grid` | Can be used to customize the grid view of the table. | `ShowGrid.COL \| ShowGrid.COMPLETE \| ShowGrid.NONE \| ShowGrid.ROW` | `ShowGrid.ROW` | -| `showGroups` | `show-groups` | When set to true enables the column grouping. | `boolean` | `false` | -| `showHeader` | `show-header` | Enables rendering of the table header. | `boolean` | `true` | -| `showHistoryButton` | `show-history-button` | Enables the history button. | `boolean` | `false` | -| `showLoadMore` | `show-load-more` | If set to true, displays the button to load more records. | `boolean` | `false` | -| `sort` | -- | Defines the current sorting options. | `SortObject[]` | `[]` | -| `sortEnabled` | `sort-enabled` | When set to true enables the sorting of the columns by clicking on the column header. | `boolean` | `true` | -| `sortableColumnsMutateData` | `sortable-columns-mutate-data` | If set to true, when a column is dragged to be sorted, the component directly mutates the data.columns property and then fires the event | `boolean` | `true` | -| `stateId` | `state-id` | | `string` | `''` | -| `store` | -- | | `KupStore` | `undefined` | -| `tableHeight` | `table-height` | Sets the height of the table. | `string` | `undefined` | -| `tableWidth` | `table-width` | Sets the width of the table. | `string` | `undefined` | -| `totals` | -- | Defines the current totals options | `TotalsMap` | `undefined` | -| `transpose` | `transpose` | Transposes the data of the data table | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ------------------------------------ | +| `autoFillMissingCells` | `auto-fill-missing-cells` | When true and when a row is missing some columns, the missing cells will be autogenerated. | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. For more information: https://smeup.github.io/ketchup/#/customization | `string` | `''` | +| `data` | -- | The data of the table. | `KupDataTableDataset` | `undefined` | +| `density` | `density` | The density of the rows, defaults at 'medium' and can be also set to 'large' or 'small'. | `FCellPadding.DENSE \| FCellPadding.MEDIUM \| FCellPadding.NONE \| FCellPadding.WIDE` | `FCellPadding.DENSE` | +| `dragEnabled` | `drag-enabled` | Enables drag. | `boolean` | `false` | +| `dropEnabled` | `drop-enabled` | Enables drop. | `boolean` | `false` | +| `editableData` | `editable-data` | When set to true, editable cells will be rendered using input components. | `boolean` | `false` | +| `emptyDataLabel` | `empty-data-label` | Defines the label to show when the table is empty. | `string` | `null` | +| `enableColumnsFormula` | `enable-columns-formula` | Enables the choice to set formulas on columns by dragging them into different columns. | `boolean` | `true` | +| `enableExtraColumns` | `enable-extra-columns` | Enables the extracolumns add buttons. | `boolean` | `true` | +| `enableMergeColumns` | `enable-merge-columns` | Enables the merging of columns by dragging them into different columns. | `boolean` | `true` | +| `enableSortableColumns` | `enable-sortable-columns` | Enables the sorting of columns by dragging them into different columns. | `boolean` | `true` | +| `expandGroups` | `expand-groups` | Expands groups when set to true. | `boolean` | `false` | +| `filters` | -- | List of filters set by the user. | `GenericFilter` | `{}` | +| `fixedColumns` | `fixed-columns` | Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedRows. | `number` | `0` | +| `fixedRows` | `fixed-rows` | Fixes the given number of rows so that they stay visible when vertically scrolling the data-table. If grouping is active or the value of the prop is <= 0, this prop will have no effect. Can be combined with fixedColumns. | `number` | `0` | +| `forceOneLine` | `force-one-line` | Forces cells with long text and a fixed column size to have an ellipsis set on their text. The reflect attribute is mandatory to allow styling. | `boolean` | `false` | +| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` | +| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` | +| `groupLabelDisplay` | `group-label-display` | How the label of a group must be displayed. For available values [see here]{@link GroupLabelDisplayMode} | `GroupLabelDisplayMode.BOTH \| GroupLabelDisplayMode.LABEL \| GroupLabelDisplayMode.VALUE` | `GroupLabelDisplayMode.BOTH` | +| `groups` | -- | The list of groups. | `GroupObject[]` | `[]` | +| `headerIsPersistent` | `header-is-persistent` | When set to true the header will stick on top of the table when scrolling. | `boolean` | `true` | +| `insertMode` | `insert-mode` | Enables insert mode. | `"" \| "form" \| "row"` | `''` | +| `isFocusable` | `is-focusable` | When set to true, clicked-on rows will have a visual feedback. | `boolean` | `false` | +| `lazyLoadRows` | `lazy-load-rows` | When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled. | `boolean` | `false` | +| `legacyLook` | `legacy-look` | When enabled, the extra whitespaces will be displayed and the font will be set to monospace by default. | `boolean` | `false` | +| `lineBreakCharacter` | `line-break-character` | Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky. | `string` | `'\n'` | +| `loadMoreLimit` | `load-more-limit` | Sets a maximum limit of new records which can be required by the load more functionality. | `number` | `1000` | +| `loadMoreMode` | `load-more-mode` | Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. | `LoadMoreMode.CONSTANT \| LoadMoreMode.CONSTANT_INCREMENT \| LoadMoreMode.PROGRESSIVE_THRESHOLD` | `LoadMoreMode.PROGRESSIVE_THRESHOLD` | +| `loadMoreStep` | `load-more-step` | The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. | `number` | `60` | +| `pageSelected` | `page-selected` | Current selected page set on component load | `number` | `-1` | +| `paginatorPos` | `paginator-pos` | Sets the position of the paginator. Available positions: top, bottom or both. | `PaginatorPos.BOTH \| PaginatorPos.BOTTOM \| PaginatorPos.TOP` | `PaginatorPos.BOTTOM` | +| `removableColumns` | `removable-columns` | Sets the possibility to remove the selected column. | `boolean` | `false` | +| `resizableColumns` | `resizable-columns` | Gives the possibility to resize columns by dragging on their right edge. | `boolean` | `true` | +| `rowActions` | -- | Sets the actions of the rows. | `KupDataRowAction[]` | `undefined` | +| `rowsPerPage` | `rows-per-page` | Sets the number of rows per page to display. | `number` | `10` | +| `scrollOnHover` | `scroll-on-hover` | Activates the scroll on hover function. | `boolean` | `false` | +| `selection` | `selection` | Set the type of the rows selection. | `SelectionMode.MULTIPLE \| SelectionMode.MULTIPLE_CHECKBOX \| SelectionMode.NONE \| SelectionMode.SINGLE` | `SelectionMode.SINGLE` | +| `showCustomization` | `show-customization` | If set to true, displays the button to open the customization panel. | `boolean` | `true` | +| `showDeleteButton` | `show-delete-button` | Enables the delete row button. | `boolean` | `false` | +| `showFilters` | `show-filters` | When set to true enables the column filters. | `boolean` | `false` | +| `showFooter` | `show-footer` | When set to true shows the footer. | `boolean` | `false` | +| `showGrid` | `show-grid` | Can be used to customize the grid view of the table. | `ShowGrid.COL \| ShowGrid.COMPLETE \| ShowGrid.NONE \| ShowGrid.ROW` | `ShowGrid.ROW` | +| `showGroups` | `show-groups` | When set to true enables the column grouping. | `boolean` | `false` | +| `showHeader` | `show-header` | Enables rendering of the table header. | `boolean` | `true` | +| `showHistoryButton` | `show-history-button` | Enables the history button. | `boolean` | `false` | +| `showLoadMore` | `show-load-more` | If set to true, displays the button to load more records. | `boolean` | `false` | +| `sort` | -- | Defines the current sorting options. | `SortObject[]` | `[]` | +| `sortEnabled` | `sort-enabled` | When set to true enables the sorting of the columns by clicking on the column header. | `boolean` | `true` | +| `sortableColumnsMutateData` | `sortable-columns-mutate-data` | If set to true, when a column is dragged to be sorted, the component directly mutates the data.columns property and then fires the event | `boolean` | `true` | +| `stateId` | `state-id` | | `string` | `''` | +| `store` | -- | | `KupStore` | `undefined` | +| `tableHeight` | `table-height` | Sets the height of the table. | `string` | `undefined` | +| `tableWidth` | `table-width` | Sets the width of the table. | `string` | `undefined` | +| `totals` | -- | Defines the current totals options | `TotalsMap` | `undefined` | +| `transpose` | `transpose` | Transposes the data of the data table | `boolean` | `false` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-datatable-click` | Generic click event on data table. | `CustomEvent` | -| `kup-datatable-columnmenu` | Emitted by the column menu card when opened/closed or when a kup-card-event is fired. | `CustomEvent` | -| `kup-datatable-columnmove` | Event fired when columns are moved (sorted). | `CustomEvent` | -| `kup-datatable-columnremove` | Event fired when columns are removed (set to hidden). | `CustomEvent` | -| `kup-datatable-contextmenu` | Generic right click event on data table. | `CustomEvent` | -| `kup-datatable-dblclick` | Generic double click event on data table. | `CustomEvent` | -| `kup-datatable-delete-row` | Event fired when the delete row button is pressed. | `CustomEvent` | -| `kup-datatable-didload` | When component load is complete | `CustomEvent` | -| `kup-datatable-didunload` | When component unload is complete | `CustomEvent` | -| `kup-datatable-history` | Event fired when the history confirm button is pressed. | `CustomEvent` | -| `kup-datatable-insert-row` | Event fired when the insert row confirm button is pressed. | `CustomEvent` | -| `kup-datatable-loadmoreclick` | | `CustomEvent` | -| `kup-datatable-resetselectedrows` | When rows selections reset | `CustomEvent` | -| `kup-datatable-rowactionclick` | When a row action is clicked | `CustomEvent` | -| `kup-datatable-rowselected` | When a row is selected | `CustomEvent` | -| `kup-datatable-save` | Event fired when the save button is pressed. | `CustomEvent` | +| Event | Description | Type | +| --------------------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------- | +| `kup-datatable-click` | Generic click event on data table. | `CustomEvent` | +| `kup-datatable-columnmenu` | Emitted by the column menu card when opened/closed or when a kup-card-event is fired. | `CustomEvent` | +| `kup-datatable-columnmove` | Event fired when columns are moved (sorted). | `CustomEvent` | +| `kup-datatable-columnremove` | Event fired when columns are removed (set to hidden). | `CustomEvent` | +| `kup-datatable-contextmenu` | Generic right click event on data table. | `CustomEvent` | +| `kup-datatable-dblclick` | Generic double click event on data table. | `CustomEvent` | +| `kup-datatable-delete-row` | Event fired when the delete row button is pressed. | `CustomEvent` | +| `kup-datatable-didload` | When component load is complete | `CustomEvent` | +| `kup-datatable-didunload` | When component unload is complete | `CustomEvent` | +| `kup-datatable-history` | Event fired when the history confirm button is pressed. | `CustomEvent` | +| `kup-datatable-insert-row` | Event fired when the insert row confirm button is pressed. | `CustomEvent` | +| `kup-datatable-loadmoreclick` | | `CustomEvent` | +| `kup-datatable-resetselectedrows` | When rows selections reset | `CustomEvent` | +| `kup-datatable-rowactionclick` | When a row action is clicked | `CustomEvent` | +| `kup-datatable-rowselected` | When a row is selected | `CustomEvent` | +| `kup-datatable-save` | Event fired when the save button is pressed. | `CustomEvent` | + ## Methods @@ -122,6 +125,8 @@ Closes any opened column menu. Type: `Promise` + + ### `closeConfirmDeleteCard() => Promise` Closes the delete confirm card (called by backend, on success) @@ -130,6 +135,8 @@ Closes the delete confirm card (called by backend, on success) Type: `Promise` + + ### `closeInsertCard() => Promise` Closes the insert new record card (called by backend, on success) @@ -138,6 +145,8 @@ Closes the insert new record card (called by backend, on success) Type: `Promise` + + ### `collapseAll() => Promise` Collapses all groups. @@ -146,8 +155,12 @@ Collapses all groups. Type: `Promise` + + ### `defaultSortingFunction(columns: KupDataColumn[], receivingColumnIndex: number, sortedColumnIndex: number, useNewObject?: boolean) => Promise` + + #### Parameters | Name | Type | Description | @@ -161,6 +174,8 @@ Type: `Promise` Type: `Promise` + + ### `deleteRows(ids?: string[]) => Promise>` This method will delete rows by id from the data table dataset. @@ -185,6 +200,8 @@ Expands all groups. Type: `Promise` + + ### `getCards() => Promise` Returns cards and sub components @@ -193,20 +210,26 @@ Returns cards and sub components Type: `Promise` + + ### `getInternalState() => Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>` + + #### Returns Type: `Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>` + + ### `getProps(descriptions?: boolean) => Promise` Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -223,6 +246,8 @@ This method will get the selected rows of the component. Type: `Promise` + + ### `hideColumn(column: KupDataColumn) => Promise` Hides the given column. @@ -237,6 +262,8 @@ Hides the given column. Type: `Promise` + + ### `insertNewRow(row: KupDataTableRow) => Promise` Adds a new row to the list data @@ -251,6 +278,8 @@ Adds a new row to the list data Type: `Promise` + + ### `newColumn(type: KupDataNewColumnTypes, options: KupDataNewColumnOptions) => Promise` Invokes the KupData API for column creation, then refreshes the component in case no errors were catched. @@ -282,6 +311,8 @@ Opens the column menu of the given column. Type: `Promise` + + ### `refresh(recalcRows?: boolean) => Promise` This method is used to trigger a new render of the component. @@ -296,6 +327,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `resizeCallback() => Promise` This method is invoked by KupManager whenever the component changes size. @@ -304,6 +337,8 @@ This method is invoked by KupManager whenever the component changes size. Type: `Promise` + + ### `setCellValue(columnName: string, rowId: string, value: string) => Promise` Sets the cell value in a table cell. @@ -320,6 +355,8 @@ Sets the cell value in a table cell. Type: `Promise` + + ### `setFocus(column: string, rowId: string) => Promise` Sets the focus on an editable table cell. @@ -335,82 +372,89 @@ Sets the focus on an editable table cell. Type: `Promise` + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | | `props` | `GenericObject` | - Object containing props that will be set to the component. | #### Returns Type: `Promise` + + ### `setSelectedRows(rowsIdentifiers: string[] | number[], emitEvent?: boolean) => Promise` This method will set the selected rows of the component. #### Parameters -| Name | Type | Description | -| --- | --- | --- | -| `rowsIdentifiers` | `string[] \| number[]` | - Array of ids (dataset) or indexes (rendered rows). | -| `emitEvent` | `boolean` | - The event will always be emitted unless emitEvent is set to false. | +| Name | Type | Description | +| ----------------- | ---------------------- | -------------------------------------------------------------------- | +| `rowsIdentifiers` | `string[] \| number[]` | - Array of ids (dataset) or indexes (rendered rows). | +| `emitEvent` | `boolean` | - The event will always be emitted unless emitEvent is set to false. | #### Returns Type: `Promise` + + + ## CSS Custom Properties -| Name | Description | -| --- | --- | -| `--kup-datatable-background-color` | Sets background color of the component. | -| `--kup-datatable-border` | Sets border of the component. | -| `--kup-datatable-color` | Sets text color of the component. | -| `--kup-datatable-font-family` | Sets font family of the component. | -| `--kup-datatable-font-family-monospace` | Sets monospace font family of the component (for numbers). | -| `--kup-datatable-font-size` | Sets font size of the component. | -| `--kup-datatable-th-border` | Sets border of the th elements. | -| `--kup-datatable-th-resize-handle-width` | Sets the width of the handle used to resize columns. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------------------------- | +| `--kup-datatable-background-color` | Sets background color of the component. | +| `--kup-datatable-border` | Sets border of the component. | +| `--kup-datatable-color` | Sets text color of the component. | +| `--kup-datatable-font-family` | Sets font family of the component. | +| `--kup-datatable-font-family-monospace` | Sets monospace font family of the component (for numbers). | +| `--kup-datatable-font-size` | Sets font size of the component. | +| `--kup-datatable-th-border` | Sets border of the th elements. | +| `--kup-datatable-th-resize-handle-width` | Sets the width of the handle used to resize columns. | + ## Dependencies ### Used by -- [kup-card](../kup-card) -- [kup-magic-box](../kup-magic-box) + - [kup-card](../kup-card) + - [kup-magic-box](../kup-magic-box) ### Depends on -- [kup-card](../kup-card) -- [kup-list](../kup-list) -- [kup-switch](../kup-switch) -- [kup-button](../kup-button) -- [kup-spinner](../kup-spinner) -- [kup-form](../kup-form) -- [kup-image](../kup-image) -- [kup-dialog](../kup-dialog) -- [kup-checkbox](../kup-checkbox) -- [kup-combobox](../kup-combobox) -- [kup-badge](../kup-badge) -- [kup-autocomplete](../kup-autocomplete) -- [kup-chip](../kup-chip) -- [kup-text-field](../kup-text-field) -- [kup-color-picker](../kup-color-picker) -- [kup-date-picker](../kup-date-picker) -- [kup-rating](../kup-rating) -- [kup-time-picker](../kup-time-picker) -- [kup-button-list](../kup-button-list) -- [kup-chart](../kup-chart) -- [kup-gauge](../kup-gauge) -- [kup-progress-bar](../kup-progress-bar) +- [kup-card](../kup-card) +- [kup-list](../kup-list) +- [kup-switch](../kup-switch) +- [kup-button](../kup-button) +- [kup-spinner](../kup-spinner) +- [kup-form](../kup-form) +- [kup-image](../kup-image) +- [kup-dialog](../kup-dialog) +- [kup-checkbox](../kup-checkbox) +- [kup-combobox](../kup-combobox) +- [kup-badge](../kup-badge) +- [kup-autocomplete](../kup-autocomplete) +- [kup-chip](../kup-chip) +- [kup-text-field](../kup-text-field) +- [kup-color-picker](../kup-color-picker) +- [kup-date-picker](../kup-date-picker) +- [kup-rating](../kup-rating) +- [kup-time-picker](../kup-time-picker) +- [kup-button-list](../kup-button-list) +- [kup-chart](../kup-chart) +- [kup-gauge](../kup-gauge) +- [kup-progress-bar](../kup-progress-bar) ### Graph - ```mermaid graph TD; kup-data-table --> kup-card @@ -475,7 +519,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -545,6 +588,6 @@ graph TD; style kup-data-table fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-date-picker/readme.md b/packages/ketchup/src/components/kup-date-picker/readme.md index 9022660445..9ec0b85f75 100644 --- a/packages/ketchup/src/components/kup-date-picker/readme.md +++ b/packages/ketchup/src/components/kup-date-picker/readme.md @@ -2,29 +2,32 @@ + ## 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` | -| `firstDayIndex` | `first-day-index` | First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop | `number` | `1` | -| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | +| 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` | +| `firstDayIndex` | `first-day-index` | First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop | `number` | `1` | +| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | + ## Events -| Event | Description | Type | -| --- | --- | --- | -| `kup-datepicker-blur` | | `CustomEvent` | -| `kup-datepicker-change` | | `CustomEvent` | -| `kup-datepicker-cleariconclick` | | `CustomEvent` | -| `kup-datepicker-click` | | `CustomEvent` | -| `kup-datepicker-focus` | | `CustomEvent` | -| `kup-datepicker-iconclick` | | `CustomEvent` | -| `kup-datepicker-input` | | `CustomEvent` | -| `kup-datepicker-itemclick` | | `CustomEvent` | -| `kup-datepicker-textfieldsubmit` | | `CustomEvent` | +| Event | Description | Type | +| -------------------------------- | ----------- | ---------------------------------------- | +| `kup-datepicker-blur` | | `CustomEvent` | +| `kup-datepicker-change` | | `CustomEvent` | +| `kup-datepicker-cleariconclick` | | `CustomEvent` | +| `kup-datepicker-click` | | `CustomEvent` | +| `kup-datepicker-focus` | | `CustomEvent` | +| `kup-datepicker-iconclick` | | `CustomEvent` | +| `kup-datepicker-input` | | `CustomEvent` | +| `kup-datepicker-itemclick` | | `CustomEvent` | +| `kup-datepicker-textfieldsubmit` | | `CustomEvent` | + ## Methods @@ -34,8 +37,8 @@ Used to retrieve component's props values. #### Parameters -| Name | Type | Description | -| --- | --- | --- | +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | #### Returns @@ -62,6 +65,8 @@ This method is used to trigger a new render of the component. Type: `Promise` + + ### `setFocus() => Promise` Sets the focus to the component. @@ -70,6 +75,8 @@ Sets the focus to the component. Type: `Promise` + + ### `setValue(value: string) => Promise` Sets the component's value. @@ -84,27 +91,29 @@ Sets the component's value. Type: `Promise` + + + ## Dependencies ### Used by -- [kup-box](../kup-box) -- [kup-card](../kup-card) -- [kup-cell](../kup-cell) -- [kup-data-table](../kup-data-table) -- [kup-form](../kup-form) -- [kup-image-list](../kup-image-list) -- [kup-input-panel](../kup-input-panel) -- [kup-tree](../kup-tree) + - [kup-box](../kup-box) + - [kup-card](../kup-card) + - [kup-cell](../kup-cell) + - [kup-data-table](../kup-data-table) + - [kup-form](../kup-form) + - [kup-image-list](../kup-image-list) + - [kup-input-panel](../kup-input-panel) + - [kup-tree](../kup-tree) ### Depends on -- [kup-card](../kup-card) -- [kup-dialog](../kup-dialog) -- [kup-badge](../kup-badge) +- [kup-card](../kup-card) +- [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph - ```mermaid graph TD; kup-date-picker --> kup-card @@ -147,7 +156,6 @@ graph TD; kup-time-picker --> kup-list kup-time-picker --> kup-dialog kup-time-picker --> kup-badge - kup-image --> kup-spinner kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -190,6 +198,6 @@ graph TD; style kup-date-picker fill:#f9f,stroke:#333,stroke-width:4px ``` ---- +---------------------------------------------- -_Built with [StencilJS](https://stenciljs.com/)_ +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/ketchup/src/components/kup-drawer/readme.md b/packages/ketchup/src/components/kup-drawer/readme.md index fe761cdefb..99247cec8f 100644 --- a/packages/ketchup/src/components/kup-drawer/readme.md +++ b/packages/ketchup/src/components/kup-drawer/readme.md @@ -157,6 +157,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -175,18 +176,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -213,6 +219,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-dropdown-button/readme.md b/packages/ketchup/src/components/kup-dropdown-button/readme.md index dc91f978aa..74c27a0ed3 100644 --- a/packages/ketchup/src/components/kup-dropdown-button/readme.md +++ b/packages/ketchup/src/components/kup-dropdown-button/readme.md @@ -137,6 +137,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-dialog --> kup-badge kup-dialog --> kup-card kup-dialog --> kup-dialog @@ -148,18 +149,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -179,6 +185,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-echart/readme.md b/packages/ketchup/src/components/kup-echart/readme.md index 06169777c4..f7f553e55c 100644 --- a/packages/ketchup/src/components/kup-echart/readme.md +++ b/packages/ketchup/src/components/kup-echart/readme.md @@ -133,6 +133,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -151,18 +152,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -189,6 +195,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-editor/readme.md b/packages/ketchup/src/components/kup-editor/readme.md index d6c8563b1d..89a5b547cb 100644 --- a/packages/ketchup/src/components/kup-editor/readme.md +++ b/packages/ketchup/src/components/kup-editor/readme.md @@ -134,6 +134,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -152,18 +153,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -190,6 +196,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-family-tree/readme.md b/packages/ketchup/src/components/kup-family-tree/readme.md index 82697a4e17..15635cd8f2 100644 --- a/packages/ketchup/src/components/kup-family-tree/readme.md +++ b/packages/ketchup/src/components/kup-family-tree/readme.md @@ -187,6 +187,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -205,18 +206,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -243,6 +249,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-form/readme.md b/packages/ketchup/src/components/kup-form/readme.md index dba8d0cfc8..a1293ecf0b 100644 --- a/packages/ketchup/src/components/kup-form/readme.md +++ b/packages/ketchup/src/components/kup-form/readme.md @@ -7,14 +7,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Actual data of the form. | `KupFormData` | `null` | -| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean` | `false` | -| `labelPlacement` | `label-placement` | Sets the label placement for 'all' fields in form | `KupFormLabelPlacement.BOTTOM \| KupFormLabelPlacement.HIDDEN \| KupFormLabelPlacement.LEFT \| KupFormLabelPlacement.PLACEHOLDER \| KupFormLabelPlacement.RIGHT \| KupFormLabelPlacement.TOP \| KupFormLabelPlacement.WATERMARK` | `KupFormLabelPlacement.LEFT` | -| `layout` | -- | How the form will arrange its content. | `KupFormLayout` | `null` | -| `submitCb` | -- | Sets the callback function on submit form | `(e: SubmitEvent) => unknown` | `null` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Actual data of the form. | `KupFormData` | `null` | +| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean` | `false` | +| `labelPlacement` | `label-placement` | Sets the label placement for 'all' fields in form | `KupFormLabelPlacement.BOTTOM \| KupFormLabelPlacement.HIDDEN \| KupFormLabelPlacement.LEFT \| KupFormLabelPlacement.PLACEHOLDER \| KupFormLabelPlacement.RIGHT \| KupFormLabelPlacement.TOP \| KupFormLabelPlacement.WATERMARK` | `KupFormLabelPlacement.TOP` | +| `layout` | -- | How the form will arrange its content. | `KupFormLayout` | `null` | +| `submitCb` | -- | Sets the callback function on submit form | `(e: SubmitEvent) => unknown` | `null` | ## Events @@ -171,6 +171,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -189,18 +190,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -227,6 +233,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-form kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-gauge/readme.md b/packages/ketchup/src/components/kup-gauge/readme.md index c60b678f34..b934306e60 100644 --- a/packages/ketchup/src/components/kup-gauge/readme.md +++ b/packages/ketchup/src/components/kup-gauge/readme.md @@ -180,6 +180,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -198,18 +199,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -234,6 +240,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-gauge kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-grid/readme.md b/packages/ketchup/src/components/kup-grid/readme.md index ba78cd7522..5252a847c7 100644 --- a/packages/ketchup/src/components/kup-grid/readme.md +++ b/packages/ketchup/src/components/kup-grid/readme.md @@ -111,6 +111,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -129,18 +130,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -167,6 +173,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-iframe/readme.md b/packages/ketchup/src/components/kup-iframe/readme.md index 240498e09a..7eba724179 100644 --- a/packages/ketchup/src/components/kup-iframe/readme.md +++ b/packages/ketchup/src/components/kup-iframe/readme.md @@ -112,6 +112,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -130,18 +131,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -165,6 +171,7 @@ graph TD; kup-progress-bar --> kup-dialog kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-image-list/readme.md b/packages/ketchup/src/components/kup-image-list/readme.md index 246954950c..12d82b4334 100644 --- a/packages/ketchup/src/components/kup-image-list/readme.md +++ b/packages/ketchup/src/components/kup-image-list/readme.md @@ -12,7 +12,7 @@ | `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `null` | | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | Actual data of the component. | `KupImageListDataNode[]` | `[]` | -| `ripple` | `ripple` | When enabled displays Material's ripple effect on clicked items. | `boolean` | `true` | +| `ripple` | `ripple` | When enabled displays Material's ripple effect on clicked items. | `boolean` | `false` | | `rows` | `rows` | Number of rows to display in the grid layout. | `number` | `null` | | `selectedNode` | -- | An array of integers containing the path to a selected child.\ | `number[]` | `[]` | | `stateId` | `state-id` | | `string` | `''` | @@ -160,6 +160,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -178,18 +179,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -216,6 +222,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md index ee4f5c7f3d..974f17b9fe 100644 --- a/packages/ketchup/src/components/kup-input-panel/readme.md +++ b/packages/ketchup/src/components/kup-input-panel/readme.md @@ -152,6 +152,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -167,18 +168,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -205,6 +211,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-lazy/readme.md b/packages/ketchup/src/components/kup-lazy/readme.md index cb351b1768..39712d1c03 100644 --- a/packages/ketchup/src/components/kup-lazy/readme.md +++ b/packages/ketchup/src/components/kup-lazy/readme.md @@ -130,6 +130,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -148,18 +149,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -186,6 +192,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-magic-box/readme.md b/packages/ketchup/src/components/kup-magic-box/readme.md index 85c891d183..0d79829127 100644 --- a/packages/ketchup/src/components/kup-magic-box/readme.md +++ b/packages/ketchup/src/components/kup-magic-box/readme.md @@ -94,6 +94,7 @@ graph TD; kup-magic-box --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-card --> kup-autocomplete kup-card --> kup-chip kup-card --> kup-text-field @@ -122,6 +123,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -140,16 +142,20 @@ graph TD; kup-chip --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -176,6 +182,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-nav-bar/readme.md b/packages/ketchup/src/components/kup-nav-bar/readme.md index 296163f6f7..dcdca45e95 100644 --- a/packages/ketchup/src/components/kup-nav-bar/readme.md +++ b/packages/ketchup/src/components/kup-nav-bar/readme.md @@ -128,6 +128,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -146,18 +147,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -184,6 +190,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-numeric-picker/readme.md b/packages/ketchup/src/components/kup-numeric-picker/readme.md index 47398338f0..08cfc9fd29 100644 --- a/packages/ketchup/src/components/kup-numeric-picker/readme.md +++ b/packages/ketchup/src/components/kup-numeric-picker/readme.md @@ -106,12 +106,14 @@ Type: `Promise` - [kup-card](../kup-card) - [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph ```mermaid graph TD; kup-numeric-picker --> kup-card kup-numeric-picker --> kup-dialog + kup-numeric-picker --> kup-badge kup-card --> kup-autocomplete kup-card --> kup-chip kup-card --> kup-text-field @@ -140,6 +142,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -158,18 +161,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -196,6 +204,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-pdf/readme.md b/packages/ketchup/src/components/kup-pdf/readme.md index 5f3f592ca7..cdad246959 100644 --- a/packages/ketchup/src/components/kup-pdf/readme.md +++ b/packages/ketchup/src/components/kup-pdf/readme.md @@ -113,6 +113,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -131,18 +132,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -169,6 +175,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-photo-frame/readme.md b/packages/ketchup/src/components/kup-photo-frame/readme.md index 4b5d8fcd4c..e7e481033b 100644 --- a/packages/ketchup/src/components/kup-photo-frame/readme.md +++ b/packages/ketchup/src/components/kup-photo-frame/readme.md @@ -116,6 +116,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -134,18 +135,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -172,6 +178,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-planner/readme.md b/packages/ketchup/src/components/kup-planner/readme.md index e098494fb1..3e452cf72c 100644 --- a/packages/ketchup/src/components/kup-planner/readme.md +++ b/packages/ketchup/src/components/kup-planner/readme.md @@ -142,6 +142,7 @@ Type: `Promise` - [kup-planner-renderer](utils) - [kup-card](../kup-card) - [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph ```mermaid @@ -149,6 +150,7 @@ graph TD; kup-planner --> kup-planner-renderer kup-planner --> kup-card kup-planner --> kup-dialog + kup-planner --> kup-badge kup-planner-renderer --> kup-switcher kup-planner-renderer --> kup-gantt kup-gantt --> kup-standard-tooltip @@ -191,6 +193,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -209,18 +212,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -247,6 +255,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-probe/readme.md b/packages/ketchup/src/components/kup-probe/readme.md index 149d9a2a9a..a2a41370c0 100644 --- a/packages/ketchup/src/components/kup-probe/readme.md +++ b/packages/ketchup/src/components/kup-probe/readme.md @@ -76,6 +76,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -94,18 +95,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -132,6 +138,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-progress-bar/readme.md b/packages/ketchup/src/components/kup-progress-bar/readme.md index f303cd18b6..51d3224d07 100644 --- a/packages/ketchup/src/components/kup-progress-bar/readme.md +++ b/packages/ketchup/src/components/kup-progress-bar/readme.md @@ -104,6 +104,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -122,18 +123,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -158,6 +164,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-progress-bar kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-qlik/readme.md b/packages/ketchup/src/components/kup-qlik/readme.md index 8a7a87b3f7..14a2d97b8e 100644 --- a/packages/ketchup/src/components/kup-qlik/readme.md +++ b/packages/ketchup/src/components/kup-qlik/readme.md @@ -60,6 +60,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -78,18 +79,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -116,6 +122,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-radio/readme.md b/packages/ketchup/src/components/kup-radio/readme.md index 13f4d51ed8..11406cd39e 100644 --- a/packages/ketchup/src/components/kup-radio/readme.md +++ b/packages/ketchup/src/components/kup-radio/readme.md @@ -11,6 +11,8 @@ | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | List of elements. | `FRadioData[]` | `null` | | `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `horizontal` | `horizontal` | Defaults at false. When set to true, the component is horizontal. | `boolean` | `false` | +| `label` | `label` | When set, its content will be shown as a label. | `string` | `''` | | `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean` | `false` | @@ -125,6 +127,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-radio kup-dialog --> kup-badge kup-dialog --> kup-card @@ -137,18 +140,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -175,6 +183,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-rating/readme.md b/packages/ketchup/src/components/kup-rating/readme.md index a8ecfa1572..eddd4436f7 100644 --- a/packages/ketchup/src/components/kup-rating/readme.md +++ b/packages/ketchup/src/components/kup-rating/readme.md @@ -102,6 +102,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -120,16 +121,21 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -156,6 +162,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-rating kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-snackbar/readme.md b/packages/ketchup/src/components/kup-snackbar/readme.md index bebfac36bc..8fed1c23bd 100644 --- a/packages/ketchup/src/components/kup-snackbar/readme.md +++ b/packages/ketchup/src/components/kup-snackbar/readme.md @@ -15,6 +15,7 @@ | `actionButton` | -- | Set of FButton props to set the action button. | `FButtonProps` | `null` | | `closeButton` | `close-button` | When true, the hide button will be displayed. | `boolean` | `true` | | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `header` | `header` | Sets the textual content of the snackbar. | `string` | `''` | | `text` | `text` | Sets the textual content of the snackbar. | `string` | `''` | | `timeout` | `timeout` | Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds. | `number` | `null` | @@ -134,6 +135,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -152,18 +154,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -190,6 +197,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-switch/readme.md b/packages/ketchup/src/components/kup-switch/readme.md index bee9087c91..e3b77f1374 100644 --- a/packages/ketchup/src/components/kup-switch/readme.md +++ b/packages/ketchup/src/components/kup-switch/readme.md @@ -5,13 +5,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ------------------------------------------------------------------------------------ | --------- | ------- | -| `checked` | `checked` | Defaults at false. When set to true, the component will be set to 'checked'. | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `label` | `label` | Defaults at null. When specified, its content will be shown as a label. | `string` | `null` | -| `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ------------------------------------------------------------------------------------ | --------------------------------------------- | ---------------------- | +| `checked` | `checked` | Defaults at false. When set to true, the component will be set to 'checked'. | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `label` | `label` | Defaults at null. When specified, its content will be shown as a label. | `string` | `null` | +| `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the size of the switch | `FSwitchSizing.MEDIUM \| FSwitchSizing.SMALL` | `FSwitchSizing.MEDIUM` | ## Events @@ -102,6 +103,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -120,18 +122,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -158,6 +165,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-switch kup-form --> kup-card kup-form --> kup-dialog diff --git a/packages/ketchup/src/components/kup-tab-bar/readme.md b/packages/ketchup/src/components/kup-tab-bar/readme.md index 3508ce18e8..a06587e235 100644 --- a/packages/ketchup/src/components/kup-tab-bar/readme.md +++ b/packages/ketchup/src/components/kup-tab-bar/readme.md @@ -9,7 +9,8 @@ | ------------- | -------------- | --------------------------------------------------------------- | ----------------- | ------- | | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | List of elements. | `KupTabBarNode[]` | `null` | -| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `true` | +| `dense` | `dense` | Defaults at false. When set to true, the component is dense. | `boolean` | `false` | +| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `false` | ## Events @@ -111,6 +112,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -129,18 +131,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -167,6 +174,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-text-field/readme.md b/packages/ketchup/src/components/kup-text-field/readme.md index 91afb7ed2f..b686d71e59 100644 --- a/packages/ketchup/src/components/kup-text-field/readme.md +++ b/packages/ketchup/src/components/kup-text-field/readme.md @@ -5,52 +5,58 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------ | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | -| `allowNegative` | `allow-negative` | When true, could be input negative numbers (should be used when inputType is number). | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `decimals` | `decimals` | Number of decimals (should be used when inputType is number). | `number` | `null` | -| `disabled` | `disabled` | When set to true, the component is disabled. | `boolean` | `false` | -| `emitSubmitEventOnEnter` | `emit-submit-event-on-enter` | When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit. | `boolean` | `true` | -| `fullWidth` | `full-width` | When set to true, the component will be rendered at full width. | `boolean` | `false` | -| `group` | `group` | When true, the number will be formatted with group separator (should be used when inputType is number). | `boolean` | `false` | -| `helper` | `helper` | When set, its content will be shown as a help text below the field. | `string` | `null` | -| `helperEnabled` | `helper-enabled` | When true, the helper will be displayed. | `boolean` | `true` | -| `helperWhenFocused` | `helper-when-focused` | When set, the helper will be shown only when the field is focused. | `boolean` | `false` | -| `hiddenCounter` | `hidden-counter` | Hides the character counter. | `boolean` | `false` | -| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | -| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | -| `inputMode` | `input-mode` | The HTML inputmode of the input element. | `string` | `null` | -| `inputType` | `input-type` | The HTML type of the input element. It has no effect on text areas. | `string` | `'text'` | -| `integers` | `integers` | Number of integers (should be used when inputType is number). | `number` | `null` | -| `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` | -| `max` | `max` | The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week. | `number` | `null` | -| `maxLength` | `max-length` | When set, the helper will display a character counter. | `number` | `null` | -| `min` | `min` | The HTML min attribute specifies the minimum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week. | `number` | `null` | -| `name` | `name` | The HTML name attribute used for form autocomplete. | `string` | `null` | -| `outlined` | `outlined` | When set to true, the component will be rendered as an outlined field. | `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` | -| `size` | `size` | The HTML attribute size of the input element. | `number` | `null` | -| `step` | `step` | The HTML step of the input element. It has effect only with number input type. | `number` | `null` | -| `textArea` | `text-area` | When set to true, the component will be rendered as a textarea. | `boolean` | `false` | -| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | -| `trailingLabel` | `trailing-label` | When set to true, the label will be on the right of the component. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `allowNegative` | `allow-negative` | When true, could be input negative numbers (should be used when inputType is number). | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `decimals` | `decimals` | Number of decimals (should be used when inputType is number). | `number` | `null` | +| `disabled` | `disabled` | When set to true, the component is disabled. | `boolean` | `false` | +| `emitSubmitEventOnEnter` | `emit-submit-event-on-enter` | When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit. | `boolean` | `true` | +| `error` | `error` | Set error message | `string` | `''` | +| `fullWidth` | `full-width` | When set to true, the component will be rendered at full width. | `boolean` | `false` | +| `group` | `group` | When true, the number will be formatted with group separator (should be used when inputType is number). | `boolean` | `false` | +| `helper` | `helper` | When set, its content will be shown as a help text below the field. | `string` | `null` | +| `helperEnabled` | `helper-enabled` | When true, the helper will be displayed. | `boolean` | `true` | +| `helperWhenFocused` | `helper-when-focused` | When set, the helper will be shown only when the field is focused. | `boolean` | `false` | +| `hiddenCounter` | `hidden-counter` | Hides the character counter. | `boolean` | `false` | +| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | +| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | +| `inputMode` | `input-mode` | The HTML inputmode of the input element. | `string` | `null` | +| `inputType` | `input-type` | The HTML type of the input element. It has no effect on text areas. | `string` | `'text'` | +| `integers` | `integers` | Number of integers (should be used when inputType is number). | `number` | `null` | +| `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` | +| `max` | `max` | The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week. | `number` | `null` | +| `maxLength` | `max-length` | When set, the helper will display a character counter. | `number` | `null` | +| `min` | `min` | The HTML min attribute specifies the minimum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week. | `number` | `null` | +| `name` | `name` | The HTML name attribute used for form autocomplete. | `string` | `null` | +| `outlined` | `outlined` | When set to true, the component will be rendered as an outlined field. | `boolean` | `false` | +| `quantityButtons` | `quantity-buttons` | When set, appear 2 buttons to increment and decrement the value. | `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` | +| `size` | `size` | The HTML attribute size of the input element. | `number` | `null` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| `step` | `step` | The HTML step of the input element. It has effect only with number input type. | `number` | `null` | +| `textArea` | `text-area` | When set to true, the component will be rendered as a textarea. | `boolean` | `false` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | +| `trailingLabel` | `trailing-label` | When set to true, the label will be on the right of the component. | `boolean` | `false` | ## Events -| Event | Description | Type | -| ------------------------------ | ------------------------------------------------------ | --------------------------------------- | -| `kup-textfield-blur` | Triggered when the input element loses focus. | `CustomEvent` | -| `kup-textfield-change` | Triggered when the input element changes. | `CustomEvent` | -| `kup-textfield-cleariconclick` | Triggered when the text field's clear icon is clicked. | `CustomEvent` | -| `kup-textfield-click` | Triggered when the input element is clicked. | `CustomEvent` | -| `kup-textfield-focus` | Triggered when the input element gets focused. | `CustomEvent` | -| `kup-textfield-iconclick` | Triggered when the text field's icon is clicked. | `CustomEvent` | -| `kup-textfield-input` | Triggered when the input element receives an input. | `CustomEvent` | -| `kup-textfield-submit` | Triggered when the Enter key is pressed. | `CustomEvent` | +| Event | Description | Type | +| ------------------------------ | -------------------------------------------------------------------- | --------------------------------------- | +| `kup-textfield-blur` | Triggered when the input element loses focus. | `CustomEvent` | +| `kup-textfield-change` | Triggered when the input element changes. | `CustomEvent` | +| `kup-textfield-cleariconclick` | Triggered when the text field's clear icon is clicked. | `CustomEvent` | +| `kup-textfield-click` | Triggered when the input element is clicked. | `CustomEvent` | +| `kup-textfield-focus` | Triggered when the input element gets focused. | `CustomEvent` | +| `kup-textfield-iconclick` | Triggered when the text field's icon is clicked. | `CustomEvent` | +| `kup-textfield-input` | Triggered when the input element receives an input. | `CustomEvent` | +| `kup-textfield-minusclick` | Triggered when the - button of the number type component is pressed. | `CustomEvent` | +| `kup-textfield-plusclick` | Triggered when the + button of the number type component is pressed. | `CustomEvent` | +| `kup-textfield-submit` | Triggered when the Enter key is pressed. | `CustomEvent` | ## Methods @@ -171,16 +177,19 @@ Type: `Promise` - [kup-card](../kup-card) - [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph ```mermaid graph TD; kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-card --> kup-text-field kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -199,16 +208,20 @@ graph TD; kup-chip --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -235,6 +248,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-text-field kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-tree/readme.md b/packages/ketchup/src/components/kup-tree/readme.md index 8b6cc05264..53405e46c1 100644 --- a/packages/ketchup/src/components/kup-tree/readme.md +++ b/packages/ketchup/src/components/kup-tree/readme.md @@ -331,6 +331,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -349,18 +350,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -387,6 +393,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch