buefy 1.0.0 → 1.0.2

package/src/components/image/Image.spec.ts

@@ -0,0 +1,218 @@
+import { shallowMount } from '@vue/test-utils'
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import BImage from './Image.vue'
+
+const snapshotOptions = {
+    global: {
+        stubs: {
+            // expands transition
+            transition: false
+        }
+    }
+}
+
+describe('BImage', () => {
+    const originalClientWidth = Object.getOwnPropertyDescriptor(Element.prototype, 'clientWidth')!
+    const clientWidth = 500
+    beforeEach(() => {
+        Object.defineProperty(Element.prototype, 'clientWidth', { configurable: true, value: clientWidth })
+    })
+    afterAll(() => {
+        Object.defineProperty(Element.prototype, 'clientWidth', originalClientWidth)
+    })
+
+    it('is called', () => {
+        const wrapper = shallowMount(BImage)
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BImage')
+    })
+
+    it('render correctly', async () => {
+        const wrapper = shallowMount(BImage, snapshotOptions)
+
+        await wrapper.vm.$nextTick() // waits for DOM updates
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('render placeholder correctly', async () => {
+        const baseName = 'my-image-source'
+        const alt = 'Alt text'
+        const placeholder = `${baseName}.png`
+        const src = `${baseName}.webp`
+        const wrapper = shallowMount(BImage, {
+            ...snapshotOptions,
+            props: {
+                alt,
+                placeholder,
+                src
+            }
+        })
+
+        await wrapper.vm.$nextTick() // waits for DOM updates
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('compute the image src as expected', async () => {
+        const baseName = 'my-image-source'
+        const src = `${baseName}.webp`
+        const wrapper = shallowMount(BImage, {
+            props: {
+                src
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.computedSrc).toBe(src)
+
+        let webpFallback = '.jpg'
+        await wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedSrc).toBe(`${baseName}${webpFallback}`)
+
+        webpFallback = 'a-complete-image-source.png'
+        await wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedSrc).toBe(webpFallback)
+    })
+
+    it('compute the placeholder src as expected', async () => {
+        const baseName = 'my-image-source'
+        const placeholder = `${baseName}.webp`
+        const wrapper = shallowMount(BImage, {
+            props: {
+                placeholder
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.computedPlaceholder).toBe(placeholder)
+
+        const webpFallback = '.jpg'
+        await wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedPlaceholder).toBe(`${baseName}${webpFallback}`)
+    })
+
+    it('compute the srcset as expected', async () => {
+        const baseName = 'my-image-source'
+        const ext = '.webp'
+        const src = `${baseName}${ext}`
+        let srcset = `${src} 100w, ${src} 500w`
+        const wrapper = shallowMount(BImage, {
+            props: {
+                src,
+                srcset
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.computedSrcset).toBe(srcset)
+        expect(vm.computedSizes).toBe(`${clientWidth}px`)
+
+        const webpFallback = '.jpg'
+        srcset = `${baseName}${webpFallback} 100w, ${baseName}${webpFallback} 500w`
+        await wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedSrcset).toBe(srcset)
+
+        srcset = `${baseName}-200${webpFallback} 200w,${baseName}-500${webpFallback} 500w`
+        await wrapper.setProps({
+            srcset: undefined,
+            srcsetSizes: [200, 500]
+        })
+        expect(vm.computedSrcset).toBe(srcset)
+
+        srcset = `${baseName}${webpFallback}?s=200 200w,${baseName}${webpFallback}?s=500 500w`
+        await wrapper.setProps({
+            srcsetFormatter: (src, size) => `${src}?s=${size}`
+        })
+        expect(vm.computedSrcset).toBe(srcset)
+    })
+
+    it('manage ratio as expected', async () => {
+        const src = 'my-image-source.webp'
+        let ratio = null
+        const wrapper = shallowMount(BImage, {
+            props: {
+                src
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.imgClasses['has-ratio']).toBeFalsy()
+
+        ratio = '16by9'
+        await wrapper.setProps({
+            ratio
+        })
+        expect(vm.imgClasses['has-ratio']).toBeTruthy()
+        expect(vm.figureClasses[`is-${ratio}`]).toBeTruthy()
+
+        ratio = '16by8'
+        await wrapper.setProps({
+            ratio
+        })
+        expect(vm.imgClasses['has-ratio']).toBeTruthy()
+        expect(vm.figureStyles?.paddingTop).toBe(`${8 / 16 * 100}%`)
+    })
+
+    it('adds custom class to image as expected', () => {
+        const src = 'my-image-source.webp'
+        const customClass = 'my-custom-class'
+        const wrapper = shallowMount(BImage, {
+            props: {
+                src,
+                customClass
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.imgClasses['my-custom-class']).toBeTruthy()
+    })
+
+    it('reset events before destroy', () => {
+        window.removeEventListener = vi.fn()
+
+        const wrapper = shallowMount(BImage)
+        wrapper.unmount()
+
+        expect(window.removeEventListener).toBeCalledWith('resize', expect.any(Function))
+    })
+
+    describe('has caption', () => {
+        it('as last element', async () => {
+            const wrapper = shallowMount(BImage, {
+                ...snapshotOptions,
+                slots: {
+                    caption: ['<div>This is a caption</div>']
+                }
+            })
+
+            await wrapper.vm.$nextTick() // waits for DOM updates
+
+            expect(wrapper.html()).toMatchSnapshot()
+        })
+
+        it('as first element', async () => {
+            const wrapper = shallowMount(BImage, {
+                ...snapshotOptions,
+                slots: {
+                    caption: ['<div>This is a caption</div>']
+                },
+                props: {
+                    captionFirst: true
+                }
+            })
+
+            await wrapper.vm.$nextTick() // waits for DOM updates
+
+            expect(wrapper.html()).toMatchSnapshot()
+        })
+    })
+})

package/src/components/image/Image.vue

@@ -0,0 +1,358 @@
+<template>
+    <figure
+        class="b-image-wrapper"
+        :class="figureClasses"
+        :style="figureStyles"
+    >
+        <figcaption v-if="isCaptionFirst">
+            <slot name="caption" />
+        </figcaption>
+        <transition name="fade">
+            <img
+                v-if="isDisplayed"
+                :srcset="computedSrcset"
+                :src="computedSrc"
+                :alt="alt"
+                :class="imgClasses"
+                :width="computedWidth"
+                :sizes="computedSizes"
+                :loading="computedNativeLazy"
+                @load="onLoad"
+                @error="onError"
+            >
+        </transition>
+        <transition name="fade">
+            <slot
+                v-if="isPlaceholderDisplayed"
+                name="placeholder"
+            >
+                <img
+                    :src="computedPlaceholder"
+                    :alt="alt"
+                    :class="imgClasses"
+                    class="placeholder"
+                >
+            </slot>
+        </transition>
+        <figcaption v-if="isCaptionLast">
+            <slot name="caption" />
+        </figcaption>
+    </figure>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import config from '../../utils/config'
+import { isWebpSupported } from '../../utils/helpers'
+
+// TODO: move to config
+// - BULMA_KNOWN_RATIO
+// - BulmaKnownRatio
+// - isBulmaKnownRatio
+const BULMA_KNOWN_RATIO = [
+    'square',
+    '1by1',
+    '5by4',
+    '4by3',
+    '3by2',
+    '5by3',
+    '16by9',
+    'b2y1',
+    '3by1',
+    '4by5',
+    '3by4',
+    '2by3',
+    '3by5',
+    '9by16',
+    '1by2',
+    '1by3'
+] as const
+
+type BulmaKnownRatio = typeof BULMA_KNOWN_RATIO[number]
+
+function isBulmaKnownRatio(value: unknown): value is BulmaKnownRatio {
+    return BULMA_KNOWN_RATIO.indexOf(value as BulmaKnownRatio) !== -1
+}
+
+/* Type of the `srcsetFormatter` prop. */
+export type SrcsetFormatter = (
+    src: string,
+    size: number,
+    vm: { formatSrcset: (src: string, size: number) => string }
+) => string
+
+export default defineComponent({
+    name: 'BImage',
+    props: {
+        src: String,
+        alt: String,
+        srcFallback: String,
+        webpFallback: {
+            type: String,
+            default: () => {
+                return config.defaultImageWebpFallback
+            }
+        },
+        lazy: {
+            type: Boolean,
+            default: () => {
+                return config.defaultImageLazy
+            }
+        },
+        responsive: {
+            type: Boolean,
+            default: () => {
+                return config.defaultImageResponsive
+            }
+        },
+        ratio: {
+            type: String,
+            default: () => {
+                return config.defaultImageRatio
+            }
+        },
+        placeholder: String,
+        srcset: String,
+        srcsetSizes: Array as PropType<number[]>,
+        srcsetFormatter: {
+            type: Function as PropType<SrcsetFormatter>,
+            default: ((src, size, vm) => {
+                if (typeof config.defaultImageSrcsetFormatter === 'function') {
+                    return config.defaultImageSrcsetFormatter(src, size)
+                } else {
+                    return vm.formatSrcset(src, size)
+                }
+            }) as SrcsetFormatter
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        captionFirst: {
+            type: Boolean,
+            default: false
+        },
+        customClass: String
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        load: (event: Event, src?: string) => true,
+        error: (event: Event, src?: string) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    data() {
+        return {
+            clientWidth: 0,
+            webpSupportVerified: false,
+            webpSupported: false,
+            useNativeLazy: false,
+            observer: null as (IntersectionObserver | null),
+            inViewPort: false,
+            loaded: false,
+            failed: false
+        }
+    },
+    computed: {
+        ratioPattern() {
+            return /([0-9]+)by([0-9]+)/
+        },
+        hasRatio() {
+            return this.ratio != null && this.ratioPattern.test(this.ratio)
+        },
+        figureClasses() {
+            const classes: Record<string, boolean> = { image: this.responsive }
+            if (this.hasRatio && isBulmaKnownRatio(this.ratio)) {
+                classes[`is-${this.ratio}`] = true
+            }
+            return classes
+        },
+        figureStyles() {
+            if (this.hasRatio && !isBulmaKnownRatio(this.ratio)) {
+                const ratioValues = this.ratioPattern.exec(this.ratio)!
+                return {
+                    paddingTop: `${(+ratioValues[2] / +ratioValues[1]) * 100}%`
+                }
+            }
+            return undefined
+        },
+        imgClasses(): Record<string, boolean> {
+            return {
+                'is-rounded': this.rounded,
+                'has-ratio': this.hasRatio,
+                ...(
+                    this.customClass ? { [this.customClass]: !!this.customClass } : {}
+                )
+            }
+        },
+        srcExt() {
+            return this.getExt(this.src)
+        },
+        isWepb() {
+            return this.srcExt === 'webp'
+        },
+        computedSrc() {
+            let src = this.src
+            if (this.failed && this.srcFallback) {
+                src = this.srcFallback
+            }
+            if (!this.webpSupported && this.isWepb && this.webpFallback) {
+                if (this.webpFallback.startsWith('.')) {
+                    return src!.replace(/\.webp/gi, `${this.webpFallback}`)
+                }
+                return this.webpFallback
+            }
+            return src
+        },
+        computedWidth() {
+            if (this.responsive && this.clientWidth > 0) {
+                return this.clientWidth
+            }
+            return undefined
+        },
+        computedNativeLazy() {
+            if (this.lazy && this.useNativeLazy) {
+                return 'lazy'
+            }
+            return undefined
+        },
+        isDisplayed() {
+            return (
+                (this.webpSupportVerified || !this.isWepb) &&
+                (!this.lazy || this.useNativeLazy || this.inViewPort)
+            )
+        },
+        placeholderExt() {
+            if (this.placeholder) {
+                return this.getExt(this.placeholder)
+            }
+            return undefined
+        },
+        isPlaceholderWepb() {
+            if (this.placeholder) {
+                return this.placeholderExt === 'webp'
+            }
+            return false
+        },
+        computedPlaceholder() {
+            if (!this.webpSupported && this.isPlaceholderWepb && this.webpFallback && this.webpFallback.startsWith('.')) {
+                return this.placeholder!.replace(/\.webp/gi, `${this.webpFallback}`)
+            }
+            return this.placeholder
+        },
+        isPlaceholderDisplayed() {
+            return (
+                !this.loaded &&
+                (
+                    this.$slots.placeholder || (
+                        this.placeholder &&
+                        (this.webpSupportVerified || !this.isPlaceholderWepb)
+                    )
+                )
+            )
+        },
+        computedSrcset() {
+            if (this.srcset) {
+                if (!this.webpSupported && this.isWepb && this.webpFallback && this.webpFallback.startsWith('.')) {
+                    return this.srcset.replace(/\.webp/gi, `${this.webpFallback}`)
+                }
+                return this.srcset
+            }
+            if (
+                this.srcsetSizes && Array.isArray(this.srcsetSizes) && this.srcsetSizes.length > 0
+            ) {
+                return this.srcsetSizes.map((size) => {
+                    return `${this.srcsetFormatter(this.computedSrc!, size, this)} ${size}w`
+                }).join(',')
+            }
+            return undefined
+        },
+        computedSizes() {
+            if (this.computedSrcset && this.computedWidth) {
+                return `${this.computedWidth}px`
+            }
+            return undefined
+        },
+        isCaptionFirst() {
+            return this.$slots.caption && this.captionFirst
+        },
+        isCaptionLast() {
+            return this.$slots.caption && !this.captionFirst
+        }
+    },
+    methods: {
+        getExt(filename?: string, clean = true) {
+            if (filename) {
+                const noParam = clean ? filename.split('?')[0] : filename
+                return noParam.split('.').pop()
+            }
+            return ''
+        },
+        setWidth() {
+            this.clientWidth = this.$el.clientWidth
+        },
+        formatSrcset(src: string, size: number) {
+            const ext = this.getExt(src, false)
+            const name = src.split('.').slice(0, -1).join('.')
+            return `${name}-${size}.${ext}`
+        },
+        onLoad(event: Event) {
+            this.loaded = true
+            this.emitSrc(event, (src) => this.$emit('load', event, src))
+        },
+        onError(event: Event) {
+            this.emitSrc(event, (src) => this.$emit('error', event, src))
+            if (!this.failed) {
+                this.failed = true
+            }
+        },
+        emitSrc(event: Event, emit: (src?: string) => void) {
+            const target = event.target! as HTMLImageElement
+            emit(target.currentSrc || target.src || this.computedSrc)
+        }
+    },
+    created() {
+        if (this.isWepb) {
+            isWebpSupported().then((supported) => {
+                this.webpSupportVerified = true
+                this.webpSupported = supported
+            })
+        }
+        if (this.lazy) {
+            // We use native lazy loading if supported
+            // We try to use Intersection Observer if native lazy loading is not supported
+            // We use the lazy attribute anyway if we cannot detect support (SSR for example).
+            const nativeLazySupported = typeof window !== 'undefined' && 'HTMLImageElement' in window && 'loading' in HTMLImageElement.prototype
+            const intersectionObserverSupported = typeof window !== 'undefined' && 'IntersectionObserver' in window
+            if (!nativeLazySupported && intersectionObserverSupported) {
+                this.observer = new IntersectionObserver((events) => {
+                    const { target, isIntersecting } = events[0]
+                    if (isIntersecting && !this.inViewPort) {
+                        this.inViewPort = true
+                        this.observer!.unobserve(target)
+                    }
+                })
+            } else {
+                this.useNativeLazy = true
+            }
+        }
+    },
+    mounted() {
+        if (this.lazy && this.observer) {
+            this.observer.observe(this.$el)
+        }
+        this.setWidth()
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.setWidth)
+        }
+    },
+    beforeUnmount() {
+        if (this.observer) {
+            this.observer.disconnect()
+        }
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.setWidth)
+        }
+    }
+})
+</script>

package/src/components/image/__snapshots__/Image.spec.ts.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BImage > has caption > as first element 1`] = `
+"<figure class="b-image-wrapper image">
+  <figcaption>
+    <div>This is a caption</div>
+  </figcaption><img class="" loading="lazy" width="500">
+  <!--v-if-->
+  <!--v-if-->
+</figure>"
+`;
+
+exports[`BImage > has caption > as last element 1`] = `
+"<figure class="b-image-wrapper image">
+  <!--v-if--><img class="" loading="lazy" width="500">
+  <!--v-if-->
+  <figcaption>
+    <div>This is a caption</div>
+  </figcaption>
+</figure>"
+`;
+
+exports[`BImage > render correctly 1`] = `
+"<figure class="b-image-wrapper image">
+  <!--v-if--><img class="" loading="lazy" width="500">
+  <!--v-if-->
+  <!--v-if-->
+</figure>"
+`;
+
+exports[`BImage > render placeholder correctly 1`] = `
+"<figure class="b-image-wrapper image">
+  <!--v-if-->
+  <!--v-if--><img src="my-image-source.png" alt="Alt text" class="placeholder">
+  <!--v-if-->
+</figure>"
+`;

package/src/components/image/index.ts

@@ -0,0 +1,16 @@
+import type { App } from 'vue'
+import Image from './Image.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Image)
+    }
+}
+
+export default Plugin
+
+export {
+    Image as BImage
+}