kdutify 0.16.9-rc.0 → 2.6.0

package/es5/components/KTextField/KTextField.js

@@ -1,275 +1,536 @@
-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";
 
-require('../../../src/stylus/components/_input-groups.styl');
-require('../../../src/stylus/components/_text-fields.styl');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-import Colorable from '../../mixins/colorable';
-import Input from '../../mixins/input';
-import Maskable from '../../mixins/maskable';
-import { isMaskDelimiter } from '../../util/mask';
+require("..\\..\\..\\src\\components\\KTextField\\KTextField.sass");
 
-export default {
-  name: 'k-text-field',
+var _KInput = _interopRequireDefault(require("../KInput"));
 
-  mixins: [Colorable, Input, Maskable],
+var _KCounter = _interopRequireDefault(require("../KCounter"));
 
-  inheritAttrs: false,
+var _KLabel = _interopRequireDefault(require("../KLabel"));
 
-  data: function data() {
-    return {
-      initialValue: null,
-      inputHeight: null,
-      badInput: false,
-      lazySelection: 0
-    };
-  },
+var _intersectable = _interopRequireDefault(require("../../mixins/intersectable"));
+
+var _loadable = _interopRequireDefault(require("../../mixins/loadable"));
+
+var _validatable = _interopRequireDefault(require("../../mixins/validatable"));
+
+var _resize = _interopRequireDefault(require("../../directives/resize"));
+
+var _ripple = _interopRequireDefault(require("../../directives/ripple"));
+
+var _dom = require("../../util/dom");
+
+var _helpers = require("../../util/helpers");
+
+var _console = require("../../util/console");
+
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+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 baseMixins = (0, _mixins.default)(_KInput.default, (0, _intersectable.default)({
+  onVisible: ['onResize', 'tryAutofocus']
+}), _loadable.default);
+var dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
+/* @kdujs/component */
+
+var _default = baseMixins.extend().extend({
+  name: 'k-text-field',
+  directives: {
+    resize: _resize.default,
+    ripple: _ripple.default
+  },
+  inheritAttrs: false,
   props: {
+    appendOuterIcon: String,
     autofocus: Boolean,
-    autoGrow: Boolean,
-    box: Boolean,
     clearable: Boolean,
-    color: {
+    clearIcon: {
       type: String,
-      default: 'primary'
+      default: '$clear'
     },
     counter: [Boolean, Number, String],
+    counterValue: Function,
+    filled: Boolean,
+    flat: Boolean,
     fullWidth: Boolean,
-    multiLine: Boolean,
+    label: String,
+    outlined: Boolean,
     placeholder: String,
     prefix: String,
-    rows: {
-      default: 5
-    },
+    prependInnerIcon: String,
+    persistentPlaceholder: Boolean,
+    reverse: Boolean,
+    rounded: Boolean,
+    shaped: Boolean,
     singleLine: Boolean,
     solo: Boolean,
+    soloInverted: Boolean,
     suffix: String,
-    textarea: Boolean,
     type: {
       type: String,
       default: 'text'
     }
   },
-
+  data: function data() {
+    return {
+      badInput: false,
+      labelWidth: 0,
+      prefixWidth: 0,
+      prependWidth: 0,
+      initialValue: null,
+      isBooted: false,
+      isClearing: false
+    };
+  },
   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
-      };
+      return _objectSpread(_objectSpread({}, _KInput.default.options.computed.classes.call(this)), {}, {
+        'k-text-field': true,
+        'k-text-field--full-width': this.fullWidth,
+        'k-text-field--prefix': this.prefix,
+        'k-text-field--single-line': this.isSingle,
+        'k-text-field--solo': this.isSolo,
+        'k-text-field--solo-inverted': this.soloInverted,
+        'k-text-field--solo-flat': this.flat,
+        'k-text-field--filled': this.filled,
+        'k-text-field--is-booted': this.isBooted,
+        'k-text-field--enclosed': this.isEnclosed,
+        'k-text-field--reverse': this.reverse,
+        'k-text-field--outlined': this.outlined,
+        'k-text-field--placeholder': this.placeholder,
+        'k-text-field--rounded': this.rounded,
+        'k-text-field--shaped': this.shaped
+      });
+    },
+    computedColor: function computedColor() {
+      var computedColor = _validatable.default.options.computed.computedColor.call(this);
 
-      if (this.hasError) {
-        classes['error--text'] = true;
-      } else {
-        return this.addTextColorClassChecks(classes);
+      if (!this.soloInverted || !this.isFocused) return computedColor;
+      return this.color || 'primary';
+    },
+    computedCounterValue: function computedCounterValue() {
+      if (typeof this.counterValue === 'function') {
+        return this.counterValue(this.internalValue);
       }
 
-      return classes;
+      return _toConsumableArray((this.internalValue || '').toString()).length;
     },
-    count: function count() {
-      var inputLength = void 0;
-      if (this.inputValue) inputLength = this.inputValue.toString().length;else inputLength = 0;
-
-      return inputLength + ' / ' + this.counterLength;
+    hasCounter: function hasCounter() {
+      return this.counter !== false && this.counter != null;
     },
-    counterLength: function counterLength() {
-      var parsedLength = parseInt(this.counter, 10);
-      return isNaN(parsedLength) ? 25 : parsedLength;
+    hasDetails: function hasDetails() {
+      return _KInput.default.options.computed.hasDetails.call(this) || this.hasCounter;
     },
-
-    inputValue: {
+    internalValue: {
       get: function get() {
-        return this.value;
+        return this.lazyValue;
       },
       set: function set(val) {
         this.lazyValue = val;
-        this.mask && this.setSelectionRange();
-        this.$emit('input', val);
+        this.$emit('input', this.lazyValue);
       }
     },
     isDirty: function isDirty() {
-      return this.lazyValue != null && this.lazyValue.toString().length > 0 || this.badInput || ['time', 'date', 'datetime-local', 'week', 'month'].includes(this.type);
+      var _this$lazyValue;
+
+      return ((_this$lazyValue = this.lazyValue) == null ? void 0 : _this$lazyValue.toString().length) > 0 || this.badInput;
+    },
+    isEnclosed: function isEnclosed() {
+      return this.filled || this.isSolo || this.outlined;
+    },
+    isLabelActive: function isLabelActive() {
+      return this.isDirty || dirtyTypes.includes(this.type);
+    },
+    isSingle: function isSingle() {
+      return this.isSolo || this.singleLine || this.fullWidth || // https://material.io/components/text-fields/#filled-text-field
+      this.filled && !this.hasLabel;
+    },
+    isSolo: function isSolo() {
+      return this.solo || this.soloInverted;
+    },
+    labelPosition: function labelPosition() {
+      var offset = this.prefix && !this.labelValue ? this.prefixWidth : 0;
+      if (this.labelValue && this.prependWidth) offset -= this.prependWidth;
+      return this.$kdutify.rtl === this.reverse ? {
+        left: offset,
+        right: 'auto'
+      } : {
+        left: 'auto',
+        right: offset
+      };
+    },
+    showLabel: function showLabel() {
+      return this.hasLabel && !(this.isSingle && this.labelValue);
     },
-    shouldAutoGrow: function shouldAutoGrow() {
-      return (this.multiLine || this.textarea) && this.autoGrow;
+    labelValue: function labelValue() {
+      return this.isFocused || this.isLabelActive || this.persistentPlaceholder;
     }
   },
-
   watch: {
-    isFocused: function isFocused(val) {
-      if (val) {
-        this.initialValue = this.lazyValue;
-      } else if (this.initialValue !== this.lazyValue) {
-        this.$emit('change', this.lazyValue);
-      }
+    // labelValue: 'setLabelWidth', // moved to mounted, see #11533
+    outlined: 'setLabelWidth',
+    label: function label() {
+      this.$nextTick(this.setLabelWidth);
+    },
+    prefix: function prefix() {
+      this.$nextTick(this.setPrefixWidth);
     },
+    isFocused: 'updateValue',
     value: function value(val) {
-      // Value was changed externally, update lazy
       this.lazyValue = val;
-
-      !this.validateOnBlur && this.validate();
-      this.shouldAutoGrow && this.calculateInputHeight();
     }
   },
+  created: function created() {
+    /* istanbul ignore next */
+    if (this.$attrs.hasOwnProperty('box')) {
+      (0, _console.breaking)('box', 'filled', this);
+    }
+    /* istanbul ignore next */
+
 
+    if (this.$attrs.hasOwnProperty('browser-autocomplete')) {
+      (0, _console.breaking)('browser-autocomplete', 'autocomplete', this);
+    }
+    /* istanbul ignore if */
+
+
+    if (this.shaped && !(this.filled || this.outlined || this.isSolo)) {
+      (0, _console.consoleWarn)('shaped should be used with either filled or outlined', this);
+    }
+  },
   mounted: function mounted() {
     var _this = this;
 
-    this.$kdutify.load(function () {
-      _this.shouldAutoGrow && _this.calculateInputHeight();
-      _this.autofocus && _this.focus();
+    // #11533
+    this.$watch(function () {
+      return _this.labelValue;
+    }, this.setLabelWidth);
+    this.autofocus && this.tryAutofocus();
+    requestAnimationFrame(function () {
+      _this.isBooted = true;
+      requestAnimationFrame(function () {
+        if (!_this.isIntersecting) {
+          _this.onResize();
+        }
+      });
     });
   },
-
-
   methods: {
-    calculateInputHeight: function calculateInputHeight() {
+    /** @public */
+    focus: function focus() {
+      this.onFocus();
+    },
+
+    /** @public */
+    blur: function blur(e) {
       var _this2 = this;
 
-      this.inputHeight = null;
+      // Safari tab order gets broken if called synchronous
+      window.requestAnimationFrame(function () {
+        _this2.$refs.input && _this2.$refs.input.blur();
+      });
+    },
+    clearableCallback: function clearableCallback() {
+      var _this3 = this;
 
+      this.$refs.input && this.$refs.input.focus();
       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);
+        return _this3.internalValue = null;
       });
     },
-    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();
+    genAppendSlot: function genAppendSlot() {
+      var slot = [];
+
+      if (this.$slots['append-outer']) {
+        slot.push(this.$slots['append-outer']);
+      } else if (this.appendOuterIcon) {
+        slot.push(this.genIcon('appendOuter'));
+      }
+
+      return this.genSlot('append', 'outer', slot);
     },
-    blur: function blur(e) {
-      var _this3 = this;
+    genPrependInnerSlot: function genPrependInnerSlot() {
+      var slot = [];
 
-      this.isFocused = false;
+      if (this.$slots['prepend-inner']) {
+        slot.push(this.$slots['prepend-inner']);
+      } else if (this.prependInnerIcon) {
+        slot.push(this.genIcon('prependInner'));
+      }
 
-      this.$nextTick(function () {
-        _this3.validate();
-      });
-      this.$emit('blur', e);
+      return this.genSlot('prepend', 'inner', slot);
     },
-    focus: function focus(e) {
-      if (!this.$refs.input) return;
+    genIconSlot: function genIconSlot() {
+      var slot = [];
 
-      this.isFocused = true;
-      if (document.activeElement !== this.$refs.input) {
-        this.$refs.input.focus();
+      if (this.$slots.append) {
+        slot.push(this.$slots.append);
+      } else if (this.appendIcon) {
+        slot.push(this.genIcon('append'));
       }
-      this.$emit('focus', e);
+
+      return this.genSlot('append', 'inner', slot);
+    },
+    genInputSlot: function genInputSlot() {
+      var input = _KInput.default.options.methods.genInputSlot.call(this);
+
+      var prepend = this.genPrependInnerSlot();
+
+      if (prepend) {
+        input.children = input.children || [];
+        input.children.unshift(prepend);
+      }
+
+      return input;
+    },
+    genClearIcon: function genClearIcon() {
+      if (!this.clearable) return null; // if the text field has no content then don't display the clear icon.
+      // We add an empty div because other controls depend on a ref to append inner
+
+      if (!this.isDirty) {
+        return this.genSlot('append', 'inner', [this.$createElement('div')]);
+      }
+
+      return this.genSlot('append', 'inner', [this.genIcon('clear', this.clearableCallback)]);
     },
     genCounter: function genCounter() {
-      return this.$createElement('div', {
-        'class': {
-          'input-group__counter': true,
-          'input-group__counter--error': this.hasError
+      var _this$$scopedSlots$co, _this$$scopedSlots$co2, _this$$scopedSlots;
+
+      if (!this.hasCounter) return null;
+      var max = this.counter === true ? this.attrs$.maxlength : this.counter;
+      var props = {
+        dark: this.dark,
+        light: this.light,
+        max: max,
+        value: this.computedCounterValue
+      };
+      return (_this$$scopedSlots$co = (_this$$scopedSlots$co2 = (_this$$scopedSlots = this.$scopedSlots).counter) == null ? void 0 : _this$$scopedSlots$co2.call(_this$$scopedSlots, {
+        props: props
+      })) != null ? _this$$scopedSlots$co : this.$createElement(_KCounter.default, {
+        props: props
+      });
+    },
+    genControl: function genControl() {
+      return _KInput.default.options.methods.genControl.call(this);
+    },
+    genDefaultSlot: function genDefaultSlot() {
+      return [this.genFieldset(), this.genTextFieldSlot(), this.genClearIcon(), this.genIconSlot(), this.genProgress()];
+    },
+    genFieldset: function genFieldset() {
+      if (!this.outlined) return null;
+      return this.$createElement('fieldset', {
+        attrs: {
+          'aria-hidden': true
+        }
+      }, [this.genLegend()]);
+    },
+    genLabel: function genLabel() {
+      if (!this.showLabel) return null;
+      var data = {
+        props: {
+          absolute: true,
+          color: this.validationState,
+          dark: this.dark,
+          disabled: this.isDisabled,
+          focused: !this.isSingle && (this.isFocused || !!this.validationState),
+          for: this.computedId,
+          left: this.labelPosition.left,
+          light: this.light,
+          right: this.labelPosition.right,
+          value: this.labelValue
+        }
+      };
+      return this.$createElement(_KLabel.default, data, this.$slots.label || this.label);
+    },
+    genLegend: function genLegend() {
+      var width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0;
+      var span = this.$createElement('span', {
+        domProps: {
+          innerHTML: '&#8203;'
+        },
+        staticClass: 'notranslate'
+      });
+      return this.$createElement('legend', {
+        style: {
+          width: !this.isSingle ? (0, _helpers.convertToUnit)(width) : undefined
         }
-      }, this.count);
+      }, [span]);
     },
     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 listeners = Object.assign({}, this.listeners$);
+      delete listeners.change; // Change should not be bound externally
 
-      var data = {
+      var _this$attrs$ = this.attrs$,
+          title = _this$attrs$.title,
+          inputAttrs = _objectWithoutProperties(_this$attrs$, ["title"]);
+
+      return this.$createElement('input', {
         style: {},
         domProps: {
-          autofocus: this.autofocus,
-          disabled: this.disabled,
-          required: this.required,
-          value: this.maskText(this.lazyValue)
+          value: this.type === 'number' && Object.is(this.lazyValue, -0) ? '-0' : 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
+        attrs: _objectSpread(_objectSpread({}, inputAttrs), {}, {
+          autofocus: this.autofocus,
+          disabled: this.isDisabled,
+          id: this.computedId,
+          placeholder: this.persistentPlaceholder || this.isFocused || !this.hasLabel ? this.placeholder : undefined,
+          readonly: this.isReadonly,
+          type: this.type
         }),
         on: Object.assign(listeners, {
-          blur: this.blur,
+          blur: this.onBlur,
           input: this.onInput,
-          focus: this.focus
+          focus: this.onFocus,
+          keydown: this.onKeyDown
         }),
-        ref: 'input'
-      };
+        ref: 'input',
+        directives: [{
+          name: 'resize',
+          modifiers: {
+            quiet: true
+          },
+          value: this.onResize
+        }]
+      });
+    },
+    genMessages: function genMessages() {
+      if (!this.showDetails) return null;
 
-      if (this.shouldAutoGrow) {
-        data.style.height = this.inputHeight && this.inputHeight + 'px';
-      }
+      var messagesNode = _KInput.default.options.methods.genMessages.call(this);
+
+      var counterNode = this.genCounter();
+      return this.$createElement('div', {
+        staticClass: 'k-text-field__details'
+      }, [messagesNode, counterNode]);
+    },
+    genTextFieldSlot: function genTextFieldSlot() {
+      return this.$createElement('div', {
+        staticClass: 'k-text-field__slot'
+      }, [this.genLabel(), this.prefix ? this.genAffix('prefix') : null, this.genInput(), this.suffix ? this.genAffix('suffix') : null]);
+    },
+    genAffix: function genAffix(type) {
+      return this.$createElement('div', {
+        class: "k-text-field__".concat(type),
+        ref: type
+      }, this[type]);
+    },
+    onBlur: function onBlur(e) {
+      var _this4 = this;
 
-      if (this.placeholder) data.domProps.placeholder = this.placeholder;
+      this.isFocused = false;
+      e && this.$nextTick(function () {
+        return _this4.$emit('blur', e);
+      });
+    },
+    onClick: function onClick() {
+      if (this.isFocused || this.isDisabled || !this.$refs.input) return;
+      this.$refs.input.focus();
+    },
+    onFocus: function onFocus(e) {
+      if (!this.$refs.input) return;
+      var root = (0, _dom.attachedRoot)(this.$el);
+      if (!root) return;
 
-      if (!this.textarea && !this.multiLine) {
-        data.domProps.type = this.type;
-      } else {
-        data.domProps.rows = this.rows;
+      if (root.activeElement !== this.$refs.input) {
+        return this.$refs.input.focus();
       }
 
-      if (this.mask) {
-        data.attrs.maxlength = this.masked.length;
+      if (!this.isFocused) {
+        this.isFocused = true;
+        e && this.$emit('focus', e);
       }
-
-      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]);
+    onInput: function onInput(e) {
+      var target = e.target;
+      this.internalValue = target.value;
+      this.badInput = target.validity && target.validity.badInput;
     },
-    clearableCallback: function clearableCallback() {
-      var _this4 = this;
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === _helpers.keyCodes.enter && this.lazyValue !== this.initialValue) {
+        this.initialValue = this.lazyValue;
+        this.$emit('change', this.initialValue);
+      }
 
-      this.inputValue = null;
-      this.$nextTick(function () {
-        return _this4.$refs.input.focus();
-      });
+      this.$emit('keydown', e);
     },
-    resetSelections: function resetSelections(input) {
-      this.selection = input.selectionEnd;
-      this.lazySelection = 0;
+    onMouseDown: function onMouseDown(e) {
+      // Prevent input from being blurred
+      if (e.target !== this.$refs.input) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
 
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
+      _KInput.default.options.methods.onMouseDown.call(this, e);
+    },
+    onMouseUp: function onMouseUp(e) {
+      if (this.hasMouseDown) this.focus();
 
-      try {
-        for (var _iterator = input.value.substr(0, this.selection)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var char = _step.value;
+      _KInput.default.options.methods.onMouseUp.call(this, e);
+    },
+    setLabelWidth: function setLabelWidth() {
+      if (!this.outlined) return;
+      this.labelWidth = this.$refs.label ? Math.min(this.$refs.label.scrollWidth * 0.75 + 6, this.$el.offsetWidth - 24) : 0;
+    },
+    setPrefixWidth: function setPrefixWidth() {
+      if (!this.$refs.prefix) return;
+      this.prefixWidth = this.$refs.prefix.offsetWidth;
+    },
+    setPrependWidth: function setPrependWidth() {
+      if (!this.outlined || !this.$refs['prepend-inner']) return;
+      this.prependWidth = this.$refs['prepend-inner'].offsetWidth;
+    },
+    tryAutofocus: function tryAutofocus() {
+      if (!this.autofocus || typeof document === 'undefined' || !this.$refs.input) return false;
+      var root = (0, _dom.attachedRoot)(this.$el);
+      if (!root || root.activeElement === this.$refs.input) return false;
+      this.$refs.input.focus();
+      return true;
+    },
+    updateValue: function updateValue(val) {
+      // Sets validationState from validatable
+      this.hasColor = val;
 
-          isMaskDelimiter(char) || this.lazySelection++;
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
+      if (val) {
+        this.initialValue = this.lazyValue;
+      } else if (this.initialValue !== this.lazyValue) {
+        this.$emit('change', this.lazyValue);
       }
+    },
+    onResize: function onResize() {
+      this.setLabelWidth();
+      this.setPrefixWidth();
+      this.setPrependWidth();
     }
-  },
-
-  render: function render() {
-    return this.genInputGroup(this.genInput(), { attrs: { tabindex: false } });
   }
-};
+});
+
+exports.default = _default;
+//# sourceMappingURL=KTextField.js.map