add
This commit is contained in:
parent
b667e64b4d
commit
2525fc22a0
|
|
@ -17,7 +17,7 @@
|
||||||
"axios": "^0.27.2",
|
"axios": "^0.27.2",
|
||||||
"css-color-function": "^1.3.3",
|
"css-color-function": "^1.3.3",
|
||||||
"echarts": "^5.3.3",
|
"echarts": "^5.3.3",
|
||||||
"element-plus": "2.2.27",
|
"element-plus": "^2.7.6",
|
||||||
"highlight.js": "^11.6.0",
|
"highlight.js": "^11.6.0",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
|
|
@ -3097,12 +3097,12 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/element-plus": {
|
"node_modules/element-plus": {
|
||||||
"version": "2.2.27",
|
"version": "2.7.6",
|
||||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.27.tgz",
|
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.6.tgz",
|
||||||
"integrity": "sha512-P04HDOZBYDdvlYuleuCZRULzAc5xJVOBfLDK9xWxVo0vyo8ntdaXS5sTU+/76vrNzuO3FhLn9kvrsbiJEVa1jg==",
|
"integrity": "sha512-36sw1K23hYjgeooR10U6CiCaCp2wvOqwoFurADZVlekeQ9v5U1FhJCFGEXO6i/kZBBMwsE1c9fxjLs9LENw2Rg==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ctrl/tinycolor": "^3.4.1",
|
"@ctrl/tinycolor": "^3.4.1",
|
||||||
"@element-plus/icons-vue": "^2.0.6",
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
"@floating-ui/dom": "^1.0.1",
|
"@floating-ui/dom": "^1.0.1",
|
||||||
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
|
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
|
||||||
"@types/lodash": "^4.14.182",
|
"@types/lodash": "^4.14.182",
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
"axios": "^0.27.2",
|
"axios": "^0.27.2",
|
||||||
"css-color-function": "^1.3.3",
|
"css-color-function": "^1.3.3",
|
||||||
"echarts": "^5.3.3",
|
"echarts": "^5.3.3",
|
||||||
"element-plus": "2.2.27",
|
"element-plus": "^2.7.6",
|
||||||
"highlight.js": "^11.6.0",
|
"highlight.js": "^11.6.0",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-elm-checkbox
|
||||||
|
|
||||||
|
@form-create/element-ui 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,228 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-checkbox v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with checkbox
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { defineComponent, toRef, ref, watch, createVNode, resolveComponent, mergeProps } from 'vue';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _toConsumableArray(arr) {
|
||||||
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayWithoutHoles(arr) {
|
||||||
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _iterableToArray(iter) {
|
||||||
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _unsupportedIterableToArray(o, minLen) {
|
||||||
|
if (!o) return;
|
||||||
|
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
||||||
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
||||||
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
||||||
|
if (n === "Map" || n === "Set") return Array.from(o);
|
||||||
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayLikeToArray(arr, len) {
|
||||||
|
if (len == null || len > arr.length) len = arr.length;
|
||||||
|
|
||||||
|
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
||||||
|
|
||||||
|
return arr2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _nonIterableSpread() {
|
||||||
|
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 getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcCheckbox';
|
||||||
|
var Checkbox = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
"default": function _default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: String,
|
||||||
|
input: Boolean,
|
||||||
|
inputValue: String
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup: function setup(props, _) {
|
||||||
|
var options = toRef(props.formCreateInject, 'options', []);
|
||||||
|
var value = toRef(props, 'modelValue');
|
||||||
|
var inputValue = toRef(props, 'inputValue', '');
|
||||||
|
var customValue = ref(inputValue.value);
|
||||||
|
var input = toRef(props, 'input', false);
|
||||||
|
|
||||||
|
var updateCustomValue = function updateCustomValue(n) {
|
||||||
|
var _value = _toConsumableArray(toArray(value.value));
|
||||||
|
|
||||||
|
var idx = _value.indexOf(customValue.value);
|
||||||
|
|
||||||
|
customValue.value = n;
|
||||||
|
|
||||||
|
if (idx > -1) {
|
||||||
|
_value.splice(idx, 1);
|
||||||
|
|
||||||
|
_value.push(n);
|
||||||
|
|
||||||
|
onInput(_value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(inputValue, function (n) {
|
||||||
|
if (!input.value) {
|
||||||
|
customValue.value = n;
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCustomValue(n);
|
||||||
|
});
|
||||||
|
|
||||||
|
var _options = function _options() {
|
||||||
|
return Array.isArray(options.value) ? options.value : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
var onInput = function onInput(n) {
|
||||||
|
_.emit('update:modelValue', n);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value: value,
|
||||||
|
onInput: onInput,
|
||||||
|
updateCustomValue: updateCustomValue,
|
||||||
|
makeInput: function makeInput(Type) {
|
||||||
|
if (!input.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return createVNode(Type, {
|
||||||
|
"value": customValue.value,
|
||||||
|
"label": customValue.value
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(resolveComponent("ElInput"), {
|
||||||
|
"modelValue": customValue.value,
|
||||||
|
"onUpdate:modelValue": updateCustomValue
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this$$slots$default,
|
||||||
|
_this$$slots,
|
||||||
|
_this = this;
|
||||||
|
|
||||||
|
var name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
|
||||||
|
var Type = resolveComponent(name);
|
||||||
|
return createVNode(resolveComponent("ElCheckboxGroup"), mergeProps(this.$attrs, {
|
||||||
|
"modelValue": this.value,
|
||||||
|
"onUpdate:modelValue": this.onInput,
|
||||||
|
"ref": "el"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [_this.options().map(function (opt, index) {
|
||||||
|
var props = _objectSpread2({}, opt);
|
||||||
|
|
||||||
|
var value = props.value;
|
||||||
|
var label = props.label;
|
||||||
|
delete props.value;
|
||||||
|
delete props.label;
|
||||||
|
return createVNode(Type, mergeProps(props, {
|
||||||
|
"label": value,
|
||||||
|
"value": value,
|
||||||
|
"key": name + index + '-' + value
|
||||||
|
}), {
|
||||||
|
"default": function _default() {
|
||||||
|
return [label || value || ''];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots), _this.makeInput(Type)];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default'])));
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Checkbox as default };
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-checkbox v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with checkbox
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import{defineComponent as e,toRef as t,ref as r,watch as n,createVNode as u,resolveComponent as o,mergeProps as l}from"vue";function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e){return function(e){if(Array.isArray(e))return p(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 p(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return p(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 p(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var s=e({name:"fcCheckbox",inheritAttrs:!1,props:{formCreateInject:Object,modelValue:{type:Array,default:function(){return[]}},type:String,input:Boolean,inputValue:String},emits:["update:modelValue","fc.el"],setup:function(e,l){var a=t(e.formCreateInject,"options",[]),i=t(e,"modelValue"),c=t(e,"inputValue",""),p=r(c.value),s=t(e,"input",!1),d=function(e){var t=f(function(e){return Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e]}(i.value)),r=t.indexOf(p.value);p.value=e,r>-1&&(t.splice(r,1),t.push(e),b(t))};n(c,(function(e){s.value?d(e):p.value=e}));var b=function(e){l.emit("update:modelValue",e)};return{options:function(){return Array.isArray(a.value)?a.value:[]},value:i,onInput:b,updateCustomValue:d,makeInput:function(e){if(s.value)return u(e,{value:p.value,label:p.value},{default:function(){return[u(o("ElInput"),{modelValue:p.value,"onUpdate:modelValue":d},null)]}})}}},render:function(){var e,t,r,n,a=this,c="button"===this.type?"ElCheckboxButton":"ElCheckbox",f=o(c);return u(o("ElCheckboxGroup"),l(this.$attrs,{modelValue:this.value,"onUpdate:modelValue":this.onInput,ref:"el"}),i({default:function(){return[a.options().map((function(e,t){var r=i({},e),n=r.value,o=r.label;return delete r.value,delete r.label,u(f,l(r,{label:n,value:n,key:c+t+"-"+n}),{default:function(){return[o||n||""]}})})),null===(e=(t=a.$slots).default)||void 0===e?void 0:e.call(t),a.makeInput(f)]}},(r=this.$slots,n=["default"],Object.keys(r).reduce((function(e,t){return n&&-1!==n.indexOf(t)||e.push(r[t]),e}),[]))))},mounted:function(){this.$emit("fc.el",this.$refs.el)}});export{s as default};
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-checkbox v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with checkbox
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcCheckbox = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _toConsumableArray(arr) {
|
||||||
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayWithoutHoles(arr) {
|
||||||
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _iterableToArray(iter) {
|
||||||
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _unsupportedIterableToArray(o, minLen) {
|
||||||
|
if (!o) return;
|
||||||
|
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
||||||
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
||||||
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
||||||
|
if (n === "Map" || n === "Set") return Array.from(o);
|
||||||
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayLikeToArray(arr, len) {
|
||||||
|
if (len == null || len > arr.length) len = arr.length;
|
||||||
|
|
||||||
|
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
||||||
|
|
||||||
|
return arr2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _nonIterableSpread() {
|
||||||
|
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 getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcCheckbox';
|
||||||
|
var Checkbox = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
"default": function _default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: String,
|
||||||
|
input: Boolean,
|
||||||
|
inputValue: String
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup: function setup(props, _) {
|
||||||
|
var options = vue.toRef(props.formCreateInject, 'options', []);
|
||||||
|
var value = vue.toRef(props, 'modelValue');
|
||||||
|
var inputValue = vue.toRef(props, 'inputValue', '');
|
||||||
|
var customValue = vue.ref(inputValue.value);
|
||||||
|
var input = vue.toRef(props, 'input', false);
|
||||||
|
|
||||||
|
var updateCustomValue = function updateCustomValue(n) {
|
||||||
|
var _value = _toConsumableArray(toArray(value.value));
|
||||||
|
|
||||||
|
var idx = _value.indexOf(customValue.value);
|
||||||
|
|
||||||
|
customValue.value = n;
|
||||||
|
|
||||||
|
if (idx > -1) {
|
||||||
|
_value.splice(idx, 1);
|
||||||
|
|
||||||
|
_value.push(n);
|
||||||
|
|
||||||
|
onInput(_value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
vue.watch(inputValue, function (n) {
|
||||||
|
if (!input.value) {
|
||||||
|
customValue.value = n;
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCustomValue(n);
|
||||||
|
});
|
||||||
|
|
||||||
|
var _options = function _options() {
|
||||||
|
return Array.isArray(options.value) ? options.value : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
var onInput = function onInput(n) {
|
||||||
|
_.emit('update:modelValue', n);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value: value,
|
||||||
|
onInput: onInput,
|
||||||
|
updateCustomValue: updateCustomValue,
|
||||||
|
makeInput: function makeInput(Type) {
|
||||||
|
if (!input.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return vue.createVNode(Type, {
|
||||||
|
"value": customValue.value,
|
||||||
|
"label": customValue.value
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(vue.resolveComponent("ElInput"), {
|
||||||
|
"modelValue": customValue.value,
|
||||||
|
"onUpdate:modelValue": updateCustomValue
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this$$slots$default,
|
||||||
|
_this$$slots,
|
||||||
|
_this = this;
|
||||||
|
|
||||||
|
var name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
|
||||||
|
var Type = vue.resolveComponent(name);
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElCheckboxGroup"), vue.mergeProps(this.$attrs, {
|
||||||
|
"modelValue": this.value,
|
||||||
|
"onUpdate:modelValue": this.onInput,
|
||||||
|
"ref": "el"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [_this.options().map(function (opt, index) {
|
||||||
|
var props = _objectSpread2({}, opt);
|
||||||
|
|
||||||
|
var value = props.value;
|
||||||
|
var label = props.label;
|
||||||
|
delete props.value;
|
||||||
|
delete props.label;
|
||||||
|
return vue.createVNode(Type, vue.mergeProps(props, {
|
||||||
|
"label": value,
|
||||||
|
"value": value,
|
||||||
|
"key": name + index + '-' + value
|
||||||
|
}), {
|
||||||
|
"default": function _default() {
|
||||||
|
return [label || value || ''];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots), _this.makeInput(Type)];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default'])));
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Checkbox;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-checkbox v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with checkbox
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
!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).FcCheckbox={},e.Vue)}(this,(function(e,t){"use strict";function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function n(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){return function(e){if(Array.isArray(e))return l(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 l(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(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 l(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var a=t.defineComponent({name:"fcCheckbox",inheritAttrs:!1,props:{formCreateInject:Object,modelValue:{type:Array,default:function(){return[]}},type:String,input:Boolean,inputValue:String},emits:["update:modelValue","fc.el"],setup:function(e,r){var n=t.toRef(e.formCreateInject,"options",[]),o=t.toRef(e,"modelValue"),l=t.toRef(e,"inputValue",""),a=t.ref(l.value),i=t.toRef(e,"input",!1),f=function(e){var t=u(function(e){return Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e]}(o.value)),r=t.indexOf(a.value);a.value=e,r>-1&&(t.splice(r,1),t.push(e),c(t))};t.watch(l,(function(e){i.value?f(e):a.value=e}));var c=function(e){r.emit("update:modelValue",e)};return{options:function(){return Array.isArray(n.value)?n.value:[]},value:o,onInput:c,updateCustomValue:f,makeInput:function(e){if(i.value)return t.createVNode(e,{value:a.value,label:a.value},{default:function(){return[t.createVNode(t.resolveComponent("ElInput"),{modelValue:a.value,"onUpdate:modelValue":f},null)]}})}}},render:function(){var e,r,o,u,l=this,a="button"===this.type?"ElCheckboxButton":"ElCheckbox",i=t.resolveComponent(a);return t.createVNode(t.resolveComponent("ElCheckboxGroup"),t.mergeProps(this.$attrs,{modelValue:this.value,"onUpdate:modelValue":this.onInput,ref:"el"}),n({default:function(){return[l.options().map((function(e,r){var o=n({},e),u=o.value,l=o.label;return delete o.value,delete o.label,t.createVNode(i,t.mergeProps(o,{label:u,value:u,key:a+r+"-"+u}),{default:function(){return[l||u||""]}})})),null===(e=(r=l.$slots).default)||void 0===e?void 0:e.call(r),l.makeInput(i)]}},(o=this.$slots,u=["default"],Object.keys(o).reduce((function(e,t){return u&&-1!==u.indexOf(t)||e.push(o[t]),e}),[]))))},mounted:function(){this.$emit("fc.el",this.$refs.el)}});e.default=a,Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-elm-checkbox",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "@form-create/element-ui 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"element-ui"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-elm-checkbox",
|
||||||
|
"exportName": "FcCheckbox",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
import {defineComponent, ref, resolveComponent, toRef, watch} from 'vue';
|
||||||
|
import getSlot from '@form-create/utils/lib/slot';
|
||||||
|
import toArray from '@form-create/utils/lib/toarray';
|
||||||
|
|
||||||
|
const NAME = 'fcCheckbox';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
type: String,
|
||||||
|
input: Boolean,
|
||||||
|
inputValue: String,
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup(props, _) {
|
||||||
|
const options = toRef(props.formCreateInject, 'options', []);
|
||||||
|
const value = toRef(props, 'modelValue');
|
||||||
|
const inputValue = toRef(props, 'inputValue', '');
|
||||||
|
const customValue = ref(inputValue.value);
|
||||||
|
const input = toRef(props, 'input', false);
|
||||||
|
const updateCustomValue = (n) => {
|
||||||
|
const _value = [...toArray(value.value)];
|
||||||
|
const idx = _value.indexOf(customValue.value);
|
||||||
|
customValue.value = n;
|
||||||
|
if (idx > -1) {
|
||||||
|
_value.splice(idx, 1);
|
||||||
|
_value.push(n);
|
||||||
|
onInput(_value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(inputValue, (n) => {
|
||||||
|
if (!input.value) {
|
||||||
|
customValue.value = n;
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
updateCustomValue(n);
|
||||||
|
})
|
||||||
|
const _options = () => {
|
||||||
|
return Array.isArray(options.value) ? options.value : []
|
||||||
|
}
|
||||||
|
const onInput = (n) => {
|
||||||
|
_.emit('update:modelValue', n);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value,
|
||||||
|
onInput,
|
||||||
|
updateCustomValue,
|
||||||
|
makeInput(Type) {
|
||||||
|
if (!input.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return <Type value={customValue.value} label={customValue.value}>
|
||||||
|
<ElInput modelValue={customValue.value}
|
||||||
|
onUpdate:modelValue={updateCustomValue}></ElInput>
|
||||||
|
</Type>
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
|
||||||
|
const Type = resolveComponent(name);
|
||||||
|
return <ElCheckboxGroup {...this.$attrs} modelValue={this.value} v-slots={getSlot(this.$slots, ['default'])}
|
||||||
|
onUpdate:modelValue={this.onInput} ref="el">{this.options().map((opt, index) => {
|
||||||
|
const props = {...opt};
|
||||||
|
const value = props.value;
|
||||||
|
const label = props.label;
|
||||||
|
delete props.value;
|
||||||
|
delete props.label;
|
||||||
|
return <Type {...props} label={value} value={value}
|
||||||
|
key={name + index + '-' + value}>{label || value || ''}</Type>
|
||||||
|
})}{this.$slots.default?.()}{this.makeInput(Type)}</ElCheckboxGroup>
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Checkbox from './component';
|
||||||
|
|
||||||
|
export default Checkbox;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-elm-frame
|
||||||
|
|
||||||
|
@form-create/element-ui 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,742 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-frame v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with frame
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { openBlock, createElementBlock, createElementVNode, defineComponent, createVNode, resolveComponent, mergeProps, isVNode, nextTick } from 'vue';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://github.com/developit/mitt
|
||||||
|
function Mitt(all) {
|
||||||
|
all = all || new Map();
|
||||||
|
var mitt = {
|
||||||
|
$on: function $on(type, handler) {
|
||||||
|
var handlers = all.get(type);
|
||||||
|
var added = handlers && handlers.push(handler);
|
||||||
|
|
||||||
|
if (!added) {
|
||||||
|
all.set(type, [handler]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
$once: function $once(type, handler) {
|
||||||
|
handler._once = true;
|
||||||
|
mitt.$on(type, handler);
|
||||||
|
},
|
||||||
|
$off: function $off(type, handler) {
|
||||||
|
var handlers = all.get(type);
|
||||||
|
|
||||||
|
if (handlers) {
|
||||||
|
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
$emit: function $emit(type) {
|
||||||
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||||
|
args[_key - 1] = arguments[_key];
|
||||||
|
}
|
||||||
|
|
||||||
|
(all.get(type) || []).slice().map(function (handler) {
|
||||||
|
if (handler._once) {
|
||||||
|
mitt.$off(type, handler);
|
||||||
|
delete handler._once;
|
||||||
|
}
|
||||||
|
|
||||||
|
handler.apply(void 0, args);
|
||||||
|
});
|
||||||
|
(all.get('*') || []).slice().map(function (handler) {
|
||||||
|
handler(type, args);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return mitt;
|
||||||
|
}
|
||||||
|
|
||||||
|
function styleInject(css, ref) {
|
||||||
|
if ( ref === void 0 ) ref = {};
|
||||||
|
var insertAt = ref.insertAt;
|
||||||
|
|
||||||
|
if (!css || typeof document === 'undefined') { return; }
|
||||||
|
|
||||||
|
var head = document.head || document.getElementsByTagName('head')[0];
|
||||||
|
var style = document.createElement('style');
|
||||||
|
style.type = 'text/css';
|
||||||
|
|
||||||
|
if (insertAt === 'top') {
|
||||||
|
if (head.firstChild) {
|
||||||
|
head.insertBefore(style, head.firstChild);
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (style.styleSheet) {
|
||||||
|
style.styleSheet.cssText = css;
|
||||||
|
} else {
|
||||||
|
style.appendChild(document.createTextNode(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var css_248z = "._fc-frame ._fc-files img{display:inline-block;height:100%;vertical-align:top;width:100%}._fc-frame ._fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame._fc-disabled ._fc-upload-btn,._fc-frame._fc-disabled .el-button{color:#999;cursor:not-allowed!important}._fc-frame ._fc-upload-cover{background:rgba(0,0,0,.6);bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-frame ._fc-upload-cover i{color:#fff;cursor:pointer;font-size:20px;margin:0 2px}._fc-frame ._fc-files:hover ._fc-upload-cover{opacity:1}._fc-frame .el-upload{display:block}._fc-frame ._fc-upload-icon{cursor:pointer}._fc-files,._fc-frame ._fc-upload-btn{background:#fff;border:1px solid #c0ccda;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:58px;line-height:58px;margin-right:4px;overflow:hidden;position:relative;text-align:center;width:58px}";
|
||||||
|
styleInject(css_248z);
|
||||||
|
|
||||||
|
var script$4 = {
|
||||||
|
name: 'IconCircleClose'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$4 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$4 = /*#__PURE__*/createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$4 = /*#__PURE__*/createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_4 = [_hoisted_2$4, _hoisted_3$4];
|
||||||
|
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_4);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$4.render = render$4;
|
||||||
|
|
||||||
|
var script$3 = {
|
||||||
|
name: 'IconDocument'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$3 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$3 = /*#__PURE__*/createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 01-32 32H160a32 32 0 01-32-32V96a32 32 0 0132-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$3 = [_hoisted_2$3];
|
||||||
|
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$3.render = render$3;
|
||||||
|
|
||||||
|
var script$2 = {
|
||||||
|
name: 'IconDelete'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$2 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$2 = /*#__PURE__*/createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M160 256H96a32 32 0 010-64h256V95.936a32 32 0 0132-32h256a32 32 0 0132 32V192h256a32 32 0 110 64h-64v672a32 32 0 01-32 32H192a32 32 0 01-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32zm192 0a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$2 = [_hoisted_2$2];
|
||||||
|
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$2.render = render$2;
|
||||||
|
|
||||||
|
var script$1 = {
|
||||||
|
name: 'IconView'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$1 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$1 = /*#__PURE__*/createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$1 = [_hoisted_2$1];
|
||||||
|
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$1.render = render$1;
|
||||||
|
|
||||||
|
var script = {
|
||||||
|
name: 'IconFolderOpened'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 01216.96 384H832zm-24.96 512H96a32 32 0 01-32-32V160a32 32 0 0132-32h287.872l128.384 128H864a32 32 0 0132 32v96h23.04a32 32 0 0131.04 39.744l-112 448A32 32 0 01807.04 896z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3 = [_hoisted_2];
|
||||||
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
|
||||||
|
}
|
||||||
|
|
||||||
|
script.render = render;
|
||||||
|
|
||||||
|
function _isSlot(s) {
|
||||||
|
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcFrame';
|
||||||
|
var Frame = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
"default": 'input'
|
||||||
|
},
|
||||||
|
field: String,
|
||||||
|
helper: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
src: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
"default": 'IconFolderOpened'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
"default": '500px'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
"default": '370px'
|
||||||
|
},
|
||||||
|
maxLength: {
|
||||||
|
type: Number,
|
||||||
|
"default": 0
|
||||||
|
},
|
||||||
|
okBtnText: {
|
||||||
|
type: String,
|
||||||
|
"default": '确定'
|
||||||
|
},
|
||||||
|
closeBtnText: {
|
||||||
|
type: String,
|
||||||
|
"default": '关闭'
|
||||||
|
},
|
||||||
|
modalTitle: String,
|
||||||
|
handleIcon: {
|
||||||
|
type: [String, Boolean],
|
||||||
|
"default": undefined
|
||||||
|
},
|
||||||
|
title: String,
|
||||||
|
allowRemove: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
onOpen: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onOk: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onCancel: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onLoad: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onBeforeRemove: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onRemove: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onHandle: Function,
|
||||||
|
modal: {
|
||||||
|
type: Object,
|
||||||
|
"default": function _default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
srcKey: [String, Number],
|
||||||
|
modelValue: [Array, String, Number, Object],
|
||||||
|
previewMask: undefined,
|
||||||
|
footer: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
reload: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
closeBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
okBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
formCreateInject: Object
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change'],
|
||||||
|
components: {
|
||||||
|
IconFolderOpened: script,
|
||||||
|
IconView: script$1
|
||||||
|
},
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
fileList: toArray(this.modelValue),
|
||||||
|
previewVisible: false,
|
||||||
|
frameVisible: false,
|
||||||
|
previewImage: '',
|
||||||
|
bus: new Mitt()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue(n) {
|
||||||
|
this.fileList = toArray(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close: function close() {
|
||||||
|
this.closeModel(true);
|
||||||
|
},
|
||||||
|
closeModel: function closeModel(close) {
|
||||||
|
this.bus.$emit(close ? '$close' : '$ok');
|
||||||
|
|
||||||
|
if (this.reload) {
|
||||||
|
this.bus.$off('$ok');
|
||||||
|
this.bus.$off('$close');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.frameVisible = false;
|
||||||
|
},
|
||||||
|
handleCancel: function handleCancel() {
|
||||||
|
this.previewVisible = false;
|
||||||
|
},
|
||||||
|
showModel: function showModel() {
|
||||||
|
if (this.disabled || false === this.onOpen()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.frameVisible = true;
|
||||||
|
},
|
||||||
|
input: function input() {
|
||||||
|
var n = this.fileList;
|
||||||
|
var val = this.maxLength === 1 ? n[0] || '' : n;
|
||||||
|
this.$emit('update:modelValue', val);
|
||||||
|
this.$emit('change', val);
|
||||||
|
},
|
||||||
|
makeInput: function makeInput() {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
return createVNode(resolveComponent("ElInput"), mergeProps({
|
||||||
|
type: 'text',
|
||||||
|
modelValue: this.fileList.map(function (v) {
|
||||||
|
return _this.getSrc(v);
|
||||||
|
}).toString(),
|
||||||
|
readonly: true
|
||||||
|
}, {
|
||||||
|
"key": 1
|
||||||
|
}), {
|
||||||
|
append: function append() {
|
||||||
|
return createVNode(resolveComponent("ElButton"), {
|
||||||
|
"icon": resolveComponent(_this.icon),
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this.showModel();
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
suffix: function suffix() {
|
||||||
|
return _this.fileList.length && !_this.disabled ? createVNode(resolveComponent("ElIcon"), {
|
||||||
|
"class": "el-input__icon _fc-upload-icon",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
_this.fileList = [];
|
||||||
|
|
||||||
|
_this.input();
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(script$4, null, null)];
|
||||||
|
}
|
||||||
|
}) : null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
makeGroup: function makeGroup(children) {
|
||||||
|
if (!this.maxLength || this.fileList.length < this.maxLength) {
|
||||||
|
children.push(this.makeBtn());
|
||||||
|
}
|
||||||
|
|
||||||
|
return createVNode("div", {
|
||||||
|
"key": 2
|
||||||
|
}, [children]);
|
||||||
|
},
|
||||||
|
makeItem: function makeItem(index, children) {
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-files",
|
||||||
|
"key": '3' + index
|
||||||
|
}, [children]);
|
||||||
|
},
|
||||||
|
valid: function valid(f) {
|
||||||
|
var field = this.formCreateInject.field || this.field;
|
||||||
|
|
||||||
|
if (field && f !== field) {
|
||||||
|
throw new Error('[frame]无效的字段值');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeIcons: function makeIcons(val, index) {
|
||||||
|
if (this.handleIcon !== false || this.allowRemove === true) {
|
||||||
|
var icons = [];
|
||||||
|
|
||||||
|
if (this.type !== 'file' && this.handleIcon !== false || this.type === 'file' && this.handleIcon) {
|
||||||
|
icons.push(this.makeHandleIcon(val, index));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.allowRemove) {
|
||||||
|
icons.push(this.makeRemoveIcon(val, index));
|
||||||
|
}
|
||||||
|
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-upload-cover",
|
||||||
|
"key": 4
|
||||||
|
}, [icons]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeHandleIcon: function makeHandleIcon(val, index) {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
var Type = resolveComponent(this.handleIcon === true || this.handleIcon === undefined ? 'icon-view' : this.handleIcon);
|
||||||
|
return createVNode(resolveComponent("ElIcon"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this2.handleClick(val);
|
||||||
|
},
|
||||||
|
"key": '5' + index
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(Type, null, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
makeRemoveIcon: function makeRemoveIcon(val, index) {
|
||||||
|
var _this3 = this;
|
||||||
|
|
||||||
|
return createVNode(resolveComponent("ElIcon"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this3.handleRemove(val);
|
||||||
|
},
|
||||||
|
"key": '6' + index
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(script$2, null, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
makeFiles: function makeFiles() {
|
||||||
|
var _this4 = this;
|
||||||
|
|
||||||
|
return this.makeGroup(this.fileList.map(function (src, index) {
|
||||||
|
return _this4.makeItem(index, [createVNode(resolveComponent("ElIcon"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this4.handleClick(src);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(script$3, null, null)];
|
||||||
|
}
|
||||||
|
}), _this4.makeIcons(src, index)]);
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
makeImages: function makeImages() {
|
||||||
|
var _this5 = this;
|
||||||
|
|
||||||
|
return this.makeGroup(this.fileList.map(function (src, index) {
|
||||||
|
return _this5.makeItem(index, [createVNode("img", {
|
||||||
|
"src": _this5.getSrc(src)
|
||||||
|
}, null), _this5.makeIcons(src, index)]);
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
makeBtn: function makeBtn() {
|
||||||
|
var _this6 = this;
|
||||||
|
|
||||||
|
var Type = resolveComponent(this.icon);
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-upload-btn",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this6.showModel();
|
||||||
|
},
|
||||||
|
"key": 7
|
||||||
|
}, [createVNode(resolveComponent("ElIcon"), null, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(Type, null, null)];
|
||||||
|
}
|
||||||
|
})]);
|
||||||
|
},
|
||||||
|
handleClick: function handleClick(src) {
|
||||||
|
if (this.onHandle) {
|
||||||
|
return this.onHandle(src);
|
||||||
|
} else {
|
||||||
|
this.previewImage = this.getSrc(src);
|
||||||
|
this.previewVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRemove: function handleRemove(src) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (false !== this.onBeforeRemove(src)) {
|
||||||
|
this.fileList.splice(this.fileList.indexOf(src), 1);
|
||||||
|
this.input();
|
||||||
|
this.onRemove(src);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSrc: function getSrc(src) {
|
||||||
|
return !this.srcKey ? src : src[this.srcKey];
|
||||||
|
},
|
||||||
|
frameLoad: function frameLoad(iframe) {
|
||||||
|
var _this7 = this;
|
||||||
|
|
||||||
|
this.onLoad(iframe);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (this.helper === true) {
|
||||||
|
iframe['form_create_helper'] = {
|
||||||
|
api: this.formCreateInject.api,
|
||||||
|
close: function close(field) {
|
||||||
|
_this7.valid(field);
|
||||||
|
|
||||||
|
_this7.closeModel();
|
||||||
|
},
|
||||||
|
set: function set(field, value) {
|
||||||
|
_this7.valid(field);
|
||||||
|
|
||||||
|
!_this7.disabled && _this7.$emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
get: function get(field) {
|
||||||
|
_this7.valid(field);
|
||||||
|
|
||||||
|
return _this7.modelValue;
|
||||||
|
},
|
||||||
|
onOk: function onOk(fn) {
|
||||||
|
return _this7.bus.$on('$ok', fn);
|
||||||
|
},
|
||||||
|
onClose: function onClose(fn) {
|
||||||
|
return _this7.bus.$on('$close', fn);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeFooter: function makeFooter() {
|
||||||
|
var _this8 = this;
|
||||||
|
|
||||||
|
var _this$$props = this.$props,
|
||||||
|
okBtnText = _this$$props.okBtnText,
|
||||||
|
closeBtnText = _this$$props.closeBtnText,
|
||||||
|
closeBtn = _this$$props.closeBtn,
|
||||||
|
okBtn = _this$$props.okBtn,
|
||||||
|
footer = _this$$props.footer;
|
||||||
|
|
||||||
|
if (!footer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return createVNode("div", null, [closeBtn ? createVNode(resolveComponent("ElButton"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this8.onCancel() !== false && (_this8.frameVisible = false);
|
||||||
|
}
|
||||||
|
}, _isSlot(closeBtnText) ? closeBtnText : {
|
||||||
|
"default": function _default() {
|
||||||
|
return [closeBtnText];
|
||||||
|
}
|
||||||
|
}) : null, okBtn ? createVNode(resolveComponent("ElButton"), {
|
||||||
|
"type": "primary",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this8.onOk() !== false && _this8.closeModel();
|
||||||
|
}
|
||||||
|
}, _isSlot(okBtnText) ? okBtnText : {
|
||||||
|
"default": function _default() {
|
||||||
|
return [okBtnText];
|
||||||
|
}
|
||||||
|
}) : null]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this9 = this;
|
||||||
|
|
||||||
|
var type = this.type;
|
||||||
|
var node;
|
||||||
|
|
||||||
|
if (type === 'input') {
|
||||||
|
node = this.makeInput();
|
||||||
|
} else if (type === 'image') {
|
||||||
|
node = this.makeImages();
|
||||||
|
} else {
|
||||||
|
node = this.makeFiles();
|
||||||
|
}
|
||||||
|
|
||||||
|
var _this$$props2 = this.$props,
|
||||||
|
_this$$props2$width = _this$$props2.width,
|
||||||
|
width = _this$$props2$width === void 0 ? '30%' : _this$$props2$width,
|
||||||
|
height = _this$$props2.height,
|
||||||
|
src = _this$$props2.src,
|
||||||
|
title = _this$$props2.title,
|
||||||
|
modalTitle = _this$$props2.modalTitle;
|
||||||
|
nextTick(function () {
|
||||||
|
if (_this9.$refs.frame) {
|
||||||
|
_this9.frameLoad(_this9.$refs.frame.contentWindow || {});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": {
|
||||||
|
'_fc-frame': true,
|
||||||
|
'_fc-disabled': this.disabled
|
||||||
|
}
|
||||||
|
}, [node, createVNode(resolveComponent("ElDialog"), {
|
||||||
|
"appendToBody": true,
|
||||||
|
"modal": this.previewMask,
|
||||||
|
"title": modalTitle,
|
||||||
|
"modelValue": this.previewVisible,
|
||||||
|
"onClose": this.handleCancel
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode("img", {
|
||||||
|
"style": "width: 100%",
|
||||||
|
"src": _this9.previewImage
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
}), createVNode(resolveComponent("ElDialog"), mergeProps({
|
||||||
|
"appendToBody": true
|
||||||
|
}, _objectSpread2({
|
||||||
|
width: width,
|
||||||
|
title: title
|
||||||
|
}, this.modal), {
|
||||||
|
"modelValue": this.frameVisible,
|
||||||
|
"onClose": function onClose() {
|
||||||
|
return _this9.closeModel(true);
|
||||||
|
}
|
||||||
|
}), {
|
||||||
|
"default": function _default() {
|
||||||
|
return [_this9.frameVisible || !_this9.reload ? createVNode("iframe", {
|
||||||
|
"ref": "frame",
|
||||||
|
"src": src,
|
||||||
|
"frameBorder": "0",
|
||||||
|
"style": {
|
||||||
|
height: height,
|
||||||
|
'border': '0 none',
|
||||||
|
'width': '100%'
|
||||||
|
}
|
||||||
|
}, null) : null];
|
||||||
|
},
|
||||||
|
footer: function footer() {
|
||||||
|
return _this9.makeFooter();
|
||||||
|
}
|
||||||
|
})]);
|
||||||
|
},
|
||||||
|
beforeMount: function beforeMount() {
|
||||||
|
var _this$formCreateInjec = this.formCreateInject,
|
||||||
|
name = _this$formCreateInjec.name,
|
||||||
|
field = _this$formCreateInjec.field,
|
||||||
|
api = _this$formCreateInjec.api;
|
||||||
|
name && api.on('fc:closeModal:' + name, this.close);
|
||||||
|
field && api.on('fc:closeModal:' + field, this.close);
|
||||||
|
},
|
||||||
|
beforeUnmount: function beforeUnmount() {
|
||||||
|
var _this$formCreateInjec2 = this.formCreateInject,
|
||||||
|
name = _this$formCreateInjec2.name,
|
||||||
|
field = _this$formCreateInjec2.field,
|
||||||
|
api = _this$formCreateInjec2.api;
|
||||||
|
name && api.off('fc:closeModal:' + name, this.close);
|
||||||
|
field && api.off('fc:closeModal:' + field, this.close);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Frame as default };
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,750 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-frame v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with frame
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcFrame = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://github.com/developit/mitt
|
||||||
|
function Mitt(all) {
|
||||||
|
all = all || new Map();
|
||||||
|
var mitt = {
|
||||||
|
$on: function $on(type, handler) {
|
||||||
|
var handlers = all.get(type);
|
||||||
|
var added = handlers && handlers.push(handler);
|
||||||
|
|
||||||
|
if (!added) {
|
||||||
|
all.set(type, [handler]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
$once: function $once(type, handler) {
|
||||||
|
handler._once = true;
|
||||||
|
mitt.$on(type, handler);
|
||||||
|
},
|
||||||
|
$off: function $off(type, handler) {
|
||||||
|
var handlers = all.get(type);
|
||||||
|
|
||||||
|
if (handlers) {
|
||||||
|
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
$emit: function $emit(type) {
|
||||||
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||||
|
args[_key - 1] = arguments[_key];
|
||||||
|
}
|
||||||
|
|
||||||
|
(all.get(type) || []).slice().map(function (handler) {
|
||||||
|
if (handler._once) {
|
||||||
|
mitt.$off(type, handler);
|
||||||
|
delete handler._once;
|
||||||
|
}
|
||||||
|
|
||||||
|
handler.apply(void 0, args);
|
||||||
|
});
|
||||||
|
(all.get('*') || []).slice().map(function (handler) {
|
||||||
|
handler(type, args);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return mitt;
|
||||||
|
}
|
||||||
|
|
||||||
|
function styleInject(css, ref) {
|
||||||
|
if ( ref === void 0 ) ref = {};
|
||||||
|
var insertAt = ref.insertAt;
|
||||||
|
|
||||||
|
if (!css || typeof document === 'undefined') { return; }
|
||||||
|
|
||||||
|
var head = document.head || document.getElementsByTagName('head')[0];
|
||||||
|
var style = document.createElement('style');
|
||||||
|
style.type = 'text/css';
|
||||||
|
|
||||||
|
if (insertAt === 'top') {
|
||||||
|
if (head.firstChild) {
|
||||||
|
head.insertBefore(style, head.firstChild);
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (style.styleSheet) {
|
||||||
|
style.styleSheet.cssText = css;
|
||||||
|
} else {
|
||||||
|
style.appendChild(document.createTextNode(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var css_248z = "._fc-frame ._fc-files img{display:inline-block;height:100%;vertical-align:top;width:100%}._fc-frame ._fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame._fc-disabled ._fc-upload-btn,._fc-frame._fc-disabled .el-button{color:#999;cursor:not-allowed!important}._fc-frame ._fc-upload-cover{background:rgba(0,0,0,.6);bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-frame ._fc-upload-cover i{color:#fff;cursor:pointer;font-size:20px;margin:0 2px}._fc-frame ._fc-files:hover ._fc-upload-cover{opacity:1}._fc-frame .el-upload{display:block}._fc-frame ._fc-upload-icon{cursor:pointer}._fc-files,._fc-frame ._fc-upload-btn{background:#fff;border:1px solid #c0ccda;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:58px;line-height:58px;margin-right:4px;overflow:hidden;position:relative;text-align:center;width:58px}";
|
||||||
|
styleInject(css_248z);
|
||||||
|
|
||||||
|
var script$4 = {
|
||||||
|
name: 'IconCircleClose'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$4 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$4 = /*#__PURE__*/vue.createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$4 = /*#__PURE__*/vue.createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_4 = [_hoisted_2$4, _hoisted_3$4];
|
||||||
|
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_4);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$4.render = render$4;
|
||||||
|
|
||||||
|
var script$3 = {
|
||||||
|
name: 'IconDocument'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$3 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$3 = /*#__PURE__*/vue.createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 01-32 32H160a32 32 0 01-32-32V96a32 32 0 0132-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$3 = [_hoisted_2$3];
|
||||||
|
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$3.render = render$3;
|
||||||
|
|
||||||
|
var script$2 = {
|
||||||
|
name: 'IconDelete'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$2 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$2 = /*#__PURE__*/vue.createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M160 256H96a32 32 0 010-64h256V95.936a32 32 0 0132-32h256a32 32 0 0132 32V192h256a32 32 0 110 64h-64v672a32 32 0 01-32 32H192a32 32 0 01-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32zm192 0a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$2 = [_hoisted_2$2];
|
||||||
|
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$2.render = render$2;
|
||||||
|
|
||||||
|
var script$1 = {
|
||||||
|
name: 'IconView'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1$1 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2$1 = /*#__PURE__*/vue.createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3$1 = [_hoisted_2$1];
|
||||||
|
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
|
||||||
|
}
|
||||||
|
|
||||||
|
script$1.render = render$1;
|
||||||
|
|
||||||
|
var script = {
|
||||||
|
name: 'IconFolderOpened'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2 = /*#__PURE__*/vue.createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 01216.96 384H832zm-24.96 512H96a32 32 0 01-32-32V160a32 32 0 0132-32h287.872l128.384 128H864a32 32 0 0132 32v96h23.04a32 32 0 0131.04 39.744l-112 448A32 32 0 01807.04 896z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3 = [_hoisted_2];
|
||||||
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, _hoisted_3);
|
||||||
|
}
|
||||||
|
|
||||||
|
script.render = render;
|
||||||
|
|
||||||
|
function _isSlot(s) {
|
||||||
|
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcFrame';
|
||||||
|
var Frame = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
"default": 'input'
|
||||||
|
},
|
||||||
|
field: String,
|
||||||
|
helper: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
src: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
"default": 'IconFolderOpened'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
"default": '500px'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
"default": '370px'
|
||||||
|
},
|
||||||
|
maxLength: {
|
||||||
|
type: Number,
|
||||||
|
"default": 0
|
||||||
|
},
|
||||||
|
okBtnText: {
|
||||||
|
type: String,
|
||||||
|
"default": '确定'
|
||||||
|
},
|
||||||
|
closeBtnText: {
|
||||||
|
type: String,
|
||||||
|
"default": '关闭'
|
||||||
|
},
|
||||||
|
modalTitle: String,
|
||||||
|
handleIcon: {
|
||||||
|
type: [String, Boolean],
|
||||||
|
"default": undefined
|
||||||
|
},
|
||||||
|
title: String,
|
||||||
|
allowRemove: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
onOpen: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onOk: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onCancel: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onLoad: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onBeforeRemove: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onRemove: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onHandle: Function,
|
||||||
|
modal: {
|
||||||
|
type: Object,
|
||||||
|
"default": function _default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
srcKey: [String, Number],
|
||||||
|
modelValue: [Array, String, Number, Object],
|
||||||
|
previewMask: undefined,
|
||||||
|
footer: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
reload: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
closeBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
okBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
formCreateInject: Object
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change'],
|
||||||
|
components: {
|
||||||
|
IconFolderOpened: script,
|
||||||
|
IconView: script$1
|
||||||
|
},
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
fileList: toArray(this.modelValue),
|
||||||
|
previewVisible: false,
|
||||||
|
frameVisible: false,
|
||||||
|
previewImage: '',
|
||||||
|
bus: new Mitt()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue(n) {
|
||||||
|
this.fileList = toArray(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close: function close() {
|
||||||
|
this.closeModel(true);
|
||||||
|
},
|
||||||
|
closeModel: function closeModel(close) {
|
||||||
|
this.bus.$emit(close ? '$close' : '$ok');
|
||||||
|
|
||||||
|
if (this.reload) {
|
||||||
|
this.bus.$off('$ok');
|
||||||
|
this.bus.$off('$close');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.frameVisible = false;
|
||||||
|
},
|
||||||
|
handleCancel: function handleCancel() {
|
||||||
|
this.previewVisible = false;
|
||||||
|
},
|
||||||
|
showModel: function showModel() {
|
||||||
|
if (this.disabled || false === this.onOpen()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.frameVisible = true;
|
||||||
|
},
|
||||||
|
input: function input() {
|
||||||
|
var n = this.fileList;
|
||||||
|
var val = this.maxLength === 1 ? n[0] || '' : n;
|
||||||
|
this.$emit('update:modelValue', val);
|
||||||
|
this.$emit('change', val);
|
||||||
|
},
|
||||||
|
makeInput: function makeInput() {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElInput"), vue.mergeProps({
|
||||||
|
type: 'text',
|
||||||
|
modelValue: this.fileList.map(function (v) {
|
||||||
|
return _this.getSrc(v);
|
||||||
|
}).toString(),
|
||||||
|
readonly: true
|
||||||
|
}, {
|
||||||
|
"key": 1
|
||||||
|
}), {
|
||||||
|
append: function append() {
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElButton"), {
|
||||||
|
"icon": vue.resolveComponent(_this.icon),
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this.showModel();
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
suffix: function suffix() {
|
||||||
|
return _this.fileList.length && !_this.disabled ? vue.createVNode(vue.resolveComponent("ElIcon"), {
|
||||||
|
"class": "el-input__icon _fc-upload-icon",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
_this.fileList = [];
|
||||||
|
|
||||||
|
_this.input();
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(script$4, null, null)];
|
||||||
|
}
|
||||||
|
}) : null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
makeGroup: function makeGroup(children) {
|
||||||
|
if (!this.maxLength || this.fileList.length < this.maxLength) {
|
||||||
|
children.push(this.makeBtn());
|
||||||
|
}
|
||||||
|
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"key": 2
|
||||||
|
}, [children]);
|
||||||
|
},
|
||||||
|
makeItem: function makeItem(index, children) {
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-files",
|
||||||
|
"key": '3' + index
|
||||||
|
}, [children]);
|
||||||
|
},
|
||||||
|
valid: function valid(f) {
|
||||||
|
var field = this.formCreateInject.field || this.field;
|
||||||
|
|
||||||
|
if (field && f !== field) {
|
||||||
|
throw new Error('[frame]无效的字段值');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeIcons: function makeIcons(val, index) {
|
||||||
|
if (this.handleIcon !== false || this.allowRemove === true) {
|
||||||
|
var icons = [];
|
||||||
|
|
||||||
|
if (this.type !== 'file' && this.handleIcon !== false || this.type === 'file' && this.handleIcon) {
|
||||||
|
icons.push(this.makeHandleIcon(val, index));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.allowRemove) {
|
||||||
|
icons.push(this.makeRemoveIcon(val, index));
|
||||||
|
}
|
||||||
|
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-upload-cover",
|
||||||
|
"key": 4
|
||||||
|
}, [icons]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeHandleIcon: function makeHandleIcon(val, index) {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
var Type = vue.resolveComponent(this.handleIcon === true || this.handleIcon === undefined ? 'icon-view' : this.handleIcon);
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElIcon"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this2.handleClick(val);
|
||||||
|
},
|
||||||
|
"key": '5' + index
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(Type, null, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
makeRemoveIcon: function makeRemoveIcon(val, index) {
|
||||||
|
var _this3 = this;
|
||||||
|
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElIcon"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this3.handleRemove(val);
|
||||||
|
},
|
||||||
|
"key": '6' + index
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(script$2, null, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
makeFiles: function makeFiles() {
|
||||||
|
var _this4 = this;
|
||||||
|
|
||||||
|
return this.makeGroup(this.fileList.map(function (src, index) {
|
||||||
|
return _this4.makeItem(index, [vue.createVNode(vue.resolveComponent("ElIcon"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this4.handleClick(src);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(script$3, null, null)];
|
||||||
|
}
|
||||||
|
}), _this4.makeIcons(src, index)]);
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
makeImages: function makeImages() {
|
||||||
|
var _this5 = this;
|
||||||
|
|
||||||
|
return this.makeGroup(this.fileList.map(function (src, index) {
|
||||||
|
return _this5.makeItem(index, [vue.createVNode("img", {
|
||||||
|
"src": _this5.getSrc(src)
|
||||||
|
}, null), _this5.makeIcons(src, index)]);
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
makeBtn: function makeBtn() {
|
||||||
|
var _this6 = this;
|
||||||
|
|
||||||
|
var Type = vue.resolveComponent(this.icon);
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-upload-btn",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this6.showModel();
|
||||||
|
},
|
||||||
|
"key": 7
|
||||||
|
}, [vue.createVNode(vue.resolveComponent("ElIcon"), null, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(Type, null, null)];
|
||||||
|
}
|
||||||
|
})]);
|
||||||
|
},
|
||||||
|
handleClick: function handleClick(src) {
|
||||||
|
if (this.onHandle) {
|
||||||
|
return this.onHandle(src);
|
||||||
|
} else {
|
||||||
|
this.previewImage = this.getSrc(src);
|
||||||
|
this.previewVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRemove: function handleRemove(src) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (false !== this.onBeforeRemove(src)) {
|
||||||
|
this.fileList.splice(this.fileList.indexOf(src), 1);
|
||||||
|
this.input();
|
||||||
|
this.onRemove(src);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSrc: function getSrc(src) {
|
||||||
|
return !this.srcKey ? src : src[this.srcKey];
|
||||||
|
},
|
||||||
|
frameLoad: function frameLoad(iframe) {
|
||||||
|
var _this7 = this;
|
||||||
|
|
||||||
|
this.onLoad(iframe);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (this.helper === true) {
|
||||||
|
iframe['form_create_helper'] = {
|
||||||
|
api: this.formCreateInject.api,
|
||||||
|
close: function close(field) {
|
||||||
|
_this7.valid(field);
|
||||||
|
|
||||||
|
_this7.closeModel();
|
||||||
|
},
|
||||||
|
set: function set(field, value) {
|
||||||
|
_this7.valid(field);
|
||||||
|
|
||||||
|
!_this7.disabled && _this7.$emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
get: function get(field) {
|
||||||
|
_this7.valid(field);
|
||||||
|
|
||||||
|
return _this7.modelValue;
|
||||||
|
},
|
||||||
|
onOk: function onOk(fn) {
|
||||||
|
return _this7.bus.$on('$ok', fn);
|
||||||
|
},
|
||||||
|
onClose: function onClose(fn) {
|
||||||
|
return _this7.bus.$on('$close', fn);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeFooter: function makeFooter() {
|
||||||
|
var _this8 = this;
|
||||||
|
|
||||||
|
var _this$$props = this.$props,
|
||||||
|
okBtnText = _this$$props.okBtnText,
|
||||||
|
closeBtnText = _this$$props.closeBtnText,
|
||||||
|
closeBtn = _this$$props.closeBtn,
|
||||||
|
okBtn = _this$$props.okBtn,
|
||||||
|
footer = _this$$props.footer;
|
||||||
|
|
||||||
|
if (!footer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return vue.createVNode("div", null, [closeBtn ? vue.createVNode(vue.resolveComponent("ElButton"), {
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this8.onCancel() !== false && (_this8.frameVisible = false);
|
||||||
|
}
|
||||||
|
}, _isSlot(closeBtnText) ? closeBtnText : {
|
||||||
|
"default": function _default() {
|
||||||
|
return [closeBtnText];
|
||||||
|
}
|
||||||
|
}) : null, okBtn ? vue.createVNode(vue.resolveComponent("ElButton"), {
|
||||||
|
"type": "primary",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this8.onOk() !== false && _this8.closeModel();
|
||||||
|
}
|
||||||
|
}, _isSlot(okBtnText) ? okBtnText : {
|
||||||
|
"default": function _default() {
|
||||||
|
return [okBtnText];
|
||||||
|
}
|
||||||
|
}) : null]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this9 = this;
|
||||||
|
|
||||||
|
var type = this.type;
|
||||||
|
var node;
|
||||||
|
|
||||||
|
if (type === 'input') {
|
||||||
|
node = this.makeInput();
|
||||||
|
} else if (type === 'image') {
|
||||||
|
node = this.makeImages();
|
||||||
|
} else {
|
||||||
|
node = this.makeFiles();
|
||||||
|
}
|
||||||
|
|
||||||
|
var _this$$props2 = this.$props,
|
||||||
|
_this$$props2$width = _this$$props2.width,
|
||||||
|
width = _this$$props2$width === void 0 ? '30%' : _this$$props2$width,
|
||||||
|
height = _this$$props2.height,
|
||||||
|
src = _this$$props2.src,
|
||||||
|
title = _this$$props2.title,
|
||||||
|
modalTitle = _this$$props2.modalTitle;
|
||||||
|
vue.nextTick(function () {
|
||||||
|
if (_this9.$refs.frame) {
|
||||||
|
_this9.frameLoad(_this9.$refs.frame.contentWindow || {});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": {
|
||||||
|
'_fc-frame': true,
|
||||||
|
'_fc-disabled': this.disabled
|
||||||
|
}
|
||||||
|
}, [node, vue.createVNode(vue.resolveComponent("ElDialog"), {
|
||||||
|
"appendToBody": true,
|
||||||
|
"modal": this.previewMask,
|
||||||
|
"title": modalTitle,
|
||||||
|
"modelValue": this.previewVisible,
|
||||||
|
"onClose": this.handleCancel
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode("img", {
|
||||||
|
"style": "width: 100%",
|
||||||
|
"src": _this9.previewImage
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
}), vue.createVNode(vue.resolveComponent("ElDialog"), vue.mergeProps({
|
||||||
|
"appendToBody": true
|
||||||
|
}, _objectSpread2({
|
||||||
|
width: width,
|
||||||
|
title: title
|
||||||
|
}, this.modal), {
|
||||||
|
"modelValue": this.frameVisible,
|
||||||
|
"onClose": function onClose() {
|
||||||
|
return _this9.closeModel(true);
|
||||||
|
}
|
||||||
|
}), {
|
||||||
|
"default": function _default() {
|
||||||
|
return [_this9.frameVisible || !_this9.reload ? vue.createVNode("iframe", {
|
||||||
|
"ref": "frame",
|
||||||
|
"src": src,
|
||||||
|
"frameBorder": "0",
|
||||||
|
"style": {
|
||||||
|
height: height,
|
||||||
|
'border': '0 none',
|
||||||
|
'width': '100%'
|
||||||
|
}
|
||||||
|
}, null) : null];
|
||||||
|
},
|
||||||
|
footer: function footer() {
|
||||||
|
return _this9.makeFooter();
|
||||||
|
}
|
||||||
|
})]);
|
||||||
|
},
|
||||||
|
beforeMount: function beforeMount() {
|
||||||
|
var _this$formCreateInjec = this.formCreateInject,
|
||||||
|
name = _this$formCreateInjec.name,
|
||||||
|
field = _this$formCreateInjec.field,
|
||||||
|
api = _this$formCreateInjec.api;
|
||||||
|
name && api.on('fc:closeModal:' + name, this.close);
|
||||||
|
field && api.on('fc:closeModal:' + field, this.close);
|
||||||
|
},
|
||||||
|
beforeUnmount: function beforeUnmount() {
|
||||||
|
var _this$formCreateInjec2 = this.formCreateInject,
|
||||||
|
name = _this$formCreateInjec2.name,
|
||||||
|
field = _this$formCreateInjec2.field,
|
||||||
|
api = _this$formCreateInjec2.api;
|
||||||
|
name && api.off('fc:closeModal:' + name, this.close);
|
||||||
|
field && api.off('fc:closeModal:' + field, this.close);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Frame;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-elm-frame",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "@form-create/element-ui 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"element-ui"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-elm-frame",
|
||||||
|
"exportName": "FcFrame",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"></path>
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'IconCircleClose'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M160 256H96a32 32 0 010-64h256V95.936a32 32 0 0132-32h256a32 32 0 0132 32V192h256a32 32 0 110 64h-64v672a32 32 0 01-32 32H192a32 32 0 01-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32zm192 0a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32z"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'IconDelete'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 01-32 32H160a32 32 0 01-32-32V96a32 32 0 0132-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'IconDocument'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 01216.96 384H832zm-24.96 512H96a32 32 0 01-32-32V160a32 32 0 0132-32h287.872l128.384 128H864a32 32 0 0132 32v96h23.04a32 32 0 0131.04 39.744l-112 448A32 32 0 01807.04 896z"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'IconFolderOpened'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'IconView'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,349 @@
|
||||||
|
import toArray from '@form-create/utils/lib/toarray';
|
||||||
|
import Mitt from '@form-create/utils/lib/mitt';
|
||||||
|
import {defineComponent, nextTick, resolveComponent} from 'vue';
|
||||||
|
import './style.css';
|
||||||
|
import IconCircleClose from './IconCircleClose.vue';
|
||||||
|
import IconDocument from './IconDocument.vue';
|
||||||
|
import IconDelete from './IconDelete.vue';
|
||||||
|
import IconView from './IconView.vue';
|
||||||
|
import IconFolderOpened from './IconFolderOpened.vue';
|
||||||
|
|
||||||
|
const NAME = 'fcFrame';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'input'
|
||||||
|
},
|
||||||
|
field: String,
|
||||||
|
helper: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
src: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: 'IconFolderOpened'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '500px'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '370px'
|
||||||
|
},
|
||||||
|
maxLength: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
okBtnText: {
|
||||||
|
type: String,
|
||||||
|
default: '确定'
|
||||||
|
},
|
||||||
|
closeBtnText: {
|
||||||
|
type: String,
|
||||||
|
default: '关闭'
|
||||||
|
},
|
||||||
|
modalTitle: String,
|
||||||
|
handleIcon: {
|
||||||
|
type: [String, Boolean],
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
title: String,
|
||||||
|
allowRemove: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
onOpen: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onOk: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onBeforeRemove: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onRemove: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onHandle: Function,
|
||||||
|
modal: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
srcKey: [String, Number],
|
||||||
|
modelValue: [Array, String, Number, Object],
|
||||||
|
previewMask: undefined,
|
||||||
|
footer: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
reload: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
closeBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
okBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
formCreateInject: Object,
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change'],
|
||||||
|
components: {
|
||||||
|
IconFolderOpened,
|
||||||
|
IconView,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fileList: toArray(this.modelValue),
|
||||||
|
previewVisible: false,
|
||||||
|
frameVisible: false,
|
||||||
|
previewImage: '',
|
||||||
|
bus: new Mitt()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue(n) {
|
||||||
|
this.fileList = toArray(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close() {
|
||||||
|
this.closeModel(true);
|
||||||
|
},
|
||||||
|
closeModel(close) {
|
||||||
|
this.bus.$emit(close ? '$close' : '$ok');
|
||||||
|
if (this.reload) {
|
||||||
|
this.bus.$off('$ok');
|
||||||
|
this.bus.$off('$close');
|
||||||
|
}
|
||||||
|
this.frameVisible = false;
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.previewVisible = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
showModel() {
|
||||||
|
if (this.disabled || false === this.onOpen()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.frameVisible = true;
|
||||||
|
},
|
||||||
|
input() {
|
||||||
|
const n = this.fileList;
|
||||||
|
const val = this.maxLength === 1 ? (n[0] || '') : n;
|
||||||
|
this.$emit('update:modelValue', val);
|
||||||
|
this.$emit('change', val);
|
||||||
|
},
|
||||||
|
makeInput() {
|
||||||
|
return <ElInput {...{
|
||||||
|
type: 'text',
|
||||||
|
modelValue: (this.fileList.map(v => this.getSrc(v))).toString(),
|
||||||
|
readonly: true
|
||||||
|
}} key={1} v-slots={{
|
||||||
|
append: () => <ElButton icon={resolveComponent(this.icon)} onClick={() => this.showModel()}/>,
|
||||||
|
suffix: () => this.fileList.length && !this.disabled ?
|
||||||
|
<ElIcon class="el-input__icon _fc-upload-icon" onClick={() => {
|
||||||
|
this.fileList = [];
|
||||||
|
this.input();
|
||||||
|
}}>
|
||||||
|
<IconCircleClose/>
|
||||||
|
</ElIcon> : null
|
||||||
|
}}/>
|
||||||
|
},
|
||||||
|
makeGroup(children) {
|
||||||
|
if (!this.maxLength || this.fileList.length < this.maxLength) {
|
||||||
|
children.push(this.makeBtn());
|
||||||
|
}
|
||||||
|
return <div key={2}>{children}</div>
|
||||||
|
},
|
||||||
|
|
||||||
|
makeItem(index, children) {
|
||||||
|
return <div class="_fc-files" key={'3' + index}>{children}</div>;
|
||||||
|
},
|
||||||
|
valid(f) {
|
||||||
|
const field = this.formCreateInject.field || this.field;
|
||||||
|
if (field && f !== field) {
|
||||||
|
throw new Error('[frame]无效的字段值');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeIcons(val, index) {
|
||||||
|
if (this.handleIcon !== false || this.allowRemove === true) {
|
||||||
|
const icons = [];
|
||||||
|
if ((this.type !== 'file' && this.handleIcon !== false) || (this.type === 'file' && this.handleIcon)) {
|
||||||
|
icons.push(this.makeHandleIcon(val, index));
|
||||||
|
}
|
||||||
|
if (this.allowRemove) {
|
||||||
|
icons.push(this.makeRemoveIcon(val, index));
|
||||||
|
}
|
||||||
|
return <div class="_fc-upload-cover" key={4}>{icons}</div>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeHandleIcon(val, index) {
|
||||||
|
const Type = resolveComponent((this.handleIcon === true || this.handleIcon === undefined) ? 'icon-view' : this.handleIcon);
|
||||||
|
return <ElIcon onClick={() => this.handleClick(val)} key={'5' + index}><Type/></ElIcon>
|
||||||
|
},
|
||||||
|
|
||||||
|
makeRemoveIcon(val, index) {
|
||||||
|
return <ElIcon onClick={() => this.handleRemove(val)} key={'6' + index}>
|
||||||
|
<IconDelete/>
|
||||||
|
</ElIcon>
|
||||||
|
},
|
||||||
|
|
||||||
|
makeFiles() {
|
||||||
|
return this.makeGroup(this.fileList.map((src, index) => {
|
||||||
|
return this.makeItem(index, [<ElIcon onClick={() => this.handleClick(src)}>
|
||||||
|
<IconDocument/>
|
||||||
|
</ElIcon>, this.makeIcons(src, index)])
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
makeImages() {
|
||||||
|
return this.makeGroup(this.fileList.map((src, index) => {
|
||||||
|
return this.makeItem(index, [<img src={this.getSrc(src)}/>, this.makeIcons(src, index)])
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
makeBtn() {
|
||||||
|
const Type = resolveComponent(this.icon);
|
||||||
|
return <div class="_fc-upload-btn" onClick={() => this.showModel()} key={7}>
|
||||||
|
<ElIcon><Type/></ElIcon>
|
||||||
|
</div>
|
||||||
|
},
|
||||||
|
handleClick(src) {
|
||||||
|
if (this.onHandle) {
|
||||||
|
return this.onHandle(src);
|
||||||
|
} else {
|
||||||
|
this.previewImage = this.getSrc(src);
|
||||||
|
this.previewVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRemove(src) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (false !== this.onBeforeRemove(src)) {
|
||||||
|
this.fileList.splice(this.fileList.indexOf(src), 1);
|
||||||
|
this.input();
|
||||||
|
this.onRemove(src);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSrc(src) {
|
||||||
|
return !this.srcKey ? src : src[this.srcKey];
|
||||||
|
},
|
||||||
|
frameLoad(iframe) {
|
||||||
|
this.onLoad(iframe);
|
||||||
|
try {
|
||||||
|
if (this.helper === true) {
|
||||||
|
iframe['form_create_helper'] = {
|
||||||
|
api: this.formCreateInject.api,
|
||||||
|
close: (field) => {
|
||||||
|
this.valid(field);
|
||||||
|
this.closeModel();
|
||||||
|
},
|
||||||
|
set: (field, value) => {
|
||||||
|
this.valid(field);
|
||||||
|
!this.disabled && this.$emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
get: (field) => {
|
||||||
|
this.valid(field);
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
onOk: fn => this.bus.$on('$ok', fn),
|
||||||
|
onClose: fn => this.bus.$on('$close', fn)
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
makeFooter() {
|
||||||
|
const {okBtnText, closeBtnText, closeBtn, okBtn, footer} = this.$props;
|
||||||
|
|
||||||
|
if (!footer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return <div>
|
||||||
|
{closeBtn ? <ElButton
|
||||||
|
onClick={() => (this.onCancel() !== false && (this.frameVisible = false))}>{closeBtnText}</ElButton> : null}
|
||||||
|
{okBtn ? <ElButton type="primary"
|
||||||
|
onClick={() => (this.onOk() !== false && this.closeModel())}>{okBtnText}</ElButton> : null}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const type = this.type;
|
||||||
|
|
||||||
|
let node;
|
||||||
|
if (type === 'input') {
|
||||||
|
node = this.makeInput();
|
||||||
|
} else if (type === 'image') {
|
||||||
|
node = this.makeImages();
|
||||||
|
} else {
|
||||||
|
node = this.makeFiles();
|
||||||
|
}
|
||||||
|
|
||||||
|
const {width = '30%', height, src, title, modalTitle} = this.$props;
|
||||||
|
nextTick(() => {
|
||||||
|
if (this.$refs.frame) {
|
||||||
|
this.frameLoad(this.$refs.frame.contentWindow || {});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return <div class={{'_fc-frame': true, '_fc-disabled': this.disabled}}>{node}
|
||||||
|
<ElDialog appendToBody={true} modal={this.previewMask} title={modalTitle} modelValue={this.previewVisible}
|
||||||
|
onClose={this.handleCancel}>
|
||||||
|
<img style="width: 100%" src={this.previewImage}/>
|
||||||
|
</ElDialog>
|
||||||
|
<ElDialog appendToBody={true} {...{width, title, ...this.modal}} modelValue={this.frameVisible}
|
||||||
|
onClose={() => (this.closeModel(true))} v-slots={{
|
||||||
|
footer: () => this.makeFooter()
|
||||||
|
}}>
|
||||||
|
{(this.frameVisible || !this.reload) ? <iframe ref="frame" src={src} frameBorder="0" style={{
|
||||||
|
height,
|
||||||
|
'border': '0 none',
|
||||||
|
'width': '100%'
|
||||||
|
}}/> : null}</ElDialog>
|
||||||
|
</div>
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
const {name, field, api} = this.formCreateInject;
|
||||||
|
name && api.on('fc:closeModal:' + name, this.close);
|
||||||
|
field && api.on('fc:closeModal:' + field, this.close);
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
const {name, field, api} = this.formCreateInject;
|
||||||
|
name && api.off('fc:closeModal:' + name, this.close);
|
||||||
|
field && api.off('fc:closeModal:' + field, this.close);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Frame from './component';
|
||||||
|
|
||||||
|
export default Frame;
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
._fc-frame ._fc-files img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame ._fc-upload-btn {
|
||||||
|
border: 1px dashed #c0ccda;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame._fc-disabled ._fc-upload-btn ,._fc-frame._fc-disabled .el-button {
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame ._fc-upload-cover {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(0, 0, 0, .6);
|
||||||
|
-webkit-transition: opacity .3s;
|
||||||
|
-o-transition: opacity .3s;
|
||||||
|
transition: opacity .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame ._fc-upload-cover i {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame ._fc-files:hover ._fc-upload-cover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame .el-upload {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame ._fc-upload-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-frame ._fc-upload-btn, ._fc-files {
|
||||||
|
display: inline-block;
|
||||||
|
width: 58px;
|
||||||
|
height: 58px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 58px;
|
||||||
|
border: 1px solid #c0ccda;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
|
||||||
|
margin-right: 4px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-elm-group
|
||||||
|
|
||||||
|
@form-create/element-ui 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,667 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-group v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with group
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { defineComponent, markRaw, nextTick, createVNode, watch, mergeProps } from 'vue';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _typeof(obj) {
|
||||||
|
"@babel/helpers - typeof";
|
||||||
|
|
||||||
|
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return typeof obj;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return _typeof(obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _toConsumableArray(arr) {
|
||||||
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayWithoutHoles(arr) {
|
||||||
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _iterableToArray(iter) {
|
||||||
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _unsupportedIterableToArray(o, minLen) {
|
||||||
|
if (!o) return;
|
||||||
|
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
||||||
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
||||||
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
||||||
|
if (n === "Map" || n === "Set") return Array.from(o);
|
||||||
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayLikeToArray(arr, len) {
|
||||||
|
if (len == null || len > arr.length) len = arr.length;
|
||||||
|
|
||||||
|
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
||||||
|
|
||||||
|
return arr2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _nonIterableSpread() {
|
||||||
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||||
|
}
|
||||||
|
|
||||||
|
var is = {
|
||||||
|
type: function type(arg, _type) {
|
||||||
|
return Object.prototype.toString.call(arg) === '[object ' + _type + ']';
|
||||||
|
},
|
||||||
|
Undef: function Undef(v) {
|
||||||
|
return v === undefined || v === null;
|
||||||
|
},
|
||||||
|
Element: function Element(arg) {
|
||||||
|
return _typeof(arg) === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg);
|
||||||
|
},
|
||||||
|
trueArray: function trueArray(data) {
|
||||||
|
return Array.isArray(data) && data.length > 0;
|
||||||
|
},
|
||||||
|
Function: function Function(v) {
|
||||||
|
var type = this.getType(v);
|
||||||
|
return type === 'Function' || type === 'AsyncFunction';
|
||||||
|
},
|
||||||
|
getType: function getType(v) {
|
||||||
|
var str = Object.prototype.toString.call(v);
|
||||||
|
return /^\[object (.*)\]$/.exec(str)[1];
|
||||||
|
},
|
||||||
|
empty: function empty(value) {
|
||||||
|
if (value === undefined || value === null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(value) && Array.isArray(value) && !value.length) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return typeof value === 'string' && !value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
['Date', 'Object', 'String', 'Boolean', 'Array', 'Number'].forEach(function (t) {
|
||||||
|
is[t] = function (arg) {
|
||||||
|
return is.type(arg, t);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function hasProperty(rule, k) {
|
||||||
|
return {}.hasOwnProperty.call(rule, k);
|
||||||
|
}
|
||||||
|
|
||||||
|
function $set(target, field, value) {
|
||||||
|
target[field] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function deepExtend(origin) {
|
||||||
|
var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||||
|
var mode = arguments.length > 2 ? arguments[2] : undefined;
|
||||||
|
var isArr = false;
|
||||||
|
|
||||||
|
for (var key in target) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(target, key)) {
|
||||||
|
var clone = target[key];
|
||||||
|
|
||||||
|
if ((isArr = Array.isArray(clone)) || is.Object(clone)) {
|
||||||
|
var nst = origin[key] === undefined;
|
||||||
|
|
||||||
|
if (isArr) {
|
||||||
|
isArr = false;
|
||||||
|
nst && $set(origin, key, []);
|
||||||
|
} else if (clone._clone && mode !== undefined) {
|
||||||
|
if (mode) {
|
||||||
|
clone = clone.getRule();
|
||||||
|
nst && $set(origin, key, {});
|
||||||
|
} else {
|
||||||
|
$set(origin, key, clone._clone());
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
nst && $set(origin, key, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
origin[key] = deepExtend(origin[key], clone, mode);
|
||||||
|
} else {
|
||||||
|
$set(origin, key, clone);
|
||||||
|
|
||||||
|
if (!is.Undef(clone)) {
|
||||||
|
if (!is.Undef(clone.__json)) {
|
||||||
|
origin[key].__json = clone.__json;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!is.Undef(clone.__origin)) {
|
||||||
|
origin[key].__origin = clone.__origin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return mode !== undefined && Array.isArray(origin) ? origin.filter(function (v) {
|
||||||
|
return !v || !v.__ctrl;
|
||||||
|
}) : origin;
|
||||||
|
}
|
||||||
|
function deepCopy(value) {
|
||||||
|
return deepExtend({}, {
|
||||||
|
value: value
|
||||||
|
}).value;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (a) {
|
||||||
|
for (var b, c = 1; c < arguments.length; c++) {
|
||||||
|
for (var d in b = arguments[c], b) {
|
||||||
|
Object.prototype.hasOwnProperty.call(b, d) && $set(a, d, b[d]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return a;
|
||||||
|
};
|
||||||
|
|
||||||
|
function extend() {
|
||||||
|
return _extends.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
function styleInject(css, ref) {
|
||||||
|
if ( ref === void 0 ) ref = {};
|
||||||
|
var insertAt = ref.insertAt;
|
||||||
|
|
||||||
|
if (!css || typeof document === 'undefined') { return; }
|
||||||
|
|
||||||
|
var head = document.head || document.getElementsByTagName('head')[0];
|
||||||
|
var style = document.createElement('style');
|
||||||
|
style.type = 'text/css';
|
||||||
|
|
||||||
|
if (insertAt === 'top') {
|
||||||
|
if (head.firstChild) {
|
||||||
|
head.insertBefore(style, head.firstChild);
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (style.styleSheet) {
|
||||||
|
style.styleSheet.cssText = css;
|
||||||
|
} else {
|
||||||
|
style.appendChild(document.createTextNode(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var css_248z = "._fc-group{display:flex;flex-direction:column;justify-content:center;min-height:38px;width:100%}._fc-group-disabled ._fc-group-add,._fc-group-disabled ._fc-group-btn{cursor:not-allowed}._fc-group-handle{background-color:#fff;border:1px dashed #d9d9d9;border-radius:15px;bottom:-15px;display:flex;flex-direction:row;padding:3px 8px;position:absolute;right:30px}._fc-group-btn{cursor:pointer}._fc-group-idx{align-items:center;background:#eee;border-radius:15px;bottom:-15px;display:flex;font-weight:700;height:30px;justify-content:center;left:10px;position:absolute;width:30px}._fc-group-handle ._fc-group-btn+._fc-group-btn{margin-left:7px}._fc-group-container{border:1px dashed #d9d9d9;border-radius:5px;display:flex;flex-direction:column;margin:5px 5px 25px;padding:20px 20px 25px;position:relative}._fc-group-arrow{height:20px;position:relative;width:20px}._fc-group-arrow:before{border-left:2px solid #999;border-top:2px solid #999;content:\"\";height:9px;left:5px;position:absolute;top:8px;transform:rotate(45deg);width:9px}._fc-group-arrow._fc-group-down{transform:rotate(180deg)}._fc-group-plus-minus{cursor:pointer;height:20px;position:relative;width:20px}._fc-group-plus-minus:after,._fc-group-plus-minus:before{background-color:#409eff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60%}._fc-group-plus-minus:before{transform:translate(-50%,-50%) rotate(90deg)}._fc-group-plus-minus._fc-group-minus:before{display:none}._fc-group-plus-minus._fc-group-minus:after{background-color:#f56c6c}._fc-group-add{border:1px solid rgba(64,158,255,.5);border-radius:15px;cursor:pointer;height:25px;width:25px}._fc-group-add._fc-group-plus-minus:after,._fc-group-add._fc-group-plus-minus:before{width:50%}";
|
||||||
|
styleInject(css_248z);
|
||||||
|
|
||||||
|
var NAME = 'fcGroup';
|
||||||
|
var Group = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
field: String,
|
||||||
|
rule: Array,
|
||||||
|
expand: Number,
|
||||||
|
options: Object,
|
||||||
|
button: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
"default": 0
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
"default": 0
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
"default": function _default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultValue: Object,
|
||||||
|
sortBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
syncDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
onBeforeRemove: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onBeforeAdd: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
formCreateInject: Object,
|
||||||
|
parse: Function
|
||||||
|
},
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
len: 0,
|
||||||
|
cacheRule: {},
|
||||||
|
cacheValue: {},
|
||||||
|
sort: [],
|
||||||
|
form: markRaw(this.formCreateInject.form.$form())
|
||||||
|
};
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change', 'itemMounted', 'remove', 'add'],
|
||||||
|
watch: {
|
||||||
|
rule: {
|
||||||
|
handler: function handler(n, o) {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
Object.keys(this.cacheRule).forEach(function (v) {
|
||||||
|
var item = _this.cacheRule[v];
|
||||||
|
|
||||||
|
if (item.$f) {
|
||||||
|
var val = item.$f.formData();
|
||||||
|
|
||||||
|
if (n === o) {
|
||||||
|
item.$f.deferSyncValue(function () {
|
||||||
|
deepExtend(item.rule, n);
|
||||||
|
item.$f.setValue(val);
|
||||||
|
}, true);
|
||||||
|
} else {
|
||||||
|
var _val = item.$f.formData();
|
||||||
|
|
||||||
|
item.$f.once('reloading', function () {
|
||||||
|
item.$f.setValue(_val);
|
||||||
|
});
|
||||||
|
item.rule = deepCopy(n);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
expand: function expand(n) {
|
||||||
|
var d = n - this.modelValue.length;
|
||||||
|
|
||||||
|
if (d > 0) {
|
||||||
|
this.expandRule(d);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
handler: function handler(n) {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
n = n || [];
|
||||||
|
var keys = Object.keys(this.sort),
|
||||||
|
total = keys.length,
|
||||||
|
len = total - n.length;
|
||||||
|
|
||||||
|
if (len < 0) {
|
||||||
|
for (var i = len; i < 0; i++) {
|
||||||
|
this.addRule(n.length + i, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var _i = 0; _i < total; _i++) {
|
||||||
|
this.setValue(keys[_i], n[_i]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (len > 0) {
|
||||||
|
for (var _i2 = 0; _i2 < len; _i2++) {
|
||||||
|
this.removeRule(keys[total - _i2 - 1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
n.forEach(function (val, i) {
|
||||||
|
_this2.setValue(keys[i], n[i]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_value: function _value(v) {
|
||||||
|
return v && hasProperty(v, this.field) ? v[this.field] : v;
|
||||||
|
},
|
||||||
|
cache: function cache(k, val) {
|
||||||
|
this.cacheValue[k] = JSON.stringify(val);
|
||||||
|
},
|
||||||
|
input: function input(value) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
formData: function formData(key, _formData) {
|
||||||
|
var _this3 = this;
|
||||||
|
|
||||||
|
var cacheRule = this.cacheRule;
|
||||||
|
var keys = this.sort;
|
||||||
|
|
||||||
|
if (keys.filter(function (k) {
|
||||||
|
return cacheRule[k].$f;
|
||||||
|
}).length !== keys.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var value = keys.map(function (k) {
|
||||||
|
var data = key === k ? _formData : _objectSpread2({}, _this3.cacheRule[k].$f.form);
|
||||||
|
var value = _this3.field ? data[_this3.field] || null : data;
|
||||||
|
|
||||||
|
_this3.cache(k, value);
|
||||||
|
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
setValue: function setValue(key, value) {
|
||||||
|
var field = this.field;
|
||||||
|
|
||||||
|
if (field) {
|
||||||
|
value = _defineProperty({}, field, this._value(value));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.cacheValue[key] === JSON.stringify(field ? value[field] : value)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.cache(key, value);
|
||||||
|
},
|
||||||
|
addRule: function addRule(i, emit) {
|
||||||
|
var _this4 = this;
|
||||||
|
|
||||||
|
var rule = this.formCreateInject.form.copyRules(this.rule || []);
|
||||||
|
var options = this.options ? _objectSpread2({}, this.options) : {
|
||||||
|
submitBtn: false,
|
||||||
|
resetBtn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.defaultValue) {
|
||||||
|
if (!options.formData) options.formData = {};
|
||||||
|
var defVal = deepCopy(this.defaultValue);
|
||||||
|
extend(options.formData, this.field ? _defineProperty({}, this.field, defVal) : defVal);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.parse && this.parse({
|
||||||
|
rule: rule,
|
||||||
|
options: options,
|
||||||
|
index: this.sort.length
|
||||||
|
});
|
||||||
|
this.cacheRule[++this.len] = {
|
||||||
|
rule: rule,
|
||||||
|
options: options
|
||||||
|
};
|
||||||
|
|
||||||
|
if (emit) {
|
||||||
|
nextTick(function () {
|
||||||
|
return _this4.$emit('add', rule, Object.keys(_this4.cacheRule).length - 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add$f: function add$f(i, key, $f) {
|
||||||
|
var _this5 = this;
|
||||||
|
|
||||||
|
this.cacheRule[key].$f = $f;
|
||||||
|
nextTick(function () {
|
||||||
|
_this5.$emit('itemMounted', $f, Object.keys(_this5.cacheRule).indexOf(key));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
removeRule: function removeRule(key, emit) {
|
||||||
|
var _this6 = this;
|
||||||
|
|
||||||
|
var index = Object.keys(this.cacheRule).indexOf(key);
|
||||||
|
delete this.cacheRule[key];
|
||||||
|
delete this.cacheValue[key];
|
||||||
|
|
||||||
|
if (emit) {
|
||||||
|
nextTick(function () {
|
||||||
|
return _this6.$emit('remove', index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add: function add(i) {
|
||||||
|
if (this.disabled || false === this.onBeforeAdd(this.modelValue)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var value = _toConsumableArray(this.modelValue);
|
||||||
|
|
||||||
|
value.push(this.defaultValue ? deepCopy(this.defaultValue) : this.field ? null : {});
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
del: function del(index, key) {
|
||||||
|
if (this.disabled || false === this.onBeforeRemove(this.modelValue, index)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.removeRule(key, true);
|
||||||
|
|
||||||
|
var value = _toConsumableArray(this.modelValue);
|
||||||
|
|
||||||
|
value.splice(index, 1);
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
addIcon: function addIcon(key) {
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-plus-minus",
|
||||||
|
"onClick": this.add
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
delIcon: function delIcon(index, key) {
|
||||||
|
var _this7 = this;
|
||||||
|
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-plus-minus _fc-group-minus",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this7.del(index, key);
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
sortUpIcon: function sortUpIcon(index) {
|
||||||
|
var _this8 = this;
|
||||||
|
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-arrow _fc-group-up",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this8.changeSort(index, -1);
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
sortDownIcon: function sortDownIcon(index) {
|
||||||
|
var _this9 = this;
|
||||||
|
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-arrow _fc-group-down",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this9.changeSort(index, 1);
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
changeSort: function changeSort(index, sort) {
|
||||||
|
var a = this.sort[index];
|
||||||
|
this.sort[index] = this.sort[index + sort];
|
||||||
|
this.sort[index + sort] = a;
|
||||||
|
this.formData(0);
|
||||||
|
},
|
||||||
|
makeIcon: function makeIcon(total, index, key) {
|
||||||
|
var _this10 = this;
|
||||||
|
|
||||||
|
if (this.$slots.button) {
|
||||||
|
return this.$slots.button({
|
||||||
|
total: total,
|
||||||
|
index: index,
|
||||||
|
vm: this,
|
||||||
|
key: key,
|
||||||
|
del: function del() {
|
||||||
|
return _this10.del(index, key);
|
||||||
|
},
|
||||||
|
add: this.add
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var btn = [];
|
||||||
|
|
||||||
|
if ((!this.max || total < this.max) && total === index + 1) {
|
||||||
|
btn.push(this.addIcon(key));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (total > this.min) {
|
||||||
|
btn.push(this.delIcon(index, key));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.sortBtn && index) {
|
||||||
|
btn.push(this.sortUpIcon(index));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.sortBtn && index !== total - 1) {
|
||||||
|
btn.push(this.sortDownIcon(index));
|
||||||
|
}
|
||||||
|
|
||||||
|
return btn;
|
||||||
|
},
|
||||||
|
emitEvent: function emitEvent(name, args, index, key) {
|
||||||
|
this.$emit.apply(this, [name].concat(_toConsumableArray(args), [this.cacheRule[key].$f, index]));
|
||||||
|
},
|
||||||
|
expandRule: function expandRule(n) {
|
||||||
|
for (var i = 0; i < n; i++) {
|
||||||
|
this.addRule(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function created() {
|
||||||
|
var _this11 = this;
|
||||||
|
|
||||||
|
watch(function () {
|
||||||
|
return _objectSpread2({}, _this11.cacheRule);
|
||||||
|
}, function (n) {
|
||||||
|
_this11.sort = Object.keys(n);
|
||||||
|
}, {
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
|
var d = (this.expand || 0) - this.modelValue.length;
|
||||||
|
|
||||||
|
for (var i = 0; i < this.modelValue.length; i++) {
|
||||||
|
this.addRule(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d > 0) {
|
||||||
|
this.expandRule(d);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this12 = this;
|
||||||
|
|
||||||
|
var keys = this.sort;
|
||||||
|
var button = this.button;
|
||||||
|
var Type = this.form;
|
||||||
|
var disabled = this.disabled;
|
||||||
|
var children = keys.length === 0 ? this.$slots["default"] ? this.$slots["default"]({
|
||||||
|
vm: this,
|
||||||
|
add: this.add
|
||||||
|
}) : createVNode("div", {
|
||||||
|
"key": 'a_def',
|
||||||
|
"class": "_fc-group-plus-minus _fc-group-add fc-clock",
|
||||||
|
"onClick": this.add
|
||||||
|
}, null) : keys.map(function (key, index) {
|
||||||
|
var _this12$cacheRule$key = _this12.cacheRule[key],
|
||||||
|
rule = _this12$cacheRule$key.rule,
|
||||||
|
options = _this12$cacheRule$key.options;
|
||||||
|
var btn = button && !disabled ? _this12.makeIcon(keys.length, index, key) : [];
|
||||||
|
return createVNode("div", {
|
||||||
|
"class": "_fc-group-container",
|
||||||
|
"key": key
|
||||||
|
}, [createVNode(Type, mergeProps({
|
||||||
|
"key": key
|
||||||
|
}, {
|
||||||
|
disabled: disabled,
|
||||||
|
'onUpdate:modelValue': function onUpdateModelValue(formData) {
|
||||||
|
return _this12.formData(key, formData);
|
||||||
|
},
|
||||||
|
'onEmit-event': function onEmitEvent(name) {
|
||||||
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||||
|
args[_key - 1] = arguments[_key];
|
||||||
|
}
|
||||||
|
|
||||||
|
return _this12.emitEvent(name, args, index, key);
|
||||||
|
},
|
||||||
|
'onUpdate:api': function onUpdateApi($f) {
|
||||||
|
return _this12.add$f(index, key, $f);
|
||||||
|
},
|
||||||
|
inFor: true,
|
||||||
|
modelValue: _this12.field ? _defineProperty({}, _this12.field, _this12._value(_this12.modelValue[index])) : _this12.modelValue[index],
|
||||||
|
rule: rule,
|
||||||
|
option: options,
|
||||||
|
extendOption: true
|
||||||
|
}), null), createVNode("div", {
|
||||||
|
"class": "_fc-group-idx"
|
||||||
|
}, [index + 1]), btn.length ? createVNode("div", {
|
||||||
|
"class": "_fc-group-handle fc-clock"
|
||||||
|
}, [btn]) : null]);
|
||||||
|
});
|
||||||
|
return createVNode("div", {
|
||||||
|
"key": 'con',
|
||||||
|
"class": '_fc-group ' + (disabled ? '_fc-group-disabled' : '')
|
||||||
|
}, [children]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Group as default };
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,675 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-group v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with group
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcGroup = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _typeof(obj) {
|
||||||
|
"@babel/helpers - typeof";
|
||||||
|
|
||||||
|
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return typeof obj;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return _typeof(obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _toConsumableArray(arr) {
|
||||||
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayWithoutHoles(arr) {
|
||||||
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _iterableToArray(iter) {
|
||||||
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _unsupportedIterableToArray(o, minLen) {
|
||||||
|
if (!o) return;
|
||||||
|
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
||||||
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
||||||
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
||||||
|
if (n === "Map" || n === "Set") return Array.from(o);
|
||||||
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _arrayLikeToArray(arr, len) {
|
||||||
|
if (len == null || len > arr.length) len = arr.length;
|
||||||
|
|
||||||
|
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
||||||
|
|
||||||
|
return arr2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _nonIterableSpread() {
|
||||||
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||||
|
}
|
||||||
|
|
||||||
|
var is = {
|
||||||
|
type: function type(arg, _type) {
|
||||||
|
return Object.prototype.toString.call(arg) === '[object ' + _type + ']';
|
||||||
|
},
|
||||||
|
Undef: function Undef(v) {
|
||||||
|
return v === undefined || v === null;
|
||||||
|
},
|
||||||
|
Element: function Element(arg) {
|
||||||
|
return _typeof(arg) === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg);
|
||||||
|
},
|
||||||
|
trueArray: function trueArray(data) {
|
||||||
|
return Array.isArray(data) && data.length > 0;
|
||||||
|
},
|
||||||
|
Function: function Function(v) {
|
||||||
|
var type = this.getType(v);
|
||||||
|
return type === 'Function' || type === 'AsyncFunction';
|
||||||
|
},
|
||||||
|
getType: function getType(v) {
|
||||||
|
var str = Object.prototype.toString.call(v);
|
||||||
|
return /^\[object (.*)\]$/.exec(str)[1];
|
||||||
|
},
|
||||||
|
empty: function empty(value) {
|
||||||
|
if (value === undefined || value === null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(value) && Array.isArray(value) && !value.length) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return typeof value === 'string' && !value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
['Date', 'Object', 'String', 'Boolean', 'Array', 'Number'].forEach(function (t) {
|
||||||
|
is[t] = function (arg) {
|
||||||
|
return is.type(arg, t);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function hasProperty(rule, k) {
|
||||||
|
return {}.hasOwnProperty.call(rule, k);
|
||||||
|
}
|
||||||
|
|
||||||
|
function $set(target, field, value) {
|
||||||
|
target[field] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function deepExtend(origin) {
|
||||||
|
var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||||
|
var mode = arguments.length > 2 ? arguments[2] : undefined;
|
||||||
|
var isArr = false;
|
||||||
|
|
||||||
|
for (var key in target) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(target, key)) {
|
||||||
|
var clone = target[key];
|
||||||
|
|
||||||
|
if ((isArr = Array.isArray(clone)) || is.Object(clone)) {
|
||||||
|
var nst = origin[key] === undefined;
|
||||||
|
|
||||||
|
if (isArr) {
|
||||||
|
isArr = false;
|
||||||
|
nst && $set(origin, key, []);
|
||||||
|
} else if (clone._clone && mode !== undefined) {
|
||||||
|
if (mode) {
|
||||||
|
clone = clone.getRule();
|
||||||
|
nst && $set(origin, key, {});
|
||||||
|
} else {
|
||||||
|
$set(origin, key, clone._clone());
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
nst && $set(origin, key, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
origin[key] = deepExtend(origin[key], clone, mode);
|
||||||
|
} else {
|
||||||
|
$set(origin, key, clone);
|
||||||
|
|
||||||
|
if (!is.Undef(clone)) {
|
||||||
|
if (!is.Undef(clone.__json)) {
|
||||||
|
origin[key].__json = clone.__json;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!is.Undef(clone.__origin)) {
|
||||||
|
origin[key].__origin = clone.__origin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return mode !== undefined && Array.isArray(origin) ? origin.filter(function (v) {
|
||||||
|
return !v || !v.__ctrl;
|
||||||
|
}) : origin;
|
||||||
|
}
|
||||||
|
function deepCopy(value) {
|
||||||
|
return deepExtend({}, {
|
||||||
|
value: value
|
||||||
|
}).value;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (a) {
|
||||||
|
for (var b, c = 1; c < arguments.length; c++) {
|
||||||
|
for (var d in b = arguments[c], b) {
|
||||||
|
Object.prototype.hasOwnProperty.call(b, d) && $set(a, d, b[d]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return a;
|
||||||
|
};
|
||||||
|
|
||||||
|
function extend() {
|
||||||
|
return _extends.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
function styleInject(css, ref) {
|
||||||
|
if ( ref === void 0 ) ref = {};
|
||||||
|
var insertAt = ref.insertAt;
|
||||||
|
|
||||||
|
if (!css || typeof document === 'undefined') { return; }
|
||||||
|
|
||||||
|
var head = document.head || document.getElementsByTagName('head')[0];
|
||||||
|
var style = document.createElement('style');
|
||||||
|
style.type = 'text/css';
|
||||||
|
|
||||||
|
if (insertAt === 'top') {
|
||||||
|
if (head.firstChild) {
|
||||||
|
head.insertBefore(style, head.firstChild);
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (style.styleSheet) {
|
||||||
|
style.styleSheet.cssText = css;
|
||||||
|
} else {
|
||||||
|
style.appendChild(document.createTextNode(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var css_248z = "._fc-group{display:flex;flex-direction:column;justify-content:center;min-height:38px;width:100%}._fc-group-disabled ._fc-group-add,._fc-group-disabled ._fc-group-btn{cursor:not-allowed}._fc-group-handle{background-color:#fff;border:1px dashed #d9d9d9;border-radius:15px;bottom:-15px;display:flex;flex-direction:row;padding:3px 8px;position:absolute;right:30px}._fc-group-btn{cursor:pointer}._fc-group-idx{align-items:center;background:#eee;border-radius:15px;bottom:-15px;display:flex;font-weight:700;height:30px;justify-content:center;left:10px;position:absolute;width:30px}._fc-group-handle ._fc-group-btn+._fc-group-btn{margin-left:7px}._fc-group-container{border:1px dashed #d9d9d9;border-radius:5px;display:flex;flex-direction:column;margin:5px 5px 25px;padding:20px 20px 25px;position:relative}._fc-group-arrow{height:20px;position:relative;width:20px}._fc-group-arrow:before{border-left:2px solid #999;border-top:2px solid #999;content:\"\";height:9px;left:5px;position:absolute;top:8px;transform:rotate(45deg);width:9px}._fc-group-arrow._fc-group-down{transform:rotate(180deg)}._fc-group-plus-minus{cursor:pointer;height:20px;position:relative;width:20px}._fc-group-plus-minus:after,._fc-group-plus-minus:before{background-color:#409eff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60%}._fc-group-plus-minus:before{transform:translate(-50%,-50%) rotate(90deg)}._fc-group-plus-minus._fc-group-minus:before{display:none}._fc-group-plus-minus._fc-group-minus:after{background-color:#f56c6c}._fc-group-add{border:1px solid rgba(64,158,255,.5);border-radius:15px;cursor:pointer;height:25px;width:25px}._fc-group-add._fc-group-plus-minus:after,._fc-group-add._fc-group-plus-minus:before{width:50%}";
|
||||||
|
styleInject(css_248z);
|
||||||
|
|
||||||
|
var NAME = 'fcGroup';
|
||||||
|
var Group = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
field: String,
|
||||||
|
rule: Array,
|
||||||
|
expand: Number,
|
||||||
|
options: Object,
|
||||||
|
button: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
"default": 0
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
"default": 0
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
"default": function _default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultValue: Object,
|
||||||
|
sortBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
syncDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
onBeforeRemove: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
onBeforeAdd: {
|
||||||
|
type: Function,
|
||||||
|
"default": function _default() {}
|
||||||
|
},
|
||||||
|
formCreateInject: Object,
|
||||||
|
parse: Function
|
||||||
|
},
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
len: 0,
|
||||||
|
cacheRule: {},
|
||||||
|
cacheValue: {},
|
||||||
|
sort: [],
|
||||||
|
form: vue.markRaw(this.formCreateInject.form.$form())
|
||||||
|
};
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change', 'itemMounted', 'remove', 'add'],
|
||||||
|
watch: {
|
||||||
|
rule: {
|
||||||
|
handler: function handler(n, o) {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
Object.keys(this.cacheRule).forEach(function (v) {
|
||||||
|
var item = _this.cacheRule[v];
|
||||||
|
|
||||||
|
if (item.$f) {
|
||||||
|
var val = item.$f.formData();
|
||||||
|
|
||||||
|
if (n === o) {
|
||||||
|
item.$f.deferSyncValue(function () {
|
||||||
|
deepExtend(item.rule, n);
|
||||||
|
item.$f.setValue(val);
|
||||||
|
}, true);
|
||||||
|
} else {
|
||||||
|
var _val = item.$f.formData();
|
||||||
|
|
||||||
|
item.$f.once('reloading', function () {
|
||||||
|
item.$f.setValue(_val);
|
||||||
|
});
|
||||||
|
item.rule = deepCopy(n);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
expand: function expand(n) {
|
||||||
|
var d = n - this.modelValue.length;
|
||||||
|
|
||||||
|
if (d > 0) {
|
||||||
|
this.expandRule(d);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
handler: function handler(n) {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
n = n || [];
|
||||||
|
var keys = Object.keys(this.sort),
|
||||||
|
total = keys.length,
|
||||||
|
len = total - n.length;
|
||||||
|
|
||||||
|
if (len < 0) {
|
||||||
|
for (var i = len; i < 0; i++) {
|
||||||
|
this.addRule(n.length + i, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var _i = 0; _i < total; _i++) {
|
||||||
|
this.setValue(keys[_i], n[_i]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (len > 0) {
|
||||||
|
for (var _i2 = 0; _i2 < len; _i2++) {
|
||||||
|
this.removeRule(keys[total - _i2 - 1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
n.forEach(function (val, i) {
|
||||||
|
_this2.setValue(keys[i], n[i]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_value: function _value(v) {
|
||||||
|
return v && hasProperty(v, this.field) ? v[this.field] : v;
|
||||||
|
},
|
||||||
|
cache: function cache(k, val) {
|
||||||
|
this.cacheValue[k] = JSON.stringify(val);
|
||||||
|
},
|
||||||
|
input: function input(value) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
formData: function formData(key, _formData) {
|
||||||
|
var _this3 = this;
|
||||||
|
|
||||||
|
var cacheRule = this.cacheRule;
|
||||||
|
var keys = this.sort;
|
||||||
|
|
||||||
|
if (keys.filter(function (k) {
|
||||||
|
return cacheRule[k].$f;
|
||||||
|
}).length !== keys.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var value = keys.map(function (k) {
|
||||||
|
var data = key === k ? _formData : _objectSpread2({}, _this3.cacheRule[k].$f.form);
|
||||||
|
var value = _this3.field ? data[_this3.field] || null : data;
|
||||||
|
|
||||||
|
_this3.cache(k, value);
|
||||||
|
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
setValue: function setValue(key, value) {
|
||||||
|
var field = this.field;
|
||||||
|
|
||||||
|
if (field) {
|
||||||
|
value = _defineProperty({}, field, this._value(value));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.cacheValue[key] === JSON.stringify(field ? value[field] : value)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.cache(key, value);
|
||||||
|
},
|
||||||
|
addRule: function addRule(i, emit) {
|
||||||
|
var _this4 = this;
|
||||||
|
|
||||||
|
var rule = this.formCreateInject.form.copyRules(this.rule || []);
|
||||||
|
var options = this.options ? _objectSpread2({}, this.options) : {
|
||||||
|
submitBtn: false,
|
||||||
|
resetBtn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.defaultValue) {
|
||||||
|
if (!options.formData) options.formData = {};
|
||||||
|
var defVal = deepCopy(this.defaultValue);
|
||||||
|
extend(options.formData, this.field ? _defineProperty({}, this.field, defVal) : defVal);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.parse && this.parse({
|
||||||
|
rule: rule,
|
||||||
|
options: options,
|
||||||
|
index: this.sort.length
|
||||||
|
});
|
||||||
|
this.cacheRule[++this.len] = {
|
||||||
|
rule: rule,
|
||||||
|
options: options
|
||||||
|
};
|
||||||
|
|
||||||
|
if (emit) {
|
||||||
|
vue.nextTick(function () {
|
||||||
|
return _this4.$emit('add', rule, Object.keys(_this4.cacheRule).length - 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add$f: function add$f(i, key, $f) {
|
||||||
|
var _this5 = this;
|
||||||
|
|
||||||
|
this.cacheRule[key].$f = $f;
|
||||||
|
vue.nextTick(function () {
|
||||||
|
_this5.$emit('itemMounted', $f, Object.keys(_this5.cacheRule).indexOf(key));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
removeRule: function removeRule(key, emit) {
|
||||||
|
var _this6 = this;
|
||||||
|
|
||||||
|
var index = Object.keys(this.cacheRule).indexOf(key);
|
||||||
|
delete this.cacheRule[key];
|
||||||
|
delete this.cacheValue[key];
|
||||||
|
|
||||||
|
if (emit) {
|
||||||
|
vue.nextTick(function () {
|
||||||
|
return _this6.$emit('remove', index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add: function add(i) {
|
||||||
|
if (this.disabled || false === this.onBeforeAdd(this.modelValue)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var value = _toConsumableArray(this.modelValue);
|
||||||
|
|
||||||
|
value.push(this.defaultValue ? deepCopy(this.defaultValue) : this.field ? null : {});
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
del: function del(index, key) {
|
||||||
|
if (this.disabled || false === this.onBeforeRemove(this.modelValue, index)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.removeRule(key, true);
|
||||||
|
|
||||||
|
var value = _toConsumableArray(this.modelValue);
|
||||||
|
|
||||||
|
value.splice(index, 1);
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
addIcon: function addIcon(key) {
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-plus-minus",
|
||||||
|
"onClick": this.add
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
delIcon: function delIcon(index, key) {
|
||||||
|
var _this7 = this;
|
||||||
|
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-plus-minus _fc-group-minus",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this7.del(index, key);
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
sortUpIcon: function sortUpIcon(index) {
|
||||||
|
var _this8 = this;
|
||||||
|
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-arrow _fc-group-up",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this8.changeSort(index, -1);
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
sortDownIcon: function sortDownIcon(index) {
|
||||||
|
var _this9 = this;
|
||||||
|
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-group-btn _fc-group-arrow _fc-group-down",
|
||||||
|
"onClick": function onClick() {
|
||||||
|
return _this9.changeSort(index, 1);
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
},
|
||||||
|
changeSort: function changeSort(index, sort) {
|
||||||
|
var a = this.sort[index];
|
||||||
|
this.sort[index] = this.sort[index + sort];
|
||||||
|
this.sort[index + sort] = a;
|
||||||
|
this.formData(0);
|
||||||
|
},
|
||||||
|
makeIcon: function makeIcon(total, index, key) {
|
||||||
|
var _this10 = this;
|
||||||
|
|
||||||
|
if (this.$slots.button) {
|
||||||
|
return this.$slots.button({
|
||||||
|
total: total,
|
||||||
|
index: index,
|
||||||
|
vm: this,
|
||||||
|
key: key,
|
||||||
|
del: function del() {
|
||||||
|
return _this10.del(index, key);
|
||||||
|
},
|
||||||
|
add: this.add
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var btn = [];
|
||||||
|
|
||||||
|
if ((!this.max || total < this.max) && total === index + 1) {
|
||||||
|
btn.push(this.addIcon(key));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (total > this.min) {
|
||||||
|
btn.push(this.delIcon(index, key));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.sortBtn && index) {
|
||||||
|
btn.push(this.sortUpIcon(index));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.sortBtn && index !== total - 1) {
|
||||||
|
btn.push(this.sortDownIcon(index));
|
||||||
|
}
|
||||||
|
|
||||||
|
return btn;
|
||||||
|
},
|
||||||
|
emitEvent: function emitEvent(name, args, index, key) {
|
||||||
|
this.$emit.apply(this, [name].concat(_toConsumableArray(args), [this.cacheRule[key].$f, index]));
|
||||||
|
},
|
||||||
|
expandRule: function expandRule(n) {
|
||||||
|
for (var i = 0; i < n; i++) {
|
||||||
|
this.addRule(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function created() {
|
||||||
|
var _this11 = this;
|
||||||
|
|
||||||
|
vue.watch(function () {
|
||||||
|
return _objectSpread2({}, _this11.cacheRule);
|
||||||
|
}, function (n) {
|
||||||
|
_this11.sort = Object.keys(n);
|
||||||
|
}, {
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
|
var d = (this.expand || 0) - this.modelValue.length;
|
||||||
|
|
||||||
|
for (var i = 0; i < this.modelValue.length; i++) {
|
||||||
|
this.addRule(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d > 0) {
|
||||||
|
this.expandRule(d);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this12 = this;
|
||||||
|
|
||||||
|
var keys = this.sort;
|
||||||
|
var button = this.button;
|
||||||
|
var Type = this.form;
|
||||||
|
var disabled = this.disabled;
|
||||||
|
var children = keys.length === 0 ? this.$slots["default"] ? this.$slots["default"]({
|
||||||
|
vm: this,
|
||||||
|
add: this.add
|
||||||
|
}) : vue.createVNode("div", {
|
||||||
|
"key": 'a_def',
|
||||||
|
"class": "_fc-group-plus-minus _fc-group-add fc-clock",
|
||||||
|
"onClick": this.add
|
||||||
|
}, null) : keys.map(function (key, index) {
|
||||||
|
var _this12$cacheRule$key = _this12.cacheRule[key],
|
||||||
|
rule = _this12$cacheRule$key.rule,
|
||||||
|
options = _this12$cacheRule$key.options;
|
||||||
|
var btn = button && !disabled ? _this12.makeIcon(keys.length, index, key) : [];
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"class": "_fc-group-container",
|
||||||
|
"key": key
|
||||||
|
}, [vue.createVNode(Type, vue.mergeProps({
|
||||||
|
"key": key
|
||||||
|
}, {
|
||||||
|
disabled: disabled,
|
||||||
|
'onUpdate:modelValue': function onUpdateModelValue(formData) {
|
||||||
|
return _this12.formData(key, formData);
|
||||||
|
},
|
||||||
|
'onEmit-event': function onEmitEvent(name) {
|
||||||
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||||
|
args[_key - 1] = arguments[_key];
|
||||||
|
}
|
||||||
|
|
||||||
|
return _this12.emitEvent(name, args, index, key);
|
||||||
|
},
|
||||||
|
'onUpdate:api': function onUpdateApi($f) {
|
||||||
|
return _this12.add$f(index, key, $f);
|
||||||
|
},
|
||||||
|
inFor: true,
|
||||||
|
modelValue: _this12.field ? _defineProperty({}, _this12.field, _this12._value(_this12.modelValue[index])) : _this12.modelValue[index],
|
||||||
|
rule: rule,
|
||||||
|
option: options,
|
||||||
|
extendOption: true
|
||||||
|
}), null), vue.createVNode("div", {
|
||||||
|
"class": "_fc-group-idx"
|
||||||
|
}, [index + 1]), btn.length ? vue.createVNode("div", {
|
||||||
|
"class": "_fc-group-handle fc-clock"
|
||||||
|
}, [btn]) : null]);
|
||||||
|
});
|
||||||
|
return vue.createVNode("div", {
|
||||||
|
"key": 'con',
|
||||||
|
"class": '_fc-group ' + (disabled ? '_fc-group-disabled' : '')
|
||||||
|
}, [children]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Group;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-elm-group",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "@form-create/element-ui 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"element-ui"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-elm-group",
|
||||||
|
"exportName": "FcGroup",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,310 @@
|
||||||
|
import {hasProperty} from '@form-create/utils/lib/type';
|
||||||
|
import {defineComponent, markRaw, nextTick, watch} from 'vue';
|
||||||
|
import deepExtend, {deepCopy} from '@form-create/utils/lib/deepextend';
|
||||||
|
import extend from '@form-create/utils/lib/extend';
|
||||||
|
import './style.css';
|
||||||
|
|
||||||
|
const NAME = 'fcGroup';
|
||||||
|
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
field: String,
|
||||||
|
rule: Array,
|
||||||
|
expand: Number,
|
||||||
|
options: Object,
|
||||||
|
button: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
defaultValue: Object,
|
||||||
|
sortBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
syncDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
onBeforeRemove: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onBeforeAdd: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formCreateInject: Object,
|
||||||
|
parse: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
len: 0,
|
||||||
|
cacheRule: {},
|
||||||
|
cacheValue: {},
|
||||||
|
sort: [],
|
||||||
|
form: markRaw(this.formCreateInject.form.$form())
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change', 'itemMounted', 'remove', 'add'],
|
||||||
|
watch: {
|
||||||
|
rule: {
|
||||||
|
handler(n, o) {
|
||||||
|
Object.keys(this.cacheRule).forEach(v => {
|
||||||
|
const item = this.cacheRule[v];
|
||||||
|
if (item.$f) {
|
||||||
|
const val = item.$f.formData();
|
||||||
|
if (n === o) {
|
||||||
|
item.$f.deferSyncValue(() => {
|
||||||
|
deepExtend(item.rule, n);
|
||||||
|
item.$f.setValue(val);
|
||||||
|
}, true);
|
||||||
|
} else {
|
||||||
|
const val = item.$f.formData();
|
||||||
|
item.$f.once('reloading', () => {
|
||||||
|
item.$f.setValue(val);
|
||||||
|
})
|
||||||
|
item.rule = deepCopy(n);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
expand(n) {
|
||||||
|
let d = n - this.modelValue.length;
|
||||||
|
if (d > 0) {
|
||||||
|
this.expandRule(d);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
handler(n) {
|
||||||
|
n = n || [];
|
||||||
|
let keys = Object.keys(this.sort), total = keys.length, len = total - n.length;
|
||||||
|
if (len < 0) {
|
||||||
|
for (let i = len; i < 0; i++) {
|
||||||
|
this.addRule(n.length + i, true);
|
||||||
|
}
|
||||||
|
for (let i = 0; i < total; i++) {
|
||||||
|
this.setValue(keys[i], n[i]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (len > 0) {
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
this.removeRule(keys[total - i - 1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
n.forEach((val, i) => {
|
||||||
|
this.setValue(keys[i], n[i]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_value(v) {
|
||||||
|
return (v && hasProperty(v, this.field)) ? v[this.field] : v;
|
||||||
|
},
|
||||||
|
cache(k, val) {
|
||||||
|
this.cacheValue[k] = JSON.stringify(val);
|
||||||
|
},
|
||||||
|
input(value) {
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
formData(key, formData) {
|
||||||
|
const cacheRule = this.cacheRule;
|
||||||
|
const keys = this.sort;
|
||||||
|
if (keys.filter(k => cacheRule[k].$f).length !== keys.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const value = keys.map(k => {
|
||||||
|
const data = key === k ? formData : {...this.cacheRule[k].$f.form};
|
||||||
|
const value = this.field ? data[this.field] || null : data;
|
||||||
|
this.cache(k, value);
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
setValue(key, value) {
|
||||||
|
const field = this.field
|
||||||
|
if (field) {
|
||||||
|
value = {[field]: this._value(value)};
|
||||||
|
}
|
||||||
|
if (this.cacheValue[key] === JSON.stringify(field ? value[field] : value)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.cache(key, value);
|
||||||
|
},
|
||||||
|
addRule(i, emit) {
|
||||||
|
const rule = this.formCreateInject.form.copyRules(this.rule || []);
|
||||||
|
const options = this.options ? {...this.options} : {
|
||||||
|
submitBtn: false,
|
||||||
|
resetBtn: false,
|
||||||
|
};
|
||||||
|
if (this.defaultValue) {
|
||||||
|
if (!options.formData) options.formData = {};
|
||||||
|
const defVal = deepCopy(this.defaultValue);
|
||||||
|
extend(options.formData, this.field ? {[this.field]: defVal} : defVal);
|
||||||
|
}
|
||||||
|
this.parse && this.parse({rule, options, index: this.sort.length});
|
||||||
|
this.cacheRule[++this.len] = {rule, options};
|
||||||
|
if (emit) {
|
||||||
|
nextTick(() => this.$emit('add', rule, Object.keys(this.cacheRule).length - 1));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add$f(i, key, $f) {
|
||||||
|
this.cacheRule[key].$f = $f;
|
||||||
|
nextTick(() => {
|
||||||
|
this.$emit('itemMounted', $f, Object.keys(this.cacheRule).indexOf(key));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
removeRule(key, emit) {
|
||||||
|
const index = Object.keys(this.cacheRule).indexOf(key);
|
||||||
|
delete this.cacheRule[key];
|
||||||
|
delete this.cacheValue[key];
|
||||||
|
if (emit) {
|
||||||
|
nextTick(() => this.$emit('remove', index));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add(i) {
|
||||||
|
if (this.disabled || false === this.onBeforeAdd(this.modelValue)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const value = [...this.modelValue];
|
||||||
|
value.push(this.defaultValue ? deepCopy(this.defaultValue) : (this.field ? null : {}));
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
del(index, key) {
|
||||||
|
if (this.disabled || false === this.onBeforeRemove(this.modelValue, index)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.removeRule(key, true);
|
||||||
|
const value = [...this.modelValue];
|
||||||
|
value.splice(index, 1);
|
||||||
|
this.input(value);
|
||||||
|
},
|
||||||
|
addIcon(key) {
|
||||||
|
return <div class="_fc-group-btn _fc-group-plus-minus" onClick={this.add}></div>;
|
||||||
|
},
|
||||||
|
delIcon(index, key) {
|
||||||
|
return <div class="_fc-group-btn _fc-group-plus-minus _fc-group-minus"
|
||||||
|
onClick={() => this.del(index, key)}></div>
|
||||||
|
},
|
||||||
|
sortUpIcon(index) {
|
||||||
|
return <div class="_fc-group-btn _fc-group-arrow _fc-group-up"
|
||||||
|
onClick={() => this.changeSort(index, -1)}></div>
|
||||||
|
},
|
||||||
|
sortDownIcon(index) {
|
||||||
|
return <div class="_fc-group-btn _fc-group-arrow _fc-group-down"
|
||||||
|
onClick={() => this.changeSort(index, 1)}></div>
|
||||||
|
},
|
||||||
|
changeSort(index, sort) {
|
||||||
|
const a = this.sort[index];
|
||||||
|
this.sort[index] = this.sort[index + sort];
|
||||||
|
this.sort[index + sort] = a;
|
||||||
|
this.formData(0);
|
||||||
|
},
|
||||||
|
makeIcon(total, index, key) {
|
||||||
|
if (this.$slots.button) {
|
||||||
|
return this.$slots.button({
|
||||||
|
total,
|
||||||
|
index,
|
||||||
|
vm: this,
|
||||||
|
key,
|
||||||
|
del: () => this.del(index, key),
|
||||||
|
add: this.add
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const btn = [];
|
||||||
|
if ((!this.max || total < this.max) && total === index + 1) {
|
||||||
|
btn.push(this.addIcon(key));
|
||||||
|
}
|
||||||
|
if (total > this.min) {
|
||||||
|
btn.push(this.delIcon(index, key));
|
||||||
|
}
|
||||||
|
if (this.sortBtn && index) {
|
||||||
|
btn.push(this.sortUpIcon(index));
|
||||||
|
}
|
||||||
|
if (this.sortBtn && index !== total - 1) {
|
||||||
|
btn.push(this.sortDownIcon(index));
|
||||||
|
}
|
||||||
|
return btn;
|
||||||
|
},
|
||||||
|
emitEvent(name, args, index, key) {
|
||||||
|
this.$emit(name, ...args, this.cacheRule[key].$f, index);
|
||||||
|
},
|
||||||
|
expandRule(n) {
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
this.addRule(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
watch(() => ({...this.cacheRule}), (n) => {
|
||||||
|
this.sort = Object.keys(n);
|
||||||
|
}, {immediate: true})
|
||||||
|
const d = (this.expand || 0) - this.modelValue.length;
|
||||||
|
for (let i = 0; i < this.modelValue.length; i++) {
|
||||||
|
this.addRule(i);
|
||||||
|
}
|
||||||
|
if (d > 0) {
|
||||||
|
this.expandRule(d);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const keys = this.sort;
|
||||||
|
const button = this.button;
|
||||||
|
const Type = this.form;
|
||||||
|
const disabled = this.disabled;
|
||||||
|
|
||||||
|
const children = keys.length === 0 ?
|
||||||
|
(this.$slots.default ? (this.$slots.default({
|
||||||
|
vm: this,
|
||||||
|
add: this.add
|
||||||
|
})) : <div key={'a_def'} class="_fc-group-plus-minus _fc-group-add fc-clock"
|
||||||
|
onClick={this.add}/>) : keys.map((key, index) => {
|
||||||
|
const {rule, options} = this.cacheRule[key];
|
||||||
|
const btn = button && !disabled ? this.makeIcon(keys.length, index, key) : [];
|
||||||
|
return <div class="_fc-group-container" key={key}>
|
||||||
|
<Type
|
||||||
|
key={key}
|
||||||
|
{...{
|
||||||
|
disabled,
|
||||||
|
'onUpdate:modelValue': (formData) => this.formData(key, formData),
|
||||||
|
'onEmit-event': (name, ...args) => this.emitEvent(name, args, index, key),
|
||||||
|
'onUpdate:api': ($f) => this.add$f(index, key, $f),
|
||||||
|
inFor: true,
|
||||||
|
modelValue: this.field ? {[this.field]: this._value(this.modelValue[index])} : this.modelValue[index],
|
||||||
|
rule,
|
||||||
|
option: options,
|
||||||
|
extendOption: true
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div class="_fc-group-idx">{index + 1}</div>
|
||||||
|
{(btn.length) ? <div class="_fc-group-handle fc-clock">{btn}</div> : null}
|
||||||
|
</div>
|
||||||
|
});
|
||||||
|
return <div key={'con'} class={'_fc-group ' + (disabled ? '_fc-group-disabled' : '')}>{children}</div>
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Group from './component';
|
||||||
|
|
||||||
|
export default Group;
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
._fc-group{
|
||||||
|
display: flex;
|
||||||
|
min-height: 38px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-disabled ._fc-group-btn, ._fc-group-disabled ._fc-group-add{
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-handle {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px;
|
||||||
|
right: 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
padding: 3px 8px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-btn{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-idx {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px;
|
||||||
|
left: 10px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-handle ._fc-group-btn + ._fc-group-btn {
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-container{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-arrow {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-arrow::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 5px;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-left: 2px solid #999;
|
||||||
|
border-top: 2px solid #999;
|
||||||
|
}
|
||||||
|
._fc-group-arrow::before {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-arrow._fc-group-down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-plus-minus {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-plus-minus::before,
|
||||||
|
._fc-group-plus-minus::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 60%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #409eff;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-plus-minus::before {
|
||||||
|
transform: translate(-50%, -50%) rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-plus-minus._fc-group-minus::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
._fc-group-plus-minus._fc-group-minus::after {
|
||||||
|
background-color: #f56c6c;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
._fc-group-add{
|
||||||
|
cursor: pointer;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
border: 1px solid rgb(64 158 255 / 50%);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
._fc-group-add._fc-group-plus-minus::before, ._fc-group-add._fc-group-plus-minus::after {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-elm-radio
|
||||||
|
|
||||||
|
@form-create/element-ui 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-radio v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with radio
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { defineComponent, toRef, ref, watch, createVNode, resolveComponent, mergeProps } from 'vue';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcRadio';
|
||||||
|
var Radio = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
"default": ''
|
||||||
|
},
|
||||||
|
type: String,
|
||||||
|
input: Boolean,
|
||||||
|
inputValue: String
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup: function setup(props, _) {
|
||||||
|
var options = toRef(props.formCreateInject, 'options', []);
|
||||||
|
var value = toRef(props, 'modelValue');
|
||||||
|
var inputValue = toRef(props, 'inputValue', '');
|
||||||
|
var customValue = ref(inputValue.value);
|
||||||
|
var input = toRef(props, 'input', false);
|
||||||
|
|
||||||
|
var _options = function _options() {
|
||||||
|
return Array.isArray(options.value) ? options.value : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(inputValue, function (n) {
|
||||||
|
if (!input.value) {
|
||||||
|
customValue.value = n;
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCustomValue(n);
|
||||||
|
});
|
||||||
|
|
||||||
|
var onInput = function onInput(n) {
|
||||||
|
_.emit('update:modelValue', n);
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateCustomValue = function updateCustomValue(n) {
|
||||||
|
var o = customValue.value;
|
||||||
|
customValue.value = n;
|
||||||
|
|
||||||
|
if (value.value === o) {
|
||||||
|
onInput(n);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value: value,
|
||||||
|
onInput: onInput,
|
||||||
|
updateCustomValue: updateCustomValue,
|
||||||
|
customValue: customValue,
|
||||||
|
makeInput: function makeInput(Type) {
|
||||||
|
if (!input.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return createVNode(Type, {
|
||||||
|
"value": customValue.value,
|
||||||
|
"label": customValue.value
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(resolveComponent("ElInput"), {
|
||||||
|
"modelValue": customValue.value,
|
||||||
|
"onUpdate:modelValue": updateCustomValue
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this$$slots$default,
|
||||||
|
_this$$slots,
|
||||||
|
_this = this;
|
||||||
|
|
||||||
|
var name = this.type === 'button' ? 'ElRadioButton' : 'ElRadio';
|
||||||
|
var Type = resolveComponent(name);
|
||||||
|
return createVNode(resolveComponent("ElRadioGroup"), mergeProps(this.$attrs, {
|
||||||
|
"modelValue": this.value,
|
||||||
|
"onUpdate:modelValue": this.onInput,
|
||||||
|
"ref": "el"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [_this.options().map(function (opt, index) {
|
||||||
|
var props = _objectSpread2({}, opt);
|
||||||
|
|
||||||
|
var value = props.value;
|
||||||
|
var label = props.label;
|
||||||
|
delete props.value;
|
||||||
|
delete props.label;
|
||||||
|
return createVNode(Type, mergeProps(props, {
|
||||||
|
"label": value,
|
||||||
|
"value": value,
|
||||||
|
"key": name + index + '-' + value
|
||||||
|
}), {
|
||||||
|
"default": function _default() {
|
||||||
|
return [label || value || ''];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots), _this.makeInput(Type)];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default'])));
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Radio as default };
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-radio v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with radio
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import{defineComponent as e,toRef as t,ref as u,watch as n,createVNode as r,resolveComponent as l,mergeProps as a}from"vue";function o(e,t){var u=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),u.push.apply(u,n)}return u}function i(e){for(var t=1;t<arguments.length;t++){var u=null!=arguments[t]?arguments[t]:{};t%2?o(Object(u),!0).forEach((function(t){c(e,t,u[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(u)):o(Object(u)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(u,t))}))}return e}function c(e,t,u){return t in e?Object.defineProperty(e,t,{value:u,enumerable:!0,configurable:!0,writable:!0}):e[t]=u,e}var f=e({name:"fcRadio",inheritAttrs:!1,props:{formCreateInject:Object,modelValue:{type:[String,Number,Boolean],default:""},type:String,input:Boolean,inputValue:String},emits:["update:modelValue","fc.el"],setup:function(e,a){var o=t(e.formCreateInject,"options",[]),i=t(e,"modelValue"),c=t(e,"inputValue",""),f=u(c.value),p=t(e,"input",!1);n(c,(function(e){p.value?d(e):f.value=e}));var s=function(e){a.emit("update:modelValue",e)},d=function(e){var t=f.value;f.value=e,i.value===t&&s(e)};return{options:function(){return Array.isArray(o.value)?o.value:[]},value:i,onInput:s,updateCustomValue:d,customValue:f,makeInput:function(e){if(p.value)return r(e,{value:f.value,label:f.value},{default:function(){return[r(l("ElInput"),{modelValue:f.value,"onUpdate:modelValue":d},null)]}})}}},render:function(){var e,t,u,n,o=this,c="button"===this.type?"ElRadioButton":"ElRadio",f=l(c);return r(l("ElRadioGroup"),a(this.$attrs,{modelValue:this.value,"onUpdate:modelValue":this.onInput,ref:"el"}),i({default:function(){return[o.options().map((function(e,t){var u=i({},e),n=u.value,l=u.label;return delete u.value,delete u.label,r(f,a(u,{label:n,value:n,key:c+t+"-"+n}),{default:function(){return[l||n||""]}})})),null===(e=(t=o.$slots).default)||void 0===e?void 0:e.call(t),o.makeInput(f)]}},(u=this.$slots,n=["default"],Object.keys(u).reduce((function(e,t){return n&&-1!==n.indexOf(t)||e.push(u[t]),e}),[]))))},mounted:function(){this.$emit("fc.el",this.$refs.el)}});export{f as default};
|
||||||
|
|
@ -0,0 +1,191 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-radio v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with radio
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcRadio = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcRadio';
|
||||||
|
var Radio = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
"default": ''
|
||||||
|
},
|
||||||
|
type: String,
|
||||||
|
input: Boolean,
|
||||||
|
inputValue: String
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup: function setup(props, _) {
|
||||||
|
var options = vue.toRef(props.formCreateInject, 'options', []);
|
||||||
|
var value = vue.toRef(props, 'modelValue');
|
||||||
|
var inputValue = vue.toRef(props, 'inputValue', '');
|
||||||
|
var customValue = vue.ref(inputValue.value);
|
||||||
|
var input = vue.toRef(props, 'input', false);
|
||||||
|
|
||||||
|
var _options = function _options() {
|
||||||
|
return Array.isArray(options.value) ? options.value : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
vue.watch(inputValue, function (n) {
|
||||||
|
if (!input.value) {
|
||||||
|
customValue.value = n;
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCustomValue(n);
|
||||||
|
});
|
||||||
|
|
||||||
|
var onInput = function onInput(n) {
|
||||||
|
_.emit('update:modelValue', n);
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateCustomValue = function updateCustomValue(n) {
|
||||||
|
var o = customValue.value;
|
||||||
|
customValue.value = n;
|
||||||
|
|
||||||
|
if (value.value === o) {
|
||||||
|
onInput(n);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value: value,
|
||||||
|
onInput: onInput,
|
||||||
|
updateCustomValue: updateCustomValue,
|
||||||
|
customValue: customValue,
|
||||||
|
makeInput: function makeInput(Type) {
|
||||||
|
if (!input.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return vue.createVNode(Type, {
|
||||||
|
"value": customValue.value,
|
||||||
|
"label": customValue.value
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(vue.resolveComponent("ElInput"), {
|
||||||
|
"modelValue": customValue.value,
|
||||||
|
"onUpdate:modelValue": updateCustomValue
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this$$slots$default,
|
||||||
|
_this$$slots,
|
||||||
|
_this = this;
|
||||||
|
|
||||||
|
var name = this.type === 'button' ? 'ElRadioButton' : 'ElRadio';
|
||||||
|
var Type = vue.resolveComponent(name);
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElRadioGroup"), vue.mergeProps(this.$attrs, {
|
||||||
|
"modelValue": this.value,
|
||||||
|
"onUpdate:modelValue": this.onInput,
|
||||||
|
"ref": "el"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [_this.options().map(function (opt, index) {
|
||||||
|
var props = _objectSpread2({}, opt);
|
||||||
|
|
||||||
|
var value = props.value;
|
||||||
|
var label = props.label;
|
||||||
|
delete props.value;
|
||||||
|
delete props.label;
|
||||||
|
return vue.createVNode(Type, vue.mergeProps(props, {
|
||||||
|
"label": value,
|
||||||
|
"value": value,
|
||||||
|
"key": name + index + '-' + value
|
||||||
|
}), {
|
||||||
|
"default": function _default() {
|
||||||
|
return [label || value || ''];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots), _this.makeInput(Type)];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default'])));
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Radio;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-radio v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with radio
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
!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).FcRadio={},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){r(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,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var u=t.defineComponent({name:"fcRadio",inheritAttrs:!1,props:{formCreateInject:Object,modelValue:{type:[String,Number,Boolean],default:""},type:String,input:Boolean,inputValue:String},emits:["update:modelValue","fc.el"],setup:function(e,n){var o=t.toRef(e.formCreateInject,"options",[]),r=t.toRef(e,"modelValue"),u=t.toRef(e,"inputValue",""),l=t.ref(u.value),a=t.toRef(e,"input",!1);t.watch(u,(function(e){a.value?f(e):l.value=e}));var i=function(e){n.emit("update:modelValue",e)},f=function(e){var t=l.value;l.value=e,r.value===t&&i(e)};return{options:function(){return Array.isArray(o.value)?o.value:[]},value:r,onInput:i,updateCustomValue:f,customValue:l,makeInput:function(e){if(a.value)return t.createVNode(e,{value:l.value,label:l.value},{default:function(){return[t.createVNode(t.resolveComponent("ElInput"),{modelValue:l.value,"onUpdate:modelValue":f},null)]}})}}},render:function(){var e,n,r,u,l=this,a="button"===this.type?"ElRadioButton":"ElRadio",i=t.resolveComponent(a);return t.createVNode(t.resolveComponent("ElRadioGroup"),t.mergeProps(this.$attrs,{modelValue:this.value,"onUpdate:modelValue":this.onInput,ref:"el"}),o({default:function(){return[l.options().map((function(e,n){var r=o({},e),u=r.value,l=r.label;return delete r.value,delete r.label,t.createVNode(i,t.mergeProps(r,{label:u,value:u,key:a+n+"-"+u}),{default:function(){return[l||u||""]}})})),null===(e=(n=l.$slots).default)||void 0===e?void 0:e.call(n),l.makeInput(i)]}},(r=this.$slots,u=["default"],Object.keys(r).reduce((function(e,t){return u&&-1!==u.indexOf(t)||e.push(r[t]),e}),[]))))},mounted:function(){this.$emit("fc.el",this.$refs.el)}});e.default=u,Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-elm-radio",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "@form-create/element-ui 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"element-ui"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-elm-radio",
|
||||||
|
"exportName": "FcRadio",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
import {defineComponent, ref, resolveComponent, toRef, watch} from 'vue';
|
||||||
|
import getSlot from '@form-create/utils/lib/slot';
|
||||||
|
|
||||||
|
const NAME = 'fcRadio';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
type: String,
|
||||||
|
input: Boolean,
|
||||||
|
inputValue: String,
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup(props, _) {
|
||||||
|
const options = toRef(props.formCreateInject, 'options', []);
|
||||||
|
const value = toRef(props, 'modelValue');
|
||||||
|
const inputValue = toRef(props, 'inputValue', '');
|
||||||
|
const customValue = ref(inputValue.value);
|
||||||
|
const input = toRef(props, 'input', false);
|
||||||
|
const _options = () => {
|
||||||
|
return Array.isArray(options.value) ? options.value : []
|
||||||
|
}
|
||||||
|
watch(inputValue, (n) => {
|
||||||
|
if (!input.value) {
|
||||||
|
customValue.value = n;
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
updateCustomValue(n);
|
||||||
|
})
|
||||||
|
|
||||||
|
const onInput = (n) => {
|
||||||
|
_.emit('update:modelValue', n);
|
||||||
|
}
|
||||||
|
const updateCustomValue = (n) => {
|
||||||
|
const o = customValue.value;
|
||||||
|
customValue.value = n;
|
||||||
|
if (value.value === o) {
|
||||||
|
onInput(n);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value,
|
||||||
|
onInput,
|
||||||
|
updateCustomValue,
|
||||||
|
customValue,
|
||||||
|
makeInput(Type) {
|
||||||
|
if (!input.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return <Type value={customValue.value} label={customValue.value}>
|
||||||
|
<ElInput modelValue={customValue.value}
|
||||||
|
onUpdate:modelValue={updateCustomValue}></ElInput>
|
||||||
|
</Type>
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const name = this.type === 'button' ? 'ElRadioButton' : 'ElRadio';
|
||||||
|
const Type = resolveComponent(name);
|
||||||
|
return <ElRadioGroup {...this.$attrs} modelValue={this.value} v-slots={getSlot(this.$slots, ['default'])}
|
||||||
|
onUpdate:modelValue={this.onInput} ref="el">{this.options().map((opt, index) => {
|
||||||
|
const props = {...opt};
|
||||||
|
const value = props.value;
|
||||||
|
const label = props.label;
|
||||||
|
delete props.value;
|
||||||
|
delete props.label;
|
||||||
|
return <Type {...props} label={value} value={value}
|
||||||
|
key={name + index + '-' + value}>{label || value || ''}</Type>
|
||||||
|
})}{this.$slots.default?.()}{this.makeInput(Type)}</ElRadioGroup>
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Radio from './component';
|
||||||
|
|
||||||
|
export default Radio;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-elm-select
|
||||||
|
|
||||||
|
@form-create/element-ui 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-select v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with select
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { defineComponent, toRef, createVNode, resolveComponent, mergeProps } from 'vue';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _typeof(obj) {
|
||||||
|
"@babel/helpers - typeof";
|
||||||
|
|
||||||
|
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return typeof obj;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return _typeof(obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
var is = {
|
||||||
|
type: function type(arg, _type) {
|
||||||
|
return Object.prototype.toString.call(arg) === '[object ' + _type + ']';
|
||||||
|
},
|
||||||
|
Undef: function Undef(v) {
|
||||||
|
return v === undefined || v === null;
|
||||||
|
},
|
||||||
|
Element: function Element(arg) {
|
||||||
|
return _typeof(arg) === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg);
|
||||||
|
},
|
||||||
|
trueArray: function trueArray(data) {
|
||||||
|
return Array.isArray(data) && data.length > 0;
|
||||||
|
},
|
||||||
|
Function: function Function(v) {
|
||||||
|
var type = this.getType(v);
|
||||||
|
return type === 'Function' || type === 'AsyncFunction';
|
||||||
|
},
|
||||||
|
getType: function getType(v) {
|
||||||
|
var str = Object.prototype.toString.call(v);
|
||||||
|
return /^\[object (.*)\]$/.exec(str)[1];
|
||||||
|
},
|
||||||
|
empty: function empty(value) {
|
||||||
|
if (value === undefined || value === null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(value) && Array.isArray(value) && !value.length) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return typeof value === 'string' && !value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
['Date', 'Object', 'String', 'Boolean', 'Array', 'Number'].forEach(function (t) {
|
||||||
|
is[t] = function (arg) {
|
||||||
|
return is.type(arg, t);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function hasProperty(rule, k) {
|
||||||
|
return {}.hasOwnProperty.call(rule, k);
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcSelect';
|
||||||
|
var Select = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number, Boolean, Object],
|
||||||
|
"default": undefined
|
||||||
|
},
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup: function setup(props) {
|
||||||
|
var options = toRef(props.formCreateInject, 'options', []);
|
||||||
|
var value = toRef(props, 'modelValue');
|
||||||
|
|
||||||
|
var _options = function _options() {
|
||||||
|
return Array.isArray(options.value) ? options.value : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value: value
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this = this,
|
||||||
|
_this$$slots$default,
|
||||||
|
_this$$slots;
|
||||||
|
|
||||||
|
var makeOption = function makeOption(props, index) {
|
||||||
|
return createVNode(resolveComponent("ElOption"), mergeProps(props, {
|
||||||
|
"key": '' + index + '-' + props.value
|
||||||
|
}), null);
|
||||||
|
};
|
||||||
|
|
||||||
|
var makeOptionGroup = function makeOptionGroup(props, index) {
|
||||||
|
return createVNode(resolveComponent("ElOptionGroup"), {
|
||||||
|
"label": props.label,
|
||||||
|
"key": '' + index + '-' + props.label
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [is.trueArray(props.options) && props.options.map(function (v, index) {
|
||||||
|
return makeOption(v, index);
|
||||||
|
})];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var options = this.options();
|
||||||
|
return createVNode(resolveComponent("ElSelect"), mergeProps(this.$attrs, {
|
||||||
|
"modelValue": this.value,
|
||||||
|
"onUpdate:modelValue": function onUpdateModelValue(v) {
|
||||||
|
return _this.$emit('update:modelValue', v);
|
||||||
|
},
|
||||||
|
"ref": "el"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [options.map(function (props, index) {
|
||||||
|
return hasProperty(props || '', 'options') ? makeOptionGroup(props, index) : makeOption(props, index);
|
||||||
|
}), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default'])));
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Select as default };
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-select v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with select
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import{defineComponent as t,toRef as e,createVNode as r,resolveComponent as n,mergeProps as o}from"vue";function u(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function l(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var c={type:function(t,e){return Object.prototype.toString.call(t)==="[object "+e+"]"},Undef:function(t){return null==t},Element:function(t){return"object"===i(t)&&null!==t&&1===t.nodeType&&!c.Object(t)},trueArray:function(t){return Array.isArray(t)&&t.length>0},Function:function(t){var e=this.getType(t);return"Function"===e||"AsyncFunction"===e},getType:function(t){var e=Object.prototype.toString.call(t);return/^\[object (.*)\]$/.exec(e)[1]},empty:function(t){return null==t||(!(!Array.isArray(t)||!Array.isArray(t)||t.length)||"string"==typeof t&&!t)}};["Date","Object","String","Boolean","Array","Number"].forEach((function(t){c[t]=function(e){return c.type(e,t)}}));var a=t({name:"fcSelect",inheritAttrs:!1,props:{formCreateInject:Object,modelValue:{type:[Array,String,Number,Boolean,Object],default:void 0},type:String},emits:["update:modelValue","fc.el"],setup:function(t){var r=e(t.formCreateInject,"options",[]);return{options:function(){return Array.isArray(r.value)?r.value:[]},value:e(t,"modelValue")}},render:function(){var t,e,i,a,f=this,p=function(t,e){return r(n("ElOption"),o(t,{key:e+"-"+t.value}),null)},y=this.options();return r(n("ElSelect"),o(this.$attrs,{modelValue:this.value,"onUpdate:modelValue":function(t){return f.$emit("update:modelValue",t)},ref:"el"}),function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach((function(e){l(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}({default:function(){return[y.map((function(t,e){return o=t||"",u="options",{}.hasOwnProperty.call(o,u)?function(t,e){return r(n("ElOptionGroup"),{label:t.label,key:e+"-"+t.label},{default:function(){return[c.trueArray(t.options)&&t.options.map((function(t,e){return p(t,e)}))]}})}(t,e):p(t,e);var o,u})),null===(t=(e=f.$slots).default)||void 0===t?void 0:t.call(e)]}},(i=this.$slots,a=["default"],Object.keys(i).reduce((function(t,e){return a&&-1!==a.indexOf(e)||t.push(i[e]),t}),[]))))},mounted:function(){this.$emit("fc.el",this.$refs.el)}});export{a as default};
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-select v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with select
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcSelect = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _typeof(obj) {
|
||||||
|
"@babel/helpers - typeof";
|
||||||
|
|
||||||
|
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return typeof obj;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
_typeof = function (obj) {
|
||||||
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return _typeof(obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
var is = {
|
||||||
|
type: function type(arg, _type) {
|
||||||
|
return Object.prototype.toString.call(arg) === '[object ' + _type + ']';
|
||||||
|
},
|
||||||
|
Undef: function Undef(v) {
|
||||||
|
return v === undefined || v === null;
|
||||||
|
},
|
||||||
|
Element: function Element(arg) {
|
||||||
|
return _typeof(arg) === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg);
|
||||||
|
},
|
||||||
|
trueArray: function trueArray(data) {
|
||||||
|
return Array.isArray(data) && data.length > 0;
|
||||||
|
},
|
||||||
|
Function: function Function(v) {
|
||||||
|
var type = this.getType(v);
|
||||||
|
return type === 'Function' || type === 'AsyncFunction';
|
||||||
|
},
|
||||||
|
getType: function getType(v) {
|
||||||
|
var str = Object.prototype.toString.call(v);
|
||||||
|
return /^\[object (.*)\]$/.exec(str)[1];
|
||||||
|
},
|
||||||
|
empty: function empty(value) {
|
||||||
|
if (value === undefined || value === null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(value) && Array.isArray(value) && !value.length) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return typeof value === 'string' && !value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
['Date', 'Object', 'String', 'Boolean', 'Array', 'Number'].forEach(function (t) {
|
||||||
|
is[t] = function (arg) {
|
||||||
|
return is.type(arg, t);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function hasProperty(rule, k) {
|
||||||
|
return {}.hasOwnProperty.call(rule, k);
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcSelect';
|
||||||
|
var Select = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number, Boolean, Object],
|
||||||
|
"default": undefined
|
||||||
|
},
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup: function setup(props) {
|
||||||
|
var options = vue.toRef(props.formCreateInject, 'options', []);
|
||||||
|
var value = vue.toRef(props, 'modelValue');
|
||||||
|
|
||||||
|
var _options = function _options() {
|
||||||
|
return Array.isArray(options.value) ? options.value : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value: value
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this = this,
|
||||||
|
_this$$slots$default,
|
||||||
|
_this$$slots;
|
||||||
|
|
||||||
|
var makeOption = function makeOption(props, index) {
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElOption"), vue.mergeProps(props, {
|
||||||
|
"key": '' + index + '-' + props.value
|
||||||
|
}), null);
|
||||||
|
};
|
||||||
|
|
||||||
|
var makeOptionGroup = function makeOptionGroup(props, index) {
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElOptionGroup"), {
|
||||||
|
"label": props.label,
|
||||||
|
"key": '' + index + '-' + props.label
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [is.trueArray(props.options) && props.options.map(function (v, index) {
|
||||||
|
return makeOption(v, index);
|
||||||
|
})];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var options = this.options();
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElSelect"), vue.mergeProps(this.$attrs, {
|
||||||
|
"modelValue": this.value,
|
||||||
|
"onUpdate:modelValue": function onUpdateModelValue(v) {
|
||||||
|
return _this.$emit('update:modelValue', v);
|
||||||
|
},
|
||||||
|
"ref": "el"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [options.map(function (props, index) {
|
||||||
|
return hasProperty(props || '', 'options') ? makeOptionGroup(props, index) : makeOption(props, index);
|
||||||
|
}), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default'])));
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Select;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-select v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with select
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
!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).FcSelect={},e.Vue)}(this,(function(e,t){"use strict";function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function n(e){return n="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},n(e)}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var u={type:function(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"},Undef:function(e){return null==e},Element:function(e){return"object"===n(e)&&null!==e&&1===e.nodeType&&!u.Object(e)},trueArray:function(e){return Array.isArray(e)&&e.length>0},Function:function(e){var t=this.getType(e);return"Function"===t||"AsyncFunction"===t},getType:function(e){var t=Object.prototype.toString.call(e);return/^\[object (.*)\]$/.exec(t)[1]},empty:function(e){return null==e||(!(!Array.isArray(e)||!Array.isArray(e)||e.length)||"string"==typeof e&&!e)}};["Date","Object","String","Boolean","Array","Number"].forEach((function(e){u[e]=function(t){return u.type(t,e)}}));var i=t.defineComponent({name:"fcSelect",inheritAttrs:!1,props:{formCreateInject:Object,modelValue:{type:[Array,String,Number,Boolean,Object],default:void 0},type:String},emits:["update:modelValue","fc.el"],setup:function(e){var r=t.toRef(e.formCreateInject,"options",[]);return{options:function(){return Array.isArray(r.value)?r.value:[]},value:t.toRef(e,"modelValue")}},render:function(){var e,n,i,l,c=this,f=function(e,r){return t.createVNode(t.resolveComponent("ElOption"),t.mergeProps(e,{key:r+"-"+e.value}),null)},a=this.options();return t.createVNode(t.resolveComponent("ElSelect"),t.mergeProps(this.$attrs,{modelValue:this.value,"onUpdate:modelValue":function(e){return c.$emit("update:modelValue",e)},ref:"el"}),function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({default:function(){return[a.map((function(e,r){return n=e||"",o="options",{}.hasOwnProperty.call(n,o)?function(e,r){return t.createVNode(t.resolveComponent("ElOptionGroup"),{label:e.label,key:r+"-"+e.label},{default:function(){return[u.trueArray(e.options)&&e.options.map((function(e,t){return f(e,t)}))]}})}(e,r):f(e,r);var n,o})),null===(e=(n=c.$slots).default)||void 0===e?void 0:e.call(n)]}},(i=this.$slots,l=["default"],Object.keys(i).reduce((function(e,t){return l&&-1!==l.indexOf(t)||e.push(i[t]),e}),[]))))},mounted:function(){this.$emit("fc.el",this.$refs.el)}});e.default=i,Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-elm-select",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "@form-create/element-ui 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"element-ui"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-elm-select",
|
||||||
|
"exportName": "FcSelect",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import {defineComponent, toRef} from 'vue';
|
||||||
|
import getSlot from '@form-create/utils/lib/slot';
|
||||||
|
import is, {hasProperty} from '@form-create/utils/lib/type';
|
||||||
|
|
||||||
|
const NAME = 'fcSelect';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
formCreateInject: Object,
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number, Boolean, Object],
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
setup(props) {
|
||||||
|
const options = toRef(props.formCreateInject, 'options', []);
|
||||||
|
const value = toRef(props, 'modelValue');
|
||||||
|
const _options = () => {
|
||||||
|
return Array.isArray(options.value) ? options.value : []
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
options: _options,
|
||||||
|
value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const makeOption = (props, index) => {
|
||||||
|
return <ElOption {...props} key={'' + index + '-' + props.value}/>;
|
||||||
|
}
|
||||||
|
const makeOptionGroup = (props, index) => {
|
||||||
|
return <ElOptionGroup label={props.label}
|
||||||
|
key={'' + index + '-' + props.label}>
|
||||||
|
{is.trueArray(props.options) && props.options.map((v, index) => {
|
||||||
|
return makeOption(v, index);
|
||||||
|
})}
|
||||||
|
</ElOptionGroup>;
|
||||||
|
}
|
||||||
|
const options = this.options();
|
||||||
|
return <ElSelect {...this.$attrs} modelValue={this.value}
|
||||||
|
onUpdate:modelValue={(v) => this.$emit('update:modelValue', v)}
|
||||||
|
v-slots={getSlot(this.$slots, ['default'])} ref="el">{options.map((props, index) => {
|
||||||
|
return hasProperty(props || '', 'options') ? makeOptionGroup(props, index) : makeOption(props, index);
|
||||||
|
})}{this.$slots.default?.()}</ElSelect>;
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Select from './component';
|
||||||
|
|
||||||
|
export default Select;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-elm-tree
|
||||||
|
|
||||||
|
@form-create/element-ui 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-tree v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with tree
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcTree';
|
||||||
|
var Tree = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
formCreateParser: {
|
||||||
|
mergeProp: function mergeProp(ctx) {
|
||||||
|
var props = ctx.prop.props;
|
||||||
|
if (!props.nodeKey) props.nodeKey = 'id';
|
||||||
|
if (!props.props) props.props = {
|
||||||
|
label: 'title'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
"default": function _default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue() {
|
||||||
|
this.setValue();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue: function updateValue() {
|
||||||
|
if (!this.$refs.tree) return;
|
||||||
|
var value;
|
||||||
|
|
||||||
|
if (this.type === 'selected') {
|
||||||
|
value = this.$refs.tree.getCurrentKey();
|
||||||
|
} else {
|
||||||
|
value = this.$refs.tree.getCheckedKeys();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
setValue: function setValue() {
|
||||||
|
if (!this.$refs.tree) return;
|
||||||
|
var type = this.type;
|
||||||
|
|
||||||
|
if (type === 'selected') {
|
||||||
|
this.$refs.tree.setCurrentKey(this.modelValue);
|
||||||
|
} else {
|
||||||
|
this.$refs.tree.setCheckedKeys(toArray(this.modelValue));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
return createVNode(resolveComponent("ElTree"), mergeProps(this.$attrs, {
|
||||||
|
"ref": "tree",
|
||||||
|
"onCheck": this.updateValue,
|
||||||
|
"onNode-click": this.updateValue
|
||||||
|
}), this.$slots);
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.setValue();
|
||||||
|
this.$emit('fc.el', this.$refs.tree);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Tree as default };
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-tree v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with tree
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import{defineComponent as e,createVNode as t,resolveComponent as r,mergeProps as s}from"vue";var i=e({name:"fcTree",inheritAttrs:!1,formCreateParser:{mergeProp:function(e){var t=e.prop.props;t.nodeKey||(t.nodeKey="id"),t.props||(t.props={label:"title"})}},props:{type:String,modelValue:{type:[Array,String,Number],default:function(){return[]}}},emits:["update:modelValue","fc.el"],watch:{modelValue:function(){this.setValue()}},methods:{updateValue:function(){var e;this.$refs.tree&&(e="selected"===this.type?this.$refs.tree.getCurrentKey():this.$refs.tree.getCheckedKeys(),this.$emit("update:modelValue",e))},setValue:function(){var e;this.$refs.tree&&("selected"===this.type?this.$refs.tree.setCurrentKey(this.modelValue):this.$refs.tree.setCheckedKeys((e=this.modelValue,Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e])))}},render:function(){return t(r("ElTree"),s(this.$attrs,{ref:"tree",onCheck:this.updateValue,"onNode-click":this.updateValue}),this.$slots)},mounted:function(){this.setValue(),this.$emit("fc.el",this.$refs.tree)}});export{i as default};
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-tree v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with tree
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcTree = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcTree';
|
||||||
|
var Tree = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
formCreateParser: {
|
||||||
|
mergeProp: function mergeProp(ctx) {
|
||||||
|
var props = ctx.prop.props;
|
||||||
|
if (!props.nodeKey) props.nodeKey = 'id';
|
||||||
|
if (!props.props) props.props = {
|
||||||
|
label: 'title'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
"default": function _default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue() {
|
||||||
|
this.setValue();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue: function updateValue() {
|
||||||
|
if (!this.$refs.tree) return;
|
||||||
|
var value;
|
||||||
|
|
||||||
|
if (this.type === 'selected') {
|
||||||
|
value = this.$refs.tree.getCurrentKey();
|
||||||
|
} else {
|
||||||
|
value = this.$refs.tree.getCheckedKeys();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
setValue: function setValue() {
|
||||||
|
if (!this.$refs.tree) return;
|
||||||
|
var type = this.type;
|
||||||
|
|
||||||
|
if (type === 'selected') {
|
||||||
|
this.$refs.tree.setCurrentKey(this.modelValue);
|
||||||
|
} else {
|
||||||
|
this.$refs.tree.setCheckedKeys(toArray(this.modelValue));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
return vue.createVNode(vue.resolveComponent("ElTree"), vue.mergeProps(this.$attrs, {
|
||||||
|
"ref": "tree",
|
||||||
|
"onCheck": this.updateValue,
|
||||||
|
"onNode-click": this.updateValue
|
||||||
|
}), this.$slots);
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.setValue();
|
||||||
|
this.$emit('fc.el', this.$refs.tree);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Tree;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-tree v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with tree
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
!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).FcTree={},e.Vue)}(this,(function(e,t){"use strict";var r=t.defineComponent({name:"fcTree",inheritAttrs:!1,formCreateParser:{mergeProp:function(e){var t=e.prop.props;t.nodeKey||(t.nodeKey="id"),t.props||(t.props={label:"title"})}},props:{type:String,modelValue:{type:[Array,String,Number],default:function(){return[]}}},emits:["update:modelValue","fc.el"],watch:{modelValue:function(){this.setValue()}},methods:{updateValue:function(){var e;this.$refs.tree&&(e="selected"===this.type?this.$refs.tree.getCurrentKey():this.$refs.tree.getCheckedKeys(),this.$emit("update:modelValue",e))},setValue:function(){var e;this.$refs.tree&&("selected"===this.type?this.$refs.tree.setCurrentKey(this.modelValue):this.$refs.tree.setCheckedKeys((e=this.modelValue,Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e])))}},render:function(){return t.createVNode(t.resolveComponent("ElTree"),t.mergeProps(this.$attrs,{ref:"tree",onCheck:this.updateValue,"onNode-click":this.updateValue}),this.$slots)},mounted:function(){this.setValue(),this.$emit("fc.el",this.$refs.tree)}});e.default=r,Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-elm-tree",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "@form-create/element-ui 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"element-ui"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-elm-tree",
|
||||||
|
"exportName": "FcTree",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import {defineComponent} from 'vue';
|
||||||
|
import toArray from '@form-create/utils/lib/toarray';
|
||||||
|
|
||||||
|
const NAME = 'fcTree';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
formCreateParser: {
|
||||||
|
mergeProp(ctx) {
|
||||||
|
const props = ctx.prop.props;
|
||||||
|
if (!props.nodeKey) props.nodeKey = 'id';
|
||||||
|
if (!props.props) props.props = {
|
||||||
|
label: 'title'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default: () => ([])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'fc.el'],
|
||||||
|
watch: {
|
||||||
|
modelValue() {
|
||||||
|
this.setValue();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue() {
|
||||||
|
if (!this.$refs.tree) return;
|
||||||
|
let value;
|
||||||
|
if (this.type === 'selected') {
|
||||||
|
value = this.$refs.tree.getCurrentKey();
|
||||||
|
} else {
|
||||||
|
value = this.$refs.tree.getCheckedKeys();
|
||||||
|
}
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
},
|
||||||
|
setValue() {
|
||||||
|
if (!this.$refs.tree) return;
|
||||||
|
const type = this.type;
|
||||||
|
|
||||||
|
if (type === 'selected') {
|
||||||
|
this.$refs.tree.setCurrentKey(this.modelValue);
|
||||||
|
} else {
|
||||||
|
this.$refs.tree.setCheckedKeys(toArray(this.modelValue));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return <ElTree {...this.$attrs} ref="tree" onCheck={this.updateValue}
|
||||||
|
onNode-click={this.updateValue}
|
||||||
|
v-slots={this.$slots}/>;
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setValue();
|
||||||
|
this.$emit('fc.el',this.$refs.tree);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Tree from './component';
|
||||||
|
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-elm-upload
|
||||||
|
|
||||||
|
@form-create/element-ui 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-upload v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with upload
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { openBlock, createElementBlock, createElementVNode, defineComponent, createVNode, Fragment, resolveComponent, mergeProps } from 'vue';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
function styleInject(css, ref) {
|
||||||
|
if ( ref === void 0 ) ref = {};
|
||||||
|
var insertAt = ref.insertAt;
|
||||||
|
|
||||||
|
if (!css || typeof document === 'undefined') { return; }
|
||||||
|
|
||||||
|
var head = document.head || document.getElementsByTagName('head')[0];
|
||||||
|
var style = document.createElement('style');
|
||||||
|
style.type = 'text/css';
|
||||||
|
|
||||||
|
if (insertAt === 'top') {
|
||||||
|
if (head.firstChild) {
|
||||||
|
head.insertBefore(style, head.firstChild);
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (style.styleSheet) {
|
||||||
|
style.styleSheet.cssText = css;
|
||||||
|
} else {
|
||||||
|
style.appendChild(document.createTextNode(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var css_248z = "._fc-exceed .el-upload{display:none}.el-upload-list.is-disabled .el-upload{cursor:not-allowed!important}";
|
||||||
|
styleInject(css_248z);
|
||||||
|
|
||||||
|
var script = {
|
||||||
|
name: 'IconUpload'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3 = [_hoisted_2];
|
||||||
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
|
||||||
|
}
|
||||||
|
|
||||||
|
script.render = render;
|
||||||
|
|
||||||
|
function parseFile(file, i) {
|
||||||
|
return {
|
||||||
|
url: file,
|
||||||
|
name: getFileName(file),
|
||||||
|
uid: i
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFileName(file) {
|
||||||
|
return ('' + file).split('/').pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcUpload';
|
||||||
|
var Upload = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
formCreateParser: {
|
||||||
|
toFormValue: function toFormValue(value) {
|
||||||
|
return toArray(value);
|
||||||
|
},
|
||||||
|
toValue: function toValue(formValue, ctx) {
|
||||||
|
return ctx.prop.props.limit === 1 ? formValue[0] || '' : formValue;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
previewMask: undefined,
|
||||||
|
onPreview: Function,
|
||||||
|
modalTitle: String,
|
||||||
|
modelValue: [Array, String]
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change', 'remove', 'fc.el'],
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
previewVisible: false,
|
||||||
|
previewImage: '',
|
||||||
|
fileList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created: function created() {
|
||||||
|
this.fileList = toArray(this.modelValue).map(parseFile);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue(n) {
|
||||||
|
this.fileList = toArray(n).map(parseFile);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePreview: function handlePreview(file) {
|
||||||
|
if (this.onPreview) {
|
||||||
|
this.onPreview.apply(this, arguments);
|
||||||
|
} else {
|
||||||
|
this.previewImage = file.url;
|
||||||
|
this.previewVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: function update(fileList) {
|
||||||
|
var files = fileList.map(function (file) {
|
||||||
|
return file.url;
|
||||||
|
}).filter(function (url) {
|
||||||
|
return url !== undefined;
|
||||||
|
});
|
||||||
|
this.$emit('update:modelValue', files);
|
||||||
|
},
|
||||||
|
handleCancel: function handleCancel() {
|
||||||
|
this.previewVisible = false;
|
||||||
|
},
|
||||||
|
handleChange: function handleChange(file, fileList) {
|
||||||
|
this.$emit.apply(this, ['change'].concat(Array.prototype.slice.call(arguments)));
|
||||||
|
|
||||||
|
if (file.status === 'success') {
|
||||||
|
this.update(fileList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRemove: function handleRemove(file, fileList) {
|
||||||
|
this.$emit.apply(this, ['remove'].concat(Array.prototype.slice.call(arguments)));
|
||||||
|
this.update(fileList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this$$slots$default,
|
||||||
|
_this$$slots,
|
||||||
|
_this = this;
|
||||||
|
|
||||||
|
var len = toArray(this.modelValue).length;
|
||||||
|
return createVNode(Fragment, null, [createVNode(resolveComponent("ElUpload"), mergeProps({
|
||||||
|
"key": len,
|
||||||
|
"list-type": "picture-card"
|
||||||
|
}, this.$attrs, {
|
||||||
|
"class": {
|
||||||
|
'_fc-exceed': this.$attrs.limit ? this.$attrs.limit <= len : false
|
||||||
|
},
|
||||||
|
"onPreview": this.handlePreview,
|
||||||
|
"onChange": this.handleChange,
|
||||||
|
"onRemove": this.handleRemove,
|
||||||
|
"fileList": this.fileList,
|
||||||
|
"ref": "upload"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [((_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || createVNode(resolveComponent("ElIcon"), null, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode(script, null, null)];
|
||||||
|
}
|
||||||
|
})];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default']))), createVNode(resolveComponent("ElDialog"), {
|
||||||
|
"appendToBody": true,
|
||||||
|
"modal": this.previewMask,
|
||||||
|
"title": this.modalTitle,
|
||||||
|
"modelValue": this.previewVisible,
|
||||||
|
"onClose": this.handleCancel
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [createVNode("img", {
|
||||||
|
"style": "width: 100%",
|
||||||
|
"src": _this.previewImage
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
})]);
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.upload);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Upload as default };
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-upload v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with upload
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import{openBlock as e,createElementBlock as t,createElementVNode as i,defineComponent as n,createVNode as r,Fragment as l,resolveComponent as o,mergeProps as a}from"vue";function s(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function u(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?s(Object(i),!0).forEach((function(t){c(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):s(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function c(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function d(e){return Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e]}!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===i&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("._fc-exceed .el-upload{display:none}.el-upload-list.is-disabled .el-upload{cursor:not-allowed!important}");var p={name:"IconUpload"},f={class:"icon",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},h=[i("path",{fill:"currentColor",d:"M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"},null,-1)];function m(e,t){return{url:e,name:v(e),uid:t}}function v(e){return(""+e).split("/").pop()}p.render=function(i,n,r,l,o,a){return e(),t("svg",f,h)};var y=n({name:"fcUpload",inheritAttrs:!1,formCreateParser:{toFormValue:function(e){return d(e)},toValue:function(e,t){return 1===t.prop.props.limit?e[0]||"":e}},props:{previewMask:void 0,onPreview:Function,modalTitle:String,modelValue:[Array,String]},emits:["update:modelValue","change","remove","fc.el"],data:function(){return{previewVisible:!1,previewImage:"",fileList:[]}},created:function(){this.fileList=d(this.modelValue).map(m)},watch:{modelValue:function(e){this.fileList=d(e).map(m)}},methods:{handlePreview:function(e){this.onPreview?this.onPreview.apply(this,arguments):(this.previewImage=e.url,this.previewVisible=!0)},update:function(e){var t=e.map((function(e){return e.url})).filter((function(e){return void 0!==e}));this.$emit("update:modelValue",t)},handleCancel:function(){this.previewVisible=!1},handleChange:function(e,t){this.$emit.apply(this,["change"].concat(Array.prototype.slice.call(arguments))),"success"===e.status&&this.update(t)},handleRemove:function(e,t){this.$emit.apply(this,["remove"].concat(Array.prototype.slice.call(arguments))),this.update(t)}},render:function(){var e,t,i,n,s=this,c=d(this.modelValue).length;return r(l,null,[r(o("ElUpload"),a({key:c,"list-type":"picture-card"},this.$attrs,{class:{"_fc-exceed":!!this.$attrs.limit&&this.$attrs.limit<=c},onPreview:this.handlePreview,onChange:this.handleChange,onRemove:this.handleRemove,fileList:this.fileList,ref:"upload"}),u({default:function(){return[(null===(e=(t=s.$slots).default)||void 0===e?void 0:e.call(t))||r(o("ElIcon"),null,{default:function(){return[r(p,null,null)]}})]}},(i=this.$slots,n=["default"],Object.keys(i).reduce((function(e,t){return n&&-1!==n.indexOf(t)||e.push(i[t]),e}),[])))),r(o("ElDialog"),{appendToBody:!0,modal:this.previewMask,title:this.modalTitle,modelValue:this.previewVisible,onClose:this.handleCancel},{default:function(){return[r("img",{style:"width: 100%",src:s.previewImage},null)]}})])},mounted:function(){this.$emit("fc.el",this.$refs.upload)}});export{y as default};
|
||||||
|
|
@ -0,0 +1,260 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-upload v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with upload
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcUpload = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
function ownKeys(object, enumerableOnly) {
|
||||||
|
var keys = Object.keys(object);
|
||||||
|
|
||||||
|
if (Object.getOwnPropertySymbols) {
|
||||||
|
var symbols = Object.getOwnPropertySymbols(object);
|
||||||
|
|
||||||
|
if (enumerableOnly) {
|
||||||
|
symbols = symbols.filter(function (sym) {
|
||||||
|
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
keys.push.apply(keys, symbols);
|
||||||
|
}
|
||||||
|
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _objectSpread2(target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i] != null ? arguments[i] : {};
|
||||||
|
|
||||||
|
if (i % 2) {
|
||||||
|
ownKeys(Object(source), true).forEach(function (key) {
|
||||||
|
_defineProperty(target, key, source[key]);
|
||||||
|
});
|
||||||
|
} else if (Object.getOwnPropertyDescriptors) {
|
||||||
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
||||||
|
} else {
|
||||||
|
ownKeys(Object(source)).forEach(function (key) {
|
||||||
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _defineProperty(obj, key, value) {
|
||||||
|
if (key in obj) {
|
||||||
|
Object.defineProperty(obj, key, {
|
||||||
|
value: value,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true,
|
||||||
|
writable: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
obj[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSlot(slots, exclude) {
|
||||||
|
return Object.keys(slots).reduce(function (lst, name) {
|
||||||
|
if (!exclude || exclude.indexOf(name) === -1) {
|
||||||
|
lst.push(slots[name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lst;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
function styleInject(css, ref) {
|
||||||
|
if ( ref === void 0 ) ref = {};
|
||||||
|
var insertAt = ref.insertAt;
|
||||||
|
|
||||||
|
if (!css || typeof document === 'undefined') { return; }
|
||||||
|
|
||||||
|
var head = document.head || document.getElementsByTagName('head')[0];
|
||||||
|
var style = document.createElement('style');
|
||||||
|
style.type = 'text/css';
|
||||||
|
|
||||||
|
if (insertAt === 'top') {
|
||||||
|
if (head.firstChild) {
|
||||||
|
head.insertBefore(style, head.firstChild);
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (style.styleSheet) {
|
||||||
|
style.styleSheet.cssText = css;
|
||||||
|
} else {
|
||||||
|
style.appendChild(document.createTextNode(css));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var css_248z = "._fc-exceed .el-upload{display:none}.el-upload-list.is-disabled .el-upload{cursor:not-allowed!important}";
|
||||||
|
styleInject(css_248z);
|
||||||
|
|
||||||
|
var script = {
|
||||||
|
name: 'IconUpload'
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_1 = {
|
||||||
|
"class": "icon",
|
||||||
|
viewBox: "0 0 1024 1024",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
};
|
||||||
|
|
||||||
|
var _hoisted_2 = /*#__PURE__*/vue.createElementVNode("path", {
|
||||||
|
fill: "currentColor",
|
||||||
|
d: "M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"
|
||||||
|
}, null, -1);
|
||||||
|
|
||||||
|
var _hoisted_3 = [_hoisted_2];
|
||||||
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, _hoisted_3);
|
||||||
|
}
|
||||||
|
|
||||||
|
script.render = render;
|
||||||
|
|
||||||
|
function parseFile(file, i) {
|
||||||
|
return {
|
||||||
|
url: file,
|
||||||
|
name: getFileName(file),
|
||||||
|
uid: i
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFileName(file) {
|
||||||
|
return ('' + file).split('/').pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
var NAME = 'fcUpload';
|
||||||
|
var Upload = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
formCreateParser: {
|
||||||
|
toFormValue: function toFormValue(value) {
|
||||||
|
return toArray(value);
|
||||||
|
},
|
||||||
|
toValue: function toValue(formValue, ctx) {
|
||||||
|
return ctx.prop.props.limit === 1 ? formValue[0] || '' : formValue;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
previewMask: undefined,
|
||||||
|
onPreview: Function,
|
||||||
|
modalTitle: String,
|
||||||
|
modelValue: [Array, String]
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change', 'remove', 'fc.el'],
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
previewVisible: false,
|
||||||
|
previewImage: '',
|
||||||
|
fileList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created: function created() {
|
||||||
|
this.fileList = toArray(this.modelValue).map(parseFile);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue(n) {
|
||||||
|
this.fileList = toArray(n).map(parseFile);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePreview: function handlePreview(file) {
|
||||||
|
if (this.onPreview) {
|
||||||
|
this.onPreview.apply(this, arguments);
|
||||||
|
} else {
|
||||||
|
this.previewImage = file.url;
|
||||||
|
this.previewVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: function update(fileList) {
|
||||||
|
var files = fileList.map(function (file) {
|
||||||
|
return file.url;
|
||||||
|
}).filter(function (url) {
|
||||||
|
return url !== undefined;
|
||||||
|
});
|
||||||
|
this.$emit('update:modelValue', files);
|
||||||
|
},
|
||||||
|
handleCancel: function handleCancel() {
|
||||||
|
this.previewVisible = false;
|
||||||
|
},
|
||||||
|
handleChange: function handleChange(file, fileList) {
|
||||||
|
this.$emit.apply(this, ['change'].concat(Array.prototype.slice.call(arguments)));
|
||||||
|
|
||||||
|
if (file.status === 'success') {
|
||||||
|
this.update(fileList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRemove: function handleRemove(file, fileList) {
|
||||||
|
this.$emit.apply(this, ['remove'].concat(Array.prototype.slice.call(arguments)));
|
||||||
|
this.update(fileList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var _this$$slots$default,
|
||||||
|
_this$$slots,
|
||||||
|
_this = this;
|
||||||
|
|
||||||
|
var len = toArray(this.modelValue).length;
|
||||||
|
return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue.resolveComponent("ElUpload"), vue.mergeProps({
|
||||||
|
"key": len,
|
||||||
|
"list-type": "picture-card"
|
||||||
|
}, this.$attrs, {
|
||||||
|
"class": {
|
||||||
|
'_fc-exceed': this.$attrs.limit ? this.$attrs.limit <= len : false
|
||||||
|
},
|
||||||
|
"onPreview": this.handlePreview,
|
||||||
|
"onChange": this.handleChange,
|
||||||
|
"onRemove": this.handleRemove,
|
||||||
|
"fileList": this.fileList,
|
||||||
|
"ref": "upload"
|
||||||
|
}), _objectSpread2({
|
||||||
|
"default": function _default() {
|
||||||
|
return [((_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || vue.createVNode(vue.resolveComponent("ElIcon"), null, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode(script, null, null)];
|
||||||
|
}
|
||||||
|
})];
|
||||||
|
}
|
||||||
|
}, getSlot(this.$slots, ['default']))), vue.createVNode(vue.resolveComponent("ElDialog"), {
|
||||||
|
"appendToBody": true,
|
||||||
|
"modal": this.previewMask,
|
||||||
|
"title": this.modalTitle,
|
||||||
|
"modelValue": this.previewVisible,
|
||||||
|
"onClose": this.handleCancel
|
||||||
|
}, {
|
||||||
|
"default": function _default() {
|
||||||
|
return [vue.createVNode("img", {
|
||||||
|
"style": "width: 100%",
|
||||||
|
"src": _this.previewImage
|
||||||
|
}, null)];
|
||||||
|
}
|
||||||
|
})]);
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
this.$emit('fc.el', this.$refs.upload);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Upload;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-elm-upload v3.2.0
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with upload
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
!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).FcUpload={},e.Vue)}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function i(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?n(Object(i),!0).forEach((function(t){r(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){return Array.isArray(e)?e:[null,void 0,""].indexOf(e)>-1?[]:[e]}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("._fc-exceed .el-upload{display:none}.el-upload-list.is-disabled .el-upload{cursor:not-allowed!important}");var l={name:"IconUpload"},a={class:"icon",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},s=[t.createElementVNode("path",{fill:"currentColor",d:"M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"},null,-1)];function u(e,t){return{url:e,name:c(e),uid:t}}function c(e){return(""+e).split("/").pop()}l.render=function(e,n,i,r,o,l){return t.openBlock(),t.createElementBlock("svg",a,s)};var d=t.defineComponent({name:"fcUpload",inheritAttrs:!1,formCreateParser:{toFormValue:function(e){return o(e)},toValue:function(e,t){return 1===t.prop.props.limit?e[0]||"":e}},props:{previewMask:void 0,onPreview:Function,modalTitle:String,modelValue:[Array,String]},emits:["update:modelValue","change","remove","fc.el"],data:function(){return{previewVisible:!1,previewImage:"",fileList:[]}},created:function(){this.fileList=o(this.modelValue).map(u)},watch:{modelValue:function(e){this.fileList=o(e).map(u)}},methods:{handlePreview:function(e){this.onPreview?this.onPreview.apply(this,arguments):(this.previewImage=e.url,this.previewVisible=!0)},update:function(e){var t=e.map((function(e){return e.url})).filter((function(e){return void 0!==e}));this.$emit("update:modelValue",t)},handleCancel:function(){this.previewVisible=!1},handleChange:function(e,t){this.$emit.apply(this,["change"].concat(Array.prototype.slice.call(arguments))),"success"===e.status&&this.update(t)},handleRemove:function(e,t){this.$emit.apply(this,["remove"].concat(Array.prototype.slice.call(arguments))),this.update(t)}},render:function(){var e,n,r,a,s=this,u=o(this.modelValue).length;return t.createVNode(t.Fragment,null,[t.createVNode(t.resolveComponent("ElUpload"),t.mergeProps({key:u,"list-type":"picture-card"},this.$attrs,{class:{"_fc-exceed":!!this.$attrs.limit&&this.$attrs.limit<=u},onPreview:this.handlePreview,onChange:this.handleChange,onRemove:this.handleRemove,fileList:this.fileList,ref:"upload"}),i({default:function(){return[(null===(e=(n=s.$slots).default)||void 0===e?void 0:e.call(n))||t.createVNode(t.resolveComponent("ElIcon"),null,{default:function(){return[t.createVNode(l,null,null)]}})]}},(r=this.$slots,a=["default"],Object.keys(r).reduce((function(e,t){return a&&-1!==a.indexOf(t)||e.push(r[t]),e}),[])))),t.createVNode(t.resolveComponent("ElDialog"),{appendToBody:!0,modal:this.previewMask,title:this.modalTitle,modelValue:this.previewVisible,onClose:this.handleCancel},{default:function(){return[t.createVNode("img",{style:"width: 100%",src:s.previewImage},null)]}})])},mounted:function(){this.$emit("fc.el",this.$refs.upload)}});e.default=d,Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-elm-upload",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "@form-create/element-ui 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"element-ui"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-elm-upload",
|
||||||
|
"exportName": "FcUpload",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'IconUpload'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
import toArray from '@form-create/utils/lib/toarray';
|
||||||
|
import getSlot from '@form-create/utils/lib/slot';
|
||||||
|
import './style.css';
|
||||||
|
import {defineComponent} from 'vue';
|
||||||
|
import IconUpload from './IconUpload.vue';
|
||||||
|
|
||||||
|
function parseFile(file, i) {
|
||||||
|
return {
|
||||||
|
url: file,
|
||||||
|
name: getFileName(file),
|
||||||
|
uid: i
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFileName(file) {
|
||||||
|
return ('' + file).split('/').pop()
|
||||||
|
}
|
||||||
|
|
||||||
|
const NAME = 'fcUpload';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
formCreateParser: {
|
||||||
|
toFormValue(value) {
|
||||||
|
return toArray(value);
|
||||||
|
},
|
||||||
|
toValue(formValue, ctx) {
|
||||||
|
return ctx.prop.props.limit === 1 ? (formValue[0] || '') : formValue;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
previewMask: undefined,
|
||||||
|
onPreview: Function,
|
||||||
|
modalTitle: String,
|
||||||
|
modelValue: [Array, String]
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change', 'remove', 'fc.el'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
previewVisible: false,
|
||||||
|
previewImage: '',
|
||||||
|
fileList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fileList = toArray(this.modelValue).map(parseFile);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelValue(n) {
|
||||||
|
this.fileList = toArray(n).map(parseFile);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePreview(file) {
|
||||||
|
if (this.onPreview) {
|
||||||
|
this.onPreview(...arguments);
|
||||||
|
} else {
|
||||||
|
this.previewImage = file.url;
|
||||||
|
this.previewVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update(fileList) {
|
||||||
|
let files = fileList.map((file) => file.url).filter((url) => url !== undefined);
|
||||||
|
this.$emit('update:modelValue', files);
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.previewVisible = false;
|
||||||
|
},
|
||||||
|
handleChange(file, fileList) {
|
||||||
|
this.$emit('change', ...arguments);
|
||||||
|
if (file.status === 'success') {
|
||||||
|
this.update(fileList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRemove(file, fileList) {
|
||||||
|
this.$emit('remove', ...arguments);
|
||||||
|
this.update(fileList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const len = toArray(this.modelValue).length;
|
||||||
|
return (
|
||||||
|
<><ElUpload key={len} list-type="picture-card" {...this.$attrs}
|
||||||
|
class={{'_fc-exceed': this.$attrs.limit ? this.$attrs.limit <= len : false}}
|
||||||
|
onPreview={this.handlePreview} onChange={this.handleChange}
|
||||||
|
onRemove={this.handleRemove}
|
||||||
|
fileList={this.fileList}
|
||||||
|
v-slots={getSlot(this.$slots, ['default'])} ref="upload">
|
||||||
|
{(this.$slots.default?.() ||
|
||||||
|
<ElIcon>
|
||||||
|
<IconUpload/>
|
||||||
|
</ElIcon>
|
||||||
|
)}
|
||||||
|
</ElUpload>
|
||||||
|
<ElDialog appendToBody={true} modal={this.previewMask} title={this.modalTitle}
|
||||||
|
modelValue={this.previewVisible}
|
||||||
|
onClose={this.handleCancel}>
|
||||||
|
<img style="width: 100%" src={this.previewImage}/>
|
||||||
|
</ElDialog>
|
||||||
|
</>);
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.$emit('fc.el',this.$refs.upload);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Upload from './component';
|
||||||
|
|
||||||
|
export default Upload;
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
._fc-exceed .el-upload {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-upload-list.is-disabled .el-upload {
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
# @form-create/component-subform
|
||||||
|
|
||||||
|
@form-create 内置组件
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/) | [Document](http://form-create.com/v3/)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-subform v3.1.34
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with subform
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import { defineComponent, reactive, markRaw, nextTick, createVNode } from 'vue';
|
||||||
|
|
||||||
|
var NAME = 'fcSubForm';
|
||||||
|
var Sub = defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
rule: Array,
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
"default": function _default() {
|
||||||
|
return reactive({
|
||||||
|
submitBtn: false,
|
||||||
|
resetBtn: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
"default": function _default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
syncDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
formCreateInject: Object
|
||||||
|
},
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
cacheValue: {},
|
||||||
|
subApi: {},
|
||||||
|
form: markRaw(this.formCreateInject.form.$form())
|
||||||
|
};
|
||||||
|
},
|
||||||
|
emits: ['fc:subform', 'update:modelValue', 'change', 'itemMounted'],
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue(n) {
|
||||||
|
this.setValue(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formData: function formData(value) {
|
||||||
|
this.cacheValue = JSON.stringify(value);
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
setValue: function setValue(value) {
|
||||||
|
var str = JSON.stringify(value);
|
||||||
|
|
||||||
|
if (this.cacheValue === str) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.cacheValue = str;
|
||||||
|
this.subApi.coverValue(value || {});
|
||||||
|
},
|
||||||
|
add$f: function add$f(api) {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
this.subApi = api;
|
||||||
|
nextTick(function () {
|
||||||
|
_this.$emit('itemMounted', api);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var Type = this.form;
|
||||||
|
return createVNode(Type, {
|
||||||
|
"disabled": this.disabled,
|
||||||
|
"onUpdate:modelValue": this.formData,
|
||||||
|
"modelValue": this.modelValue,
|
||||||
|
"onEmit-event": this.$emit,
|
||||||
|
"onUpdate:api": this.add$f,
|
||||||
|
"rule": this.rule,
|
||||||
|
"option": this.options,
|
||||||
|
"extendOption": true
|
||||||
|
}, null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Sub as default };
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-subform v3.1.34
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with subform
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
import{defineComponent as e,reactive as t,markRaw as a,nextTick as i,createVNode as o}from"vue";var n=e({name:"fcSubForm",props:{rule:Array,options:{type:Object,default:function(){return t({submitBtn:!1,resetBtn:!1})}},modelValue:{type:Object,default:function(){return{}}},disabled:{type:Boolean,default:!1},syncDisabled:{type:Boolean,default:!0},formCreateInject:Object},data:function(){return{cacheValue:{},subApi:{},form:a(this.formCreateInject.form.$form())}},emits:["fc:subform","update:modelValue","change","itemMounted"],watch:{modelValue:function(e){this.setValue(e)}},methods:{formData:function(e){this.cacheValue=JSON.stringify(e),this.$emit("update:modelValue",e),this.$emit("change",e)},setValue:function(e){var t=JSON.stringify(e);this.cacheValue!==t&&(this.cacheValue=t,this.subApi.coverValue(e||{}))},add$f:function(e){var t=this;this.subApi=e,i((function(){t.$emit("itemMounted",e)}))}},render:function(){var e=this.form;return o(e,{disabled:this.disabled,"onUpdate:modelValue":this.formData,modelValue:this.modelValue,"onEmit-event":this.$emit,"onUpdate:api":this.add$f,rule:this.rule,option:this.options,extendOption:!0},null)}});export{n as default};
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-subform v3.1.34
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with subform
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
||||||
|
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
|
||||||
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FcSubForm = {}, global.Vue));
|
||||||
|
})(this, (function (exports, vue) { 'use strict';
|
||||||
|
|
||||||
|
var NAME = 'fcSubForm';
|
||||||
|
var Sub = vue.defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
rule: Array,
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
"default": function _default() {
|
||||||
|
return vue.reactive({
|
||||||
|
submitBtn: false,
|
||||||
|
resetBtn: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
"default": function _default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
syncDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
|
formCreateInject: Object
|
||||||
|
},
|
||||||
|
data: function data() {
|
||||||
|
return {
|
||||||
|
cacheValue: {},
|
||||||
|
subApi: {},
|
||||||
|
form: vue.markRaw(this.formCreateInject.form.$form())
|
||||||
|
};
|
||||||
|
},
|
||||||
|
emits: ['fc:subform', 'update:modelValue', 'change', 'itemMounted'],
|
||||||
|
watch: {
|
||||||
|
modelValue: function modelValue(n) {
|
||||||
|
this.setValue(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formData: function formData(value) {
|
||||||
|
this.cacheValue = JSON.stringify(value);
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
setValue: function setValue(value) {
|
||||||
|
var str = JSON.stringify(value);
|
||||||
|
|
||||||
|
if (this.cacheValue === str) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.cacheValue = str;
|
||||||
|
this.subApi.coverValue(value || {});
|
||||||
|
},
|
||||||
|
add$f: function add$f(api) {
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
this.subApi = api;
|
||||||
|
vue.nextTick(function () {
|
||||||
|
_this.$emit('itemMounted', api);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function render() {
|
||||||
|
var Type = this.form;
|
||||||
|
return vue.createVNode(Type, {
|
||||||
|
"disabled": this.disabled,
|
||||||
|
"onUpdate:modelValue": this.formData,
|
||||||
|
"modelValue": this.modelValue,
|
||||||
|
"onEmit-event": this.$emit,
|
||||||
|
"onUpdate:api": this.add$f,
|
||||||
|
"rule": this.rule,
|
||||||
|
"option": this.options,
|
||||||
|
"extendOption": true
|
||||||
|
}, null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exports["default"] = Sub;
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*!
|
||||||
|
* @form-create/component-subform v3.1.34
|
||||||
|
* (c) 2018-2024 xaboy
|
||||||
|
* Github https://github.com/xaboy/form-create with subform
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
!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).FcSubForm={},e.Vue)}(this,(function(e,t){"use strict";var i=t.defineComponent({name:"fcSubForm",props:{rule:Array,options:{type:Object,default:function(){return t.reactive({submitBtn:!1,resetBtn:!1})}},modelValue:{type:Object,default:function(){return{}}},disabled:{type:Boolean,default:!1},syncDisabled:{type:Boolean,default:!0},formCreateInject:Object},data:function(){return{cacheValue:{},subApi:{},form:t.markRaw(this.formCreateInject.form.$form())}},emits:["fc:subform","update:modelValue","change","itemMounted"],watch:{modelValue:function(e){this.setValue(e)}},methods:{formData:function(e){this.cacheValue=JSON.stringify(e),this.$emit("update:modelValue",e),this.$emit("change",e)},setValue:function(e){var t=JSON.stringify(e);this.cacheValue!==t&&(this.cacheValue=t,this.subApi.coverValue(e||{}))},add$f:function(e){var i=this;this.subApi=e,t.nextTick((function(){i.$emit("itemMounted",e)}))}},render:function(){var e=this.form;return t.createVNode(e,{disabled:this.disabled,"onUpdate:modelValue":this.formData,modelValue:this.modelValue,"onEmit-event":this.$emit,"onUpdate:api":this.add$f,rule:this.rule,option:this.options,extendOption:!0},null)}});e.default=i,Object.defineProperty(e,"__esModule",{value:!0})}));
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/component-subform",
|
||||||
|
"version": "3.1.34",
|
||||||
|
"description": "@form-create 内置组件",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/index.min.js",
|
||||||
|
"jsdelivr": "./dist/index.min.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"@form-create",
|
||||||
|
"form-create-component",
|
||||||
|
"form-create-common-component"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/component-subform",
|
||||||
|
"exportName": "FcSubForm",
|
||||||
|
"formats": [
|
||||||
|
"umd",
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "50896c11c48bfb636c03126b529756af2f86416a"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
import {defineComponent, reactive, markRaw, nextTick} from 'vue';
|
||||||
|
|
||||||
|
const NAME = 'fcSubForm';
|
||||||
|
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
props: {
|
||||||
|
rule: Array,
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default: () => reactive(({
|
||||||
|
submitBtn: false,
|
||||||
|
resetBtn: false,
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
syncDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
formCreateInject: Object,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cacheValue: {},
|
||||||
|
subApi: {},
|
||||||
|
form: markRaw(this.formCreateInject.form.$form())
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['fc:subform', 'update:modelValue', 'change', 'itemMounted'],
|
||||||
|
watch: {
|
||||||
|
modelValue(n) {
|
||||||
|
this.setValue(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formData(value) {
|
||||||
|
this.cacheValue = JSON.stringify(value);
|
||||||
|
this.$emit('update:modelValue', value);
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
setValue(value) {
|
||||||
|
const str = JSON.stringify(value);
|
||||||
|
if (this.cacheValue === str) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.cacheValue = str;
|
||||||
|
this.subApi.coverValue(value || {});
|
||||||
|
},
|
||||||
|
add$f(api) {
|
||||||
|
this.subApi = api;
|
||||||
|
nextTick(() => {
|
||||||
|
this.$emit('itemMounted', api);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const Type = this.form;
|
||||||
|
return <Type
|
||||||
|
disabled={this.disabled}
|
||||||
|
onUpdate:modelValue={this.formData}
|
||||||
|
modelValue={this.modelValue}
|
||||||
|
onEmit-event={this.$emit}
|
||||||
|
onUpdate:api={this.add$f}
|
||||||
|
rule={this.rule}
|
||||||
|
option={this.options} extendOption={true}/>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Sub from './component';
|
||||||
|
|
||||||
|
export default Sub;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2022 xaboy
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
# @form-create/core
|
||||||
|
**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持6个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。**
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3) | [Document](http://form-create.com/v3)
|
||||||
|
|
||||||
|
[开源的vue表单设计器组件](https://github.com/xaboy/form-create-designer) ([功能演示](http://form-create.com/designer?fr=fc))
|
||||||
|
|
||||||
|
- **预览**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- **操作表单**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- **`group` 组件**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- **`control` 配置项**
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"name": "@form-create/core",
|
||||||
|
"version": "3.2.0",
|
||||||
|
"description": "vue动态表单,助你轻松搞定表单|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.",
|
||||||
|
"main": "./dist/index.min.js",
|
||||||
|
"module": "./dist/index.esm.js",
|
||||||
|
"unpkg": "./dist/form-create.min.js",
|
||||||
|
"jsdelivr": "./dist/form-create.min.js",
|
||||||
|
"typings": "./types/index.d.ts",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf dist/",
|
||||||
|
"bili": "cross-env UI_LIB=core bili",
|
||||||
|
"build": "npm-run-all clean bili"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/xaboy/form-create.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"动态表单",
|
||||||
|
"@form-create",
|
||||||
|
"form-builder",
|
||||||
|
"form",
|
||||||
|
"components",
|
||||||
|
"vue3",
|
||||||
|
"json-form",
|
||||||
|
"dynamic-form"
|
||||||
|
],
|
||||||
|
"files": [
|
||||||
|
"README.md",
|
||||||
|
"package.json",
|
||||||
|
"LICENSE",
|
||||||
|
"src",
|
||||||
|
"types",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"author": "xaboy",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xaboy/form-create/issues"
|
||||||
|
},
|
||||||
|
"homepage": "http://www.form-create.com/v3/",
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"buildFormCreateOptions": {
|
||||||
|
"name": "@form-create/core",
|
||||||
|
"exportName": "formCreateFactory",
|
||||||
|
"fileName": "index",
|
||||||
|
"formats": [
|
||||||
|
"esm"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"gitHead": "551b0e9acfcfd4e9a583880dc4fb5f96fe65d6a5"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,214 @@
|
||||||
|
import {
|
||||||
|
defineComponent,
|
||||||
|
getCurrentInstance,
|
||||||
|
inject,
|
||||||
|
markRaw, onBeforeMount,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onMounted,
|
||||||
|
onUpdated,
|
||||||
|
provide,
|
||||||
|
reactive,
|
||||||
|
toRefs,
|
||||||
|
watch
|
||||||
|
} from 'vue';
|
||||||
|
import toArray from '@form-create/utils/lib/toarray';
|
||||||
|
import {toLine} from '@form-create/utils';
|
||||||
|
|
||||||
|
const getRuleInject = (vm, parent) => {
|
||||||
|
if (!vm || vm === parent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (vm.props.formCreateInject) {
|
||||||
|
return vm.props.formCreateInject
|
||||||
|
}
|
||||||
|
if (vm.parent) {
|
||||||
|
return getRuleInject(vm.parent, parent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function $FormCreate(FormCreate, components, directives) {
|
||||||
|
return defineComponent({
|
||||||
|
name: 'FormCreate' + (FormCreate.isMobile ? 'Mobile' : ''),
|
||||||
|
components,
|
||||||
|
directives,
|
||||||
|
props: {
|
||||||
|
rule: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
option: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
extendOption: Boolean,
|
||||||
|
modelValue: Object,
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
preview: {
|
||||||
|
type: Boolean,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
api: Object,
|
||||||
|
name: String,
|
||||||
|
subForm: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
inFor: Boolean,
|
||||||
|
},
|
||||||
|
emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update', 'validate-field-fail', 'validate-fail', 'created'],
|
||||||
|
render() {
|
||||||
|
return this.fc.render();
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const vm = getCurrentInstance();
|
||||||
|
provide('parentFC', vm);
|
||||||
|
const parent = inject('parentFC', null);
|
||||||
|
|
||||||
|
const {rule, modelValue, subForm, inFor} = toRefs(props);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
ctxInject: {},
|
||||||
|
destroyed: false,
|
||||||
|
isShow: true,
|
||||||
|
unique: 1,
|
||||||
|
renderRule: [...rule.value || []],
|
||||||
|
updateValue: JSON.stringify(modelValue.value || {}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const fc = new FormCreate(vm);
|
||||||
|
const fapi = fc.api();
|
||||||
|
|
||||||
|
const isMore = inFor.value;
|
||||||
|
|
||||||
|
const addSubForm = () => {
|
||||||
|
if (parent) {
|
||||||
|
const inject = getRuleInject(vm, parent);
|
||||||
|
if (inject) {
|
||||||
|
let sub;
|
||||||
|
if (isMore) {
|
||||||
|
sub = toArray(inject.getSubForm());
|
||||||
|
sub.push(fapi);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
sub = fapi;
|
||||||
|
}
|
||||||
|
inject.subForm(sub);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rmSubForm = () => {
|
||||||
|
const inject = getRuleInject(vm, parent);
|
||||||
|
if (inject) {
|
||||||
|
if (isMore) {
|
||||||
|
const sub = toArray(inject.getSubForm());
|
||||||
|
const idx = sub.indexOf(fapi);
|
||||||
|
if (idx > -1) {
|
||||||
|
sub.splice(idx, 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
inject.subForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let styleEl = null;
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
let content = '';
|
||||||
|
const globalClass = (props.option && props.option.globalClass) || {};
|
||||||
|
Object.keys(globalClass).forEach(k => {
|
||||||
|
let subCss = '';
|
||||||
|
globalClass[k].style && Object.keys(globalClass[k].style).forEach(key => {
|
||||||
|
subCss += toLine(key) + ':' + globalClass[k].style[key] + ';';
|
||||||
|
});
|
||||||
|
if (globalClass[k].content) {
|
||||||
|
subCss += globalClass[k].content + ';';
|
||||||
|
}
|
||||||
|
if (subCss) {
|
||||||
|
content += `.${k}{${subCss}}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (props.option && props.option.style) {
|
||||||
|
content += props.option.style;
|
||||||
|
}
|
||||||
|
if (content) {
|
||||||
|
styleEl = document.createElement('style');
|
||||||
|
styleEl.type = 'text/css';
|
||||||
|
styleEl.innerHTML = content;
|
||||||
|
document.head.appendChild(styleEl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fc.mounted();
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
styleEl && document.head.removeChild(styleEl);
|
||||||
|
rmSubForm();
|
||||||
|
data.destroyed = true;
|
||||||
|
fc.unmount();
|
||||||
|
})
|
||||||
|
|
||||||
|
onUpdated(() => {
|
||||||
|
fc.updated();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(subForm, (n) => {
|
||||||
|
n ? addSubForm() : rmSubForm();
|
||||||
|
}, {immediate: true});
|
||||||
|
|
||||||
|
watch(() => [...rule.value], (n) => {
|
||||||
|
if (fc.$handle.isBreakWatch() || n.length === data.renderRule.length && n.every(v => data.renderRule.indexOf(v) > -1)) return;
|
||||||
|
fc.$handle.reloadRule(rule.value);
|
||||||
|
vm.setupState.renderRule();
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => props.option, () => {
|
||||||
|
fc.initOptions();
|
||||||
|
fapi.refresh();
|
||||||
|
}, {deep: true});
|
||||||
|
|
||||||
|
watch(() => [props.disabled, props.preview], () => {
|
||||||
|
fapi.refresh();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(modelValue, (n) => {
|
||||||
|
if (JSON.stringify(n || {}) === data.updateValue) return;
|
||||||
|
fapi.config.forceCoverValue ? fapi.coverValue(n || {}) : fapi.setValue(n || {});
|
||||||
|
}, {deep: true});
|
||||||
|
|
||||||
|
return {
|
||||||
|
fc: markRaw(fc),
|
||||||
|
parent: parent ? markRaw(parent) : parent,
|
||||||
|
fapi: markRaw(fapi),
|
||||||
|
...toRefs(data),
|
||||||
|
refresh() {
|
||||||
|
++data.unique;
|
||||||
|
},
|
||||||
|
renderRule() {
|
||||||
|
data.renderRule = [...rule.value || []];
|
||||||
|
},
|
||||||
|
updateValue(value) {
|
||||||
|
if (data.destroyed) return;
|
||||||
|
const json = JSON.stringify(value);
|
||||||
|
if (data.updateValue === json) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
data.updateValue = json;
|
||||||
|
vm.emit('update:modelValue', value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const vm = getCurrentInstance();
|
||||||
|
vm.emit('update:api', vm.setupState.fapi);
|
||||||
|
vm.setupState.fc.init();
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import {defineComponent} from 'vue';
|
||||||
|
|
||||||
|
const NAME = 'fcFragment';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: NAME,
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: ['vnode'],
|
||||||
|
render() {
|
||||||
|
return this.vnode;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
import unique from '@form-create/utils/lib/unique';
|
||||||
|
import toCase from '@form-create/utils/lib/tocase';
|
||||||
|
import extend from '@form-create/utils/lib/extend';
|
||||||
|
import {enumerable, invoke, mergeRule} from '../frame/util';
|
||||||
|
import {deepCopy} from '@form-create/utils/lib/deepextend';
|
||||||
|
import {markRaw, reactive} from 'vue';
|
||||||
|
import is from '@form-create/utils/lib/type';
|
||||||
|
import toArray from '@form-create/utils/lib/toarray';
|
||||||
|
|
||||||
|
function bind(ctx) {
|
||||||
|
Object.defineProperties(ctx.origin, {
|
||||||
|
__fc__: enumerable(markRaw(ctx), true)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RuleContext(handle, rule, defaultValue) {
|
||||||
|
const id = unique();
|
||||||
|
const isInput = !!rule.field;
|
||||||
|
extend(this, {
|
||||||
|
id,
|
||||||
|
ref: id,
|
||||||
|
wrapRef: id + 'fi',
|
||||||
|
rule,
|
||||||
|
origin: rule.__origin__ || rule,
|
||||||
|
name: rule.name,
|
||||||
|
pending: {},
|
||||||
|
none: false,
|
||||||
|
watch: [],
|
||||||
|
linkOn: [],
|
||||||
|
root: [],
|
||||||
|
ctrlRule: [],
|
||||||
|
children: [],
|
||||||
|
parent: null,
|
||||||
|
group: rule.subRule ? this : null,
|
||||||
|
cacheConfig: null,
|
||||||
|
prop: {...rule},
|
||||||
|
computed: {},
|
||||||
|
payload: {},
|
||||||
|
refRule: {},
|
||||||
|
input: isInput,
|
||||||
|
el: undefined,
|
||||||
|
exportEl: undefined,
|
||||||
|
defaultValue: isInput ? deepCopy(defaultValue) : undefined,
|
||||||
|
field: rule.field || undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
this.updateType();
|
||||||
|
this.updateKey();
|
||||||
|
bind(this);
|
||||||
|
this.update(handle, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
extend(RuleContext.prototype, {
|
||||||
|
getParentGroup() {
|
||||||
|
let ctx = this.parent;
|
||||||
|
while (ctx) {
|
||||||
|
if (ctx.group) {
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
|
ctx = ctx.parent;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadChildrenPending() {
|
||||||
|
const children = this.rule.children || [];
|
||||||
|
if (Array.isArray(children))
|
||||||
|
return children;
|
||||||
|
return this.loadPending({
|
||||||
|
key: 'children', origin: children, def: [],
|
||||||
|
onLoad: (data) => {
|
||||||
|
this.$handle && this.$handle.loadChildren(data, this);
|
||||||
|
}, onUpdate: (value, oldValue) => {
|
||||||
|
if (this.$handle) {
|
||||||
|
value === oldValue ? this.$handle.loadChildren(value, this) : this.$handle.updateChildren(this, value, oldValue);
|
||||||
|
}
|
||||||
|
}, onReload: (value) => {
|
||||||
|
if (this.$handle) {
|
||||||
|
this.$handle.updateChildren(this, [], value);
|
||||||
|
} else {
|
||||||
|
delete this.pending.children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadPending(config) {
|
||||||
|
const {key, origin, def, onLoad, onReload, onUpdate} = config;
|
||||||
|
|
||||||
|
if (this.pending[key] && this.pending[key].origin === origin) {
|
||||||
|
return this.getPending(key, def);
|
||||||
|
}
|
||||||
|
|
||||||
|
delete this.pending[key];
|
||||||
|
|
||||||
|
let value = origin;
|
||||||
|
if (is.Function(origin)) {
|
||||||
|
let source = invoke(() => origin({
|
||||||
|
rule: this.rule, api: this.$api, update: (data) => {
|
||||||
|
const value = data || def;
|
||||||
|
const oldValue = this.getPending(key, def);
|
||||||
|
this.setPending(key, origin, value);
|
||||||
|
onUpdate && onUpdate(value, oldValue);
|
||||||
|
}, reload: () => {
|
||||||
|
const oldValue = this.getPending(key, def);
|
||||||
|
delete this.pending[key];
|
||||||
|
onReload && onReload(oldValue);
|
||||||
|
this.$api && this.$api.sync(this.rule);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
if (source && is.Function(source.then)) {
|
||||||
|
source.then((data) => {
|
||||||
|
const value = data || def;
|
||||||
|
this.setPending(key, origin, value);
|
||||||
|
onLoad && onLoad(value);
|
||||||
|
this.$api && this.$api.sync(this.rule);
|
||||||
|
}).catch(e => {
|
||||||
|
console.error(e);
|
||||||
|
})
|
||||||
|
value = def;
|
||||||
|
this.setPending(key, origin, value);
|
||||||
|
} else {
|
||||||
|
value = source || def;
|
||||||
|
this.setPending(key, origin, value);
|
||||||
|
onLoad && onLoad(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
getPending(key, def) {
|
||||||
|
return (this.pending[key] && this.pending[key].value) || def;
|
||||||
|
},
|
||||||
|
setPending(key, origin, value) {
|
||||||
|
this.pending[key] = {
|
||||||
|
origin,
|
||||||
|
value: reactive(value)
|
||||||
|
};
|
||||||
|
},
|
||||||
|
effectData(name) {
|
||||||
|
if (!this.payload[name]) {
|
||||||
|
this.payload[name] = {};
|
||||||
|
}
|
||||||
|
return this.payload[name];
|
||||||
|
},
|
||||||
|
clearEffectData(name) {
|
||||||
|
if (name === undefined) {
|
||||||
|
this.payload = {};
|
||||||
|
} else {
|
||||||
|
delete this.payload[name];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateKey(flag) {
|
||||||
|
this.key = unique();
|
||||||
|
flag && this.parent && this.parent.updateKey(flag);
|
||||||
|
},
|
||||||
|
updateType() {
|
||||||
|
this.originType = this.rule.type;
|
||||||
|
this.type = toCase(this.rule.type);
|
||||||
|
},
|
||||||
|
setParser(parser) {
|
||||||
|
this.parser = parser;
|
||||||
|
parser.init(this);
|
||||||
|
},
|
||||||
|
initProp() {
|
||||||
|
const rule = {...this.rule};
|
||||||
|
delete rule.children;
|
||||||
|
this.prop = mergeRule({}, [rule, ...Object.keys(this.payload).map(k => this.payload[k]), this.computed]);
|
||||||
|
},
|
||||||
|
initNone() {
|
||||||
|
this.none = !(is.Undef(this.prop.display) || !!this.prop.display)
|
||||||
|
},
|
||||||
|
injectValidate() {
|
||||||
|
return toArray(this.prop.validate).map(item => {
|
||||||
|
if (is.Function(item.validator)) {
|
||||||
|
const temp = {...item};
|
||||||
|
const that = this;
|
||||||
|
temp.validator = function (...args) {
|
||||||
|
return item.validator.call({
|
||||||
|
that: this,
|
||||||
|
id: that.id,
|
||||||
|
field: that.field,
|
||||||
|
rule: that.rule,
|
||||||
|
api: that.$handle.api,
|
||||||
|
}, ...args)
|
||||||
|
}
|
||||||
|
return temp;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
check(handle) {
|
||||||
|
return this.vm === handle.vm
|
||||||
|
},
|
||||||
|
unwatch() {
|
||||||
|
this.watch.forEach(un => un());
|
||||||
|
this.watch = [];
|
||||||
|
this.refRule = {};
|
||||||
|
},
|
||||||
|
unlink() {
|
||||||
|
this.linkOn.forEach(un => un());
|
||||||
|
this.linkOn = [];
|
||||||
|
},
|
||||||
|
link() {
|
||||||
|
this.unlink();
|
||||||
|
this.$handle.appendLink(this);
|
||||||
|
},
|
||||||
|
watchTo() {
|
||||||
|
this.$handle.watchCtx(this);
|
||||||
|
},
|
||||||
|
delete() {
|
||||||
|
const undef = void 0;
|
||||||
|
this.unwatch();
|
||||||
|
this.unlink();
|
||||||
|
this.rmCtrl();
|
||||||
|
if (this.parent) {
|
||||||
|
this.parent.children.splice(this.parent.children.indexOf(this) >>> 0, 1);
|
||||||
|
}
|
||||||
|
extend(this, {
|
||||||
|
deleted: true,
|
||||||
|
prop: {...this.rule},
|
||||||
|
computed: {},
|
||||||
|
el: undef,
|
||||||
|
$handle: undef,
|
||||||
|
$render: undef,
|
||||||
|
$api: undef,
|
||||||
|
vm: undef,
|
||||||
|
vNode: undef,
|
||||||
|
parent: null,
|
||||||
|
children: [],
|
||||||
|
cacheConfig: null,
|
||||||
|
none: false,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
rmCtrl() {
|
||||||
|
this.ctrlRule.forEach(ctrl => ctrl.__fc__ && ctrl.__fc__.rm());
|
||||||
|
this.ctrlRule = [];
|
||||||
|
},
|
||||||
|
rm() {
|
||||||
|
const _rm = () => {
|
||||||
|
let index = this.root.indexOf(this.origin);
|
||||||
|
if (index > -1) {
|
||||||
|
this.root.splice(index, 1);
|
||||||
|
this.$handle && this.$handle.refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.deleted) {
|
||||||
|
_rm();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$handle.noWatch(() => {
|
||||||
|
this.$handle.deferSyncValue(() => {
|
||||||
|
this.rmCtrl();
|
||||||
|
_rm();
|
||||||
|
this.$handle.rmCtx(this);
|
||||||
|
extend(this, {
|
||||||
|
root: []
|
||||||
|
});
|
||||||
|
}, this.input);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
update(handle, init) {
|
||||||
|
extend(this, {
|
||||||
|
deleted: false,
|
||||||
|
$handle: handle,
|
||||||
|
$render: handle.$render,
|
||||||
|
$api: handle.api,
|
||||||
|
vm: handle.vm,
|
||||||
|
trueType: handle.getType(this.originType),
|
||||||
|
vNode: handle.$render.vNode,
|
||||||
|
updated: false,
|
||||||
|
cacheValue: this.rule.value
|
||||||
|
});
|
||||||
|
!init && this.unwatch();
|
||||||
|
this.watchTo();
|
||||||
|
this.link();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import extend from '@form-create/utils/lib/extend';
|
||||||
|
import is from '@form-create/utils/lib/type';
|
||||||
|
import {attrs} from '../frame/attrs';
|
||||||
|
import {copyRule, mergeRule} from '../frame/util';
|
||||||
|
import {$set} from '@form-create/utils/lib/modify';
|
||||||
|
|
||||||
|
export function baseRule() {
|
||||||
|
return {
|
||||||
|
props: {},
|
||||||
|
on: {},
|
||||||
|
options: [],
|
||||||
|
children: [],
|
||||||
|
hidden: false,
|
||||||
|
display: true,
|
||||||
|
value: undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function creatorFactory(name, init) {
|
||||||
|
return (title, field, value, props = {}) => {
|
||||||
|
const maker = new Creator(name, title, field, value, props);
|
||||||
|
if (init) {
|
||||||
|
if (is.Function(init)) init(maker);
|
||||||
|
else maker.props(init);
|
||||||
|
}
|
||||||
|
return maker;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Creator(type, title, field, value, props) {
|
||||||
|
this._data = extend(baseRule(), {type, title, field, value, props: props || {}});
|
||||||
|
this.event = this.on;
|
||||||
|
}
|
||||||
|
|
||||||
|
extend(Creator.prototype, {
|
||||||
|
getRule() {
|
||||||
|
return this._data;
|
||||||
|
},
|
||||||
|
setProp(key, value) {
|
||||||
|
$set(this._data, key, value);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
modelField(field) {
|
||||||
|
this._data.modelField = field;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
_clone() {
|
||||||
|
const clone = new this.constructor();
|
||||||
|
clone._data = copyRule(this._data);
|
||||||
|
return clone;
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
export function appendProto(attrs) {
|
||||||
|
attrs.forEach(name => {
|
||||||
|
Creator.prototype[name] = function (key) {
|
||||||
|
mergeRule(this._data, {[name]: arguments.length < 2 ? key : {[key]: arguments[1]}})
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
appendProto(attrs());
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import {creatorFactory} from './creator';
|
||||||
|
|
||||||
|
const commonMaker = creatorFactory('');
|
||||||
|
|
||||||
|
export function create(type, field, title) {
|
||||||
|
let make = commonMaker('', field);
|
||||||
|
make._data.type = type;
|
||||||
|
make._data.title = title;
|
||||||
|
return make;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function makerFactory() {
|
||||||
|
return {
|
||||||
|
create,
|
||||||
|
factory: creatorFactory
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import mergeProps from '@form-create/utils/lib/mergeprops';
|
||||||
|
import unique from '@form-create/utils/lib/unique';
|
||||||
|
import extend from '@form-create/utils/lib/extend';
|
||||||
|
|
||||||
|
export function createManager(proto) {
|
||||||
|
class CustomManager extends Manager {
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.assign(CustomManager.prototype, proto);
|
||||||
|
return CustomManager;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Manager(handler) {
|
||||||
|
extend(this, {
|
||||||
|
$handle: handler,
|
||||||
|
vm: handler.vm,
|
||||||
|
options: {},
|
||||||
|
ref: 'fcForm',
|
||||||
|
mergeOptionsRule: {
|
||||||
|
normal: ['form', 'row', 'info', 'submitBtn', 'resetBtn']
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.updateKey();
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
extend(Manager.prototype, {
|
||||||
|
__init() {
|
||||||
|
this.$render = this.$handle.$render;
|
||||||
|
this.$r = (...args) => this.$render.renderRule(...args);
|
||||||
|
},
|
||||||
|
updateKey() {
|
||||||
|
this.key = unique();
|
||||||
|
},
|
||||||
|
//TODO interface
|
||||||
|
init() {
|
||||||
|
},
|
||||||
|
update() {
|
||||||
|
},
|
||||||
|
beforeRender() {
|
||||||
|
},
|
||||||
|
form() {
|
||||||
|
return this.vm.refs[this.ref];
|
||||||
|
},
|
||||||
|
getSlot(name){
|
||||||
|
const _fn = (vm) => {
|
||||||
|
if (vm) {
|
||||||
|
let slot = vm.slots[name];
|
||||||
|
if (slot) {
|
||||||
|
return slot;
|
||||||
|
}
|
||||||
|
return _fn(vm.setupState.parent);
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return _fn(this.vm);
|
||||||
|
},
|
||||||
|
mergeOptions(args, opt) {
|
||||||
|
return mergeProps(args.map(v => this.tidyOptions(v)), opt, this.mergeOptionsRule);
|
||||||
|
},
|
||||||
|
updateOptions(options) {
|
||||||
|
this.options = this.mergeOptions([options], this.getDefaultOptions());
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
tidyOptions(options) {
|
||||||
|
return options;
|
||||||
|
},
|
||||||
|
tidyRule(ctx) {
|
||||||
|
},
|
||||||
|
mergeProp(ctx) {
|
||||||
|
},
|
||||||
|
getDefaultOptions() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
render(children) {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
import toLine from '@form-create/utils/lib/toline';
|
||||||
|
import toString from '@form-create/utils/lib/tostring';
|
||||||
|
import extend from '@form-create/utils/lib/extend';
|
||||||
|
import {toProps} from '../frame/util';
|
||||||
|
import {createVNode, getCurrentInstance, resolveComponent, resolveDirective, withDirectives} from 'vue';
|
||||||
|
|
||||||
|
|
||||||
|
function tidyDirectives(directives) {
|
||||||
|
return Object.keys(directives).map(n => {
|
||||||
|
const data = directives[n];
|
||||||
|
const directive = resolveDirective(n);
|
||||||
|
if (!directive) return;
|
||||||
|
return [
|
||||||
|
directive, data.value, data.arg, data.modifiers
|
||||||
|
]
|
||||||
|
}).filter(v => !!v);
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeDirective(data, vn) {
|
||||||
|
let directives = data.directives;
|
||||||
|
if (!directives) return vn;
|
||||||
|
if (!Array.isArray(directives)) {
|
||||||
|
directives = [directives];
|
||||||
|
}
|
||||||
|
return withDirectives(vn, directives.reduce((lst, v) => {
|
||||||
|
return lst.concat(tidyDirectives(v));
|
||||||
|
}, []))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CreateNodeFactory() {
|
||||||
|
|
||||||
|
const aliasMap = {};
|
||||||
|
|
||||||
|
function CreateNode() {
|
||||||
|
}
|
||||||
|
|
||||||
|
extend(CreateNode.prototype, {
|
||||||
|
make(tag, data, children) {
|
||||||
|
return makeDirective(data, this.h(tag, toProps(data), children));
|
||||||
|
},
|
||||||
|
makeComponent(type, data, children) {
|
||||||
|
try {
|
||||||
|
return makeDirective(data, createVNode(type, toProps(data), children));
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
return createVNode('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
h(tag, data, children) {
|
||||||
|
const isNativeTag = getCurrentInstance().appContext.config.isNativeTag(tag);
|
||||||
|
if (isNativeTag) {
|
||||||
|
delete data.formCreateInject;
|
||||||
|
}
|
||||||
|
try{
|
||||||
|
return createVNode(isNativeTag ? tag : resolveComponent(tag), data, children);
|
||||||
|
}catch (e){
|
||||||
|
console.error(e);
|
||||||
|
return createVNode('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
aliasMap
|
||||||
|
});
|
||||||
|
|
||||||
|
extend(CreateNode, {
|
||||||
|
aliasMap,
|
||||||
|
alias(alias, name) {
|
||||||
|
aliasMap[alias] = name;
|
||||||
|
},
|
||||||
|
use(nodes) {
|
||||||
|
Object.keys(nodes).forEach((k) => {
|
||||||
|
const line = toLine(k);
|
||||||
|
const lower = toString(k).toLocaleLowerCase();
|
||||||
|
const v = nodes[k];
|
||||||
|
[k, line, lower].forEach(n => {
|
||||||
|
CreateNode.alias(k, v);
|
||||||
|
CreateNode.prototype[n] = function (data, children) {
|
||||||
|
return this.make(v, data, children);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return CreateNode;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
const BaseParser = {
|
||||||
|
init(ctx) {
|
||||||
|
},
|
||||||
|
toFormValue(value, ctx) {
|
||||||
|
return value
|
||||||
|
},
|
||||||
|
toValue(formValue, ctx) {
|
||||||
|
return formValue;
|
||||||
|
},
|
||||||
|
mounted(ctx) {
|
||||||
|
},
|
||||||
|
render(children, ctx) {
|
||||||
|
return ctx.$render.defaultRender(ctx, children);
|
||||||
|
},
|
||||||
|
preview(children, ctx) {
|
||||||
|
return this.render(children, ctx);
|
||||||
|
},
|
||||||
|
mergeProp(ctx) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BaseParser;
|
||||||
|
|
@ -0,0 +1,498 @@
|
||||||
|
import {byCtx, invoke, mergeRule, parseFn, toJson} from './util';
|
||||||
|
import {$set} from '@form-create/utils/lib/modify';
|
||||||
|
import {deepCopy} from '@form-create/utils/lib/deepextend';
|
||||||
|
import is, {hasProperty} from '@form-create/utils/lib/type';
|
||||||
|
import extend from '@form-create/utils/lib/extend';
|
||||||
|
import {format} from '@form-create/utils/lib/console';
|
||||||
|
import {asyncFetch} from './fetch';
|
||||||
|
|
||||||
|
|
||||||
|
function copy(value) {
|
||||||
|
return deepCopy(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Api(h) {
|
||||||
|
|
||||||
|
function tidyFields(fields) {
|
||||||
|
if (is.Undef(fields))
|
||||||
|
fields = h.fields();
|
||||||
|
else if (!Array.isArray(fields))
|
||||||
|
fields = [fields];
|
||||||
|
return fields;
|
||||||
|
}
|
||||||
|
|
||||||
|
function props(fields, key, val) {
|
||||||
|
tidyFields(fields).forEach(field => {
|
||||||
|
h.getCtxs(field).forEach(ctx => {
|
||||||
|
$set(ctx.rule, key, val);
|
||||||
|
h.$render.clearCache(ctx);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function allSubForm() {
|
||||||
|
const subs = h.subForm;
|
||||||
|
return Object.keys(subs).reduce((initial, k) => {
|
||||||
|
const sub = subs[k];
|
||||||
|
if (!sub) return initial;
|
||||||
|
if (Array.isArray(sub))
|
||||||
|
initial.push(...sub);
|
||||||
|
else
|
||||||
|
initial.push(sub);
|
||||||
|
return initial;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
|
||||||
|
const api = {
|
||||||
|
get config() {
|
||||||
|
return h.options
|
||||||
|
},
|
||||||
|
set config(val) {
|
||||||
|
h.fc.options.value = val;
|
||||||
|
},
|
||||||
|
get options() {
|
||||||
|
return h.options
|
||||||
|
},
|
||||||
|
set options(val) {
|
||||||
|
h.fc.options.value = val;
|
||||||
|
},
|
||||||
|
get form() {
|
||||||
|
return h.form
|
||||||
|
},
|
||||||
|
get rule() {
|
||||||
|
return h.rules
|
||||||
|
},
|
||||||
|
get parent() {
|
||||||
|
return h.vm.setupState.parent && h.vm.setupState.parent.setupState.fapi
|
||||||
|
},
|
||||||
|
get top() {
|
||||||
|
if (api.parent) {
|
||||||
|
return api.parent.top;
|
||||||
|
}
|
||||||
|
return api;
|
||||||
|
},
|
||||||
|
get children() {
|
||||||
|
return allSubForm();
|
||||||
|
},
|
||||||
|
formData(fields) {
|
||||||
|
return tidyFields(fields).reduce((initial, id) => {
|
||||||
|
const ctx = h.getFieldCtx(id);
|
||||||
|
if (!ctx) return initial;
|
||||||
|
initial[ctx.field] = copy(ctx.rule.value);
|
||||||
|
return initial;
|
||||||
|
}, h.options.appendValue !== false ? copy(h.appendData) : {});
|
||||||
|
},
|
||||||
|
getValue(field) {
|
||||||
|
const ctx = h.getFieldCtx(field);
|
||||||
|
if (!ctx) return;
|
||||||
|
return copy(ctx.rule.value);
|
||||||
|
},
|
||||||
|
coverValue(formData) {
|
||||||
|
const data = {...(formData || {})};
|
||||||
|
h.deferSyncValue(() => {
|
||||||
|
api.fields().forEach(key => {
|
||||||
|
const ctxs = h.fieldCtx[key];
|
||||||
|
if (ctxs) {
|
||||||
|
const flag = hasProperty(formData, key);
|
||||||
|
ctxs.forEach(ctx => {
|
||||||
|
ctx.rule.value = flag ? formData[key] : undefined;
|
||||||
|
})
|
||||||
|
delete data[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
extend(h.appendData, data);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setValue(field) {
|
||||||
|
let formData = field;
|
||||||
|
if (arguments.length >= 2)
|
||||||
|
formData = {[field]: arguments[1]};
|
||||||
|
h.deferSyncValue(() => {
|
||||||
|
Object.keys(formData).forEach(key => {
|
||||||
|
const ctxs = h.fieldCtx[key];
|
||||||
|
if (!ctxs) return h.appendData[key] = formData[key];
|
||||||
|
ctxs.forEach(ctx => {
|
||||||
|
ctx.rule.value = formData[key];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeField(field) {
|
||||||
|
const ctx = h.getCtx(field);
|
||||||
|
h.deferSyncValue(() => {
|
||||||
|
h.getCtxs(field).forEach(ctx => {
|
||||||
|
ctx.rm();
|
||||||
|
});
|
||||||
|
}, true);
|
||||||
|
return ctx ? ctx.origin : undefined;
|
||||||
|
},
|
||||||
|
removeRule(rule) {
|
||||||
|
const ctx = rule && byCtx(rule);
|
||||||
|
if (!ctx) return;
|
||||||
|
ctx.rm();
|
||||||
|
return ctx.origin;
|
||||||
|
},
|
||||||
|
fields: () => h.fields(),
|
||||||
|
append: (rule, after, child) => {
|
||||||
|
let index = h.sort.length - 1, rules;
|
||||||
|
const ctx = h.getCtx(after);
|
||||||
|
|
||||||
|
if (ctx) {
|
||||||
|
if (child) {
|
||||||
|
rules = ctx.getPending('children', ctx.rule.children);
|
||||||
|
if (!Array.isArray(rules)) return;
|
||||||
|
index = ctx.rule.children.length - 1;
|
||||||
|
} else {
|
||||||
|
index = ctx.root.indexOf(ctx.origin);
|
||||||
|
rules = ctx.root;
|
||||||
|
}
|
||||||
|
} else rules = h.rules;
|
||||||
|
rules.splice(index + 1, 0, rule);
|
||||||
|
},
|
||||||
|
prepend: (rule, after, child) => {
|
||||||
|
let index = 0, rules;
|
||||||
|
const ctx = h.getCtx(after);
|
||||||
|
|
||||||
|
if (ctx) {
|
||||||
|
if (child) {
|
||||||
|
rules = ctx.getPending('children', ctx.rule.children);
|
||||||
|
if (!Array.isArray(rules)) return;
|
||||||
|
} else {
|
||||||
|
index = ctx.root.indexOf(ctx.origin);
|
||||||
|
rules = ctx.root;
|
||||||
|
}
|
||||||
|
} else rules = h.rules;
|
||||||
|
rules.splice(index, 0, rule);
|
||||||
|
},
|
||||||
|
hidden(state, fields) {
|
||||||
|
props(fields, 'hidden', !!state);
|
||||||
|
h.refresh();
|
||||||
|
},
|
||||||
|
hiddenStatus(id) {
|
||||||
|
const ctx = h.getCtx(id);
|
||||||
|
if (!ctx) return;
|
||||||
|
return !!ctx.rule.hidden;
|
||||||
|
},
|
||||||
|
display(state, fields) {
|
||||||
|
props(fields, 'display', !!state);
|
||||||
|
h.refresh();
|
||||||
|
},
|
||||||
|
displayStatus(id) {
|
||||||
|
const ctx = h.getCtx(id);
|
||||||
|
if (!ctx) return;
|
||||||
|
return !!ctx.rule.display;
|
||||||
|
},
|
||||||
|
disabled(disabled, fields) {
|
||||||
|
tidyFields(fields).forEach((field) => {
|
||||||
|
h.getCtxs(field).forEach(ctx => {
|
||||||
|
$set(ctx.rule.props, 'disabled', !!disabled);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
h.refresh();
|
||||||
|
},
|
||||||
|
all(origin) {
|
||||||
|
return Object.keys(h.ctxs).map(k => {
|
||||||
|
const ctx = h.ctxs[k];
|
||||||
|
return origin ? ctx.origin : ctx.rule;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
model(origin) {
|
||||||
|
return h.fields().reduce((initial, key) => {
|
||||||
|
const ctx = h.fieldCtx[key][0];
|
||||||
|
initial[key] = origin ? ctx.origin : ctx.rule;
|
||||||
|
return initial;
|
||||||
|
}, {});
|
||||||
|
},
|
||||||
|
component(origin) {
|
||||||
|
return Object.keys(h.nameCtx).reduce((initial, key) => {
|
||||||
|
const ctx = h.nameCtx[key].map(ctx => origin ? ctx.origin : ctx.rule);
|
||||||
|
initial[key] = ctx.length === 1 ? ctx[0] : ctx;
|
||||||
|
return initial;
|
||||||
|
}, {});
|
||||||
|
},
|
||||||
|
bind() {
|
||||||
|
return api.form;
|
||||||
|
},
|
||||||
|
reload: (rules) => {
|
||||||
|
h.reloadRule(rules)
|
||||||
|
},
|
||||||
|
updateOptions(options) {
|
||||||
|
h.fc.updateOptions(options);
|
||||||
|
api.refresh();
|
||||||
|
},
|
||||||
|
onSubmit(fn) {
|
||||||
|
api.updateOptions({onSubmit: fn});
|
||||||
|
},
|
||||||
|
sync: (field) => {
|
||||||
|
if (Array.isArray(field)) {
|
||||||
|
field.forEach(v => api.sync(v));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let ctxs = is.Object(field) ? byCtx(field) : h.getCtxs(field);
|
||||||
|
if (!ctxs) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ctxs = Array.isArray(ctxs) ? ctxs : [ctxs];
|
||||||
|
ctxs.forEach(ctx => {
|
||||||
|
if (!ctx.deleted) {
|
||||||
|
const subForm = h.subForm[ctx.id];
|
||||||
|
if (subForm) {
|
||||||
|
if (Array.isArray(subForm)) {
|
||||||
|
subForm.forEach(form => {
|
||||||
|
form.refresh();
|
||||||
|
})
|
||||||
|
} else if (subForm) {
|
||||||
|
subForm.refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//ctx.updateKey(true);
|
||||||
|
h.$render.clearCache(ctx);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
h.refresh();
|
||||||
|
},
|
||||||
|
refresh: () => {
|
||||||
|
allSubForm().forEach(sub => {
|
||||||
|
sub.refresh();
|
||||||
|
});
|
||||||
|
h.$render.clearCacheAll();
|
||||||
|
h.refresh();
|
||||||
|
},
|
||||||
|
refreshOptions() {
|
||||||
|
h.$manager.updateOptions(h.options);
|
||||||
|
api.refresh();
|
||||||
|
},
|
||||||
|
hideForm: (hide) => {
|
||||||
|
h.vm.setupState.isShow = !hide;
|
||||||
|
},
|
||||||
|
changeStatus: () => {
|
||||||
|
return h.changeStatus;
|
||||||
|
},
|
||||||
|
clearChangeStatus: () => {
|
||||||
|
h.changeStatus = false;
|
||||||
|
},
|
||||||
|
updateRule(id, rule) {
|
||||||
|
h.getCtxs(id).forEach(ctx => {
|
||||||
|
extend(ctx.rule, rule);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateRules(rules) {
|
||||||
|
Object.keys(rules).forEach(id => {
|
||||||
|
api.updateRule(id, rules[id]);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
mergeRule: (id, rule) => {
|
||||||
|
h.getCtxs(id).forEach(ctx => {
|
||||||
|
mergeRule(ctx.rule, rule);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
mergeRules(rules) {
|
||||||
|
Object.keys(rules).forEach(id => {
|
||||||
|
api.mergeRule(id, rules[id]);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getRule: (id, origin) => {
|
||||||
|
const ctx = h.getCtx(id);
|
||||||
|
if (ctx) {
|
||||||
|
return origin ? ctx.origin : ctx.rule;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getRenderRule: (id) => {
|
||||||
|
const ctx = h.getCtx(id);
|
||||||
|
if (ctx) {
|
||||||
|
return ctx.prop;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getRefRule: (id) => {
|
||||||
|
const ctxs = h.getCtxs(id);
|
||||||
|
if (ctxs) {
|
||||||
|
const rules = ctxs.map(ctx => {
|
||||||
|
return ctx.rule;
|
||||||
|
})
|
||||||
|
return rules.length === 1 ? rules[0] : rules;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEffect(id, attr, value) {
|
||||||
|
const ctx = h.getCtx(id);
|
||||||
|
if (ctx && attr) {
|
||||||
|
if (attr[0] === '$') {
|
||||||
|
attr = attr.substr(1);
|
||||||
|
}
|
||||||
|
if (hasProperty(ctx.rule, '$' + attr)) {
|
||||||
|
$set(ctx.rule, '$' + attr, value);
|
||||||
|
}
|
||||||
|
if (!hasProperty(ctx.rule, 'effect')) {
|
||||||
|
ctx.rule.effect = {};
|
||||||
|
}
|
||||||
|
$set(ctx.rule.effect, attr, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clearEffectData(id, attr) {
|
||||||
|
const ctx = h.getCtx(id);
|
||||||
|
if (ctx) {
|
||||||
|
if (attr && attr[0] === '$') {
|
||||||
|
attr = attr.substr(1);
|
||||||
|
}
|
||||||
|
ctx.clearEffectData(attr);
|
||||||
|
api.sync(id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateValidate(id, validate, merge) {
|
||||||
|
if (merge) {
|
||||||
|
api.mergeRule(id, {validate})
|
||||||
|
} else {
|
||||||
|
props(id, 'validate', validate);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateValidates(validates, merge) {
|
||||||
|
Object.keys(validates).forEach(id => {
|
||||||
|
api.updateValidate(id, validates[id], merge);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
refreshValidate() {
|
||||||
|
api.refresh();
|
||||||
|
},
|
||||||
|
resetFields(fields) {
|
||||||
|
tidyFields(fields).forEach(field => {
|
||||||
|
h.getCtxs(field).forEach(ctx => {
|
||||||
|
h.$render.clearCache(ctx);
|
||||||
|
ctx.rule.value = copy(ctx.defaultValue);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
method(id, name) {
|
||||||
|
const el = api.el(id);
|
||||||
|
if (!el || !el[name])
|
||||||
|
throw new Error(format('err', `${name}方法不存在`));
|
||||||
|
return (...args) => {
|
||||||
|
return el[name](...args);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
exec(id, name, ...args) {
|
||||||
|
return invoke(() => api.method(id, name)(...args));
|
||||||
|
},
|
||||||
|
toJson(space) {
|
||||||
|
return toJson(api.rule, space);
|
||||||
|
},
|
||||||
|
trigger(id, event, ...args) {
|
||||||
|
const el = api.el(id);
|
||||||
|
el && el.$emit(event, ...args);
|
||||||
|
},
|
||||||
|
el(id) {
|
||||||
|
const ctx = h.getCtx(id);
|
||||||
|
if (ctx) return ctx.el || h.vm.refs[ctx.ref];
|
||||||
|
},
|
||||||
|
closeModal: (id) => {
|
||||||
|
h.bus.$emit('fc:closeModal:' + id);
|
||||||
|
},
|
||||||
|
getSubForm(field) {
|
||||||
|
const ctx = h.getCtx(field);
|
||||||
|
return ctx ? h.subForm[ctx.id] : undefined;
|
||||||
|
},
|
||||||
|
getChildrenRuleList(id) {
|
||||||
|
const flag = typeof id === 'object';
|
||||||
|
const ctx = flag ? byCtx(id) : h.getCtx(id);
|
||||||
|
const rule = ctx ? ctx.rule : (flag ? id : api.getRule(id));
|
||||||
|
if (!rule) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const rules = [];
|
||||||
|
const findRules = children => {
|
||||||
|
children && children.forEach(item => {
|
||||||
|
if (typeof item !== 'object') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (item.field) {
|
||||||
|
rules.push(item);
|
||||||
|
}
|
||||||
|
rules.push(...api.getChildrenRuleList(item));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
findRules(ctx ? ctx.loadChildrenPending() : rule.children);
|
||||||
|
return rules;
|
||||||
|
},
|
||||||
|
getChildrenFormData(id) {
|
||||||
|
const rules = api.getChildrenRuleList(id);
|
||||||
|
return rules.reduce((formData, rule) => {
|
||||||
|
formData[rule.field] = copy(rule.value);
|
||||||
|
return formData;
|
||||||
|
}, {});
|
||||||
|
},
|
||||||
|
setChildrenFormData(id, formData, cover) {
|
||||||
|
const rules = api.getChildrenRuleList(id);
|
||||||
|
rules.forEach(rule => {
|
||||||
|
if (hasProperty(formData, rule.field)) {
|
||||||
|
rule.value = formData[rule.field];
|
||||||
|
} else if (cover) {
|
||||||
|
rule.value = undefined;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getGlobalEvent(name) {
|
||||||
|
let event = api.options.globalEvent[name];
|
||||||
|
if (event) {
|
||||||
|
if (typeof event === 'object') {
|
||||||
|
event = event.handle;
|
||||||
|
}
|
||||||
|
return parseFn(event);
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
},
|
||||||
|
getGlobalData(name) {
|
||||||
|
return new Promise((resolve, inject) => {
|
||||||
|
let config = api.options.globalData[name];
|
||||||
|
if (!config) {
|
||||||
|
resolve(h.fc.loadData[name]);
|
||||||
|
}
|
||||||
|
if (config.type === 'fetch') {
|
||||||
|
api.fetch(config).then(res => {
|
||||||
|
resolve(res);
|
||||||
|
}).catch(inject);
|
||||||
|
} else {
|
||||||
|
resolve(config.data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
nextTick(fn) {
|
||||||
|
h.bus.$once('next-tick', fn);
|
||||||
|
h.refresh();
|
||||||
|
},
|
||||||
|
nextRefresh(fn) {
|
||||||
|
h.nextRefresh();
|
||||||
|
fn && invoke(fn);
|
||||||
|
},
|
||||||
|
deferSyncValue(fn, sync) {
|
||||||
|
h.deferSyncValue(fn, sync);
|
||||||
|
},
|
||||||
|
emit(name, ...args) {
|
||||||
|
h.vm.emit(name, ...args);
|
||||||
|
},
|
||||||
|
bus: h.bus,
|
||||||
|
fetch(opt) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
h.beforeFetch(opt).then(() => {
|
||||||
|
return asyncFetch(opt).then(resolve).catch(reject);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getData(id, def) {
|
||||||
|
return h.fc.getData(id, def);
|
||||||
|
},
|
||||||
|
setData(id, data) {
|
||||||
|
return h.fc.setData(id, data);
|
||||||
|
},
|
||||||
|
helper: {
|
||||||
|
tidyFields, props
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
['on', 'once', 'off'].forEach(n => {
|
||||||
|
api[n] = function (...args) {
|
||||||
|
h.bus[`$${n}`](...args);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
api.changeValue = api.changeField = api.setValue;
|
||||||
|
|
||||||
|
return api;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import {functionalMerge, normalMerge, toArrayMerge} from '@form-create/utils/lib/mergeprops';
|
||||||
|
|
||||||
|
|
||||||
|
export const keyAttrs = ['type', 'slot', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key', 'slotUpdate', 'computed', 'preview', 'component', 'cache', 'modelEmit'];
|
||||||
|
|
||||||
|
export const arrayAttrs = ['validate', 'children', 'control'];
|
||||||
|
|
||||||
|
export const normalAttrs = ['effect'];
|
||||||
|
|
||||||
|
export function attrs() {
|
||||||
|
return [...keyAttrs, ...normalMerge, ...toArrayMerge, ...functionalMerge, ...arrayAttrs, ...normalAttrs];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
// https://github.com/ElemeFE/element/blob/dev/packages/upload/src/ajax.js
|
||||||
|
|
||||||
|
import is from '@form-create/utils/lib/type';
|
||||||
|
import {parseFn} from '@form-create/utils/lib/json';
|
||||||
|
|
||||||
|
function getError(action, option, xhr) {
|
||||||
|
const msg = `fail to ${action} ${xhr.status}'`;
|
||||||
|
const err = new Error(msg);
|
||||||
|
err.status = xhr.status;
|
||||||
|
err.url = action;
|
||||||
|
return err;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBody(xhr) {
|
||||||
|
const text = xhr.responseText || xhr.response;
|
||||||
|
if (!text) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
return JSON.parse(text);
|
||||||
|
} catch (e) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function fetch(option) {
|
||||||
|
if (typeof XMLHttpRequest === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
const action = option.action;
|
||||||
|
|
||||||
|
xhr.onerror = function error(e) {
|
||||||
|
option.onError(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onload = function onload() {
|
||||||
|
if (xhr.status < 200 || xhr.status >= 300) {
|
||||||
|
return option.onError(getError(action, option, xhr), getBody(xhr));
|
||||||
|
}
|
||||||
|
|
||||||
|
option.onSuccess(getBody(xhr));
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.open(option.method || 'get', action, true);
|
||||||
|
|
||||||
|
let formData;
|
||||||
|
if (option.data) {
|
||||||
|
if ((option.dataType || '').toLowerCase() !== 'json') {
|
||||||
|
formData = new FormData();
|
||||||
|
Object.keys(option.data).map(key => {
|
||||||
|
formData.append(key, option.data[key]);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
formData = JSON.stringify(option.data);
|
||||||
|
xhr.setRequestHeader('content-type', 'application/json');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (option.withCredentials && 'withCredentials' in xhr) {
|
||||||
|
xhr.withCredentials = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const headers = option.headers || {};
|
||||||
|
|
||||||
|
Object.keys(headers).forEach(item => {
|
||||||
|
if (headers[item] !== null) {
|
||||||
|
xhr.setRequestHeader(item, headers[item]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xhr.send(formData);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function asyncFetch(config) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
fetch({
|
||||||
|
...config,
|
||||||
|
onSuccess(res) {
|
||||||
|
let fn = (v) => v;
|
||||||
|
const parse = parseFn(config.parse);
|
||||||
|
if (is.Function(parse)) {
|
||||||
|
fn = parse;
|
||||||
|
} else if (parse && is.String(parse)) {
|
||||||
|
fn = (v) => {
|
||||||
|
parse.split('.').forEach(k => {
|
||||||
|
if (v) {
|
||||||
|
v = v[k];
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
resolve(fn(res));
|
||||||
|
},
|
||||||
|
onError(err) {
|
||||||
|
reject(err);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,448 @@
|
||||||
|
import $FormCreate from '../components/formCreate';
|
||||||
|
import {createApp, h, reactive, ref, watch, nextTick} from 'vue';
|
||||||
|
import makerFactory from '../factory/maker';
|
||||||
|
import Handle from '../handler';
|
||||||
|
import fetch from './fetch';
|
||||||
|
import {creatorFactory} from '..';
|
||||||
|
import BaseParser from '../factory/parser';
|
||||||
|
import {copyRule, copyRules, mergeGlobal, parseJson, toJson, parseFn, invoke, setPrototypeOf} from './util';
|
||||||
|
import fragment from '../components/fragment';
|
||||||
|
import is, {hasProperty} from '@form-create/utils/lib/type';
|
||||||
|
import toCase from '@form-create/utils/lib/tocase';
|
||||||
|
import extend from '@form-create/utils/lib/extend';
|
||||||
|
import {CreateNodeFactory} from '../factory/node';
|
||||||
|
import {createManager} from '../factory/manager';
|
||||||
|
import {arrayAttrs, keyAttrs, normalAttrs} from './attrs';
|
||||||
|
import {appendProto} from '../factory/creator';
|
||||||
|
import $provider from './provider';
|
||||||
|
import {deepCopy} from '@form-create/utils/lib/deepextend';
|
||||||
|
import Mitt from '@form-create/utils/lib/mitt';
|
||||||
|
import html from '../parser/html';
|
||||||
|
import uniqueId from '@form-create/utils/lib/unique';
|
||||||
|
|
||||||
|
function parseProp(name, id) {
|
||||||
|
let prop;
|
||||||
|
if (arguments.length === 2) {
|
||||||
|
prop = arguments[1];
|
||||||
|
id = prop[name];
|
||||||
|
} else {
|
||||||
|
prop = arguments[2];
|
||||||
|
}
|
||||||
|
return {id, prop};
|
||||||
|
}
|
||||||
|
|
||||||
|
function nameProp() {
|
||||||
|
return parseProp('name', ...arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportAttrs(attrs) {
|
||||||
|
const key = attrs.key || [];
|
||||||
|
const array = attrs.array || [];
|
||||||
|
const normal = attrs.normal || [];
|
||||||
|
keyAttrs.push(...key);
|
||||||
|
arrayAttrs.push(...array);
|
||||||
|
normalAttrs.push(...normal);
|
||||||
|
|
||||||
|
appendProto([...key, ...array, ...normal]);
|
||||||
|
}
|
||||||
|
|
||||||
|
let id = 1;
|
||||||
|
const instance = {};
|
||||||
|
|
||||||
|
//todo 表单嵌套
|
||||||
|
export default function FormCreateFactory(config) {
|
||||||
|
|
||||||
|
const components = {
|
||||||
|
[fragment.name]: fragment
|
||||||
|
};
|
||||||
|
const parsers = {};
|
||||||
|
const directives = {};
|
||||||
|
const modelFields = {};
|
||||||
|
const useApps = [];
|
||||||
|
const listener = [];
|
||||||
|
const extendApiFn = [
|
||||||
|
config.extendApi
|
||||||
|
];
|
||||||
|
const providers = {
|
||||||
|
...$provider
|
||||||
|
};
|
||||||
|
const maker = makerFactory();
|
||||||
|
let globalConfig = {global: {}};
|
||||||
|
const loadData = reactive({});
|
||||||
|
const CreateNode = CreateNodeFactory();
|
||||||
|
const formulas = {};
|
||||||
|
const isMobile = config.isMobile === true;
|
||||||
|
|
||||||
|
exportAttrs(config.attrs || {});
|
||||||
|
|
||||||
|
function getApi(name) {
|
||||||
|
const val = instance[name];
|
||||||
|
if (Array.isArray(val)) {
|
||||||
|
return val.map(v => {
|
||||||
|
return v.api();
|
||||||
|
});
|
||||||
|
} else if (val) {
|
||||||
|
return val.api();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function useApp(fn) {
|
||||||
|
useApps.push(fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
function directive() {
|
||||||
|
const data = nameProp(...arguments);
|
||||||
|
if (data.id && data.prop) directives[data.id] = data.prop;
|
||||||
|
}
|
||||||
|
|
||||||
|
function register() {
|
||||||
|
const data = nameProp(...arguments);
|
||||||
|
if (data.id && data.prop) providers[data.id] = {...data.prop, name: data.id};
|
||||||
|
}
|
||||||
|
|
||||||
|
function componentAlias(alias) {
|
||||||
|
CreateNode.use(alias);
|
||||||
|
}
|
||||||
|
|
||||||
|
function parser() {
|
||||||
|
const data = nameProp(...arguments);
|
||||||
|
if (!data.id || !data.prop) return BaseParser;
|
||||||
|
const name = toCase(data.id);
|
||||||
|
const parser = data.prop;
|
||||||
|
const base = parser.merge === true ? parsers[name] : undefined;
|
||||||
|
parsers[name] = setPrototypeOf(parser, base || BaseParser);
|
||||||
|
maker[name] = creatorFactory(name);
|
||||||
|
parser.maker && extend(maker, parser.maker);
|
||||||
|
}
|
||||||
|
|
||||||
|
function component(id, component) {
|
||||||
|
let name;
|
||||||
|
if (is.String(id)) {
|
||||||
|
name = id;
|
||||||
|
if (component === undefined) {
|
||||||
|
return components[name];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
name = id.displayName || id.name;
|
||||||
|
component = id;
|
||||||
|
}
|
||||||
|
if (!name || !component) return;
|
||||||
|
const nameAlias = toCase(name);
|
||||||
|
components[name] = component;
|
||||||
|
components[nameAlias] = component;
|
||||||
|
delete CreateNode.aliasMap[name];
|
||||||
|
delete CreateNode.aliasMap[nameAlias];
|
||||||
|
delete parsers[name];
|
||||||
|
delete parsers[nameAlias];
|
||||||
|
if (component.formCreateParser) parser(name, component.formCreateParser);
|
||||||
|
}
|
||||||
|
|
||||||
|
function $form() {
|
||||||
|
return $FormCreate(FormCreate, components, directives);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createFormApp(rule, option) {
|
||||||
|
const Type = $form();
|
||||||
|
return createApp({
|
||||||
|
data() {
|
||||||
|
return reactive({
|
||||||
|
rule, option
|
||||||
|
});
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return h(Type, {ref: 'fc', ...this.$data});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function $vnode() {
|
||||||
|
return fragment;
|
||||||
|
}
|
||||||
|
|
||||||
|
//todo 检查回调函数作用域
|
||||||
|
function use(fn, opt) {
|
||||||
|
if (is.Function(fn.install)) fn.install(create, opt);
|
||||||
|
else if (is.Function(fn)) fn(create, opt);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
function create(rules, option) {
|
||||||
|
let app = createFormApp(rules, option || {});
|
||||||
|
useApps.forEach(v => {
|
||||||
|
invoke(() => v(create, app));
|
||||||
|
})
|
||||||
|
const div = document.createElement('div');
|
||||||
|
(option?.el || document.body).appendChild(div);
|
||||||
|
const vm = app.mount(div);
|
||||||
|
return vm.$refs.fc.fapi;
|
||||||
|
}
|
||||||
|
|
||||||
|
function factory(inherit) {
|
||||||
|
let _config = {...config};
|
||||||
|
if (inherit) {
|
||||||
|
_config.inherit = {
|
||||||
|
components,
|
||||||
|
parsers,
|
||||||
|
directives,
|
||||||
|
modelFields,
|
||||||
|
providers,
|
||||||
|
useApps,
|
||||||
|
maker,
|
||||||
|
formulas,
|
||||||
|
loadData
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
delete _config.inherit;
|
||||||
|
}
|
||||||
|
return FormCreateFactory(_config);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setModelField(name, field) {
|
||||||
|
modelFields[name] = field;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setFormula(name, fn) {
|
||||||
|
formulas[name] = fn;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _emitData(id) {
|
||||||
|
Object.keys(instance).forEach(v => {
|
||||||
|
const apis = Array.isArray(instance[v]) ? instance[v] : [instance[v]];
|
||||||
|
apis.forEach(that => {
|
||||||
|
that.bus.$emit('p.loadData.' + id);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function setData(id, data) {
|
||||||
|
loadData[id] = data;
|
||||||
|
_emitData(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData(id, def) {
|
||||||
|
return hasProperty(loadData, id) ? loadData[id] : def;
|
||||||
|
}
|
||||||
|
|
||||||
|
function extendApi(fn) {
|
||||||
|
extendApiFn.push(fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeData(id) {
|
||||||
|
delete loadData[id];
|
||||||
|
_emitData(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function on(name, callback) {
|
||||||
|
listener.push({name, callback});
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormCreate(vm) {
|
||||||
|
extend(this, {
|
||||||
|
id: id++,
|
||||||
|
create,
|
||||||
|
vm,
|
||||||
|
manager: createManager(config.manager),
|
||||||
|
parsers,
|
||||||
|
providers,
|
||||||
|
modelFields,
|
||||||
|
formulas,
|
||||||
|
isMobile,
|
||||||
|
rules: vm.props.rule,
|
||||||
|
name: vm.props.name || uniqueId(),
|
||||||
|
inFor: vm.props.inFor,
|
||||||
|
prop: {
|
||||||
|
components,
|
||||||
|
directives,
|
||||||
|
},
|
||||||
|
setData,
|
||||||
|
getData,
|
||||||
|
loadData,
|
||||||
|
CreateNode,
|
||||||
|
bus: new Mitt(),
|
||||||
|
unwatch: null,
|
||||||
|
options: ref({}),
|
||||||
|
extendApiFn,
|
||||||
|
})
|
||||||
|
listener.forEach(item => {
|
||||||
|
this.bus.$on(item.name,item.callback);
|
||||||
|
});
|
||||||
|
nextTick(() => {
|
||||||
|
watch(this.options, () => {
|
||||||
|
this.$handle.$manager.updateOptions(this.options.value);
|
||||||
|
this.api().refresh();
|
||||||
|
}, {deep: true})
|
||||||
|
});
|
||||||
|
extend(vm.appContext.components, components);
|
||||||
|
extend(vm.appContext.directives, directives);
|
||||||
|
this.$handle = new Handle(this)
|
||||||
|
if (this.name) {
|
||||||
|
if (this.inFor) {
|
||||||
|
if (!instance[this.name]) instance[this.name] = [];
|
||||||
|
instance[this.name].push(this);
|
||||||
|
} else {
|
||||||
|
instance[this.name] = this;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FormCreate.isMobile = isMobile;
|
||||||
|
|
||||||
|
extend(FormCreate.prototype, {
|
||||||
|
init() {
|
||||||
|
if (this.isSub()) {
|
||||||
|
this.unwatch = watch(() => this.vm.setupState.parent.setupState.fc.options.value, () => {
|
||||||
|
this.initOptions();
|
||||||
|
this.$handle.api.refresh();
|
||||||
|
}, {deep: true});
|
||||||
|
}
|
||||||
|
this.initOptions();
|
||||||
|
this.$handle.init();
|
||||||
|
},
|
||||||
|
isSub() {
|
||||||
|
return this.vm.setupState.parent && this.vm.props.extendOption;
|
||||||
|
},
|
||||||
|
initOptions() {
|
||||||
|
this.options.value = {};
|
||||||
|
let options = {
|
||||||
|
formData: {},
|
||||||
|
submitBtn: {},
|
||||||
|
resetBtn: {},
|
||||||
|
globalEvent: {},
|
||||||
|
globalData: {}, ...deepCopy(globalConfig)
|
||||||
|
};
|
||||||
|
if (this.isSub()) {
|
||||||
|
options = this.mergeOptions(options, this.vm.setupState.parent.setupState.fc.options.value || {}, true);
|
||||||
|
}
|
||||||
|
options = this.mergeOptions(options, this.vm.props.option);
|
||||||
|
this.updateOptions(options);
|
||||||
|
},
|
||||||
|
mergeOptions(target, opt, parent) {
|
||||||
|
opt = deepCopy(opt);
|
||||||
|
parent && ['page', 'onSubmit', 'mounted', 'reload', 'formData', 'el', 'globalClass', 'style'].forEach((n) => {
|
||||||
|
delete opt[n];
|
||||||
|
});
|
||||||
|
if (opt.global) {
|
||||||
|
target.global = mergeGlobal(target.global, opt.global);
|
||||||
|
delete opt.global;
|
||||||
|
}
|
||||||
|
this.$handle.$manager.mergeOptions([opt], target);
|
||||||
|
return target;
|
||||||
|
},
|
||||||
|
updateOptions(options) {
|
||||||
|
this.options.value = this.mergeOptions(this.options.value, options);
|
||||||
|
this.$handle.$manager.updateOptions(this.options.value);
|
||||||
|
},
|
||||||
|
api() {
|
||||||
|
return this.$handle.api;
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return this.$handle.render();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$handle.mounted();
|
||||||
|
},
|
||||||
|
unmount() {
|
||||||
|
if (this.name) {
|
||||||
|
if (this.inFor) {
|
||||||
|
const idx = instance[this.name].indexOf(this);
|
||||||
|
instance[this.name].splice(idx, 1);
|
||||||
|
} else {
|
||||||
|
delete instance[this.name];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.unwatch && this.unwatch();
|
||||||
|
this.$handle.reloadRule([]);
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
this.$handle.bindNextTick(() => this.bus.$emit('next-tick', this.$handle.api));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
function useAttr(formCreate) {
|
||||||
|
extend(formCreate, {
|
||||||
|
version: config.version,
|
||||||
|
ui: config.ui,
|
||||||
|
extendApi,
|
||||||
|
getData,
|
||||||
|
setData,
|
||||||
|
removeData,
|
||||||
|
maker,
|
||||||
|
component,
|
||||||
|
directive,
|
||||||
|
setModelField,
|
||||||
|
setFormula,
|
||||||
|
register,
|
||||||
|
$vnode,
|
||||||
|
parser,
|
||||||
|
use,
|
||||||
|
factory,
|
||||||
|
componentAlias,
|
||||||
|
copyRule,
|
||||||
|
copyRules,
|
||||||
|
fetch,
|
||||||
|
$form,
|
||||||
|
parseFn,
|
||||||
|
parseJson,
|
||||||
|
toJson,
|
||||||
|
useApp,
|
||||||
|
getApi,
|
||||||
|
on,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function useStatic(formCreate) {
|
||||||
|
extend(formCreate, {
|
||||||
|
create,
|
||||||
|
isMobile,
|
||||||
|
install(app, options) {
|
||||||
|
globalConfig = {...globalConfig, ...(options || {})}
|
||||||
|
if (app._installedFormCreate === true) return;
|
||||||
|
app._installedFormCreate = true;
|
||||||
|
|
||||||
|
const $formCreate = function (rules, opt = {}) {
|
||||||
|
return create(rules, opt, this);
|
||||||
|
};
|
||||||
|
|
||||||
|
useAttr($formCreate);
|
||||||
|
|
||||||
|
app.config.globalProperties.$formCreate = $formCreate;
|
||||||
|
const $component = $form();
|
||||||
|
app.component($component.name, $component);
|
||||||
|
useApps.forEach(v => {
|
||||||
|
invoke(() => v(formCreate, app));
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
useAttr(create);
|
||||||
|
useStatic(create);
|
||||||
|
|
||||||
|
CreateNode.use({fragment: 'fcFragment'});
|
||||||
|
|
||||||
|
config.install && create.use(config);
|
||||||
|
|
||||||
|
useApp((_, app) => {
|
||||||
|
app.mixin({
|
||||||
|
props: ['formCreateInject'],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
parser(html);
|
||||||
|
|
||||||
|
if (config.inherit) {
|
||||||
|
const inherit = config.inherit;
|
||||||
|
inherit.components && extend(components, inherit.components);
|
||||||
|
inherit.parsers && extend(parsers, inherit.parsers);
|
||||||
|
inherit.directives && extend(directives, inherit.directives);
|
||||||
|
inherit.modelFields && extend(modelFields, inherit.modelFields);
|
||||||
|
inherit.providers && extend(providers, inherit.providers);
|
||||||
|
inherit.useApps && extend(useApps, inherit.useApps);
|
||||||
|
inherit.maker && extend(maker, inherit.maker);
|
||||||
|
inherit.loadData && extend(loadData, inherit.loadData);
|
||||||
|
inherit.formulas && extend(formulas, inherit.formulas);
|
||||||
|
}
|
||||||
|
|
||||||
|
return create;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue