From 94a8fa2da51f3bab568474cbe8d5c6f5c75fc39f Mon Sep 17 00:00:00 2001 From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com> Date: Fri, 1 Mar 2024 15:19:46 +0100 Subject: [PATCH] kup-box: managed "Load more data" function with pagination --- .../advanced/box/examples/BoxDemo.vue | 36 ++++++ packages/ketchup/src/components.d.ts | 54 +++++++- .../kup-box/kup-box-declarations.ts | 15 +++ .../src/components/kup-box/kup-box-state.ts | 2 + .../src/components/kup-box/kup-box.tsx | 117 +++++++++++++++++- .../ketchup/src/components/kup-box/readme.md | 63 +++++----- 6 files changed, 248 insertions(+), 39 deletions(-) diff --git a/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue b/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue index bfe0b36b62..89712803f7 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue @@ -108,6 +108,10 @@ export default { name: 'kup-box-dragstarted', type: 'CustomEvent', }, + { + name: 'kup-box-loadmoreclick', + type: 'click', + }, { name: 'kup-box-selected', type: 'CustomEvent', @@ -266,6 +270,30 @@ export default { default: 'false', try: 'switch', }, + { + prop: 'loadMoreLimit', + description: + 'Sets a maximum limit of new records which can be required by the load more functionality.', + type: 'number', + default: '1000', + try: 'field', + }, + { + prop: 'loadMoreMode', + description: + 'Establish the modality of how many new records will be downloaded.', + type: 'LoadMoreMode', + default: 'progressive_threshold', + try: 'field', + }, + { + prop: 'loadMoreStep', + description: + 'The number of records which will be requested to be downloaded when clicking on the load more button.', + type: 'number', + default: '60', + try: 'field', + }, { prop: 'multiSelection', description: 'Enable multi selection.', @@ -317,6 +345,14 @@ export default { default: '[]', try: 'json', }, + { + prop: 'showLoadMore', + description: + 'If set to true, displays the button to load more records.', + type: 'boolean', + default: 'false', + try: 'switch', + }, { prop: 'showSelection', description: 'If enabled, highlights the selected box/boxes.', diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 39deb1b65e..ce751e52e5 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -9,7 +9,7 @@ import { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon import { GenericObject, KupEventPayload } from "./types/GenericTypes"; import { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations"; import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations"; -import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations"; +import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations"; import { KupStore } from "./components/kup-state/kup-store"; import { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; import { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations"; @@ -27,7 +27,7 @@ import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-co import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; import { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; import { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations"; -import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; +import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; import { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations"; import { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations"; import { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations"; @@ -58,7 +58,7 @@ export { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon export { GenericObject, KupEventPayload } from "./types/GenericTypes"; export { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations"; export { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations"; -export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations"; +export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations"; export { KupStore } from "./components/kup-state/kup-store"; export { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; export { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations"; @@ -76,7 +76,7 @@ export { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-co export { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; export { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; export { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations"; -export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; +export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; export { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations"; export { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations"; export { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations"; @@ -347,6 +347,22 @@ export namespace Components { * When set to true, extra rows will be automatically loaded once the last row enters the viewport. */ "lazyLoadRows": boolean; + /** + * Sets a maximum limit of new records which can be required by the load more functionality. + */ + "loadMoreLimit": number; + /** + * Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. + * @see loadMoreStep * + * @see loadMoreLimit + */ + "loadMoreMode": LoadMoreMode; + /** + * 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. + * @see loadMoreMode * + * @see loadMoreLimit + */ + "loadMoreStep": number; "loadRowActions": (row: KupBoxRow, actions: KupDataRowAction[]) => Promise; /** * Enable multi selection @@ -392,6 +408,10 @@ export namespace Components { * @param props - Object containing props that will be set to the component. */ "setProps": (props: GenericObject) => Promise; + /** + * If set to true, displays the button to load more records. + */ + "showLoadMore": boolean; /** * If enabled, highlights the selected box/boxes * @default true @@ -1357,7 +1377,7 @@ export namespace Components { * @see loadMoreStep * * @see loadMoreLimit */ - "loadMoreMode": LoadMoreMode; + "loadMoreMode": LoadMoreMode1; /** * 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. * @see loadMoreMode * @@ -4091,6 +4111,7 @@ declare global { "kup-box-didload": KupEventPayload; "kup-box-didunload": KupEventPayload; "kup-box-contextmenu": KupBoxContextMenuEventPayload; + "kup-box-loadmoreclick": KupBoxLoadMoreClickEventPayload; } interface HTMLKupBoxElement extends Components.KupBox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLKupBoxElement, ev: KupBoxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -5236,6 +5257,22 @@ declare namespace LocalJSX { * When set to true, extra rows will be automatically loaded once the last row enters the viewport. */ "lazyLoadRows"?: boolean; + /** + * Sets a maximum limit of new records which can be required by the load more functionality. + */ + "loadMoreLimit"?: number; + /** + * Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. + * @see loadMoreStep * + * @see loadMoreLimit + */ + "loadMoreMode"?: LoadMoreMode; + /** + * 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. + * @see loadMoreMode * + * @see loadMoreLimit + */ + "loadMoreStep"?: number; /** * Enable multi selection * @default false @@ -5258,6 +5295,7 @@ declare namespace LocalJSX { * Triggered when stop propagation event */ "onKup-box-didunload"?: (event: KupBoxCustomEvent) => void; + "onKup-box-loadmoreclick"?: (event: KupBoxCustomEvent) => void; /** * When the row menu action icon is click */ @@ -5300,6 +5338,10 @@ declare namespace LocalJSX { * @default undefined */ "selectedRowsState"?: string; + /** + * If set to true, displays the button to load more records. + */ + "showLoadMore"?: boolean; /** * If enabled, highlights the selected box/boxes * @default true @@ -6074,7 +6116,7 @@ declare namespace LocalJSX { * @see loadMoreStep * * @see loadMoreLimit */ - "loadMoreMode"?: LoadMoreMode; + "loadMoreMode"?: LoadMoreMode1; /** * 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. * @see loadMoreMode * diff --git a/packages/ketchup/src/components/kup-box/kup-box-declarations.ts b/packages/ketchup/src/components/kup-box/kup-box-declarations.ts index 6b3ed0bbdb..915b75555b 100644 --- a/packages/ketchup/src/components/kup-box/kup-box-declarations.ts +++ b/packages/ketchup/src/components/kup-box/kup-box-declarations.ts @@ -26,6 +26,9 @@ export enum KupBoxProps { kanban = 'Displays the boxlist as a Kanban.', layout = 'How the field will be displayed. If not present, a default one will be created.', lazyLoadRows = 'When set to true, extra rows will be automatically loaded once the last row enters the viewport.', + loadMoreLimit = 'Sets a maximum limit of new records which can be required by the load more functionality.', + loadMoreMode = 'Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.', + loadMoreStep = '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.', multiSelection = 'Enable multi selection.', pageSelected = 'Current page number.', pagination = 'Enables pagination.', @@ -33,6 +36,7 @@ export enum KupBoxProps { scrollOnHover = 'Activates the scroll on hover function.', selectBox = 'Automatically selects the box at the specified index.', selectedRowsState = 'Multiple selection.', + showLoadMore = 'If set to true, displays the button to load more records.', showSelection = 'If enabled, highlights the selected box/boxes.', sortBy = 'If sorting is enabled, specifies which column to sort.', sortEnabled = 'Enable sorting.', @@ -40,6 +44,13 @@ export enum KupBoxProps { store = '', swipeDisabled = 'Disable swipe.', } + +//---- *NEXT functionality AKA load more ---- +export enum LoadMoreMode { + CONSTANT = 'constant', + CONSTANT_INCREMENT = 'constant_increment', + PROGRESSIVE_THRESHOLD = 'progressive_threshold', +} export interface KupBoxData { columns?: KupDataColumn[]; rows?: KupBoxRow[]; @@ -120,3 +131,7 @@ export interface KupBoxRowActionClickEventPayload extends KupEventPayload { export interface KupBoxContextMenuEventPayload extends KupEventPayload { details: KupBoxEventHandlerDetails; } + +export interface KupBoxLoadMoreClickEventPayload extends KupEventPayload { + loadItems: number; +} diff --git a/packages/ketchup/src/components/kup-box/kup-box-state.ts b/packages/ketchup/src/components/kup-box/kup-box-state.ts index 7361526d37..ccc50e8952 100644 --- a/packages/ketchup/src/components/kup-box/kup-box-state.ts +++ b/packages/ketchup/src/components/kup-box/kup-box-state.ts @@ -6,6 +6,8 @@ export class KupBoxState implements KupState { pageSelected: number = 1; rowsPerPage: number = 0; load: boolean = false; + loadMoreLimit: number = 1000; + showLoadMore: boolean = false; /*Add attribute*/ diff --git a/packages/ketchup/src/components/kup-box/kup-box.tsx b/packages/ketchup/src/components/kup-box/kup-box.tsx index 4d04f771b0..789fdb3757 100644 --- a/packages/ketchup/src/components/kup-box/kup-box.tsx +++ b/packages/ketchup/src/components/kup-box/kup-box.tsx @@ -32,6 +32,8 @@ import { KupBoxContextMenuEventPayload, KupBoxData, KupBoxEventHandlerDetails, + LoadMoreMode, + KupBoxLoadMoreClickEventPayload, } from './kup-box-declarations'; import { getColumnByName } from '../../utils/cell-utils'; import { @@ -139,6 +141,8 @@ export class KupBox { this.selectedRowsState = this.state.selectedRowsState; this.pageSelected = this.state.pageSelected; this.rowsPerPage = this.state.rowsPerPage; + this.loadMoreLimit = state.loadMoreLimit; + this.showLoadMore = state.showLoadMore; } } } @@ -203,6 +207,25 @@ export class KupBox { this.state.selectedRowsState = selectedRowsState; somethingChanged = true; } + if ( + !this.kupManager.objects.deepEqual( + this.state.loadMoreLimit, + this.loadMoreLimit + ) + ) { + this.state.loadMoreLimit = this.loadMoreLimit; + somethingChanged = true; + } + + if ( + !this.kupManager.objects.deepEqual( + this.state.showLoadMore, + this.showLoadMore + ) + ) { + this.state.showLoadMore = this.showLoadMore; + somethingChanged = true; + } if (!this.state.load) { this.state.load = true; @@ -297,6 +320,26 @@ export class KupBox { * When set to true, extra rows will be automatically loaded once the last row enters the viewport. */ @Prop() lazyLoadRows: boolean = false; + /** + * Sets a maximum limit of new records which can be required by the load more functionality. + */ + @Prop() loadMoreLimit: number = 1000; + /** + * Establish the modality of how many new records will be downloaded. + * + * This property is regulated also by loadMoreStep. + * @see loadMoreStep + * @see loadMoreLimit + */ + @Prop() loadMoreMode: LoadMoreMode = LoadMoreMode.PROGRESSIVE_THRESHOLD; + /** + * 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. + * @see loadMoreMode + * @see loadMoreLimit + */ + @Prop() loadMoreStep: number = 60; /** * Enable multi selection * @default false @@ -332,6 +375,10 @@ export class KupBox { * @default undefined */ @Prop({ mutable: true }) selectedRowsState: string; + /** + * If set to true, displays the button to load more records. + */ + @Prop() showLoadMore: boolean = false; /** * If enabled, highlights the selected box/boxes * @default true @@ -379,6 +426,9 @@ export class KupBox { #rowsRefs: HTMLElement[] = []; #navBarHeight: number = 0; + #loadMoreEventCounter: number = 0; + #loadMoreEventPreviousQuantity: number = 0; + /*-------------------------------------------------*/ /* E v e n t s */ /*-------------------------------------------------*/ @@ -467,6 +517,14 @@ export class KupBox { }) kupBoxContextMenu: EventEmitter; + @Event({ + eventName: 'kup-box-loadmoreclick', + composed: true, + cancelable: false, + bubbles: true, + }) + kupLoadMoreClick: EventEmitter; + /*-------------------------------------------------*/ /* W a t c h e r s */ /*-------------------------------------------------*/ @@ -517,6 +575,7 @@ export class KupBox { async getProps(descriptions?: boolean): Promise { return getProps(this, KupBoxProps, descriptions); } + @Method() async loadRowActions(row: KupBoxRow, actions: KupDataRowAction[]) { row.actions = actions; @@ -1769,10 +1828,10 @@ export class KupBox { ); const delta = this.data.rows.length - this.currentRowsPerPage; - if (delta < 10) { + if (delta < this.loadMoreStep) { this.currentRowsPerPage += delta; } else { - this.currentRowsPerPage += 10; + this.currentRowsPerPage += this.loadMoreStep; } entry.target.classList.remove('last-row'); this.#intObserver.unobserve(entry.target); @@ -1786,6 +1845,41 @@ export class KupBox { this.#intObserver = new IntersectionObserver(callback, options); } + // Handler for loadMore button is clicked. + #onLoadMoreClick() { + let loadItems: number = 0; + + switch (this.loadMoreMode) { + case LoadMoreMode.CONSTANT: + loadItems = this.loadMoreStep; + break; + case LoadMoreMode.CONSTANT_INCREMENT: + loadItems = + this.loadMoreStep * (this.#loadMoreEventCounter + 1); + break; + case LoadMoreMode.PROGRESSIVE_THRESHOLD: + loadItems = + Math.max( + this.#loadMoreEventPreviousQuantity, + this.loadMoreStep + ) * Math.min(this.#loadMoreEventCounter + 1, 2); + break; + } + + if (loadItems > this.loadMoreLimit) { + loadItems = this.loadMoreLimit; + } + + this.kupLoadMoreClick.emit({ + comp: this, + id: this.rootElement.id, + loadItems: loadItems, + }); + + this.#loadMoreEventPreviousQuantity = loadItems; + this.#loadMoreEventCounter++; + } + /*-------------------------------------------------*/ /* L i f e c y c l e H o o k s */ /*-------------------------------------------------*/ @@ -1924,18 +2018,33 @@ export class KupBox { } let paginator = null; - if (!this.lazyLoadRows && this.pagination) { + // paginaltorPos prop not managed yet + const top: boolean = true; + if (this.showLoadMore || (!this.lazyLoadRows && this.pagination)) { paginator = ( { + this.#onLoadMoreClick(); + } + : null + } + onNextPage={() => + this.handlePageChange(this.currentPage + 1) + } + onPrevPage={() => + this.handlePageChange(this.currentPage - 1) + } onPageChange={(e: CustomEvent) => this.handlePageChange(e.detail.value) } diff --git a/packages/ketchup/src/components/kup-box/readme.md b/packages/ketchup/src/components/kup-box/readme.md index 41a595f7ab..f4ea58768b 100644 --- a/packages/ketchup/src/components/kup-box/readme.md +++ b/packages/ketchup/src/components/kup-box/readme.md @@ -5,35 +5,39 @@ ## 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` | -| `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` | -| `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 @@ -45,6 +49,7 @@ | `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` |