buefy 1.0.0 → 1.0.2

package/src/components/steps/StepItem.spec.ts

@@ -0,0 +1,114 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BSteps from '@components/steps/Steps.vue'
+import BStepItem from '@components/steps/StepItem.vue'
+
+type BStepsInstance = InstanceType<typeof BSteps>
+type BStepItemInstance = InstanceType<typeof BStepItem>
+
+let wrapper: VueWrapper<BStepItemInstance>
+
+const WrapperComp = {
+    // values must be specified to make the snapshot reproducible
+    // I took the values from the legacy snapshot.
+    template: `
+        <BSteps ref="steps">
+            <BStepItem value="14" />
+            <BStepItem value="16" ref="testItem"/>
+            <BStepItem value="18" :visible="false"/>
+        </BSteps>`,
+    components: {
+        BSteps, BStepItem
+    }
+}
+
+describe('BStepItem', () => {
+    let wrapperSteps: VueWrapper<BStepsInstance>
+
+    beforeEach(() => {
+        const root = mount(WrapperComp)
+        wrapperSteps = root.findComponent<BStepsInstance>({ ref: 'steps' })
+        wrapper = root.findComponent<BStepItemInstance>({ ref: 'testItem' })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BStepItem')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('computes its position correctly', () => {
+        expect(wrapper.vm.index).toBe(1)
+    })
+
+    it('transition correctly when activate is called', () => {
+        wrapper.vm.activate(0)
+        expect(wrapper.vm.transitionName).toBe('slide-prev')
+
+        wrapper.vm.activate(2)
+        expect(wrapper.vm.transitionName).toBe('slide-next')
+    })
+
+    it('transition correctly when deactivate is called', () => {
+        wrapper.vm.deactivate(2)
+        expect(wrapper.vm.transitionName).toBe('slide-prev')
+
+        wrapper.vm.deactivate(0)
+        expect(wrapper.vm.transitionName).toBe('slide-next')
+    })
+
+    it('doesn\'t mount when it has no parent', () => {
+        expect(() => mount(BStepItem)).toThrow(/You should wrap/)
+    })
+
+    it('should update active state', () => {
+        expect(wrapper.vm.isActive).toBe(false)
+
+        wrapperSteps.vm.next()
+        expect(wrapper.vm.isActive).toBe(true)
+
+        wrapperSteps.vm.prev()
+        expect(wrapper.vm.isActive).toBe(false)
+    })
+
+    describe('with explicit order', () => {
+        let wrapperSteps: VueWrapper<BStepsInstance>
+        let wrapperTestItem: VueWrapper<BStepItemInstance>
+
+        beforeEach(() => {
+            const wrapper = mount({
+                template: `
+                    <BSteps ref="steps">
+                        <BStepItem ref="testItem" :order="2" />
+                        <BStepItem :order="1" />
+                        <BStepItem :order="3" />
+                    </BSteps>`,
+                components: {
+                    BSteps, BStepItem
+                }
+            })
+            wrapperSteps = wrapper.findComponent<BStepsInstance>({ ref: 'steps' })
+            wrapperTestItem = wrapper.findComponent<BStepItemInstance>({ ref: 'testItem' })
+        })
+
+        it('should update active state', () => {
+            expect(wrapperTestItem.vm.isActive).toBe(false)
+
+            wrapperSteps.vm.next()
+            expect(wrapperTestItem.vm.isActive).toBe(true)
+
+            wrapperSteps.vm.next()
+            expect(wrapperTestItem.vm.isActive).toBe(false)
+
+            wrapperSteps.vm.prev()
+            expect(wrapperTestItem.vm.isActive).toBe(true)
+
+            wrapperSteps.vm.prev()
+            expect(wrapperTestItem.vm.isActive).toBe(false)
+        })
+    })
+})

package/src/components/steps/StepItem.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import TabbedChildMixin from '../../utils/TabbedChildMixin'
+import type { TabbedParent } from '../../utils/TabbedTypes'
+import type { VueClassAttribute } from '../../utils/config'
+
+export default defineComponent({
+    name: 'BStepItem',
+    mixins: [TabbedChildMixin<TabbedParent>('step')],
+    props: {
+        step: [String, Number],
+        type: [String, Object] as PropType<VueClassAttribute>,
+        clickable: {
+            type: Boolean,
+            default: undefined
+        }
+    },
+    data() {
+        return {
+            elementClass: 'step-item'
+        }
+    }
+})
+</script>

package/src/components/steps/Steps.spec.ts

@@ -0,0 +1,125 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BSteps from '@components/steps/Steps.vue'
+import BStepItem from '@components/steps/StepItem.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BSteps>>
+
+describe('BSteps', () => {
+    beforeEach(() => {
+        wrapper = mount(BSteps, {
+            props: {
+                modelValue: 1
+            },
+            slots: {
+                // values must be specified to make the snapshot reproducible
+                // I took them from the legacy snapshot
+                default: `
+                    <BStepItem value="14"></BStepItem>
+                    <BStepItem value="16" :visible="false"></BStepItem>
+                    <BStepItem value="18" :clickable="false"></BStepItem>
+                `
+            },
+            global: {
+                components: { BStepItem }
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BSteps')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('emit input event with value when active step is modified', async () => {
+        await wrapper.setData({ activeId: wrapper.vm.items[0].uniqueValue })
+
+        const valueEmitted = wrapper.emitted<[number]>()['update:modelValue']
+
+        expect(valueEmitted).toBeTruthy()
+        expect(valueEmitted.length).toBe(1)
+        expect(valueEmitted[0][0]).toBe(0)
+    })
+
+    it('manage next/previous listener', async () => {
+        const first = 0
+        const next = first + 2
+
+        // First input
+        await wrapper.setProps({ modelValue: 0 })
+
+        expect(wrapper.vm.modelValue).toBe(0)
+
+        expect(wrapper.vm.hasNext).toBeTruthy()
+        wrapper.vm.next()
+
+        await wrapper.vm.$nextTick() // Wait until $emits have been handled
+
+        // Simulate v-model
+        let emitted = wrapper.emitted<[number]>()['update:modelValue']
+        await wrapper.setProps(
+            { modelValue: emitted[emitted.length - 1][0] }
+        )
+
+        emitted = wrapper.emitted<[number]>()['update:modelValue']
+
+        expect(emitted).toBeTruthy()
+        expect(emitted.length).toBe(1)
+        expect(emitted[0][0]).toBe(next)
+
+        expect(wrapper.vm.hasNext).toBeFalsy()
+
+        wrapper.vm.next()
+
+        await wrapper.vm.$nextTick() // Wait until $emits have been handled
+
+        // Simulate v-model
+        emitted = wrapper.emitted<[number]>()['update:modelValue']
+        await wrapper.setProps(
+            { modelValue: emitted[emitted.length - 1][0] }
+        )
+
+        emitted = wrapper.emitted<[number]>()['update:modelValue']
+        expect(emitted.length).toBe(1) // To still be
+
+        expect(wrapper.vm.hasPrev).toBeTruthy()
+        wrapper.vm.prev()
+
+        await wrapper.vm.$nextTick() // Wait until $emits have been handled
+
+        // Simulate v-model
+        emitted = wrapper.emitted<[number]>()['update:modelValue']
+        await wrapper.setProps(
+            { modelValue: emitted[emitted.length - 1][0] }
+        )
+
+        emitted = wrapper.emitted<[number]>()['update:modelValue']
+        expect(emitted.length).toBe(2)
+        expect(emitted[1][0]).toBe(first)
+        expect(wrapper.vm.hasPrev).toBeFalsy()
+
+        wrapper.vm.prev()
+        await wrapper.vm.$nextTick() // Wait until $emits have been handled
+
+        emitted = wrapper.emitted<[number]>()['update:modelValue']
+        expect(emitted.length).toBe(2) // To still be
+    })
+
+    it('manage wrapper classes as expected', async () => {
+        let wrapperClasses = wrapper.vm.wrapperClasses[1] as Record<string, boolean>
+        expect(wrapperClasses['is-vertical']).toBeFalsy()
+
+        await wrapper.setProps({ vertical: true })
+        wrapperClasses = wrapper.vm.wrapperClasses[1] as Record<string, boolean>
+        expect(wrapperClasses['is-vertical']).toBeTruthy()
+
+        await wrapper.setProps({ position: 'is-right' })
+        wrapperClasses = wrapper.vm.wrapperClasses[1] as Record<string, boolean>
+        expect(wrapperClasses['is-right']).toBeTruthy()
+    })
+})

package/src/components/steps/Steps.vue

@@ -0,0 +1,273 @@
+<template>
+    <div class="b-steps" :class="wrapperClasses">
+        <nav class="steps" :class="mainClasses">
+            <ul class="step-items">
+                <li
+                    v-for="childItem in items"
+                    :key="childItem.uniqueValue"
+                    v-show="childItem.visible"
+                    class="step-item"
+                    :class="[childItem.type || type, childItem.headerClass, {
+                        'is-active': childItem.isActive,
+                        'is-previous': activeItem.index > childItem.index
+                    }]"
+                >
+                    <a
+                        class="step-link"
+                        :class="{'is-clickable': isItemClickable(childItem)}"
+                        @click="isItemClickable(childItem) && childClick(childItem)"
+                    >
+                        <div class="step-marker">
+                            <b-icon
+                                v-if="childItem.icon"
+                                :icon="childItem.icon"
+                                :pack="childItem.iconPack"
+                                :size="size"
+                            />
+                            <span v-else-if="childItem.step">{{ childItem.step }}</span>
+                        </div>
+                        <div class="step-details">
+                            <span class="step-title">{{ childItem.label }}</span>
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+        <section class="step-content" :class="{'is-transitioning': isTransitioning}">
+            <slot />
+        </section>
+        <slot
+            name="navigation"
+            :previous="navigationProps.previous"
+            :next="navigationProps.next"
+        >
+            <nav v-if="hasNavigation" class="step-navigation">
+                <a
+                    role="button"
+                    class="pagination-previous"
+                    :disabled="navigationProps.previous.disabled || undefined"
+                    @click.prevent="navigationProps.previous.action"
+                    :aria-label="ariaPreviousLabel"
+                >
+                    <b-icon
+                        :icon="iconPrev"
+                        :pack="iconPack"
+                        both
+                        aria-hidden="true"
+                    />
+                </a>
+                <a
+                    role="button"
+                    class="pagination-next"
+                    :disabled="navigationProps.next.disabled || undefined"
+                    @click.prevent="navigationProps.next.action"
+                    :aria-label="ariaNextLabel"
+                >
+                    <b-icon
+                        :icon="iconNext"
+                        :pack="iconPack"
+                        both
+                        aria-hidden="true"
+                    />
+                </a>
+            </nav>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import BIcon from '../icon/Icon.vue'
+
+import TabbedMixin from '../../utils/TabbedMixin'
+import type { TabbedChild } from '../../utils/TabbedTypes'
+import config from '../../utils/config'
+import type { VueClassAttribute } from '../../utils/config'
+
+export interface IStepItem extends TabbedChild {
+    type?: VueClassAttribute
+    step?: number | string
+    clickable?: boolean
+}
+
+export const LABEL_POSITIONS = ['bottom', 'right', 'left'] as const
+export type LabelPosition = typeof LABEL_POSITIONS[number]
+
+export const MOBILE_MODES = ['minimalist', 'compact'] as const
+export type MobileMode = typeof MOBILE_MODES[number]
+
+export default defineComponent({
+    name: 'BSteps',
+    components: {
+        BIcon
+    },
+    mixins: [TabbedMixin<IStepItem>('step')],
+    props: {
+        type: [String, Object] as PropType<VueClassAttribute>,
+        iconPack: String,
+        iconPrev: {
+            type: String,
+            default: () => {
+                return config.defaultIconPrev
+            }
+        },
+        iconNext: {
+            type: String,
+            default: () => {
+                return config.defaultIconNext
+            }
+        },
+        hasNavigation: {
+            type: Boolean,
+            default: true
+        },
+        labelPosition: {
+            type: String as PropType<LabelPosition>,
+            validator(value: LabelPosition) {
+                return LABEL_POSITIONS.indexOf(value) > -1
+            },
+            default: 'bottom'
+        },
+        rounded: {
+            type: Boolean,
+            default: true
+        },
+        mobileMode: {
+            type: String as PropType<MobileMode>,
+            validator(value: MobileMode) {
+                return MOBILE_MODES.indexOf(value) > -1
+            },
+            default: 'minimalist'
+        },
+        ariaNextLabel: String,
+        ariaPreviousLabel: String
+    },
+    computed: {
+        // Override mixin implementation to always have a value
+        activeItem() {
+            return this.childItems.filter((i) => i.uniqueValue === this.activeId)[0] ||
+                this.items[0]
+        },
+        wrapperClasses() {
+            return [
+                this.size,
+                {
+                    'is-vertical': this.vertical,
+                    [this.position!]: this.position && this.vertical
+                }
+            ]
+        },
+        mainClasses() {
+            return [
+                this.type,
+                {
+                    'has-label-right': this.labelPosition === 'right',
+                    'has-label-left': this.labelPosition === 'left',
+                    'is-animated': this.animated,
+                    'is-rounded': this.rounded,
+                    [`mobile-${this.mobileMode}`]: this.mobileMode !== null
+                }
+            ]
+        },
+
+        /*
+         * Check if previous button is available.
+         */
+        hasPrev() {
+            return this.prevItemIdx !== null
+        },
+
+        /*
+         * Retrieves the next visible item index
+         */
+        nextItemIdx() {
+            const idx = this.activeItem ? this.activeItem.index : 0
+            return this.getNextItemIdx(idx)
+        },
+
+        /*
+         * Retrieves the next visible item
+         */
+        nextItem() {
+            let nextItem = null
+            if (this.nextItemIdx !== null) {
+                nextItem = this.items.find((i) => i.index === this.nextItemIdx)
+            }
+            return nextItem
+        },
+
+        /*
+        * Retrieves the next visible item index
+        */
+        prevItemIdx() {
+            if (!this.activeItem) { return null }
+            const idx = this.activeItem.index
+            return this.getPrevItemIdx(idx)
+        },
+
+        /*
+         * Retrieves the previous visible item
+         */
+        prevItem() {
+            if (!this.activeItem) { return null }
+
+            let prevItem = null
+            if (this.prevItemIdx !== null) {
+                prevItem = this.items.find((i) => i.index === this.prevItemIdx)
+            }
+            return prevItem
+        },
+
+        /*
+         * Check if next button is available.
+         */
+        hasNext() {
+            return this.nextItemIdx !== null
+        },
+
+        navigationProps() {
+            return {
+                previous: {
+                    disabled: !this.hasPrev,
+                    action: this.prev
+                },
+                next: {
+                    disabled: !this.hasNext,
+                    action: this.next
+                }
+            }
+        }
+    },
+    methods: {
+        /*
+         * Return if the step should be clickable or not.
+         */
+        isItemClickable(stepItem: IStepItem) {
+            if (stepItem.clickable === undefined) {
+                return stepItem.index < this.activeItem.index
+            }
+            return stepItem.clickable
+        },
+
+        /*
+         * Previous button click listener.
+         */
+        prev() {
+            if (this.hasPrev) {
+                this.activeId = this.prevItem!.uniqueValue
+            }
+        },
+
+        /*
+         * Previous button click listener.
+         */
+        next() {
+            if (this.hasNext) {
+                this.activeId = this.nextItem!.uniqueValue
+            }
+        }
+    }
+})
+</script>

package/src/components/steps/__snapshots__/StepItem.spec.ts.snap

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

package/src/components/steps/__snapshots__/Steps.spec.ts.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BSteps > render correctly 1`] = `
+"<div class="b-steps">
+  <nav class="steps is-animated is-rounded mobile-minimalist">
+    <ul class="step-items">
+      <li class="step-item is-previous"><a class="step-link is-clickable">
+          <div class="step-marker">
+            <!--v-if-->
+          </div>
+          <div class="step-details"><span class="step-title"></span></div>
+        </a></li>
+      <li class="step-item is-active" style="display: none;"><a class="step-link">
+          <div class="step-marker">
+            <!--v-if-->
+          </div>
+          <div class="step-details"><span class="step-title"></span></div>
+        </a></li>
+      <li class="step-item"><a class="step-link">
+          <div class="step-marker">
+            <!--v-if-->
+          </div>
+          <div class="step-details"><span class="step-title"></span></div>
+        </a></li>
+    </ul>
+  </nav>
+  <section class="step-content">
+    <transition-stub persisted="false" css="true">
+      <div class="step-item" id="14-content" tabindex="-1" style="display: none;"></div>
+    </transition-stub>
+    <transition-stub persisted="false" css="true">
+      <div class="step-item" id="16-content" tabindex="0" style="display: none;"></div>
+    </transition-stub>
+    <transition-stub persisted="false" css="true">
+      <div class="step-item" id="18-content" tabindex="-1" style="display: none;"></div>
+    </transition-stub>
+  </section>
+  <nav class="step-navigation"><a role="button" class="pagination-previous"><span class="icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></a><a role="button" class="pagination-next"><span class="icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></a></nav>
+</div>"
+`;

package/src/components/steps/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+import Steps from './Steps.vue'
+import StepItem from './StepItem.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Steps)
+        registerComponent(Vue, StepItem)
+    }
+}
+
+export default Plugin
+
+export {
+    Steps as BSteps,
+    StepItem as BStepItem
+}

package/src/components/switch/Switch.spec.ts

@@ -0,0 +1,74 @@
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import BSwitch from '@components/switch/Switch.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BSwitch>>
+
+describe('BSwitch', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BSwitch, {
+            slots: {
+                default: [
+                    'Control label'
+                ]
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BSwitch')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('renders input element by default', () => {
+        expect(wrapper.find('input').exists()).toBeTruthy()
+        expect(wrapper.classes()).toContain('switch')
+    })
+
+    it('updates internal value when v-model is changed', async () => {
+        const newValue = 'switch value'
+        await wrapper.setProps({ modelValue: newValue })
+        expect(wrapper.vm.newValue).toBe(newValue)
+    })
+
+    it('emit input event when computedValue is set', () => {
+        const newValue = 'switch value'
+        wrapper.vm.computedValue = newValue
+        const valueEmitted = wrapper.emitted()['update:modelValue'][0]
+        expect(wrapper.vm.newValue).toBe(newValue)
+        expect(valueEmitted).toContainEqual(newValue)
+    })
+
+    it('method focus() gives focus to the input element', async () => {
+        (wrapper.vm.$refs.input as HTMLElement).focus = vi.fn()
+        wrapper.vm.focus()
+        await wrapper.vm.$nextTick()
+        expect((wrapper.vm.$refs.input as HTMLElement).focus).toHaveBeenCalled()
+    })
+
+    it('applies passiveType prop properly', async () => {
+        const passiveType = 'is-danger'
+        const modelValue = false
+        await wrapper.setProps({ passiveType, modelValue })
+        const switchElement = wrapper.find('.check')
+        expect(switchElement.classes()).toContain('is-danger-passive')
+    })
+
+    it('does not have a label at left by default', async () => {
+        const modelValue = false
+        wrapper.setProps({ modelValue })
+        expect(wrapper.classes()).not.toContain('has-left-label')
+    })
+
+    it('has label at left is left-label prop has been sent', async () => {
+        const leftLabel = true
+        const modelValue = false
+        await wrapper.setProps({ leftLabel, modelValue })
+        expect(wrapper.classes()).toContain('has-left-label')
+    })
+})