@tak-ps/vue-tabler 4.6.0 → 4.7.0

package/.github/workflows/test.yml

@@ -0,0 +1,39 @@
+name: Test
+
+permissions:
+  contents: read
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [22, 24]
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npm run check
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Test
+        run: npm test

package/CHANGELOG.md

@@ -10,6 +10,12 @@
 
 ## Version History
 
+### v4.7.0
+
+- :arrow_up: Remove Babel
+- :bug: Fix paging bugs in TablerPager
+- :white_check_mark: Add tests for TablerPager
+
 ### v4.6.0
 
 - :arrow_up: Update VueRouter Peer Dependency

package/components/Pager.vue

@@ -1,22 +1,14 @@
 <template>
     <div class='pagination m-0'>
         <div>
-            <template v-if='total <= limit'>
-                <button
-                    class='btn mx-1'
-                    @click='changePage(0)'
-                >
-                    <IconHome
-                        :size='32'
-                        stroke='1'
-                        class='icon'
-                    />Home
-                </button>
-            </template>
+            <template v-if='pageCount <= 1' />
             <template v-else>
                 <button
+                    type='button'
                     class='btn mx-1'
                     :class='{ "btn-primary": current === 0 }'
+                    :disabled='current === 0'
+                    aria-label='Go to first page'
                     @click='changePage(0)'
                 >
                     <IconHome
@@ -26,29 +18,35 @@
                     />Home
                 </button>
 
-                <template v-if='end > 5 && current > 3'>
+                <template v-if='showLeadingEllipsis'>
                     <span class=''> ... </span>
                 </template>
 
-                <template v-if='total / limit > 2'>
+                <template v-if='middle.length'>
                     <button
                         v-for='i in middle'
                         :key='i'
+                        type='button'
                         class='btn mx-1'
                         :class='{ "btn-primary": current === i }'
+                        :disabled='current === i'
+                        :aria-current='current === i ? "page" : undefined'
                         @click='changePage(i)'
                         v-text='i + 1'
                     />
                 </template>
 
-                <template v-if='end > 5 && current < end - spread'>
+                <template v-if='showTrailingEllipsis'>
                     <span class=''> ... </span>
                 </template>
                 <button
+                    type='button'
                     class='btn mx-1'
-                    :class='{ "btn-primary": current === end - 1 }'
-                    @click='changePage(end - 1)'
-                    v-text='end'
+                    :class='{ "btn-primary": current === pageCount - 1 }'
+                    :disabled='current === pageCount - 1'
+                    :aria-current='current === pageCount - 1 ? "page" : undefined'
+                    @click='changePage(pageCount - 1)'
+                    v-text='pageCount'
                 />
             </template>
         </div>
@@ -56,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed } from 'vue'
 import {
     IconHome
 } from '@tabler/icons-vue';
@@ -73,85 +71,54 @@ const emit = defineEmits<{
     (e: 'page', page: number): void
 }>()
 
-const spread = ref(0)
-const middle = ref<number[]>([])
-const current = ref(0)
-const end = ref(0)
-
-const create = () => {
-    const endValue = Math.ceil(props.total / props.limit);
-    let spreadValue; //Number of pages in between home button and last page
-    if (endValue <= 2) {
-        spreadValue = 0;
-    } else if (endValue >= 7) {
-        spreadValue = 5;
-    } else {
-        spreadValue = endValue - 2;
-    }
+const MAX_MIDDLE_PAGES = 5;
 
-    // Array containing middle page number
-    let middleAr = new Array(spreadValue).fill(1, 0, spreadValue).map((ele, i) => {
-        return 1 + i;
-    });
-
-    return {
-        spread: spreadValue,
-        middle: middleAr,
-        current: props.page || 0,
-        end: endValue
-    };
-}
+const pageCount = computed(() => {
+    if (props.limit <= 0) return 0;
+    return Math.ceil(props.total / props.limit);
+});
 
-const changePage = (page: number) => {
-    current.value = page;
-    emit('page', current.value);
-}
+const current = computed(() => {
+    if (pageCount.value <= 1) return 0;
+
+    const maxPage = pageCount.value - 1;
+    const page = Number.isFinite(props.page) ? props.page : 0;
+
+    return Math.min(Math.max(page, 0), maxPage);
+});
+
+const middleWindow = computed(() => {
+    if (pageCount.value <= 2) return 0;
+    return Math.min(MAX_MIDDLE_PAGES, pageCount.value - 2);
+});
 
-// Initialize values
-const initialValues = create();
-spread.value = initialValues.spread;
-middle.value = initialValues.middle;
-current.value = initialValues.current;
-end.value = initialValues.end;
-
-// Watch for page changes
-watch(() => props.page, () => {
-    current.value = props.page;
-})
-
-// Watch for total changes
-watch(() => props.total, () => {
-    const set = create();
-    spread.value = set.spread;
-    middle.value = set.middle;
-    current.value = set.current;
-    end.value = set.end;
-})
-
-// Watch for limit changes
-watch(() => props.limit, () => {
-    const set = create();
-    spread.value = set.spread;
-    middle.value = set.middle;
-    current.value = set.current;
-    end.value = set.end;
-})
-
-// Watch for current changes
-watch(current, () => {
-    if (end.value < 5) return; // All buttons are shown already
-
-    let start: number;
-    if (current.value <= 3) {
-        start = 0;
-    } else if (current.value >= end.value - 4) {
-        start = end.value - spread.value - 2;
-    } else {
-        start = current.value - 3;
+const middle = computed(() => {
+    if (!middleWindow.value) return [];
+
+    if (pageCount.value <= MAX_MIDDLE_PAGES + 2) {
+        return Array.from({ length: middleWindow.value }, (_, index) => index + 1);
     }
 
-    middle.value = middle.value.map((ele, i) => {
-        return start + i + 1;
-    });
-})
+    let start = Math.max(1, current.value - 3);
+    let end = Math.min(pageCount.value - 2, current.value + 1);
+
+    if (start === 1) {
+        end = Math.min(pageCount.value - 2, start + middleWindow.value - 1);
+    }
+
+    return Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
+});
+
+const showLeadingEllipsis = computed(() => {
+    return middle.value.length > 0 && middle.value[0] > 1;
+});
+
+const showTrailingEllipsis = computed(() => {
+    return middle.value.length > 0 && middle.value[middle.value.length - 1] < pageCount.value - 2;
+});
+
+const changePage = (page: number) => {
+    if (page === current.value) return;
+    emit('page', page);
+}
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.6.0",
+    "version": "4.7.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",
@@ -10,7 +10,8 @@
     },
     "description": "Tabler UI components for Vue3",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "vitest run",
+        "test:watch": "vitest",
         "check": "vue-tsc --noEmit",
         "lint": "eslint lib.ts components/"
     },
@@ -34,12 +35,17 @@
         "vue-router": "^5.0.0"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.22.15",
+        "@eslint/js": "^10.0.0",
         "@typescript-eslint/parser": "^8.8.1",
-        "@vue/cli-plugin-babel": "^5.0.8",
-        "eslint": "^9.12.0",
+        "@vitejs/plugin-vue": "^6.0.5",
+        "@vue/test-utils": "^2.4.6",
+        "eslint": "^10.0.0",
         "eslint-plugin-vue": "^10.0.0",
         "globals": "^17.0.0",
+        "jsdom": "^29.0.0",
+        "typescript": "^5.9.3",
+        "vite": "^8.0.0",
+        "vitest": "^4.1.0",
         "vue-tsc": "^3.2.1"
     }
 }

package/test/Pager.spec.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Pager from '../components/Pager.vue'
+
+describe('TablerPager', () => {
+    it('renders no pager controls when there is only one page', () => {
+        const wrapper = mount(Pager, {
+            props: {
+                total: 10,
+                page: 0,
+                limit: 10,
+            },
+        })
+
+        expect(wrapper.findAll('button')).toHaveLength(0)
+        expect(wrapper.findAll('span')).toHaveLength(0)
+    })
+
+    it('shows all pages without ellipses when the page count is small', () => {
+        const wrapper = mount(Pager, {
+            props: {
+                total: 60,
+                page: 2,
+                limit: 10,
+            },
+        })
+
+        const buttons = wrapper.findAll('button').map((button) => button.text().replace(/\s+/g, ' ').trim())
+
+        expect(buttons).toEqual(['Home', '2', '3', '4', '5', '6'])
+        expect(wrapper.findAll('span')).toHaveLength(0)
+        expect(wrapper.find('button.btn-primary').text().trim()).toBe('3')
+    })
+
+    it('shows the trailing page window when the last page is selected', () => {
+        const wrapper = mount(Pager, {
+            props: {
+                total: 3320,
+                page: 331,
+                limit: 10,
+            },
+        })
+
+        const buttons = wrapper.findAll('button').map((button) => button.text().replace(/\s+/g, ' ').trim())
+        const ellipses = wrapper.findAll('span').map((span) => span.text().trim())
+
+        expect(buttons).toEqual(['Home', '329', '330', '331', '332'])
+        expect(ellipses).toEqual(['...'])
+        expect(wrapper.findAll('button.btn-primary')).toHaveLength(1)
+        expect(wrapper.find('button.btn-primary').text().trim()).toBe('332')
+    })
+
+    it('shows a centered window with ellipses on both sides for mid-range pages', () => {
+        const wrapper = mount(Pager, {
+            props: {
+                total: 3320,
+                page: 166,
+                limit: 10,
+            },
+        })
+
+        const buttons = wrapper.findAll('button').map((button) => button.text().replace(/\s+/g, ' ').trim())
+        const ellipses = wrapper.findAll('span').map((span) => span.text().trim())
+
+        expect(buttons).toEqual(['Home', '164', '165', '166', '167', '168', '332'])
+        expect(ellipses).toEqual(['...', '...'])
+        expect(wrapper.findAll('button.btn-primary')).toHaveLength(1)
+        expect(wrapper.find('button.btn-primary').text().trim()).toBe('167')
+    })
+
+    it('clamps page values below zero to the first page', () => {
+        const wrapper = mount(Pager, {
+            props: {
+                total: 3320,
+                page: -5,
+                limit: 10,
+            },
+        })
+
+        expect(wrapper.find('button.btn-primary').text().trim()).toBe('Home')
+    })
+
+    it('clamps page values above the max to the last page', () => {
+        const wrapper = mount(Pager, {
+            props: {
+                total: 3320,
+                page: 999,
+                limit: 10,
+            },
+        })
+
+        expect(wrapper.find('button.btn-primary').text().trim()).toBe('332')
+        expect(wrapper.findAll('span').map((span) => span.text().trim())).toEqual(['...'])
+    })
+
+    it('emits the selected page when a non-active page is clicked', async () => {
+        const wrapper = mount(Pager, {
+            props: {
+                total: 3320,
+                page: 331,
+                limit: 10,
+            },
+        })
+
+        await wrapper.get('button:not(.btn-primary)').trigger('click')
+
+        expect(wrapper.emitted('page')).toEqual([[0]])
+    })
+})

package/tsconfig.json

@@ -22,7 +22,8 @@
     "include": [
         "lib.ts",
         "components/**/*.vue",
-        "components/**/*.ts"
+        "components/**/*.ts",
+        "test/**/*.ts"
     ],
     "exclude": [
         "node_modules"

package/vitest.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+    plugins: [vue()],
+    test: {
+        environment: 'jsdom',
+        include: ['test/**/*.spec.ts'],
+    },
+})

package/.eslintrc

@@ -1,17 +0,0 @@
-{
-    "root": true,
-    "globals": {}, 
-    "env": {
-        "node": true
-    },
-    "extends": [
-        "plugin:vue/essential",
-        "eslint:recommended"
-    ],
-    "parserOptions": {
-        "parser": "@babel/eslint-parser"
-    },
-    "rules": {
-        "vue/multi-word-component-names": 1
-    }
-}

package/babel.config.json

@@ -1,5 +0,0 @@
-{
-    "presets": [
-        "@vue/cli-plugin-babel/preset"
-    ]
-}