buefy 1.0.0 → 1.0.2

package/src/components/navbar/NavbarDropdown.vue

@@ -0,0 +1,115 @@
+<template>
+    <div
+        class="navbar-item has-dropdown"
+        :class="{
+            'is-hoverable': isHoverable,
+            'is-active': newActive
+        }"
+        @mouseenter="checkHoverable"
+        v-click-outside="closeMenu"
+        v-bind="rootAttrs"
+    >
+        <component
+            :is="tag"
+            class="navbar-link"
+            :class="{
+                'is-arrowless': arrowless,
+                'is-active': newActive && collapsible
+            }"
+            v-bind="fallthroughAttrs"
+            aria-haspopup="true"
+            @click.prevent="toggleMenu"
+            @keyup.enter="toggleMenu"
+            tabindex="0"
+        >
+            <template v-if="label">
+                {{ label }}
+            </template>
+            <slot v-else name="label" />
+        </component>
+        <div
+            class="navbar-dropdown"
+            :class="{
+                'is-right': right,
+                'is-boxed': boxed,
+                'is-hidden-touch': collapsible && !newActive
+            }"
+        >
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import clickOutside from '../../directives/clickOutside'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
+
+export default defineComponent({
+    name: 'BNavbarDropdown',
+    directives: {
+        clickOutside
+    },
+    mixins: [CompatFallthroughMixin],
+    props: {
+        label: String,
+        hoverable: Boolean,
+        active: Boolean,
+        right: Boolean,
+        arrowless: Boolean,
+        boxed: Boolean,
+        closeOnClick: {
+            type: Boolean,
+            default: true
+        },
+        collapsible: Boolean,
+        tag: {
+            type: [String, Object],
+            default: 'a'
+        }
+    },
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        'active-change': (_active: boolean) => true
+    },
+    data() {
+        return {
+            newActive: this.active,
+            isHoverable: this.hoverable,
+            _isNavbarDropdown: true // Used internally by NavbarItem
+        }
+    },
+    watch: {
+        active(value) {
+            this.newActive = value
+        },
+
+        newActive(value) {
+            this.$emit('active-change', value)
+        }
+    },
+    methods: {
+        toggleMenu() {
+            this.newActive = !this.newActive
+        },
+        showMenu() {
+            this.newActive = true
+        },
+        /*
+        * See naming convetion of navbaritem
+        */
+        closeMenu() {
+            this.newActive = !this.closeOnClick
+            if (this.hoverable && this.closeOnClick) {
+                this.isHoverable = false
+            }
+        },
+        checkHoverable() {
+            if (this.hoverable) {
+                this.isHoverable = true
+            }
+        }
+    }
+})
+</script>

package/src/components/navbar/NavbarItem.vue

@@ -0,0 +1,97 @@
+<template>
+    <component
+        :is="tag"
+        class="navbar-item"
+        :class="{
+            'is-active': active
+        }"
+        v-bind="$attrs"
+    >
+        <slot />
+    </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+const clickableWhiteList = ['div', 'span', 'input']
+
+/* eslint-disable @typescript-eslint/ban-types */
+type NavbarItemParent = ComponentPublicInstance<
+    {}, // P(rops)
+    {}, // B (raw bindings)
+    {
+        // to accomodate [`_is${item}`] access
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        [key: string]: any
+    }, // D(ata)
+    {}, // C(omputed)
+    {
+        closeMenu: () => void
+    } // M(ethods)
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+export default defineComponent({
+    name: 'BNavbarItem',
+    inheritAttrs: false,
+    props: {
+        tag: {
+            type: [String, Object],
+            default: 'a'
+        },
+        active: Boolean
+    },
+    methods: {
+        /*
+         * Keypress event that is bound to the document
+         */
+        keyPress({ key }: { key?: KeyboardEvent['key'] }) {
+            if (key === 'Escape' || key === 'Esc') {
+                this.closeMenuRecursive(this, ['NavBar'])
+            }
+        },
+        /*
+         * Close parent if clicked outside.
+         */
+        handleClickEvent(event: { target: { localName: string } }) {
+            const isOnWhiteList = clickableWhiteList.some((item) => item === event.target.localName)
+            if (!isOnWhiteList) {
+                const parent = this.closeMenuRecursive(this, ['NavbarDropdown', 'NavBar'])
+                if (parent && parent.$data._isNavbarDropdown) this.closeMenuRecursive(parent, ['NavBar'])
+            }
+        },
+        /*
+         * Close parent recursively
+         */
+        closeMenuRecursive(
+            current: ComponentPublicInstance,
+            targetComponents: string[]
+        ): NavbarItemParent | null {
+            const parent = current.$parent as NavbarItemParent | null
+            if (!parent) return null
+            const foundItem = targetComponents.reduce((acc, item) => {
+                if (parent.$data[`_is${item}`]) {
+                    parent.closeMenu()
+                    return parent
+                }
+                return acc
+            }, null as NavbarItemParent | null)
+            return foundItem || this.closeMenuRecursive(parent, targetComponents)
+        }
+    },
+    mounted() {
+        if (typeof window !== 'undefined') {
+            this.$el.addEventListener('click', this.handleClickEvent)
+            document.addEventListener('keyup', this.keyPress)
+        }
+    },
+    beforeUnmount() {
+        if (typeof window !== 'undefined') {
+            this.$el.removeEventListener('click', this.handleClickEvent)
+            document.removeEventListener('keyup', this.keyPress)
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNavbar > render correctly 1`] = `
+"<nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand"><a role="button" class="navbar-burger burger" aria-label="menu" tabindex="0"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div>
+  <div class="navbar-menu">
+    <div class="navbar-start"></div>
+    <div class="navbar-end"></div>
+  </div>
+</nav>"
+`;

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNavbarBurger > render correctly 1`] = `"<a role="button" class="navbar-burger burger" aria-label="menu" tabindex="0"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a>"`;

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

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

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNavbarDropdown > render correctly 1`] = `
+"<div class="navbar-item has-dropdown"><a class="navbar-link" aria-haspopup="true" tabindex="0"></a>
+  <div class="navbar-dropdown"></div>
+</div>"
+`;

package/src/components/navbar/index.ts

@@ -0,0 +1,22 @@
+import type { App } from 'vue'
+import Navbar from './Navbar.vue'
+import NavbarItem from './NavbarItem.vue'
+import NavbarDropdown from './NavbarDropdown.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Navbar)
+        registerComponent(Vue, NavbarItem)
+        registerComponent(Vue, NavbarDropdown)
+    }
+}
+
+export default Plugin
+
+export {
+    Navbar as BNavbar,
+    NavbarItem as BNavbarItem,
+    NavbarDropdown as BNavbarDropdown
+}

package/src/components/notification/Notification.spec.ts

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

package/src/components/notification/Notification.vue

@@ -0,0 +1,77 @@
+<template>
+    <transition :name="animation">
+        <article
+            v-show="isActive"
+            class="notification"
+            :class="[type, position]"
+            @click="click"
+        >
+            <button
+                v-if="closable"
+                class="delete"
+                type="button"
+                @click="close"
+                :aria-label="ariaCloseLabel"
+            />
+            <div class="media" v-if="$slots.default || message">
+                <div v-if="computedIcon && hasIcon" class="media-left">
+                    <b-icon
+                        :icon="computedIcon"
+                        :pack="iconPack"
+                        :size="newIconSize"
+                        both
+                        aria-hidden
+                    />
+                </div>
+                <div class="media-content">
+                    <template v-if="$slots.default">
+                        <slot />
+                    </template>
+                    <template v-else>
+                        <!-- eslint-disable-next-line vue/no-v-html -->
+                        <p class="text" v-html="message" />
+                    </template>
+                </div>
+            </div>
+            <b-progress
+                v-if="progressBar"
+                class="auto-close-progress"
+                :value="remainingTime - 1"
+                :max="duration / 1000 - 1"
+                :type="type"
+                :rounded="false"
+            />
+        </article>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BIcon from '../icon/Icon.vue'
+import BProgress from '../progress/Progress.vue'
+import type { ExtractComponentProps } from '../../utils/helpers'
+import MessageMixin from '../../utils/MessageMixin'
+
+const Notification = defineComponent({
+    name: 'BNotification',
+    components: {
+        BIcon,
+        // directly registers Progress
+        // in case Notification is programmatically opened
+        BProgress
+    },
+    mixins: [MessageMixin],
+    props: {
+        position: String,
+        ariaCloseLabel: String,
+        animation: {
+            type: String,
+            default: 'fade'
+        }
+    }
+})
+
+export type NotificationProps = ExtractComponentProps<typeof Notification>
+
+export default Notification
+</script>

package/src/components/notification/NotificationNotice.vue

@@ -0,0 +1,76 @@
+<template>
+    <b-notification
+        v-if="$slots.default != null"
+        ref="notification"
+        :position="position"
+        :model-value="isActive"
+        :type="type"
+        :message="message"
+        :duration="duration"
+        v-bind="$attrs"
+        @click="click"
+        @close="close"
+        @mouseenter="pause"
+        @mouseleave="removePause"
+    >
+        <slot />
+    </b-notification>
+    <b-notification
+        v-else
+        ref="notification"
+        :position="position"
+        :model-value="isActive"
+        :type="type"
+        :message="message"
+        :duration="duration"
+        v-bind="$attrs"
+        @click="click"
+        @close="close"
+        @mouseenter="pause"
+        @mouseleave="removePause"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import config from '../../utils/config'
+import { removeElement } from '../../utils/helpers'
+import type { ExtractComponentProps } from '../../utils/helpers'
+import NoticeMixin from '../../utils/NoticeMixin'
+import BNotification from './Notification.vue'
+
+type NotificationInstance = InstanceType<typeof BNotification>
+
+const NotificationNotice = defineComponent({
+    name: 'BNotificationNotice',
+    components: { BNotification },
+    mixins: [NoticeMixin],
+    data() {
+        return {
+            newDuration: this.duration || config.defaultNotificationDuration
+        }
+    },
+    emits: {
+        close: () => true
+    },
+    methods: {
+        close() {
+            if (!this.isPaused) {
+                clearTimeout(this.timer);
+                (this.$refs.notification as NotificationInstance).isActive = false
+                this.$emit('close')
+
+                // Timeout for the animation complete before destroying
+                setTimeout(() => {
+                    removeElement(this.$el)
+                }, 150)
+            }
+        }
+    }
+})
+
+export type NotificationNoticeProps = ExtractComponentProps<typeof NotificationNotice>
+
+export default NotificationNotice
+</script>

package/src/components/notification/__snapshots__/Notification.spec.ts.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNotification > render correctly 1`] = `
+"<transition-stub name="fade" appear="false" persisted="true" css="true">
+  <article class="notification"><button class="delete" type="button"></button>
+    <!--v-if-->
+    <!--v-if-->
+  </article>
+</transition-stub>"
+`;

package/src/components/notification/index.ts

@@ -0,0 +1,121 @@
+import { createApp, h as createElement } from 'vue'
+import type { App, ComponentPublicInstance, VNode } from 'vue'
+
+import Notification from './Notification.vue'
+import type { NotificationProps } from './Notification.vue'
+import NotificationNotice from './NotificationNotice.vue'
+import type { NotificationNoticeProps } from './NotificationNotice.vue'
+
+import config from '../../utils/config'
+import { copyAppContext, getComponentFromVNode } from '../../utils/helpers'
+import { registerComponent, registerComponentProgrammatic } from '../../utils/plugins'
+
+export type NotificationOpenParams =
+    & Omit<NotificationNoticeProps, 'message'>
+    & Omit<
+        NotificationProps,
+        'duration' | 'message' | 'modelValue' | 'position' | 'type'>
+    & {
+        message?: string | VNode | (string | VNode)[],
+        onClose?: () => void
+    }
+
+// Minimal definition of a programmatically opened notification.
+//
+// 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 NotificationProgrammaticInstance = ComponentPublicInstance<
+    {}, // P
+    {}, // B
+    {}, // D
+    {}, // C
+    { close: () => void } // M
+>
+
+class NotificationProgrammatic {
+    private app: App | undefined
+
+    constructor(app?: App) {
+        this.app = app // may be undefined in the testing environment
+    }
+
+    open(params: NotificationOpenParams | string) {
+        if (typeof params === 'string') {
+            params = {
+                message: params
+            }
+        }
+
+        let slot: NotificationOpenParams['message']
+        let { message, ...restParams } = params
+        if (typeof message !== 'string') {
+            slot = message
+            message = undefined
+        }
+        const propsData = {
+            position: config.defaultNotificationPosition || 'is-top-right',
+            message,
+            ...restParams
+        }
+        const container = document.createElement('div')
+        // Vue 3 requires a new app to mount another component
+        const vueInstance = createApp({
+            data() {
+                return {
+                    noticeVNode: null
+                }
+            },
+            methods: {
+                close() {
+                    const notice = getComponentFromVNode(this.noticeVNode)
+                    if (notice) {
+                        (notice as InstanceType<typeof NotificationNotice>).close()
+                    }
+                }
+            },
+            render() {
+                this.noticeVNode = createElement(
+                    NotificationNotice,
+                    {
+                        ...propsData,
+                        onClose: () => {
+                            if (propsData.onClose != null) {
+                                propsData.onClose()
+                            }
+                            // waits for a while in favor of animation
+                            setTimeout(() => {
+                                vueInstance.unmount()
+                            }, 150)
+                        }
+                    },
+                    slot != null ? { default: () => slot } : undefined
+                )
+                return this.noticeVNode
+            }
+        })
+        if (this.app) {
+            copyAppContext(this.app, vueInstance)
+        } else {
+            // workaround for an error that
+            // $buefy.globalNoticeInterval is not defined
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            vueInstance.config.globalProperties.$buefy = {} as any
+        }
+        return vueInstance.mount(container) as NotificationProgrammaticInstance
+    }
+}
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Notification)
+        registerComponentProgrammatic(Vue, 'notification', new NotificationProgrammatic(Vue))
+    }
+}
+
+export default Plugin
+
+export {
+    NotificationProgrammatic,
+    Notification as BNotification
+}