kdutify 0.16.9-rc.0

package/es5/components/KTextField/KTextField.js

@@ -0,0 +1,275 @@
+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; };
+
+require('../../../src/stylus/components/_input-groups.styl');
+require('../../../src/stylus/components/_text-fields.styl');
+
+import Colorable from '../../mixins/colorable';
+import Input from '../../mixins/input';
+import Maskable from '../../mixins/maskable';
+import { isMaskDelimiter } from '../../util/mask';
+
+export default {
+  name: 'k-text-field',
+
+  mixins: [Colorable, Input, Maskable],
+
+  inheritAttrs: false,
+
+  data: function data() {
+    return {
+      initialValue: null,
+      inputHeight: null,
+      badInput: false,
+      lazySelection: 0
+    };
+  },
+
+
+  props: {
+    autofocus: Boolean,
+    autoGrow: Boolean,
+    box: Boolean,
+    clearable: Boolean,
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    counter: [Boolean, Number, String],
+    fullWidth: Boolean,
+    multiLine: Boolean,
+    placeholder: String,
+    prefix: String,
+    rows: {
+      default: 5
+    },
+    singleLine: Boolean,
+    solo: Boolean,
+    suffix: String,
+    textarea: Boolean,
+    type: {
+      type: String,
+      default: 'text'
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      var classes = {
+        'input-group--text-field': true,
+        'input-group--text-field-box': this.box,
+        'input-group--single-line': this.singleLine || this.solo,
+        'input-group--solo': this.solo,
+        'input-group--multi-line': this.multiLine,
+        'input-group--full-width': this.fullWidth,
+        'input-group--prefix': this.prefix,
+        'input-group--suffix': this.suffix,
+        'input-group--textarea': this.textarea
+      };
+
+      if (this.hasError) {
+        classes['error--text'] = true;
+      } else {
+        return this.addTextColorClassChecks(classes);
+      }
+
+      return classes;
+    },
+    count: function count() {
+      var inputLength = void 0;
+      if (this.inputValue) inputLength = this.inputValue.toString().length;else inputLength = 0;
+
+      return inputLength + ' / ' + this.counterLength;
+    },
+    counterLength: function counterLength() {
+      var parsedLength = parseInt(this.counter, 10);
+      return isNaN(parsedLength) ? 25 : parsedLength;
+    },
+
+    inputValue: {
+      get: function get() {
+        return this.value;
+      },
+      set: function set(val) {
+        this.lazyValue = val;
+        this.mask && this.setSelectionRange();
+        this.$emit('input', val);
+      }
+    },
+    isDirty: function isDirty() {
+      return this.lazyValue != null && this.lazyValue.toString().length > 0 || this.badInput || ['time', 'date', 'datetime-local', 'week', 'month'].includes(this.type);
+    },
+    shouldAutoGrow: function shouldAutoGrow() {
+      return (this.multiLine || this.textarea) && this.autoGrow;
+    }
+  },
+
+  watch: {
+    isFocused: function isFocused(val) {
+      if (val) {
+        this.initialValue = this.lazyValue;
+      } else if (this.initialValue !== this.lazyValue) {
+        this.$emit('change', this.lazyValue);
+      }
+    },
+    value: function value(val) {
+      // Value was changed externally, update lazy
+      this.lazyValue = val;
+
+      !this.validateOnBlur && this.validate();
+      this.shouldAutoGrow && this.calculateInputHeight();
+    }
+  },
+
+  mounted: function mounted() {
+    var _this = this;
+
+    this.$kdutify.load(function () {
+      _this.shouldAutoGrow && _this.calculateInputHeight();
+      _this.autofocus && _this.focus();
+    });
+  },
+
+
+  methods: {
+    calculateInputHeight: function calculateInputHeight() {
+      var _this2 = this;
+
+      this.inputHeight = null;
+
+      this.$nextTick(function () {
+        var height = _this2.$refs.input ? _this2.$refs.input.scrollHeight : 0;
+        var minHeight = _this2.rows * 24;
+        var inputHeight = height < minHeight ? minHeight : height;
+        _this2.inputHeight = inputHeight + (_this2.textarea ? 4 : 0);
+      });
+    },
+    onInput: function onInput(e) {
+      this.resetSelections(e.target);
+      this.inputValue = this.unmaskText(e.target.value);
+      this.badInput = e.target.validity && e.target.validity.badInput;
+      this.shouldAutoGrow && this.calculateInputHeight();
+    },
+    blur: function blur(e) {
+      var _this3 = this;
+
+      this.isFocused = false;
+
+      this.$nextTick(function () {
+        _this3.validate();
+      });
+      this.$emit('blur', e);
+    },
+    focus: function focus(e) {
+      if (!this.$refs.input) return;
+
+      this.isFocused = true;
+      if (document.activeElement !== this.$refs.input) {
+        this.$refs.input.focus();
+      }
+      this.$emit('focus', e);
+    },
+    genCounter: function genCounter() {
+      return this.$createElement('div', {
+        'class': {
+          'input-group__counter': true,
+          'input-group__counter--error': this.hasError
+        }
+      }, this.count);
+    },
+    genInput: function genInput() {
+      var tag = this.multiLine || this.textarea ? 'textarea' : 'input';
+      var listeners = Object.assign({}, this.$listeners);
+      delete listeners['change']; // Change should not be bound externally
+
+      var data = {
+        style: {},
+        domProps: {
+          autofocus: this.autofocus,
+          disabled: this.disabled,
+          required: this.required,
+          value: this.maskText(this.lazyValue)
+        },
+        attrs: _extends({}, this.$attrs, {
+          readonly: this.readonly,
+          tabindex: this.tabindex,
+          'aria-label': (!this.$attrs || !this.$attrs.id) && this.label // Label `for` will be set if we have an id
+        }),
+        on: Object.assign(listeners, {
+          blur: this.blur,
+          input: this.onInput,
+          focus: this.focus
+        }),
+        ref: 'input'
+      };
+
+      if (this.shouldAutoGrow) {
+        data.style.height = this.inputHeight && this.inputHeight + 'px';
+      }
+
+      if (this.placeholder) data.domProps.placeholder = this.placeholder;
+
+      if (!this.textarea && !this.multiLine) {
+        data.domProps.type = this.type;
+      } else {
+        data.domProps.rows = this.rows;
+      }
+
+      if (this.mask) {
+        data.attrs.maxlength = this.masked.length;
+      }
+
+      var children = [this.$createElement(tag, data)];
+
+      this.prefix && children.unshift(this.genFix('prefix'));
+      this.suffix && children.push(this.genFix('suffix'));
+
+      return children;
+    },
+    genFix: function genFix(type) {
+      return this.$createElement('span', {
+        'class': 'input-group--text-field__' + type
+      }, this[type]);
+    },
+    clearableCallback: function clearableCallback() {
+      var _this4 = this;
+
+      this.inputValue = null;
+      this.$nextTick(function () {
+        return _this4.$refs.input.focus();
+      });
+    },
+    resetSelections: function resetSelections(input) {
+      this.selection = input.selectionEnd;
+      this.lazySelection = 0;
+
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = input.value.substr(0, this.selection)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var char = _step.value;
+
+          isMaskDelimiter(char) || this.lazySelection++;
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+    }
+  },
+
+  render: function render() {
+    return this.genInputGroup(this.genInput(), { attrs: { tabindex: false } });
+  }
+};

package/es5/components/KTextField/index.js

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

package/es5/components/KTimePicker/KTimePicker.js

@@ -0,0 +1,302 @@
+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; };
+
+require('../../../src/stylus/components/_pickers.styl');
+require('../../../src/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: KCard
+  },
+
+  mixins: [Picker, TimeBody, TimeTitle],
+
+  data: function 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: function validator(val) {
+        return ['ampm', '24hr'].includes(val);
+      }
+    },
+    allowedHours: {
+      type: [Array, Object, Function],
+      default: function _default() {
+        return null;
+      }
+    },
+    allowedMinutes: {
+      type: [Array, Object, Function],
+      default: function _default() {
+        return null;
+      }
+    }
+  },
+
+  computed: {
+    is24hr: function is24hr() {
+      return this.format !== 'ampm';
+    },
+    is24hrAfter12: function is24hrAfter12() {
+      return this.selectingHour && this.is24hr && this.hour >= 12;
+    },
+    divider: function divider() {
+      return this.selectingHour ? 12 : 60;
+    },
+    degrees: function degrees() {
+      return this.degreesPerUnit * Math.PI / 180;
+    },
+    degreesPerUnit: function degreesPerUnit() {
+      return 360 / this.divider;
+    },
+
+    inputTime: {
+      get: function get() {
+        if (this.value && !(this.value instanceof Date)) {
+          if (!this.is24hr) {
+            this.period = this.value.match(/pm/i) ? 'pm' : 'am';
+          }
+
+          return this.value;
+        }
+        var value = new Date();
+
+        if (this.value instanceof Date) {
+          value = this.value;
+        }
+
+        var hour = value.getHours();
+        var minute = value.getMinutes();
+        var 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: function set(val) {
+        return this.$emit('input', val);
+      }
+    },
+    timeArray: function timeArray() {
+      return this.inputTime.replace(/(am|pm)/, '').split(':');
+    },
+
+    hour: {
+      get: function get() {
+        return parseInt(this.timeArray[0]);
+      },
+      set: function 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: function get() {
+        var minute = parseInt(this.timeArray[1]);
+
+        return minute < 10 ? '0' + minute : minute > 59 ? '00' : minute;
+      },
+      set: function set(val) {
+        val = val < 10 ? '0' + parseInt(val) : val > 59 ? '00' : val;
+        var hour = this.hour;
+
+        if (this.is24hr && hour < 10) {
+          hour = '0' + hour;
+        }
+
+        this.inputTime = hour + ':' + val + (!this.is24hr ? this.period : '');
+      }
+    },
+    clockHand: function clockHand() {
+      if (this.selectingHour) return this.degreesPerUnit * this.hour;
+      return this.degreesPerUnit * this.minute;
+    },
+    radius: function radius() {
+      return this.clockSize / 2;
+    },
+
+    clockSize: {
+      get: function get() {
+        return this.size;
+      },
+      set: function set(val) {
+        this.size = val;
+      }
+    },
+    size: function size() {
+      return this.landscape ? 250 : 280;
+    }
+  },
+
+  watch: {
+    period: function period(val) {
+      var hour = !!this.allowedHours && this.selectingHour ? this.firstAllowed('hour', this.hour - 1) : this.hour;
+      this.inputTime = hour + ':' + this.minute + val;
+    },
+    value: function value(val) {
+      if (this.isSaving) {
+        this.originalTime = this.inputTime;
+        this.isSaving = false;
+      }
+    }
+  },
+
+  methods: {
+    save: function save() {
+      var _this = this;
+
+      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(function () {
+        return _this.selectingHour = true;
+      });
+    },
+    cancel: function cancel() {
+      var _this2 = this;
+
+      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(function () {
+        return _this2.selectingHour = true;
+      });
+    },
+    isAllowed: function isAllowed(type, value) {
+      var allowed = this['allowed' + (type.charAt(0).toUpperCase() + type.slice(1)) + 's'];
+
+      if (!allowed) return true;
+
+      if (Array.isArray(allowed)) {
+        return !!allowed.some(function (v) {
+          return v === value;
+        });
+      } else if (allowed instanceof Function) {
+        return allowed(value);
+      } else if (allowed === Object(allowed)) {
+        var range = type === 'minute' ? this.ranges.minutes : this.ranges.hours;
+        var 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);
+        }
+
+        var steps = allowed.max - allowed.min;
+        value = type === 'hour' && !this.is24hr && this.period === 'pm' ? value + 12 : value;
+
+        for (var i = 0; i <= steps; i++) {
+          var index = (allowed.min + i) % mod;
+          if (range[index] === value) return true;
+        }
+
+        return false;
+      }
+
+      return true;
+    },
+    convert12to24hr: function convert12to24hr(input) {
+      input = input.toLowerCase();
+      var pm = input.indexOf('pm') !== -1;
+      var hour = parseInt(input.slice(0, input.indexOf(pm ? 'pm' : 'am')));
+
+      return pm ? hour + 12 : hour;
+    },
+    generateRange: function generateRange(type, start) {
+      var range = type === 'hour' ? this.ranges.hours : this.ranges.minutes;
+      var 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: function firstAllowed(type, value) {
+      var _this3 = this;
+
+      var allowed = this['allowed' + (type.charAt(0).toUpperCase() + type.slice(1)) + 's'];
+
+      if (!allowed) return value;
+
+      var range = this.generateRange(type, value);
+
+      var first = range.find(function (v) {
+        return _this3.isAllowed(type, v);
+      });
+
+      return first || value;
+    }
+  },
+
+  render: function render(h) {
+    var children = [this.genBody()];
+
+    !this.noTitle && children.unshift(this.genTitle());
+    this.$scopedSlots.default && children.push(this.genSlot());
+
+    return h('k-card', {
+      'class': _extends({
+        'picker picker--time': true,
+        'picker--landscape': this.landscape,
+        'picker--time--hours': this.selectingHour
+      }, this.themeClasses)
+    }, children);
+  }
+};

package/es5/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;