buefy 1.0.0 → 1.0.2

package/src/components/table/TableColumn.spec.ts

@@ -0,0 +1,85 @@
+import { defineComponent } from 'vue'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BTable from '@components/table/Table.vue'
+import BTableColumn from '@components/table/TableColumn.vue'
+import BButton from '@components/button/Button.vue'
+
+const WrapperComp = defineComponent({
+    components: {
+        BTable, BTableColumn
+    },
+    template: `
+        <BTable>
+            <BTableColumn/>
+            <BTableColumn ref="testItem" />
+            <BTableColumn />
+        </BTable>`
+})
+let wrapper: VueWrapper<InstanceType<typeof WrapperComp>>
+
+describe('BTableColumn', () => {
+    beforeEach(() => {
+        wrapper = mount(WrapperComp).findComponent({ ref: 'testItem' })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BTableColumn')
+    })
+
+    it('expose isActiveDetailRow method', async () => {
+        const DetailedTable = {
+            template: `
+                <BTable :data="tableData" detail-key="id" detailed>
+                    <BTableColumn :td-attrs="tdAttrs" v-slot="props">
+                        <div>
+                            {{ props.row.name }} - {{ props.isActiveDetailRow(props.row) ? 'Opened' : 'Closed' }}
+                        </div>
+                        <BButton @click="props.toggleDetails(props.row)">Toggle details</BButton>
+                    </BTableColumn>
+                </BTable>`,
+            components: { BTable, BTableColumn, BButton },
+            methods: {
+                tdAttrs(td: { id: string }) {
+                    return { id: `td-${td.id}` }
+                }
+            }
+        }
+
+        const tableData = [
+            { id: 1, name: 'Jesse' },
+            { id: 2, name: 'John' },
+            { id: 3, name: 'Tina' },
+            { id: 4, name: 'Anne' },
+            { id: 5, name: 'Clarence' }
+        ]
+
+        const wrapper = mount(DetailedTable, {
+            data: () => ({ detailKey: 'id', detailed: true, tableData })
+        })
+
+        // Wait for component to properly mount
+        await wrapper.vm.$nextTick()
+        // Toggle first row details
+        expect(wrapper.find('#td-1').text()).toContain('Closed')
+        expect(wrapper.find('#td-1').text()).not.toContain('Opened')
+        wrapper.find('#td-1 button').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('#td-1').text()).not.toContain('Closed')
+        expect(wrapper.find('#td-1').text()).toContain('Opened')
+        wrapper.find('#td-1 button').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('#td-1').text()).toContain('Closed')
+        expect(wrapper.find('#td-1').text()).not.toContain('Opened')
+
+        // Toggle second row details
+        expect(wrapper.find('#td-2').text()).toContain('Closed')
+        expect(wrapper.find('#td-2').text()).not.toContain('Opened')
+        wrapper.find('#td-2 button').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('#td-2').text()).not.toContain('Closed')
+        expect(wrapper.find('#td-2').text()).toContain('Opened')
+    })
+})

package/src/components/table/TableColumn.vue

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import { toCssWidth } from '../../utils/helpers'
+import type {
+    CustomSearchFunction,
+    CustomSortFunction,
+    ITableColumn,
+    TableColumnHost,
+    TableRow
+} from './types'
+
+export default defineComponent({
+    name: 'BTableColumn',
+    inject: {
+        $table: { name: '$table', default: false }
+    },
+    props: {
+        label: String,
+        customKey: [String, Number],
+        field: String,
+        meta: [String, Number, Boolean, Function, Object, Array],
+        width: [Number, String],
+        numeric: Boolean,
+        centered: Boolean,
+        searchable: Boolean,
+        sortable: Boolean,
+        visible: {
+            type: Boolean,
+            default: true
+        },
+        subheading: [String, Number],
+        customSort: Function as PropType<CustomSortFunction>,
+        customSearch: Function as PropType<CustomSearchFunction>,
+        sticky: Boolean,
+        headerSelectable: Boolean,
+        headerClass: String,
+        cellClass: String,
+        thAttrs: {
+            type: Function as PropType<ITableColumn['thAttrs']>,
+            default: () => ({})
+        },
+        tdAttrs: {
+            type: Function as PropType<ITableColumn['tdAttrs']>,
+            default: () => ({})
+        }
+    },
+    data() {
+        return {
+            newKey: this.customKey || this.label,
+            _isTableColumn: true
+        }
+    },
+    computed: {
+        thClasses() {
+            const attrs = this.thAttrs(this)
+            const classes = [this.headerClass, {
+                'is-sortable': this.sortable,
+                'is-sticky': this.sticky,
+                'is-unselectable': this.isHeaderUnSelectable
+            }]
+            if (attrs && attrs.class) {
+                classes.push(attrs.class)
+            }
+            return classes
+        },
+        thStyle() {
+            const attrs = this.thAttrs(this)
+            const style = [this.style]
+            if (attrs && attrs.style) {
+                style.push(attrs.style)
+            }
+            return style
+        },
+        thWrapStyle() {
+            const width = toCssWidth(this.width)
+            // interestingly, percentage width on the th element has effect
+            // so we won't apply it to .th-wrap
+            if (width != null && !width.trim().endsWith('%')) {
+                return { width }
+            } else {
+                return {}
+            }
+        },
+        rootClasses() {
+            return [this.cellClass, {
+                'has-text-right': this.numeric && !this.centered,
+                'has-text-centered': this.centered,
+                'is-sticky': this.sticky
+            }]
+        },
+        style() {
+            return {
+                width: toCssWidth(this.width) ?? undefined // null → undefined to satisfy StyleValue
+            }
+        },
+        hasDefaultSlot() {
+            return !!this.$slots.default
+        },
+        /*
+         * Return if column header is un-selectable
+         */
+        isHeaderUnSelectable() {
+            return !this.headerSelectable && this.sortable
+        }
+    },
+    methods: {
+        getRootClasses(row: TableRow) {
+            const attrs = this.tdAttrs(row, this)
+            const classes = [this.rootClasses]
+            if (attrs && attrs.class) {
+                classes.push(attrs.class)
+            }
+            return classes
+        },
+        getRootStyle(row: TableRow) {
+            const attrs = this.tdAttrs(row, this)
+            const style = []
+            if (attrs && attrs.style) {
+                style.push(attrs.style)
+            }
+            return style
+        }
+    },
+    created() {
+        if (!this.$table) {
+            throw new Error('You should wrap bTableColumn on a bTable')
+        }
+        (this.$table as TableColumnHost)._registerTableColumn(this)
+    },
+    beforeUnmount() {
+        (this.$table as TableColumnHost)._unregisterTableColumn(this)
+    },
+    render() {
+        // renderless
+        return null
+    }
+})
+</script>

package/src/components/table/TableMobileSort.spec.ts

@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BTableMobileSort from '@components/table/TableMobileSort.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BTableMobileSort>>
+
+const DUMMY_COLUMN = {
+    thAttrs: () => ({}),
+    tdAttrs: () => ({}),
+    getRootClasses: () => [],
+    getRootStyle: () => undefined,
+    $slots: {}
+} as const
+
+describe('BTableMobileSort', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BTableMobileSort)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BTableMobileSort')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    describe('showPlaceholder', () => {
+        it('is true if there are no columns', () => {
+            expect(wrapper.vm.showPlaceholder).toBeTruthy()
+        })
+    })
+
+    it('set mobileSort value when currentSortColumn is changed', async () => {
+        await wrapper.setProps({ currentSortColumn: DUMMY_COLUMN })
+        expect(wrapper.vm.mobileSort).toEqual(wrapper.vm.currentSortColumn)
+    })
+
+    it('emit sort event with mobileSort value when sort is called', () => {
+        wrapper.vm.mobileSort = DUMMY_COLUMN
+        wrapper.vm.sort()
+        const valueEmitted = wrapper.emitted().sort[0]
+        expect(valueEmitted).toContainEqual(wrapper.vm.mobileSort)
+    })
+})

package/src/components/table/TableMobileSort.vue

@@ -0,0 +1,236 @@
+<template>
+    <div class="field table-mobile-sort">
+        <div class="field has-addons">
+            <b-select
+                v-model="sortMultipleSelectIndex"
+                expanded
+                v-if="sortMultiple"
+            >
+                <option
+                    v-for="(column, index) in sortableColumns"
+                    :key="index"
+                    :value="index"
+                >
+                    {{ getLabel(column) }}
+                    <template v-if="getSortingObjectOfColumn(column)">
+                        <template v-if="columnIsDesc(column)">
+                            &#8595;
+                        </template>
+                        <template v-else>
+                            &#8593;
+                        </template>
+                    </template>
+                </option>
+            </b-select>
+            <b-select
+                v-model="mobileSortIndex"
+                expanded
+                v-else
+            >
+                <template v-if="placeholder">
+                    <option
+                        v-show="showPlaceholder"
+                        :value="{}"
+                        selected
+                        disabled
+                        hidden
+                    >
+                        {{ placeholder }}
+                    </option>
+                </template>
+                <option
+                    v-for="(column, index) in sortableColumns"
+                    :key="index"
+                    :value="index"
+                >
+                    {{ column.label }}
+                </option>
+            </b-select>
+            <div class="control">
+                <template
+                    v-if="sortMultiple && sortMultipleData!.length > 0"
+                >
+                    <button
+                        class="button is-primary"
+                        @click="sort"
+                    >
+                        <b-icon
+                            :class="{ 'is-desc': columnIsDesc(sortMultipleSelect) }"
+                            :icon="sortIcon"
+                            :pack="iconPack"
+                            :size="sortIconSize"
+                            both
+                        />
+                    </button>
+                    <button
+                        class="button is-primary"
+                        @click="removePriority"
+                    >
+                        <b-icon
+                            icon="delete"
+                            :size="sortIconSize"
+                            both
+                        />
+                    </button>
+                </template>
+                <button
+                    v-else-if="!sortMultiple"
+                    class="button is-primary"
+                    @click="sort"
+                >
+                    <b-icon
+                        v-show="currentSortColumn === mobileSort"
+                        :class="{ 'is-desc': !isAsc }"
+                        :icon="sortIcon"
+                        :pack="iconPack"
+                        :size="sortIconSize"
+                        both
+                    />
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import BSelect from '../select/Select.vue'
+import BIcon from '../icon/Icon.vue'
+import type { ITableColumn, ModifierKeys, TableColumnOrder } from './types'
+
+export default defineComponent({
+    name: 'BTableMobileSort',
+    components: {
+        BSelect,
+        BIcon
+    },
+    props: {
+        currentSortColumn: Object as PropType<ITableColumn>,
+        sortMultipleData: Array<TableColumnOrder>,
+        isAsc: Boolean,
+        columns: Array<ITableColumn>,
+        placeholder: String,
+        iconPack: String,
+        sortIcon: {
+            type: String,
+            default: 'arrow-up'
+        },
+        sortIconSize: {
+            type: String,
+            default: 'is-small'
+        },
+        sortMultiple: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        removePriority: (_column: ITableColumn) => true,
+        sort: (_column: ITableColumn | null | undefined, _event: ModifierKeys) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    data() {
+        return {
+            sortMultipleSelect: null as ITableColumn | null,
+            sortMultipleSelectIndex: -1,
+            mobileSort: this.currentSortColumn,
+            mobileSortIndex: this.columns ? this.columns.indexOf(this.currentSortColumn!) : -1,
+            defaultEvent: {
+                shiftKey: true,
+                altKey: true,
+                ctrlKey: true
+            },
+            ignoreSort: false
+        }
+    },
+    computed: {
+        showPlaceholder() {
+            return !this.columns ||
+                !this.columns.some((column) => column === this.mobileSort)
+        },
+        sortableColumns() {
+            return this.columns && this.columns.filter((column) => column.sortable)
+        }
+    },
+    watch: {
+        sortMultipleSelect(column) {
+            if (this.ignoreSort) {
+                this.ignoreSort = false
+            } else {
+                this.$emit('sort', column, this.defaultEvent)
+            }
+        },
+        sortMultipleSelectIndex(index) {
+            if (index !== -1) {
+                this.sortMultipleSelect = this.columns![index]
+            } else {
+                this.sortMultipleSelect = null
+            }
+        },
+        mobileSort(column) {
+            if (this.currentSortColumn === column) return
+
+            this.$emit('sort', column, this.defaultEvent)
+        },
+        mobileSortIndex(index) {
+            if (index !== -1) {
+                this.mobileSort = this.columns![index]
+            }
+            // `index` becomes -1 if `currentSortColumn` is not in `columns`
+            // never resets to null but retains `mobileSort` in that case
+        },
+        currentSortColumn(column) {
+            // replaces `mobileSort` whether `column` is in `columns` or not
+            this.mobileSort = column
+            this.mobileSortIndex = this.columns ? this.columns.indexOf(column) : -1
+        },
+        columns(newColumns) {
+            if (this.sortMultiple) {
+                this.sortMultipleSelectIndex = newColumns.indexOf(
+                    this.sortMultipleSelect
+                )
+            } else {
+                this.mobileSortIndex = newColumns.indexOf(this.mobileSort)
+            }
+        }
+    },
+    methods: {
+        removePriority() {
+            this.$emit('removePriority', this.sortMultipleSelect!)
+            // ignore the watcher to sort when we just change whats displayed in the select
+            // otherwise the direction will be flipped
+            // The sort event is already triggered by the emit
+            this.ignoreSort = true
+            // Select one of the other options when we reset one
+            const remainingFields = this.sortMultipleData!.filter((data) =>
+                data.field !== this.sortMultipleSelect!.field)
+                .map((data) => data.field)
+            this.sortMultipleSelectIndex = this.columns!.findIndex((column) =>
+                remainingFields.includes(column.field!))
+        },
+        getSortingObjectOfColumn(column: ITableColumn) {
+            return this.sortMultipleData!.filter((i) =>
+                i.field === column.field)[0]
+        },
+        columnIsDesc(column: ITableColumn | null) {
+            const sortingObject = column && this.getSortingObjectOfColumn(column)
+            if (sortingObject) {
+                return !!(sortingObject.order && sortingObject.order === 'desc')
+            }
+            return true
+        },
+        getLabel(column: ITableColumn) {
+            const sortingObject = this.getSortingObjectOfColumn(column)
+            if (sortingObject) {
+                return column.label + '(' + (this.sortMultipleData!.indexOf(sortingObject) + 1) + ')'
+            }
+            return column.label
+        },
+        sort() {
+            this.$emit('sort', (this.sortMultiple ? this.sortMultipleSelect : this.mobileSort), this.defaultEvent)
+        }
+    }
+})
+</script>

package/src/components/table/TablePagination.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="top level">
+        <div class="level-left">
+            <slot />
+        </div>
+
+        <div class="level-right">
+            <div v-if="paginated" class="level-item">
+                <b-pagination
+                    :icon-pack="iconPack"
+                    :total="total"
+                    :per-page="perPage"
+                    :simple="paginationSimple"
+                    :size="paginationSize"
+                    :model-value="newCurrentPage"
+                    :rounded="rounded"
+                    @change="pageChanged"
+                    :aria-next-label="ariaNextLabel"
+                    :aria-previous-label="ariaPreviousLabel"
+                    :aria-page-label="ariaPageLabel"
+                    :aria-current-label="ariaCurrentLabel"
+                    :page-input="pageInput"
+                    :order="paginationOrder"
+                    :page-input-position="pageInputPosition"
+                    :debounce-page-input="debouncePageInput"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BPagination from '../pagination/Pagination.vue'
+
+export default defineComponent({
+    name: 'BTablePagination',
+    components: {
+        BPagination
+    },
+    props: {
+        paginated: Boolean,
+        total: [Number, String],
+        perPage: [Number, String],
+        currentPage: [Number, String],
+        paginationSimple: Boolean,
+        paginationSize: String,
+        rounded: Boolean,
+        iconPack: String,
+        ariaNextLabel: String,
+        ariaPreviousLabel: String,
+        ariaPageLabel: String,
+        ariaCurrentLabel: String,
+        pageInput: Boolean,
+        paginationOrder: String,
+        pageInputPosition: String,
+        debouncePageInput: [Number, String]
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'page-change': (_page: string | number) => true,
+        'update:currentPage': (_page: string | number) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    data() {
+        return {
+            newCurrentPage: this.currentPage
+        }
+    },
+    watch: {
+        currentPage(newVal) {
+            this.newCurrentPage = newVal
+        }
+    },
+    methods: {
+        /*
+        * Paginator change listener.
+        */
+        pageChanged(page: number) {
+            this.newCurrentPage = page > 0 ? page : 1
+            this.$emit('update:currentPage', this.newCurrentPage)
+            this.$emit('page-change', this.newCurrentPage)
+        }
+    }
+})
+</script>

package/src/components/table/__snapshots__/Table.spec.ts.snap

@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BTable > render correctly 1`] = `
+"<div class="b-table">
+  <!--v-if-->
+  <!--v-if-->
+  <div class="table-wrapper has-mobile-cards">
+    <table class="table">
+      <!--v-if-->
+      <!--v-if-->
+      <tbody>
+        <tr class="is-empty">
+          <td colspan="0"></td>
+        </tr>
+      </tbody>
+      <!--v-if-->
+    </table>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="touch-dragged-cell has-mobile-cards" style="display: none;"></div><!-- eslint-enable vue/no-v-html -->
+</div>"
+`;

package/src/components/table/__snapshots__/TableMobileSort.spec.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BTableMobileSort > render correctly 1`] = `
+"<div class="field table-mobile-sort">
+  <div class="field has-addons">
+    <b-select-stub modelvalue="-1" multiple="false" expanded=""></b-select-stub>
+    <div class="control"><button class="button is-primary">
+        <b-icon-stub icon="arrow-up" size="is-small" both="true" class="is-desc"></b-icon-stub>
+      </button></div>
+  </div>
+</div>"
+`;

package/src/components/table/index.ts

@@ -0,0 +1,32 @@
+import type { App } from 'vue'
+import Table from './Table.vue'
+import TableColumn from './TableColumn.vue'
+
+import { registerComponent } from '../../utils/plugins'
+import { VueInstance, setVueInstance } from '../../utils/config'
+export type {
+    ITableColumn,
+    ModifierKeys,
+    TableColumnOrder,
+    TableColumnDragEvent,
+    TableRow,
+    TableRowDragEvent
+} from './types'
+
+const Plugin = {
+    install(Vue: App) {
+        // individual import + extend method into Table.vue
+        if (typeof VueInstance === 'undefined') {
+            setVueInstance(Vue)
+        }
+        registerComponent(Vue, Table)
+        registerComponent(Vue, TableColumn)
+    }
+}
+
+export default Plugin
+
+export {
+    Table as BTable,
+    TableColumn as BTableColumn
+}