kdutify 0.16.9-rc.0

package/src/components/KTimePicker/KTimePicker.js

@@ -0,0 +1,282 @@
+require('../../stylus/components/_pickers.styl')
+require('../../stylus/components/_time-picker.styl')
+
+import { createRange } from '../../util/helpers'
+
+import KCard from '../KCard'
+
+import Picker from '../../mixins/picker'
+import TimeTitle from './mixins/time-title'
+import TimeBody from './mixins/time-body'
+
+export default {
+  name: 'k-time-picker',
+
+  components: {
+    KCard
+  },
+
+  mixins: [Picker, TimeBody, TimeTitle],
+
+  data () {
+    return {
+      isDragging: false,
+      rotate: 0,
+      originalTime: this.value,
+      period: 'am',
+      selectingHour: true,
+      ranges: {
+        hours: createRange(24),
+        minutes: createRange(60)
+      }
+    }
+  },
+
+  props: {
+    format: {
+      type: String,
+      default: 'ampm',
+      validator (val) {
+        return ['ampm', '24hr'].includes(val)
+      }
+    },
+    allowedHours: {
+      type: [Array, Object, Function],
+      default: () => (null)
+    },
+    allowedMinutes: {
+      type: [Array, Object, Function],
+      default: () => (null)
+    }
+  },
+
+  computed: {
+    is24hr () {
+      return this.format !== 'ampm'
+    },
+    is24hrAfter12 () {
+      return this.selectingHour && this.is24hr && this.hour >= 12
+    },
+    divider () {
+      return this.selectingHour ? 12 : 60
+    },
+    degrees () {
+      return this.degreesPerUnit * Math.PI / 180
+    },
+    degreesPerUnit () {
+      return 360 / this.divider
+    },
+    inputTime: {
+      get () {
+        if (this.value && !(this.value instanceof Date)) {
+          if (!this.is24hr) {
+            this.period = this.value.match(/pm/i)
+              ? 'pm'
+              : 'am'
+          }
+
+          return this.value
+        }
+        let value = new Date()
+
+        if (this.value instanceof Date) {
+          value = this.value
+        }
+
+        let hour = value.getHours()
+        let minute = value.getMinutes()
+        let period = ''
+
+        if (!this.is24hr) {
+          period = hour >= 12 ? 'pm' : 'am'
+          hour = hour > 12 ? hour - 12 : hour
+          hour = hour === 0 ? 12 : hour
+        }
+
+        period && (this.period = period)
+
+        hour = this.firstAllowed('hour', hour)
+        minute = this.firstAllowed('minute', minute)
+
+        minute = minute < 10 ? `0${minute}` : minute > 59 ? '00' : minute
+
+        return `${hour}:${minute}${period}`
+      },
+      set (val) {
+        return this.$emit('input', val)
+      }
+    },
+    timeArray () {
+      return this.inputTime.replace(/(am|pm)/, '').split(':')
+    },
+    hour: {
+      get () {
+        return parseInt(this.timeArray[0])
+      },
+      set (val) {
+        if (!this.is24hr) {
+          val = val > 12 ? val - 12 : val < 1 ? 12 : val
+        } else {
+          val = val < 10 ? `0${val}` : val > 23 ? '00' : val
+        }
+
+        this.inputTime = `${val}:${this.minute}${!this.is24hr ? this.period : ''}`
+      }
+    },
+    minute: {
+      get () {
+        const minute = parseInt(this.timeArray[1])
+
+        return minute < 10 ? `0${minute}` : minute > 59 ? '00' : minute
+      },
+      set (val) {
+        val = val < 10 ? `0${parseInt(val)}` : val > 59 ? '00' : val
+        let hour = this.hour
+
+        if (this.is24hr && hour < 10) {
+          hour = `0${hour}`
+        }
+
+        this.inputTime = `${hour}:${val}${!this.is24hr ? this.period : ''}`
+      }
+    },
+    clockHand () {
+      if (this.selectingHour) return this.degreesPerUnit * this.hour
+      return this.degreesPerUnit * this.minute
+    },
+    radius () {
+      return this.clockSize / 2
+    },
+    clockSize: {
+      get () {
+        return this.size
+      },
+      set (val) {
+        this.size = val
+      }
+    },
+    size () {
+      return this.landscape ? 250 : 280
+    }
+  },
+
+  watch: {
+    period (val) {
+      const hour = !!this.allowedHours && this.selectingHour ? this.firstAllowed('hour', this.hour - 1) : this.hour
+      this.inputTime = `${hour}:${this.minute}${val}`
+    },
+    value (val) {
+      if (this.isSaving) {
+        this.originalTime = this.inputTime
+        this.isSaving = false
+      }
+    }
+  },
+
+  methods: {
+    save () {
+      if (this.originalTime) {
+        this.originalTime = this.value
+      } else {
+        this.inputTime = this.inputTime
+        this.originalTime = this.inputTime
+      }
+
+      if (this.$parent && this.$parent.isActive) this.$parent.isActive = false
+
+      // Fix for #1818
+      // Wait for data to persist
+      // then set selectingHour
+      this.$nextTick(() => (this.selectingHour = true))
+    },
+    cancel () {
+      this.inputTime = this.originalTime
+      if (this.$parent && this.$parent.isActive) this.$parent.isActive = false
+
+      // Fix for #1818
+      // Wait for data to persist
+      // then set selectingHour
+      this.$nextTick(() => (this.selectingHour = true))
+    },
+    isAllowed (type, value) {
+      const allowed = this[`allowed${type.charAt(0).toUpperCase() + type.slice(1)}s`]
+
+      if (!allowed) return true
+
+      if (Array.isArray(allowed)) {
+        return !!allowed.some(v => v === value)
+      } else if (allowed instanceof Function) {
+        return allowed(value)
+      } else if (allowed === Object(allowed)) {
+        const range = type === 'minute' ? this.ranges.minutes : this.ranges.hours
+        const mod = type === 'minute' ? 60 : 24
+
+        if (allowed.min === String(allowed.min)) {
+          allowed.min = this.convert12to24hr(allowed.min)
+        }
+
+        if (allowed.max === String(allowed.max)) {
+          allowed.max = this.convert12to24hr(allowed.max)
+        }
+
+        const steps = allowed.max - allowed.min
+        value = type === 'hour' && !this.is24hr && this.period === 'pm' ? value + 12 : value
+
+        for (let i = 0; i <= steps; i++) {
+          const index = (allowed.min + i) % mod
+          if (range[index] === value) return true
+        }
+
+        return false
+      }
+
+      return true
+    },
+    convert12to24hr (input) {
+      input = input.toLowerCase()
+      const pm = input.indexOf('pm') !== -1
+      const hour = parseInt(input.slice(0, input.indexOf(pm ? 'pm' : 'am')))
+
+      return pm ? hour + 12 : hour
+    },
+    generateRange (type, start) {
+      let range = type === 'hour' ? this.ranges.hours : this.ranges.minutes
+      let offset = 1
+
+      if (type === 'hour' && !this.is24hr) {
+        range = range.slice(1, 13)
+        offset = 0
+      }
+
+      return range.slice(start + offset, range.length)
+        .concat(range.slice(0, start + offset))
+    },
+    firstAllowed (type, value) {
+      const allowed = this[`allowed${type.charAt(0).toUpperCase() + type.slice(1)}s`]
+
+      if (!allowed) return value
+
+      const range = this.generateRange(type, value)
+
+      const first = range.find(v => this.isAllowed(type, v))
+
+      return first || value
+    }
+  },
+
+  render (h) {
+    const children = [this.genBody()]
+
+    !this.noTitle && children.unshift(this.genTitle())
+    this.$scopedSlots.default && children.push(this.genSlot())
+
+    return h('k-card', {
+      'class': {
+        'picker picker--time': true,
+        'picker--landscape': this.landscape,
+        'picker--time--hours': this.selectingHour,
+        ...this.themeClasses
+      }
+    }, children)
+  }
+}

package/src/components/KTimePicker/index.js

@@ -0,0 +1,7 @@
+import KTimePicker from './KTimePicker'
+
+KTimePicker.install = function install (Kdu) {
+  Kdu.component(KTimePicker.name, KTimePicker)
+}
+
+export default KTimePicker

package/src/components/KTimePicker/mixins/time-body.js

@@ -0,0 +1,208 @@
+export default {
+  data () {
+    return {
+      hasChanged: false
+    }
+  },
+  methods: {
+    genBody () {
+      const children = [this.genHand(this.selectingHour ? 'hour' : 'minute')]
+      const data = {
+        'class': 'picker--time__clock',
+        on: {
+          mousedown: this.onMouseDown,
+          mouseup: this.onMouseUp,
+          mouseleave: () => {
+            this.isDragging && this.onMouseUp()
+          },
+          touchstart: this.onMouseDown,
+          touchend: this.onMouseUp,
+          mousemove: this.onDragMove,
+          touchmove: this.onDragMove
+        },
+        key: this.selectingHour ? 'hour' : 'minute',
+        ref: 'clock'
+      }
+
+      this.selectingHour &&
+        children.push(this.genHours()) ||
+        children.push(this.genMinutes())
+
+      if (this.scrollable) {
+        data.on.wheel = e => {
+          e.preventDefault()
+
+          const diff = e.wheelDelta > 0 ? 1 : -1
+          const changing = this.selectingHour ? 'changeHour' : 'changeMinute'
+
+          this[changing](diff)
+        }
+      }
+
+      return this.$createElement('div', {
+        'class': 'picker__body'
+      }, [
+        this.$createElement('transition', {
+          props: {
+            name: 'fade-transition',
+            mode: 'out-in'
+          }
+        }, [
+          this.$createElement('div', data, children)
+        ])
+      ])
+    },
+    genHand (type) {
+      const scale = this.is24hrAfter12 ? 'scaleY(0.6)' : ''
+      return [this.$createElement('div', {
+        'class': `picker--time__clock-hand ${type}`,
+        style: {
+          transform: `rotate(${this.clockHand}deg) ${scale}`
+        }
+      })]
+    },
+    genHours () {
+      let hours = this.is24hr ? 24 : 12
+      const children = []
+      let start = 0
+
+      if (hours === 12) {
+        hours++
+        start = 1
+      }
+
+      for (let i = start; i < hours; i++) {
+        children.push(this.$createElement('span', {
+          'class': {
+            'active': i === this.hour,
+            'disabled': !this.isAllowed('hour', i)
+          },
+          style: this.getTransform(i),
+          domProps: { innerHTML: `<span>${i}</span>` }
+        }))
+      }
+
+      return children
+    },
+    genMinutes () {
+      const children = []
+
+      for (let i = 0; i < 60; i = i + 5) {
+        let num = i
+
+        if (num < 10) num = `0${num}`
+        if (num === 60) num = '00'
+
+        children.push(this.$createElement('span', {
+          'class': {
+            'active': num.toString() === this.minute.toString(),
+            'disabled': !this.isAllowed('minute', i)
+          },
+          style: this.getTransform(i),
+          domProps: { innerHTML: `<span>${num}</span>` }
+        }))
+      }
+
+      return children
+    },
+    getTransform (i) {
+      const { x, y } = this.getPosition(i)
+
+      return { transform: `translate(${x}px, ${y}px)` }
+    },
+    getPosition (i) {
+      const radiusPercentage = this.selectingHour &&
+        this.is24hr &&
+        i >= 12 ? 0.5 : 0.8
+      const r = this.radius * radiusPercentage
+      i = this.selectingHour && this.is24hr ? i % 12 : i
+      return {
+        x: Math.round(Math.sin(i * this.degrees) * r),
+        y: Math.round(-Math.cos(i * this.degrees) * r)
+      }
+    },
+    changeHour (time) {
+      let range = this.generateRange('hour', this.hour)
+
+      time < 0 && (range = range.reverse().slice(1))
+      this.hour = range.find((h) => {
+        return this.allowedHours ? this.isAllowed('hour', h) : true
+      })
+
+      return true
+    },
+    changeMinute (time) {
+      const current = Number(this.minute)
+      let range = this.generateRange('minute', current)
+
+      time < 0 && (range = range.reverse().slice(1))
+      const minute = range.find((m) => {
+        return this.allowedMinutes ? this.isAllowed('minute', m) : true
+      })
+
+      this.minute = minute < 10 ? `0${minute}` : minute
+
+      return true
+    },
+    onMouseDown (e) {
+      e.preventDefault()
+
+      this.isDragging = true
+      this.onDragMove(e)
+    },
+    onMouseUp () {
+      this.isDragging = false
+      !this.selectingHour && this.autosave && this.save()
+      if (this.hasChanged) {
+        this.selectingHour = false
+        this.hasChanged = false
+      }
+    },
+    onDragMove (e) {
+      e.preventDefault()
+      if (!this.isDragging && e.type !== 'click') return
+
+      const rect = this.$refs.clock.getBoundingClientRect()
+      const center = { x: rect.width / 2, y: 0 - rect.width / 2 }
+      const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
+      const coords = {
+        y: rect.top - clientY,
+        x: clientX - rect.left
+      }
+
+      const selecting = this.selectingHour ? 'hour' : 'minute'
+      let value = Math.round(this.angle(center, coords) / this.degreesPerUnit)
+
+      if (this.selectingHour && this.is24hr) {
+        const insideClick = this.euclidean(center, coords) / this.radius < 0.65
+        value = insideClick ? value + 12 : value
+
+        // Necessary to fix edge case when selecting left part of 0 and 12
+        value = this.angle(center, coords) >= 345 ? (value + 12) % 24 : value
+      }
+
+      if (this.isAllowed(selecting, value)) {
+        this[selecting] = value
+        this.hasChanged = true
+      }
+    },
+    euclidean (p0, p1) {
+      const dx = Math.abs(p1.x - p0.x)
+      const dy = Math.abs(p1.y - p0.y)
+
+      return Math.sqrt(dx * dx + dy * dy)
+    },
+    angle (center, p1) {
+      var p0 = {
+        x: center.x,
+        y: center.y + Math.sqrt(
+          Math.abs(p1.x - center.x) * Math.abs(p1.x - center.x) +
+          Math.abs(p1.y - center.y) * Math.abs(p1.y - center.y))
+      }
+
+      const value = 2 * Math.atan2(p1.y - p0.y, p1.x - p0.x)
+      return Math.abs(value * 180 / Math.PI)
+    }
+  }
+}

package/src/components/KTimePicker/mixins/time-title.js

@@ -0,0 +1,51 @@
+export default {
+  methods: {
+    genTitle () {
+      const children = [this.genTime()]
+
+      if (this.format === 'ampm') {
+        children.push(this.genAMPM())
+      }
+
+      return this.$createElement('div', {
+        'class': 'picker__title'
+      }, children)
+    },
+    genTime () {
+      let hour = this.hour
+
+      if (this.is24hr && hour < 10) {
+        hour = `0${hour}`
+      }
+
+      return this.$createElement('div', {
+        'class': 'picker--time__title'
+      }, [
+        this.$createElement('span', {
+          'class': { active: this.selectingHour },
+          on: {
+            click: () => (this.selectingHour = true)
+          }
+        }, hour),
+        this.$createElement('span', {
+          'class': { active: !this.selectingHour },
+          on: {
+            click: () => (this.selectingHour = false)
+          }
+        }, `:${this.minute}`)
+      ])
+    },
+    genAMPM () {
+      return this.$createElement('div', [
+        this.genPeriod('am'),
+        this.genPeriod('pm')
+      ])
+    },
+    genPeriod (period) {
+      return this.$createElement('span', {
+        'class': { active: this.period === period },
+        on: { click: () => (this.period = period) }
+      }, period.toUpperCase())
+    }
+  }
+}