kdutify 0.16.9-rc.0

package/src/components/KDatePicker/KDatePicker.js

@@ -0,0 +1,382 @@
+require('../../stylus/components/_pickers.styl')
+require('../../stylus/components/_date-picker.styl')
+
+import { createRange } from '../../util/helpers'
+
+import Picker from '../../mixins/picker'
+import DateYears from './mixins/date-years'
+import DateTitle from './mixins/date-title'
+import DateHeader from './mixins/date-header'
+import DateTable from './mixins/date-table'
+import MonthTable from './mixins/month-table'
+import KBtn from '../KBtn'
+import KCard from '../KCard'
+import KIcon from '../KIcon'
+
+import Touch from '../../directives/touch'
+
+const createDefaultDateFormat = type => date => {
+  const pad = n => n < 10 ? `0${n}` : `${n}`
+  const isoString = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+  return isoString.substr(0, { date: 10, month: 7, year: 4 }[type])
+}
+
+export default {
+  name: 'k-date-picker',
+
+  components: {
+    KBtn,
+    KCard,
+    KIcon
+  },
+
+  mixins: [Picker, DateYears, DateTitle, DateHeader, DateTable, MonthTable],
+
+  directives: { Touch },
+
+  data () {
+    return {
+      tableDate: new Date(),
+      originalDate: this.value,
+      currentDay: null,
+      currentMonth: null,
+      currentYear: null,
+      isReversing: false,
+      narrowDays: [],
+      activePicker: this.type.toUpperCase()
+    }
+  },
+
+  props: {
+    locale: {
+      type: String,
+      default: 'en-us'
+    },
+    type: {
+      type: String,
+      default: 'date',
+      validator: type => ['date', 'month'/*, 'year'*/].includes(type)
+    },
+    dateFormat: {
+      type: Function,
+      default: null
+    },
+    titleDateFormat: {
+      type: [Object, Function],
+      default: null
+    },
+    headerDateFormat: {
+      type: [Object, Function],
+      default: () => ({ month: 'long', year: 'numeric' })
+    },
+    monthFormat: {
+      type: [Object, Function],
+      default: () => ({ month: 'short' })
+    },
+    formattedValue: {
+      required: false
+    },
+    allowedDates: {
+      type: [Array, Object, Function],
+      default: () => (null)
+    },
+    firstDayOfWeek: {
+      type: [String, Number],
+      default: 0
+    },
+    yearIcon: String
+  },
+
+  computed: {
+    timeZone () {
+      try {
+        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+        new Date('2000-01-15').toLocaleDateString('en', {
+          day: 'numeric',
+          timeZone
+        })
+        return timeZone
+      } catch (e) {
+        return 'UTC'
+      }
+    },
+    supportsLocaleFormat () {
+      return ('toLocaleDateString' in Date.prototype) &&
+        new Date('2000-01-15').toLocaleDateString('en', {
+          day: 'numeric',
+          timeZone: 'UTC'
+        }) === '15'
+    },
+    firstAllowedDate () {
+      const date = new Date()
+
+      if (this.type === 'month') {
+        date.setDate(1)
+        date.setHours(1)
+
+        if (this.allowedDates) {
+          const valid = new Date(date)
+          for (let month = 0; month < 12; month++) {
+            valid.setMonth(month)
+            if (this.isAllowed(valid)) {
+              return valid
+            }
+          }
+        }
+      } else if (this.type === 'date') {
+        date.setHours(1)
+        const month = date.getMonth()
+
+        if (this.allowedDates) {
+          const valid = new Date(date)
+          for (let i = 0; i < 31; i++) {
+            if (date.getMonth() === month && this.isAllowed(valid)) return valid
+            valid.setDate(i)
+          }
+        }
+      }
+
+      return date
+    },
+    inputDate: {
+      get () {
+        const date = this.makeDate(this.value)
+        return date == null ? this.firstAllowedDate : date
+      },
+      set (value) {
+        const date = this.makeDate(value)
+        const pickerDateFormat = createDefaultDateFormat(this.type)
+        this.$emit('input', date == null ? this.originalDate : pickerDateFormat(date))
+        this.$emit('update:formattedValue', (this.dateFormat || pickerDateFormat)(date == null ? (this.makeDate(this.originalDate) || this.firstAllowedDate) : date))
+      }
+    },
+    day () {
+      return this.inputDate.getDate()
+    },
+    month () {
+      return this.inputDate.getMonth()
+    },
+    year () {
+      return this.inputDate.getFullYear()
+    },
+    tableMonth () {
+      return this.tableDate.getMonth()
+    },
+    tableYear () {
+      return this.tableDate.getFullYear()
+    },
+    computedTransition () {
+      return this.isReversing ? 'tab-reverse-transition' : 'tab-transition'
+    },
+    titleText () {
+      const date = this.normalizeDate(this.year, this.month, this.day)
+
+      const defaultTitleDateFormat = this.type === 'year' ? {
+        year: 'numeric'
+      } : (this.type === 'month' ? {
+        month: 'long'
+      } : {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric'
+      })
+
+      let titleText
+      if (typeof this.titleDateFormat === 'function') {
+        titleText = this.titleDateFormat(date)
+      } else if (this.supportsLocaleFormat) {
+        titleText = date.toLocaleDateString(this.locale, Object.assign(this.titleDateFormat || defaultTitleDateFormat, {
+          timeZone: this.timeZone
+        }))
+      } else if ('toLocaleDateString' in Date.prototype) {
+        titleText = createDefaultDateFormat(this.type)(date)
+      }
+
+      if (this.landscape) {
+        if (titleText.indexOf(',') > -1) titleText = titleText.replace(',', ',<br>')
+        else if (titleText.indexOf(' ') > -1) titleText = titleText.replace(' ', '<br>')
+      }
+
+      return titleText
+    }
+  },
+
+  watch: {
+    activePicker (val, prev) {
+      if (val !== 'YEAR') return
+
+      // That's a quirk, setting timeout stopped working after fixing #1649
+      // It worked but for timeouts significantly longer than the transition duration
+      const interval = setInterval(() => {
+        if (this.$refs.years) {
+          this.$refs.years.scrollTop = this.$refs.years.scrollHeight / 2 - 125
+          clearInterval(interval)
+        }
+      }, 100)
+    },
+    tableDate (val, prev) {
+      this.isReversing = val < prev
+    },
+    value (val) {
+      if (val) this.tableDate = this.inputDate
+    },
+    type (val) {
+      if (val === 'month' && this.activePicker === 'DATE') {
+        this.activePicker = 'MONTH'
+      } else if (val === 'year') {
+        this.activePicker = 'YEAR'
+      }
+    },
+    firstDayOfWeek () {
+      this.getWeekDays()
+    }
+  },
+
+  methods: {
+    save () {
+      if (this.originalDate) {
+        this.originalDate = this.value
+      } else {
+        this.originalDate = this.inputDate
+      }
+
+      if (this.$parent && this.$parent.isActive) this.$parent.isActive = false
+    },
+    cancel () {
+      this.inputDate = this.originalDate
+      if (this.$parent && this.$parent.isActive) this.$parent.isActive = false
+    },
+    getWeekDays () {
+      const first = parseInt(this.firstDayOfWeek, 10)
+      if (this.supportsLocaleFormat) {
+        const date = this.normalizeDate(2000, 1, 7)
+        const day = date.getDate() - date.getDay() + first
+        const format = { weekday: 'narrow' }
+        this.narrowDays = createRange(7).map(i => this.normalizeDate(2000, 1, day + i).toLocaleDateString(this.locale, format))
+      } else {
+        this.narrowDays = createRange(7).map(i => ['S', 'M', 'T', 'W', 'T', 'F', 'S'][(i + first) % 7])
+      }
+    },
+    isAllowed (date) {
+      if (!this.allowedDates) return true
+
+      if (Array.isArray(this.allowedDates)) {
+        const format = createDefaultDateFormat(this.activePicker === 'MONTH' ? 'month' : 'date')
+        date = format(this.makeDate(date))
+        return !!this.allowedDates.find(allowedDate => {
+          allowedDate = this.makeDate(allowedDate)
+          return allowedDate && format(allowedDate) === date
+        })
+      } else if (this.allowedDates instanceof Function) {
+        return this.allowedDates(date)
+      } else if (this.allowedDates instanceof Object) {
+        const format = createDefaultDateFormat(this.activePicker === 'MONTH' ? 'month' : 'date')
+        const min = format(this.makeDate(this.allowedDates.min))
+        const max = format(this.makeDate(this.allowedDates.max))
+        date = format(date)
+        return (!min || min <= date) && (!max || max >= date)
+      }
+
+      return true
+    },
+    genTableTouch (touchCallback) {
+      return {
+        name: 'touch',
+        value: {
+          left: e => (e.offsetX < -15) && touchCallback(1),
+          right: e => (e.offsetX > 15) && touchCallback(-1)
+        }
+      }
+    },
+    genTable (tableChildren, touchCallback) {
+      const wheel = this.activePicker === 'MONTH' ? this.monthWheelScroll : this.dateWheelScroll
+      const options = {
+        staticClass: 'picker--date__table',
+        'class': {
+          'picker--month__table': this.activePicker === 'MONTH'
+        },
+        on: this.scrollable ? { wheel } : undefined,
+        directives: [this.genTableTouch(touchCallback)]
+      }
+
+      const table = this.$createElement('table', {
+        key: this.activePicker === 'MONTH' ? this.tableYear : this.tableMonth
+      }, tableChildren)
+
+      return this.$createElement('div', options, [
+        this.$createElement('transition', {
+          props: { name: this.computedTransition }
+        }, [table])
+      ])
+    },
+    genPickerBody (h) {
+      const pickerBodyChildren = []
+      if (this.activePicker === 'DATE') {
+        pickerBodyChildren.push(h('div', { staticClass: 'picker--date__header' }, [this.genSelector()]))
+        pickerBodyChildren.push(this.genTable([
+          this.dateGenTHead(),
+          this.dateGenTBody()
+        ], value => this.tableDate = this.normalizeDate(this.tableYear, this.tableMonth + value)))
+      } else if (this.activePicker === 'MONTH') {
+        pickerBodyChildren.push(h('div', { staticClass: 'picker--date__header' }, [this.genSelector()]))
+        pickerBodyChildren.push(this.genTable([
+          this.monthGenTBody()
+        ], value => this.tableDate = this.normalizeDate(this.tableYear + value)))
+      } else if (this.activePicker === 'YEAR') {
+        pickerBodyChildren.push(this.genYears())
+      }
+
+      return pickerBodyChildren
+    },
+    makeDate (val) {
+      if (val == null) return val
+      if (val instanceof Date) return val
+      if (!isNaN(val)) return new Date(val)
+      const [year, month, date] = val.trim().split(' ')[0].split('-')
+      return this.normalizeDate(year, month ? (month - 1) : 0, date ? (date * 1) : 1)
+    },
+    normalizeDate (year, month = 0, date = 1) {
+      return new Date(year, month, date, 1 /* Workaround for #1409 */)
+    }
+  },
+
+  created () {
+    this.getWeekDays()
+    this.tableDate = this.inputDate
+  },
+
+  mounted () {
+    const date = new Date()
+    this.currentDay = date.getDate()
+    this.currentMonth = date.getMonth()
+    this.currentYear = date.getFullYear()
+  },
+
+  render (h) {
+    const children = []
+
+    !this.noTitle && children.push(this.genTitle(this.titleText))
+
+    children.push(h('transition', {
+      props: {
+        origin: 'center center',
+        mode: 'out-in',
+        name: 'scale-transition'
+      }
+    }, [h('div', {
+      staticClass: 'picker__body',
+      key: this.activePicker
+    }, this.genPickerBody(h))]))
+
+    this.$scopedSlots.default && children.push(this.genSlot())
+
+    return h('k-card', {
+      staticClass: 'picker picker--date',
+      'class': {
+        'picker--landscape': this.landscape,
+        ...this.themeClasses
+      }
+    }, children)
+  }
+
+}

package/src/components/KDatePicker/index.js

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

package/src/components/KDatePicker/mixins/date-header.js

@@ -0,0 +1,74 @@
+export default {
+  methods: {
+    genBtn (change, children) {
+      return this.$createElement('k-btn', {
+        props: {
+          dark: this.dark,
+          icon: true
+        },
+        nativeOn: {
+          click: e => {
+            e.stopPropagation()
+            if (this.activePicker === 'DATE') {
+              this.tableDate = this.normalizeDate(this.tableYear, change)
+            } else if (this.activePicker === 'MONTH') {
+              this.tableDate = this.normalizeDate(change, this.tableMonth)
+            }
+          }
+        }
+      }, children)
+    },
+
+    genHeader (keyValue, selectorText) {
+      const header = this.$createElement('strong', {
+        key: keyValue,
+        on: {
+          click: () => this.activePicker = this.activePicker === 'DATE' ? 'MONTH' : 'YEAR'
+        }
+      }, selectorText)
+
+      const transition = this.$createElement('transition', {
+        props: { name: this.computedTransition }
+      }, [header])
+
+      return this.$createElement('div', {
+        'class': 'picker--date__header-selector-date'
+      }, [transition])
+    },
+
+    genSelector () {
+      const keyValue = this.activePicker === 'DATE' ? this.tableMonth : this.tableYear
+      const selectorDate = this.normalizeDate(this.tableYear, this.tableMonth)
+
+      let selectorText = ''
+      if (typeof this.headerDateFormat === 'function' && this.activePicker === 'DATE') {
+        selectorText = this.headerDateFormat(selectorDate, this.activePicker)
+      } else if (this.supportsLocaleFormat) {
+        const format = this.activePicker === 'DATE'
+          ? this.headerDateFormat
+          : { year: 'numeric' }
+        selectorText = selectorDate.toLocaleDateString(this.locale, Object.assign(format, {
+          timeZone: this.timeZone
+        }))
+      } else if (this.activePicker === 'DATE') {
+        selectorText = selectorDate.getFullYear() + '/'
+        if (selectorDate.getMonth() < 9) selectorText += '0'
+        selectorText += (1 + selectorDate.getMonth())
+      } else if (this.activePicker === 'MONTH') {
+        selectorText = selectorDate.getFullYear()
+      }
+
+      return this.$createElement('div', {
+        'class': 'picker--date__header-selector'
+      }, [
+        this.genBtn(keyValue - 1, [
+          this.$createElement('k-icon', 'chevron_left')
+        ]),
+        this.genHeader(keyValue, selectorText),
+        this.genBtn(keyValue + 1, [
+          this.$createElement('k-icon', 'chevron_right')
+        ])
+      ])
+    }
+  }
+}

package/src/components/KDatePicker/mixins/date-table.js

@@ -0,0 +1,95 @@
+export default {
+  methods: {
+    dateWheelScroll (e) {
+      e.preventDefault()
+
+      let month = this.tableMonth
+
+      if (e.deltaY < 0) month++
+      else month--
+
+      this.tableDate = this.normalizeDate(this.tableYear, month)
+    },
+    dateGenTHead () {
+      const days = this.narrowDays.map(day => this.$createElement('th', day))
+      return this.$createElement('thead', this.dateGenTR(days))
+    },
+    dateClick (day) {
+      this.inputDate = this.normalizeDate(this.tableYear, this.tableMonth, day)
+      this.$nextTick(() => (this.autosave && this.save()))
+    },
+    dateGenButtonText (date, day) {
+      return this.supportsLocaleFormat
+        ? date.toLocaleDateString(this.locale, {
+          day: 'numeric',
+          timeZone: this.timeZone
+        })
+        : day
+    },
+    dateGenTD (day) {
+      const date = this.normalizeDate(this.tableYear, this.tableMonth, day)
+      const buttonText = this.dateGenButtonText(date, day)
+      const button = this.$createElement('button', {
+        staticClass: 'btn btn--date-picker btn--floating btn--small btn--flat',
+        'class': {
+          'btn--active': this.dateIsActive(day),
+          'btn--outline': this.dateIsCurrent(day) && !this.dateIsActive(day),
+          'btn--disabled': !this.isAllowed(date)
+        },
+        attrs: {
+          type: 'button'
+        },
+        domProps: {
+          innerHTML: `<span class="btn__content">${buttonText}</span>`
+        },
+        on: {
+          click: () => this.dateClick(day)
+        }
+      })
+
+      return this.$createElement('td', [button])
+    },
+    dateGenTBody () {
+      const children = []
+      const daysInMonth = this.normalizeDate(this.tableYear, this.tableMonth + 1, 0).getDate()
+      let rows = []
+      const day = (this.normalizeDate(this.tableYear, this.tableMonth).getDay() - parseInt(this.firstDayOfWeek) + 7) % 7
+
+      for (let i = 0; i < day; i++) {
+        rows.push(this.$createElement('td'))
+      }
+
+      for (let i = 1; i <= daysInMonth; i++) {
+        rows.push(this.dateGenTD(i))
+
+        if (rows.length % 7 === 0) {
+          children.push(this.dateGenTR(rows))
+          rows = []
+        }
+      }
+
+      if (rows.length) {
+        children.push(this.dateGenTR(rows))
+      }
+
+      children.length < 6 && children.push(this.dateGenTR([
+        this.$createElement('td', { domProps: { innerHTML: '&nbsp;' } })
+      ]))
+
+      return this.$createElement('tbody', children)
+    },
+    dateGenTR (children = [], data = {}) {
+      return [this.$createElement('tr', data, children)]
+    },
+    dateIsActive (i) {
+      return this.tableYear === this.year &&
+        this.tableMonth === this.month &&
+        this.day === i
+    },
+    dateIsCurrent (i) {
+      return this.currentYear === this.tableYear &&
+        this.currentMonth === this.tableMonth &&
+        this.currentDay === i
+    }
+  }
+}

package/src/components/KDatePicker/mixins/date-title.js

@@ -0,0 +1,76 @@
+
+export default {
+  methods: {
+    genYearIcon () {
+      return this.yearIcon
+        ? this.$createElement('k-icon', {
+          props: {
+            dark: true
+          }
+        }, this.yearIcon)
+        : null
+    },
+
+    getYearBtn () {
+      const titleDate = this.normalizeDate(this.year, this.month, this.day)
+      return this.$createElement('div', {
+        'class': {
+          'picker--date__title-year': true,
+          'active': this.activePicker === 'YEAR'
+        },
+        on: {
+          click: e => {
+            e.stopPropagation()
+            this.activePicker = 'YEAR'
+          }
+        }
+      }, [
+        this.supportsLocaleFormat
+          ? titleDate.toLocaleDateString(this.locale, {
+            year: 'numeric',
+            timeZone: this.timeZone
+          })
+          : this.year,
+        this.genYearIcon()
+      ])
+    },
+
+    genTitleText (title) {
+      return this.$createElement('transition', {
+        props: {
+          name: 'slide-y-reverse-transition',
+          mode: 'out-in'
+        }
+      }, [
+        this.$createElement('div', {
+          domProps: { innerHTML: title },
+          key: title
+        })
+      ])
+    },
+
+    genTitleDate (title) {
+      return this.$createElement('div', {
+        staticClass: 'picker--date__title-date',
+        'class': {
+          'active': this.activePicker === this.type.toUpperCase()
+        },
+        on: {
+          click: e => {
+            e.stopPropagation()
+            this.activePicker = this.type.toUpperCase()
+          }
+        }
+      }, [this.genTitleText(title)])
+    },
+
+    genTitle (title) {
+      return this.$createElement('div', {
+        'class': 'picker__title'
+      }, [
+        this.getYearBtn(),
+        this.genTitleDate(title)
+      ])
+    }
+  }
+}

package/src/components/KDatePicker/mixins/date-years.js

@@ -0,0 +1,42 @@
+export default {
+  methods: {
+    genYears () {
+      return this.$createElement('ul', {
+        staticClass: 'picker--date__years',
+        key: 'year',
+        ref: 'years'
+      }, this.genYearItems())
+    },
+    yearClick (year) {
+      this.inputDate = this.normalizeDate(year, this.tableMonth, this.day)
+
+      if (this.type === 'year') {
+        this.$nextTick(() => (this.autosave && this.save()))
+      } else {
+        this.activePicker = 'MONTH'
+      }
+    },
+    genYearItems () {
+      const children = []
+      for (let year = this.year + 100, length = this.year - 100; year > length; year--) {
+        const date = this.normalizeDate(year, this.month, this.day)
+        const buttonText = this.supportsLocaleFormat
+          ? date.toLocaleDateString(this.locale, {
+            year: 'numeric',
+            timeZone: this.timeZone
+          })
+          : year
+
+        children.push(this.$createElement('li', {
+          'class': {
+            active: this.year === year
+          },
+          on: {
+            click: () => this.yearClick(year)
+          }
+        }, buttonText))
+      }
+      return children
+    }
+  }
+}