fix: cv-pagination make page, pageSizes, & numberOfItems properties r…

…eactive

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)
 
 <Meta title={`${sbCompPrefix}/CvPagination`} component={CvPagination} />
 
@@ -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">
   </cv-pagination>
+  <div style="margin-top:2rem; background-color: #888888;  padding:1rem">
+    <h3>Reactive properties</h3>
+    page: <button @click="myPage--">← prev page</button>
+    <button @click="myPage++">next page →</button><br/>
+    page-sizes: <button @click="myPageSizes=[5,10]">change page sizes to [5,10]</button>
+    <button @click="myPageSizes=[10,20,30,40,50]">change page sizes to [10,20,30,40,50]</button><br/>
+    number-of-items: <button @click="myNumItems=4">Set total items = 4</button>
+    <button @click="myNumItems=103">Set total items = 103</button>
+  </div>
 `;
 const slotsTemplate = `
 <cv-pagination
@@ -87,23 +103,14 @@ Migration notes:
       forwardText: undefined,
       pageNumberLabel: undefined,
       pageSizesLabel: undefined,
-      numberOfItems: 103,
-      page: 2,
-      pageSizes: [
-        10,
-        {
-          value: 20,
-          selected: true,
-        },
-        30,
-        40,
-        50,
-      ],
       backwardsButtonDisabled: false,
       forwardsButtonDisabled: false,
       actualItemsOnPage: Infinity,
     }}
     argTypes={{
+      page: { control: false },
+      pageSizes: { control: false },
+      numberOfItems: { control: false }
     }}
   >
     {Template.bind({})}

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);