diff --git a/CHANGELOG.md b/CHANGELOG.md index c6e23ec..ead0848 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [0.32.21](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.32.20...v0.32.21) (2023-07-18) + + +### Features + +* **FDataGrid:** add support for infinite scrolling with `strategy="local"` ([61a5267](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/61a5267452ea6c881e675f8e79237a0a70a2a19b)) + ### [0.32.20](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.32.19...v0.32.20) (2023-06-26) diff --git a/package-lock.json b/package-lock.json index cc54380..7ccfbca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "fantom-vue3-components", - "version": "0.32.20", + "version": "0.32.21", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "fantom-vue3-components", - "version": "0.32.20", + "version": "0.32.21", "license": "MIT", "dependencies": { "@vueuse/core": "^8.5.0", diff --git a/package.json b/package.json index 1956696..4e8ad65 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fantom-vue3-components", - "version": "0.32.20", + "version": "0.32.21", "description": "Library of various Vue 3 components with focus on accessibility", "author": "Fantom Foundation", "license": "MIT", diff --git a/src/components/FDataGrid/FDataGrid.stories.js b/src/components/FDataGrid/FDataGrid.stories.js index cd33a64..6b6d9a0 100755 --- a/src/components/FDataGrid/FDataGrid.stories.js +++ b/src/components/FDataGrid/FDataGrid.stories.js @@ -1761,6 +1761,41 @@ export const InfiniteScroll = () => ({ }, }); +export const InfiniteScrollLocal = () => ({ + components: { FDataGrid, FFilters, FFormInput }, + template: ` +
+ +
+ `, + data() { + return { + items: clone(rows), + perPage: 25, + }; + }, + computed: { + columns() { + const cols = clone(columns); + + cols[1].sortable = true; + cols[2].sortable = true; + cols[3].sortable = true; + + return cols; + }, + }, +}); + export const DataKey = () => ({ components: { FDataGrid, FFilters, FFormInput }, template: ` diff --git a/src/components/FDataGrid/FDataGrid.vue b/src/components/FDataGrid/FDataGrid.vue index 97dc504..37a145d 100755 --- a/src/components/FDataGrid/FDataGrid.vue +++ b/src/components/FDataGrid/FDataGrid.vue @@ -703,8 +703,18 @@ export default { if (strategy === 'local' && this.usePagination) { this.$nextTick(() => { - const { itemsIndices } = this.getPaginationState(); - this.dItems = itemsIndices && items ? items.slice(itemsIndices.from, itemsIndices.to + 1) : []; + const { itemsIndices, currPage, prevPage } = this.getPaginationState(); + const sItems = itemsIndices && items ? items.slice(itemsIndices.from, itemsIndices.to + 1) : []; + + if (!this.infiniteScroll) { + this.dItems = sItems; + } else { + if (currPage < prevPage) { + this.dItems = sItems.concat(this.dItems); + } else { + this.dItems = this.dItems.concat(sItems); + } + } }); } else if (items) { const pState = this.getPaginationState();