buefy 1.0.0 → 1.0.2

package/src/components/loading/index.ts

@@ -0,0 +1,91 @@
+import { createApp, h as createElement } from 'vue'
+import type { App, ComponentPublicInstance } from 'vue'
+
+import Loading from './Loading.vue'
+import type { LoadingProps } from './Loading.vue'
+
+import { copyAppContext, getComponentFromVNode } from '../../utils/helpers'
+import { registerComponent, registerComponentProgrammatic } from '../../utils/plugins'
+
+export type LoadingOpenParams = Omit<LoadingProps, 'programmatic'>
+
+// Minimal definition of a programmatically opened Loading.
+//
+// ESLint does not like `{}` as a type but allowed here to make them look
+// similar to Vue's definition: https://github.com/vuejs/core/blob/fbc0c42bcf6dea5a6ae664223fa19d4375ca39f0/packages/runtime-core/src/componentPublicInstance.ts#L290-L305.
+/* eslint-disable @typescript-eslint/ban-types */
+type LoadingProgrammaticInstance = ComponentPublicInstance<
+    {}, // P
+    {}, // B
+    {}, // D
+    {}, // C
+    { close: () => void } // M
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+class LoadingProgrammatic {
+    private app: App | undefined
+
+    constructor(app?: App) {
+        this.app = app // may be undefined in the testing environment
+    }
+
+    open(params: LoadingOpenParams) {
+        const propsData = params
+        const container = document.createElement('div')
+        // Vue 3 requires a new app to mount another component
+        const vueInstance = createApp({
+            data() {
+                return {
+                    loadingVNode: null
+                }
+            },
+            methods: {
+                close() {
+                    // TODO: too much dependence on Vue's internal structure?
+                    const loading = getComponentFromVNode(this.loadingVNode)
+                    if (loading) {
+                        (loading as LoadingProgrammaticInstance).close()
+                    }
+                }
+            },
+            render() {
+                this.loadingVNode = createElement(
+                    Loading,
+                    {
+                        ...propsData,
+                        programmatic: true,
+                        onClose(...args) {
+                            if (propsData.onClose) {
+                                propsData.onClose(...args)
+                            }
+                            // timeout for the animation complete before destroying
+                            setTimeout(() => {
+                                vueInstance.unmount()
+                            }, 150)
+                        }
+                    }
+                )
+                return this.loadingVNode
+            }
+        })
+        if (this.app) {
+            copyAppContext(this.app, vueInstance)
+        }
+        return vueInstance.mount(container) as LoadingProgrammaticInstance
+    }
+}
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Loading)
+        registerComponentProgrammatic(Vue, 'loading', new LoadingProgrammatic(Vue))
+    }
+}
+
+export default Plugin
+
+export {
+    LoadingProgrammatic,
+    Loading as BLoading
+}

package/src/components/menu/Menu.spec.ts

@@ -0,0 +1,21 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BMenu from '@components/menu/Menu.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BMenu>>
+
+describe('BMenu', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BMenu)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BMenu')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+})

package/src/components/menu/Menu.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="menu">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import MenuItemContainerMixin from './MenuItemContainerMixin'
+
+export default defineComponent({
+    name: 'BMenu',
+    mixins: [MenuItemContainerMixin],
+    props: {
+        accordion: {
+            type: Boolean,
+            default: true
+        },
+        activable: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            _isMenu: true // Used by MenuItem
+        }
+    }
+})
+</script>

package/src/components/menu/MenuItem.spec.ts

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BMenuItem from '@components/menu/MenuItem.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BMenuItem>>
+
+describe('BMenuItem', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BMenuItem)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BMenuItem')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('sets newActive when modelValue is changed', async () => {
+        await wrapper.setProps({ modelValue: true })
+        expect(wrapper.vm.newActive).toBeTruthy()
+    })
+
+    it('sets newExpanded when expanded is changed', async () => {
+        await wrapper.setProps({ expanded: true })
+        expect(wrapper.vm.newExpanded).toBeTruthy()
+    })
+
+    it('manage onClick', async () => {
+        wrapper.vm.reset = vi.fn()
+
+        await wrapper.setProps({ disabled: true })
+        wrapper.vm.onClick()
+
+        await wrapper.setProps({ disabled: false })
+        wrapper.vm.onClick()
+
+        expect(wrapper.vm.reset).toHaveBeenCalledTimes(1)
+        expect(wrapper.vm.newExpanded).toBeTruthy()
+        expect(wrapper.emitted()['update:expanded'][0]).toContainEqual(true)
+    })
+
+    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 <li> element, if compatFallthrough is true (default)', () => {
+            const wrapper = shallowMount(BMenuItem, {
+                attrs,
+                props: {
+                    tag: 'a'
+                }
+            })
+
+            const root = wrapper.find('li')
+            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')
+            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(BMenuItem, {
+                attrs,
+                props: {
+                    tag: 'a',
+                    compatFallthrough: false
+                }
+            })
+
+            const root = wrapper.find('li')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const tag = wrapper.find('a')
+            expect(tag.classes(attrs.class)).toBe(true)
+            expect(tag.attributes('style')).toBe(attrs.style)
+            expect(tag.attributes('id')).toBe(attrs.id)
+        })
+    })
+})

package/src/components/menu/MenuItem.vue

@@ -0,0 +1,168 @@
+<template>
+    <li :role="ariaRoleMenu" v-bind="rootAttrs">
+        <component
+            :is="tag"
+            v-bind="fallthroughAttrs"
+            :class="{
+                'is-active': newActive,
+                'is-expanded': newExpanded,
+                'is-disabled': disabled,
+                'icon-text': icon,
+            }"
+            @click="onClick()"
+        >
+            <b-icon
+                v-if="icon"
+                :icon="icon"
+                :pack="iconPack"
+                :size="size"
+            />
+            <span v-if="label"> {{ label }} </span>
+            <slot
+                v-else
+                name="label"
+                :expanded="newExpanded"
+                :active="newActive"
+            />
+        </component>
+        <!-- sub menu items -->
+        <template v-if="$slots.default">
+            <transition :name="animation">
+                <ul v-show="newExpanded">
+                    <slot />
+                </ul>
+            </transition>
+        </template>
+    </li>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import BIcon from '../icon/Icon.vue'
+import config from '../../utils/config'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
+import BMenu from './Menu.vue'
+import MenuItemContainerMixin from './MenuItemContainerMixin'
+import type { MenuItemContainer } from './MenuItemContainerMixin'
+
+type MenuInstance = InstanceType<typeof BMenu>
+
+export default defineComponent({
+    name: 'BMenuItem',
+    components: {
+        BIcon
+    },
+    mixins: [CompatFallthroughMixin, MenuItemContainerMixin],
+    inject: {
+        parent: {
+            from: 'BMenuItemContainer',
+            default: null
+        }
+    },
+    // deprecated, to replace with default 'value' in the next breaking change
+    props: {
+        label: String,
+        modelValue: Boolean,
+        expanded: Boolean,
+        disabled: Boolean,
+        iconPack: String,
+        icon: String,
+        animation: {
+            type: String,
+            default: 'slide'
+        },
+        tag: {
+            type: [String, Object],
+            default: 'a',
+            validator: (value) => {
+                return typeof value === 'object' || config.defaultLinkTags.indexOf(value as string) >= 0
+            }
+        },
+        ariaRole: {
+            type: String,
+            default: ''
+        },
+        size: {
+            type: String,
+            default: 'is-small'
+        }
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'update:modelValue': (_isActive: boolean) => true,
+        'update:expanded': (_isExpanded: boolean) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    data() {
+        return {
+            newActive: this.modelValue,
+            newExpanded: this.expanded
+        }
+    },
+    computed: {
+        ariaRoleMenu() {
+            return this.ariaRole === 'menuitem' ? this.ariaRole : undefined
+        }
+    },
+    watch: {
+        modelValue(value) {
+            this.newActive = value
+        },
+        expanded(value) {
+            this.newExpanded = value
+        }
+    },
+    methods: {
+        onClick() {
+            if (this.disabled) return
+            const menu = this.getMenu()
+            this.reset(this.parent as MenuItemContainer, menu)
+            this.newExpanded = this.$props.expanded || !this.newExpanded
+            this.$emit('update:expanded', this.newExpanded)
+            if (menu && menu.activable) {
+                this.newActive = true
+                this.$emit('update:modelValue', this.newActive)
+            }
+        },
+        reset(parent: MenuItemContainer | null, menu: MenuInstance | null) {
+            if (parent == null) {
+                return
+            }
+            parent.menuItems.forEach((item) => {
+                if (item !== this) {
+                    this.reset(item, menu)
+                    if (
+                        !parent.$data._isMenu ||
+                        (parent.$data._isMenu && (parent as MenuInstance).accordion)
+                    ) {
+                        item.newExpanded = false
+                        item.$emit('update:expanded', item.newExpanded)
+                    }
+                    if (menu && menu.activable) {
+                        item.newActive = false
+                        item.$emit('update:modelValue', item.newActive)
+                    }
+                }
+            })
+        },
+        getMenu() {
+            let parent = this.parent as MenuItemContainer
+            while (parent && !parent.$data._isMenu) {
+                parent = parent.parent as MenuItemContainer
+            }
+            return parent as MenuInstance | null
+        }
+    },
+    mounted() {
+        if (this.parent) {
+            (this.parent as MenuItemContainer).appendMenuItem(this)
+        }
+    },
+    beforeUnmount() {
+        if (this.parent) {
+            (this.parent as MenuItemContainer).removeMenuItem(this)
+        }
+    }
+})
+</script>

package/src/components/menu/MenuItemContainerMixin.ts

@@ -0,0 +1,72 @@
+import { defineComponent } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+/* eslint-disable @typescript-eslint/ban-types */
+export type IMenuItem = ComponentPublicInstance<
+    {}, // P(rops)
+    {}, // B (raw bindings)
+    {
+        _isMenu?: boolean,
+        menuItems: IMenuItem[],
+        newExpanded: boolean,
+        newActive: boolean
+    },
+    {}, // C(omputed)
+    {
+        appendMenuItem: (item: IMenuItem) => void,
+        removeMenuItem: (item: IMenuItem) => void
+    }, // M(ethods)
+    {
+        'update:modelValue': (_isActive: boolean) => boolean,
+        'update:expanded': (_isExpanded: boolean) => boolean
+    } // E(mits)
+> & {
+    // injected field
+    parent?: unknown
+}
+
+export type MenuItemContainer = Omit<ComponentPublicInstance<
+    {}, // P(rops)
+    {}, // B (raw bindings)
+    {
+        _isMenu?: boolean,
+        menuItems: IMenuItem[]
+    }, // D(ata)
+    {}, // C(omputed)
+    {
+        appendMenuItem: (item: IMenuItem) => void,
+        removeMenuItem: (item: IMenuItem) => void
+    }, // M(ethods)
+    {} // E(mits). note that this ends up with the following $emit signature:
+       //   $emit(event: string, ...args: any[])
+       // we have to omit $emit to make IMenuItem a subtype of MenuItemContainer
+       // this may not be intuitive, but here contravariance comes into play
+>, '$emit'> & {
+    // injected field
+    parent?: unknown
+}
+/* eslint-enable @typescript-eslint/ban-types */
+
+export default defineComponent({
+    provide() {
+        return {
+            BMenuItemContainer: this
+        }
+    },
+    data() {
+        return {
+            menuItems: [] as IMenuItem[]
+        }
+    },
+    methods: {
+        appendMenuItem(item: IMenuItem) {
+            this.menuItems.push(item)
+        },
+        removeMenuItem(item: IMenuItem) {
+            const index = this.menuItems.indexOf(item)
+            if (index !== -1) {
+                this.menuItems.splice(index, 1)
+            }
+        }
+    }
+})

package/src/components/menu/MenuList.spec.ts

@@ -0,0 +1,35 @@
+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 BMenuList from '@components/menu/MenuList.vue'
+
+const Menu = defineComponent({
+    components: { BMenuList },
+    template: `
+    <div>
+        <b-menu-list label="Test">
+        </b-menu-list>
+    </div>
+    `
+})
+
+let wrapper: VueWrapper<InstanceType<typeof Menu>>
+
+describe('BMenuList', () => {
+    beforeEach(() => {
+        wrapper = mount(Menu)
+    })
+
+    it('is called', () => {
+        expect(wrapper.findAll('.menu-label')[0].text()).toBe('Test')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('slot label', () => {
+        expect(wrapper.findAll('.menu-label')[0].text()).toBe('Test')
+    })
+})

package/src/components/menu/MenuList.vue

@@ -0,0 +1,47 @@
+<template>
+    <p v-if="label || $slots.label" class="menu-label">
+        <template v-if="label">
+            <template v-if="icon">
+                <b-icon
+                    :icon="icon"
+                    :pack="iconPack"
+                    :size="size"
+                />
+                <span>{{ label }}</span>
+            </template>
+            <template v-else>
+                {{ label }}
+            </template>
+        </template>
+        <slot v-else name="label" />
+    </p>
+    <ul class="menu-list" :role="ariaRole === 'menu' ? ariaRole : undefined">
+        <slot />
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import BIcon from '../icon/Icon.vue'
+
+export default defineComponent({
+    name: 'BMenuList',
+    components: {
+        BIcon
+    },
+    props: {
+        label: String,
+        icon: String,
+        iconPack: String,
+        ariaRole: {
+            type: String,
+            default: ''
+        },
+        size: {
+            type: String,
+            default: 'is-small'
+        }
+    }
+})
+</script>

package/src/components/menu/__snapshots__/Menu.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BMenu > render correctly 1`] = `"<div class="menu"></div>"`;

package/src/components/menu/__snapshots__/MenuItem.spec.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BMenuItem > render correctly 1`] = `
+"<li><a class="">
+    <!--v-if-->
+  </a><!-- sub menu items -->
+  <!--v-if-->
+</li>"
+`;

package/src/components/menu/__snapshots__/MenuList.spec.ts.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BMenuList > render correctly 1`] = `
+"<div>
+  <p class="menu-label">Test</p>
+  <ul class="menu-list"></ul>
+</div>"
+`;

package/src/components/menu/index.ts

@@ -0,0 +1,25 @@
+import type { App } from 'vue'
+
+import Menu from './Menu.vue'
+import MenuList from './MenuList.vue'
+import MenuItem from './MenuItem.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Menu)
+        // explicit `name` is needed to avoid name mangling of
+        // Functional Component in production
+        registerComponent(Vue, MenuList, 'BMenuList')
+        registerComponent(Vue, MenuItem)
+    }
+}
+
+export default Plugin
+
+export {
+    Menu as BMenu,
+    MenuList as BMenuList,
+    MenuItem as BMenuItem
+}

package/src/components/message/Message.spec.ts

@@ -0,0 +1,30 @@
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BMessage from '@components/message/Message.vue'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+let wrapper: VueWrapper<InstanceType<typeof BMessage>>
+
+describe('BMessage', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BMessage)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BMessage')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('custom header contains html element', () => {
+        wrapper = shallowMount(BMessage, {
+            slots: {
+                header: 'Custom header with <a>link</a>'
+            }
+        })
+        expect(wrapper.find('a').exists()).toBeTruthy()
+    })
+})