buefy 1.0.0 → 1.0.2

package/src/components/clockpicker/Clockpicker.vue

@@ -0,0 +1,311 @@
+<template>
+    <div
+        class="b-clockpicker control"
+        :class="[size, type, {'is-expanded': expanded}]"
+        v-bind="rootAttrs"
+    >
+        <b-dropdown
+            v-if="!isMobile || inline"
+            ref="dropdown"
+            :position="position"
+            :disabled="disabledOrUndefined"
+            :inline="inline"
+            :mobile-modal="mobileModal"
+            :append-to-body="appendToBody"
+            append-to-body-copy-parent
+            @active-change="onActiveChange"
+        >
+            <template #trigger v-if="!inline">
+                <slot name="trigger">
+                    <b-input
+                        ref="input"
+                        autocomplete="off"
+                        :model-value="formatValue(computedValue)"
+                        :placeholder="placeholder"
+                        :size="size"
+                        :icon="icon"
+                        :icon-pack="iconPack"
+                        :loading="loading"
+                        :disabled="disabledOrUndefined"
+                        :readonly="!editable"
+                        :rounded="rounded"
+                        v-bind="fallthroughAttrs"
+                        :use-html5-validation="useHtml5Validation"
+                        @click="onInputClick"
+                        @keyup.enter="toggle(true)"
+                        @change="onChange($event.target.value)"
+                        @focus="handleOnFocus"
+                        @blur="checkHtml5Validity()"
+                    />
+                </slot>
+            </template>
+            <div
+                class="card"
+                :disabled="disabledOrUndefined"
+                custom
+            >
+                <header v-if="inline" class="card-header">
+                    <div class="b-clockpicker-header card-header-title">
+                        <div class="b-clockpicker-time">
+                            <span
+                                class="b-clockpicker-btn"
+                                :class="{ active: isSelectingHour }"
+                                @click="isSelectingHour = true"
+                            >{{ hoursDisplay }}</span>
+                            <span>{{ hourLiteral }}</span>
+                            <span
+                                class="b-clockpicker-btn"
+                                :class="{ active: !isSelectingHour }"
+                                @click="isSelectingHour = false"
+                            >{{ minutesDisplay }}</span>
+                        </div>
+                        <div v-if="!isHourFormat24" class="b-clockpicker-period">
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === amString || meridienSelected === AM
+                                }"
+                                @click="onMeridienClick(amString)"
+                            >
+                                {{ amString }}
+                            </div>
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === pmString || meridienSelected === PM
+                                }"
+                                @click="onMeridienClick(pmString)"
+                            >
+                                {{ pmString }}
+                            </div>
+                        </div>
+                    </div>
+                </header>
+                <div class="card-content">
+                    <div
+                        class="b-clockpicker-body"
+                        :style="{ width: faceSize + 'px', height: faceSize + 'px' }"
+                    >
+                        <div v-if="!inline" class="b-clockpicker-time">
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{ active: isSelectingHour }"
+                                @click="isSelectingHour = true"
+                            >
+                                {{ hoursLabel }}
+                            </div>
+                            <span
+                                class="b-clockpicker-btn"
+                                :class="{ active: !isSelectingHour }"
+                                @click="isSelectingHour = false"
+                            >{{ minutesLabel }}</span>
+                        </div>
+                        <div v-if="!isHourFormat24 && !inline" class="b-clockpicker-period">
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === amString || meridienSelected === AM
+                                }"
+                                @click="onMeridienClick(amString)"
+                            >
+                                {{ amString }}
+                            </div>
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === pmString || meridienSelected === PM
+                                }"
+                                @click="onMeridienClick(pmString)"
+                            >
+                                {{ pmString }}
+                            </div>
+                        </div>
+                        <b-clockpicker-face
+                            ref="clockpickerFace"
+                            :picker-size="faceSize"
+                            :min="minFaceValue"
+                            :max="maxFaceValue"
+                            :face-numbers="isSelectingHour ? hours : minutes"
+                            :disabled-values="faceDisabledValues"
+                            :double="isSelectingHour && isHourFormat24"
+                            :value="isSelectingHour
+                                ? hoursSelected ?? undefined
+                                : minutesSelected ?? undefined"
+                            @input="onClockInput"
+                            @change="onClockChange"
+                        />
+                    </div>
+                </div>
+                <footer
+                    v-if="$slots.default !== undefined && $slots.default([]).length"
+                    class="b-clockpicker-footer card-footer"
+                >
+                    <slot />
+                </footer>
+            </div>
+        </b-dropdown>
+        <b-input
+            v-else
+            ref="input"
+            type="time"
+            autocomplete="off"
+            :model-value="formatHHMMSS(computedValue)"
+            :placeholder="placeholder"
+            :size="size"
+            :icon="icon"
+            :icon-pack="iconPack"
+            :loading="loading"
+            :max="formatHHMMSS(maxTime)"
+            :min="formatHHMMSS(minTime)"
+            :disabled="disabledOrUndefined"
+            :readonly="false"
+            v-bind="fallthroughAttrs"
+            :use-html5-validation="useHtml5Validation"
+            @click.stop="toggle(true)"
+            @keyup.enter="toggle(true)"
+            @change="onChangeNativePicker"
+            @focus="handleOnFocus"
+            @blur="onBlur() && checkHtml5Validity()"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import TimepickerMixin from '../../utils/TimepickerMixin'
+import config from '../../utils/config'
+
+import BDropdown from '../dropdown/Dropdown.vue'
+import BInput from '../input/Input.vue'
+
+import BClockpickerFace from './ClockpickerFace.vue'
+
+type BDropdownInstance = InstanceType<typeof BDropdown>
+
+const outerPadding = 12
+
+export default defineComponent({
+    name: 'BClockpicker',
+    components: {
+        BClockpickerFace,
+        BInput,
+        BDropdown
+    },
+    mixins: [TimepickerMixin],
+    props: {
+        pickerSize: {
+            type: Number,
+            default: 290
+        },
+        incrementMinutes: {
+            type: Number,
+            default: 5
+        },
+        type: {
+            type: String,
+            default: 'is-primary'
+        },
+        hoursLabel: {
+            type: String,
+            default: () => config.defaultClockpickerHoursLabel || 'Hours'
+        },
+        minutesLabel: {
+            type: String,
+            default: () => config.defaultClockpickerMinutesLabel || 'Min'
+        }
+    },
+    data() {
+        return {
+            isSelectingHour: true,
+            isDragging: false,
+            _isClockpicker: true
+        }
+    },
+    computed: {
+        hoursDisplay() {
+            if (this.hoursSelected == null) return '--'
+            if (this.isHourFormat24) return this.pad(this.hoursSelected)
+
+            let display = this.hoursSelected
+            if (this.meridienSelected === this.pmString) {
+                display -= 12
+            }
+            if (display === 0) display = 12
+            return display
+        },
+        minutesDisplay() {
+            return this.minutesSelected == null ? '--' : this.pad(this.minutesSelected)
+        },
+        minFaceValue() {
+            return this.isSelectingHour &&
+                !this.isHourFormat24 &&
+                this.meridienSelected === this.pmString
+                ? 12
+                : 0
+        },
+        maxFaceValue() {
+            return this.isSelectingHour
+                ? (
+                    !this.isHourFormat24 &&
+                    this.meridienSelected === this.amString
+                        ? 11
+                        : 23
+                )
+                : 59
+        },
+        faceSize() {
+            return this.pickerSize - (outerPadding * 2)
+        },
+        faceDisabledValues() {
+            return this.isSelectingHour ? this.isHourDisabled : this.isMinuteDisabled
+        }
+    },
+    methods: {
+        onClockInput(value: number) {
+            if (this.isSelectingHour) {
+                this.hoursSelected = value
+                this.onHoursChange(value)
+            } else {
+                this.minutesSelected = value
+                this.onMinutesChange(value)
+            }
+        },
+        onClockChange() {
+            if (this.isSelectingHour) {
+                this.isSelectingHour = !this.isSelectingHour
+            } else {
+                // Minutes selected, let's close the clockpicker
+                this.toggle(false)
+            }
+        },
+        /*
+         * Toggle clockpicker
+         */
+        toggle(active: boolean) {
+            if (this.$refs.dropdown) {
+                const dropdown = this.$refs.dropdown as BDropdownInstance
+                dropdown.isActive = active ?? !dropdown.isActive
+                if (dropdown.isActive) {
+                    // When opening the clockpicker, we always select the hour first
+                    this.isSelectingHour = true
+                }
+            }
+        },
+        onMeridienClick(value: string) {
+            if (this.meridienSelected !== value) {
+                this.meridienSelected = value
+                this.onMeridienChange(value)
+            }
+        },
+        /*
+         * Avoid dropdown toggle when is already visible
+         */
+        onInputClick(event: MouseEvent) {
+            if ((this.$refs.dropdown as BDropdownInstance).isActive) {
+                event.stopPropagation()
+            }
+        }
+    }
+})
+</script>

package/src/components/clockpicker/ClockpickerFace.spec.ts

@@ -0,0 +1,99 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BClockpickerFace from '@components/clockpicker/ClockpickerFace.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BClockpickerFace>>
+const indicatorSize = 40
+const paddingInner = 5
+const pickerSize = 500
+
+describe('BClockpickerFace', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BClockpickerFace, {
+            props: {
+                pickerSize,
+                min: 0,
+                max: 23
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BClockpickerFace')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('returns countPerRing correctly', async () => {
+        const count = wrapper.vm.max! - wrapper.vm.min! + 1
+        expect(wrapper.vm.countPerRing).toEqual(count)
+
+        await wrapper.setProps({ double: true })
+        expect(wrapper.vm.countPerRing).toEqual(count / 2)
+    })
+
+    it('returns radius correctly', () => {
+        expect(wrapper.vm.radius).toEqual(pickerSize / 2)
+    })
+
+    it('returns outerRadius correctly', () => {
+        expect(wrapper.vm.outerRadius).toEqual((pickerSize / 2) -
+            paddingInner -
+            indicatorSize / 2)
+    })
+
+    it('returns innerRadius correctly', () => {
+        expect(wrapper.vm.innerRadius).toEqual(Math.max(wrapper.vm.outerRadius * 0.6,
+            wrapper.vm.outerRadius - paddingInner - indicatorSize))
+    })
+
+    it('returns degrees correctly', () => {
+        expect(wrapper.vm.degrees).toEqual(wrapper.vm.degreesPerUnit * Math.PI / 180)
+    })
+
+    it('set inputValue when value changed', async () => {
+        await wrapper.setData({ inputValue: 2 })
+        await wrapper.setProps({ value: 2 })
+        expect(wrapper.vm.inputValue).toEqual(2)
+
+        await wrapper.setProps({ value: 3 })
+        expect(wrapper.vm.inputValue).toEqual(3)
+    })
+
+    it('calls disabledValues function when isDisabled is called', async () => {
+        await wrapper.setProps({ disabledValues: vi.fn() })
+        wrapper.vm.isDisabled(2)
+        expect(wrapper.vm.disabledValues).toHaveBeenCalled()
+    })
+
+    it('manage onMouseDown', () => {
+        const e = {
+            preventDefault: vi.fn()
+        }
+        wrapper.vm.onDragMove = vi.fn()
+        wrapper.vm.onMouseDown(e as unknown as MouseEvent)
+        expect(e.preventDefault).toHaveBeenCalled()
+        expect(wrapper.vm.isDragging).toBeTruthy()
+        expect(wrapper.vm.onDragMove).toHaveBeenCalled()
+    })
+
+    it('manage onMouseUp', () => {
+        wrapper.vm.onMouseUp()
+        expect(wrapper.vm.isDragging).toBeFalsy()
+    })
+
+    it('manage onDragMove', async () => {
+        const e = {
+            preventDefault: vi.fn()
+        }
+        await wrapper.setData({ isDragging: true })
+        wrapper.vm.update = vi.fn()
+        wrapper.vm.onDragMove(e as unknown as MouseEvent)
+        expect(e.preventDefault).toHaveBeenCalled()
+        expect(wrapper.vm.update).toHaveBeenCalled()
+    })
+})

package/src/components/clockpicker/ClockpickerFace.vue

@@ -0,0 +1,272 @@
+<template>
+    <div
+        class="b-clockpicker-face"
+        @mousedown="onMouseDown"
+        @mouseup="onMouseUp"
+        @mousemove="onDragMove"
+        @touchstart="onMouseDown"
+        @touchend="onMouseUp"
+        @touchmove="onDragMove"
+    >
+        <div
+            class="b-clockpicker-face-outer-ring"
+            ref="clock"
+        >
+            <div
+                class="b-clockpicker-face-hand"
+                :style="handStyle"
+            />
+            <span
+                v-for="(num, index) of faceNumbers"
+                :key="index"
+                class="b-clockpicker-face-number"
+                :class="getFaceNumberClasses(num)"
+                :style="{ transform: getNumberTranslate(num.value) }"
+            >
+                <span>{{ num.label }}</span>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+// These should match the variables in clockpicker.scss
+const indicatorSize = 40
+const paddingInner = 5
+
+export interface FaceNumber {
+    value: number
+    label: string
+}
+
+interface Point {
+    x: number
+    y: number
+}
+
+export default defineComponent({
+    name: 'BClockpickerFace',
+    props: {
+        pickerSize: Number,
+        min: Number,
+        max: Number,
+        double: Boolean,
+        value: Number,
+        faceNumbers: Array<FaceNumber>,
+        disabledValues: Function
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        change: (_value: number | undefined) => true,
+        input: (_value: number) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
+    data() {
+        return {
+            isDragging: false,
+            inputValue: this.value,
+            prevAngle: 720
+        }
+    },
+    computed: {
+        /*
+        * How many number indicators are shown on the face
+        */
+        count() {
+            return this.max! - this.min! + 1
+        },
+        /*
+        * How many number indicators are shown per ring on the face
+        */
+        countPerRing() {
+            return this.double ? (this.count / 2) : this.count
+        },
+        /*
+        * Radius of the clock face
+        */
+        radius() {
+            return this.pickerSize! / 2
+        },
+        /*
+        * Radius of the outer ring of number indicators
+        */
+        outerRadius() {
+            return this.radius -
+                paddingInner -
+                indicatorSize / 2
+        },
+        /*
+        * Radius of the inner ring of number indicators
+        */
+        innerRadius() {
+            return Math.max(this.outerRadius * 0.6,
+                this.outerRadius - paddingInner - indicatorSize)
+            // 48px gives enough room for the outer ring of numbers
+        },
+        /*
+        * The angle for each selectable value
+        * For hours this ends up being 30 degrees, for minutes 6 degrees
+        */
+        degreesPerUnit() {
+            return 360 / this.countPerRing
+        },
+        /*
+        * Used for calculating x/y grid location based on degrees
+        */
+        degrees() {
+            return this.degreesPerUnit * Math.PI / 180
+        },
+        /*
+        * Calculates the angle the clock hand should be rotated for the
+        * selected value
+        */
+        handRotateAngle() {
+            let currentAngle = this.prevAngle
+            while (currentAngle < 0) currentAngle += 360
+            const targetAngle = this.calcHandAngle(this.displayedValue)
+            const degreesDiff = this.shortestDistanceDegrees(currentAngle, targetAngle)
+            const angle = this.prevAngle + degreesDiff
+            return angle
+        },
+        /*
+        * Determines how long the selector hand is based on if the
+        * selected value is located along the outer or inner ring
+        */
+        handScale() {
+            return this.calcHandScale(this.displayedValue)
+        },
+        handStyle() {
+            return {
+                transform: `rotate(${this.handRotateAngle}deg) scaleY(${this.handScale})`,
+                transition: '.3s cubic-bezier(.25,.8,.50,1)'
+            }
+        },
+        /*
+        * The value the hand should be pointing at
+        */
+        displayedValue() {
+            return this.inputValue == null ? this.min! : this.inputValue
+        }
+    },
+    watch: {
+        value(value) {
+            if (value !== this.inputValue) {
+                this.prevAngle = this.handRotateAngle
+            }
+            this.inputValue = value
+        }
+    },
+    methods: {
+        isDisabled(value: number) {
+            return this.disabledValues && this.disabledValues(value)
+        },
+        /*
+        * Calculates the distance between two points
+        */
+        euclidean(p0: Point, p1: Point) {
+            const dx = p1.x - p0.x
+            const dy = p1.y - p0.y
+
+            return Math.sqrt(dx * dx + dy * dy)
+        },
+        shortestDistanceDegrees(start: number, stop: number) {
+            const modDiff = (stop - start) % 360
+            const shortestDistance = 180 - Math.abs(Math.abs(modDiff) - 180)
+            return (modDiff + 360) % 360 < 180 ? shortestDistance * 1 : shortestDistance * -1
+        },
+        /*
+        * Calculates the angle of the line from the center point
+        * to the given point.
+        */
+        coordToAngle(center: Point, p1: Point) {
+            const value = 2 *
+                Math.atan2(p1.y - center.y - this.euclidean(center, p1), p1.x - center.x)
+            return Math.abs(value * 180 / Math.PI)
+        },
+        /*
+        * Generates the inline style translate() property for a
+        * number indicator, which determines it's location on the
+        * clock face
+        */
+        getNumberTranslate(value: number) {
+            const { x, y } = this.getNumberCoords(value)
+            return `translate(${x}px, ${y}px)`
+        },
+        /*
+        * Calculates the coordinates on the clock face for a number
+        * indicator value
+        */
+        getNumberCoords(value: number) {
+            const radius = this.isInnerRing(value) ? this.innerRadius : this.outerRadius
+            return {
+                x: Math.round(radius * Math.sin((value - this.min!) * this.degrees)),
+                y: Math.round(-radius * Math.cos((value - this.min!) * this.degrees))
+            }
+        },
+        getFaceNumberClasses(num: FaceNumber) {
+            return {
+                active: num.value === this.displayedValue,
+                disabled: this.isDisabled(num.value)
+            }
+        },
+        /*
+        * Determines if a value resides on the inner ring
+        */
+        isInnerRing(value: number) {
+            return this.double && (value - this.min! >= this.countPerRing)
+        },
+        calcHandAngle(value: number) {
+            let angle = this.degreesPerUnit * (value - this.min!)
+            if (this.isInnerRing(value)) angle -= 360
+            return angle
+        },
+        calcHandScale(value: number) {
+            return this.isInnerRing(value)
+                ? ((this.innerRadius) / this.outerRadius)
+                : 1
+        },
+        onMouseDown(e: MouseEvent | TouchEvent) {
+            e.preventDefault()
+            this.isDragging = true
+            this.onDragMove(e)
+        },
+        onMouseUp() {
+            this.isDragging = false
+            if (!this.isDisabled(this.inputValue!)) {
+                this.$emit('change', this.inputValue)
+            }
+        },
+        onDragMove(e: MouseEvent | TouchEvent) {
+            e.preventDefault()
+            if (!this.isDragging && e.type !== 'click') return
+
+            const { width, top, left } = (this.$refs.clock as HTMLElement).getBoundingClientRect()
+            const { clientX, clientY } = 'touches' in e ? e.touches[0] : e
+            const center = { x: width / 2, y: -width / 2 }
+            const coords = { x: clientX - left, y: top - clientY }
+            const handAngle = Math.round(this.coordToAngle(center, coords) + 360) % 360
+            const insideClick = this.double && this.euclidean(center, coords) <
+                (this.outerRadius + this.innerRadius) / 2 - 16
+
+            let value = Math.round(handAngle / this.degreesPerUnit) +
+                this.min! +
+                (insideClick ? this.countPerRing : 0)
+
+            // Necessary to fix edge case when selecting left part of max value
+            if (handAngle >= (360 - this.degreesPerUnit / 2)) {
+                value = insideClick ? this.max! : this.min!
+            }
+            this.update(value)
+        },
+        update(value: number) {
+            if (this.inputValue !== value && !this.isDisabled(value)) {
+                this.prevAngle = this.handRotateAngle
+                this.inputValue = value
+                this.$emit('input', value)
+            }
+        }
+    }
+})
+</script>