buefy 1.0.0 → 1.0.2

package/src/components/carousel/CarouselItem.spec.ts

@@ -0,0 +1,105 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import BCarousel from '@components/carousel/Carousel.vue'
+import BCarouselItem from '@components/carousel/CarouselItem.vue'
+
+type BCarouselInstance = InstanceType<typeof BCarousel>
+type BCarouselItemInstance = InstanceType<typeof BCarouselItem>
+
+const WrapperComp = defineComponent({
+    components: {
+        BCarousel,
+        BCarouselItem
+    },
+    props: {
+        // to indirectly change BCarousel's animated prop
+        animated: {
+            type: String,
+            default: 'slide'
+        }
+    },
+    template: `
+        <BCarousel ref="carousel" :animated="animated">
+            <BCarouselItem value="item1"/>
+            <BCarouselItem ref="testItem" value="item2"/>
+            <BCarouselItem ref="testItem2" value="item3"/>
+        </BCarousel>`
+})
+
+let wrapper: VueWrapper<BCarouselItemInstance>
+let wrapperParent: VueWrapper<InstanceType<typeof WrapperComp>>
+let wrapperCarousel: VueWrapper<BCarouselInstance>
+
+describe('BCarouselItem', () => {
+    beforeEach(() => {
+        wrapperParent = mount(WrapperComp)
+        wrapperCarousel = wrapperParent.findComponent<BCarouselInstance>({ ref: 'carousel' })
+        wrapper = wrapperParent.findComponent<BCarouselItemInstance>({ ref: 'testItem' })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BCarouselItem')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('computes its position correctly', () => {
+        expect(wrapper.vm.index).toBe(1)
+    })
+
+    it('transition correctly', async () => {
+        wrapperCarousel.vm.changeActive(2)
+        expect(wrapper.vm.transition).toBe('slide-prev')
+
+        wrapperCarousel.vm.changeActive(0)
+        expect(wrapper.vm.transition).toBe('slide-next')
+
+        await wrapperParent.setProps({ animated: 'fade' })
+        wrapperCarousel.vm.changeActive(0)
+        expect(wrapper.vm.transition).toBe('fade')
+    })
+
+    it('update active state', () => {
+        expect(wrapper.vm.isActive).toBe(false)
+
+        wrapperCarousel.vm.changeActive(1)
+        expect(wrapper.vm.isActive).toBe(true)
+
+        wrapperCarousel.vm.changeActive(2)
+        expect(wrapper.vm.isActive).toBe(false)
+    })
+
+    describe('with explicit order', () => {
+        let wrapperCarousel: VueWrapper<BCarouselInstance>
+        let wrapperTestItem: VueWrapper<BCarouselItemInstance>
+
+        beforeEach(() => {
+            const wrapper = mount({
+                template: `
+                    <BCarousel ref="carousel">
+                        <BCarouselItem ref="testItem" :order="2" />
+                        <BCarouselItem :order="1" />
+                        <BCarouselItem :order="3" />
+                    </BCarousel>`,
+                components: { BCarousel, BCarouselItem }
+            })
+            wrapperCarousel = wrapper.findComponent<BCarouselInstance>({ ref: 'carousel' })
+            wrapperTestItem = wrapper.findComponent<BCarouselItemInstance>({ ref: 'testItem' })
+        })
+
+        it('update active state', () => {
+            expect(wrapperTestItem.vm.isActive).toBe(false)
+
+            wrapperCarousel.vm.changeActive(1)
+            expect(wrapperTestItem.vm.isActive).toBe(true)
+
+            wrapperCarousel.vm.changeActive(2)
+            expect(wrapperTestItem.vm.isActive).toBe(false)
+        })
+    })
+})

package/src/components/carousel/CarouselItem.vue

@@ -0,0 +1,38 @@
+<template>
+    <transition :name="transition">
+        <div v-show="isActive" class="carousel-item">
+            <slot />
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import InjectedChildMixin, { Sorted } from '../../utils/InjectedChildMixin'
+import type { ICarousel } from './types'
+
+export default defineComponent({
+    name: 'BCarouselItem',
+    mixins: [InjectedChildMixin<typeof Sorted, ICarousel>('carousel', Sorted)],
+    data() {
+        return {
+            transitionName: null
+        }
+    },
+    computed: {
+        transition() {
+            if (this.parent.animated === 'fade') {
+                return 'fade'
+            } else if (this.parent.transition) {
+                return 'slide-' + this.parent.transition
+            } else {
+                return undefined
+            }
+        },
+        isActive() {
+            return this.parent.activeChildIndex === this.index
+        }
+    }
+})
+</script>

package/src/components/carousel/CarouselList.spec.ts

@@ -0,0 +1,172 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BCarouselList from '@components/carousel/CarouselList.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BCarouselList>>
+const data = [
+    {
+        title: 'Slide 1',
+        image: 'https://picsum.photos/id/0/1230/500'
+    },
+    {
+        title: 'Slide 2',
+        image: 'https://picsum.photos/id/1/1230/500'
+    },
+    {
+        title: 'Slide 3',
+        image: 'https://picsum.photos/id/2/1230/500'
+    },
+    {
+        title: 'Slide 4',
+        image: 'https://picsum.photos/id/3/1230/500'
+    },
+    {
+        title: 'Slide 5',
+        image: 'https://picsum.photos/id/4/1230/500'
+    },
+    {
+        title: 'Slide 6',
+        image: 'https://picsum.photos/id/5/1230/500'
+    },
+    {
+        title: 'Slide 7',
+        image: 'https://picsum.photos/id/6/1230/500'
+    },
+    {
+        title: 'Slide 8',
+        image: 'https://picsum.photos/id/7/1230/500'
+    }
+]
+
+describe('BCarouselList', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BCarouselList, {
+            props: {
+                data
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BCarouselList')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('uses breakpoints', async () => {
+        await wrapper.setProps({
+            itemsToShow: 4,
+            itemsToList: 1,
+            breakpoints: {
+                768: {
+                    hasGrayscale: false,
+                    itemsToShow: 6,
+                    itemsToList: 2
+                },
+                960: {
+                    hasGrayscale: true,
+                    itemsToShow: 8
+                }
+            }
+        })
+
+        expect(wrapper.vm.settings.itemsToShow).toBe(8)
+
+        global.innerWidth = 960
+        global.dispatchEvent(new Event('resize'))
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.vm.settings.itemsToShow).toBe(8)
+
+        global.innerWidth = 959
+        global.dispatchEvent(new Event('resize'))
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.vm.settings.itemsToShow).toBe(6)
+
+        global.innerWidth = 767
+        global.dispatchEvent(new Event('resize'))
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.settings.itemsToShow).toBe(4)
+        expect(wrapper.vm.settings.itemsToList).toBe(1)
+    })
+
+    it('doesn\'t show empty slots', async () => {
+        await wrapper.setProps({
+            itemsToShow: 4,
+            modelValue: 8
+        })
+
+        expect(wrapper.vm.scrollIndex).toBe(4)
+        expect(wrapper.vm.hasNext).toBe(false)
+    })
+
+    it('repeats', async () => {
+        await wrapper.setProps({
+            itemsToShow: 4,
+            itemsToList: 1,
+            repeat: true,
+            modelValue: 0
+        })
+
+        expect(wrapper.vm.scrollIndex).toBe(0)
+        wrapper.vm.next()
+        wrapper.vm.next()
+        wrapper.vm.next()
+        wrapper.vm.next()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.scrollIndex).toBe(4)
+
+        wrapper.vm.next()
+        expect(wrapper.vm.scrollIndex).toBe(0)
+
+        wrapper.vm.prev()
+        expect(wrapper.vm.scrollIndex).toBe(4)
+    })
+
+    it('removes events listener when removed', () => {
+        const map: Record<string, EventListenerOrEventListenerObject> = {}
+        vi.spyOn(window, 'removeEventListener').mockImplementation((event, cb) => {
+            map[event] = cb
+        })
+        wrapper.find('.carousel-list').trigger('mousedown')
+        wrapper.unmount()
+
+        expect(map.resize).toBe(wrapper.vm.resized)
+        expect(map.mousemove).toBe(wrapper.vm.dragMove)
+        expect(map.mouseup).toBe(wrapper.vm.dragEnd)
+        vi.mocked(window.removeEventListener).mockRestore()
+    })
+
+    it('drags correctly', async () => {
+        wrapper.vm.$el.getBoundingClientRect = vi.fn(() => ({
+            width: 400
+        }))
+        await wrapper.setData({ windowWidth: 400 })
+        await wrapper.setProps({
+            itemsToShow: 4
+        })
+        await wrapper.setData({ delta: 0 })
+        expect(wrapper.vm.itemWidth).toBe(100)
+
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.translation).toBe(-0)
+
+        await wrapper.setData({ delta: -600 })
+        expect(wrapper.vm.translation).toBe(-0)
+
+        await wrapper.setData({ delta: 2000 })
+        expect(wrapper.vm.translation).toBe(-400)
+
+        await wrapper.setProps({
+            modelValue: 4
+        })
+        expect(wrapper.vm.translation).toBe(-400)
+        await wrapper.setData({ delta: -300 })
+        expect(wrapper.vm.translation).toBe(-100)
+    })
+})

package/src/components/carousel/CarouselList.vue

@@ -0,0 +1,364 @@
+<template>
+    <div
+        class="carousel-list"
+        :class="{'has-shadow': scrollIndex > 0}"
+        @mousedown.prevent="dragStart"
+        @touchstart="dragStart"
+    >
+        <div
+            class="carousel-slides"
+            :class="listClass"
+            :style="'transform:translateX('+translation+'px)'"
+        >
+            <div
+                v-for="(list, index) in data"
+                class="carousel-slide"
+                :class="{'is-active': asIndicator ? activeItem === index : scrollIndex === index}"
+                @mouseup="checkAsIndicator(index, $event)"
+                @touchend="checkAsIndicator(index, $event)"
+                :key="index"
+                :style="itemStyle"
+            >
+                <slot
+                    :index="index"
+                    :active="activeItem"
+                    :scroll="scrollIndex"
+                    v-bind="list"
+                    :list="list"
+                    name="item"
+                >
+                    <b-image
+                        :src="list.image"
+                        v-bind="list"
+                    />
+                </slot>
+            </div>
+        </div>
+        <div
+            v-if="arrow"
+            class="carousel-arrow"
+            :class="{'is-hovered': settings.arrowHover}"
+        >
+            <b-icon
+                v-show="hasPrev"
+                class="has-icons-left"
+                @click.prevent="prev"
+                :pack="settings.iconPack"
+                :icon="settings.iconPrev"
+                :size="settings.iconSize"
+                both
+            />
+            <b-icon
+                v-show="hasNext"
+                class="has-icons-right"
+                @click.prevent="next"
+                :pack="settings.iconPack"
+                :icon="settings.iconNext"
+                :size="settings.iconSize"
+                both
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import { sign, mod, bound } from '../../utils/helpers'
+import config from '../../utils/config'
+
+import BIcon from '../icon/Icon.vue'
+import BImage from '../image/Image.vue'
+
+// Item type of the `data` prop.
+// Ideally, this should be a type parameter, but I was not able to figure out
+// how to realize it with the Options API.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Datum = any
+
+export interface BreakpointSettings {
+    arrowHover: boolean
+    hasGrayscale?: boolean
+    hasOpacity?: boolean
+    repeat?: boolean
+    hasDrag: boolean
+    itemsToShow: number
+    itemsToList: number
+    iconPack?: string
+    iconSize?: string
+    iconPrev: string
+    iconNext: string
+}
+
+export type BreakpointOptions = Partial<BreakpointSettings>
+
+export default defineComponent({
+    name: 'BCarouselList',
+    components: {
+        BIcon,
+        BImage
+    },
+    props: {
+        data: {
+            type: Array<Datum>,
+            default: () => []
+        },
+        modelValue: {
+            type: Number,
+            default: 0
+        },
+        scrollValue: {
+            type: Number,
+            default: 0
+        },
+        hasDrag: {
+            type: Boolean,
+            default: true
+        },
+        hasGrayscale: Boolean,
+        hasOpacity: Boolean,
+        repeat: Boolean,
+        itemsToShow: {
+            type: Number,
+            default: 4
+        },
+        itemsToList: {
+            type: Number,
+            default: 1
+        },
+        asIndicator: Boolean,
+        arrow: {
+            type: Boolean,
+            default: true
+        },
+        arrowHover: {
+            type: Boolean,
+            default: true
+        },
+        iconPack: String,
+        iconSize: String,
+        iconPrev: {
+            type: String,
+            default: () => {
+                return config.defaultIconPrev
+            }
+        },
+        iconNext: {
+            type: String,
+            default: () => {
+                return config.defaultIconNext
+            }
+        },
+        breakpoints: {
+            type: Object as PropType<Record<number, BreakpointOptions>>,
+            default: () => ({})
+        }
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        switch: (_value: number) => true,
+        'update:modelValue': (_value: number) => true,
+        'updated:scroll': (_index: number) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    data() {
+        return {
+            activeItem: this.modelValue,
+            scrollIndex: this.asIndicator ? this.scrollValue : this.modelValue,
+            delta: 0,
+            dragX: false as number | false,
+            hold: 0,
+            windowWidth: 0,
+            touch: false,
+            observer: null as ResizeObserver | null,
+            refresh_: 0
+        }
+    },
+    computed: {
+        dragging() {
+            return this.dragX !== false
+        },
+        listClass() {
+            return [
+                {
+                    'has-grayscale': this.settings.hasGrayscale,
+                    'has-opacity': this.settings.hasOpacity,
+                    'is-dragging': this.dragging
+                }
+            ]
+        },
+        itemStyle() {
+            return `width: ${this.itemWidth}px;`
+        },
+        translation() {
+            return -bound(
+                this.delta + (this.scrollIndex * this.itemWidth), 0,
+                (this.data.length - this.settings.itemsToShow) * this.itemWidth
+            )
+        },
+        total() {
+            return this.data.length - this.settings.itemsToShow
+        },
+        hasPrev() {
+            return (this.settings.repeat || this.scrollIndex > 0)
+        },
+        hasNext() {
+            return (this.settings.repeat || this.scrollIndex < this.total)
+        },
+        breakpointKeys() {
+            return Object.keys(this.breakpoints).sort((a, b) => +b - +a)
+        },
+        settings(): BreakpointSettings {
+            const breakpoint = this.breakpointKeys.filter((breakpoint) => {
+                if (this.windowWidth >= +breakpoint) {
+                    return true
+                } else {
+                    return false
+                }
+            })[0]
+            if (breakpoint) {
+                return { ...this.$props, ...this.breakpoints[+breakpoint] }
+            }
+            return this.$props
+        },
+        itemWidth() {
+            if (this.windowWidth) { // Ensure component is mounted
+                /* eslint-disable-next-line */
+                this.refresh_; // We force the computed property to refresh if this prop is changed
+
+                const rect = this.$el.getBoundingClientRect()
+                return rect.width / this.settings.itemsToShow
+            }
+            return 0
+        }
+    },
+    watch: {
+        /*
+         * When v-model is changed set the new active item.
+         */
+        modelValue(value) {
+            this.switchTo(this.asIndicator ? value - (this.itemsToShow - 3) / 2 : value)
+            if (this.activeItem !== value) {
+                this.activeItem = bound(value, 0, this.data.length - 1)
+            }
+        },
+        scrollValue(value) {
+            this.switchTo(value)
+        }
+    },
+    methods: {
+        resized() {
+            this.windowWidth = window.innerWidth
+        },
+        switchTo(newIndex: number) {
+            if (newIndex === this.scrollIndex || isNaN(newIndex)) { return }
+
+            if (this.settings.repeat) {
+                newIndex = mod(newIndex, this.total + 1)
+            }
+            newIndex = bound(newIndex, 0, this.total)
+            this.scrollIndex = newIndex
+            if (!this.asIndicator && this.modelValue !== newIndex) {
+                this.$emit('update:modelValue', newIndex)
+            } else if (this.scrollIndex !== newIndex) {
+                this.$emit('updated:scroll', newIndex)
+            }
+        },
+        next() {
+            this.switchTo(this.scrollIndex + this.settings.itemsToList)
+        },
+        prev() {
+            this.switchTo(this.scrollIndex - this.settings.itemsToList)
+        },
+        checkAsIndicator(value: number, event: MouseEvent | TouchEvent) {
+            if (!this.asIndicator) return
+
+            const dragEndX = (event as TouchEvent).changedTouches
+                ? (event as TouchEvent).changedTouches[0].clientX
+                : (event as MouseEvent).clientX
+            if (this.hold - Date.now() > 2000 || Math.abs(+this.dragX - dragEndX) > 10) return
+
+            this.dragX = false
+            this.hold = 0
+            event.preventDefault()
+
+            // Make the item appear in the middle
+            this.activeItem = value
+
+            this.$emit('switch', value)
+        },
+        // handle drag event
+        dragStart(event: MouseEvent | TouchEvent) {
+            if (
+                this.dragging ||
+                !this.settings.hasDrag ||
+                ((event as MouseEvent).button !== 0 && event.type !== 'touchstart')
+            ) return
+            this.hold = Date.now()
+            this.touch = !!(event as TouchEvent).touches
+            this.dragX = this.touch
+                ? (event as TouchEvent).touches[0].clientX
+                : (event as MouseEvent).clientX
+            window.addEventListener(this.touch ? 'touchmove' : 'mousemove', this.dragMove)
+            window.addEventListener(this.touch ? 'touchend' : 'mouseup', this.dragEnd)
+        },
+        dragMove(event: MouseEvent | TouchEvent) {
+            if (!this.dragging) return
+            const dragEndX = (event as TouchEvent).touches
+                ? ((event as TouchEvent).changedTouches[0] ||
+                    (event as TouchEvent).touches[0]).clientX
+                : (event as MouseEvent).clientX
+            this.delta = +this.dragX - dragEndX
+            if (!(event as TouchEvent).touches) {
+                event.preventDefault()
+            }
+        },
+        dragEnd() {
+            if (!this.dragging && !this.hold) return
+            if (this.hold) {
+                const signCheck = sign(this.delta)
+                const results = Math.round(Math.abs(this.delta / this.itemWidth) + 0.15)// Hack
+                this.switchTo(this.scrollIndex + signCheck * results)
+            }
+            this.delta = 0
+            this.dragX = false
+            window.removeEventListener(this.touch ? 'touchmove' : 'mousemove', this.dragMove)
+            window.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.dragEnd)
+        },
+        refresh() {
+            this.$nextTick(() => {
+                this.refresh_++
+            })
+        }
+    },
+    mounted() {
+        if (typeof window !== 'undefined') {
+            if (window.ResizeObserver) {
+                this.observer = new ResizeObserver(this.refresh)
+                this.observer.observe(this.$el)
+            }
+            window.addEventListener('resize', this.resized)
+            document.addEventListener('animationend', this.refresh)
+            document.addEventListener('transitionend', this.refresh)
+            document.addEventListener('transitionstart', this.refresh)
+            this.resized()
+        }
+        if (this.$attrs.config) {
+            throw new Error('The config prop was removed, you need to use v-bind instead')
+        }
+    },
+    beforeUnmount() {
+        if (typeof window !== 'undefined') {
+            if (window.ResizeObserver) {
+                this.observer!.disconnect()
+            }
+            window.removeEventListener('resize', this.resized)
+            document.removeEventListener('animationend', this.refresh)
+            document.removeEventListener('transitionend', this.refresh)
+            document.removeEventListener('transitionstart', this.refresh)
+            this.dragEnd()
+        }
+    }
+})
+</script>

package/src/components/carousel/__snapshots__/Carousel.spec.ts.snap

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BCarousel > render correctly 1`] = `
+"<div class="carousel">
+  <!--v-if-->
+  <div class="carousel-items">
+    <div></div>
+    <div></div>
+    <div class="carousel-arrow is-hovered">
+      <b-icon-stub icon="chevron-left" both="true" class="has-icons-left" style="display: none;"></b-icon-stub>
+      <b-icon-stub icon="chevron-right" both="true" class="has-icons-right" style=""></b-icon-stub>
+    </div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <div class="carousel-indicator is-inside is-bottom"><a class="indicator-item is-active"><span class="indicator-style is-dots"></span></a><a class="indicator-item"><span class="indicator-style is-dots"></span></a></div>
+  <!--v-if-->
+</div>"
+`;