@meve/ui/es/input/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Icon from '../icon';
import FormItem from '../form-item';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { isEmpty } from '../utils/shared';
import { createChildrenMixin } from '../utils/mixins/relation';






var _createNamespace = createNamespace('input'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var inputId = 0;
var InputPlugin = createComponent({
  mixins: [createChildrenMixin('form', {
    parentKey: 'form',
    childrenKey: 'formComponents'
  })],
  props: props,
  data: function data() {
    return {
      id: "m-input-" + inputId++,
      isFocus: false,
      errorMessage: ''
    };
  },
  computed: {
    maxlengthText: function maxlengthText() {
      var maxlength = this.maxlength,
          value = this.value;

      if (isEmpty(value)) {
        return "0 / " + maxlength;
      }

      return String(value).length + " / " + maxlength;
    }
  },
  methods: {
    // expose
    reset: function reset() {
      this.$emit('input', undefined);
      this.resetValidation();
    },
    // expose
    validate: function validate() {
      this.$refs.formItem.validate();
    },
    // expose
    resetValidation: function resetValidation() {
      this.$refs.formItem.resetValidation();
    },
    // expose
    focus: function focus() {
      this.$refs.input.focus();
    },
    // expose
    blur: function blur() {
      this.$refs.input.blur();
    },
    nextTickValidateWithTrigger: function nextTickValidateWithTrigger(trigger) {
      var _this = this;

      this.$nextTick(function () {
        var _this$$refs$formItem;

        (_this$$refs$formItem = _this.$refs.formItem) == null ? void 0 : _this$$refs$formItem.validateWithTrigger(_this.validateTrigger, trigger, _this.rules, _this.value);
      });
    },
    handleClick: function handleClick(event) {
      var _this$form;

      if ((_this$form = this.form) != null && _this$form.disabled || this.disabled) {
        return;
      }

      this.$emit('click', event);
      this.nextTickValidateWithTrigger('onClick');
    },
    handleErrorMessageChange: function handleErrorMessageChange(errorMessage) {
      this.errorMessage = errorMessage;
    },
    handleFocus: function handleFocus() {
      this.isFocus = true;
      this.$emit('focus');
    },
    handleBlur: function handleBlur() {
      this.isFocus = false;
      this.$emit('blur');
    },
    handleClear: function handleClear() {
      var _this$form2, _this$form3;

      if ((_this$form2 = this.form) != null && _this$form2.disabled || (_this$form3 = this.form) != null && _this$form3.readonly || this.disabled || this.readonly) {
        return;
      }

      this.$emit('input', undefined);
      this.$emit('clear', undefined);
      this.nextTickValidateWithTrigger('onClear');
    },
    handleInput: function handleInput(event) {
      this.$emit('input', event.target.value);
      this.nextTickValidateWithTrigger('onInput');
    },
    handleChange: function handleChange(event) {
      this.$emit('change', event.target.value);
      this.nextTickValidateWithTrigger('onChange');
    },
    renderClearIcon: function renderClearIcon() {
      var _this2 = this;

      var h = this.$createElement;

      if (this.clearable) {
        return h(Icon, {
          "attrs": {
            "input-cover": true,
            "name": "close-circle"
          },
          "class": [namespace('__clear-icon'), isEmpty(this.value) ? null : namespace('--clear-icon-visible')],
          "on": _extends({}, {
            "click": function click($event) {
              for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                attrs[_key - 1] = arguments[_key];
              }

              _this2.handleClear.apply(_this2, [$event].concat(attrs));
            }
          })
        });
      }
    },
    renderPrependIcon: function renderPrependIcon() {
      if (this.hasSlots('prepend-icon')) {
        return this.slots('prepend-icon');
      }
    },
    renderAppendIcon: function renderAppendIcon() {
      if (this.hasSlots('append-icon')) {
        return this.slots('append-icon');
      }
    },
    renderMaxlengthText: function renderMaxlengthText() {
      var h = this.$createElement;

      if (this.maxlength != null) {
        return h("div", {
          "class": namespace('__maxlength')
        }, [this.maxlengthText]);
      }
    },
    renderInput: function renderInput() {
      var _this3 = this,
          _this$form6,
          _this$form7;

      var h = this.$createElement;

      if (this.textarea) {
        var _this$form4, _this$form5;

        return h("textarea", {
          "attrs": {
            "id": this.id,
            "autoComplete": "off",
            "rows": this.rows,
            "maxLength": this.maxlength,
            "placeholder": this.placeholder,
            "disabled": ((_this$form4 = this.form) == null ? void 0 : _this$form4.disabled) || this.disabled,
            "readOnly": ((_this$form5 = this.form) == null ? void 0 : _this$form5.readonly) || this.readonly
          },
          "ref": "input",
          "class": [namespace('__textarea'), namespace("--" + this.size + "-textarea")],
          "domProps": {
            "value": this.value
          },
          "on": _extends({}, {
            "focus": function focus($event) {
              for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
                attrs[_key2 - 1] = arguments[_key2];
              }

              _this3.handleFocus.apply(_this3, [$event].concat(attrs));
            },
            "blur": function blur($event) {
              for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
                attrs[_key3 - 1] = arguments[_key3];
              }

              _this3.handleBlur.apply(_this3, [$event].concat(attrs));
            },
            "input": function input($event) {
              for (var _len4 = arguments.length, attrs = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
                attrs[_key4 - 1] = arguments[_key4];
              }

              _this3.handleInput.apply(_this3, [$event].concat(attrs));
            },
            "change": function change($event) {
              for (var _len5 = arguments.length, attrs = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
                attrs[_key5 - 1] = arguments[_key5];
              }

              _this3.handleChange.apply(_this3, [$event].concat(attrs));
            }
          })
        });
      }

      return h("input", {
        "ref": "input",
        "attrs": {
          "id": this.id,
          "autoComplete": "off",
          "type": this.type,
          "maxLength": this.maxlength,
          "placeholder": this.placeholder,
          "disabled": ((_this$form6 = this.form) == null ? void 0 : _this$form6.disabled) || this.disabled,
          "readOnly": ((_this$form7 = this.form) == null ? void 0 : _this$form7.readonly) || this.readonly
        },
        "class": namespace('__input'),
        "domProps": {
          "value": this.value
        },
        "on": _extends({}, {
          "focus": function focus($event) {
            for (var _len6 = arguments.length, attrs = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
              attrs[_key6 - 1] = arguments[_key6];
            }

            _this3.handleFocus.apply(_this3, [$event].concat(attrs));
          },
          "blur": function blur($event) {
            for (var _len7 = arguments.length, attrs = new Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
              attrs[_key7 - 1] = arguments[_key7];
            }

            _this3.handleBlur.apply(_this3, [$event].concat(attrs));
          },
          "input": function input($event) {
            for (var _len8 = arguments.length, attrs = new Array(_len8 > 1 ? _len8 - 1 : 0), _key8 = 1; _key8 < _len8; _key8++) {
              attrs[_key8 - 1] = arguments[_key8];
            }

            _this3.handleInput.apply(_this3, [$event].concat(attrs));
          },
          "change": function change($event) {
            for (var _len9 = arguments.length, attrs = new Array(_len9 > 1 ? _len9 - 1 : 0), _key9 = 1; _key9 < _len9; _key9++) {
              attrs[_key9 - 1] = arguments[_key9];
            }

            _this3.handleChange.apply(_this3, [$event].concat(attrs));
          }
        })
      });
    }
  },
  render: function render() {
    var _this4 = this;

    var h = arguments[0];
    var isFocus = this.isFocus,
        disabled = this.disabled,
        textarea = this.textarea,
        resize = this.resize,
        value = this.value,
        rules = this.rules,
        label = this.label,
        errorMessage = this.errorMessage,
        form = this.form,
        size = this.size;
    return h(FormItem, {
      "ref": "formItem",
      "attrs": {
        "label": label,
        "value": value,
        "rules": rules
      },
      "on": _extends({}, {
        'error-message-change': this.handleErrorMessageChange
      })
    }, [h("div", {
      "class": [namespace(), 'm--box', namespace("--" + size), isFocus ? namespace('--outline') : null, form != null && form.disabled || disabled ? namespace('--disabled') : null, textarea && resize && !disabled ? namespace('--resizeable') : null, errorMessage ? namespace('--validation-error-border') : null],
      "style": {
        height: textarea ? 'auto' : undefined
      },
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len10 = arguments.length, attrs = new Array(_len10 > 1 ? _len10 - 1 : 0), _key10 = 1; _key10 < _len10; _key10++) {
            attrs[_key10 - 1] = arguments[_key10];
          }

          _this4.handleClick.apply(_this4, [$event].concat(attrs));
        }
      })
    }, [this.renderPrependIcon(), this.renderInput(), this.renderClearIcon(), this.renderAppendIcon(), this.renderMaxlengthText()])]);
  }
});
export var _InputComponent = InputPlugin;
export default InputPlugin;