diff --git a/src/components/CvPagination/CvPagination.stories.mdx b/src/components/CvPagination/CvPagination.stories.mdx
index 9fd844ec1..9f56041da 100644
--- a/src/components/CvPagination/CvPagination.stories.mdx
+++ b/src/components/CvPagination/CvPagination.stories.mdx
@@ -2,6 +2,10 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { CvPagination } from '.';
import { sbCompPrefix } from '../../global/storybook-utils';
import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+const myPage=ref(1);
+const myPageSizes=ref([5,7,10,11,13])
+const myNumItems=ref(13)
@@ -14,6 +18,9 @@ export const Template = args => ({
setup() {
return {
...args,
+ myPage,
+ myPageSizes,
+ myNumItems,
onChange: action('change'),
};
},
@@ -27,13 +34,22 @@ const defaultTemplate = `
:forward-text="forwardText"
:page-number-label="pageNumberLabel"
:page-sizes-label="pageSizesLabel"
- :number-of-items="numberOfItems"
+ :number-of-items="myNumItems"
:actual-items-on-page="actualItemsOnPage"
- :page="page"
- :page-sizes="pageSizes"
+ :page="myPage"
+ :page-sizes="myPageSizes"
:backwards-button-disabled="backwardsButtonDisabled"
:forwards-button-disabled="forwardsButtonDisabled">
+
+
Reactive properties
+ page:
+
+ page-sizes:
+
+ number-of-items:
+
+
`;
const slotsTemplate = `
{Template.bind({})}
diff --git a/src/components/CvPagination/CvPagination.vue b/src/components/CvPagination/CvPagination.vue
index 93d79ecea..d395121d6 100644
--- a/src/components/CvPagination/CvPagination.vue
+++ b/src/components/CvPagination/CvPagination.vue
@@ -156,15 +156,30 @@ const internalValue = computed(() => {
};
});
-onMounted(() => {
+function adjustValues() {
pageSizeValue.value = newPageSizeValue(props.pageSizes);
pageCount.value = newPageCount(props.numberOfItems, pageSizeValue.value);
pageValue.value = newPageValue(props.page, pageCount.value);
pages.value = newPagesArray(pageCount.value);
firstItem.value = newFirstItem(pageValue.value, pageSizeValue.value);
+}
+onMounted(() => {
+ adjustValues();
// always emit on mount
emit('change', internalValue.value);
});
+watch(
+ () => props.pageSizes,
+ () => adjustValues()
+);
+watch(
+ () => props.page,
+ () => adjustValues()
+);
+watch(
+ () => props.numberOfItems,
+ () => adjustValues()
+);
function onPageChange(newVal) {
pageValue.value = parseInt(newVal, 10);