buefy 0.9.13 → 0.9.17

package/src/components/colorpicker/Colorpicker.vue

@@ -0,0 +1,354 @@
+<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"
+            :aria-modal="!inline"
+            :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(colorSelected) }}</span>
+                    </b-button>
+                </slot>
+            </template>
+
+            <b-dropdown-item
+                :disabled="disabled"
+                :focusable="focusable"
+                custom
+                :class="{'dropdown-horizonal-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="colorSelected"
+                            @input="updateColor"
+                        />
+                        <b-colorpicker-h-s-l-representation-triangle
+                            v-else
+                            :value="colorSelected"
+                            @input="updateColor"
+                        />
+                    </div>
+                </div>
+                <footer class="colorpicker-footer">
+                    <b-colorpicker-alpha-slider
+                        v-if="alpha"
+                        v-model="colorSelected.alpha"
+                        :color="colorSelected"
+                    />
+                    <slot name="footer" :color="colorSelected">
+                        <b-field class="colorpicker-fields" grouped>
+                            <b-field horizontal label="R">
+                                <b-input
+                                    type="number"
+                                    v-model.number="colorSelected.red"
+                                    size="is-small"
+                                    aria-label="Red"
+                                />
+                            </b-field>
+                            <b-field horizontal label="G">
+                                <b-input
+                                    type="number"
+                                    v-model.number="colorSelected.green"
+                                    size="is-small"
+                                    aria-label="Green"
+                                />
+                            </b-field>
+                            <b-field horizontal label="B">
+                                <b-input
+                                    type="number"
+                                    v-model.number="colorSelected.blue"
+                                    size="is-small"
+                                    aria-label="Blue"
+                                />
+                            </b-field>
+                        </b-field>
+                    </slot>
+                </footer>
+            </b-dropdown-item>
+        </b-dropdown>
+    </div>
+</template>
+
+<script>
+import FormElementMixin from '../../utils/FormElementMixin'
+import { isMobile } from '../../utils/helpers'
+import config from '../../utils/config'
+import Color from '../../utils/color'
+
+import Dropdown from '../dropdown/Dropdown'
+import DropdownItem from '../dropdown/DropdownItem'
+import Input from '../input/Input'
+import Field from '../field/Field'
+import Select from '../select/Select'
+import Icon from '../icon/Icon'
+
+import ColorpickerHSLRepresentationTriangle from './ColorpickerHSLRepresentationTriangle'
+import ColorpickerHSLRepresentationSquare from './ColorpickerHSLRepresentationSquare'
+import ColorpickerAlphaSlider from './ColorpickerAlphaSlider'
+
+const defaultColorFormatter = (color, vm) => {
+    if (color.alpha < 1) {
+        return color.toString('hexa')
+    } else {
+        return color.toString('hex')
+    }
+}
+
+const defaultColorParser = (color, vm) => {
+    return Color.parse(color)
+}
+
+export default {
+    name: 'BColorpicker',
+    components: {
+        [ColorpickerHSLRepresentationTriangle.name]: ColorpickerHSLRepresentationTriangle,
+        [ColorpickerHSLRepresentationSquare.name]: ColorpickerHSLRepresentationSquare,
+        [ColorpickerAlphaSlider.name]: ColorpickerAlphaSlider,
+        [Input.name]: Input,
+        [Field.name]: Field,
+        [Select.name]: Select,
+        [Icon.name]: Icon,
+        [Dropdown.name]: Dropdown,
+        [DropdownItem.name]: DropdownItem
+    },
+    mixins: [FormElementMixin],
+    inheritAttrs: false,
+    provide() {
+        return {
+            $colorpicker: this
+        }
+    },
+    props: {
+        value: {
+            type: [String, Object],
+            validator(value) {
+                return typeof value === 'string' ||
+                    (
+                        typeof value === 'object' &&
+                        typeof value.red === 'number' &&
+                        typeof value.green === 'number' &&
+                        typeof value.blue === 'number'
+                    )
+            }
+        },
+        representation: {
+            type: String,
+            default: 'triangle',
+            value(value) {
+                return ['triangle', 'square'].some((r) => r === value)
+            }
+        },
+        inline: Boolean,
+        disabled: Boolean,
+        horizontalColorPicker: {
+            type: Boolean,
+            default: false
+        },
+        colorFormatter: {
+            type: Function,
+            default: (color, vm) => {
+                if (typeof config.defaultColorFormatter === 'function') {
+                    return config.defaultColorFormatter(color)
+                } else {
+                    return defaultColorFormatter(color, vm)
+                }
+            }
+        },
+        colorParser: {
+            type: Function,
+            default: (color, vm) => {
+                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
+        },
+        appendToBody: Boolean
+    },
+    data() {
+        const color = this.colorParser(this.value)
+
+        return {
+            colorSelected: color
+        }
+    },
+    computed: {
+        background() {
+            if (this.alpha) {
+                return `linear-gradient(
+                    45deg,
+                    ${this.colorSelected.toString('hex')} 50%,
+                    ${this.colorSelected.toString('hexa')} 50%
+                )`
+            } else {
+                const hex = this.colorSelected.toString('hex')
+                return `linear-gradient(
+                    45deg,
+                    ${hex} 50%,
+                    ${hex} 50%
+                )`
+            }
+        },
+        triggerStyle() {
+            const { red, green, blue } = this.colorSelected
+            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'
+            }
+        }
+    },
+    watch: {
+        value(value) {
+            this.colorSelected = new Color(value)
+        }
+    },
+    methods: {
+        updateColor(value) {
+            value.alpha = this.colorSelected.alpha
+            this.colorSelected = value
+            this.$emit('change', value)
+        },
+        /*
+         * Format color into string
+         */
+        formatValue(value) {
+            return value ? this.colorFormatter(value, this) : null
+        },
+
+        /*
+         * Toggle datepicker
+         */
+        togglePicker(active) {
+            if (this.$refs.dropdown) {
+                const isActive = typeof active === 'boolean'
+                    ? active
+                    : !this.$refs.dropdown.isActive
+                if (isActive) {
+                    this.$refs.dropdown.isActive = isActive
+                } else if (this.closeOnClick) {
+                    this.$refs.dropdown.isActive = isActive
+                }
+            }
+        },
+
+        /*
+         * Call default onFocus method and show datepicker
+         */
+        handleOnFocus(event) {
+            this.onFocus(event)
+            if (this.openOnFocus) {
+                this.togglePicker(true)
+            }
+        },
+
+        /*
+         * Toggle dropdown
+         */
+        toggle() {
+            if (this.mobileNative && this.isMobile) {
+                const input = this.$refs.input.$refs.input
+                input.focus()
+                input.click()
+                return
+            }
+            this.$refs.dropdown.toggle()
+        },
+
+        /*
+         * Avoid dropdown toggle when is already visible
+         */
+        onInputClick(event) {
+            if (this.$refs.dropdown.isActive) {
+                event.stopPropagation()
+            }
+        },
+
+        /**
+         * Keypress event that is bound to the document.
+         */
+        keyPress({ key }) {
+            if (this.$refs.dropdown && this.$refs.dropdown.isActive && (key === 'Escape' || key === 'Esc')) {
+                this.togglePicker(false)
+            }
+        },
+
+        /**
+         * Emit 'blur' event on dropdown is not active (closed)
+         */
+        onActiveChange(value) {
+            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.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils'
+import BColorpickerAlphaSlider from '@components/colorpicker/ColorpickerAlphaSlider'
+
+describe('BColorpickerAlphaSlider', () => {
+    it('render correctly', () => {
+        const wrapper = shallowMount(BColorpickerAlphaSlider, {
+            propsData: {
+                value: 100
+            }
+        })
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+})

package/src/components/colorpicker/ColorpickerAlphaSlider.vue

@@ -0,0 +1,194 @@
+<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">
+                &nbsp;
+            </b-tooltip>
+        </div>
+    </div>
+</template>
+
+<script>
+import Color from '../../utils/color'
+import Tooltip from '../tooltip/Tooltip'
+
+export default {
+    name: 'BColorpickerAlphaSlider',
+    components: {
+        [Tooltip.name]: Tooltip
+    },
+    props: {
+        value: {
+            type: Number,
+            validator: (value) => value >= 0 && value < 256
+        },
+        color: [String, Object]
+    },
+    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) {
+            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) {
+            this.startMouseCapture(event)
+            this.trackMouse(event)
+            this.stopMouseCapture(event)
+            this.$refs.alphaCursor.focus()
+        },
+        startMouseCapture(event) {
+            event.stopPropagation()
+
+            this.captureMouse = true
+        },
+        trackMouse(event) {
+            if (this.captureMouse === false) {
+                return
+            }
+            event.preventDefault()
+            event.stopPropagation()
+
+            let [mouseX] = [0, 0]
+            if (typeof event.touches !== 'undefined' && event.touches.length) {
+                [mouseX] = [event.touches[0].clientX]
+            } else {
+                [mouseX] = [event.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) {
+            if (this.captureMouse !== false) {
+                event.preventDefault()
+                event.stopPropagation()
+                this.$refs.alphaCursor.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)
+    },
+    beforeDestroy() {
+        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.js

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