element-form-builder/lib/adaptor/element.esm.js

Build powerful element-ui form with JSON schema.

import { useFormElement } from '@fext/vue-use';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';

//
var script = {
  name: 'el-form-adaptor',
  props: {
    tip: String,
    tooltip: String,
    name: String,
    size: {
      type: String,
      default: 'medium'
    },
    label: String,
    rules: {
      type: [String, Object]
    },
    value: {
      required: false
    },
    props: {
      type: Object,
      default: function _default() {
        return {};
      },
      required: false
    },
    items: {
      type: Array,
      default: function _default() {
        return [];
      },
      required: false
    },
    extend: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    metadata: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    formValues: {
      type: Object,
      required: false
    }
  },
  setup: function setup(props, context) {
    var _useFormElement = useFormElement(props, context),
        dirty = _useFormElement.dirty,
        isRequired = _useFormElement.isRequired,
        localValue = _useFormElement.localValue,
        setInitialValue = _useFormElement.setInitialValue,
        updateLocalValue = _useFormElement.updateLocalValue;

    return {
      dirty: dirty,
      isRequired: isRequired,
      localValue: localValue,
      setInitialValue: setInitialValue,
      updateLocalValue: updateLocalValue
    };
  },
  data: function data() {
    return {};
  },
  computed: {
    component: function component() {
      return this.extend.component || 'el-input';
    },
    isSelect: function isSelect() {
      return this.component === 'el-select';
    },
    isMultipleSelect: function isMultipleSelect() {
      return this.isSelect && this.props.multiple;
    },
    isRadio: function isRadio() {
      return this.component === 'el-radio-group';
    },
    isCheckbox: function isCheckbox() {
      return this.component === 'el-checkbox-group';
    }
  },
  created: function created() {
    var localValue = this.localValue,
        isMultipleSelect = this.isMultipleSelect,
        isCheckbox = this.isCheckbox;

    if (localValue == null) {
      if (isMultipleSelect || isCheckbox) {
        this.setInitialValue([]);
      }
    }
  }
};

/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

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

  return _c("validation-provider", {
    attrs: {
      rules: _vm.rules
    },
    scopedSlots: _vm._u([{
      key: "default",
      fn: function fn(ref) {
        var errors = ref.errors;
        return [_c("el-form-item", {
          attrs: {
            label: _vm.label,
            size: _vm.size,
            required: _vm.isRequired,
            error: errors[0]
          },
          scopedSlots: _vm._u([{
            key: "label",
            fn: function fn() {
              return [_c("span", [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _vm.tooltip ? _c("span", [_c("el-tooltip", {
                attrs: {
                  content: _vm.tooltip,
                  placement: "top"
                }
              }, [_c("i", {
                staticClass: "el-icon-question"
              })])], 1) : _vm._e()];
            },
            proxy: true
          }], null, true)
        }, [_vm._v(" "), _vm.isSelect ? _c(_vm.component, _vm._b({
          tag: "component",
          attrs: {
            value: _vm.localValue
          },
          on: {
            input: _vm.updateLocalValue
          }
        }, "component", _vm.props, false), _vm._l(_vm.items, function (item) {
          return _c("el-option", {
            key: item.value,
            attrs: {
              value: item.value
            }
          }, [_vm._v("\n        " + _vm._s(item.text) + "\n      ")]);
        }), 1) : _vm.isRadio ? _c(_vm.component, _vm._b({
          tag: "component",
          attrs: {
            value: _vm.localValue
          },
          on: {
            input: _vm.updateLocalValue
          }
        }, "component", _vm.props, false), _vm._l(_vm.items, function (item) {
          return _c("el-radio", {
            key: item.value,
            attrs: {
              label: item.value
            }
          }, [_vm._v("\n        " + _vm._s(item.text) + "\n      ")]);
        }), 1) : _vm.isCheckbox ? _c(_vm.component, _vm._b({
          tag: "component",
          attrs: {
            value: _vm.localValue
          },
          on: {
            input: _vm.updateLocalValue
          }
        }, "component", _vm.props, false), _vm._l(_vm.items, function (item) {
          return _c("el-checkbox", {
            key: item.value,
            attrs: {
              label: item.value
            }
          }, [_vm._v("\n        " + _vm._s(item.text) + "\n      ")]);
        }), 1) : _c(_vm.component, _vm._b({
          tag: "component",
          attrs: {
            value: _vm.localValue
          },
          on: {
            input: _vm.updateLocalValue
          }
        }, "component", _vm.props, false)), _vm._v(" "), _vm.tip ? _c("div", {
          staticClass: "el-form-item__tip"
        }, [_vm._v(_vm._s(_vm.tip))]) : _vm._e()], 1)];
      }
    }])
  });
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
  if (!inject) return;
  inject("data-v-54f562be_0", {
    source: ".el-form-item__tip {\n  font-size: 12px;\n  line-height: 12px;\n  padding: 10px 0 5px 0;\n  color: #737373;\n}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/__vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, __vue_create_injector__, undefined, undefined);

var install = function installElFormAdaptor(Vue) {
  Vue.component('el-form-adaptor', __vue_component__);
};
var elFormAdaptor = {
  install: install
};

export default elFormAdaptor;
export { __vue_component__ as ElFormAdaptor };