buefy 1.0.0 → 1.0.2

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,434 @@
+<template>
+    <nav class="pagination" :class="rootClasses">
+        <slot
+            v-if="$slots.previous"
+            name="previous"
+            :page="
+                getPage(+modelValue - 1, {
+                    disabled: !hasPrev,
+                    class: 'pagination-previous',
+                    'aria-label': ariaPreviousLabel,
+                })
+            "
+        >
+            <b-icon
+                :icon="iconPrev"
+                :pack="iconPack"
+                both
+                aria-hidden="true"
+            />
+        </slot>
+        <BPaginationButton
+            v-else
+            class="pagination-previous"
+            :disabled="!hasPrev"
+            :page="getPage(+modelValue - 1)"
+            :aria-label="ariaPreviousLabel"
+        >
+            <b-icon
+                :icon="iconPrev"
+                :pack="iconPack"
+                both
+                aria-hidden="true"
+            />
+        </BPaginationButton>
+        <slot
+            v-if="$slots.next"
+            name="next"
+            :page="
+                getPage(+modelValue + 1, {
+                    disabled: !hasNext,
+                    class: 'pagination-next',
+                    'aria-label': ariaNextLabel,
+                })
+            "
+        >
+            <b-icon
+                :icon="iconNext"
+                :pack="iconPack"
+                both
+                aria-hidden="true"
+            />
+        </slot>
+        <BPaginationButton
+            v-else
+            class="pagination-next"
+            :disabled="!hasNext"
+            :page="getPage(+modelValue + 1)"
+            :aria-label="ariaNextLabel"
+        >
+            <b-icon
+                :icon="iconNext"
+                :pack="iconPack"
+                both
+                aria-hidden="true"
+            />
+        </BPaginationButton>
+
+        <div class="control pagination-input">
+            <input
+                v-if="pageInput"
+                class="input"
+                :value="inputValue"
+                @input="handleAllowableInputPageRange"
+                @keypress="handleOnKeyPress"
+                :size="pageCount.toString().length"
+                :maxlength="pageCount.toString().length"
+            >
+        </div>
+
+        <small class="info" v-if="simple">
+            <template v-if="perPage == 1"> {{ firstItem }} / {{ total }} </template>
+            <template v-else>
+                {{ firstItem }}-{{ Math.min(+modelValue * +perPage, +total!) }} / {{ total }}
+            </template>
+        </small>
+        <ul class="pagination-list" v-else>
+            <!--First-->
+            <li v-if="hasFirst">
+                <slot v-if="$slots.default" :page="getPage(1)" />
+                <BPaginationButton v-else :page="getPage(1)" />
+            </li>
+            <li v-if="hasFirstEllipsis">
+                <span class="pagination-ellipsis">&hellip;</span>
+            </li>
+
+            <!--Pages-->
+            <li v-for="page in pagesInRange" :key="page.number">
+                <slot v-if="$slots.default" :page="page" />
+                <BPaginationButton v-else :page="page" />
+            </li>
+
+            <!--Last-->
+            <li v-if="hasLastEllipsis">
+                <span class="pagination-ellipsis">&hellip;</span>
+            </li>
+            <li v-if="hasLast">
+                <slot v-if="$slots.default" :page="getPage(pageCount)" />
+                <BPaginationButton v-else :page="getPage(pageCount)" />
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BPaginationButton from './PaginationButton.vue'
+import type { PaginationPage } from './types'
+import BIcon from '../icon/Icon.vue'
+import config from '../../utils/config'
+import debounce from '../../utils/debounce'
+
+// Options for PaginationPage.
+interface PaginationPageOptions {
+    disabled?: boolean
+    class?: string
+    'aria-label'?: string
+}
+
+export default defineComponent({
+    name: 'BPagination',
+    components: {
+        BIcon,
+        BPaginationButton
+    },
+    props: {
+        total: [Number, String],
+        perPage: {
+            type: [Number, String],
+            default: 20
+        },
+        modelValue: {
+            type: [Number, String],
+            default: 1
+        },
+        rangeBefore: {
+            type: [Number, String],
+            default: 1
+        },
+        rangeAfter: {
+            type: [Number, String],
+            default: 1
+        },
+        size: String,
+        simple: Boolean,
+        rounded: Boolean,
+        order: String,
+        iconPack: String,
+        iconPrev: {
+            type: String,
+            default: () => {
+                return config.defaultIconPrev
+            }
+        },
+        iconNext: {
+            type: String,
+            default: () => {
+                return config.defaultIconNext
+            }
+        },
+        ariaNextLabel: String,
+        ariaPreviousLabel: String,
+        ariaPageLabel: String,
+        ariaCurrentLabel: String,
+        pageInput: {
+            type: Boolean,
+            default: false
+        },
+        pageInputPosition: String,
+        debouncePageInput: [Number, String]
+    },
+    data() {
+        return {
+            inputValue: this.modelValue,
+            debounceHandlePageInput: undefined as ((event: Event) => void) | undefined
+        }
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        change: (_num: number) => true,
+        'update:modelValue': (_num: number) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    computed: {
+        rootClasses() {
+            return [
+                this.order,
+                this.size,
+                this.pageInputPosition,
+                {
+                    'is-simple': this.simple,
+                    'is-rounded': this.rounded,
+                    'has-input': this.pageInput
+                }
+            ]
+        },
+
+        beforeCurrent() {
+            return parseInt(this.rangeBefore + '')
+        },
+
+        afterCurrent() {
+            return parseInt(this.rangeAfter + '')
+        },
+
+        /*
+        * Total page size (count).
+        */
+        pageCount() {
+            return Math.ceil(+this.total! / +this.perPage)
+        },
+
+        /*
+        * First item of the page (count).
+        */
+        firstItem() {
+            const firstItem = +this.modelValue * +this.perPage - +this.perPage + 1
+            return firstItem >= 0 ? firstItem : 0
+        },
+
+        /*
+        * Check if previous button is available.
+        */
+        hasPrev() {
+            return +this.modelValue > 1
+        },
+
+        /*
+         * Check if first page button should be visible.
+        */
+        hasFirst() {
+            return +this.modelValue >= 2 + this.beforeCurrent
+        },
+
+        /*
+        * Check if first ellipsis should be visible.
+        */
+        hasFirstEllipsis() {
+            return +this.modelValue >= this.beforeCurrent + 4
+        },
+
+        /*
+        * Check if last page button should be visible.
+        */
+        hasLast() {
+            return +this.modelValue <= this.pageCount - (1 + this.afterCurrent)
+        },
+
+        /*
+        * Check if last ellipsis should be visible.
+        */
+        hasLastEllipsis() {
+            return +this.modelValue < this.pageCount - (2 + this.afterCurrent)
+        },
+
+        /*
+        * Check if next button is available.
+        */
+        hasNext() {
+            return +this.modelValue < this.pageCount
+        },
+
+        /*
+        * Get near pages, 1 before and 1 after the current.
+        * Also add the click event to the array.
+        */
+        pagesInRange() {
+            if (this.simple) return
+
+            let left = Math.max(1, +this.modelValue - this.beforeCurrent)
+            if (left - 1 === 2) {
+                left-- // Do not show the ellipsis if there is only one to hide
+            }
+            let right = Math.min(+this.modelValue + this.afterCurrent, this.pageCount)
+            if (this.pageCount - right === 2) {
+                right++ // Do not show the ellipsis if there is only one to hide
+            }
+
+            const pages = []
+            for (let i = left; i <= right; i++) {
+                pages.push(this.getPage(i))
+            }
+            return pages
+        }
+    },
+    watch: {
+        /*
+        * If current page is trying to be greater than page count, set to last.
+        */
+        pageCount(value) {
+            if (this.modelValue > value) this.last()
+        },
+
+        modelValue(value) {
+            this.inputValue = value
+        },
+
+        debouncePageInput: {
+            handler(value) {
+                this.debounceHandlePageInput = debounce(
+                    this.handleOnInputPageChange,
+                    value
+                )
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        /*
+        * Previous button click listener.
+        */
+        prev(event?: Event) {
+            this.changePage(+this.modelValue - 1, event)
+        },
+        /*
+         * Next button click listener.
+        */
+        next(event?: Event) {
+            this.changePage(+this.modelValue + 1, event)
+        },
+        /*
+         * First button click listener.
+        */
+        first(event?: Event) {
+            this.changePage(1, event)
+        },
+        /*
+        * Last button click listener.
+        */
+        last(event?: Event) {
+            this.changePage(this.pageCount, event)
+        },
+
+        changePage(num: number, event?: Event) {
+            if (this.modelValue === num || num < 1 || num > this.pageCount) return
+
+            this.$emit('update:modelValue', num)
+            this.$emit('change', num)
+
+            // Set focus on element to keep tab order
+            if (event && event.target) {
+                this.$nextTick(() => (event.target! as HTMLElement).focus())
+            }
+        },
+
+        getPage(num: number, options: PaginationPageOptions = {}): PaginationPage {
+            return {
+                number: num,
+                isCurrent: this.modelValue === num,
+                click: (event) => this.changePage(num, event),
+                input: (event, inputNum) => this.changePage(+inputNum, event),
+                disabled: options.disabled || false,
+                class: options.class || '',
+                'aria-label':
+          options['aria-label'] ||
+          this.getAriaPageLabel(num, this.modelValue === num)
+            }
+        },
+
+        /*
+        * Get text for aria-label according to page number.
+        */
+        getAriaPageLabel(pageNumber: number, isCurrent: boolean) {
+            if (this.ariaPageLabel && (!isCurrent || !this.ariaCurrentLabel)) {
+                return this.ariaPageLabel + ' ' + pageNumber + '.'
+            } else if (this.ariaPageLabel && isCurrent && this.ariaCurrentLabel) {
+                return (
+                    this.ariaCurrentLabel +
+          ', ' +
+          this.ariaPageLabel +
+          ' ' +
+          pageNumber +
+          '.'
+                )
+            }
+            return null
+        },
+
+        handleOnInputPageChange(event: Event) {
+            this.getPage(+this.inputValue).input(event, this.inputValue)
+        },
+
+        handleOnInputDebounce(event: Event) {
+            if (this.debouncePageInput) {
+                this.debounceHandlePageInput!(event)
+            } else {
+                this.handleOnInputPageChange(event)
+            }
+        },
+        handleOnKeyPress(event: KeyboardEvent) {
+            // --- This is required to only allow numeric inputs for the page input - --- //
+            // --- size attribute does not work with input type number. --- //
+            const ASCIICode = event.which || event.keyCode
+
+            if (ASCIICode >= 48 && ASCIICode <= 57) {
+                return true
+            } else {
+                return event.preventDefault()
+            }
+        },
+        handleAllowableInputPageRange(event: Event) {
+            const target = event.target! as HTMLInputElement
+            if (+target.value > 0 && +target.value <= this.pageCount) {
+                this.handleOnInputValue(event)
+            } else {
+                // --- It is nessacery to set inputValue to 1 and then to '' so that the DOM- --- //
+                // --- will update the input component even when Backspace is used and then-
+                // --- 0 us entered. --- //
+                this.inputValue = 1
+                this.inputValue = ''
+            }
+        },
+        handleOnInputValue(event: Event) {
+            const inputValue = +(event.target! as HTMLInputElement).value
+            this.inputValue = inputValue
+            if (Number.isInteger(this.inputValue)) {
+                this.handleOnInputDebounce(event)
+            } else {
+                // --- if NaN, then set inputValue back to current --- //
+                this.inputValue = this.modelValue
+            }
+        }
+    }
+})
+</script>

package/src/components/pagination/PaginationButton.spec.ts

@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BPaginationButton from '@components/pagination/PaginationButton.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BPaginationButton>>
+const page = 5
+const defaultProps = {
+    page: {
+        number: page,
+        isCurrent: false,
+        click: () => {},
+        input: () => {},
+        disabled: false,
+        class: '',
+        'aria-label': ''
+    }
+}
+
+describe('BPagination', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BPaginationButton, {
+            props: defaultProps
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BPaginationButton')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('returns href as expected', async () => {
+        expect(wrapper.vm.href).toBe('#')
+
+        await wrapper.setProps({ tag: 'button' })
+        expect(wrapper.vm.href).toBeUndefined()
+    })
+})

package/src/components/pagination/PaginationButton.vue

@@ -0,0 +1,59 @@
+<template>
+    <component
+        :is="tag"
+        role="button"
+        :href="href"
+        :disabled="disabledOrUndefined"
+        class="pagination-link"
+        :class="{ 'is-current': page.isCurrent, [page.class]: true }"
+        v-bind="$attrs"
+        @click.prevent="page.click"
+        :aria-label="page['aria-label']"
+        :aria-current="page.isCurrent || undefined"
+    >
+        <slot>{{ page.number }}</slot>
+    </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import config from '../../utils/config'
+import type { PaginationPage } from './types'
+
+export default defineComponent({
+    name: 'BPaginationButton',
+    props: {
+        page: {
+            type: Object as PropType<PaginationPage>,
+            required: true
+        },
+        tag: {
+            type: [String, Object],
+            default: 'a',
+            validator: (value) => {
+                return typeof value === 'object' || config.defaultLinkTags.indexOf(value as string) >= 0
+            }
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        href() {
+            if (this.tag === 'a') {
+                return '#'
+            } else {
+                return undefined
+            }
+        },
+        isDisabled() {
+            return this.disabled || this.page.disabled
+        },
+        disabledOrUndefined() {
+            return this.isDisabled || undefined
+        }
+    }
+})
+</script>

package/src/components/pagination/__snapshots__/Pagination.spec.ts.snap

@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BPagination > render correctly 1`] = `
+"<nav class="pagination"><a role="button" href="#" disabled="true" class="pagination-link pagination-previous pagination-previous">
+    <b-icon-stub icon="chevron-left" both="true" aria-hidden="true"></b-icon-stub>
+  </a><a role="button" href="#" disabled="true" class="pagination-link pagination-next pagination-next">
+    <b-icon-stub icon="chevron-right" both="true" aria-hidden="true"></b-icon-stub>
+  </a>
+  <div class="control pagination-input">
+    <!--v-if-->
+  </div>
+  <ul class="pagination-list">
+    <!--First-->
+    <!--v-if-->
+    <!--v-if-->
+    <!--Pages-->
+    <!--Last-->
+    <!--v-if-->
+    <!--v-if-->
+  </ul>
+</nav>"
+`;

package/src/components/pagination/__snapshots__/PaginationButton.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BPagination > render correctly 1`] = `"<a role="button" href="#" class="pagination-link" aria-label="">5</a>"`;

package/src/components/pagination/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+import Pagination from './Pagination.vue'
+import PaginationButton from './PaginationButton.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Pagination)
+        registerComponent(Vue, PaginationButton)
+    }
+}
+
+export default Plugin
+
+export {
+    Pagination as BPagination,
+    PaginationButton as BPaginationButton
+}

package/src/components/pagination/types.ts

@@ -0,0 +1,11 @@
+// Type definitions shared among the pagination components.
+
+export interface PaginationPage {
+    number: number
+    isCurrent: boolean
+    click: (event: PointerEvent) => void
+    input: (event: Event, inputNum: number | string) => void
+    disabled: boolean
+    class: string
+    'aria-label': string | null
+}

package/src/components/progress/Progress.spec.ts

@@ -0,0 +1,81 @@
+import { shallowMount } from '@vue/test-utils'
+import BProgress from '@components/progress/Progress.vue'
+import { describe, expect, it } from 'vitest'
+
+describe('BProgress', () => {
+    it('is called', () => {
+        const wrapper = shallowMount(BProgress)
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BProgress')
+    })
+
+    it('render correctly', () => {
+        const wrapper = shallowMount(BProgress)
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('add value attribute when a value is passed', async () => {
+        const value = 50
+        const wrapper = shallowMount(BProgress)
+        await wrapper.setProps({ value })
+
+        expect(wrapper.find('.progress').attributes().value).toEqual(`${value}`)
+    })
+
+    describe('Passing a value prop', () => {
+        it('remove value attribute to the <progress> element', async () => {
+            const wrapper = shallowMount(BProgress, {
+                props: { value: undefined }
+            })
+
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.progress').attributes().value).toEqual(undefined)
+        })
+
+        describe('Passing true to show-value prop', () => {
+            it('adds a help <p> element in the root div.progress-wrapper when "show-value" prop is true', () => {
+                const value = 50
+                const wrapper = shallowMount(BProgress, {
+                    props: {
+                        value,
+                        showValue: true
+                    }
+                })
+                expect(wrapper.find('.progress-wrapper').find('p.progress-value').text()).toEqual(`${value}`)
+            })
+
+            it('display the value as percent when passing "percent" for the format prop', async () => {
+                const value = 50
+                const max = 100
+                const format = 'percent'
+                const wrapper = shallowMount(BProgress, {
+                    props: {
+                        value,
+                        max,
+                        format,
+                        showValue: true,
+                        locale: 'en-US'
+                    }
+                })
+
+                await wrapper.vm.$nextTick()
+                expect(wrapper.find('.progress').text()).toEqual(`${value * max / 100}%`)
+            })
+
+            it('display the trailing zeroes when setting the keepTrailingZeroes prop', () => {
+                const value = 50
+                const keepTrailingZeroes = true
+                const wrapper = shallowMount(BProgress, {
+                    props: {
+                        value,
+                        keepTrailingZeroes,
+                        showValue: true
+                    }
+                })
+
+                expect(wrapper.find('.progress').text()).toEqual(`${value}.00`)
+            })
+        })
+    })
+})