ant-design-vue/lib/form/FormItem.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.formItemProps = void 0;

var _vue = require("vue");

var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

var _classNames2 = _interopRequireDefault(require("../_util/classNames"));

var _transition = require("../_util/transition");

var _Row = _interopRequireDefault(require("../grid/Row"));

var _Col = _interopRequireDefault(require("../grid/Col"));

var _propsUtil = _interopRequireWildcard(require("../_util/props-util"));

var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));

var _configProvider = require("../config-provider");

var _vnode = require("../_util/vnode");

var _CheckCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CheckCircleFilled"));

var _ExclamationCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/ExclamationCircleFilled"));

var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseCircleFilled"));

var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/LoadingOutlined"));

var _validateUtil = require("./utils/validateUtil");

var _valueUtil = require("./utils/valueUtil");

var _typeUtil = require("./utils/typeUtil");

var _warning = require("../vc-util/warning");

var _find = _interopRequireDefault(require("lodash/find"));

var _type = require("../_util/type");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _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; }; return _extends.apply(this, arguments); }

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; }

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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) 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; }

var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var iconMap = {
  success: _CheckCircleFilled.default,
  warning: _ExclamationCircleFilled.default,
  error: _CloseCircleFilled.default,
  validating: _LoadingOutlined.default
};

function getPropByPath(obj, namePathList, strict) {
  var tempObj = obj;
  var keyArr = namePathList;
  var i = 0;

  try {
    for (var len = keyArr.length; i < len - 1; ++i) {
      if (!tempObj && !strict) break;
      var key = keyArr[i];

      if (key in tempObj) {
        tempObj = tempObj[key];
      } else {
        if (strict) {
          throw Error('please transfer a valid name path to form item!');
        }

        break;
      }
    }

    if (strict && !tempObj) {
      throw Error('please transfer a valid name path to form item!');
    }
  } catch (error) {
    console.error('please transfer a valid name path to form item!');
  }

  return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : undefined
  };
}

var formItemProps = {
  id: _vueTypes.default.string,
  htmlFor: _vueTypes.default.string,
  prefixCls: _vueTypes.default.string,
  label: _vueTypes.default.VNodeChild,
  help: _vueTypes.default.VNodeChild,
  extra: _vueTypes.default.VNodeChild,
  labelCol: {
    type: Object
  },
  wrapperCol: {
    type: Object
  },
  hasFeedback: _vueTypes.default.looseBool.def(false),
  colon: _vueTypes.default.looseBool,
  labelAlign: _vueTypes.default.oneOf((0, _type.tuple)('left', 'right')),
  prop: {
    type: [String, Number, Array]
  },
  name: {
    type: [String, Number, Array]
  },
  rules: _vueTypes.default.oneOfType([Array, Object]),
  autoLink: _vueTypes.default.looseBool.def(true),
  required: _vueTypes.default.looseBool,
  validateFirst: _vueTypes.default.looseBool,
  validateStatus: _vueTypes.default.oneOf((0, _type.tuple)('', 'success', 'warning', 'error', 'validating')),
  validateTrigger: {
    type: [String, Array]
  },
  messageVariables: {
    type: Object
  }
};
exports.formItemProps = formItemProps;

var _default2 = (0, _vue.defineComponent)({
  name: 'AFormItem',
  mixins: [_BaseMixin.default],
  inheritAttrs: false,
  __ANT_NEW_FORM_ITEM: true,
  props: formItemProps,
  setup: function setup(props) {
    var FormContext = (0, _vue.inject)('FormContext', {});
    var fieldName = (0, _vue.computed)(function () {
      return props.name || props.prop;
    });
    var namePath = (0, _vue.computed)(function () {
      var val = fieldName.value;
      return (0, _valueUtil.getNamePath)(val);
    });
    var fieldId = (0, _vue.computed)(function () {
      var id = props.id;

      if (id) {
        return id;
      } else if (!namePath.value.length) {
        return undefined;
      } else {
        var formName = FormContext.name;
        var mergedId = namePath.value.join('_');
        return formName ? "".concat(formName, "_").concat(mergedId) : mergedId;
      }
    });
    var fieldValue = (0, _vue.computed)(function () {
      var model = FormContext.model;

      if (!model || !fieldName.value) {
        return;
      }

      return getPropByPath(model, namePath.value, true).v;
    });
    var mergedValidateTrigger = (0, _vue.computed)(function () {
      var validateTrigger = props.validateTrigger !== undefined ? props.validateTrigger : FormContext.validateTrigger;
      validateTrigger = validateTrigger === undefined ? 'change' : validateTrigger;
      return (0, _typeUtil.toArray)(validateTrigger);
    });

    var getRules = function getRules() {
      var formRules = FormContext.rules;
      var selfRules = props.rules;
      var requiredRule = props.required !== undefined ? {
        required: !!props.required,
        trigger: mergedValidateTrigger.value
      } : [];
      var prop = getPropByPath(formRules, namePath.value);
      formRules = formRules ? prop.o[prop.k] || prop.v : [];
      var rules = [].concat(selfRules || formRules || []);

      if ((0, _find.default)(rules, function (rule) {
        return rule.required;
      })) {
        return rules;
      } else {
        return rules.concat(requiredRule);
      }
    };

    var isRequired = (0, _vue.computed)(function () {
      var rules = getRules();
      var isRequired = false;

      if (rules && rules.length) {
        rules.every(function (rule) {
          if (rule.required) {
            isRequired = true;
            return false;
          }

          return true;
        });
      }

      return isRequired || props.required;
    });
    return {
      isFormItemChildren: (0, _vue.inject)('isFormItemChildren', false),
      configProvider: (0, _vue.inject)('configProvider', _configProvider.defaultConfigProvider),
      FormContext: FormContext,
      fieldId: fieldId,
      fieldName: fieldName,
      namePath: namePath,
      isRequired: isRequired,
      getRules: getRules,
      fieldValue: fieldValue,
      mergedValidateTrigger: mergedValidateTrigger
    };
  },
  data: function data() {
    (0, _warning.warning)(!(0, _propsUtil.default)(this, 'prop'), "`prop` is deprecated. Please use `name` instead.");
    return {
      validateState: this.validateStatus,
      validateMessage: '',
      validateDisabled: false,
      validator: {},
      helpShow: false,
      errors: [],
      initialValue: undefined
    };
  },
  watch: {
    validateStatus: function validateStatus(val) {
      this.validateState = val;
    }
  },
  created: function created() {
    (0, _vue.provide)('isFormItemChildren', true);
  },
  mounted: function mounted() {
    if (this.fieldName) {
      var addField = this.FormContext.addField;
      addField && addField(this);
      this.initialValue = (0, _cloneDeep.default)(this.fieldValue);
    }
  },
  beforeUnmount: function beforeUnmount() {
    var removeField = this.FormContext.removeField;
    removeField && removeField(this);
  },
  methods: {
    getNamePath: function getNamePath() {
      var fieldName = this.fieldName;
      var _this$FormContext$pre = this.FormContext.prefixName,
          prefixName = _this$FormContext$pre === void 0 ? [] : _this$FormContext$pre;
      return fieldName !== undefined ? [].concat(_toConsumableArray(prefixName), _toConsumableArray(this.namePath)) : [];
    },
    validateRules: function validateRules(options) {
      var _this = this;

      var _this$$props = this.$props,
          _this$$props$validate = _this$$props.validateFirst,
          validateFirst = _this$$props$validate === void 0 ? false : _this$$props$validate,
          messageVariables = _this$$props.messageVariables;

      var _ref = options || {},
          triggerName = _ref.triggerName;

      var namePath = this.getNamePath();
      var filteredRules = this.getRules();

      if (triggerName) {
        filteredRules = filteredRules.filter(function (rule) {
          var trigger = rule.trigger;

          if (!trigger && !_this.mergedValidateTrigger.length) {
            return true;
          }

          var triggerList = (0, _typeUtil.toArray)(trigger || _this.mergedValidateTrigger);
          return triggerList.includes(triggerName);
        });
      }

      if (!filteredRules.length) {
        return Promise.resolve();
      }

      var promise = (0, _validateUtil.validateRules)(namePath, this.fieldValue, filteredRules, options, validateFirst, messageVariables);
      this.validateState = 'validating';
      this.errors = [];
      promise.catch(function (e) {
        return e;
      }).then(function () {
        var errors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

        if (_this.validateState === 'validating') {
          _this.validateState = errors.length ? 'error' : 'success';
          _this.validateMessage = errors[0];
          _this.errors = errors;
        }
      });
      return promise;
    },
    onFieldBlur: function onFieldBlur() {
      this.validateRules({
        triggerName: 'blur'
      });
    },
    onFieldChange: function onFieldChange() {
      if (this.validateDisabled) {
        this.validateDisabled = false;
        return;
      }

      this.validateRules({
        triggerName: 'change'
      });
    },
    clearValidate: function clearValidate() {
      this.validateState = '';
      this.validateMessage = '';
      this.validateDisabled = false;
    },
    resetField: function resetField() {
      var _this2 = this;

      this.validateState = '';
      this.validateMessage = '';
      var model = this.FormContext.model || {};
      var value = this.fieldValue;
      var prop = getPropByPath(model, this.namePath, true);
      this.validateDisabled = true;

      if (Array.isArray(value)) {
        prop.o[prop.k] = [].concat(this.initialValue);
      } else {
        prop.o[prop.k] = this.initialValue;
      } // reset validateDisabled after onFieldChange triggered


      (0, _vue.nextTick)(function () {
        _this2.validateDisabled = false;
      });
    },
    getHelpMessage: function getHelpMessage() {
      var help = (0, _propsUtil.getComponent)(this, 'help');
      return this.validateMessage || help;
    },
    onLabelClick: function onLabelClick() {
      var id = this.fieldId;

      if (!id) {
        return;
      }

      var formItemNode = (0, _propsUtil.findDOMNode)(this);
      var control = formItemNode.querySelector("[id=\"".concat(id, "\"]"));

      if (control && control.focus) {
        control.focus();
      }
    },
    onHelpAnimEnd: function onHelpAnimEnd(_key, helpShow) {
      this.helpShow = helpShow;

      if (!helpShow) {
        this.$forceUpdate();
      }
    },
    renderHelp: function renderHelp(prefixCls) {
      var _this3 = this;

      var help = this.getHelpMessage();
      var children = help ? (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls, "-explain"),
        "key": "help"
      }, [help]) : null;

      if (children) {
        this.helpShow = !!children;
      }

      var transitionProps = (0, _transition.getTransitionProps)('show-help', {
        onAfterEnter: function onAfterEnter() {
          return _this3.onHelpAnimEnd('help', true);
        },
        onAfterLeave: function onAfterLeave() {
          return _this3.onHelpAnimEnd('help', false);
        }
      });
      return (0, _vue.createVNode)(_transition.Transition, _objectSpread(_objectSpread({}, transitionProps), {}, {
        "key": "help"
      }), {
        default: function _default() {
          return [children];
        }
      });
    },
    renderExtra: function renderExtra(prefixCls) {
      var extra = (0, _propsUtil.getComponent)(this, 'extra');
      return extra ? (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls, "-extra")
      }, [extra]) : null;
    },
    renderValidateWrapper: function renderValidateWrapper(prefixCls, c1, c2, c3) {
      var validateStatus = this.validateState;
      var classes = "".concat(prefixCls, "-item-control");

      if (validateStatus) {
        classes = (0, _classNames2.default)("".concat(prefixCls, "-item-control"), {
          'has-feedback': validateStatus && this.hasFeedback,
          'has-success': validateStatus === 'success',
          'has-warning': validateStatus === 'warning',
          'has-error': validateStatus === 'error',
          'is-validating': validateStatus === 'validating'
        });
      }

      var IconNode = validateStatus && iconMap[validateStatus];
      var icon = this.hasFeedback && IconNode ? (0, _vue.createVNode)("span", {
        "class": "".concat(prefixCls, "-item-children-icon")
      }, [(0, _vue.createVNode)(IconNode, null, null)]) : null;
      return (0, _vue.createVNode)("div", {
        "class": classes
      }, [(0, _vue.createVNode)("span", {
        "class": "".concat(prefixCls, "-item-children")
      }, [c1, icon]), c2, c3]);
    },
    renderWrapper: function renderWrapper(prefixCls, children) {
      var _ref2 = this.isFormItemChildren ? {} : this.FormContext,
          contextWrapperCol = _ref2.wrapperCol;

      var wrapperCol = this.wrapperCol;
      var mergedWrapperCol = wrapperCol || contextWrapperCol || {};

      var style = mergedWrapperCol.style,
          id = mergedWrapperCol.id,
          restProps = __rest(mergedWrapperCol, ["style", "id"]);

      var className = (0, _classNames2.default)("".concat(prefixCls, "-item-control-wrapper"), mergedWrapperCol.class);

      var colProps = _extends(_extends({}, restProps), {
        class: className,
        key: 'wrapper',
        style: style,
        id: id
      });

      return (0, _vue.createVNode)(_Col.default, colProps, {
        default: function _default() {
          return [children];
        }
      });
    },
    renderLabel: function renderLabel(prefixCls) {
      var _classNames,
          _this4 = this;

      var _this$FormContext = this.FormContext,
          vertical = _this$FormContext.vertical,
          contextLabelAlign = _this$FormContext.labelAlign,
          contextLabelCol = _this$FormContext.labelCol,
          contextColon = _this$FormContext.colon;
      var labelAlign = this.labelAlign,
          labelCol = this.labelCol,
          colon = this.colon,
          fieldId = this.fieldId,
          htmlFor = this.htmlFor;
      var label = (0, _propsUtil.getComponent)(this, 'label');
      var required = this.isRequired;
      var mergedLabelCol = labelCol || contextLabelCol || {};
      var mergedLabelAlign = labelAlign || contextLabelAlign;
      var labelClsBasic = "".concat(prefixCls, "-item-label");
      var labelColClassName = (0, _classNames2.default)(labelClsBasic, mergedLabelAlign === 'left' && "".concat(labelClsBasic, "-left"), mergedLabelCol.class);

      var labelColClass = mergedLabelCol.class,
          labelColStyle = mergedLabelCol.style,
          labelColId = mergedLabelCol.id,
          restProps = __rest(mergedLabelCol, ["class", "style", "id"]);

      var labelChildren = label; // Keep label is original where there should have no colon

      var computedColon = colon === true || contextColon !== false && colon !== false;
      var haveColon = computedColon && !vertical; // Remove duplicated user input colon

      if (haveColon && typeof label === 'string' && label.trim() !== '') {
        labelChildren = label.replace(/[：:]\s*$/, '');
      }

      var labelClassName = (0, _classNames2.default)((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-item-required"), required), _defineProperty(_classNames, "".concat(prefixCls, "-item-no-colon"), !computedColon), _classNames));

      var colProps = _extends(_extends({}, restProps), {
        class: labelColClassName,
        key: 'label',
        style: labelColStyle,
        id: labelColId
      });

      return label ? (0, _vue.createVNode)(_Col.default, colProps, {
        default: function _default() {
          return [(0, _vue.createVNode)("label", {
            "for": htmlFor || fieldId,
            "class": labelClassName,
            "title": typeof label === 'string' ? label : '',
            "onClick": _this4.onLabelClick
          }, [labelChildren])];
        }
      }) : null;
    },
    renderChildren: function renderChildren(prefixCls, child) {
      return [this.renderLabel(prefixCls), this.renderWrapper(prefixCls, this.renderValidateWrapper(prefixCls, child, this.renderHelp(prefixCls), this.renderExtra(prefixCls)))];
    },
    renderFormItem: function renderFormItem(child) {
      var _itemClassName;

      var customizePrefixCls = this.$props.prefixCls;

      var _a = this.$attrs,
          className = _a.class,
          restProps = __rest(_a, ["class"]);

      var getPrefixCls = this.configProvider.getPrefixCls;
      var prefixCls = getPrefixCls('form', customizePrefixCls);
      var children = this.renderChildren(prefixCls, child);
      var itemClassName = (_itemClassName = {}, _defineProperty(_itemClassName, className, className), _defineProperty(_itemClassName, "".concat(prefixCls, "-item"), true), _defineProperty(_itemClassName, "".concat(prefixCls, "-item-with-help"), this.helpShow), _itemClassName);
      return (0, _vue.createVNode)(_Row.default, _objectSpread({
        "class": (0, _classNames2.default)(itemClassName),
        "key": "row"
      }, restProps), {
        default: function _default() {
          return [children];
        }
      });
    }
  },
  render: function render() {
    var _this5 = this;

    var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
        autoLink = _getOptionProps.autoLink;

    var children = (0, _propsUtil.getSlot)(this);
    var firstChildren = children[0];

    if (this.fieldName && autoLink && (0, _propsUtil.isValidElement)(firstChildren)) {
      var originalEvents = (0, _propsUtil.getEvents)(firstChildren);
      var originalBlur = originalEvents.onBlur;
      var originalChange = originalEvents.onChange;
      firstChildren = (0, _vnode.cloneElement)(firstChildren, _extends(_extends({}, this.fieldId ? {
        id: this.fieldId
      } : undefined), {
        onBlur: function onBlur() {
          originalBlur && originalBlur.apply(void 0, arguments);

          _this5.onFieldBlur();
        },
        onChange: function onChange() {
          if (Array.isArray(originalChange)) {
            for (var i = 0, l = originalChange.length; i < l; i++) {
              originalChange[i].apply(originalChange, arguments);
            }
          } else if (originalChange) {
            originalChange.apply(void 0, arguments);
          }

          _this5.onFieldChange();
        }
      }));
    }

    return this.renderFormItem([firstChildren, children.slice(1)]);
  }
});

exports.default = _default2;