text: import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
  import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  import _extends from "@babel/runtime/helpers/esm/extends";
  import Icon from '../icon';
  import Cell from '../cell';
  import { cellProps } from '../cell/shared';
  import { preventDefault } from '../utils/dom/event';
  import { resetScroll } from '../utils/dom/reset-scroll';
  import { createNamespace, isObj, isDef, addUnit } from '../utils';
  
  var _createNamespace = createNamespace('field'),
      createComponent = _createNamespace[0],
      bem = _createNamespace[1];
  
  export default createComponent({
    inheritAttrs: false,
    props: _extends({}, cellProps, {
      error: Boolean,
      readonly: Boolean,
      autosize: [Boolean, Object],
      leftIcon: String,
      rightIcon: String,
      clearable: Boolean,
      labelClass: null,
      labelWidth: [Number, String],
      labelAlign: String,
      inputAlign: String,
      errorMessage: String,
      errorMessageAlign: String,
      showWordLimit: Boolean,
      type: {
        type: String,
        default: 'text'
      }
    }),
    data: function data() {
      return {
        focused: false
      };
    },
    watch: {
      value: function value() {
        this.$nextTick(this.adjustSize);
      }
    },
    mounted: function mounted() {
      this.format();
      this.$nextTick(this.adjustSize);
    },
    computed: {
      showClear: function showClear() {
        return this.clearable && this.focused && this.value !== '' && isDef(this.value) && !this.readonly;
      },
      listeners: function listeners() {
        var listeners = _extends({}, this.$listeners, {
          input: this.onInput,
          keypress: this.onKeypress,
          focus: this.onFocus,
          blur: this.onBlur
        });
  
        delete listeners.click;
        return listeners;
      },
      labelStyle: function labelStyle() {
        var labelWidth = this.labelWidth;
  
        if (labelWidth) {
          return {
            width: addUnit(labelWidth)
          };
        }
      }
    },
    methods: {
      focus: function focus() {
        if (this.$refs.input) {
          this.$refs.input.focus();
        }
      },
      blur: function blur() {
        if (this.$refs.input) {
          this.$refs.input.blur();
        }
      },
      // native maxlength not work when type = number
      format: function format(target) {
        if (target === void 0) {
          target = this.$refs.input;
        }
  
        if (!target) {
          return;
        }
  
        var _target = target,
            value = _target.value;
        var maxlength = this.$attrs.maxlength;
  
        if (this.type === 'number' && isDef(maxlength) && value.length > maxlength) {
          value = value.slice(0, maxlength);
          target.value = value;
        }
  
        return value;
      },
      onInput: function onInput(event) {
        // not update v-model when composing
        if (event.target.composing) {
          return;
        }
  
        this.$emit('input', this.format(event.target));
      },
      onFocus: function onFocus(event) {
        this.focused = true;
        this.$emit('focus', event); // hack for safari
  
        /* istanbul ignore if */
  
        if (this.readonly) {
          this.blur();
        }
      },
      onBlur: function onBlur(event) {
        this.focused = false;
        this.$emit('blur', event);
        resetScroll();
      },
      onClick: function onClick(event) {
        this.$emit('click', event);
      },
      onClickLeftIcon: function onClickLeftIcon(event) {
        this.$emit('click-left-icon', event);
      },
      onClickRightIcon: function onClickRightIcon(event) {
        this.$emit('click-right-icon', event);
      },
      onClear: function onClear(event) {
        preventDefault(event);
        this.$emit('input', '');
        this.$emit('clear', event);
      },
      onKeypress: function onKeypress(event) {
        if (this.type === 'number') {
          var keyCode = event.keyCode;
          var allowPoint = String(this.value).indexOf('.') === -1;
          var isValidKey = keyCode >= 48 && keyCode <= 57 || keyCode === 46 && allowPoint || keyCode === 45;
  
          if (!isValidKey) {
            preventDefault(event);
          }
        } // trigger blur after click keyboard search button
  
        /* istanbul ignore next */
  
  
        if (this.type === 'search' && event.keyCode === 13) {
          this.blur();
        }
  
        this.$emit('keypress', event);
      },
      adjustSize: function adjustSize() {
        var input = this.$refs.input;
  
        if (!(this.type === 'textarea' && this.autosize) || !input) {
          return;
        }
  
        input.style.height = 'auto';
        var height = input.scrollHeight;
  
        if (isObj(this.autosize)) {
          var _this$autosize = this.autosize,
              maxHeight = _this$autosize.maxHeight,
              minHeight = _this$autosize.minHeight;
  
          if (maxHeight) {
            height = Math.min(height, maxHeight);
          }
  
          if (minHeight) {
            height = Math.max(height, minHeight);
          }
        }
  
        if (height) {
          input.style.height = height + 'px';
        }
      },
      genInput: function genInput() {
        var h = this.$createElement;
        var inputSlot = this.slots('input');
  
        if (inputSlot) {
          return h("div", {
            "class": bem('control', this.inputAlign)
          }, [inputSlot]);
        }
  
        var inputProps = {
          ref: 'input',
          class: bem('control', this.inputAlign),
          domProps: {
            value: this.value
          },
          attrs: _extends({}, this.$attrs, {
            readonly: this.readonly
          }),
          on: this.listeners,
          // add model directive to skip IME composition
          directives: [{
            name: 'model',
            value: this.value
          }]
        };
  
        if (this.type === 'textarea') {
          return h("textarea", _mergeJSXProps([{}, inputProps]));
        }
  
        return h("input", _mergeJSXProps2([{
          "attrs": {
            "type": this.type
          }
        }, inputProps]));
      },
      genLeftIcon: function genLeftIcon() {
        var h = this.$createElement;
        var showLeftIcon = this.slots('left-icon') || this.leftIcon;
  
        if (showLeftIcon) {
          return h("div", {
            "class": bem('left-icon'),
            "on": {
              "click": this.onClickLeftIcon
            }
          }, [this.slots('left-icon') || h(Icon, {
            "attrs": {
              "name": this.leftIcon
            }
          })]);
        }
      },
      genRightIcon: function genRightIcon() {
        var h = this.$createElement;
        var slots = this.slots;
        var showRightIcon = slots('right-icon') || this.rightIcon;
  
        if (showRightIcon) {
          return h("div", {
            "class": bem('right-icon'),
            "on": {
              "click": this.onClickRightIcon
            }
          }, [slots('right-icon') || h(Icon, {
            "attrs": {
              "name": this.rightIcon
            }
          })]);
        }
      },
      genWordLimit: function genWordLimit() {
        var h = this.$createElement;
  
        if (this.showWordLimit && this.$attrs.maxlength) {
          return h("div", {
            "class": bem('word-limit')
          }, [this.value.length, "/", this.$attrs.maxlength]);
        }
      }
    },
    render: function render() {
      var _bem;
  
      var h = arguments[0];
      var slots = this.slots,
          labelAlign = this.labelAlign;
      var scopedSlots = {
        icon: this.genLeftIcon
      };
  
      if (slots('label')) {
        scopedSlots.title = function () {
          return slots('label');
        };
      }
  
      return h(Cell, {
        "attrs": {
          "icon": this.leftIcon,
          "size": this.size,
          "title": this.label,
          "center": this.center,
          "border": this.border,
          "isLink": this.isLink,
          "required": this.required,
          "clickable": this.clickable,
          "titleStyle": this.labelStyle,
          "titleClass": [bem('label', labelAlign), this.labelClass],
          "arrowDirection": this.arrowDirection
        },
        "class": bem((_bem = {
          error: this.error
        }, _bem["label-" + labelAlign] = labelAlign, _bem['min-height'] = this.type === 'textarea' && !this.autosize, _bem)),
        "scopedSlots": scopedSlots,
        "on": {
          "click": this.onClick
        }
      }, [h("div", {
        "class": bem('body')
      }, [this.genInput(), this.showClear && h(Icon, {
        "attrs": {
          "name": "clear"
        },
        "class": bem('clear'),
        "on": {
          "touchstart": this.onClear
        }
      }), this.genRightIcon(), slots('button') && h("div", {
        "class": bem('button')
      }, [slots('button')])]), this.genWordLimit(), this.errorMessage && h("div", {
        "class": bem('error-message', this.errorMessageAlign)
      }, [this.errorMessage])]);
    }
  });