lh-chs-ui/lib/form-item.js

A Component Library for Vue.js.

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

module.exports =
/******/function (modules) {
  // webpackBootstrap
  /******/ // The module cache
  /******/var installedModules = {};
  /******/
  /******/ // The require function
  /******/function __webpack_require__(moduleId) {
    /******/
    /******/ // Check if module is in cache
    /******/if (installedModules[moduleId]) {
      /******/return installedModules[moduleId].exports;
      /******/
    }
    /******/ // Create a new module (and put it into the cache)
    /******/var module = installedModules[moduleId] = {
      /******/i: moduleId,
      /******/l: false,
      /******/exports: {}
      /******/ };
    /******/
    /******/ // Execute the module function
    /******/modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/ // Flag the module as loaded
    /******/module.l = true;
    /******/
    /******/ // Return the exports of the module
    /******/return module.exports;
    /******/
  }
  /******/
  /******/
  /******/ // expose the modules object (__webpack_modules__)
  /******/__webpack_require__.m = modules;
  /******/
  /******/ // expose the module cache
  /******/__webpack_require__.c = installedModules;
  /******/
  /******/ // define getter function for harmony exports
  /******/__webpack_require__.d = function (exports, name, getter) {
    /******/if (!__webpack_require__.o(exports, name)) {
      /******/Object.defineProperty(exports, name, { enumerable: true, get: getter });
      /******/
    }
    /******/
  };
  /******/
  /******/ // define __esModule on exports
  /******/__webpack_require__.r = function (exports) {
    /******/if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      /******/Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
      /******/
    }
    /******/Object.defineProperty(exports, '__esModule', { value: true });
    /******/
  };
  /******/
  /******/ // create a fake namespace object
  /******/ // mode & 1: value is a module id, require it
  /******/ // mode & 2: merge all properties of value into the ns
  /******/ // mode & 4: return value when already ns object
  /******/ // mode & 8|1: behave like require
  /******/__webpack_require__.t = function (value, mode) {
    /******/if (mode & 1) value = __webpack_require__(value);
    /******/if (mode & 8) return value;
    /******/if (mode & 4 && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value && value.__esModule) return value;
    /******/var ns = Object.create(null);
    /******/__webpack_require__.r(ns);
    /******/Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    /******/if (mode & 2 && typeof value != 'string') for (var key in value) {
      __webpack_require__.d(ns, key, function (key) {
        return value[key];
      }.bind(null, key));
    } /******/return ns;
    /******/
  };
  /******/
  /******/ // getDefaultExport function for compatibility with non-harmony modules
  /******/__webpack_require__.n = function (module) {
    /******/var getter = module && module.__esModule ?
    /******/function getDefault() {
      return module['default'];
    } :
    /******/function getModuleExports() {
      return module;
    };
    /******/__webpack_require__.d(getter, 'a', getter);
    /******/return getter;
    /******/
  };
  /******/
  /******/ // Object.prototype.hasOwnProperty.call
  /******/__webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };
  /******/
  /******/ // __webpack_public_path__
  /******/__webpack_require__.p = "/dist/";
  /******/
  /******/
  /******/ // Load entry module and return exports
  /******/return __webpack_require__(__webpack_require__.s = 67);
  /******/
}(
/************************************************************************/
/******/{

  /***/0:
  /***/function _(module, __webpack_exports__, __webpack_require__) {

    "use strict";
    /* harmony export (binding) */
    __webpack_require__.d(__webpack_exports__, "a", function () {
      return normalizeComponent;
    });
    /* globals __VUE_SSR_CONTEXT__ */

    // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
    // This module is a runtime utility for cleaner component module output and will
    // be included in the final webpack user bundle.

    function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, /* server only */
    shadowMode /* vue-cli only */
    ) {
      // Vue.extend constructor export interop
      var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports;

      // render functions
      if (render) {
        options.render = render;
        options.staticRenderFns = staticRenderFns;
        options._compiled = true;
      }

      // functional template
      if (functionalTemplate) {
        options.functional = true;
      }

      // scopedId
      if (scopeId) {
        options._scopeId = 'data-v-' + scopeId;
      }

      var hook;
      if (moduleIdentifier) {
        // server build
        hook = function hook(context) {
          // 2.3 injection
          context = context || // cached call
          this.$vnode && this.$vnode.ssrContext || // stateful
          this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
          // 2.2 with runInNewContext: true
          if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
            context = __VUE_SSR_CONTEXT__;
          }
          // inject component styles
          if (injectStyles) {
            injectStyles.call(this, context);
          }
          // register component module identifier for async chunk inferrence
          if (context && context._registeredComponents) {
            context._registeredComponents.add(moduleIdentifier);
          }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
      } else if (injectStyles) {
        hook = shadowMode ? function () {
          injectStyles.call(this, this.$root.$options.shadowRoot);
        } : injectStyles;
      }

      if (hook) {
        if (options.functional) {
          // for template-only hot-reload because in that case the render fn doesn't
          // go through the normalizer
          options._injectStyles = hook;
          // register for functioal component in vue file
          var originalRender = options.render;
          options.render = function renderWithStyleInjection(h, context) {
            hook.call(context);
            return originalRender(h, context);
          };
        } else {
          // inject component registration as beforeCreate hook
          var existing = options.beforeCreate;
          options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
      }

      return {
        exports: scriptExports,
        options: options
      };
    }

    /***/
  },

  /***/3:
  /***/function _(module, exports) {

    module.exports = require('lh-chs-ui/lib/utils/util');

    /***/
  },

  /***/4:
  /***/function _(module, exports) {

    module.exports = require('lh-chs-ui/lib/mixins/emitter');

    /***/
  },

  /***/48:
  /***/function _(module, exports) {

    module.exports = require('async-validator');

    /***/
  },

  /***/67:
  /***/function _(module, __webpack_exports__, __webpack_require__) {

    "use strict";

    __webpack_require__.r(__webpack_exports__);

    // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/form/src/form-item.vue?vue&type=template&id=b6f3db6c&
    var render = function render() {
      var _vm = this;
      var _h = _vm.$createElement;
      var _c = _vm._self._c || _h;
      return _c("div", {
        staticClass: "el-form-item",
        class: [{
          "el-form-item--feedback": _vm.elForm && _vm.elForm.statusIcon,
          "is-error": _vm.validateState === "error",
          "is-validating": _vm.validateState === "validating",
          "is-success": _vm.validateState === "success",
          "is-required": _vm.isRequired || _vm.required,
          "is-no-asterisk": _vm.elForm && _vm.elForm.hideRequiredAsterisk
        }, _vm.sizeClass ? "el-form-item--" + _vm.sizeClass : ""]
      }, [_c("label-wrap", {
        attrs: {
          "is-auto-width": _vm.labelStyle && _vm.labelStyle.width === "auto",
          "update-all": _vm.form.labelWidth === "auto"
        }
      }, [_vm.label || _vm.$slots.label ? _c("label", {
        staticClass: "el-form-item__label",
        style: _vm.labelStyle,
        attrs: { for: _vm.labelFor }
      }, [_vm._t("label", [_vm._v(_vm._s(_vm.label + _vm.form.labelSuffix))])], 2) : _vm._e()]), _c("div", { staticClass: "el-form-item__content", style: _vm.contentStyle }, [_vm._t("default"), _c("transition", { attrs: { name: "el-zoom-in-top" } }, [_vm.validateState === "error" && _vm.showMessage && _vm.form.showMessage ? _vm._t("error", [_c("div", {
        staticClass: "el-form-item__error",
        class: {
          "el-form-item__error--inline": typeof _vm.inlineMessage === "boolean" ? _vm.inlineMessage : _vm.elForm && _vm.elForm.inlineMessage || false
        }
      }, [_vm._v("\n          " + _vm._s(_vm.validateMessage) + "\n        ")])], { error: _vm.validateMessage }) : _vm._e()], 2)], 2)], 1);
    };
    var staticRenderFns = [];
    render._withStripped = true;

    // CONCATENATED MODULE: ./packages/form/src/form-item.vue?vue&type=template&id=b6f3db6c&

    // EXTERNAL MODULE: external "async-validator"
    var external_async_validator_ = __webpack_require__(48);
    var external_async_validator_default = /*#__PURE__*/__webpack_require__.n(external_async_validator_);

    // EXTERNAL MODULE: external "element-ui/lib/mixins/emitter"
    var emitter_ = __webpack_require__(4);
    var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);

    // EXTERNAL MODULE: external "element-ui/lib/utils/merge"
    var merge_ = __webpack_require__(9);
    var merge_default = /*#__PURE__*/__webpack_require__.n(merge_);

    // EXTERNAL MODULE: external "element-ui/lib/utils/util"
    var util_ = __webpack_require__(3);

    // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/form/src/label-wrap.vue?vue&type=script&lang=js&


    /* harmony default export */var label_wrapvue_type_script_lang_js_ = {
      props: {
        isAutoWidth: Boolean,
        updateAll: Boolean
      },

      inject: ['elForm', 'elFormItem'],

      render: function render() {
        var h = arguments[0];

        var slots = this.$slots.default;
        if (!slots) return null;
        if (this.isAutoWidth) {
          var autoLabelWidth = this.elForm.autoLabelWidth;
          var style = {};
          if (autoLabelWidth && autoLabelWidth !== 'auto') {
            var marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
            if (marginLeft) {
              style.marginLeft = marginLeft + 'px';
            }
          }
          return h('div', { 'class': 'el-form-item__label-wrap', style: style }, [slots]);
        } else {
          return slots[0];
        }
      },

      methods: {
        getLabelWidth: function getLabelWidth() {
          if (this.$el && this.$el.firstElementChild) {
            var computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
            return Math.ceil(parseFloat(computedWidth));
          } else {
            return 0;
          }
        },
        updateLabelWidth: function updateLabelWidth() {
          var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'update';

          if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
            if (action === 'update') {
              this.computedWidth = this.getLabelWidth();
            } else if (action === 'remove') {
              this.elForm.deregisterLabelWidth(this.computedWidth);
            }
          }
        }
      },

      watch: {
        computedWidth: function computedWidth(val, oldVal) {
          if (this.updateAll) {
            this.elForm.registerLabelWidth(val, oldVal);
            this.elFormItem.updateComputedLabelWidth(val);
          }
        }
      },

      data: function data() {
        return {
          computedWidth: 0
        };
      },
      mounted: function mounted() {
        this.updateLabelWidth('update');
      },
      updated: function updated() {
        this.updateLabelWidth('update');
      },
      beforeDestroy: function beforeDestroy() {
        this.updateLabelWidth('remove');
      }
    };
    // CONCATENATED MODULE: ./packages/form/src/label-wrap.vue?vue&type=script&lang=js&
    /* harmony default export */var src_label_wrapvue_type_script_lang_js_ = label_wrapvue_type_script_lang_js_;
    // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
    var componentNormalizer = __webpack_require__(0);

    // CONCATENATED MODULE: ./packages/form/src/label-wrap.vue
    var label_wrap_render, label_wrap_staticRenderFns;

    /* normalize component */

    var component = Object(componentNormalizer["a" /* default */])(src_label_wrapvue_type_script_lang_js_, label_wrap_render, label_wrap_staticRenderFns, false, null, null, null);

    /* hot reload */
    if (false) {
      var api;
    }
    component.options.__file = "packages/form/src/label-wrap.vue";
    /* harmony default export */var label_wrap = component.exports;
    // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/form/src/form-item.vue?vue&type=script&lang=js&
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //


    /* harmony default export */var form_itemvue_type_script_lang_js_ = {
      name: 'ElFormItem',

      componentName: 'ElFormItem',

      mixins: [emitter_default.a],

      provide: function provide() {
        return {
          elFormItem: this
        };
      },

      inject: ['elForm'],

      props: {
        label: String,
        labelWidth: String,
        prop: String,
        required: {
          type: Boolean,
          default: undefined
        },
        rules: [Object, Array],
        error: String,
        validateStatus: String,
        for: String,
        inlineMessage: {
          type: [String, Boolean],
          default: ''
        },
        showMessage: {
          type: Boolean,
          default: true
        },
        size: String
      },
      components: {
        // use this component to calculate auto width
        LabelWrap: label_wrap
      },
      watch: {
        error: {
          immediate: true,
          handler: function handler(value) {
            this.validateMessage = value;
            this.validateState = value ? 'error' : '';
          }
        },
        validateStatus: function validateStatus(value) {
          this.validateState = value;
        }
      },
      computed: {
        labelFor: function labelFor() {
          return this.for || this.prop;
        },
        labelStyle: function labelStyle() {
          var ret = {};
          if (this.form.labelPosition === 'top') return ret;
          var labelWidth = this.labelWidth || this.form.labelWidth;
          if (labelWidth) {
            ret.width = labelWidth;
          }
          return ret;
        },
        contentStyle: function contentStyle() {
          var ret = {};
          var label = this.label;
          if (this.form.labelPosition === 'top' || this.form.inline) return ret;
          if (!label && !this.labelWidth && this.isNested) return ret;
          var labelWidth = this.labelWidth || this.form.labelWidth;
          if (labelWidth === 'auto') {
            if (this.labelWidth === 'auto') {
              ret.marginLeft = this.computedLabelWidth;
            } else if (this.form.labelWidth === 'auto') {
              ret.marginLeft = this.elForm.autoLabelWidth;
            }
          } else {
            ret.marginLeft = labelWidth;
          }
          return ret;
        },
        form: function form() {
          var parent = this.$parent;
          var parentName = parent.$options.componentName;
          while (parentName !== 'ElForm') {
            if (parentName === 'ElFormItem') {
              this.isNested = true;
            }
            parent = parent.$parent;
            parentName = parent.$options.componentName;
          }
          return parent;
        },
        fieldValue: function fieldValue() {
          var model = this.form.model;
          if (!model || !this.prop) {
            return;
          }

          var path = this.prop;
          if (path.indexOf(':') !== -1) {
            path = path.replace(/:/, '.');
          }

          return Object(util_["getPropByPath"])(model, path, true).v;
        },
        isRequired: function isRequired() {
          var rules = this.getRules();
          var isRequired = false;

          if (rules && rules.length) {
            rules.every(function (rule) {
              if (rule.required) {
                isRequired = true;
                return false;
              }
              return true;
            });
          }
          return isRequired;
        },
        _formSize: function _formSize() {
          return this.elForm.size;
        },
        elFormItemSize: function elFormItemSize() {
          return this.size || this._formSize;
        },
        sizeClass: function sizeClass() {
          return this.elFormItemSize || (this.$ELEMENT || {}).size;
        }
      },
      data: function data() {
        return {
          validateState: '',
          validateMessage: '',
          validateDisabled: false,
          validator: {},
          isNested: false,
          computedLabelWidth: ''
        };
      },

      methods: {
        validate: function validate(trigger) {
          var _this = this;

          var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : util_["noop"];

          this.validateDisabled = false;
          var rules = this.getFilteredRule(trigger);
          if ((!rules || rules.length === 0) && this.required === undefined) {
            callback();
            return true;
          }

          this.validateState = 'validating';

          var descriptor = {};
          if (rules && rules.length > 0) {
            rules.forEach(function (rule) {
              delete rule.trigger;
            });
          }
          descriptor[this.prop] = rules;

          var validator = new external_async_validator_default.a(descriptor);
          var model = {};

          model[this.prop] = this.fieldValue;

          validator.validate(model, { firstFields: true }, function (errors, invalidFields) {
            _this.validateState = !errors ? 'success' : 'error';
            _this.validateMessage = errors ? errors[0].message : '';

            callback(_this.validateMessage, invalidFields);
            _this.elForm && _this.elForm.$emit('validate', _this.prop, !errors, _this.validateMessage || null);
          });
        },
        clearValidate: function clearValidate() {
          this.validateState = '';
          this.validateMessage = '';
          this.validateDisabled = false;
        },
        resetField: function resetField() {
          var _this2 = this;

          this.validateState = '';
          this.validateMessage = '';

          var model = this.form.model;
          var value = this.fieldValue;
          var path = this.prop;
          if (path.indexOf(':') !== -1) {
            path = path.replace(/:/, '.');
          }

          var prop = Object(util_["getPropByPath"])(model, path, 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
          this.$nextTick(function () {
            _this2.validateDisabled = false;
          });

          this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);
        },
        getRules: function getRules() {
          var formRules = this.form.rules;
          var selfRules = this.rules;
          var requiredRule = this.required !== undefined ? { required: !!this.required } : [];

          var prop = Object(util_["getPropByPath"])(formRules, this.prop || '');
          formRules = formRules ? prop.o[this.prop || ''] || prop.v : [];

          return [].concat(selfRules || formRules || []).concat(requiredRule);
        },
        getFilteredRule: function getFilteredRule(trigger) {
          var rules = this.getRules();

          return rules.filter(function (rule) {
            if (!rule.trigger || trigger === '') return true;
            if (Array.isArray(rule.trigger)) {
              return rule.trigger.indexOf(trigger) > -1;
            } else {
              return rule.trigger === trigger;
            }
          }).map(function (rule) {
            return merge_default()({}, rule);
          });
        },
        onFieldBlur: function onFieldBlur() {
          this.validate('blur');
        },
        onFieldChange: function onFieldChange() {
          if (this.validateDisabled) {
            this.validateDisabled = false;
            return;
          }

          this.validate('change');
        },
        updateComputedLabelWidth: function updateComputedLabelWidth(width) {
          this.computedLabelWidth = width ? width + 'px' : '';
        },
        addValidateEvents: function addValidateEvents() {
          var rules = this.getRules();

          if (rules.length || this.required !== undefined) {
            this.$on('el.form.blur', this.onFieldBlur);
            this.$on('el.form.change', this.onFieldChange);
          }
        },
        removeValidateEvents: function removeValidateEvents() {
          this.$off();
        }
      },
      mounted: function mounted() {
        if (this.prop) {
          this.dispatch('ElForm', 'el.form.addField', [this]);

          var initialValue = this.fieldValue;
          if (Array.isArray(initialValue)) {
            initialValue = [].concat(initialValue);
          }
          Object.defineProperty(this, 'initialValue', {
            value: initialValue
          });

          this.addValidateEvents();
        }
      },
      beforeDestroy: function beforeDestroy() {
        this.dispatch('ElForm', 'el.form.removeField', [this]);
      }
    };
    // CONCATENATED MODULE: ./packages/form/src/form-item.vue?vue&type=script&lang=js&
    /* harmony default export */var src_form_itemvue_type_script_lang_js_ = form_itemvue_type_script_lang_js_;
    // CONCATENATED MODULE: ./packages/form/src/form-item.vue


    /* normalize component */

    var form_item_component = Object(componentNormalizer["a" /* default */])(src_form_itemvue_type_script_lang_js_, render, staticRenderFns, false, null, null, null);

    /* hot reload */
    if (false) {
      var form_item_api;
    }
    form_item_component.options.__file = "packages/form/src/form-item.vue";
    /* harmony default export */var form_item = form_item_component.exports;
    // CONCATENATED MODULE: ./packages/form-item/index.js


    /* istanbul ignore next */
    form_item.install = function (Vue) {
      Vue.component(form_item.name, form_item);
    };

    /* harmony default export */var packages_form_item = __webpack_exports__["default"] = form_item;

    /***/
  },

  /***/9:
  /***/function _(module, exports) {

    module.exports = require('lh-chs-ui/lib/utils/merge');

    /***/
  }

  /******/ });