buefy 1.0.0 → 1.0.2

package/src/components/table/mockTableColumn.ts

@@ -0,0 +1,110 @@
+import { h as createElement } from 'vue'
+import type { Slots } from 'vue'
+
+import type { VueClassAttribute } from '../../utils/config'
+import { getValueByPath, toCssWidth } from '../../utils/helpers'
+import type {
+    StyleValue,
+    StyleValueUnit,
+    TableColumnHost,
+    TableColumnProps,
+    TableColumnSlotProps,
+    TableRow
+} from './types'
+
+export default function mockTableColumn(table: TableColumnHost, column: TableColumnProps) {
+    const defaultProps = {
+        label: undefined,
+        customKey: undefined,
+        field: undefined,
+        meta: undefined,
+        width: undefined,
+        numeric: undefined,
+        centered: undefined,
+        searchable: undefined,
+        sortable: undefined,
+        visible: true,
+        subheading: undefined,
+        customSort: undefined,
+        customSearch: undefined,
+        sticky: undefined,
+        headerSelectable: undefined,
+        headerClass: undefined,
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        thAttrs: () => ({} as Record<string, any>),
+        tdAttrs: () => ({} as Record<string, any>)
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    }
+    return {
+        // props
+        ...defaultProps,
+        ...column,
+        // data
+        newKey: column.customKey || column.label,
+        _isTableColumn: true,
+        // public computed
+        get thClasses(): VueClassAttribute {
+            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
+        },
+        get thStyle(): StyleValue {
+            const attrs = this.thAttrs(this)
+            const style = [this.style]
+            if (attrs && attrs.style) {
+                style.push(attrs.style)
+            }
+            return style
+        },
+        get thWrapStyle(): StyleValue {
+            return this.style
+        },
+        get style(): StyleValueUnit {
+            return {
+                width: toCssWidth(this.width) ?? undefined // null → undefined to satisfy StyleValue
+            }
+        },
+        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
+        },
+        $slots: {
+            default: (props: TableColumnSlotProps) => {
+                const vnode = createElement('span', {
+                    innerHTML: getValueByPath(props.row, column.field!)
+                })
+                return [vnode]
+            }
+        } as Slots,
+        // private properties
+        get rootClasses(): VueClassAttribute {
+            return [this.cellClass, {
+                'has-text-right': this.numeric && !this.centered,
+                'has-text-centered': this.centered,
+                'is-sticky': this.sticky
+            }]
+        },
+        get isHeaderUnSelectable(): boolean {
+            return !this.headerSelectable && !!this.sortable
+        }
+    }
+}

package/src/components/table/types.ts

@@ -0,0 +1,110 @@
+// Defines types for the table.
+
+import type { Slots } from 'vue'
+import type { VueClassAttribute } from '../../utils/config'
+import type { MultiColumnSortPriority } from '../../utils/helpers'
+
+// Single unit value for `style` attributes.
+export type StyleValueUnit = string | Record<string, string | undefined> | undefined
+
+// Value for `style` attributes.
+//
+// We avoid using `StyleValue` provided by `vue` because it may end up with
+// type errors due to excessively deep recursion in type inference.
+export type StyleValue = StyleValueUnit | StyleValueUnit[]
+
+// Table row has any type unless we could use generics.
+// I have not figured out how to enable generics in the Options API so far.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TableRow = any
+
+// Type that represents the order of a table column.
+export type TableColumnOrder = MultiColumnSortPriority<TableRow>
+
+// Type for a custom sort function.
+export type CustomSortFunction = TableColumnOrder['customSort']
+
+// Type for a custom search function.
+export type CustomSearchFunction = (row: TableRow, input: string | number) => boolean
+
+// Props of a table column.
+export interface TableColumnProps {
+    label?: string
+    customKey?: string | number
+    field?: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    meta?: any
+    width?: string | number
+    numeric?: boolean
+    centered?: boolean
+    searchable?: boolean
+    sortable?: boolean
+    visible?: boolean
+    subheading?: string | number
+    customSort?: CustomSortFunction
+    customSearch?: CustomSearchFunction
+    sticky?: boolean
+    headerSelectable?: boolean
+    headerClass?: string
+    cellClass?: string
+    /* eslint-disable @typescript-eslint/no-explicit-any, no-use-before-define */
+    thAttrs?: (column: ITableColumn) => Record<string, any> | null
+    tdAttrs?: (row: TableRow, column: ITableColumn) => Record<string, any> | null
+    /* eslint-enable @typescript-eslint/no-explicit-any, no-use-before-define */
+}
+
+// Interface of a table column.
+//
+// Extends `TableColumnProps`, but `thAttrs` and `tdAttrs` must be defined.
+export interface ITableColumn extends Omit<TableColumnProps, 'thAttrs' | 'tdAttrs'> {
+    // non-null props
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    thAttrs: (column: ITableColumn) => Record<string, any> | null
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    tdAttrs: (row: TableRow, column: ITableColumn) => Record<string, any> | null
+    // data public to Table
+    newKey?: string | number
+    _isTableColumn?: boolean
+    // computed public to Table
+    thClasses?: VueClassAttribute
+    thStyle?: StyleValue
+    thWrapStyle?: StyleValue
+    style?: StyleValueUnit
+    // public methods
+    getRootClasses: (row: TableRow) => VueClassAttribute[]
+    getRootStyle: (row: TableRow) => StyleValue
+    // slots
+    $slots: Slots
+}
+
+// Interface of the props that a slot of a table column receives.
+export interface TableColumnSlotProps {
+    row: TableRow
+}
+
+// Host of table columns; i.e., the Table component.
+export interface TableColumnHost {
+    _registerTableColumn(column: ITableColumn): void
+    _unregisterTableColumn(column: ITableColumn): void
+}
+
+// Modifier keys for operations, e.g., sorting, checking, in Table.
+// It is mentioned as "event".
+// TODO: we should not mix the UI matter and the logic of the Table component.
+export interface ModifierKeys {
+    shiftKey: boolean
+    altKey: boolean
+    ctrlKey: boolean
+}
+
+export interface TableRowDragEvent {
+    event: DragEvent
+    row: TableRow
+    index: number
+}
+
+export interface TableColumnDragEvent {
+    event: DragEvent
+    column: ITableColumn
+    index: number
+}

package/src/components/tabs/TabItem.spec.ts

@@ -0,0 +1,203 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BTabs from '@components/tabs/Tabs.vue'
+import BTabItem from '@components/tabs/TabItem.vue'
+import type { TabbedChild } from '@utils/TabbedTypes'
+
+const WrapperComp = defineComponent({
+    components: {
+        BTabs, BTabItem
+    },
+    data() {
+        return {
+            show1: true
+        }
+    },
+    template: `
+        <BTabs ref="tabs">
+            <BTabItem v-if="show1" ref="firstItem" value="tab1"/>
+            <BTabItem ref="testItem" value="tab2"/>
+            <BTabItem value="tab3" :visible="false"/>
+        </BTabs>`
+})
+
+let wrapper: VueWrapper<InstanceType<typeof BTabItem>>
+let wrapperParent: VueWrapper<InstanceType<typeof WrapperComp>>
+
+describe('BTabItem', () => {
+    beforeEach(() => {
+        wrapperParent = mount(WrapperComp)
+        wrapper = wrapperParent.findComponent<InstanceType<typeof BTabItem>>({ ref: 'testItem' })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BTabItem')
+        expect(wrapper.vm.value).toBe('tab2')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('computes its position correctly', () => {
+        expect(wrapper.vm.index).toBe(1)
+    })
+
+    it('will retain indexes when a sibling gets removed', async () => {
+        expect(wrapper.vm.index).toBe(1)
+        await wrapperParent.setData({ show1: false })
+        expect(wrapper.vm.index).toBe(1)
+    })
+
+    it('should assign new index when tab is added after removal', async () => {
+        const firstItem = wrapperParent.findComponent({ ref: 'firstItem' })
+        expect(firstItem.vm.index).toBe(0)
+        await wrapperParent.setData({ show1: false })
+        await wrapperParent.setData({ show1: true })
+
+        const firstItem2 = wrapperParent.findComponent({ ref: 'firstItem' })
+        expect(firstItem2.vm.index).toBe(3)
+    })
+
+    it('transition correctly when activate is called', () => {
+        wrapper.vm.activate(0)
+        expect(wrapper.vm.transitionName).toBe('slide-prev')
+
+        wrapper.vm.activate(2)
+        expect(wrapper.vm.transitionName).toBe('slide-next')
+    })
+
+    it('transition correctly when deactivate is called', () => {
+        wrapper.vm.deactivate(2)
+        expect(wrapper.vm.transitionName).toBe('slide-prev')
+
+        wrapper.vm.deactivate(0)
+        expect(wrapper.vm.transitionName).toBe('slide-next')
+    })
+
+    it('should update active state', async () => {
+        const wrapperFirstItem = wrapperParent.findComponent({ ref: 'firstItem' })
+        // we need `<a>` elements corresponding to individual tab components to
+        // activate them with 'click'
+        const firstTabLink = wrapperParent.find(`#${wrapperFirstItem.vm.uniqueValue}-label`)
+        const secondTabLink = wrapperParent.find(`#${wrapper.vm.uniqueValue}-label`)
+
+        expect(wrapperFirstItem.vm.isActive).toBe(true)
+        expect(wrapper.vm.isActive).toBe(false)
+
+        await secondTabLink.trigger('click')
+        expect(wrapperFirstItem.vm.isActive).toBe(false)
+        expect(wrapper.vm.isActive).toBe(true)
+
+        await firstTabLink.trigger('click')
+        expect(wrapperFirstItem.vm.isActive).toBe(true)
+        expect(wrapper.vm.isActive).toBe(false)
+    })
+
+    it('doesn\'t mount when it has no parent', () => {
+        try {
+            mount(BTabItem)
+        } catch (error) {
+            expect((error as Error).message).toEqual(expect.stringMatching(/You should wrap/))
+        }
+    })
+
+    it('doesn\'t render when parent has destroyOnHide', async () => {
+        wrapper = mount(BTabItem, {
+            props: {
+                value: 'tab1'
+            },
+            global: {
+                provide: {
+                    btab: {
+                        // since we cannot override the computed value,
+                        // `activeItem` needs to be identical to the item
+                        // to make the item active
+                        _registerItem(item: TabbedChild) {
+                            this.activeItem = item
+                        },
+                        activeItem: null,
+                        destroyOnHide: true
+                    }
+                }
+            }
+        })
+
+        expect(wrapper.vm.isActive).toBeTruthy()
+        expect(wrapper.vm.visible).toBeTruthy()
+        expect(wrapper.html()).not.toBe('')
+
+        await wrapper.setProps({ visible: false })
+
+        expect(wrapper.html()).toBe('')
+    })
+
+    it('unregisters when destroyed', async () => {
+        const wrapper = mount({
+            template: `
+        <BTabs v-model="value">
+            <BTabItem ref="item1"/>
+            <BTabItem v-if="item2" ref="item2"/>
+        </BTabs>`,
+            props: {
+                // we cannot directly manipulate BTabs' modelValue unless it is
+                // directly mounted. uses indirect v-model instead
+                value: {
+                    type: Number,
+                    default: 0
+                },
+                item2: {
+                    type: Boolean,
+                    default: true
+                }
+            },
+            components: {
+                BTabs, BTabItem
+            }
+        })
+
+        expect(wrapper.findComponent({ ref: 'item2' })).toBeTruthy()
+        expect(wrapper.findComponent(BTabs).vm.items.length).toBe(2)
+
+        await wrapper.setProps({ item2: false })
+
+        expect(wrapper.findComponent(BTabs).vm.items.length).toBe(1)
+
+        await wrapper.setProps({ item2: true })
+        await wrapper.setProps({ value: 1 }) // cannot merge with above
+
+        expect(wrapper.findComponent(BTabs).vm.items.length).toBe(2)
+        expect(wrapper.findComponent({ ref: 'item2' }).vm.isActive).toBeTruthy()
+    })
+
+    describe('with explicit order', () => {
+        it('should assign consistent index when tab is added after removal', async () => {
+            const wrapper = mount({
+                template: `
+                    <BTabs ref="tabs">
+                        <BTabItem v-if="show1" ref="firstItem" :order="1" />
+                        <BTabItem :order="2" />
+                        <BTabItem :order="3" />
+                    </BTabs>`,
+                props: {
+                    show1: {
+                        type: Boolean,
+                        default: true
+                    }
+                },
+                components: { BTabs, BTabItem }
+            })
+
+            const firstItem = wrapper.findComponent({ ref: 'firstItem' })
+            expect(firstItem.vm.index).toBe(1)
+            await wrapper.setProps({ show1: false })
+            await wrapper.setProps({ show1: true })
+
+            const firstItem2 = wrapper.findComponent({ ref: 'firstItem' })
+            expect(firstItem2.vm.index).toBe(1)
+        })
+    })
+})

package/src/components/tabs/TabItem.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import TabbedChildMixin from '../../utils/TabbedChildMixin'
+import type { TabbedParent } from '../../utils/TabbedTypes'
+
+export default defineComponent({
+    name: 'BTabItem',
+    mixins: [TabbedChildMixin<TabbedParent>('tab')],
+    props: {
+        disabled: Boolean
+    },
+    data() {
+        return {
+            elementClass: 'tab-item',
+            elementRole: 'tabpanel'
+        }
+    }
+})
+</script>

package/src/components/tabs/Tabs.spec.ts

@@ -0,0 +1,122 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BTabs from '@components/tabs/Tabs.vue'
+import BTabItem from '@components/tabs/TabItem.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BTabs>>
+
+describe('BTabs', () => {
+    beforeEach(() => {
+        wrapper = mount(BTabs, {
+            props: {
+                modelValue: 'tab1'
+            },
+            slots: {
+                default: `
+                    <BTabItem value="tab1"></BTabItem>
+                    <BTabItem value="tab2" :visible="false"></BTabItem>`
+            },
+            global: {
+                components: { BTabItem }
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BTabs')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('manage main classes accordingly', async () => {
+        await wrapper.setProps({
+            expanded: true,
+            vertical: true,
+            position: 'is-centered'
+        })
+        expect(wrapper.vm.mainClasses['is-fullwidth']).toBeTruthy()
+        expect(wrapper.vm.mainClasses['is-vertical']).toBeTruthy()
+        expect(wrapper.vm.mainClasses['is-centered']).toBeTruthy()
+    })
+
+    it('emit input event with value when active tab is modified', async () => {
+        const idx = 'tab2'
+        await wrapper.setData({ activeId: idx })
+
+        const valueEmitted = wrapper.emitted<(string | number | undefined)[]>()['update:modelValue']
+
+        expect(valueEmitted).toBeTruthy()
+        expect(valueEmitted[0][0]).toBe(idx)
+    })
+
+    it('emit input event with value when childClick is called', async () => {
+        const val = 'tab2'
+
+        wrapper.vm.childClick(wrapper.vm.items[1])
+        wrapper.vm.childClick(wrapper.vm.items[1])
+
+        await wrapper.vm.$nextTick() // Wait until $emits have been handled
+
+        const valueEmitted = wrapper.emitted<(string | number | undefined)[]>()['update:modelValue']
+        expect(valueEmitted[0][0]).toBe(val)
+        // Will be called only once even if we clicked multiple times
+        expect(valueEmitted.length).toBe(1)
+    })
+
+    it('updates the tab when the value is changed', async () => {
+        await wrapper.setProps({ modelValue: 'tab2' })
+
+        expect(wrapper.vm.activeId).toBe('tab2')
+
+        await wrapper.setProps({ modelValue: 0 })
+
+        expect(wrapper.vm.activeId).toBe('tab1')
+    })
+
+    it('finds the children in descendants', () => {
+        const testCmp = {
+            template: `
+                <div>
+                    <BTabItem></BTabItem>
+                    <BTabItem></BTabItem>
+                </div>`,
+            components: { BTabItem }
+        }
+
+        wrapper = mount({
+            template: `
+        <BTabs>
+            <test-cmp/>
+            <test-cmp/>
+            <test-cmp/>
+        </BTabs>`,
+            components: {
+                BTabs, testCmp
+            }
+        }).findComponent(BTabs)
+
+        expect(wrapper.vm.items.length).toBe(6)
+        expect(wrapper.vm.items.map((i) => i.index)).toEqual([0, 1, 2, 3, 4, 5])
+    })
+
+    it('doesn\'t show a tab if value is null', async () => {
+        await wrapper.setProps({ modelValue: null })
+
+        expect(wrapper.vm.activeId).toBeNull()
+        expect(wrapper.vm.activeItem).toBe(null)
+    })
+
+    it('still renders if there is no item', () => {
+        wrapper = mount({
+            template: '<BTabs model-value="tab1"></BTabs>',
+            components: {
+                BTabs
+            }
+        }).findComponent(BTabs)
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+})