buefy 1.0.0 → 1.0.2

package/src/utils/SlotComponent.spec.ts

@@ -0,0 +1,55 @@
+import { h } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BSlotComponent from '@utils/SlotComponent'
+
+describe('BSlotComponent', () => {
+    const MockComponent = {
+        render: () => h('div', {}, 'Hello!')
+    }
+
+    it('is called', () => {
+        const wrapper = shallowMount(BSlotComponent, {
+            props: {
+                component: {}
+            }
+        })
+
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BSlotComponent')
+    })
+
+    it('default render', () => {
+        const slot = '<span>Content</span>'
+        const Component = shallowMount(MockComponent, {
+            slots: {
+                default: slot
+            }
+        })
+        const wrapper = shallowMount(BSlotComponent, {
+            props: {
+                component: Component.vm
+            }
+        })
+        expect(wrapper.html()).toBe(`<div>${slot}</div>`)
+    })
+
+    it('render', () => {
+        const slot = '<span>Content</span>'
+        const slotName = 'header'
+        const Component = shallowMount(MockComponent, {
+            slots: {
+                [slotName]: slot
+            }
+        })
+        const tag = 'span'
+        const wrapper = shallowMount(BSlotComponent, {
+            props: {
+                component: Component.vm,
+                tag,
+                name: slotName
+            }
+        })
+        expect(wrapper.html()).toBe(`<${tag}>${slot}</${tag}>`)
+    })
+})

package/src/utils/SlotComponent.ts

@@ -0,0 +1,38 @@
+import { defineComponent, h as createElement } from 'vue'
+
+export default defineComponent({
+    name: 'BSlotComponent',
+    props: {
+        component: {
+            type: Object,
+            required: true
+        },
+        name: {
+            type: String,
+            default: 'default'
+        },
+        scoped: {
+            type: Boolean
+        },
+        props: {
+            type: Object
+        },
+        tag: {
+            type: [String, Object],
+            default: 'div'
+        }
+    },
+    methods: {
+        refresh() {
+            this.$forceUpdate()
+        }
+    },
+    render() {
+        return createElement(this.tag, {},
+            this.component.$slots
+                ? this.scoped
+                    ? this.component.$slots[this.name](this.props)
+                    : this.component.$slots[this.name]()
+                : undefined)
+    }
+})

package/src/utils/TabbedChildMixin.ts

@@ -0,0 +1,96 @@
+import { defineComponent, h as createElement, Transition, vShow, withDirectives } from 'vue'
+import type { PropType } from 'vue'
+
+import type { VueClassAttribute } from './config'
+import InjectedChildMixin, { Sorted } from './InjectedChildMixin'
+import type { TabbedParent } from './TabbedTypes'
+
+export type TransitionName = 'slide-next' | 'slide-prev' | 'slide-up' | 'slide-down'
+
+export default <Parent extends TabbedParent = TabbedParent>(parentCmp: string) => defineComponent({
+    mixins: [InjectedChildMixin<typeof Sorted, Parent>(parentCmp, Sorted)],
+    props: {
+        label: String,
+        icon: String,
+        iconPack: String,
+        visible: {
+            type: Boolean,
+            default: true
+        },
+        headerClass: {
+            type: [String, Array, Object] as PropType<VueClassAttribute>,
+            default: null
+        }
+    },
+    data() {
+        return {
+            transitionName: null as TransitionName | null,
+            elementClass: 'item' as string,
+            elementRole: null as string | null
+        }
+    },
+    computed: {
+        isActive(): boolean {
+            return this.parent.activeItem === this
+        }
+    },
+    methods: {
+        /*
+         * Activate element, alter animation name based on the index.
+         */
+        activate(oldIndex: number) {
+            this.transitionName = this.index < oldIndex
+                ? this.parent.vertical ? 'slide-down' : 'slide-next'
+                : this.parent.vertical ? 'slide-up' : 'slide-prev'
+        },
+
+        /*
+         * Deactivate element, alter animation name based on the index.
+         */
+        deactivate(newIndex: number) {
+            this.transitionName = newIndex < this.index
+                ? this.parent.vertical ? 'slide-down' : 'slide-next'
+                : this.parent.vertical ? 'slide-up' : 'slide-prev'
+        }
+    },
+    render() {
+        // if destroy apply v-if
+        if (this.parent.destroyOnHide) {
+            if (!this.isActive || !this.visible) {
+                return
+            }
+        }
+        const vnode = withDirectives(
+            createElement(
+                'div',
+                {
+                    // NOTE: possible regression of #3272
+                    // https://github.com/buefy/buefy/issues/3272
+                    class: this.elementClass,
+                    role: this.elementRole,
+                    id: `${this.uniqueValue}-content`,
+                    'aria-labelledby': this.elementRole
+                        ? `${this.uniqueValue}-label`
+                        : null,
+                    tabindex: this.isActive ? 0 : -1
+                },
+                this.$slots
+            ),
+            [[vShow, this.isActive && this.visible]]
+        )
+        // check animated prop
+        if (this.parent.animated) {
+            return createElement(
+                Transition,
+                {
+                    name: (this.parent.animation || this.transitionName) ?? undefined,
+                    appear: this.parent.animateInitially === true || undefined,
+                    onBeforeEnter: () => { this.parent.isTransitioning = true },
+                    onAfterEnter: () => { this.parent.isTransitioning = false }
+                },
+                { default: () => vnode }
+            )
+        }
+        return vnode
+    }
+})

package/src/utils/TabbedMixin.ts

@@ -0,0 +1,166 @@
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import BIcon from '../components/icon/Icon.vue'
+import BSlotComponent from '../utils/SlotComponent'
+import ProviderParentMixin, { Sorted } from './ProviderParentMixin'
+import type { TabbedChild } from './TabbedTypes'
+import { bound } from './helpers'
+
+export default <Child extends TabbedChild>(cmp: string) => defineComponent({
+    components: {
+        BIcon,
+        BSlotComponent
+    },
+    mixins: [ProviderParentMixin<typeof Sorted, Child>(cmp, Sorted)],
+    props: {
+        modelValue: {
+            type: [String, Number, null] as PropType<string | number | null | undefined>,
+            default: undefined
+        },
+        size: String,
+        animated: {
+            type: Boolean,
+            default: true
+        },
+        animation: String,
+        animateInitially: Boolean,
+        vertical: {
+            type: Boolean,
+            default: false
+        },
+        position: String,
+        destroyOnHide: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        'update:modelValue': (_value: string | number | null | undefined) => true
+    },
+    data() {
+        return {
+            activeId: this.modelValue, // Internal state
+            defaultSlots: [],
+            contentHeight: 0,
+            isTransitioning: false
+        }
+    },
+    computed: {
+        activeItem() {
+            // the `childItems` data field has the type `UnwrapRefSimple<Child[]>`.
+            // while `UnwrapRefSimple<T>` has the same structure as `T`, it is
+            // not implicitly assignable to `T` when `T` is given as a type
+            // parameter.
+            const childItems: Child[] = this.childItems as Child[]
+            return this.activeId === undefined
+                ? this.items[0]
+                : (this.activeId === null
+                    ? null
+                    : childItems.find((i) => i.uniqueValue === this.activeId))
+        },
+        items() {
+            return this.sortedItems
+        }
+    },
+    watch: {
+        /*
+         * When v-model is changed set the new active tab.
+         */
+        modelValue(value) {
+            if (typeof value === 'number') {
+                // Backward compatibility: converts the index value to an id
+                value = bound(value, 0, this.items.length - 1)
+                this.activeId = this.items[value].uniqueValue
+            } else {
+                this.activeId = value
+            }
+        },
+        /*
+         * Sync internal state with external state
+         */
+        activeId(val, oldValue) {
+            const oldTab = oldValue !== undefined && oldValue !== null
+                ? this.childItems.find((i) => i.uniqueValue === oldValue)
+                : null
+
+            if (oldTab && this.activeItem) {
+                oldTab.deactivate(this.activeItem.index)
+                this.activeItem.activate(oldTab.index)
+            }
+
+            val = this.activeItem
+                ? (typeof this.modelValue === 'number' ? this.items.indexOf(this.activeItem) : this.activeItem.uniqueValue)
+                : undefined
+
+            if (val !== this.modelValue) {
+                this.$emit('update:modelValue', val)
+            }
+        }
+    },
+    methods: {
+        /*
+        * Child click listener, emit input event and change active child.
+        */
+        childClick(child: TabbedChild) {
+            this.activeId = child.uniqueValue
+        },
+
+        getNextItemIdx(fromIdx: number, skipDisabled = false) {
+            let nextItemIdx = null
+            for (let i = 0; i < this.items.length; i++) {
+                const item = this.items[i]
+                if (
+                    fromIdx < item.index &&
+                    (
+                        item.visible &&
+                        (
+                            !skipDisabled ||
+                            (
+                                skipDisabled &&
+                                !item.disabled
+                            )
+                        )
+                    )
+                ) {
+                    nextItemIdx = item.index
+                    break
+                }
+            }
+            return nextItemIdx
+        },
+        getPrevItemIdx(fromIdx: number, skipDisabled = false) {
+            let prevItemIdx = null
+            for (let i = this.items.length - 1; i >= 0; i--) {
+                const item = this.items[i]
+                if (
+                    item.index < fromIdx &&
+                    (
+                        item.visible &&
+                        (
+                            !skipDisabled ||
+                            (
+                                skipDisabled &&
+                                !item.disabled
+                            )
+                        )
+                    )
+                ) {
+                    prevItemIdx = item.index
+                    break
+                }
+            }
+            return prevItemIdx
+        }
+    },
+    mounted() {
+        if (typeof this.modelValue === 'number') {
+            // Backward compatibility: converts the index value to an id
+            const value = bound(this.modelValue, 0, this.items.length - 1)
+            this.activeId = this.items[value].uniqueValue
+        } else {
+            this.activeId = this.modelValue
+        }
+    }
+})

package/src/utils/TabbedTypes.ts

@@ -0,0 +1,33 @@
+// Common types between `TabbedMixin` and `TabbedChildMixin`.
+
+import type { Slots } from 'vue'
+import type { VueClassAttribute } from './config'
+import type { InjectedChild, ProviderParent } from './ProvideInjectTypes'
+
+// Interface that `TabbedChildMixin` is supposed to implement.
+export interface TabbedChild extends InjectedChild {
+    visible: boolean
+    disabled?: boolean
+    isActive: boolean
+    label?: string
+    headerClass: VueClassAttribute
+    icon?: string
+    iconPack?: string
+    $slots: Slots
+
+    // `TabbedParent` will call `activate` when the child tab turns active.
+    activate(oldIndex: number): void
+    // `TabbedParent` will call `deactivate` when the child tab turns inactive.
+    deactivate(newIndex: number): void
+}
+
+// Interface that `TabbedMixin` is supposed to implement.
+export interface TabbedParent extends ProviderParent {
+    vertical: boolean
+    animated: boolean
+    animateInitially: boolean
+    animation?: string
+    isTransitioning: boolean
+    destroyOnHide: boolean
+    activeItem: TabbedChild
+}

package/src/utils/TimepickerMixin.spec.ts

@@ -0,0 +1,75 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import TimepickerMixin from '@utils/TimepickerMixin'
+
+const AM = 'AM'
+const PM = 'PM'
+
+const component = defineComponent({
+    mixins: [TimepickerMixin],
+    template: '<div class="b-component"></div>'
+})
+
+let wrapper: VueWrapper<InstanceType<typeof component>>
+
+describe('TimepickerMixin', () => {
+    HTMLElement.prototype.insertAdjacentElement = vi.fn()
+    beforeEach(() => {
+        wrapper = shallowMount(component, {
+            attachTo: document.body
+        })
+    })
+
+    it('should set dateSelected and emit input event when setting computedValue', async () => {
+        const date = new Date()
+        wrapper.vm.computedValue = date
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.dateSelected).toEqual(date)
+        expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    })
+
+    it('should return correct value for meridiens', () => {
+        expect(wrapper.vm.meridiens).toEqual([AM, PM])
+    })
+
+    it('should call updateDateSelected on onSecondsChange', async () => {
+        wrapper.vm.updateDateSelected = vi.fn()
+        wrapper.vm.onSecondsChange('0')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.updateDateSelected).toHaveBeenCalledTimes(1)
+    })
+
+    it('should update internal state with passed value on updateInternalState', async () => {
+        const date = new Date()
+        wrapper.vm.updateInternalState(date)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.hoursSelected).toEqual(date.getHours())
+        expect(wrapper.vm.minutesSelected).toEqual(date.getMinutes())
+        expect(wrapper.vm.secondsSelected).toEqual(date.getSeconds())
+    })
+
+    it('should update internal state on updateInternalState', async () => {
+        wrapper.vm.updateInternalState()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.hoursSelected).toBeNull()
+        expect(wrapper.vm.minutesSelected).toBeNull()
+        expect(wrapper.vm.secondsSelected).toBeNull()
+        expect(wrapper.vm.meridienSelected).toEqual(AM)
+    })
+
+    it('should call onFocus on handleOnFocus', async () => {
+        wrapper.vm.onFocus = vi.fn()
+        wrapper.vm.handleOnFocus()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.onFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call toggle on close', async () => {
+        wrapper.vm.toggle = vi.fn()
+        wrapper.vm.close()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.toggle).toHaveBeenCalledTimes(1)
+    })
+})