buefy 1.0.0 → 1.0.2

package/src/components/colorpicker/Colorpicker.vue

@@ -0,0 +1,416 @@
+<template>
+    <div
+        class="colorpicker control"
+        :class="[size, {'is-expanded': expanded}]"
+    >
+        <b-dropdown
+            v-if="!isMobile || inline"
+            ref="dropdown"
+            :position="position"
+            :expanded="expanded"
+            :disabled="disabled"
+            :inline="inline"
+            :mobile-modal="mobileModal"
+            :trap-focus="trapFocus"
+            :aria-role="ariaRole"
+            :append-to-body="appendToBody"
+            append-to-body-copy-parent
+            @active-change="onActiveChange"
+        >
+            <template #trigger v-if="!inline">
+                <slot name="trigger">
+                    <b-button
+                        :style="triggerStyle"
+                        :expanded="expanded"
+                        :disabled="disabled"
+                    >
+                        <span class="color-name">{{ colorFormatter(computedValue) }}</span>
+                    </b-button>
+                </slot>
+            </template>
+
+            <b-dropdown-item
+                :disabled="disabled"
+                :focusable="focusable"
+                custom
+                :class="{'dropdown-horizontal-colorpicker': horizontalColorPicker}"
+            >
+                <div>
+                    <header class="colorpicker-header">
+                        <template v-if="$slots.header !== undefined && $slots.header.length">
+                            <slot name="header" />
+                        </template>
+                    </header>
+                    <div class="colorpicker-content">
+                        <b-colorpicker-h-s-l-representation-square
+                            v-if="representation === 'square'"
+                            :value="computedValue"
+                            @input="updateColor"
+                        />
+                        <b-colorpicker-h-s-l-representation-triangle
+                            v-else
+                            :value="computedValue"
+                            @input="updateColor"
+                        />
+                    </div>
+                </div>
+                <footer class="colorpicker-footer">
+                    <b-colorpicker-alpha-slider
+                        v-if="alpha"
+                        :value="computedValue.alpha"
+                        @input="updateAlpha"
+                        :color="computedValue"
+                    />
+                    <slot name="footer" :color="computedValue">
+                        <b-field class="colorpicker-fields" grouped>
+                            <b-field horizontal label="R">
+                                <b-input
+                                    type="number"
+                                    v-model.number="computedValue.red"
+                                    @update:model-value="updateRGB"
+                                    size="is-small"
+                                    aria-label="Red"
+                                />
+                            </b-field>
+                            <b-field horizontal label="G">
+                                <b-input
+                                    type="number"
+                                    v-model.number="computedValue.green"
+                                    @update:model-value="updateRGB"
+                                    size="is-small"
+                                    aria-label="Green"
+                                />
+                            </b-field>
+                            <b-field horizontal label="B">
+                                <b-input
+                                    type="number"
+                                    v-model.number="computedValue.blue"
+                                    @update:model-value="updateRGB"
+                                    size="is-small"
+                                    aria-label="Blue"
+                                />
+                            </b-field>
+                        </b-field>
+                    </slot>
+                </footer>
+            </b-dropdown-item>
+        </b-dropdown>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { DefineComponent, PropType } from 'vue'
+
+import FormElementMixin from '../../utils/FormElementMixin'
+import { isMobile } from '../../utils/helpers'
+import config from '../../utils/config'
+import Color from '../../utils/color'
+import type { Rgb } from '../../utils/color'
+
+import BButton from '../button/Button.vue'
+import BDropdown from '../dropdown/Dropdown.vue'
+import BDropdownItem from '../dropdown/DropdownItem.vue'
+import BInput from '../input/Input.vue'
+import BField from '../field/Field.vue'
+
+import BColorpickerHSLRepresentationTriangle from './ColorpickerHSLRepresentationTriangle.vue'
+import BColorpickerHSLRepresentationSquare from './ColorpickerHSLRepresentationSquare.vue'
+import BColorpickerAlphaSlider from './ColorpickerAlphaSlider.vue'
+
+type BDropdownInstance = InstanceType<typeof BDropdown>
+
+// Interface of the `Colorpicker` component.
+// Gives a separate definition to avoid circular dependencies.
+// TODO: we have to learn about which properties are to be exposed to the
+// implementors of custom `ColorFormatter`, and `ColorParser`.
+/* eslint-disable @typescript-eslint/ban-types */
+export type IColorpicker = Omit<DefineComponent<
+    {}, // P(rops)
+    {}, // B (raw bindings)
+    {}, // D(ata)
+    {}, // C(omputed)
+    {} // M(ethods)
+>, '$emit'> // default E(mits) type parameter would causes a `$emit` discrepancy
+/* eslint-enable @typescript-eslint/ban-types */
+
+export type ColorFormatter = (color: Color, vm?: IColorpicker) => string
+export type ColorParser = (color: string | Rgb, vm?: IColorpicker) => Color
+
+const defaultColorFormatter: ColorFormatter = (color) => {
+    if (color.alpha < 1) {
+        return color.toString('hexa')
+    } else {
+        return color.toString('hex')
+    }
+}
+
+const defaultColorParser: ColorParser = (color) => {
+    return Color.parse(color)
+}
+
+export default defineComponent({
+    name: 'BColorpicker',
+    components: {
+        BColorpickerHSLRepresentationTriangle,
+        BColorpickerHSLRepresentationSquare,
+        BColorpickerAlphaSlider,
+        BInput,
+        BField,
+        BButton,
+        BDropdown,
+        BDropdownItem
+    },
+    mixins: [FormElementMixin],
+    inheritAttrs: false,
+    provide() {
+        return {
+            $colorpicker: this
+        }
+    },
+    props: {
+        modelValue: {
+            type: [String, Object] as PropType<string | Rgb>,
+            validator(value: string | Rgb) {
+                return typeof value === 'string' ||
+                    (
+                        typeof value === 'object' &&
+                        typeof value.red === 'number' &&
+                        typeof value.green === 'number' &&
+                        typeof value.blue === 'number'
+                    )
+            }
+        },
+        mobileNative: {
+            type: Boolean,
+            default: false
+        },
+        representation: {
+            type: String,
+            default: 'triangle',
+            value(value: string) {
+                return ['triangle', 'square'].some((r) => r === value)
+            }
+        },
+        inline: Boolean,
+        disabled: Boolean,
+        horizontalColorPicker: {
+            type: Boolean,
+            default: false
+        },
+        colorFormatter: {
+            type: Function as PropType<ColorFormatter>,
+            default: (color: Color, vm?: IColorpicker) => {
+                if (typeof config.defaultColorFormatter === 'function') {
+                    return config.defaultColorFormatter(color)
+                } else {
+                    return defaultColorFormatter(color, vm)
+                }
+            }
+        },
+        colorParser: {
+            type: Function as PropType<ColorParser>,
+            default: (color: string, vm?: IColorpicker) => {
+                if (typeof config.defaultColorParser === 'function') {
+                    return config.defaultColorParser(color)
+                } else {
+                    return defaultColorParser(color, vm)
+                }
+            }
+        },
+        alpha: {
+            type: Boolean,
+            default: false
+        },
+        expanded: Boolean,
+        position: String,
+        mobileModal: {
+            type: Boolean,
+            default: () => config.defaultDatepickerMobileModal
+        },
+        focusable: {
+            type: Boolean,
+            default: true
+        },
+        trapFocus: {
+            type: Boolean,
+            default: () => config.defaultTrapFocus
+        },
+        openOnFocus: Boolean,
+        closeOnClick: Boolean,
+        appendToBody: Boolean
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'active-change': (_active: boolean) => true,
+        'update:modelValue': (_value: Color) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    data() {
+        return {
+            color: this.parseColor(this.modelValue)
+        }
+    },
+    computed: {
+        computedValue: {
+            set(value: string | Rgb) {
+                this.color = this.parseColor(value)
+            },
+            get() {
+                return this.color
+            }
+        },
+        background() {
+            if (this.alpha) {
+                return `linear-gradient(
+                    45deg,
+                    ${this.computedValue.toString('hex')} 50%,
+                    ${this.computedValue.toString('hexa')} 50%
+                )`
+            } else {
+                const hex = this.computedValue.toString('hex')
+                return `linear-gradient(
+                    45deg,
+                    ${hex} 50%,
+                    ${hex} 50%
+                )`
+            }
+        },
+        triggerStyle() {
+            const { red, green, blue } = this.computedValue
+            const light = (red * 0.299 + green * 0.587 + blue * 0.114) > 186
+
+            return {
+                backgroundColor: '#ffffff',
+                backgroundImage: `
+                    ${this.background},
+                    linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7),
+                    linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7)
+                `,
+                backgroundSize: '100% 100%, 16px 16px, 16px 16px',
+                backgroundPosition: '0 0, 8px 8px, 0 0',
+                color: light ? '#000000' : '#FFFFFF',
+                textShadow: `0 0 2px ${light ? '#FFFFFFAA' : '#000000AA'}`
+            }
+        },
+
+        isMobile() {
+            return this.mobileNative && isMobile.any()
+        },
+
+        ariaRole() {
+            if (!this.inline) {
+                return 'dialog'
+            } else {
+                return undefined
+            }
+        }
+    },
+    watch: {
+        modelValue(value) {
+            this.computedValue = new Color(value)
+        }
+    },
+    methods: {
+        parseColor(color: string | Rgb | Color) {
+            try {
+                return this.colorParser(color)
+            } catch (e) {
+                return new Color()
+            }
+        },
+        updateColor(value: Color) {
+            value.alpha = this.computedValue.alpha
+            this.computedValue = value
+            this.$emit('update:modelValue', value)
+        },
+        updateAlpha(alpha: number) {
+            this.computedValue.alpha = alpha
+            this.$emit('update:modelValue', this.computedValue)
+        },
+        updateRGB() {
+            this.$emit('update:modelValue', this.computedValue)
+        },
+        /*
+         * Format color into string
+         */
+        formatValue(value: Color) { // FIXME: unused?
+            return value ? this.colorFormatter(value, this) : null
+        },
+
+        /*
+         * Toggle datepicker
+         */
+        togglePicker(active: boolean) {
+            if (this.$refs.dropdown) {
+                const isActive = typeof active === 'boolean'
+                    ? active
+                    : !(this.$refs.dropdown as BDropdownInstance).isActive
+                if (isActive) {
+                    (this.$refs.dropdown as BDropdownInstance).isActive = isActive
+                } else if (this.closeOnClick) {
+                    (this.$refs.dropdown as BDropdownInstance).isActive = isActive
+                }
+            }
+        },
+
+        /*
+         * Call default onFocus method and show datepicker
+         */
+        handleOnFocus(event: Event) {
+            this.onFocus(event)
+            if (this.openOnFocus) {
+                this.togglePicker(true)
+            }
+        },
+
+        /*
+         * Toggle dropdown
+         */
+        // I decided to comment out the following unused method until we come
+        // back to deal with the `open-on-focus` and `close-on-click` props
+        /*
+        toggle() {
+            if (this.mobileNative && this.isMobile) {
+                const input = this.$refs.input.$refs.input
+                input.focus()
+                input.click()
+                return
+            }
+            (this.$refs.dropdown as BDropdownInstance).toggle()
+        }, */
+
+        /*
+         * Avoid dropdown toggle when is already visible
+         */
+        onInputClick(event: Event) {
+            if ((this.$refs.dropdown as BDropdownInstance).isActive) {
+                event.stopPropagation()
+            }
+        },
+
+        /*
+         * Keypress event that is bound to the document.
+         */
+        keyPress({ key }: KeyboardEvent) {
+            const dropdown = this.$refs.dropdown as BDropdownInstance
+            if (dropdown && dropdown.isActive && (key === 'Escape' || key === 'Esc')) {
+                this.togglePicker(false)
+            }
+        },
+
+        /*
+         * Emit 'blur' event on dropdown is not active (closed)
+         */
+        onActiveChange(value: boolean) {
+            if (!value) {
+                this.onBlur()
+            }
+            /*
+             * Emit 'active-change' when on dropdown active state change
+             */
+            this.$emit('active-change', value)
+        }
+    }
+})
+</script>

package/src/components/colorpicker/ColorpickerAlphaSlider.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import Color from '@utils/color'
+import BColorpickerAlphaSlider from '@components/colorpicker/ColorpickerAlphaSlider.vue'
+
+describe('BColorpickerAlphaSlider', () => {
+    it('render correctly', () => {
+        const wrapper = shallowMount(BColorpickerAlphaSlider, {
+            props: {
+                value: 100,
+                color: Color.parse('#123456')
+            }
+        })
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+})

package/src/components/colorpicker/ColorpickerAlphaSlider.vue

@@ -0,0 +1,205 @@
+<template>
+    <div
+        class="b-colorpicker-alpha-slider"
+        :style="style"
+        @click="clickAlpha"
+        @keydown="alphaKeyPress"
+        @mousedown="startMouseCapture"
+        @touchstart.prevent="startMouseCapture"
+    >
+        <div
+            ref="alphaCursor"
+            role="slider"
+            class="alpha-range-thumb"
+            tabindex="0"
+            aria-label="Tranparency"
+            aria-valuemin="0"
+            :aria-valuenow="percent"
+            aria-valuemax="100"
+            :style="{ left: `${percent}%` }"
+        >
+            <b-tooltip
+                :label="`${percent}%`"
+                :always="captureMouse"
+                position="is-top"
+            >
+                &nbsp;
+            </b-tooltip>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import Color from '../../utils/color'
+import BTooltip from '../tooltip/Tooltip.vue'
+
+export default defineComponent({
+    name: 'BColorpickerAlphaSlider',
+    components: {
+        BTooltip
+    },
+    props: {
+        value: {
+            type: Number,
+            validator: (value: number) => value >= 0 && value < 256
+        },
+        color: [String, Object]
+    },
+    emits: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        input: (_value: number) => true
+    },
+    data() {
+        const color = Color.parse(this.color)
+
+        color.alpha = 0
+        return {
+            startColor: color.toString('hex'),
+            endColor: color.toString('hexa'),
+            percent: Math.round((1 - this.value! / 255) * 100),
+            captureMouse: false,
+            clientOffset: {
+                cx: -1,
+                cy: -1,
+                width: 0,
+                height: 0
+            }
+        }
+    },
+    computed: {
+        style() {
+            return {
+                backgroundImage:
+                    `linear-gradient(90deg, ${this.startColor} 0%, ${this.endColor} 100%),
+                    linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7),
+                    linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7)`,
+                backgroundSize: '100% 100%, 1em 1em, 1em 1em',
+                backgroundPosition: '0 0, .5em .5em, 0 0'
+            }
+        }
+    },
+    watch: {
+        value(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                this.percent = Math.round((1 - newValue / 255) * 100)
+            }
+        },
+        color(newColor) {
+            const color = Color.parse(newColor)
+
+            color.alpha = 0
+            this.startColor = color.toString('hex')
+            this.endColor = color.toString('hexa')
+        },
+        captureMouse(newValue, oldValue) {
+            if (oldValue === false && newValue !== false) {
+                const rect = this.$el.getBoundingClientRect()
+                // Caching offset
+                this.clientOffset.cx = rect.x + rect.width / 2
+                this.clientOffset.cy = rect.y + rect.height / 2
+                this.clientOffset.width = rect.width
+                this.clientOffset.height = rect.height
+            }
+        }
+    },
+    methods: {
+        increaseAlpha(value = 1) {
+            this.percent = Math.max(0, Math.min(100, this.percent + value))
+        },
+        decreaseAlpha(value = 0.01) {
+            this.increaseAlpha(-value)
+        },
+        alphaKeyPress(event: KeyboardEvent) {
+            let handled = false
+            switch (event.key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    this.increaseAlpha()
+                    handled = true
+                    break
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    this.decreaseAlpha()
+                    handled = true
+                    break
+                case 'Home':
+                    this.decreaseAlpha(this.percent)
+                    handled = true
+                    break
+                case 'End':
+                    this.increaseAlpha(100 - this.percent)
+                    handled = true
+                    break
+                case 'PageUp':
+                    this.increaseAlpha(10 - (this.percent % 10))
+                    handled = true
+                    break
+                case 'PageDown':
+                    this.decreaseAlpha(this.percent % 10)
+                    handled = true
+                    break
+            }
+            if (handled) {
+                event.preventDefault()
+                event.stopPropagation()
+                this.emitAlpha()
+            }
+        },
+        clickAlpha(event: MouseEvent) {
+            this.startMouseCapture(event)
+            this.trackMouse(event)
+            this.stopMouseCapture(event);
+            (this.$refs.alphaCursor as HTMLElement).focus()
+        },
+        startMouseCapture(event: Event) {
+            event.stopPropagation()
+
+            this.captureMouse = true
+        },
+        trackMouse(event: MouseEvent | TouchEvent) {
+            if (this.captureMouse === false) {
+                return
+            }
+            event.preventDefault()
+            event.stopPropagation()
+
+            let [mouseX] = [0, 0]
+            const touches = (event as TouchEvent).touches
+            if (typeof touches !== 'undefined' && touches.length) {
+                [mouseX] = [touches[0].clientX]
+            } else {
+                [mouseX] = [(event as MouseEvent).clientX]
+            }
+
+            const ratio = 0.5 + (this.clientOffset.cx - mouseX) / this.clientOffset.width
+            this.percent = Math.round(100 - Math.max(0, Math.min(1, ratio)) * 100)
+            this.emitAlpha()
+        },
+        stopMouseCapture(event: Event) {
+            if (this.captureMouse !== false) {
+                event.preventDefault()
+                event.stopPropagation();
+                (this.$refs.alphaCursor as HTMLElement).focus()
+            }
+            this.captureMouse = false
+        },
+        emitAlpha() {
+            this.$emit('input', (1 - this.percent / 100) * 255)
+        }
+    },
+    mounted() {
+        window.addEventListener('mousemove', this.trackMouse)
+        window.addEventListener('touchmove', this.trackMouse, { passive: false })
+        window.addEventListener('mouseup', this.stopMouseCapture)
+        window.addEventListener('touchend', this.stopMouseCapture)
+    },
+    beforeUnmount() {
+        window.removeEventListener('mousemove', this.trackMouse)
+        window.removeEventListener('touchmove', this.trackMouse)
+        window.removeEventListener('mouseup', this.stopMouseCapture)
+        window.removeEventListener('touchend', this.stopMouseCapture)
+    }
+})
+</script>

package/src/components/colorpicker/ColorpickerHSLRepresentationSquare.spec.ts

@@ -0,0 +1,23 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import Color from '@utils/color'
+import BColorpickerHSLRepresentationSquare from '@components/colorpicker/ColorpickerHSLRepresentationSquare.vue'
+
+let defaultProps: () => { value: Color }
+
+describe('BColorpickerHSLRepresentationSquare', () => {
+    beforeEach(() => {
+        defaultProps = () => ({
+            value: Color.parse('#123456')
+        })
+    })
+    it('render correctly', () => {
+        const wrapper = shallowMount(BColorpickerHSLRepresentationSquare, {
+            props: {
+                ...defaultProps()
+            }
+        })
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+})