@form-create/element-ui 3.1.10 → 3.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/form-create.esm.js +174 -113
- package/dist/form-create.esm.min.js +2 -2
- package/dist/form-create.js +174 -113
- package/dist/form-create.min.js +2 -2
- package/package.json +13 -13
- package/src/core/provider.js +2 -1
- package/types/config.d.ts +9 -13
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @form-create/element-ui
|
|
2
|
-
**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持
|
|
2
|
+
**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。**
|
|
3
3
|
|
|
4
|
-
form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports
|
|
4
|
+
form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 5 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.
|
|
5
5
|
|
|
6
6
|
> form-create element-ui 动态表单组件
|
|
7
7
|
>
|
package/dist/form-create.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @form-create/element-ui v3.1.
|
|
2
|
+
* @form-create/element-ui v3.1.13
|
|
3
3
|
* (c) 2018-2022 xaboy
|
|
4
4
|
* Github https://github.com/xaboy/form-create
|
|
5
5
|
* Released under the MIT License.
|
|
@@ -1792,31 +1792,27 @@ var Group = defineComponent({
|
|
|
1792
1792
|
"span": button ? 20 : 24
|
|
1793
1793
|
}, {
|
|
1794
1794
|
"default": function _default() {
|
|
1795
|
-
return [createVNode(
|
|
1796
|
-
"
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
"extendOption": true
|
|
1817
|
-
}, null)];
|
|
1818
|
-
}
|
|
1819
|
-
})];
|
|
1795
|
+
return [createVNode(Type, {
|
|
1796
|
+
"key": key,
|
|
1797
|
+
"inFor": true,
|
|
1798
|
+
"onUpdate:modelValue": function onUpdateModelValue(formData) {
|
|
1799
|
+
return _this9.formData(key, formData);
|
|
1800
|
+
},
|
|
1801
|
+
"modelValue": _this9.field ? _defineProperty({}, _this9.field, _this9._value(_this9.modelValue[index])) : _this9.modelValue[index],
|
|
1802
|
+
"onEmit-event": function onEmitEvent(name) {
|
|
1803
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
1804
|
+
args[_key - 1] = arguments[_key];
|
|
1805
|
+
}
|
|
1806
|
+
|
|
1807
|
+
return _this9.emitEvent(name, args, index, key);
|
|
1808
|
+
},
|
|
1809
|
+
"onUpdate:api": function onUpdateApi($f) {
|
|
1810
|
+
return _this9.add$f(index, key, $f);
|
|
1811
|
+
},
|
|
1812
|
+
"rule": rule,
|
|
1813
|
+
"option": options,
|
|
1814
|
+
"extendOption": true
|
|
1815
|
+
}, null)];
|
|
1820
1816
|
}
|
|
1821
1817
|
}), button ? createVNode(resolveComponent("ElCol"), {
|
|
1822
1818
|
"span": 2,
|
|
@@ -2075,13 +2071,17 @@ function $FormCreate(FormCreate) {
|
|
|
2075
2071
|
fc.$handle.reloadRule(rule.value);
|
|
2076
2072
|
vm.setupState.renderRule();
|
|
2077
2073
|
});
|
|
2078
|
-
watch(
|
|
2074
|
+
watch(function () {
|
|
2075
|
+
return props.option;
|
|
2076
|
+
}, function (n) {
|
|
2079
2077
|
fc.initOptions(n);
|
|
2080
2078
|
fapi.refresh();
|
|
2079
|
+
}, {
|
|
2080
|
+
deep: true
|
|
2081
2081
|
});
|
|
2082
2082
|
watch(modelValue, function (n) {
|
|
2083
2083
|
if (JSON.stringify(n || {}) === data.updateValue) return;
|
|
2084
|
-
fapi.setValue(n || {});
|
|
2084
|
+
fapi.config.forceCoverValue ? fapi.coverValue(n || {}) : fapi.setValue(n || {});
|
|
2085
2085
|
}, {
|
|
2086
2086
|
deep: true
|
|
2087
2087
|
});
|
|
@@ -2297,7 +2297,13 @@ function mergeRule(rule, merge) {
|
|
|
2297
2297
|
return rule;
|
|
2298
2298
|
}
|
|
2299
2299
|
function getRule(rule) {
|
|
2300
|
-
|
|
2300
|
+
var r = is.Function(rule.getRule) ? rule.getRule() : rule;
|
|
2301
|
+
|
|
2302
|
+
if (!r.type) {
|
|
2303
|
+
r.type = 'input';
|
|
2304
|
+
}
|
|
2305
|
+
|
|
2306
|
+
return r;
|
|
2301
2307
|
}
|
|
2302
2308
|
function mergeGlobal(target, merge) {
|
|
2303
2309
|
if (!target) return merge;
|
|
@@ -2576,15 +2582,21 @@ function Api(h) {
|
|
|
2576
2582
|
return copy(ctx.rule.value);
|
|
2577
2583
|
},
|
|
2578
2584
|
coverValue: function coverValue(formData) {
|
|
2585
|
+
var data = _objectSpread2({}, formData || {});
|
|
2586
|
+
|
|
2579
2587
|
h.deferSyncValue(function () {
|
|
2580
2588
|
api.fields().forEach(function (key) {
|
|
2581
2589
|
var ctxs = h.fieldCtx[key];
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2590
|
+
|
|
2591
|
+
if (ctxs) {
|
|
2592
|
+
var flag = hasProperty(formData, key);
|
|
2593
|
+
ctxs.forEach(function (ctx) {
|
|
2594
|
+
ctx.rule.value = flag ? formData[key] : undefined;
|
|
2595
|
+
});
|
|
2596
|
+
delete data[key];
|
|
2597
|
+
}
|
|
2587
2598
|
});
|
|
2599
|
+
extend(h.appendData, data);
|
|
2588
2600
|
});
|
|
2589
2601
|
},
|
|
2590
2602
|
setValue: function setValue(field) {
|
|
@@ -2817,6 +2829,18 @@ function Api(h) {
|
|
|
2817
2829
|
$set(ctx.rule.effect, attr, value);
|
|
2818
2830
|
}
|
|
2819
2831
|
},
|
|
2832
|
+
clearEffectData: function clearEffectData(id, attr) {
|
|
2833
|
+
var ctx = h.getCtx(id);
|
|
2834
|
+
|
|
2835
|
+
if (ctx) {
|
|
2836
|
+
if (attr && attr[0] === '$') {
|
|
2837
|
+
attr = attr.substr(1);
|
|
2838
|
+
}
|
|
2839
|
+
|
|
2840
|
+
ctx.clearEffectData(attr);
|
|
2841
|
+
api.sync(id);
|
|
2842
|
+
}
|
|
2843
|
+
},
|
|
2820
2844
|
updateValidate: function updateValidate(id, validate, merge) {
|
|
2821
2845
|
if (merge) {
|
|
2822
2846
|
api.mergeRule(id, {
|
|
@@ -2949,8 +2973,13 @@ function useCache(Render) {
|
|
|
2949
2973
|
},
|
|
2950
2974
|
getCache: function getCache(ctx) {
|
|
2951
2975
|
var cache = this.cache[ctx.id];
|
|
2952
|
-
|
|
2953
|
-
|
|
2976
|
+
|
|
2977
|
+
if (cache) {
|
|
2978
|
+
cache.use = true;
|
|
2979
|
+
return cache.vnode;
|
|
2980
|
+
}
|
|
2981
|
+
|
|
2982
|
+
return undefined;
|
|
2954
2983
|
}
|
|
2955
2984
|
});
|
|
2956
2985
|
}
|
|
@@ -3621,7 +3650,7 @@ function bind(ctx) {
|
|
|
3621
3650
|
});
|
|
3622
3651
|
}
|
|
3623
3652
|
|
|
3624
|
-
function RuleContext(handle, rule) {
|
|
3653
|
+
function RuleContext(handle, rule, defaultValue) {
|
|
3625
3654
|
var id = uniqueId();
|
|
3626
3655
|
var isInput = !!rule.field;
|
|
3627
3656
|
extend(this, {
|
|
@@ -3645,7 +3674,7 @@ function RuleContext(handle, rule) {
|
|
|
3645
3674
|
refRule: {},
|
|
3646
3675
|
input: isInput,
|
|
3647
3676
|
el: undefined,
|
|
3648
|
-
defaultValue: isInput ? deepCopy(
|
|
3677
|
+
defaultValue: isInput ? deepCopy(defaultValue) : undefined,
|
|
3649
3678
|
field: rule.field || undefined
|
|
3650
3679
|
});
|
|
3651
3680
|
this.updateType();
|
|
@@ -3758,7 +3787,11 @@ extend(RuleContext.prototype, {
|
|
|
3758
3787
|
return this.payload[name];
|
|
3759
3788
|
},
|
|
3760
3789
|
clearEffectData: function clearEffectData(name) {
|
|
3761
|
-
|
|
3790
|
+
if (name === undefined) {
|
|
3791
|
+
this.payload = {};
|
|
3792
|
+
} else {
|
|
3793
|
+
delete this.payload[name];
|
|
3794
|
+
}
|
|
3762
3795
|
},
|
|
3763
3796
|
updateKey: function updateKey(flag) {
|
|
3764
3797
|
this.key = uniqueId();
|
|
@@ -4019,7 +4052,6 @@ function useLoader(Handler) {
|
|
|
4019
4052
|
rules.map(function (_rule, index) {
|
|
4020
4053
|
if (parent && (is.String(_rule) || is.Undef(_rule))) return;
|
|
4021
4054
|
if (!_this6.pageEnd && !parent && index >= _this6.first) return;
|
|
4022
|
-
if (!is.Object(_rule) || !getRule(_rule).type) return err('未定义生成规则的 type 字段', _rule);
|
|
4023
4055
|
|
|
4024
4056
|
if (_rule.__fc__ && _rule.__fc__.root === rules && _this6.ctxs[_rule.__fc__.id]) {
|
|
4025
4057
|
loadChildren(_rule.__fc__.loadChildrenPending(), _rule.__fc__);
|
|
@@ -4043,9 +4075,11 @@ function useLoader(Handler) {
|
|
|
4043
4075
|
var ctx;
|
|
4044
4076
|
var isCopy = false;
|
|
4045
4077
|
var isInit = !!_rule.__fc__;
|
|
4078
|
+
var defaultValue = rule.value;
|
|
4046
4079
|
|
|
4047
4080
|
if (isInit) {
|
|
4048
4081
|
ctx = _rule.__fc__;
|
|
4082
|
+
defaultValue = ctx.defaultValue;
|
|
4049
4083
|
var check = !ctx.check(_this6);
|
|
4050
4084
|
|
|
4051
4085
|
if (ctx.deleted) {
|
|
@@ -4070,7 +4104,9 @@ function useLoader(Handler) {
|
|
|
4070
4104
|
}
|
|
4071
4105
|
|
|
4072
4106
|
if (!ctx) {
|
|
4073
|
-
|
|
4107
|
+
var _rule2 = _this6.parseRule(_rule);
|
|
4108
|
+
|
|
4109
|
+
ctx = new RuleContext(_this6, _rule2, isInit ? defaultValue : _rule2.value);
|
|
4074
4110
|
|
|
4075
4111
|
_this6.bindParser(ctx);
|
|
4076
4112
|
} else {
|
|
@@ -4166,6 +4202,7 @@ function useLoader(Handler) {
|
|
|
4166
4202
|
}
|
|
4167
4203
|
|
|
4168
4204
|
if (!validate.length) return false;
|
|
4205
|
+
var hideLst = [];
|
|
4169
4206
|
var flag = false;
|
|
4170
4207
|
this.deferSyncValue(function () {
|
|
4171
4208
|
validate.reverse().forEach(function (_ref) {
|
|
@@ -4183,7 +4220,7 @@ function useLoader(Handler) {
|
|
|
4183
4220
|
children: rule,
|
|
4184
4221
|
valid: valid
|
|
4185
4222
|
}) : ctx.ctrlRule.splice(ctx.ctrlRule.indexOf(ctrl), 1);
|
|
4186
|
-
|
|
4223
|
+
hideLst[valid ? 'push' : 'unshift'](function () {
|
|
4187
4224
|
_this7.api.hidden(!valid, rule);
|
|
4188
4225
|
});
|
|
4189
4226
|
return;
|
|
@@ -4216,6 +4253,11 @@ function useLoader(Handler) {
|
|
|
4216
4253
|
}
|
|
4217
4254
|
});
|
|
4218
4255
|
});
|
|
4256
|
+
hideLst.length && nextTick(function () {
|
|
4257
|
+
hideLst.forEach(function (v) {
|
|
4258
|
+
return v();
|
|
4259
|
+
});
|
|
4260
|
+
});
|
|
4219
4261
|
this.vm.emit('control', ctx.origin, this.api);
|
|
4220
4262
|
this.effect(ctx, 'control');
|
|
4221
4263
|
return flag;
|
|
@@ -4762,6 +4804,11 @@ function useEffect(Handler) {
|
|
|
4762
4804
|
var ps = this.fc.providers;
|
|
4763
4805
|
Object.keys(ps).forEach(function (k) {
|
|
4764
4806
|
var prop = ps[k];
|
|
4807
|
+
|
|
4808
|
+
if (is.Function(prop)) {
|
|
4809
|
+
prop = prop(_this.fc);
|
|
4810
|
+
}
|
|
4811
|
+
|
|
4765
4812
|
prop._c = getComponent(prop);
|
|
4766
4813
|
|
|
4767
4814
|
_this.onEffect(prop);
|
|
@@ -4995,7 +5042,7 @@ function getBody(xhr) {
|
|
|
4995
5042
|
}
|
|
4996
5043
|
}
|
|
4997
5044
|
|
|
4998
|
-
function fetch(option) {
|
|
5045
|
+
function fetch$1(option) {
|
|
4999
5046
|
if (typeof XMLHttpRequest === 'undefined') {
|
|
5000
5047
|
return;
|
|
5001
5048
|
}
|
|
@@ -5208,90 +5255,103 @@ extend(Manager.prototype, {
|
|
|
5208
5255
|
render: function render(children) {}
|
|
5209
5256
|
});
|
|
5210
5257
|
|
|
5211
|
-
var
|
|
5212
|
-
|
|
5213
|
-
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
|
|
5218
|
-
inject.clearProp();
|
|
5219
|
-
api.sync(rule);
|
|
5258
|
+
var fetch = function fetch(fc) {
|
|
5259
|
+
function parseOpt(option) {
|
|
5260
|
+
if (is.String(option)) {
|
|
5261
|
+
option = {
|
|
5262
|
+
action: option,
|
|
5263
|
+
to: 'options'
|
|
5264
|
+
};
|
|
5220
5265
|
}
|
|
5221
|
-
}
|
|
5222
|
-
};
|
|
5223
5266
|
|
|
5224
|
-
|
|
5225
|
-
if (is.String(option)) {
|
|
5226
|
-
option = {
|
|
5227
|
-
action: option,
|
|
5228
|
-
to: 'options'
|
|
5229
|
-
};
|
|
5267
|
+
return option;
|
|
5230
5268
|
}
|
|
5231
5269
|
|
|
5232
|
-
|
|
5233
|
-
|
|
5270
|
+
function run(inject, rule, api) {
|
|
5271
|
+
var option = inject.value;
|
|
5234
5272
|
|
|
5235
|
-
|
|
5236
|
-
|
|
5273
|
+
if (is.Function(option)) {
|
|
5274
|
+
option = option(rule, api);
|
|
5275
|
+
}
|
|
5237
5276
|
|
|
5238
|
-
|
|
5239
|
-
option = option(rule, api);
|
|
5240
|
-
}
|
|
5277
|
+
option = parseOpt(option);
|
|
5241
5278
|
|
|
5242
|
-
|
|
5279
|
+
if (!option || !option.action) {
|
|
5280
|
+
return false;
|
|
5281
|
+
}
|
|
5243
5282
|
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
|
|
5283
|
+
if (!option.to) {
|
|
5284
|
+
option.to = 'options';
|
|
5285
|
+
}
|
|
5247
5286
|
|
|
5248
|
-
|
|
5249
|
-
option.to = 'options';
|
|
5250
|
-
}
|
|
5287
|
+
var _onError = option.onError;
|
|
5251
5288
|
|
|
5252
|
-
|
|
5289
|
+
var check = function check() {
|
|
5290
|
+
if (!inject.getValue()) {
|
|
5291
|
+
inject.clearProp();
|
|
5292
|
+
api.sync(rule);
|
|
5293
|
+
return true;
|
|
5294
|
+
}
|
|
5295
|
+
};
|
|
5253
5296
|
|
|
5254
|
-
|
|
5255
|
-
|
|
5256
|
-
|
|
5257
|
-
|
|
5258
|
-
|
|
5259
|
-
|
|
5260
|
-
|
|
5297
|
+
var set = function set(val) {
|
|
5298
|
+
if (val === undefined) {
|
|
5299
|
+
inject.clearProp();
|
|
5300
|
+
api.sync(rule);
|
|
5301
|
+
} else {
|
|
5302
|
+
deepSet(inject.getProp(), option.to, val);
|
|
5303
|
+
}
|
|
5304
|
+
};
|
|
5261
5305
|
|
|
5262
|
-
|
|
5263
|
-
|
|
5264
|
-
|
|
5265
|
-
|
|
5266
|
-
} else {
|
|
5267
|
-
deepSet(inject.getProp(), option.to, val);
|
|
5268
|
-
}
|
|
5269
|
-
};
|
|
5306
|
+
invoke(function () {
|
|
5307
|
+
return fc.create.fetch(_objectSpread2(_objectSpread2({}, option), {}, {
|
|
5308
|
+
onSuccess: function onSuccess(body) {
|
|
5309
|
+
if (check()) return;
|
|
5270
5310
|
|
|
5271
|
-
|
|
5272
|
-
|
|
5273
|
-
|
|
5274
|
-
|
|
5275
|
-
|
|
5276
|
-
|
|
5277
|
-
|
|
5278
|
-
api.sync(rule);
|
|
5279
|
-
},
|
|
5280
|
-
onError: function onError(e) {
|
|
5281
|
-
set(undefined);
|
|
5282
|
-
if (check()) return;
|
|
5311
|
+
var fn = function fn(v) {
|
|
5312
|
+
return v.data;
|
|
5313
|
+
};
|
|
5314
|
+
|
|
5315
|
+
if (is.Function(option.parse)) {
|
|
5316
|
+
fn = option.parse;
|
|
5317
|
+
}
|
|
5283
5318
|
|
|
5284
|
-
|
|
5285
|
-
|
|
5286
|
-
}
|
|
5319
|
+
set(fn(body, rule, api));
|
|
5320
|
+
api.sync(rule);
|
|
5321
|
+
},
|
|
5322
|
+
onError: function onError(e) {
|
|
5323
|
+
set(undefined);
|
|
5324
|
+
if (check()) return;
|
|
5325
|
+
|
|
5326
|
+
(_onError || function (e) {
|
|
5327
|
+
return err(e.message || 'fetch fail ' + option.action);
|
|
5328
|
+
})(e, rule, api);
|
|
5329
|
+
}
|
|
5330
|
+
}), {
|
|
5331
|
+
inject: inject,
|
|
5332
|
+
rule: rule,
|
|
5333
|
+
api: api
|
|
5334
|
+
});
|
|
5335
|
+
});
|
|
5336
|
+
return true;
|
|
5337
|
+
}
|
|
5338
|
+
|
|
5339
|
+
return {
|
|
5340
|
+
name: 'fetch',
|
|
5341
|
+
loaded: function loaded() {
|
|
5342
|
+
run.apply(void 0, arguments);
|
|
5343
|
+
},
|
|
5344
|
+
watch: function watch(inject, rule, api) {
|
|
5345
|
+
if (!run(inject, rule, api)) {
|
|
5346
|
+
inject.clearProp();
|
|
5347
|
+
api.sync(rule);
|
|
5287
5348
|
}
|
|
5288
|
-
}
|
|
5289
|
-
}
|
|
5290
|
-
|
|
5291
|
-
}
|
|
5349
|
+
}
|
|
5350
|
+
};
|
|
5351
|
+
};
|
|
5292
5352
|
|
|
5293
5353
|
var $provider = {
|
|
5294
|
-
fetch:
|
|
5354
|
+
fetch: fetch
|
|
5295
5355
|
};
|
|
5296
5356
|
|
|
5297
5357
|
var name$6 = 'html';
|
|
@@ -5639,7 +5699,7 @@ function FormCreateFactory(config) {
|
|
|
5639
5699
|
componentAlias: componentAlias,
|
|
5640
5700
|
copyRule: copyRule,
|
|
5641
5701
|
copyRules: copyRules,
|
|
5642
|
-
fetch: fetch,
|
|
5702
|
+
fetch: fetch$1,
|
|
5643
5703
|
$form: $form,
|
|
5644
5704
|
parseFn: parseFn,
|
|
5645
5705
|
parseJson: parseJson,
|
|
@@ -6491,7 +6551,8 @@ var required = {
|
|
|
6491
6551
|
}, val);
|
|
6492
6552
|
|
|
6493
6553
|
if (!validate.message) {
|
|
6494
|
-
|
|
6554
|
+
var title = rule.title || '';
|
|
6555
|
+
validate.message = ((_typeof(title) === 'object' ? title.title : title) || '') + '不能为空';
|
|
6495
6556
|
}
|
|
6496
6557
|
|
|
6497
6558
|
inject.getProp().validate = [validate];
|
|
@@ -6547,7 +6608,7 @@ function install(FormCreate) {
|
|
|
6547
6608
|
function elmFormCreate() {
|
|
6548
6609
|
return FormCreateFactory({
|
|
6549
6610
|
ui: 'element-ui',
|
|
6550
|
-
version: '3.1.
|
|
6611
|
+
version: '3.1.13',
|
|
6551
6612
|
manager: manager,
|
|
6552
6613
|
extendApi: extendApi,
|
|
6553
6614
|
install: install,
|