buefy 1.0.0 → 1.0.2

package/src/components/modal/index.ts

@@ -0,0 +1,107 @@
+import { createApp, h as createElement } from 'vue'
+import type { App, ComponentPublicInstance } from 'vue'
+
+import Modal from './Modal.vue'
+import type { ModalProps } from './Modal.vue'
+
+import type { ModalCancellableOption } from '../../utils/config'
+import { copyAppContext, getComponentFromVNode } from '../../utils/helpers'
+import { registerComponent, registerComponentProgrammatic } from '../../utils/plugins'
+
+export type ModalOpenParams = Omit<ModalProps, 'programmatic' | 'cancelCallback'> & {
+    onCancel?: (method: ModalCancellableOption) => void
+}
+
+// Minimal definition of a programmatically opened modal.
+//
+// ESLint does not like `{}` as a type but allowed here to make them look
+// similar to Vue's definition.
+/* eslint-disable @typescript-eslint/ban-types */
+type ModalProgrammaticInstance = ComponentPublicInstance<
+    {}, // P
+    {}, // B
+    {}, // D
+    {}, // C
+    { close: () => void } // M
+>;
+/* eslint-enable @typescript-eslint/ban-types */
+
+class ModalProgrammatic {
+    private app: App | undefined
+
+    constructor(app?: App) {
+        this.app = app // may be undefined in the testing environment
+    }
+
+    open(params: ModalOpenParams | string) {
+        if (typeof params === 'string') {
+            params = {
+                content: params
+            }
+        }
+
+        let slot: ModalOpenParams['content']
+        if (Array.isArray(params.content)) {
+            slot = params.content
+            delete params.content
+        }
+        const propsData = params
+        const container = document.createElement('div')
+        // Vue 3 requires a new app to mount another component
+        const vueInstance = createApp({
+            data() {
+                return {
+                    modalVNode: null
+                }
+            },
+            methods: {
+                close() {
+                    const modal = getComponentFromVNode(this.modalVNode)
+                    if (modal) {
+                        (modal as InstanceType<typeof Modal>).close()
+                    }
+                }
+            },
+            render() {
+                this.modalVNode = createElement(
+                    Modal,
+                    {
+                        ...propsData,
+                        programmatic: true,
+                        onClose: () => {
+                            vueInstance.unmount()
+                        },
+                        // intentionally overrides propsData.onCancel
+                        // to prevent propsData.onCancel from receiving a "cancel" event
+                        onCancel: () => {},
+                        cancelCallback: (method) => {
+                            if (propsData.onCancel != null) {
+                                propsData.onCancel(method)
+                            }
+                        }
+                    },
+                    slot ? { default: () => slot } : undefined
+                )
+                return this.modalVNode
+            }
+        })
+        if (this.app) {
+            copyAppContext(this.app, vueInstance)
+        }
+        return vueInstance.mount(container) as ModalProgrammaticInstance
+    }
+}
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Modal)
+        registerComponentProgrammatic(Vue, 'modal', new ModalProgrammatic(Vue))
+    }
+}
+
+export default Plugin
+
+export {
+    ModalProgrammatic,
+    Modal as BModal
+}

package/src/components/navbar/NavBar.spec.ts

@@ -0,0 +1,78 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbar from '@components/navbar/Navbar.vue'
+
+describe('BNavbar', () => {
+    let wrapper: VueWrapper<InstanceType<typeof BNavbar>>
+    beforeEach(() => {
+        wrapper = mount(BNavbar)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BNavbar')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should have a nav tag', () => {
+        expect(wrapper.find('nav').exists()).toBeTruthy()
+    })
+
+    it('should emmit the sync event when the burger menu was clicked', async () => {
+        const anchorTag = wrapper.find('.navbar-burger')
+        await anchorTag.trigger('click')
+        const valueEmitted = wrapper.emitted()['update:modelValue'][0]
+        expect(valueEmitted).toContainEqual(true)
+        expect(wrapper.vm.isOpened).toBe(true)
+    })
+
+    it('should have the is-active class when we set the active prop manually', async () => {
+        const navBar = mount(BNavbar)
+        await navBar.setProps({ modelValue: true })
+        const menuContainer = navBar.find('.navbar-menu')
+        expect(menuContainer.classes('is-active')).toBe(true)
+    })
+
+    it('should wrap the slots into a wrapper when we set the wrapperClass prop', () => {
+        const navBar = mount(BNavbar, {
+            props: {
+                wrapperClass: 'container'
+            }
+        })
+
+        expect(navBar.find('.container').exists()).toBe(true)
+    })
+
+    it('manage closing the menu as expected', async () => {
+        wrapper.vm.emitUpdateParentEvent = vi.fn()
+
+        await wrapper.setProps({
+            modelValue: true,
+            closeOnClick: false
+        })
+        wrapper.vm.closeMenu()
+
+        await wrapper.setProps({
+            modelValue: true,
+            closeOnClick: true
+        })
+        wrapper.vm.closeMenu()
+
+        expect(wrapper.vm.internalIsActive).toBeFalsy()
+        expect(wrapper.vm.emitUpdateParentEvent).toHaveBeenCalledTimes(1)
+    })
+
+    it('set body classes as expected', async () => {
+        wrapper.vm.setBodyClass = vi.fn(() => wrapper.vm.setBodyClass)
+
+        await wrapper.setProps({ fixedTop: true })
+        expect(wrapper.vm.setBodyClass).toHaveBeenCalled()
+
+        await wrapper.setProps({ fixedTop: false, fixedBottom: true })
+        expect(wrapper.vm.setBodyClass).toHaveBeenCalled()
+    })
+})

package/src/components/navbar/NavBarBurger.spec.ts

@@ -0,0 +1,30 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { shallowMount, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarBurger from '@components/navbar/NavbarBurger.vue'
+
+describe('BNavbarBurger', () => {
+    let wrapper: VueWrapper<InstanceType<typeof BNavbarBurger>>
+    beforeEach(() => {
+        wrapper = shallowMount(BNavbarBurger)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('NavbarBurger')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should be an anchor tag', () => {
+        expect(wrapper.find('a.navbar-burger').exists()).toBeTruthy()
+    })
+
+    it('should have the is-active class when the prop isOpened is true', async () => {
+        const burgerWrapper = mount(BNavbarBurger)
+        await burgerWrapper.setProps({ isOpened: true })
+        expect(burgerWrapper.classes('is-active')).toBe(true)
+    })
+})

package/src/components/navbar/NavBarItem.spec.ts

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
+import { mount, shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarItem from '@components/navbar/NavbarItem.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BNavbarItem>>
+
+const stubBNavBar = defineComponent({
+    data() {
+        return {
+            _isNavBar: true
+        }
+    },
+    methods: {
+        closeMenu: vi.fn()
+    },
+    template: `
+        <div>
+            <slot />
+        </div>`
+})
+
+describe('BNavbarItem', () => {
+    const tag = 'div'
+    beforeEach(() => {
+        wrapper = shallowMount(BNavbarItem)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BNavbarItem')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('correctly renders the provided tag', async () => {
+        await wrapper.setProps({ tag })
+        expect(wrapper.find(tag).exists()).toBeTruthy()
+    })
+
+    it('emit event from tag and out', async () => {
+        const testStub = vi.fn()
+
+        const emitWrap = shallowMount(BNavbarItem, {
+            props: {
+                onTest_event: testStub
+            },
+            slots: {
+                default: '<div class="test_inner"/>'
+            }
+        })
+
+        const inner = emitWrap.find('div.test_inner')
+        expect(inner).toBeTruthy()
+
+        await inner.trigger('test_event')
+        expect(testStub).toHaveBeenCalled()
+    })
+
+    it('close on escape', () => {
+        wrapper = mount(stubBNavBar, {
+            slots: {
+                default: BNavbarItem
+            }
+        }).findComponent(BNavbarItem)
+        stubBNavBar.methods!.closeMenu.mockClear()
+        const event = new KeyboardEvent('keyup', { key: 'Escape' })
+        wrapper.vm.keyPress({})
+        wrapper.vm.keyPress(event)
+        expect(stubBNavBar.methods!.closeMenu).toHaveBeenCalledTimes(1)
+        stubBNavBar.methods!.closeMenu.mockClear()
+    })
+
+    it('manage click as expected', () => {
+        wrapper = mount(stubBNavBar, {
+            slots: {
+                default: BNavbarItem
+            }
+        }).findComponent(BNavbarItem)
+        stubBNavBar.methods!.closeMenu.mockClear()
+        const event = new MouseEvent('click')
+        wrapper.vm.handleClickEvent({
+            ...event,
+            target: { localName: 'a' }
+        })
+        expect(stubBNavBar.methods!.closeMenu).toHaveBeenCalledTimes(1)
+        stubBNavBar.methods!.closeMenu.mockClear()
+    })
+})

package/src/components/navbar/Navbar.vue

@@ -0,0 +1,274 @@
+<script lang="ts">
+import {
+    defineComponent,
+    h as createElement,
+    resolveComponent,
+    resolveDirective,
+    withDirectives
+} from 'vue'
+import type { PropType, StyleValue, VNode } from 'vue'
+
+import NavbarBurger from './NavbarBurger.vue'
+import clickOutside from '../../directives/clickOutside'
+import type { VueClassAttribute } from '../../utils/config'
+
+const FIXED_TOP_CLASS = 'is-fixed-top'
+const BODY_FIXED_TOP_CLASS = 'has-navbar-fixed-top'
+const BODY_SPACED_FIXED_TOP_CLASS = 'has-spaced-navbar-fixed-top'
+const FIXED_BOTTOM_CLASS = 'is-fixed-bottom'
+const BODY_FIXED_BOTTOM_CLASS = 'has-navbar-fixed-bottom'
+const BODY_SPACED_FIXED_BOTTOM_CLASS = 'has-spaced-navbar-fixed-bottom'
+const BODY_CENTERED_CLASS = 'has-navbar-centered'
+
+const isFilled = (str?: StyleValue) => !!str
+
+export default defineComponent({
+    name: 'BNavbar',
+    components: {
+        NavbarBurger
+    },
+    directives: {
+        clickOutside
+    },
+    props: {
+        type: [String, Object] as PropType<VueClassAttribute>,
+        transparent: {
+            type: Boolean,
+            default: false
+        },
+        fixedTop: {
+            type: Boolean,
+            default: false
+        },
+        fixedBottom: {
+            type: Boolean,
+            default: false
+        },
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        centered: {
+            type: Boolean,
+            default: false
+        },
+        wrapperClass: {
+            type: [String, Array, Object] as PropType<StyleValue>
+        },
+        closeOnClick: {
+            type: Boolean,
+            default: true
+        },
+        mobileBurger: {
+            type: Boolean,
+            default: true
+        },
+        spaced: Boolean,
+        shadow: Boolean
+    },
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        'update:modelValue': (_value: boolean) => true
+    },
+    data() {
+        return {
+            internalIsActive: this.modelValue,
+            _isNavBar: true // Used internally by NavbarItem
+        }
+    },
+    computed: {
+        isOpened() {
+            return this.internalIsActive
+        },
+        computedClasses() {
+            return [
+                this.type,
+                {
+                    [FIXED_TOP_CLASS]: this.fixedTop,
+                    [FIXED_BOTTOM_CLASS]: this.fixedBottom,
+                    [BODY_CENTERED_CLASS]: this.centered,
+                    'is-spaced': this.spaced,
+                    'has-shadow': this.shadow,
+                    'is-transparent': this.transparent
+                }
+            ]
+        }
+    },
+    watch: {
+        modelValue: {
+            handler(active) {
+                this.internalIsActive = active
+            },
+            immediate: true
+        },
+        fixedTop(isSet) {
+            // toggle body class only on update to handle multiple navbar
+            this.setBodyFixedTopClass(isSet)
+        },
+        bottomTop(isSet) {
+            // toggle body class only on update to handle multiple navbar
+            this.setBodyFixedBottomClass(isSet)
+        }
+    },
+    methods: {
+        toggleActive() {
+            this.internalIsActive = !this.internalIsActive
+            this.emitUpdateParentEvent()
+        },
+        closeMenu() {
+            if (this.closeOnClick && this.internalIsActive) {
+                this.internalIsActive = false
+                this.emitUpdateParentEvent()
+            }
+        },
+        emitUpdateParentEvent() {
+            this.$emit('update:modelValue', this.internalIsActive)
+        },
+        setBodyClass(className: string) {
+            if (typeof window !== 'undefined') {
+                document.body.classList.add(className)
+            }
+        },
+        removeBodyClass(className: string) {
+            if (typeof window !== 'undefined') {
+                document.body.classList.remove(className)
+            }
+        },
+        checkIfFixedPropertiesAreColliding() {
+            const areColliding = this.fixedTop && this.fixedBottom
+            if (areColliding) {
+                throw new Error('You should choose if the BNavbar is fixed bottom or fixed top, but not both')
+            }
+        },
+        genNavbar() {
+            const navBarSlots = [
+                this.genNavbarBrandNode(),
+                this.genNavbarSlotsNode()
+            ]
+
+            if (!isFilled(this.wrapperClass)) {
+                return this.genNavbarSlots(navBarSlots)
+            }
+
+            // It wraps the slots into a div with the provided wrapperClass prop
+            const navWrapper = createElement(
+                'div',
+                { class: this.wrapperClass },
+                navBarSlots
+            )
+
+            return this.genNavbarSlots([navWrapper])
+        },
+        genNavbarSlots(slots: VNode[]) {
+            const vnode = createElement(
+                'nav',
+                {
+                    class: ['navbar', this.computedClasses],
+                    role: 'navigation',
+                    'aria-label': 'main navigation'
+                },
+                slots
+            )
+            return withDirectives(vnode, [
+                [resolveDirective('click-outside'), this.closeMenu]
+            ])
+        },
+        genNavbarBrandNode() {
+            const children = this.$slots.brand != null
+                ? [this.$slots.brand(), this.genBurgerNode()]
+                : this.genBurgerNode()
+            return createElement(
+                'div',
+                { class: 'navbar-brand' },
+                children
+            )
+        },
+        genBurgerNode() {
+            if (this.mobileBurger) {
+                const defaultBurgerNode = createElement(
+                    resolveComponent('navbar-burger'),
+                    {
+                        isOpened: this.isOpened,
+                        onClick: this.toggleActive,
+                        onKeyup: (event: KeyboardEvent) => {
+                            if (event.keyCode !== 13) return
+                            this.toggleActive()
+                        }
+                    }
+                )
+
+                const hasBurgerSlot = !!this.$slots.burger
+                return hasBurgerSlot
+                    ? this.$slots.burger!({
+                        isOpened: this.isOpened,
+                        toggleActive: this.toggleActive
+                    })
+                    : defaultBurgerNode
+            }
+        },
+        genNavbarSlotsNode() {
+            return createElement(
+                'div',
+                { class: ['navbar-menu', { 'is-active': this.isOpened }] },
+                [
+                    this.genMenuPosition('start'),
+                    this.genMenuPosition('end')
+                ]
+            )
+        },
+        genMenuPosition(positionName: 'start' | 'end') {
+            return createElement(
+                'div',
+                { class: `navbar-${positionName}` },
+                this.$slots[positionName] != null
+                    ? this.$slots[positionName]!()
+                    : []
+            )
+        },
+        setBodyFixedTopClass(isSet: boolean) {
+            this.checkIfFixedPropertiesAreColliding()
+            if (isSet) {
+                // TODO Apply only one of the classes once PR is merged in Bulma:
+                // https://github.com/jgthms/bulma/pull/2737
+                this.setBodyClass(BODY_FIXED_TOP_CLASS)
+                this.spaced && this.setBodyClass(BODY_SPACED_FIXED_TOP_CLASS)
+            } else {
+                this.removeBodyClass(BODY_FIXED_TOP_CLASS)
+                this.removeBodyClass(BODY_SPACED_FIXED_TOP_CLASS)
+            }
+        },
+        setBodyFixedBottomClass(isSet: boolean) {
+            this.checkIfFixedPropertiesAreColliding()
+            if (isSet) {
+                // TODO Apply only one of the classes once PR is merged in Bulma:
+                // https://github.com/jgthms/bulma/pull/2737
+                this.setBodyClass(BODY_FIXED_BOTTOM_CLASS)
+                this.spaced && this.setBodyClass(BODY_SPACED_FIXED_BOTTOM_CLASS)
+            } else {
+                this.removeBodyClass(BODY_FIXED_BOTTOM_CLASS)
+                this.removeBodyClass(BODY_SPACED_FIXED_BOTTOM_CLASS)
+            }
+        }
+    },
+    beforeMount() {
+        this.fixedTop && this.setBodyFixedTopClass(true)
+        this.fixedBottom && this.setBodyFixedBottomClass(true)
+    },
+    beforeUnmount() {
+        if (this.fixedTop) {
+            const className = this.spaced
+                ? BODY_SPACED_FIXED_TOP_CLASS
+                : BODY_FIXED_TOP_CLASS
+            this.removeBodyClass(className)
+        } else if (this.fixedBottom) {
+            const className = this.spaced
+                ? BODY_SPACED_FIXED_BOTTOM_CLASS
+                : BODY_FIXED_BOTTOM_CLASS
+            this.removeBodyClass(className)
+        }
+    },
+    render() {
+        return this.genNavbar()
+    }
+})
+</script>

package/src/components/navbar/NavbarBurger.vue

@@ -0,0 +1,29 @@
+<template>
+    <a
+        role="button"
+        class="navbar-burger burger"
+        :class="{ 'is-active': isOpened }"
+        aria-label="menu"
+        :aria-expanded="isOpened || undefined"
+        v-bind="$attrs"
+        tabindex="0"
+    >
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+    </a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'NavbarBurger',
+    props: {
+        isOpened: {
+            type: Boolean,
+            default: false
+        }
+    }
+})
+</script>

package/src/components/navbar/NavbarDropdown.spec.ts

@@ -0,0 +1,84 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarDropdown from '@components/navbar/NavbarDropdown.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BNavbarDropdown>>
+
+describe('BNavbarDropdown', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BNavbarDropdown)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BNavbarDropdown')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('sets newActive when active prop is changed', async () => {
+        await wrapper.setProps({ active: true })
+        expect(wrapper.vm.newActive).toBeTruthy()
+
+        await wrapper.setProps({ active: false })
+        expect(wrapper.vm.newActive).toBeFalsy()
+    })
+
+    it('sets newActive when menu is shown/closed', () => {
+        wrapper.vm.showMenu()
+        expect(wrapper.vm.newActive).toBeTruthy()
+
+        wrapper.vm.closeMenu()
+        expect(wrapper.vm.newActive).toBeFalsy()
+    })
+
+    describe('with fallthrough attributes', () => {
+        const attrs = {
+            class: 'fallthrough-class',
+            style: 'font-size: 2rem;',
+            id: 'fallthrough-id'
+        }
+
+        it('should apply class, style, and id to the root <div> element if compatFallthrough is true (default)', () => {
+            const wrapper = shallowMount(BNavbarDropdown, {
+                attrs,
+                props: {
+                    tag: 'a'
+                }
+            })
+
+            const root = wrapper.find('div.navbar-item')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const tag = wrapper.find('a.navbar-link')
+            expect(tag.classes(attrs.class)).toBe(false)
+            expect(tag.attributes('style')).toBeUndefined()
+            expect(tag.attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style, and id to the underlying tag if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BNavbarDropdown, {
+                attrs,
+                props: {
+                    compatFallthrough: false,
+                    tag: 'a'
+                }
+            })
+
+            const root = wrapper.find('div.navbar-item')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const tag = wrapper.find('a.navbar-link')
+            expect(tag.classes(attrs.class)).toBe(true)
+            expect(tag.attributes('style')).toBe(attrs.style)
+            expect(tag.attributes('id')).toBe(attrs.id)
+        })
+    })
+})