element-form-builder/lib/index.js

Build powerful element-ui form with JSON schema.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var _Object$defineProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/define-property'));
var _Object$defineProperties = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/define-properties'));
var _Object$getOwnPropertyDescriptors = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors'));
var _forEachInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/for-each'));
var _Object$getOwnPropertyDescriptor = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor'));
var _filterInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/filter'));
var _Object$getOwnPropertySymbols = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols'));
var _Object$keys = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/keys'));
var _defineProperty = _interopDefault(require('@babel/runtime-corejs3/helpers/defineProperty'));
var _concatInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/concat'));
var _JSON$stringify = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/json/stringify'));
var _mapInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/map'));
var __vue_normalize__ = _interopDefault(require('vue-runtime-helpers/dist/normalize-component.mjs'));

var isMergeableObject = function isMergeableObject(value) {
	return isNonNullObject(value)
		&& !isSpecial(value)
};

function isNonNullObject(value) {
	return !!value && typeof value === 'object'
}

function isSpecial(value) {
	var stringValue = Object.prototype.toString.call(value);

	return stringValue === '[object RegExp]'
		|| stringValue === '[object Date]'
		|| isReactElement(value)
}

// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;

function isReactElement(value) {
	return value.$$typeof === REACT_ELEMENT_TYPE
}

function emptyTarget(val) {
	return Array.isArray(val) ? [] : {}
}

function cloneUnlessOtherwiseSpecified(value, options) {
	return (options.clone !== false && options.isMergeableObject(value))
		? deepmerge(emptyTarget(value), value, options)
		: value
}

function defaultArrayMerge(target, source, options) {
	return target.concat(source).map(function(element) {
		return cloneUnlessOtherwiseSpecified(element, options)
	})
}

function getMergeFunction(key, options) {
	if (!options.customMerge) {
		return deepmerge
	}
	var customMerge = options.customMerge(key);
	return typeof customMerge === 'function' ? customMerge : deepmerge
}

function getEnumerableOwnPropertySymbols(target) {
	return Object.getOwnPropertySymbols
		? Object.getOwnPropertySymbols(target).filter(function(symbol) {
			return target.propertyIsEnumerable(symbol)
		})
		: []
}

function getKeys(target) {
	return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
}

function propertyIsOnObject(object, property) {
	try {
		return property in object
	} catch(_) {
		return false
	}
}

// Protects from prototype poisoning and unexpected merging up the prototype chain.
function propertyIsUnsafe(target, key) {
	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
}

function mergeObject(target, source, options) {
	var destination = {};
	if (options.isMergeableObject(target)) {
		getKeys(target).forEach(function(key) {
			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
		});
	}
	getKeys(source).forEach(function(key) {
		if (propertyIsUnsafe(target, key)) {
			return
		}

		if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
			destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
		} else {
			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
		}
	});
	return destination
}

function deepmerge(target, source, options) {
	options = options || {};
	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
	// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
	// implementations can use it. The caller may not replace it.
	options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;

	var sourceIsArray = Array.isArray(source);
	var targetIsArray = Array.isArray(target);
	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;

	if (!sourceAndTargetTypesMatch) {
		return cloneUnlessOtherwiseSpecified(source, options)
	} else if (sourceIsArray) {
		return options.arrayMerge(target, source, options)
	} else {
		return mergeObject(target, source, options)
	}
}

deepmerge.all = function deepmergeAll(array, options) {
	if (!Array.isArray(array)) {
		throw new Error('first argument should be an array')
	}

	return array.reduce(function(prev, next) {
		return deepmerge(prev, next, options)
	}, {})
};

var deepmerge_1 = deepmerge;

var cjs = deepmerge_1;

var options = {
  name: 'form-builder',
  props: {
    // instance of form-compostion
    form: {
      type: Object,
      required: true
    },
    shares: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    config: {
      type: Array,
      required: true
    },
    metadata: {
      type: Object,
      default: function _default() {
        return {};
      }
    }
  },
  setup: function setup(props) {
    var _props$form = props.form,
        formValues = _props$form.formValues,
        updateFormValues = _props$form.updateFormValues;
    return {
      // from form composition
      formValues: formValues,
      updateFormValues: updateFormValues
    };
  },
  data: function data() {
    return {};
  },
  computed: {},
  created: function created() {
    this.prepare();
  },
  methods: {
    prepare: function prepare() {
      var config = this.config,
          shares = this.shares,
          formValues = this.formValues;
      var initialValues = {};

      _forEachInstanceProperty(config).call(config, function (group, index) {
        var _context;

        group._key = "group_".concat(index);
        group.fields = group.fields || [];
        group.component = group.component || 'div';
        group.fields = _mapInstanceProperty(_context = group.fields).call(_context, function (comp) {
          if (!comp.name) {
            throw new Error("FormBuilder: name is required, config - ".concat(_JSON$stringify(comp)));
          }

          if (comp.defaultValue != null) {
            if (formValues[comp.name] == null) {
              initialValues[comp.name] = comp.defaultValue;
            }
          }

          return cjs.all([{}, shares, comp]);
        });
      });

      this.updateFormValues(initialValues);
    },
    handleCommand: function handleCommand() {
      var _context2;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      this.$emit.apply(this, _concatInstanceProperty(_context2 = ['command']).call(_context2, args));
    }
  }
};

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

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

  var _h = _vm.$createElement;

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

  return _c("div", _vm._l(_vm.config, function (group) {
    return _c(group.component, _vm._b({
      key: group._key,
      tag: "component"
    }, "component", group.props, false), _vm._l(group.fields, function (comp) {
      return _c(comp.component, _vm._b({
        key: comp.name,
        tag: "component",
        attrs: {
          tip: comp.tip,
          tooltip: comp.tooltip,
          name: comp.name,
          hide: comp.hide,
          rules: comp.rules,
          label: comp.label,
          items: comp.items,
          props: comp.props,
          extend: comp.extend,
          metadata: _vm.metadata,
          formValues: _vm.formValues
        },
        on: {
          command: _vm.handleCommand
        },
        model: {
          value: _vm.formValues[comp.name],
          callback: function callback($$v) {
            _vm.$set(_vm.formValues, comp.name, $$v);
          },
          expression: "formValues[comp.name]"
        }
      }, "component", comp.props, false));
    }), 1);
  }), 1);
};

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

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* 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, undefined, undefined, undefined);

function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, 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) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

var install = function install(Vue) {
  Vue.component('form-builder', __vue_component__);
};

var createFormBuilder = function createFormBuilder() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return _objectSpread(_objectSpread({}, __vue_component__), options);
};
var index = {
  install: install
};

exports.FormBuilder = __vue_component__;
exports.createFormBuilder = createFormBuilder;
exports.default = index;