@form-create/component-elm-group 3.0.0-alpha.1 → 3.1.0
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/LICENSE +1 -1
- package/README.md +1 -1
- package/dist/index.esm.js +32 -18
- package/dist/index.esm.min.js +3 -3
- package/dist/index.js +31 -17
- package/dist/index.min.js +3 -3
- package/package.json +3 -3
- package/src/component.jsx +19 -14
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
|
|
3
3
|
@form-create/element-ui 内置组件
|
|
4
4
|
|
|
5
|
-
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/
|
|
5
|
+
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
|
6
6
|
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
/*!
|
|
2
|
+
* @form-create/component-elm-group v3.1.0
|
|
3
|
+
* (c) 2018-2022 xaboy
|
|
4
|
+
* Github https://github.com/xaboy/form-create with group
|
|
5
|
+
* Released under the MIT License.
|
|
6
|
+
*/
|
|
7
|
+
import { defineComponent, markRaw, nextTick, createVNode, resolveComponent, isVNode } from 'vue';
|
|
2
8
|
|
|
3
9
|
function ownKeys(object, enumerableOnly) {
|
|
4
10
|
var keys = Object.keys(object);
|
|
@@ -174,9 +180,9 @@ var Group = defineComponent({
|
|
|
174
180
|
onBeforeAdd: {
|
|
175
181
|
type: Function,
|
|
176
182
|
"default": function _default() {}
|
|
177
|
-
}
|
|
183
|
+
},
|
|
184
|
+
formCreateInject: Object
|
|
178
185
|
},
|
|
179
|
-
inject: ['formCreateInject'],
|
|
180
186
|
data: function data() {
|
|
181
187
|
return {
|
|
182
188
|
len: 0,
|
|
@@ -233,7 +239,8 @@ var Group = defineComponent({
|
|
|
233
239
|
});
|
|
234
240
|
}
|
|
235
241
|
},
|
|
236
|
-
deep: true
|
|
242
|
+
deep: true,
|
|
243
|
+
flush: 'post'
|
|
237
244
|
}
|
|
238
245
|
},
|
|
239
246
|
methods: {
|
|
@@ -296,7 +303,7 @@ var Group = defineComponent({
|
|
|
296
303
|
};
|
|
297
304
|
|
|
298
305
|
if (emit) {
|
|
299
|
-
|
|
306
|
+
nextTick(function () {
|
|
300
307
|
return _this3.$emit('add', rule, Object.keys(_this3.cacheRule).length - 1);
|
|
301
308
|
});
|
|
302
309
|
}
|
|
@@ -306,7 +313,7 @@ var Group = defineComponent({
|
|
|
306
313
|
|
|
307
314
|
this.cacheRule[key].$f = $f;
|
|
308
315
|
this.subForm();
|
|
309
|
-
|
|
316
|
+
nextTick(function () {
|
|
310
317
|
if (_this4.syncDisabled) {
|
|
311
318
|
$f.disabled(_this4.disabled);
|
|
312
319
|
}
|
|
@@ -329,7 +336,7 @@ var Group = defineComponent({
|
|
|
329
336
|
delete this.cacheValue[key];
|
|
330
337
|
|
|
331
338
|
if (emit) {
|
|
332
|
-
|
|
339
|
+
nextTick(function () {
|
|
333
340
|
return _this6.$emit('remove', index);
|
|
334
341
|
});
|
|
335
342
|
}
|
|
@@ -353,24 +360,31 @@ var Group = defineComponent({
|
|
|
353
360
|
this.input(this.modelValue);
|
|
354
361
|
},
|
|
355
362
|
addIcon: function addIcon(key) {
|
|
356
|
-
return createVNode("
|
|
363
|
+
return createVNode(resolveComponent("el-icon"), {
|
|
357
364
|
"key": "a".concat(key),
|
|
358
|
-
"class": "el-icon-circle-plus-outline",
|
|
359
365
|
"style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
|
|
360
366
|
"onClick": this.add
|
|
361
|
-
},
|
|
367
|
+
}, {
|
|
368
|
+
"default": function _default() {
|
|
369
|
+
return [createVNode(resolveComponent("circle-plus"), null, null)];
|
|
370
|
+
}
|
|
371
|
+
});
|
|
362
372
|
},
|
|
363
373
|
delIcon: function delIcon(index, key) {
|
|
364
374
|
var _this7 = this;
|
|
365
375
|
|
|
366
|
-
return createVNode("
|
|
376
|
+
return createVNode(resolveComponent("ElIcon"), {
|
|
367
377
|
"key": "d".concat(key),
|
|
368
378
|
"class": "el-icon-remove-outline",
|
|
369
379
|
"style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266', ";"),
|
|
370
380
|
"onClick": function onClick() {
|
|
371
381
|
return _this7.del(index, key);
|
|
372
382
|
}
|
|
373
|
-
},
|
|
383
|
+
}, {
|
|
384
|
+
"default": function _default() {
|
|
385
|
+
return [createVNode(resolveComponent("remove"), null, null)];
|
|
386
|
+
}
|
|
387
|
+
});
|
|
374
388
|
},
|
|
375
389
|
makeIcon: function makeIcon(total, index, key) {
|
|
376
390
|
var _this8 = this;
|
|
@@ -408,13 +422,13 @@ var Group = defineComponent({
|
|
|
408
422
|
created: function created() {
|
|
409
423
|
var d = (this.expand || 0) - this.modelValue.length;
|
|
410
424
|
|
|
411
|
-
if (d > 0) {
|
|
412
|
-
this.expandRule(d);
|
|
413
|
-
}
|
|
414
|
-
|
|
415
425
|
for (var i = 0; i < this.modelValue.length; i++) {
|
|
416
426
|
this.addRule(i);
|
|
417
427
|
}
|
|
428
|
+
|
|
429
|
+
if (d > 0) {
|
|
430
|
+
this.expandRule(d);
|
|
431
|
+
}
|
|
418
432
|
},
|
|
419
433
|
render: function render() {
|
|
420
434
|
var _this9 = this;
|
|
@@ -426,12 +440,12 @@ var Group = defineComponent({
|
|
|
426
440
|
vm: this,
|
|
427
441
|
add: this.add
|
|
428
442
|
}) : createVNode("i", {
|
|
429
|
-
"key":
|
|
443
|
+
"key": 1,
|
|
430
444
|
"class": "el-icon-circle-plus-outline",
|
|
431
445
|
"style": "font-size:".concat(this.fontSize, "px;vertical-align:middle;color:").concat(this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer', ";"),
|
|
432
446
|
"onClick": this.add
|
|
433
447
|
}, null) : createVNode("div", {
|
|
434
|
-
"key":
|
|
448
|
+
"key": 2
|
|
435
449
|
}, [keys.map(function (key, index) {
|
|
436
450
|
var _slot;
|
|
437
451
|
|
package/dist/index.esm.min.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @form-create/component-elm-group v3.
|
|
3
|
-
* (c) 2018-
|
|
2
|
+
* @form-create/component-elm-group v3.1.0
|
|
3
|
+
* (c) 2018-2022 xaboy
|
|
4
4
|
* Github https://github.com/xaboy/form-create with group
|
|
5
5
|
* Released under the MIT License.
|
|
6
6
|
*/
|
|
7
|
-
import{defineComponent as e,markRaw as t,
|
|
7
|
+
import{defineComponent as e,markRaw as t,nextTick as n,createVNode as o,resolveComponent as r,isVNode as i}from"vue";function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e){return function(e){if(Array.isArray(e))return f(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,t)}(e)||function(){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 f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var d={type:function(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"},Undef:function(e){return null==e},Element:function(e){return"object"===a(e)&&null!==e&&1===e.nodeType&&!d.Object(e)},trueArray:function(e){return Array.isArray(e)&&e.length>0}};["Date","Object","Function","String","Boolean","Array","Number"].forEach((function(e){d[e]=function(t){return d.type(t,e)}}));var h=e({name:"fcGroup",props:{field:String,rule:Array,expand:Number,options:Object,button:{type:Boolean,default:!0},max:{type:Number,default:0},min:{type:Number,default:0},modelValue:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},syncDisabled:{type:Boolean,default:!0},fontSize:{type:Number,default:28},onBeforeRemove:{type:Function,default:function(){}},onBeforeAdd:{type:Function,default:function(){}},formCreateInject:Object},data:function(){return{len:0,cacheRule:{},cacheValue:{},form:t(this.formCreateInject.form.$form())}},emits:["update:modelValue","change","itemMounted","remove"],watch:{disabled:function(e){if(this.syncDisabled){var t=this.cacheRule;Object.keys(t).forEach((function(n){t[n].$f.disabled(e)}))}},expand:function(e){var t=e-this.modelValue.length;t>0&&this.expandRule(t)},modelValue:{handler:function(e){var t=this;e=e||[];var n=Object.keys(this.cacheRule),o=n.length,r=o-e.length;if(r<0){for(var i=r;i<0;i++)this.addRule(e.length+i);for(var l=0;l<o;l++)this.setValue(n[l],e[l])}else{if(r>0){for(var u=0;u<r;u++)this.removeRule(n[o-u-1]);this.subForm()}e.forEach((function(o,r){t.setValue(n[r],e[r])}))}},deep:!0,flush:"post"}},methods:{_value:function(e){return e&&(t=e,n=this.field,{}.hasOwnProperty.call(t,n))?e[this.field]:e;var t,n},cache:function(e,t){this.cacheValue[e]=JSON.stringify(t)},input:function(e){this.$emit("update:modelValue",e),this.$emit("change",e)},formData:function(e,t){var n=this,o=this.cacheRule,r=Object.keys(o);if(r.filter((function(e){return o[e].$f})).length===r.length){var i=r.map((function(o){var r=e===o?t:u({},n.cacheRule[o].$f.form),i=n.field?r[n.field]||null:r;return n.cache(o,i),i}));this.input(i)}},setValue:function(e,t){var n=this.field;n&&(t=c({},n,this._value(t))),this.cacheValue[e]!==JSON.stringify(n?t[n]:t)&&this.cache(e,t)},addRule:function(e,t){var o=this,r=this.formCreateInject.form.copyRules(this.rule||[]),i=this.options?u({},this.options):{submitBtn:!1,resetBtn:!1};this.cacheRule[++this.len]={rule:r,options:i},t&&n((function(){return o.$emit("add",r,Object.keys(o.cacheRule).length-1)}))},add$f:function(e,t,o){var r=this;this.cacheRule[t].$f=o,this.subForm(),n((function(){r.syncDisabled&&o.disabled(r.disabled),r.$emit("itemMounted",o,Object.keys(r.cacheRule).indexOf(t))}))},subForm:function(){var e=this;this.formCreateInject.subForm(Object.keys(this.cacheRule).map((function(t){return e.cacheRule[t].$f})))},removeRule:function(e,t){var o=this,r=Object.keys(this.cacheRule).indexOf(e);delete this.cacheRule[e],delete this.cacheValue[e],t&&n((function(){return o.$emit("remove",r)}))},add:function(){this.disabled||!1===this.onBeforeAdd(this.modelValue)||(this.modelValue.push(this.field?null:{}),this.$emit("update:modelValue",this.modelValue))},del:function(e,t){this.disabled||!1===this.onBeforeRemove(this.modelValue,e)||(this.removeRule(t,!0),this.subForm(),this.modelValue.splice(e,1),this.input(this.modelValue))},addIcon:function(e){return o(r("el-icon"),{key:"a".concat(e),style:"font-size:".concat(this.fontSize,"px;cursor:").concat(this.disabled?"not-allowed;color:#c9cdd4":"pointer",";"),onClick:this.add},{default:function(){return[o(r("circle-plus"),null,null)]}})},delIcon:function(e,t){var n=this;return o(r("ElIcon"),{key:"d".concat(t),class:"el-icon-remove-outline",style:"font-size:".concat(this.fontSize,"px;cursor:").concat(this.disabled?"not-allowed;color:#c9cdd4":"pointer;color:#606266",";"),onClick:function(){return n.del(e,t)}},{default:function(){return[o(r("remove"),null,null)]}})},makeIcon:function(e,t,n){var o=this;return this.$slots.button?this.$slots.button({total:e,index:t,vm:this,key:n,del:function(){return o.del(t,n)},add:this.add}):0===t?[0!==this.max&&e>=this.max?null:this.addIcon(n),0===this.min||e>this.min?this.delIcon(t,n):null]:t>=this.min?this.delIcon(t,n):void 0},emitEvent:function(e,t,n,o){this.$emit.apply(this,[e].concat(s(t),[this.cacheRule[o].$f,n]))},expandRule:function(e){for(var t=0;t<e;t++)this.modelValue.push(this.field?null:{})}},created:function(){for(var e=(this.expand||0)-this.modelValue.length,t=0;t<this.modelValue.length;t++)this.addRule(t);e>0&&this.expandRule(e)},render:function(){var e=this,t=Object.keys(this.cacheRule),n=this.button,l=this.form;return 0===t.length?this.$slots.default?this.$slots.default({vm:this,add:this.add}):o("i",{key:1,class:"el-icon-circle-plus-outline",style:"font-size:".concat(this.fontSize,"px;vertical-align:middle;color:").concat(this.disabled?"#c9cdd4;cursor: not-allowed":"#606266;cursor:pointer",";"),onClick:this.add},null):o("div",{key:2},[t.map((function(u,a){var s,f=e.cacheRule[u],d=f.rule,h=f.options;return o(r("ElRow"),{align:"middle",type:"flex",key:u,style:"border-bottom:1px dashed #DCDFE6;margin-bottom:10px;"},{default:function(){return[o(r("ElCol"),{span:n?20:24},{default:function(){return[o(r("ElFormItem"),null,{default:function(){return[o(l,{key:u,"onUpdate:modelValue":function(t){return e.formData(u,t)},modelValue:e.field?c({},e.field,e._value(e.modelValue[a])):e.modelValue[a],"onEmit-event":function(t){for(var n=arguments.length,o=new Array(n>1?n-1:0),r=1;r<n;r++)o[r-1]=arguments[r];return e.emitEvent(t,o,a,u)},"onUpdate:api":function(t){return e.add$f(a,u,t)},rule:d,option:h,extendOption:!0},null)]}})]}}),n?o(r("ElCol"),{span:2,pull:1,push:1},(f=s=e.makeIcon(t.length,a,u),"function"==typeof f||"[object Object]"===Object.prototype.toString.call(f)&&!i(f)?s:{default:function(){return[s]}})):null];var f}})}))])}});export{h as default};
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @form-create/component-elm-group v3.1.0
|
|
3
|
+
* (c) 2018-2022 xaboy
|
|
4
|
+
* Github https://github.com/xaboy/form-create with group
|
|
5
|
+
* Released under the MIT License.
|
|
6
|
+
*/
|
|
1
7
|
(function (global, factory) {
|
|
2
8
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
|
3
9
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
|
@@ -178,9 +184,9 @@
|
|
|
178
184
|
onBeforeAdd: {
|
|
179
185
|
type: Function,
|
|
180
186
|
"default": function _default() {}
|
|
181
|
-
}
|
|
187
|
+
},
|
|
188
|
+
formCreateInject: Object
|
|
182
189
|
},
|
|
183
|
-
inject: ['formCreateInject'],
|
|
184
190
|
data: function data() {
|
|
185
191
|
return {
|
|
186
192
|
len: 0,
|
|
@@ -237,7 +243,8 @@
|
|
|
237
243
|
});
|
|
238
244
|
}
|
|
239
245
|
},
|
|
240
|
-
deep: true
|
|
246
|
+
deep: true,
|
|
247
|
+
flush: 'post'
|
|
241
248
|
}
|
|
242
249
|
},
|
|
243
250
|
methods: {
|
|
@@ -300,7 +307,7 @@
|
|
|
300
307
|
};
|
|
301
308
|
|
|
302
309
|
if (emit) {
|
|
303
|
-
|
|
310
|
+
vue.nextTick(function () {
|
|
304
311
|
return _this3.$emit('add', rule, Object.keys(_this3.cacheRule).length - 1);
|
|
305
312
|
});
|
|
306
313
|
}
|
|
@@ -310,7 +317,7 @@
|
|
|
310
317
|
|
|
311
318
|
this.cacheRule[key].$f = $f;
|
|
312
319
|
this.subForm();
|
|
313
|
-
|
|
320
|
+
vue.nextTick(function () {
|
|
314
321
|
if (_this4.syncDisabled) {
|
|
315
322
|
$f.disabled(_this4.disabled);
|
|
316
323
|
}
|
|
@@ -333,7 +340,7 @@
|
|
|
333
340
|
delete this.cacheValue[key];
|
|
334
341
|
|
|
335
342
|
if (emit) {
|
|
336
|
-
|
|
343
|
+
vue.nextTick(function () {
|
|
337
344
|
return _this6.$emit('remove', index);
|
|
338
345
|
});
|
|
339
346
|
}
|
|
@@ -357,24 +364,31 @@
|
|
|
357
364
|
this.input(this.modelValue);
|
|
358
365
|
},
|
|
359
366
|
addIcon: function addIcon(key) {
|
|
360
|
-
return vue.createVNode("
|
|
367
|
+
return vue.createVNode(vue.resolveComponent("el-icon"), {
|
|
361
368
|
"key": "a".concat(key),
|
|
362
|
-
"class": "el-icon-circle-plus-outline",
|
|
363
369
|
"style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
|
|
364
370
|
"onClick": this.add
|
|
365
|
-
},
|
|
371
|
+
}, {
|
|
372
|
+
"default": function _default() {
|
|
373
|
+
return [vue.createVNode(vue.resolveComponent("circle-plus"), null, null)];
|
|
374
|
+
}
|
|
375
|
+
});
|
|
366
376
|
},
|
|
367
377
|
delIcon: function delIcon(index, key) {
|
|
368
378
|
var _this7 = this;
|
|
369
379
|
|
|
370
|
-
return vue.createVNode("
|
|
380
|
+
return vue.createVNode(vue.resolveComponent("ElIcon"), {
|
|
371
381
|
"key": "d".concat(key),
|
|
372
382
|
"class": "el-icon-remove-outline",
|
|
373
383
|
"style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266', ";"),
|
|
374
384
|
"onClick": function onClick() {
|
|
375
385
|
return _this7.del(index, key);
|
|
376
386
|
}
|
|
377
|
-
},
|
|
387
|
+
}, {
|
|
388
|
+
"default": function _default() {
|
|
389
|
+
return [vue.createVNode(vue.resolveComponent("remove"), null, null)];
|
|
390
|
+
}
|
|
391
|
+
});
|
|
378
392
|
},
|
|
379
393
|
makeIcon: function makeIcon(total, index, key) {
|
|
380
394
|
var _this8 = this;
|
|
@@ -412,13 +426,13 @@
|
|
|
412
426
|
created: function created() {
|
|
413
427
|
var d = (this.expand || 0) - this.modelValue.length;
|
|
414
428
|
|
|
415
|
-
if (d > 0) {
|
|
416
|
-
this.expandRule(d);
|
|
417
|
-
}
|
|
418
|
-
|
|
419
429
|
for (var i = 0; i < this.modelValue.length; i++) {
|
|
420
430
|
this.addRule(i);
|
|
421
431
|
}
|
|
432
|
+
|
|
433
|
+
if (d > 0) {
|
|
434
|
+
this.expandRule(d);
|
|
435
|
+
}
|
|
422
436
|
},
|
|
423
437
|
render: function render() {
|
|
424
438
|
var _this9 = this;
|
|
@@ -430,12 +444,12 @@
|
|
|
430
444
|
vm: this,
|
|
431
445
|
add: this.add
|
|
432
446
|
}) : vue.createVNode("i", {
|
|
433
|
-
"key":
|
|
447
|
+
"key": 1,
|
|
434
448
|
"class": "el-icon-circle-plus-outline",
|
|
435
449
|
"style": "font-size:".concat(this.fontSize, "px;vertical-align:middle;color:").concat(this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer', ";"),
|
|
436
450
|
"onClick": this.add
|
|
437
451
|
}, null) : vue.createVNode("div", {
|
|
438
|
-
"key":
|
|
452
|
+
"key": 2
|
|
439
453
|
}, [keys.map(function (key, index) {
|
|
440
454
|
var _slot;
|
|
441
455
|
|
package/dist/index.min.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @form-create/component-elm-group v3.
|
|
3
|
-
* (c) 2018-
|
|
2
|
+
* @form-create/component-elm-group v3.1.0
|
|
3
|
+
* (c) 2018-2022 xaboy
|
|
4
4
|
* Github https://github.com/xaboy/form-create with group
|
|
5
5
|
* Released under the MIT License.
|
|
6
6
|
*/
|
|
7
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FcGroup={},e.Vue)}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function o(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){i(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e)||function(){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 u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var c={type:function(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"},Undef:function(e){return null==e},Element:function(e){return"object"===r(e)&&null!==e&&1===e.nodeType&&!c.Object(e)},trueArray:function(e){return Array.isArray(e)&&e.length>0}};["Date","Object","Function","String","Boolean","Array","Number"].forEach((function(e){c[e]=function(t){return c.type(t,e)}}));var a=t.defineComponent({name:"fcGroup",props:{field:String,rule:Array,expand:Number,options:Object,button:{type:Boolean,default:!0},max:{type:Number,default:0},min:{type:Number,default:0},modelValue:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},syncDisabled:{type:Boolean,default:!0},fontSize:{type:Number,default:28},onBeforeRemove:{type:Function,default:function(){}},onBeforeAdd:{type:Function,default:function(){}}
|
|
7
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FcGroup={},e.Vue)}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function o(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){i(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e)||function(){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 u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var c={type:function(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"},Undef:function(e){return null==e},Element:function(e){return"object"===r(e)&&null!==e&&1===e.nodeType&&!c.Object(e)},trueArray:function(e){return Array.isArray(e)&&e.length>0}};["Date","Object","Function","String","Boolean","Array","Number"].forEach((function(e){c[e]=function(t){return c.type(t,e)}}));var a=t.defineComponent({name:"fcGroup",props:{field:String,rule:Array,expand:Number,options:Object,button:{type:Boolean,default:!0},max:{type:Number,default:0},min:{type:Number,default:0},modelValue:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1},syncDisabled:{type:Boolean,default:!0},fontSize:{type:Number,default:28},onBeforeRemove:{type:Function,default:function(){}},onBeforeAdd:{type:Function,default:function(){}},formCreateInject:Object},data:function(){return{len:0,cacheRule:{},cacheValue:{},form:t.markRaw(this.formCreateInject.form.$form())}},emits:["update:modelValue","change","itemMounted","remove"],watch:{disabled:function(e){if(this.syncDisabled){var t=this.cacheRule;Object.keys(t).forEach((function(n){t[n].$f.disabled(e)}))}},expand:function(e){var t=e-this.modelValue.length;t>0&&this.expandRule(t)},modelValue:{handler:function(e){var t=this;e=e||[];var n=Object.keys(this.cacheRule),o=n.length,r=o-e.length;if(r<0){for(var i=r;i<0;i++)this.addRule(e.length+i);for(var l=0;l<o;l++)this.setValue(n[l],e[l])}else{if(r>0){for(var u=0;u<r;u++)this.removeRule(n[o-u-1]);this.subForm()}e.forEach((function(o,r){t.setValue(n[r],e[r])}))}},deep:!0,flush:"post"}},methods:{_value:function(e){return e&&(t=e,n=this.field,{}.hasOwnProperty.call(t,n))?e[this.field]:e;var t,n},cache:function(e,t){this.cacheValue[e]=JSON.stringify(t)},input:function(e){this.$emit("update:modelValue",e),this.$emit("change",e)},formData:function(e,t){var n=this,r=this.cacheRule,i=Object.keys(r);if(i.filter((function(e){return r[e].$f})).length===i.length){var l=i.map((function(r){var i=e===r?t:o({},n.cacheRule[r].$f.form),l=n.field?i[n.field]||null:i;return n.cache(r,l),l}));this.input(l)}},setValue:function(e,t){var n=this.field;n&&(t=i({},n,this._value(t))),this.cacheValue[e]!==JSON.stringify(n?t[n]:t)&&this.cache(e,t)},addRule:function(e,n){var r=this,i=this.formCreateInject.form.copyRules(this.rule||[]),l=this.options?o({},this.options):{submitBtn:!1,resetBtn:!1};this.cacheRule[++this.len]={rule:i,options:l},n&&t.nextTick((function(){return r.$emit("add",i,Object.keys(r.cacheRule).length-1)}))},add$f:function(e,n,o){var r=this;this.cacheRule[n].$f=o,this.subForm(),t.nextTick((function(){r.syncDisabled&&o.disabled(r.disabled),r.$emit("itemMounted",o,Object.keys(r.cacheRule).indexOf(n))}))},subForm:function(){var e=this;this.formCreateInject.subForm(Object.keys(this.cacheRule).map((function(t){return e.cacheRule[t].$f})))},removeRule:function(e,n){var o=this,r=Object.keys(this.cacheRule).indexOf(e);delete this.cacheRule[e],delete this.cacheValue[e],n&&t.nextTick((function(){return o.$emit("remove",r)}))},add:function(){this.disabled||!1===this.onBeforeAdd(this.modelValue)||(this.modelValue.push(this.field?null:{}),this.$emit("update:modelValue",this.modelValue))},del:function(e,t){this.disabled||!1===this.onBeforeRemove(this.modelValue,e)||(this.removeRule(t,!0),this.subForm(),this.modelValue.splice(e,1),this.input(this.modelValue))},addIcon:function(e){return t.createVNode(t.resolveComponent("el-icon"),{key:"a".concat(e),style:"font-size:".concat(this.fontSize,"px;cursor:").concat(this.disabled?"not-allowed;color:#c9cdd4":"pointer",";"),onClick:this.add},{default:function(){return[t.createVNode(t.resolveComponent("circle-plus"),null,null)]}})},delIcon:function(e,n){var o=this;return t.createVNode(t.resolveComponent("ElIcon"),{key:"d".concat(n),class:"el-icon-remove-outline",style:"font-size:".concat(this.fontSize,"px;cursor:").concat(this.disabled?"not-allowed;color:#c9cdd4":"pointer;color:#606266",";"),onClick:function(){return o.del(e,n)}},{default:function(){return[t.createVNode(t.resolveComponent("remove"),null,null)]}})},makeIcon:function(e,t,n){var o=this;return this.$slots.button?this.$slots.button({total:e,index:t,vm:this,key:n,del:function(){return o.del(t,n)},add:this.add}):0===t?[0!==this.max&&e>=this.max?null:this.addIcon(n),0===this.min||e>this.min?this.delIcon(t,n):null]:t>=this.min?this.delIcon(t,n):void 0},emitEvent:function(e,t,n,o){this.$emit.apply(this,[e].concat(l(t),[this.cacheRule[o].$f,n]))},expandRule:function(e){for(var t=0;t<e;t++)this.modelValue.push(this.field?null:{})}},created:function(){for(var e=(this.expand||0)-this.modelValue.length,t=0;t<this.modelValue.length;t++)this.addRule(t);e>0&&this.expandRule(e)},render:function(){var e=this,n=Object.keys(this.cacheRule),o=this.button,r=this.form;return 0===n.length?this.$slots.default?this.$slots.default({vm:this,add:this.add}):t.createVNode("i",{key:1,class:"el-icon-circle-plus-outline",style:"font-size:".concat(this.fontSize,"px;vertical-align:middle;color:").concat(this.disabled?"#c9cdd4;cursor: not-allowed":"#606266;cursor:pointer",";"),onClick:this.add},null):t.createVNode("div",{key:2},[n.map((function(l,u){var c,a=e.cacheRule[l],s=a.rule,f=a.options;return t.createVNode(t.resolveComponent("ElRow"),{align:"middle",type:"flex",key:l,style:"border-bottom:1px dashed #DCDFE6;margin-bottom:10px;"},{default:function(){return[t.createVNode(t.resolveComponent("ElCol"),{span:o?20:24},{default:function(){return[t.createVNode(t.resolveComponent("ElFormItem"),null,{default:function(){return[t.createVNode(r,{key:l,"onUpdate:modelValue":function(t){return e.formData(l,t)},modelValue:e.field?i({},e.field,e._value(e.modelValue[u])):e.modelValue[u],"onEmit-event":function(t){for(var n=arguments.length,o=new Array(n>1?n-1:0),r=1;r<n;r++)o[r-1]=arguments[r];return e.emitEvent(t,o,u,l)},"onUpdate:api":function(t){return e.add$f(u,l,t)},rule:s,option:f,extendOption:!0},null)]}})]}}),o?t.createVNode(t.resolveComponent("ElCol"),{span:2,pull:1,push:1},(a=c=e.makeIcon(n.length,u,l),"function"==typeof a||"[object Object]"===Object.prototype.toString.call(a)&&!t.isVNode(a)?c:{default:function(){return[c]}})):null];var a}})}))])}});e.default=a,Object.defineProperty(e,"__esModule",{value:!0})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@form-create/component-elm-group",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "@form-create/element-ui 内置组件",
|
|
5
5
|
"main": "./dist/index.min.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"author": "xaboy",
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@form-create/utils": "^3.
|
|
33
|
+
"@form-create/utils": "^3.1.0"
|
|
34
34
|
},
|
|
35
35
|
"bugs": {
|
|
36
36
|
"url": "https://github.com/xaboy/form-create/issues"
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"esm"
|
|
48
48
|
]
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "2e0a05f64e1205344da1bb4dadd497a76c491423"
|
|
51
51
|
}
|
package/src/component.jsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {hasProperty} from '@form-create/utils/lib/type';
|
|
2
|
-
import {defineComponent, markRaw} from 'vue';
|
|
2
|
+
import {defineComponent, markRaw, nextTick} from 'vue';
|
|
3
3
|
|
|
4
4
|
const NAME = 'fcGroup';
|
|
5
5
|
|
|
@@ -48,8 +48,8 @@ export default defineComponent({
|
|
|
48
48
|
default: () => {
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
|
+
formCreateInject: Object,
|
|
51
52
|
},
|
|
52
|
-
inject: ['formCreateInject'],
|
|
53
53
|
data() {
|
|
54
54
|
return {
|
|
55
55
|
len: 0,
|
|
@@ -98,6 +98,7 @@ export default defineComponent({
|
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
100
|
deep: true,
|
|
101
|
+
flush: 'post',
|
|
101
102
|
}
|
|
102
103
|
},
|
|
103
104
|
methods: {
|
|
@@ -143,13 +144,13 @@ export default defineComponent({
|
|
|
143
144
|
};
|
|
144
145
|
this.cacheRule[++this.len] = {rule, options};
|
|
145
146
|
if (emit) {
|
|
146
|
-
|
|
147
|
+
nextTick(() => this.$emit('add', rule, Object.keys(this.cacheRule).length - 1));
|
|
147
148
|
}
|
|
148
149
|
},
|
|
149
150
|
add$f(i, key, $f) {
|
|
150
151
|
this.cacheRule[key].$f = $f;
|
|
151
152
|
this.subForm();
|
|
152
|
-
|
|
153
|
+
nextTick(() => {
|
|
153
154
|
if (this.syncDisabled) {
|
|
154
155
|
$f.disabled(this.disabled);
|
|
155
156
|
}
|
|
@@ -164,7 +165,7 @@ export default defineComponent({
|
|
|
164
165
|
delete this.cacheRule[key];
|
|
165
166
|
delete this.cacheValue[key];
|
|
166
167
|
if (emit) {
|
|
167
|
-
|
|
168
|
+
nextTick(() => this.$emit('remove', index));
|
|
168
169
|
}
|
|
169
170
|
},
|
|
170
171
|
add() {
|
|
@@ -184,14 +185,18 @@ export default defineComponent({
|
|
|
184
185
|
this.input(this.modelValue);
|
|
185
186
|
},
|
|
186
187
|
addIcon(key) {
|
|
187
|
-
return <
|
|
188
|
+
return <el-icon key={`a${key}`}
|
|
188
189
|
style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer'};`}
|
|
189
|
-
onClick={this.add}
|
|
190
|
+
onClick={this.add}>
|
|
191
|
+
<circle-plus/>
|
|
192
|
+
</el-icon>
|
|
190
193
|
},
|
|
191
194
|
delIcon(index, key) {
|
|
192
|
-
return <
|
|
195
|
+
return <ElIcon key={`d${key}`} class="el-icon-remove-outline"
|
|
193
196
|
style={`font-size:${this.fontSize}px;cursor:${this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266'};`}
|
|
194
|
-
onClick={() => this.del(index, key)}
|
|
197
|
+
onClick={() => this.del(index, key)}>
|
|
198
|
+
<remove/>
|
|
199
|
+
</ElIcon>
|
|
195
200
|
},
|
|
196
201
|
makeIcon(total, index, key) {
|
|
197
202
|
if (this.$slots.button) {
|
|
@@ -222,12 +227,12 @@ export default defineComponent({
|
|
|
222
227
|
},
|
|
223
228
|
created() {
|
|
224
229
|
const d = (this.expand || 0) - this.modelValue.length;
|
|
225
|
-
if (d > 0) {
|
|
226
|
-
this.expandRule(d);
|
|
227
|
-
}
|
|
228
230
|
for (let i = 0; i < this.modelValue.length; i++) {
|
|
229
231
|
this.addRule(i);
|
|
230
232
|
}
|
|
233
|
+
if (d > 0) {
|
|
234
|
+
this.expandRule(d);
|
|
235
|
+
}
|
|
231
236
|
},
|
|
232
237
|
render() {
|
|
233
238
|
const keys = Object.keys(this.cacheRule);
|
|
@@ -237,10 +242,10 @@ export default defineComponent({
|
|
|
237
242
|
(this.$slots.default ? (this.$slots.default({
|
|
238
243
|
vm: this,
|
|
239
244
|
add: this.add
|
|
240
|
-
})) : <i key={
|
|
245
|
+
})) : <i key={1} class="el-icon-circle-plus-outline"
|
|
241
246
|
style={`font-size:${this.fontSize}px;vertical-align:middle;color:${this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer'};`}
|
|
242
247
|
onClick={this.add}/>) :
|
|
243
|
-
<div key={
|
|
248
|
+
<div key={2}>{keys.map((key, index) => {
|
|
244
249
|
const {rule, options} = this.cacheRule[key];
|
|
245
250
|
return <ElRow align="middle" type="flex" key={key}
|
|
246
251
|
style="border-bottom:1px dashed #DCDFE6;margin-bottom:10px;">
|