bug(BPagination): Correct reactivity of model when pagination changes (…

…bootstrap-vue-next#2416)

packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue

@@ -100,7 +100,9 @@ const emit = defineEmits<{
   'page-click': [event: BvEvent, pageNumber: number]
 }>()
 
-const modelValue = defineModel<Exclude<BPaginationProps['modelValue'], undefined>>({default: 1})
+const modelValue = defineModel<Exclude<BPaginationProps['modelValue'], undefined>>({
+  default: 1,
+})
 
 const pageElements = useTemplateRef<HTMLLIElement[]>('_pageElements')
 
@@ -119,21 +121,21 @@ const justifyAlign = computed(() => (props.align === 'fill' ? 'start' : props.al
 
 const alignment = useAlignment(justifyAlign)
 
-const isActivePage = (pageNumber: number) => pageNumber === modelValueNumber.value
+const isActivePage = (pageNumber: number) => pageNumber === computedModelValue.value
 const getTabIndex = (num: number) => (props.disabled ? null : isActivePage(num) ? '0' : '-1')
 
 const checkDisabled = (num: number) =>
   props.disabled ||
   isActivePage(num) ||
-  modelValueNumber.value < 1 ||
+  computedModelValue.value < 1 ||
   // Check if the number is out of bounds
   num < 1 ||
   num > numberOfPages.value
 
 const firstDisabled = computed(() => checkDisabled(1))
-const prevDisabled = computed(() => checkDisabled(modelValueNumber.value - 1))
+const prevDisabled = computed(() => checkDisabled(computedModelValue.value - 1))
 const lastDisabled = computed(() => checkDisabled(numberOfPages.value))
-const nextDisabled = computed(() => checkDisabled(modelValueNumber.value + 1))
+const nextDisabled = computed(() => checkDisabled(computedModelValue.value + 1))
 
 const getBaseButtonProps = ({
   page,
@@ -242,7 +244,7 @@ const firstButtonProps = computed(() =>
 )
 const prevButtonProps = computed(() =>
   getButtonProps({
-    page: Math.max(modelValueNumber.value - 1, 1),
+    page: Math.max(computedModelValue.value - 1, 1),
     disabled: prevDisabled.value,
     classVal: props.prevClass,
     slotName: 'prev-text',
@@ -252,7 +254,7 @@ const prevButtonProps = computed(() =>
 )
 const nextButtonProps = computed(() =>
   getButtonProps({
-    page: Math.min(modelValueNumber.value + 1, numberOfPages.value),
+    page: Math.min(computedModelValue.value + 1, numberOfPages.value),
     disabled: nextDisabled.value,
     classVal: props.nextClass,
     slotName: 'next-text',
@@ -303,7 +305,7 @@ const pagination = computed(() => ({
 }))
 
 const pageClick = (event: Readonly<MouseEvent>, pageNumber: number) => {
-  if (pageNumber === modelValueNumber.value) return
+  if (pageNumber === computedModelValue.value) return
 
   const clickEvent = new BvEvent('page-click', {
     cancelable: true,
@@ -403,27 +405,15 @@ const handleKeyNav = (event: KeyboardEvent) => {
   }
 }
 
-watch(modelValueNumber, (newValue) => {
-  const sanitizeCurrentPage = (value: number, numberOfPages: number) => {
-    const page = value || 1
-    return page > numberOfPages ? numberOfPages : page < 1 ? 1 : page
-  }
-  const calculatedValue = sanitizeCurrentPage(newValue, numberOfPages.value)
-  if (calculatedValue === modelValue.value) return
-  modelValue.value = calculatedValue
+const computedModelValue = computed(() => {
+  const page = modelValueNumber.value || 1
+  return page > numberOfPages.value ? numberOfPages.value : page < 1 ? 1 : page
 })
 
 watch(pagination, (oldValue, newValue) => {
   if (newValue.pageSize !== oldValue.pageSize && newValue.totalRows === oldValue.totalRows) {
     // If the page size changes, reset to page 1
     modelValue.value = 1
-  } else if (
-    newValue.numberOfPages !== oldValue.numberOfPages &&
-    modelValueNumber.value > newValue.numberOfPages
-  ) {
-    // If `numberOfPages` changes and is less than
-    // the `currentPage` number, reset to page 1
-    modelValue.value = 1
   }
 })
 
@@ -436,7 +426,7 @@ const lastPage = computed(() => (props.lastNumber ? 1 : 0))
 const halfLimit = computed(() => Math.floor(limitNumber.value / 2))
 
 const pages = computed(() => {
-  const {value} = modelValueNumber
+  const {value} = computedModelValue
 
   const els = elements.value.map((p) => {
     switch (p) {
@@ -477,7 +467,7 @@ const elements = computed(() => {
   // iterates over the array.
 
   const pages = numberOfPages.value
-  const {value} = modelValueNumber
+  const {value} = computedModelValue
   const limit = limitNumber.value
   const noEllipsis = props.noEllipsis || limit <= ELLIPSIS_THRESHOLD