kdutify 0.16.9-rc.0 → 2.6.1

package/es5/components/KDatePicker/KDatePicker.js

@@ -1,416 +1,553 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+"use strict";
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-require('../../../src/stylus/components/_pickers.styl');
-require('../../../src/stylus/components/_date-picker.styl');
+var _KDatePickerTitle = _interopRequireDefault(require("./KDatePickerTitle"));
 
-import { createRange } from '../../util/helpers';
+var _KDatePickerHeader = _interopRequireDefault(require("./KDatePickerHeader"));
 
-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';
+var _KDatePickerDateTable = _interopRequireDefault(require("./KDatePickerDateTable"));
 
-import Touch from '../../directives/touch';
+var _KDatePickerMonthTable = _interopRequireDefault(require("./KDatePickerMonthTable"));
 
-var createDefaultDateFormat = function createDefaultDateFormat(type) {
-  return function (date) {
-    var pad = function pad(n) {
-      return n < 10 ? '0' + n : '' + n;
-    };
-    var isoString = date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate());
-    return isoString.substr(0, { date: 10, month: 7, year: 4 }[type]);
-  };
-};
+var _KDatePickerYears = _interopRequireDefault(require("./KDatePickerYears"));
 
-export default {
-  name: 'k-date-picker',
+var _localable = _interopRequireDefault(require("../../mixins/localable"));
 
-  components: {
-    KBtn: KBtn,
-    KCard: KCard,
-    KIcon: KIcon
-  },
+var _picker = _interopRequireDefault(require("../../mixins/picker"));
 
-  mixins: [Picker, DateYears, DateTitle, DateHeader, DateTable, MonthTable],
+var _isDateAllowed2 = _interopRequireDefault(require("./util/isDateAllowed"));
 
-  directives: { Touch: Touch },
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
 
-  data: function data() {
-    return {
-      tableDate: new Date(),
-      originalDate: this.value,
-      currentDay: null,
-      currentMonth: null,
-      currentYear: null,
-      isReversing: false,
-      narrowDays: [],
-      activePicker: this.type.toUpperCase()
-    };
-  },
+var _helpers = require("../../util/helpers");
+
+var _timestamp = require("../KCalendar/util/timestamp");
+
+var _console = require("../../util/console");
+
+var _util = require("./util");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default2 = (0, _mixins.default)(_localable.default, _picker.default).extend({
+  name: 'k-date-picker',
   props: {
-    locale: {
+    activePicker: String,
+    allowedDates: Function,
+    // Function formatting the day in date picker table
+    dayFormat: Function,
+    disabled: Boolean,
+    events: {
+      type: [Array, Function, Object],
+      default: function _default() {
+        return null;
+      }
+    },
+    eventColor: {
+      type: [Array, Function, Object, String],
+      default: function _default() {
+        return 'warning';
+      }
+    },
+    firstDayOfWeek: {
+      type: [String, Number],
+      default: 0
+    },
+    // Function formatting the tableDate in the day/month table header
+    headerDateFormat: Function,
+    localeFirstDayOfYear: {
+      type: [String, Number],
+      default: 0
+    },
+    max: String,
+    min: String,
+    // Function formatting month in the months table
+    monthFormat: Function,
+    multiple: Boolean,
+    nextIcon: {
       type: String,
-      default: 'en-us'
+      default: '$next'
     },
-    type: {
+    nextMonthAriaLabel: {
       type: String,
-      default: 'date',
-      validator: function validator(type) {
-        return ['date', 'month' /*, 'year'*/].includes(type);
-      }
+      default: '$kdutify.datePicker.nextMonthAriaLabel'
     },
-    dateFormat: {
-      type: Function,
-      default: null
+    nextYearAriaLabel: {
+      type: String,
+      default: '$kdutify.datePicker.nextYearAriaLabel'
     },
-    titleDateFormat: {
-      type: [Object, Function],
-      default: null
+    pickerDate: String,
+    prevIcon: {
+      type: String,
+      default: '$prev'
     },
-    headerDateFormat: {
-      type: [Object, Function],
-      default: function _default() {
-        return { month: 'long', year: 'numeric' };
-      }
+    prevMonthAriaLabel: {
+      type: String,
+      default: '$kdutify.datePicker.prevMonthAriaLabel'
     },
-    monthFormat: {
-      type: [Object, Function],
-      default: function _default() {
-        return { month: 'short' };
-      }
+    prevYearAriaLabel: {
+      type: String,
+      default: '$kdutify.datePicker.prevYearAriaLabel'
     },
-    formattedValue: {
-      required: false
+    range: Boolean,
+    reactive: Boolean,
+    readonly: Boolean,
+    scrollable: Boolean,
+    showCurrent: {
+      type: [Boolean, String],
+      default: true
     },
-    allowedDates: {
-      type: [Array, Object, Function],
-      default: function _default() {
-        return null;
-      }
+    selectedItemsText: {
+      type: String,
+      default: '$kdutify.datePicker.itemsSelected'
     },
-    firstDayOfWeek: {
-      type: [String, Number],
-      default: 0
+    showAdjacentMonths: Boolean,
+    showWeek: Boolean,
+    // Function formatting currently selected date in the picker title
+    titleDateFormat: Function,
+    type: {
+      type: String,
+      default: 'date',
+      validator: function validator(type) {
+        return ['date', 'month'].includes(type);
+      }
     },
+    value: [Array, String],
+    weekdayFormat: Function,
+    // Function formatting the year in table header and pickup title
+    yearFormat: Function,
     yearIcon: String
   },
+  data: function data() {
+    var _this = this;
+
+    var now = new Date();
+    return {
+      internalActivePicker: this.type.toUpperCase(),
+      inputDay: null,
+      inputMonth: null,
+      inputYear: null,
+      isReversing: false,
+      now: now,
+      // tableDate is a string in 'YYYY' / 'YYYY-M' format (leading zero for month is not required)
+      tableDate: function () {
+        if (_this.pickerDate) {
+          return _this.pickerDate;
+        }
 
+        var multipleValue = (0, _helpers.wrapInArray)(_this.value);
+        var date = multipleValue[multipleValue.length - 1] || (typeof _this.showCurrent === 'string' ? _this.showCurrent : "".concat(now.getFullYear(), "-").concat(now.getMonth() + 1));
+        return (0, _util.sanitizeDateString)(date, _this.type === 'date' ? 'month' : 'year');
+      }()
+    };
+  },
   computed: {
-    timeZone: function timeZone() {
-      try {
-        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        new Date('2000-01-15').toLocaleDateString('en', {
-          day: 'numeric',
-          timeZone: timeZone
+    multipleValue: function multipleValue() {
+      return (0, _helpers.wrapInArray)(this.value);
+    },
+    isMultiple: function isMultiple() {
+      return this.multiple || this.range;
+    },
+    lastValue: function lastValue() {
+      return this.isMultiple ? this.multipleValue[this.multipleValue.length - 1] : this.value;
+    },
+    selectedMonths: function selectedMonths() {
+      if (!this.value || this.type === 'month') {
+        return this.value;
+      } else if (this.isMultiple) {
+        return this.multipleValue.map(function (val) {
+          return val.substr(0, 7);
         });
-        return timeZone;
-      } catch (e) {
-        return 'UTC';
+      } else {
+        return this.value.substr(0, 7);
       }
     },
-    supportsLocaleFormat: function supportsLocaleFormat() {
-      return 'toLocaleDateString' in Date.prototype && new Date('2000-01-15').toLocaleDateString('en', {
-        day: 'numeric',
-        timeZone: 'UTC'
-      }) === '15';
-    },
-    firstAllowedDate: function firstAllowedDate() {
-      var date = new Date();
-
-      if (this.type === 'month') {
-        date.setDate(1);
-        date.setHours(1);
-
-        if (this.allowedDates) {
-          var valid = new Date(date);
-          for (var month = 0; month < 12; month++) {
-            valid.setMonth(month);
-            if (this.isAllowed(valid)) {
-              return valid;
-            }
-          }
-        }
-      } else if (this.type === 'date') {
-        date.setHours(1);
-        var _month = date.getMonth();
-
-        if (this.allowedDates) {
-          var _valid = new Date(date);
-          for (var i = 0; i < 31; i++) {
-            if (date.getMonth() === _month && this.isAllowed(_valid)) return _valid;
-            _valid.setDate(i);
-          }
-        }
+    current: function current() {
+      if (this.showCurrent === true) {
+        return (0, _util.sanitizeDateString)("".concat(this.now.getFullYear(), "-").concat(this.now.getMonth() + 1, "-").concat(this.now.getDate()), this.type);
       }
 
-      return date;
+      return this.showCurrent || null;
     },
-
-    inputDate: {
-      get: function get() {
-        var date = this.makeDate(this.value);
-        return date == null ? this.firstAllowedDate : date;
-      },
-      set: function set(value) {
-        var date = this.makeDate(value);
-        var 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));
-      }
+    inputDate: function inputDate() {
+      return this.type === 'date' ? "".concat(this.inputYear, "-").concat((0, _util.pad)(this.inputMonth + 1), "-").concat((0, _util.pad)(this.inputDay)) : "".concat(this.inputYear, "-").concat((0, _util.pad)(this.inputMonth + 1));
     },
-    day: function day() {
-      return this.inputDate.getDate();
+    tableMonth: function tableMonth() {
+      return Number((this.pickerDate || this.tableDate).split('-')[1]) - 1;
     },
-    month: function month() {
-      return this.inputDate.getMonth();
+    tableYear: function tableYear() {
+      return Number((this.pickerDate || this.tableDate).split('-')[0]);
     },
-    year: function year() {
-      return this.inputDate.getFullYear();
+    minMonth: function minMonth() {
+      return this.min ? (0, _util.sanitizeDateString)(this.min, 'month') : null;
     },
-    tableMonth: function tableMonth() {
-      return this.tableDate.getMonth();
+    maxMonth: function maxMonth() {
+      return this.max ? (0, _util.sanitizeDateString)(this.max, 'month') : null;
     },
-    tableYear: function tableYear() {
-      return this.tableDate.getFullYear();
-    },
-    computedTransition: function computedTransition() {
-      return this.isReversing ? 'tab-reverse-transition' : 'tab-transition';
-    },
-    titleText: function titleText() {
-      var date = this.normalizeDate(this.year, this.month, this.day);
-
-      var defaultTitleDateFormat = this.type === 'year' ? {
-        year: 'numeric'
-      } : this.type === 'month' ? {
-        month: 'long'
-      } : {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric'
+    minYear: function minYear() {
+      return this.min ? (0, _util.sanitizeDateString)(this.min, 'year') : null;
+    },
+    maxYear: function maxYear() {
+      return this.max ? (0, _util.sanitizeDateString)(this.max, 'year') : null;
+    },
+    formatters: function formatters() {
+      return {
+        year: this.yearFormat || (0, _util.createNativeLocaleFormatter)(this.currentLocale, {
+          year: 'numeric',
+          timeZone: 'UTC'
+        }, {
+          length: 4
+        }),
+        titleDate: this.titleDateFormat || (this.isMultiple ? this.defaultTitleMultipleDateFormatter : this.defaultTitleDateFormatter)
       };
+    },
+    defaultTitleMultipleDateFormatter: function defaultTitleMultipleDateFormatter() {
+      var _this2 = this;
 
-      var titleText = void 0;
-      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);
-      }
+      return function (dates) {
+        if (!dates.length) {
+          return '-';
+        }
 
-      if (this.landscape) {
-        if (titleText.indexOf(',') > -1) titleText = titleText.replace(',', ',<br>');else if (titleText.indexOf(' ') > -1) titleText = titleText.replace(' ', '<br>');
-      }
+        if (dates.length === 1) {
+          return _this2.defaultTitleDateFormatter(dates[0]);
+        }
 
-      return titleText;
+        return _this2.$kdutify.lang.t(_this2.selectedItemsText, dates.length);
+      };
+    },
+    defaultTitleDateFormatter: function defaultTitleDateFormatter() {
+      var titleFormats = {
+        year: {
+          year: 'numeric',
+          timeZone: 'UTC'
+        },
+        month: {
+          month: 'long',
+          timeZone: 'UTC'
+        },
+        date: {
+          weekday: 'short',
+          month: 'short',
+          day: 'numeric',
+          timeZone: 'UTC'
+        }
+      };
+      var titleDateFormatter = (0, _util.createNativeLocaleFormatter)(this.currentLocale, titleFormats[this.type], {
+        start: 0,
+        length: {
+          date: 10,
+          month: 7,
+          year: 4
+        }[this.type]
+      });
+
+      var landscapeFormatter = function landscapeFormatter(date) {
+        return titleDateFormatter(date).replace(/([^\d\s])([\d])/g, function (match, nonDigit, digit) {
+          return "".concat(nonDigit, " ").concat(digit);
+        }).replace(', ', ',<br>');
+      };
+
+      return this.landscape ? landscapeFormatter : titleDateFormatter;
     }
   },
-
   watch: {
-    activePicker: function activePicker(val, prev) {
-      var _this = this;
-
-      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
-      var interval = setInterval(function () {
-        if (_this.$refs.years) {
-          _this.$refs.years.scrollTop = _this.$refs.years.scrollHeight / 2 - 125;
-          clearInterval(interval);
-        }
-      }, 100);
+    internalActivePicker: {
+      immediate: true,
+      handler: function handler(val) {
+        this.$emit('update:active-picker', val);
+      }
+    },
+    activePicker: function activePicker(val) {
+      this.internalActivePicker = val;
     },
     tableDate: function tableDate(val, prev) {
-      this.isReversing = val < prev;
+      // Make a ISO 8601 strings from val and prev for comparision, otherwise it will incorrectly
+      // compare for example '2000-9' and '2000-10'
+      var sanitizeType = this.type === 'month' ? 'year' : 'month';
+      this.isReversing = (0, _util.sanitizeDateString)(val, sanitizeType) < (0, _util.sanitizeDateString)(prev, sanitizeType);
+      this.$emit('update:picker-date', val);
     },
-    value: function value(val) {
-      if (val) this.tableDate = this.inputDate;
+    pickerDate: function pickerDate(val) {
+      if (val) {
+        this.tableDate = val;
+      } else if (this.lastValue && this.type === 'date') {
+        this.tableDate = (0, _util.sanitizeDateString)(this.lastValue, 'month');
+      } else if (this.lastValue && this.type === 'month') {
+        this.tableDate = (0, _util.sanitizeDateString)(this.lastValue, 'year');
+      }
     },
-    type: function type(val) {
-      if (val === 'month' && this.activePicker === 'DATE') {
-        this.activePicker = 'MONTH';
-      } else if (val === 'year') {
-        this.activePicker = 'YEAR';
+    value: function value(newValue, oldValue) {
+      this.checkMultipleProp();
+      this.setInputDate();
+
+      if (!this.isMultiple && this.value && !this.pickerDate || this.isMultiple && this.multipleValue.length && (!oldValue || !oldValue.length) && !this.pickerDate) {
+        this.tableDate = (0, _util.sanitizeDateString)(this.inputDate, this.type === 'month' ? 'year' : 'month');
       }
     },
-    firstDayOfWeek: function firstDayOfWeek() {
-      this.getWeekDays();
+    type: function type(_type) {
+      this.internalActivePicker = _type.toUpperCase();
+
+      if (this.value && this.value.length) {
+        var output = this.multipleValue.map(function (val) {
+          return (0, _util.sanitizeDateString)(val, _type);
+        }).filter(this.isDateAllowed);
+        this.$emit('input', this.isMultiple ? output : output[0]);
+      }
     }
   },
+  created: function created() {
+    this.checkMultipleProp();
 
+    if (this.pickerDate !== this.tableDate) {
+      this.$emit('update:picker-date', this.tableDate);
+    }
+
+    this.setInputDate();
+  },
   methods: {
-    save: function save() {
-      if (this.originalDate) {
-        this.originalDate = this.value;
-      } else {
-        this.originalDate = this.inputDate;
+    emitInput: function emitInput(newInput) {
+      if (this.range) {
+        if (this.multipleValue.length !== 1) {
+          this.$emit('input', [newInput]);
+        } else {
+          var _output = [this.multipleValue[0], newInput];
+          this.$emit('input', _output);
+          this.$emit('change', _output);
+        }
+
+        return;
       }
 
-      if (this.$parent && this.$parent.isActive) this.$parent.isActive = false;
+      var output = this.multiple ? this.multipleValue.indexOf(newInput) === -1 ? this.multipleValue.concat([newInput]) : this.multipleValue.filter(function (x) {
+        return x !== newInput;
+      }) : newInput;
+      this.$emit('input', output);
+      this.multiple || this.$emit('change', newInput);
+    },
+    checkMultipleProp: function checkMultipleProp() {
+      if (this.value == null) return;
+      var valueType = this.value.constructor.name;
+      var expected = this.isMultiple ? 'Array' : 'String';
+
+      if (valueType !== expected) {
+        (0, _console.consoleWarn)("Value must be ".concat(this.isMultiple ? 'an' : 'a', " ").concat(expected, ", got ").concat(valueType), this);
+      }
     },
-    cancel: function cancel() {
-      this.inputDate = this.originalDate;
-      if (this.$parent && this.$parent.isActive) this.$parent.isActive = false;
+    isDateAllowed: function isDateAllowed(value) {
+      return (0, _isDateAllowed2.default)(value, this.min, this.max, this.allowedDates);
     },
-    getWeekDays: function getWeekDays() {
-      var _this2 = this;
+    yearClick: function yearClick(value) {
+      this.inputYear = value;
 
-      var first = parseInt(this.firstDayOfWeek, 10);
-      if (this.supportsLocaleFormat) {
-        var date = this.normalizeDate(2000, 1, 7);
-        var day = date.getDate() - date.getDay() + first;
-        var format = { weekday: 'narrow' };
-        this.narrowDays = createRange(7).map(function (i) {
-          return _this2.normalizeDate(2000, 1, day + i).toLocaleDateString(_this2.locale, format);
-        });
+      if (this.type === 'month') {
+        this.tableDate = "".concat(value);
       } else {
-        this.narrowDays = createRange(7).map(function (i) {
-          return ['S', 'M', 'T', 'W', 'T', 'F', 'S'][(i + first) % 7];
-        });
+        this.tableDate = "".concat(value, "-").concat((0, _util.pad)((this.tableMonth || 0) + 1));
+      }
+
+      this.internalActivePicker = 'MONTH';
+
+      if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
+        this.$emit('input', this.inputDate);
       }
     },
-    isAllowed: function isAllowed(date) {
-      var _this3 = this;
+    monthClick: function monthClick(value) {
+      this.inputYear = parseInt(value.split('-')[0], 10);
+      this.inputMonth = parseInt(value.split('-')[1], 10) - 1;
+
+      if (this.type === 'date') {
+        if (this.inputDay) {
+          this.inputDay = Math.min(this.inputDay, (0, _timestamp.daysInMonth)(this.inputYear, this.inputMonth + 1));
+        }
 
-      if (!this.allowedDates) return true;
+        this.tableDate = value;
+        this.internalActivePicker = 'DATE';
 
-      if (Array.isArray(this.allowedDates)) {
-        var format = createDefaultDateFormat(this.activePicker === 'MONTH' ? 'month' : 'date');
-        date = format(this.makeDate(date));
-        return !!this.allowedDates.find(function (allowedDate) {
-          allowedDate = _this3.makeDate(allowedDate);
-          return allowedDate && format(allowedDate) === date;
-        });
-      } else if (this.allowedDates instanceof Function) {
-        return this.allowedDates(date);
-      } else if (this.allowedDates instanceof Object) {
-        var _format = createDefaultDateFormat(this.activePicker === 'MONTH' ? 'month' : 'date');
-        var min = _format(this.makeDate(this.allowedDates.min));
-        var max = _format(this.makeDate(this.allowedDates.max));
-        date = _format(date);
-        return (!min || min <= date) && (!max || max >= date);
+        if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
+          this.$emit('input', this.inputDate);
+        }
+      } else {
+        this.emitInput(this.inputDate);
       }
+    },
+    dateClick: function dateClick(value) {
+      this.inputYear = parseInt(value.split('-')[0], 10);
+      this.inputMonth = parseInt(value.split('-')[1], 10) - 1;
+      this.inputDay = parseInt(value.split('-')[2], 10);
+      this.emitInput(this.inputDate);
+    },
+    genPickerTitle: function genPickerTitle() {
+      var _this3 = this;
 
-      return true;
+      return this.$createElement(_KDatePickerTitle.default, {
+        props: {
+          date: this.value ? this.formatters.titleDate(this.isMultiple ? this.multipleValue : this.value) : '',
+          disabled: this.disabled,
+          readonly: this.readonly,
+          selectingYear: this.internalActivePicker === 'YEAR',
+          year: this.formatters.year(this.multipleValue.length ? "".concat(this.inputYear) : this.tableDate),
+          yearIcon: this.yearIcon,
+          value: this.multipleValue[0]
+        },
+        slot: 'title',
+        on: {
+          'update:selecting-year': function updateSelectingYear(value) {
+            return _this3.internalActivePicker = value ? 'YEAR' : _this3.type.toUpperCase();
+          }
+        }
+      });
     },
-    genTableTouch: function genTableTouch(touchCallback) {
-      return {
-        name: 'touch',
-        value: {
-          left: function left(e) {
-            return e.offsetX < -15 && touchCallback(1);
+    genTableHeader: function genTableHeader() {
+      var _this4 = this;
+
+      return this.$createElement(_KDatePickerHeader.default, {
+        props: {
+          nextIcon: this.nextIcon,
+          color: this.color,
+          dark: this.dark,
+          disabled: this.disabled,
+          format: this.headerDateFormat,
+          light: this.light,
+          locale: this.locale,
+          min: this.internalActivePicker === 'DATE' ? this.minMonth : this.minYear,
+          max: this.internalActivePicker === 'DATE' ? this.maxMonth : this.maxYear,
+          nextAriaLabel: this.internalActivePicker === 'DATE' ? this.nextMonthAriaLabel : this.nextYearAriaLabel,
+          prevAriaLabel: this.internalActivePicker === 'DATE' ? this.prevMonthAriaLabel : this.prevYearAriaLabel,
+          prevIcon: this.prevIcon,
+          readonly: this.readonly,
+          value: this.internalActivePicker === 'DATE' ? "".concat((0, _util.pad)(this.tableYear, 4), "-").concat((0, _util.pad)(this.tableMonth + 1)) : "".concat((0, _util.pad)(this.tableYear, 4))
+        },
+        on: {
+          toggle: function toggle() {
+            return _this4.internalActivePicker = _this4.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR';
           },
-          right: function right(e) {
-            return e.offsetX > 15 && touchCallback(-1);
+          input: function input(value) {
+            return _this4.tableDate = value;
           }
         }
-      };
+      });
     },
-    genTable: function genTable(tableChildren, touchCallback) {
-      var wheel = this.activePicker === 'MONTH' ? this.monthWheelScroll : this.dateWheelScroll;
-      var options = {
-        staticClass: 'picker--date__table',
-        'class': {
-          'picker--month__table': this.activePicker === 'MONTH'
+    genDateTable: function genDateTable() {
+      var _this5 = this;
+
+      return this.$createElement(_KDatePickerDateTable.default, {
+        props: {
+          allowedDates: this.allowedDates,
+          color: this.color,
+          current: this.current,
+          dark: this.dark,
+          disabled: this.disabled,
+          events: this.events,
+          eventColor: this.eventColor,
+          firstDayOfWeek: this.firstDayOfWeek,
+          format: this.dayFormat,
+          light: this.light,
+          locale: this.locale,
+          localeFirstDayOfYear: this.localeFirstDayOfYear,
+          min: this.min,
+          max: this.max,
+          range: this.range,
+          readonly: this.readonly,
+          scrollable: this.scrollable,
+          showAdjacentMonths: this.showAdjacentMonths,
+          showWeek: this.showWeek,
+          tableDate: "".concat((0, _util.pad)(this.tableYear, 4), "-").concat((0, _util.pad)(this.tableMonth + 1)),
+          value: this.value,
+          weekdayFormat: this.weekdayFormat
         },
-        on: this.scrollable ? { wheel: wheel } : undefined,
-        directives: [this.genTableTouch(touchCallback)]
-      };
-
-      var 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])]);
+        ref: 'table',
+        on: _objectSpread({
+          input: this.dateClick,
+          'update:table-date': function updateTableDate(value) {
+            return _this5.tableDate = value;
+          }
+        }, (0, _util.createItemTypeListeners)(this, ':date'))
+      });
     },
-    genPickerBody: function genPickerBody(h) {
-      var _this4 = this;
-
-      var pickerBodyChildren = [];
-      if (this.activePicker === 'DATE') {
-        pickerBodyChildren.push(h('div', { staticClass: 'picker--date__header' }, [this.genSelector()]));
-        pickerBodyChildren.push(this.genTable([this.dateGenTHead(), this.dateGenTBody()], function (value) {
-          return _this4.tableDate = _this4.normalizeDate(_this4.tableYear, _this4.tableMonth + value);
-        }));
-      } else if (this.activePicker === 'MONTH') {
-        pickerBodyChildren.push(h('div', { staticClass: 'picker--date__header' }, [this.genSelector()]));
-        pickerBodyChildren.push(this.genTable([this.monthGenTBody()], function (value) {
-          return _this4.tableDate = _this4.normalizeDate(_this4.tableYear + value);
-        }));
-      } else if (this.activePicker === 'YEAR') {
-        pickerBodyChildren.push(this.genYears());
-      }
-
-      return pickerBodyChildren;
+    genMonthTable: function genMonthTable() {
+      var _this6 = this;
+
+      return this.$createElement(_KDatePickerMonthTable.default, {
+        props: {
+          allowedDates: this.type === 'month' ? this.allowedDates : null,
+          color: this.color,
+          current: this.current ? (0, _util.sanitizeDateString)(this.current, 'month') : null,
+          dark: this.dark,
+          disabled: this.disabled,
+          events: this.type === 'month' ? this.events : null,
+          eventColor: this.type === 'month' ? this.eventColor : null,
+          format: this.monthFormat,
+          light: this.light,
+          locale: this.locale,
+          min: this.minMonth,
+          max: this.maxMonth,
+          range: this.range,
+          readonly: this.readonly && this.type === 'month',
+          scrollable: this.scrollable,
+          value: this.selectedMonths,
+          tableDate: "".concat((0, _util.pad)(this.tableYear, 4))
+        },
+        ref: 'table',
+        on: _objectSpread({
+          input: this.monthClick,
+          'update:table-date': function updateTableDate(value) {
+            return _this6.tableDate = value;
+          }
+        }, (0, _util.createItemTypeListeners)(this, ':month'))
+      });
     },
-    makeDate: function makeDate(val) {
-      if (val == null) return val;
-      if (val instanceof Date) return val;
-      if (!isNaN(val)) return new Date(val);
-
-      var _val$trim$split$0$spl = val.trim().split(' ')[0].split('-'),
-          _val$trim$split$0$spl2 = _slicedToArray(_val$trim$split$0$spl, 3),
-          year = _val$trim$split$0$spl2[0],
-          month = _val$trim$split$0$spl2[1],
-          date = _val$trim$split$0$spl2[2];
-
-      return this.normalizeDate(year, month ? month - 1 : 0, date ? date * 1 : 1);
+    genYears: function genYears() {
+      return this.$createElement(_KDatePickerYears.default, {
+        props: {
+          color: this.color,
+          format: this.yearFormat,
+          locale: this.locale,
+          min: this.minYear,
+          max: this.maxYear,
+          value: this.tableYear
+        },
+        on: _objectSpread({
+          input: this.yearClick
+        }, (0, _util.createItemTypeListeners)(this, ':year'))
+      });
     },
-    normalizeDate: function normalizeDate(year) {
-      var month = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      var date = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-
-      return new Date(year, month, date, 1 /* Workaround for #1409 */);
+    genPickerBody: function genPickerBody() {
+      var children = this.internalActivePicker === 'YEAR' ? [this.genYears()] : [this.genTableHeader(), this.internalActivePicker === 'DATE' ? this.genDateTable() : this.genMonthTable()];
+      return this.$createElement('div', {
+        key: this.internalActivePicker
+      }, children);
+    },
+    setInputDate: function setInputDate() {
+      if (this.lastValue) {
+        var array = this.lastValue.split('-');
+        this.inputYear = parseInt(array[0], 10);
+        this.inputMonth = parseInt(array[1], 10) - 1;
+
+        if (this.type === 'date') {
+          this.inputDay = parseInt(array[2], 10);
+        }
+      } else {
+        this.inputYear = this.inputYear || this.now.getFullYear();
+        this.inputMonth = this.inputMonth == null ? this.inputMonth : this.now.getMonth();
+        this.inputDay = this.inputDay || this.now.getDate();
+      }
     }
   },
-
-  created: function created() {
-    this.getWeekDays();
-    this.tableDate = this.inputDate;
-  },
-  mounted: function mounted() {
-    var date = new Date();
-    this.currentDay = date.getDate();
-    this.currentMonth = date.getMonth();
-    this.currentYear = date.getFullYear();
-  },
-  render: function render(h) {
-    var 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': _extends({
-        'picker--landscape': this.landscape
-      }, this.themeClasses)
-    }, children);
+  render: function render() {
+    return this.genPicker('k-picker--date');
   }
-};
+});
+
+exports.default = _default2;
+//# sourceMappingURL=KDatePicker.js.map