@kokoccc/vuetify 1.0.1

package/src/components/VTimePicker/VTimePickerClock.ts

@@ -0,0 +1,278 @@
+import { h, VNode, PropType, VNodeData } from 'vue'
+import './VTimePickerClock.sass'
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
+
+// Types
+import mixins, { ExtractVue } from '../../util/mixins'
+
+interface Point {
+  x: number
+  y: number
+}
+
+interface options {
+  $refs: {
+    clock: HTMLElement
+    innerClock: HTMLElement
+  }
+}
+
+export default mixins<options &
+/* eslint-disable indent */
+  ExtractVue<[
+    typeof Colorable,
+    typeof Themeable
+  ]>
+/* eslint-enable indent */
+>(
+  Colorable,
+  Themeable
+/* @vue/component */
+).extend({
+  name: 'v-time-picker-clock',
+
+  props: {
+    allowedValues: Function as PropType<(value: number) => boolean>,
+    ampm: Boolean,
+    disabled: Boolean,
+    double: Boolean,
+    format: {
+      type: Function as PropType<(val: string | number) => string | number>,
+      default: (val: string | number) => val,
+    },
+    max: {
+      type: Number,
+      required: true,
+    },
+    min: {
+      type: Number,
+      required: true,
+    },
+    scrollable: Boolean,
+    readonly: Boolean,
+    rotate: {
+      type: Number,
+      default: 0,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    modelValue: Number,
+  },
+
+  data () {
+    return {
+      isDragging: false,
+      valueOnMouseDown: null as number | null,
+      valueOnMouseUp: null as number | null,
+    }
+  },
+
+  computed: {
+    count (): number {
+      return this.max - this.min + 1
+    },
+    degreesPerUnit (): number {
+      return 360 / this.roundCount
+    },
+    degrees (): number {
+      return this.degreesPerUnit * Math.PI / 180
+    },
+    displayedValue (): number {
+      return this.modelValue == null ? this.min : this.modelValue
+    },
+    innerRadiusScale (): number {
+      return 0.62
+    },
+    roundCount (): number {
+      return this.double ? (this.count / 2) : this.count
+    },
+  },
+
+
+  methods: {
+    wheel (e: WheelEvent) {
+      e.preventDefault()
+
+      const delta = Math.sign(-e.deltaY || 1)
+      let value = this.displayedValue
+      do {
+        value = value + delta
+        value = (value - this.min + this.count) % this.count + this.min
+      } while (!this.isAllowed(value) && value !== this.displayedValue)
+
+      if (value !== this.displayedValue) {
+        this.update(value)
+      }
+    },
+    isInner (value: number) {
+      return this.double && (value - this.min >= this.roundCount)
+    },
+    handScale (value: number) {
+      return this.isInner(value) ? this.innerRadiusScale : 1
+    },
+    isAllowed (value: number) {
+      return !this.allowedValues || this.allowedValues(value)
+    },
+    genValues () {
+      const children: VNode[] = []
+
+      for (let value = this.min; value <= this.max; value = value + this.step) {
+        const color = value === this.modelValue && (this.color || 'accent')
+        children.push(h('span', this.setBackgroundColor(color, {
+          class: [
+            'v-time-picker-clock__item',
+            {
+              'v-time-picker-clock__item--active': value === this.displayedValue,
+              'v-time-picker-clock__item--disabled': this.disabled || !this.isAllowed(value),
+            },
+          ],
+          style: this.getTransform(value),
+          innerHTML: `<span>${this.format(value)}</span>`,
+        })))
+      }
+
+      return children
+    },
+    genHand () {
+      const scale = `scaleY(${this.handScale(this.displayedValue)})`
+      const angle = this.rotate + this.degreesPerUnit * (this.displayedValue - this.min)
+      const color = (this.modelValue != null) && (this.color || 'accent')
+      return h('div', this.setBackgroundColor(color, {
+        class: [
+          'v-time-picker-clock__hand',
+          {
+            'v-time-picker-clock__hand--inner': this.isInner(this.modelValue),
+          },
+        ],
+        style: {
+          transform: `rotate(${angle}deg) ${scale}`,
+        },
+      }))
+    },
+    getTransform (i: number) {
+      const { x, y } = this.getPosition(i)
+      return {
+        left: `${50 + x * 50}%`,
+        top: `${50 + y * 50}%`,
+      }
+    },
+    getPosition (value: number) {
+      const rotateRadians = this.rotate * Math.PI / 180
+      return {
+        x: Math.sin((value - this.min) * this.degrees + rotateRadians) * this.handScale(value),
+        y: -Math.cos((value - this.min) * this.degrees + rotateRadians) * this.handScale(value),
+      }
+    },
+    onMouseDown (e: MouseEvent | TouchEvent) {
+      e.preventDefault()
+
+      this.valueOnMouseDown = null
+      this.valueOnMouseUp = null
+      this.isDragging = true
+      this.onDragMove(e)
+    },
+    onMouseUp (e: MouseEvent | TouchEvent) {
+      e.stopPropagation()
+
+      this.isDragging = false
+      if (this.valueOnMouseUp !== null && this.isAllowed(this.valueOnMouseUp)) {
+        this.$emit('change', this.valueOnMouseUp)
+      }
+    },
+    onDragMove (e: MouseEvent | TouchEvent) {
+      e.preventDefault()
+      if ((!this.isDragging && e.type !== 'click') || !this.$refs.clock) return
+
+      const { width, top, left } = this.$refs.clock.getBoundingClientRect()
+      const { width: innerWidth } = this.$refs.innerClock.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.angle(center, coords) - this.rotate + 360) % 360
+      const insideClick = this.double && this.euclidean(center, coords) < (innerWidth + innerWidth * this.innerRadiusScale) / 4
+      const checksCount = Math.ceil(15 / this.degreesPerUnit)
+      let value
+
+      for (let i = 0; i < checksCount; i++) {
+        value = this.angleToValue(handAngle + i * this.degreesPerUnit, insideClick)
+        if (this.isAllowed(value)) return this.setMouseDownValue(value)
+
+        value = this.angleToValue(handAngle - i * this.degreesPerUnit, insideClick)
+        if (this.isAllowed(value)) return this.setMouseDownValue(value)
+      }
+    },
+    angleToValue (angle: number, insideClick: boolean): number {
+      const value = (
+        Math.round(angle / this.degreesPerUnit) +
+        (insideClick ? this.roundCount : 0)
+      ) % this.count + this.min
+
+      // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock
+      if (angle < (360 - this.degreesPerUnit / 2)) return value
+
+      return insideClick ? this.max - this.roundCount + 1 : this.min
+    },
+    setMouseDownValue (value: number) {
+      if (this.valueOnMouseDown === null) {
+        this.valueOnMouseDown = value
+      }
+
+      this.valueOnMouseUp = value
+      this.update(value)
+    },
+    update (value: number) {
+      if (this.modelValue !== value) {
+        this.$emit('update:modelValue', value)
+      }
+    },
+    euclidean (p0: Point, p1: Point) {
+      const dx = p1.x - p0.x
+      const dy = p1.y - p0.y
+
+      return Math.sqrt(dx * dx + dy * dy)
+    },
+    angle (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)
+    },
+  },
+
+  render (): VNode {
+    const data: VNodeData = {
+      class: [
+        'v-time-picker-clock',
+        {
+          'v-time-picker-clock--indeterminate': this.modelValue == null,
+          ...this.themeClasses,
+        },
+      ],
+      onMousedown: (this.readonly || this.disabled) ? undefined : this.onMouseDown,
+      onMouseup: (this.readonly || this.disabled) ? undefined : this.onMouseUp,
+      onMouseleave: (this.readonly || this.disabled) ? undefined : (e: MouseEvent) => (this.isDragging && this.onMouseUp(e)),
+      onTouchstart: (this.readonly || this.disabled) ? undefined : this.onMouseDown,
+      onTouchend: (this.readonly || this.disabled) ? undefined : this.onMouseUp,
+      onMousemove: (this.readonly || this.disabled) ? undefined : this.onDragMove,
+      onTouchmove: (this.readonly || this.disabled) ? undefined : this.onDragMove,
+      ref: 'clock',
+    }
+
+    if (this.scrollable && !this.readonly && !this.disabled) {
+      data.onWheel = this.wheel
+    }
+
+    return h('div', data, [
+      h('div', {
+        class: 'v-time-picker-clock__inner',
+        ref: 'innerClock',
+      }, [
+        this.genHand(),
+        this.genValues(),
+      ]),
+    ])
+  },
+})

package/src/components/VTimePicker/VTimePickerTitle.sass

@@ -0,0 +1,65 @@
+@import './_variables.scss'
+@import '../VPicker/_variables.scss'
+
+.v-time-picker-title
+  color: $time-picker-title-color
+  display: flex
+  line-height: 1
+  justify-content: flex-end
+
+.v-time-picker-title__time
+  white-space: nowrap
+  direction: ltr
+
+  .v-picker__title__btn,
+  span
+    align-items: center
+    display: inline-flex
+    height: $time-picker-title-btn-height
+    font-size: $time-picker-title-btn-height
+    justify-content: center
+
+.v-time-picker-title__ampm
+  align-self: flex-end
+  display: flex
+  flex-direction: column
+  font-size: $time-picker-ampm-title-font-size
+  text-transform: uppercase
+
+  +ltr()
+    margin: $time-picker-ampm-title-margin-ltr
+
+  +rtl()
+    margin: $time-picker-ampm-title-margin-rtl
+
+  div:only-child
+    flex-direction: row
+
+  &--readonly
+    .v-picker__title__btn.v-picker__title__btn--active
+      opacity: $picker-inactive-btn-opacity
+
+.v-picker__title--landscape
+  .v-time-picker-title
+    flex-direction: column
+    justify-content: center
+    height: 100%
+
+  .v-time-picker-title__time
+    text-align: right
+
+    .v-picker__title__btn,
+    span
+      height: $time-picker-landscape-title-btn-height
+      font-size: $time-picker-landscape-title-btn-height
+
+  .v-time-picker-title__ampm
+    margin: $time-picker-landscape-ampm-title-margin
+    align-self: initial
+    text-align: center
+
+.v-picker--time .v-picker__title--landscape
+  padding: 0
+
+  .v-time-picker-title__time
+    text-align: center

package/src/components/VTimePicker/VTimePickerTitle.ts

@@ -0,0 +1,83 @@
+import { h, VNode, PropType, defineComponent } from 'vue'
+import './VTimePickerTitle.sass'
+
+// Mixins
+import PickerButton from '../../mixins/picker-button'
+
+// Utils
+import pad from '../VDatePicker/util/pad'
+import mixins from '../../util/mixins'
+
+import { SelectingTimes } from './SelectingTimes'
+
+export default mixins(
+  PickerButton
+/* @vue/component */
+).extend({
+  name: 'v-time-picker-title',
+
+  props: {
+    ampm: Boolean,
+    ampmReadonly: Boolean,
+    disabled: Boolean,
+    hour: Number,
+    minute: Number,
+    second: Number,
+    period: {
+      type: String as PropType<'am' | 'pm'>,
+      validator: period => period === 'am' || period === 'pm',
+    },
+    readonly: Boolean,
+    useSeconds: Boolean,
+    selecting: Number,
+  },
+
+  emits: ['update:selecting', 'update:period'],
+
+  methods: {
+    genTime () {
+      let hour = this.hour
+      if (this.ampm) {
+        hour = hour ? ((hour - 1) % 12 + 1) : 12
+      }
+
+      const displayedHour = this.hour == null ? '--' : this.ampm ? String(hour) : pad(hour)
+      const displayedMinute = this.minute == null ? '--' : pad(this.minute)
+      const titleContent = [
+        this.genPickerButton('selecting', SelectingTimes.Hour, displayedHour, this.disabled),
+        h('span', ':'),
+        this.genPickerButton('selecting', SelectingTimes.Minute, displayedMinute, this.disabled),
+      ]
+
+      if (this.useSeconds) {
+        const displayedSecond = this.second == null ? '--' : pad(this.second)
+        titleContent.push(h('span', ':'))
+        titleContent.push(this.genPickerButton('selecting', SelectingTimes.Second, displayedSecond, this.disabled))
+      }
+      return h('div', {
+        class: 'v-time-picker-title__time',
+      }, titleContent)
+    },
+    genAmPm () {
+      return h('div', {
+        class: {
+          'v-time-picker-title__ampm': true,
+          'v-time-picker-title__ampm--readonly': this.ampmReadonly,
+        },
+      }, [
+        (!this.ampmReadonly || this.period === 'am') ? this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly) : null,
+        (!this.ampmReadonly || this.period === 'pm') ? this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly) : null,
+      ])
+    },
+  },
+
+  render (): VNode {
+    const children = [this.genTime()]
+
+    this.ampm && children.push(this.genAmPm())
+
+    return h('div', {
+      class: 'v-time-picker-title',
+    }, children)
+  },
+})