buefy 1.0.0 → 1.0.2

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="b-tabs" :class="mainClasses">
+        <nav
+            class="tabs"
+            :class="navClasses"
+            @keydown="manageTablistKeydown"
+        >
+            <slot name="start" />
+            <ul
+                :aria-orientation="vertical ? 'vertical' : 'horizontal'"
+                role="tablist"
+            >
+                <li
+                    v-for="childItem in items"
+                    :key="childItem.uniqueValue"
+                    v-show="childItem.visible"
+                    :class="[ childItem.headerClass, { 'is-active': childItem.isActive,
+                                                       'is-disabled': childItem.disabled }]"
+                    role="tab"
+                    :aria-controls="`${childItem.uniqueValue}-content`"
+                    :aria-selected="`${childItem.isActive}`"
+                >
+                    <b-slot-component
+                        :ref="`tabLink${childItem.index}`"
+                        v-if="childItem.$slots.header"
+                        :component="childItem"
+                        name="header"
+                        tag="a"
+                        :id="`${childItem.uniqueValue}-label`"
+                        :tabindex="childItem.isActive ? 0 : -1"
+                        @focus="currentFocus = childItem.index"
+                        @click="childClick(childItem)"
+                        @keydown="manageTabKeydown($event, childItem)"
+                    />
+                    <a
+                        :ref="`tabLink${childItem.index}`"
+                        v-else
+                        :id="`${childItem.uniqueValue}-label`"
+                        :tabindex="childItem.isActive ? 0 : -1"
+                        @focus="currentFocus = childItem.index"
+                        @click="childClick(childItem)"
+                        @keydown="manageTabKeydown($event, childItem)"
+                    >
+                        <b-icon
+                            v-if="childItem.icon"
+                            :icon="childItem.icon"
+                            :pack="childItem.iconPack"
+                            :size="size"
+                        />
+                        <span>{{ childItem.label }}</span>
+                    </a>
+                </li>
+            </ul>
+            <slot name="end" />
+        </nav>
+        <section class="tab-content" :class="{'is-transitioning': isTransitioning}">
+            <slot />
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+import BIcon from '../icon/Icon.vue'
+import config from '../../utils/config'
+import TabbedMixin from '../../utils/TabbedMixin'
+import BSlotComponent from '../../utils/SlotComponent'
+import type { TabbedChild } from '../../utils/TabbedTypes'
+
+export default defineComponent({
+    name: 'BTabs',
+    components: {
+        BIcon,
+        BSlotComponent
+    },
+    mixins: [TabbedMixin<TabbedChild>('tab')],
+    props: {
+        expanded: {
+            type: Boolean,
+            default: () => {
+                return config.defaultTabsExpanded
+            }
+        },
+        type: {
+            type: [String, Object],
+            default: () => {
+                return config.defaultTabsType
+            }
+        },
+        animated: {
+            type: Boolean,
+            default: () => {
+                return config.defaultTabsAnimated
+            }
+        },
+        multiline: Boolean
+    },
+    data() {
+        return {
+            currentFocus: null as number | null
+        }
+    },
+    computed: {
+        mainClasses() {
+            return {
+                'is-fullwidth': this.expanded,
+                'is-vertical': this.vertical,
+                'is-multiline': this.multiline,
+                [this.position!]: this.position && this.vertical
+            }
+        },
+        navClasses() {
+            return [
+                this.type,
+                this.size,
+                {
+                    [this.position!]: this.position && !this.vertical,
+                    'is-fullwidth': this.expanded,
+                    'is-toggle': this.type === 'is-toggle-rounded'
+                }
+            ]
+        }
+    },
+    methods: {
+        giveFocusToTab(tab: HTMLElement | ComponentPublicInstance | ComponentPublicInstance[]) {
+            if (Array.isArray(tab)) {
+                // Vue ≥ v3.0 < v3.2.25, refs in v-for are stored as a single object,
+                // but ≥ v3.2.25, refs in v-for are stored in an array (same as Vue 2)
+                tab = tab[0]
+                if (tab == null) {
+                    return
+                }
+            }
+            if (
+                (tab as ComponentPublicInstance).$el &&
+                (tab as ComponentPublicInstance).$el.focus
+            ) {
+                (tab as ComponentPublicInstance).$el.focus()
+            } else if ((tab as HTMLElement).focus) {
+                (tab as HTMLElement).focus()
+            }
+        },
+        manageTablistKeydown(event: KeyboardEvent) {
+            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
+            const { key } = event
+            switch (key) {
+                case this.vertical ? 'ArrowUp' : 'ArrowLeft':
+                case this.vertical ? 'Up' : 'Left': {
+                    let prevIdx = this.getPrevItemIdx(this.currentFocus!, true)
+                    if (prevIdx === null) {
+                        // We try to give focus back to the last visible element
+                        prevIdx = this.getPrevItemIdx(Infinity, true)
+                    }
+                    const prevItem = this.items.find((i) => i.index === prevIdx)
+                    if (
+                        prevItem &&
+                        this.$refs[`tabLink${prevIdx}`] &&
+                        !prevItem.disabled
+                    ) {
+                        this.giveFocusToTab(this.$refs[`tabLink${prevIdx}`] as HTMLElement | ComponentPublicInstance | ComponentPublicInstance[])
+                    }
+                    event.preventDefault()
+                    break
+                }
+                case this.vertical ? 'ArrowDown' : 'ArrowRight':
+                case this.vertical ? 'Down' : 'Right': {
+                    let nextIdx = this.getNextItemIdx(this.currentFocus!, true)
+                    if (nextIdx === null) {
+                        // We try to give focus back to the first visible element
+                        nextIdx = this.getNextItemIdx(-1, true)
+                    }
+                    const nextItem = this.items.find((i) => i.index === nextIdx)
+                    if (
+                        nextItem &&
+                        this.$refs[`tabLink${nextIdx}`] &&
+                        !nextItem.disabled
+                    ) {
+                        this.giveFocusToTab(this.$refs[`tabLink${nextIdx}`] as HTMLElement | ComponentPublicInstance | ComponentPublicInstance[])
+                    }
+                    event.preventDefault()
+                    break
+                }
+            }
+        },
+
+        manageTabKeydown(event: KeyboardEvent, childItem: TabbedChild) {
+            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
+            const { key } = event
+            switch (key) {
+                case ' ':
+                case 'Space':
+                case 'Spacebar':
+                case 'Enter': {
+                    this.childClick(childItem)
+                    event.preventDefault()
+                    break
+                }
+            }
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BTabItem > render correctly 1`] = `
+"<transition-stub persisted="false" css="true">
+  <div class="tab-item" role="tabpanel" id="tab2-content" aria-labelledby="tab2-label" tabindex="-1" style="display: none;"></div>
+</transition-stub>"
+`;

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

@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BTabs > render correctly 1`] = `
+"<div class="b-tabs">
+  <nav class="tabs">
+    <ul aria-orientation="horizontal" role="tablist">
+      <li class="is-active" role="tab" aria-controls="tab1-content" aria-selected="true"><a id="tab1-label" tabindex="0">
+          <!--v-if--><span></span>
+        </a></li>
+      <li class="" role="tab" aria-controls="tab2-content" aria-selected="false" style="display: none;"><a id="tab2-label" tabindex="-1">
+          <!--v-if--><span></span>
+        </a></li>
+    </ul>
+  </nav>
+  <section class="tab-content">
+    <transition-stub persisted="false" css="true">
+      <div class="tab-item" role="tabpanel" id="tab1-content" aria-labelledby="tab1-label" tabindex="0"></div>
+    </transition-stub>
+    <transition-stub persisted="false" css="true">
+      <div class="tab-item" role="tabpanel" id="tab2-content" aria-labelledby="tab2-label" tabindex="-1" style="display: none;"></div>
+    </transition-stub>
+  </section>
+</div>"
+`;
+
+exports[`BTabs > still renders if there is no item 1`] = `
+"<div class="b-tabs">
+  <nav class="tabs">
+    <ul aria-orientation="horizontal" role="tablist"></ul>
+  </nav>
+  <section class="tab-content"></section>
+</div>"
+`;

package/src/components/tabs/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+import Tabs from './Tabs.vue'
+import TabItem from './TabItem.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Tabs)
+        registerComponent(Vue, TabItem)
+    }
+}
+
+export default Plugin
+
+export {
+    Tabs as BTabs,
+    TabItem as BTabItem
+}

package/src/components/tag/Tag.spec.ts

@@ -0,0 +1,32 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { shallowMount, type VueWrapper } from '@vue/test-utils'
+import BTag from '@components/tag/Tag.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BTag>>
+
+describe('BTag', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BTag)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BTag')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('emit close event when closing if not disabled', async () => {
+        await wrapper.setProps({ disabled: false })
+
+        wrapper.vm.close(new Event('test'))
+
+        await wrapper.setProps({ disabled: true })
+        wrapper.vm.close(new Event('test'))
+
+        expect(wrapper.emitted().close).toHaveLength(1)
+    })
+})

package/src/components/tag/Tag.vue

@@ -0,0 +1,132 @@
+<template>
+    <div v-if="attached && closable" class="tags has-addons inline-tags">
+        <span
+            class="tag"
+            :class="[type, size, { 'is-rounded': rounded }]"
+        >
+            <b-icon
+                v-if="icon"
+                :icon="icon"
+                :size="size"
+                :type="iconType"
+                :pack="iconPack"
+            />
+            <span :class="{ 'has-ellipsis': ellipsis }" @click="click">
+                <slot />
+            </span>
+        </span>
+        <a
+            class="tag"
+            role="button"
+            :aria-label="ariaCloseLabel"
+            :tabindex="tabstop ? 0 : undefined"
+            :disabled="disabledOrUndefined"
+            :class="[size,
+                     closeType,
+                     {'is-rounded': rounded},
+                     closeIcon ? 'has-delete-icon' : 'is-delete']"
+            @click="close"
+            @keyup.delete.prevent="close"
+        >
+            <b-icon
+                custom-class=""
+                v-if="closeIcon"
+                :icon="closeIcon"
+                :size="size"
+                :type="closeIconType"
+                :pack="closeIconPack"
+            />
+        </a>
+    </div>
+    <span
+        v-else
+        class="tag"
+        :class="[type, size, { 'is-rounded': rounded }]"
+    >
+        <b-icon
+            v-if="icon"
+            :icon="icon"
+            :size="size"
+            :type="iconType"
+            :pack="iconPack"
+        />
+        <span :class="{ 'has-ellipsis': ellipsis }" @click="click">
+            <slot />
+        </span>
+
+        <a
+            v-if="closable"
+            role="button"
+            :aria-label="ariaCloseLabel"
+            class="delete is-small"
+            :class="closeType"
+            :disabled="disabledOrUndefined"
+            :tabindex="tabstop ? 0 : undefined"
+            @click="close"
+            @keyup.delete.prevent="close"
+        />
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BIcon from '../icon/Icon.vue'
+
+export default defineComponent({
+    name: 'BTag',
+    components: { BIcon },
+    props: {
+        attached: Boolean,
+        closable: Boolean,
+        type: [String, Object],
+        size: String,
+        rounded: Boolean,
+        disabled: Boolean,
+        ellipsis: Boolean,
+        tabstop: {
+            type: Boolean,
+            default: true
+        },
+        ariaCloseLabel: String,
+        icon: String,
+        iconType: String,
+        iconPack: String,
+        closeType: String,
+        closeIcon: String,
+        closeIconPack: String,
+        closeIconType: String
+    },
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        click: (_: Event) => true,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        close: (_: Event) => true
+    },
+    computed: {
+        // setting a boolean attribute `false` does not remove it on Vue 3.
+        // `null` or `undefined` has to be given to remove it.
+        disabledOrUndefined() {
+            return this.disabled || undefined
+        }
+    },
+    methods: {
+        /*
+        * Emit close event when delete button is clicked
+        * or delete key is pressed.
+        */
+        close(event: Event) {
+            if (this.disabled) return
+
+            this.$emit('close', event)
+        },
+        /*
+        * Emit click event when tag is clicked.
+        */
+        click(event: Event) {
+            if (this.disabled) return
+
+            this.$emit('click', event)
+        }
+    }
+})
+</script>

package/src/components/tag/Taglist.spec.ts

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

package/src/components/tag/Taglist.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="tags" :class="{ 'has-addons': attached }">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'BTaglist',
+    props: {
+        attached: Boolean
+    }
+})
+</script>

package/src/components/tag/__snapshots__/Tag.spec.ts.snap

@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BTag > render correctly 1`] = `
+"<span class="tag"><!--v-if--><span class=""></span>
+<!--v-if--></span>"
+`;

package/src/components/tag/__snapshots__/Taglist.spec.ts.snap

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

package/src/components/tag/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+import Tag from './Tag.vue'
+import Taglist from './Taglist.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Tag)
+        registerComponent(Vue, Taglist)
+    }
+}
+
+export default Plugin
+
+export {
+    Tag as BTag,
+    Taglist as BTaglist
+}

package/src/components/taginput/Taginput.spec.ts

@@ -0,0 +1,132 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BTaginput from '@components/taginput/Taginput.vue'
+import BTag from '@components/tag/Tag.vue'
+
+describe('BTaginput', () => {
+    it('is called', () => {
+        const wrapper = shallowMount(BTaginput)
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BTaginput')
+    })
+
+    it('render correctly', () => {
+        const wrapper = shallowMount(BTaginput)
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('no display counter when hasCounter property set for false', async () => {
+        const wrapper = shallowMount(BTaginput, {
+            props: { maxlength: 100 }
+        })
+        expect(wrapper.find('small.counter').exists()).toBeTruthy()
+
+        await wrapper.setProps({ hasCounter: false })
+        expect(wrapper.find('small.counter').exists()).toBeFalsy()
+    })
+
+    it('should send close-type prop to BTag component properly', () => {
+        const value = ['Test Value']
+        const closeType = 'is-danger'
+        const wrapper = shallowMount(BTaginput, {
+            props: { modelValue: value, closeType }
+        })
+        const Tag = wrapper.findComponent(BTag)
+        expect(Tag.attributes('closetype')).toBe(closeType)
+    })
+
+    it('should listen Autocomplete events', async () => {
+        let firedHeader = false
+        let firedFooter = false
+        const wrapper = mount(BTaginput, {
+            props: {
+                autocomplete: true,
+                iconRight: 'close-circle',
+                iconRightClickable: true,
+                selectableHeader: true,
+                selectableFooter: true,
+                data: ['Frank', 'Eddy', 'Howard'],
+                onIconRightClick: () => {
+                    wrapper.vm.tags = []
+                },
+                onSelectHeader: () => {
+                    firedHeader = true
+                },
+                onSelectFooter: () => {
+                    firedFooter = true
+                }
+            },
+            slots: {
+                header: '<h1>SLOT HEADER</h1>',
+                footer: '<h1>SLOT FOOTER</h1>'
+            }
+        })
+
+        const $input = wrapper.find('.taginput.control input')
+        const $iconRight = wrapper.find('.icon.is-right')
+        const $dropdownItemHeader = wrapper.find('.dropdown-item.dropdown-header')
+        const $dropdownItemFooter = wrapper.find('.dropdown-item.dropdown-footer')
+
+        $input.trigger('focus')
+        $input.setValue('Frank')
+        await wrapper.vm.$nextTick()
+
+        $input.trigger('keydown', { key: 'Down' })
+        $input.trigger('keydown', { key: 'Down' })
+        $input.trigger('keydown', { key: 'Enter' })
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.vm.tags).toHaveLength(1)
+
+        $iconRight.trigger('click')
+        await wrapper.vm.$nextTick()
+
+        $dropdownItemHeader.trigger('click')
+        $dropdownItemFooter.trigger('click')
+
+        expect(wrapper.vm.tags).toHaveLength(0)
+        expect(firedHeader).toBeTruthy()
+        expect(firedFooter).toBeTruthy()
+    })
+
+    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(BTaginput, { attrs })
+
+            const root = wrapper.find('div.taginput')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const autocomplete = wrapper.findComponent({ ref: 'autocomplete' })
+            expect(autocomplete.classes(attrs.class)).toBe(false)
+            expect(autocomplete.attributes('style')).toBeUndefined()
+            expect(autocomplete.attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style, and id to the underlying <b-autocomplete> if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BTaginput, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                }
+            })
+
+            const root = wrapper.find('div.taginput')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const autocomplete = wrapper.findComponent({ ref: 'autocomplete' })
+            expect(autocomplete.classes(attrs.class)).toBe(true)
+            expect(autocomplete.attributes('style')).toBe(attrs.style)
+            expect(autocomplete.attributes('id')).toBe(attrs.id)
+        })
+    })
+})