vant-fork/lib/field/index.js

Lightweight Mobile UI Components built on Vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _create = _interopRequireDefault(require("../utils/create"));

var _utils = require("../utils");

var _default = (0, _create.default)({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('cell', {
      class: _vm.b((_obj = {
        error: _vm.error,
        disabled: _vm.$attrs.disabled,
        'min-height': _vm.type === 'textarea' && !_vm.autosize
      }, _obj["label-" + _vm.labelAlign] = _vm.labelAlign, _obj)),
      attrs: {
        "icon": _vm.leftIcon,
        "title": _vm.label,
        "center": _vm.center,
        "border": _vm.border,
        "is-link": _vm.isLink,
        "required": _vm.required
      }
    }, [_vm._t("label", null, {
      slot: "title"
    }), _c('div', {
      class: _vm.b('body')
    }, [_vm.type === 'textarea' ? _c('textarea', _vm._g(_vm._b({
      ref: "input",
      class: _vm.b('control', _vm.inputAlign),
      attrs: {
        "readonly": _vm.readonly
      },
      domProps: {
        "value": _vm.value
      }
    }, 'textarea', _vm.$attrs, false), _vm.listeners)) : _c('input', _vm._g(_vm._b({
      ref: "input",
      class: _vm.b('control', _vm.inputAlign),
      attrs: {
        "type": _vm.type,
        "readonly": _vm.readonly
      },
      domProps: {
        "value": _vm.value
      }
    }, 'input', _vm.$attrs, false), _vm.listeners)), _vm.showClear ? _c('icon', {
      class: _vm.b('clear'),
      attrs: {
        "name": "clear"
      },
      on: {
        "touchstart": function touchstart($event) {
          $event.preventDefault();

          _vm.$emit('input', '');
        }
      }
    }) : _vm._e(), _vm.$slots.icon || _vm.icon ? _c('div', {
      class: _vm.b('icon'),
      on: {
        "click": _vm.onClickIcon
      }
    }, [_vm._t("icon", [_c('icon', {
      attrs: {
        "name": _vm.icon
      }
    })])], 2) : _vm._e(), _vm.$slots.button ? _c('div', {
      class: _vm.b('button')
    }, [_vm._t("button")], 2) : _vm._e()], 1), _vm.errorMessage ? _c('div', {
      class: _vm.b('error-message'),
      domProps: {
        "textContent": _vm._s(_vm.errorMessage)
      }
    }) : _vm._e()], 2);

    var _obj;
  },
  name: 'field',
  inheritAttrs: false,
  props: {
    value: [String, Number],
    icon: String,
    label: String,
    error: Boolean,
    center: Boolean,
    isLink: Boolean,
    leftIcon: String,
    readonly: Boolean,
    required: Boolean,
    clearable: Boolean,
    labelAlign: String,
    inputAlign: String,
    onIconClick: Function,
    autosize: [Boolean, Object],
    errorMessage: String,
    type: {
      type: String,
      default: 'text'
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  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 !== '' && this.isDef(this.value) && !this.readonly;
    },
    listeners: function listeners() {
      return (0, _extends2.default)({}, this.$listeners, {
        input: this.onInput,
        keypress: this.onKeypress,
        focus: this.onFocus,
        blur: this.onBlur
      });
    }
  },
  methods: {
    blur: function blur() {
      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;
      }

      var _target = target,
          value = _target.value;
      var maxlength = this.$attrs.maxlength;

      if (this.isDef(maxlength) && value.length > maxlength) {
        value = value.slice(0, maxlength);
        target.value = value;
      }

      return value;
    },
    onInput: function onInput(event) {
      this.$emit('input', this.format(event.target));
    },
    onFocus: function onFocus(event) {
      this.focused = true;
      this.$emit('focus', event); // hack for safari

      if (this.readonly) {
        this.blur();
      }
    },
    onBlur: function onBlur(event) {
      this.focused = false;
      this.$emit('blur', event);
    },
    onClickIcon: function onClickIcon() {
      this.$emit('click-icon');
      this.onIconClick && this.onIconClick();
    },
    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) {
          event.preventDefault();
        }
      }

      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 ((0, _utils.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';
      }
    }
  }
});

exports.default = _default;