buefy 1.0.0 → 1.0.2

package/src/components/slider/SliderThumb.vue

@@ -0,0 +1,251 @@
+<template>
+    <div
+        class="b-slider-thumb-wrapper"
+        :class="{ 'is-dragging': dragging, 'has-indicator': indicator}"
+        :style="wrapperStyle"
+        v-bind="rootAttrs"
+    >
+        <b-tooltip
+            :label="formattedValue"
+            :type="type"
+            :always="dragging || isFocused || tooltipAlways"
+            :active="!disabled && tooltip"
+        >
+            <div
+                class="b-slider-thumb"
+                :tabindex="disabled ? undefined : 0"
+                v-bind="fallthroughAttrs"
+                @mousedown="onButtonDown"
+                @touchstart="onButtonDown"
+                @focus="onFocus"
+                @blur="onBlur"
+                @keydown.left.prevent="onLeftKeyDown"
+                @keydown.right.prevent="onRightKeyDown"
+                @keydown.down.prevent="onLeftKeyDown"
+                @keydown.up.prevent="onRightKeyDown"
+                @keydown.home.prevent="onHomeKeyDown"
+                @keydown.end.prevent="onEndKeyDown"
+            >
+                <span v-if="indicator">{{ formattedValue }}</span>
+            </div>
+        </b-tooltip>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import BTooltip from '../tooltip/Tooltip.vue'
+import config from '../../utils/config'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
+
+import { DISPLAY_FORMATS } from './types'
+import type { CustomFormatter, DisplayFormat, ISlider } from './types'
+
+export default defineComponent({
+    name: 'BSliderThumb',
+    components: {
+        BTooltip
+    },
+    mixins: [CompatFallthroughMixin],
+    props: {
+        modelValue: {
+            type: Number,
+            default: 0
+        },
+        type: {
+            type: String,
+            default: ''
+        },
+        tooltip: {
+            type: Boolean,
+            default: true
+        },
+        indicator: {
+            type: Boolean,
+            default: false
+        },
+        customFormatter: Function as PropType<CustomFormatter>,
+        format: {
+            type: String as PropType<DisplayFormat>,
+            default: 'raw',
+            validator: (value: DisplayFormat) => {
+                return DISPLAY_FORMATS.indexOf(value) >= 0
+            }
+        },
+        locale: {
+            type: [String, Array<string>],
+            default: () => {
+                return config.defaultLocale
+            }
+        },
+        tooltipAlways: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: {
+        dragend: () => true,
+        dragstart: () => true,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        'update:modelValue': (_value: number) => true
+    },
+    data() {
+        return {
+            isFocused: false,
+            dragging: false,
+            startX: 0,
+            startPosition: 0,
+            newPosition: null as number | null,
+            oldValue: this.modelValue
+        }
+    },
+    computed: {
+        parent() {
+            return this.$parent as unknown as ISlider
+        },
+        disabled() {
+            return this.parent.disabled
+        },
+        max() {
+            return this.parent.max
+        },
+        min() {
+            return this.parent.min
+        },
+        step() {
+            return this.parent.step
+        },
+        precision() {
+            return this.parent.precision
+        },
+        currentPosition() {
+            return `${(this.modelValue - this.min) / (this.max - this.min) * 100}%`
+        },
+        wrapperStyle() {
+            return { left: this.currentPosition }
+        },
+        formattedValue() {
+            if (typeof this.customFormatter !== 'undefined') {
+                return this.customFormatter(this.modelValue)
+            }
+
+            if (this.format === 'percent') {
+                return new Intl.NumberFormat(
+                    this.locale,
+                    {
+                        style: 'percent'
+                    }
+                ).format(((this.modelValue - this.min)) / (this.max - this.min))
+            }
+
+            return new Intl.NumberFormat(this.locale).format(this.modelValue)
+        }
+    },
+    methods: {
+        onFocus() {
+            this.isFocused = true
+        },
+        onBlur() {
+            this.isFocused = false
+        },
+        onButtonDown(event: MouseEvent | TouchEvent) {
+            if (this.disabled) return
+            event.preventDefault()
+            this.onDragStart(event)
+            if (typeof window !== 'undefined') {
+                document.addEventListener('mousemove', this.onDragging)
+                document.addEventListener('touchmove', this.onDragging)
+                document.addEventListener('mouseup', this.onDragEnd)
+                document.addEventListener('touchend', this.onDragEnd)
+                document.addEventListener('contextmenu', this.onDragEnd)
+            }
+        },
+        onLeftKeyDown() {
+            if (this.disabled || this.modelValue === this.min) return
+            this.newPosition = parseFloat(this.currentPosition) -
+                this.step / (this.max - this.min) * 100
+            this.setPosition(this.newPosition)
+            this.parent.emitValue('change')
+        },
+        onRightKeyDown() {
+            if (this.disabled || this.modelValue === this.max) return
+            this.newPosition = parseFloat(this.currentPosition) +
+                this.step / (this.max - this.min) * 100
+            this.setPosition(this.newPosition)
+            this.parent.emitValue('change')
+        },
+        onHomeKeyDown() {
+            if (this.disabled || this.modelValue === this.min) return
+            this.newPosition = 0
+            this.setPosition(this.newPosition)
+            this.parent.emitValue('change')
+        },
+        onEndKeyDown() {
+            if (this.disabled || this.modelValue === this.max) return
+            this.newPosition = 100
+            this.setPosition(this.newPosition)
+            this.parent.emitValue('change')
+        },
+        onDragStart(event: MouseEvent | TouchEvent) {
+            this.dragging = true
+            this.$emit('dragstart')
+            this.startX = event.type === 'touchstart'
+                ? (event as TouchEvent).touches[0].clientX
+                : (event as MouseEvent).clientX
+            this.startPosition = parseFloat(this.currentPosition)
+            this.newPosition = this.startPosition
+        },
+        onDragging(event: MouseEvent | TouchEvent) {
+            if (this.dragging) {
+                const clientX = event.type === 'touchmove'
+                    ? (event as TouchEvent).touches[0].clientX
+                    : (event as MouseEvent).clientX
+                const diff = (clientX - this.startX) / this.parent.sliderSize() * 100
+                this.newPosition = this.startPosition + diff
+                this.setPosition(this.newPosition)
+            }
+        },
+        onDragEnd() {
+            this.dragging = false
+            this.$emit('dragend')
+            if (this.modelValue !== this.oldValue) {
+                this.parent.emitValue('change')
+            }
+            this.setPosition(this.newPosition)
+            if (typeof window !== 'undefined') {
+                document.removeEventListener('mousemove', this.onDragging)
+                document.removeEventListener('touchmove', this.onDragging)
+                document.removeEventListener('mouseup', this.onDragEnd)
+                document.removeEventListener('touchend', this.onDragEnd)
+                document.removeEventListener('contextmenu', this.onDragEnd)
+            }
+        },
+        setPosition(percent: number | null) {
+            if (percent === null || isNaN(percent)) return
+            if (percent < 0) {
+                percent = 0
+            } else if (percent > 100) {
+                percent = 100
+            }
+            const stepLength = 100 / ((this.max - this.min) / this.step)
+            const steps = Math.round(percent / stepLength)
+            let value = steps * stepLength / 100 * (this.max - this.min) + this.min
+            value = parseFloat(value.toFixed(this.precision))
+            this.$emit('update:modelValue', value)
+            if (!this.dragging && value !== this.oldValue) {
+                this.oldValue = value
+            }
+        }
+    },
+
+    beforeUnmount() {
+        document.removeEventListener('mousemove', this.onDragging)
+        document.removeEventListener('touchmove', this.onDragging)
+        document.removeEventListener('mouseup', this.onDragEnd)
+        document.removeEventListener('touchend', this.onDragEnd)
+        document.removeEventListener('contextmenu', this.onDragEnd)
+    }
+})
+</script>

package/src/components/slider/SliderTick.spec.ts

@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BSliderTick from '@components/slider/SliderTick.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BSliderTick>>
+const BSlider = {
+    data() {
+        return {
+            _isSlider: true
+        }
+    },
+    template: '<div><slot /></div>'
+}
+
+describe('BSliderTick', () => {
+    beforeEach(() => {
+        wrapper = mount(BSlider, {
+            slots: {
+                default: BSliderTick
+            }
+        }).findComponent(BSliderTick)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BSliderTick')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+})

package/src/components/slider/SliderTick.vue

@@ -0,0 +1,50 @@
+<template>
+    <div
+        class="b-slider-tick"
+        :class="{ 'is-tick-hidden': hidden }"
+        :style="getTickStyle(position)"
+    >
+        <span v-if="$slots.default" class="b-slider-tick-label">
+            <slot />
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import type { ISlider } from './types'
+
+export default defineComponent({
+    name: 'BSliderTick',
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        parent() {
+            return this.$parent as unknown as ISlider
+        },
+        position() {
+            const pos = (this.value - this.parent.min) /
+                (this.parent.max - this.parent.min) * 100
+            return (pos >= 0 && pos <= 100) ? pos : 0
+        },
+        hidden() {
+            return this.value === this.parent.min || this.value === this.parent.max
+        }
+    },
+    methods: {
+        getTickStyle(position: number) {
+            return { left: position + '%' }
+        }
+    },
+    created() {
+        if (!this.parent.$data._isSlider) {
+            throw new Error('You should wrap bSliderTick on a bSlider')
+        }
+    }
+})
+</script>

package/src/components/slider/__snapshots__/Slider.spec.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BSlider > render correctly 1`] = `
+"<div class="b-slider is-primary">
+  <div class="b-slider-track">
+    <div class="b-slider-fill" style="left: 0%; width: 0%;"></div>
+    <!--v-if-->
+    <b-slider-thumb-stub modelvalue="0" type="is-primary" tooltip="true" indicator="false" format="raw" tooltipalways="false" role="slider" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" aria-valuenow="0"></b-slider-thumb-stub>
+    <!--v-if-->
+  </div>
+</div>"
+`;

package/src/components/slider/__snapshots__/SliderThumb.spec.ts.snap

@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BSliderThumb > render correctly 1`] = `
+"<div class="b-slider-thumb-wrapper" style="left: 0%;">
+  <div class="b-tooltip is-medium">
+    <transition-stub name="fade" appear="false" persisted="true" css="true">
+      <div class="tooltip-content" style="display: none;">0</div>
+    </transition-stub>
+    <div class="tooltip-trigger">
+      <div class="b-slider-thumb" tabindex="0">
+        <!--v-if-->
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/src/components/slider/__snapshots__/SliderTick.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BSliderTick > render correctly 1`] = `
+"<div class="b-slider-tick" style="left: 0%;">
+  <!--v-if-->
+</div>"
+`;

package/src/components/slider/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+import Slider from './Slider.vue'
+import SliderTick from './SliderTick.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Slider)
+        registerComponent(Vue, SliderTick)
+    }
+}
+
+export default Plugin
+
+export {
+    Slider as BSlider,
+    SliderTick as BSliderTick
+}

package/src/components/slider/types.ts

@@ -0,0 +1,34 @@
+// Types shared among the slider components.
+
+import type { ComponentPublicInstance } from 'vue'
+
+/* eslint-disable @typescript-eslint/ban-types */
+// Interface that `Slider` is supposed to implement.
+export type ISlider = ComponentPublicInstance<
+    {
+        disabled: boolean,
+        min: number,
+        max: number,
+        step: number,
+        precision: number
+    }, // P(rops)
+    {}, // B (raw bindings)
+    {
+        _isSlider: true
+    }, // D(ata)
+    {}, // C(omputed)
+    {
+        sliderSize: () => number,
+        emitValue: (event: 'change' | 'dragging' | 'update:modelValue') => void
+    } // M(ethods)
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+// values for the `format` prop
+export const DISPLAY_FORMATS = ['raw', 'percent'] as const
+
+// type of the `format` prop
+export type DisplayFormat = typeof DISPLAY_FORMATS[number]
+
+// type of the `customFormatter` prop
+export type CustomFormatter = (value: number) => string

package/src/components/snackbar/Snackbar.spec.ts

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import BSnackbar from '@components/snackbar/Snackbar.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BSnackbar>>
+
+describe('BSnackbar', () => {
+    HTMLElement.prototype.insertAdjacentElement = vi.fn()
+    beforeEach(() => {
+        wrapper = shallowMount(BSnackbar, {
+            attachTo: document.body,
+            props: {
+                onAction: vi.fn()
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BSnackbar')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('calls the action listener and close on action', async () => {
+        wrapper.vm.close = vi.fn()
+        wrapper.vm.action()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.onAction).toHaveBeenCalled()
+        expect(wrapper.vm.close).toHaveBeenCalled()
+    })
+})

package/src/components/snackbar/Snackbar.vue

@@ -0,0 +1,88 @@
+<template>
+    <transition
+        :enter-active-class="transition.enter"
+        :leave-active-class="transition.leave"
+    >
+        <div
+            v-show="isActive"
+            class="snackbar"
+            :class="[type,position]"
+            @mouseenter="pause"
+            @mouseleave="removePause"
+            :role="actionText ? 'alertdialog' : 'alert'"
+        >
+            <template v-if="$slots.default">
+                <slot />
+            </template>
+            <template v-else>
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <div class="text" v-html="message" />
+            </template>
+            <div
+                v-if="cancelText"
+                class="action is-light is-cancel"
+                @click="close"
+            >
+                <button class="button">
+                    {{ cancelText }}
+                </button>
+            </div>
+            <div
+                v-if="actionText"
+                class="action"
+                @click="action"
+                :class="type"
+            >
+                <button class="button">
+                    {{ actionText }}
+                </button>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import config from '../../utils/config'
+import type { ExtractComponentProps } from '../../utils/helpers'
+import NoticeMixin from '../../utils/NoticeMixin'
+
+const Snackbar = defineComponent({
+    name: 'BSnackbar',
+    mixins: [NoticeMixin],
+    props: {
+        actionText: {
+            type: String,
+            default: 'OK'
+        },
+        onAction: {
+            type: Function as PropType<() => void>,
+            default: () => {}
+        },
+        cancelText: {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            newDuration: this.duration || config.defaultSnackbarDuration
+        }
+    },
+    methods: {
+        /*
+        * Click listener.
+        * Call action prop before closing (from Mixin).
+        */
+        action() {
+            this.onAction()
+            this.close()
+        }
+    }
+})
+
+export type SnackbarProps = ExtractComponentProps<typeof Snackbar>
+
+export default Snackbar
+</script>

package/src/components/snackbar/__snapshots__/Snackbar.spec.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BSnackbar > render correctly 1`] = `
+"<transition-stub enteractiveclass="fadeInDown" leaveactiveclass="fadeOut" appear="false" persisted="true" css="true">
+  <div class="snackbar is-dark is-top" role="alertdialog" style="">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div class="text"></div>
+    <!--v-if-->
+    <div class="action is-dark"><button class="button">OK</button></div>
+  </div>
+</transition-stub>"
+`;

package/src/components/snackbar/index.ts

@@ -0,0 +1,118 @@
+import { createApp, h as createElement } from 'vue'
+import type { App, ComponentPublicInstance, VNode } from 'vue'
+
+import Snackbar from './Snackbar.vue'
+import type { SnackbarProps } from './Snackbar.vue'
+
+import config from '../../utils/config'
+import { copyAppContext, getComponentFromVNode } from '../../utils/helpers'
+import { registerComponentProgrammatic } from '../../utils/plugins'
+
+export type SnackbarOpenParams = Omit<SnackbarProps, 'message'> & {
+    // programmatically opened snackbar can have VNode(s) as the message
+    message?: string | VNode | (string | VNode)[]
+    onClose?: () => void
+}
+
+// Minimal definition of a programmatically opened snackbar.
+//
+// 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 SnackbarProgrammaticInstance = ComponentPublicInstance<
+    {}, // P
+    {}, // B
+    {}, // D
+    {}, // C
+    { close: () => void } // M
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+class SnackbarProgrammatic {
+    app: App | undefined // may be undefined in the testing environment
+
+    constructor(app?: App) {
+        this.app = app
+    }
+
+    open(params: SnackbarOpenParams | string) {
+        if (typeof params === 'string') {
+            params = {
+                message: params
+            }
+        }
+
+        let slot: SnackbarOpenParams['message']
+        let { message, ...restParams } = params
+        if (typeof message !== 'string') {
+            slot = message
+            message = undefined
+        }
+        const propsData: SnackbarProps = {
+            type: 'is-success',
+            position: config.defaultSnackbarPosition || 'is-bottom-right',
+            queue: true,
+            message,
+            ...restParams
+        }
+        const container = document.createElement('div')
+        // Vue 3 requires a new app to mount another component
+        const vueInstance = createApp({
+            data() {
+                return {
+                    snackbarVNode: null
+                }
+            },
+            methods: {
+                close() {
+                    const snackbar = getComponentFromVNode(this.snackbarVNode)
+                    if (snackbar) {
+                        (snackbar as InstanceType<typeof Snackbar>).close()
+                    }
+                }
+            },
+            render() {
+                this.snackbarVNode = createElement(
+                    Snackbar,
+                    {
+                        ...propsData,
+                        onClose() {
+                            if (typeof propsData.onClose === 'function') {
+                                propsData.onClose()
+                            }
+                            // timeout for the animation complete
+                            // before unmounting
+                            setTimeout(() => {
+                                vueInstance.unmount()
+                            }, 150)
+                        }
+                    },
+                    slot != null ? { default: () => slot } : undefined
+                )
+                return this.snackbarVNode
+            }
+        })
+        if (this.app) {
+            copyAppContext(this.app, vueInstance)
+        } else {
+            // adds $buefy global property so that
+            // this.$buefy.globalNoticeInterval is available
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            vueInstance.config.globalProperties.$buefy = {} as any
+        }
+        return vueInstance.mount(container) as SnackbarProgrammaticInstance
+    }
+}
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponentProgrammatic(Vue, 'snackbar', new SnackbarProgrammatic(Vue))
+    }
+}
+
+export default Plugin
+
+export {
+    SnackbarProgrammatic,
+    Snackbar as BSnackbar
+}