web-component-gallery 1.1.39 → 1.1.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/amap.umd.js +3 -3
- package/dist/form.umd.js +3 -3
- package/dist/index.umd.js +3 -3
- package/lib/form/Model.js +17 -11
- package/lib/form/style/Model.less +9 -10
- package/lib/form/utils/render.js +20 -23
- package/package.json +1 -1
- package/plugins/lib/form/Model.js +17 -11
- package/plugins/lib/form/style/Model.less +9 -10
- package/plugins/lib/form/utils/render.js +20 -23
package/dist/amap.umd.js
CHANGED
|
@@ -9108,7 +9108,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var ant_
|
|
|
9108
9108
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
9109
9109
|
|
|
9110
9110
|
"use strict";
|
|
9111
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _utils_render__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/render */ \"./plugins/lib/form/utils/render.js\");\n/* harmony import */ var _style_Model_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Model.less */ \"./plugins/lib/form/style/Model.less\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'Model',\n model: {\n prop: 'value',\n event: 'Change:Model'\n },\n data() {\n return {\n formRules: {}\n };\n },\n props: {\n value: {\n type: Object,\n default: () => ({})\n },\n /* Form布局方式 */\n layout: {\n type: String,\n default: 'vertical'\n },\n /* 一行显示几个 PS:最多5个 */\n layoutSize: {\n type: Number,\n default: 4,\n validator: value => {\n return value <= 5;\n }\n },\n /* 表单项配置 */\n formSetting: Array\n },\n computed: {\n form: {\n get() {\n /** 校验单独赋值延迟的字段 */\n for (const k in this.value) {\n Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel
|
|
9111
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _utils_render__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/render */ \"./plugins/lib/form/utils/render.js\");\n/* harmony import */ var _style_Model_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Model.less */ \"./plugins/lib/form/style/Model.less\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'Model',\n model: {\n prop: 'value',\n event: 'Change:Model'\n },\n data() {\n return {\n formRules: {}\n };\n },\n props: {\n value: {\n type: Object,\n default: () => ({})\n },\n /* Form布局方式 */\n layout: {\n type: String,\n default: 'vertical'\n },\n /* 一行显示几个 PS:最多5个 */\n layoutSize: {\n type: Number,\n default: 4,\n validator: value => {\n return value <= 5;\n }\n },\n /* 表单项配置 */\n formSetting: Array\n },\n computed: {\n form: {\n get() {\n /** 校验单独赋值延迟的字段 */\n for (const k in this.value) {\n Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k);\n }\n return this.value;\n },\n set(value) {\n this.$emit('Change:Model', value);\n }\n },\n formAttrs() {\n let attr = {\n labelCol: {\n span: 4\n },\n wrapperCol: {\n span: 20\n },\n ...this.$attrs\n };\n this.layout === 'vertical' && (delete attr.labelCol, delete attr.wrapperCol);\n return attr;\n },\n filterSetting() {\n return this.formSetting.filter(settingItem => !settingItem.hidden);\n }\n },\n watch: {\n filterSetting: {\n handler(newVal, oldVal) {\n newVal.forEach(node => this.$set(this.formRules, node.model, _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItemRule.call(this, node)));\n },\n immediate: true\n }\n },\n mounted() {\n this.$emit('update:refForm', this.$refs.FormModel);\n },\n methods: {\n /** 包含单表单项，多表单项，动态增减表单项合并处理 */\n setModelRender(props) {\n const h = this.$createElement;\n const dynamicModel = this.form[props.model];\n return (\n /** \r\n * multiple为动态多项\r\n * multipleConfig为配置的动态项数据 */\n h(\"div\", {\n \"class\": props.multiple && ['MultipleForm'],\n \"attrs\": {\n ...{\n style: _utils_render__WEBPACK_IMPORTED_MODULE_1__.getFormWidth.call(this, props, this.layoutSize)\n }\n }\n }, [this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props), /** 处理动态增减表单 */\n dynamicModel instanceof Array && props.multiple ? dynamicModel.map((modelItem, index) => props.multipleConfig.map((configItem, key) => {\n /** 为动态项时重新定义绑定key、prop等来进行检验 */\n /** 目前还有一个动态项layoutSize排版问题 */\n const childAttrs = {\n key: index,\n prop: `${props.model}.${index}.${configItem.model}`,\n label: configItem.label,\n style: _utils_render__WEBPACK_IMPORTED_MODULE_1__.getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),\n rules: _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItemRule.call(this, configItem, modelItem),\n parentModel: props.model\n };\n return _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItem.call(this, h, modelItem, configItem, childAttrs);\n })) : _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItem.call(this, h, this.form, props), this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)])\n );\n },\n /** 提交测验 */\n formSubmit() {\n return this.$refs.FormModel.validate();\n }\n },\n render() {\n const h = arguments[0];\n const {\n layout,\n formAttrs,\n setModelRender\n } = this;\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default()([{\n \"ref\": \"FormModel\",\n \"class\": \"FormModel\"\n }, {\n \"props\": {\n model: this.form,\n rules: this.formRules,\n layout,\n ...formAttrs\n }\n }]), [this.$slots.default ?? this.filterSetting.map(props => setModelRender(props))]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/form/Model.js?");
|
|
9112
9112
|
|
|
9113
9113
|
/***/ }),
|
|
9114
9114
|
|
|
@@ -9130,7 +9130,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
9130
9130
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
9131
9131
|
|
|
9132
9132
|
"use strict";
|
|
9133
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getFormWidth: function() { return /* binding */ getFormWidth; },\n/* harmony export */ setFormItem: function() { return /* binding */ setFormItem; },\n/* harmony export */
|
|
9133
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getFormWidth: function() { return /* binding */ getFormWidth; },\n/* harmony export */ setFormItem: function() { return /* binding */ setFormItem; },\n/* harmony export */ setFormItemRule: function() { return /* binding */ setFormItemRule; }\n/* harmony export */ });\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _components_RenderComp_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/RenderComp.vue */ \"./plugins/lib/form/components/RenderComp.vue\");\n\n\nconst FormModelItem = ant_design_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Item;\n\n/** 根据layoutSize来进行距离及大小切分 */\nfunction getFormWidth(child, layoutSize) {\n if (this.layout === 'vertical') return `flex: 0 1 calc((${100 / layoutSize * (child.size ?? 1)}% - 24px));margin-right:24px;`;\n return `flex: 0 1 ${100 / layoutSize * (child.size ?? 1)}%;`;\n}\n\n/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */\nfunction setFormItemRule(node, nodeParent = {}) {\n const required = node.required ?? nodeParent.required ?? this.formAttrs.required ?? true;\n\n /** node.placeholder与组件内的提示文字位置不对等 */\n const message = node.attrs?.placeholder || (/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') + (node.label || '');\n const rules = [{\n required,\n message,\n trigger: ['change', 'blur']\n }].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))));\n return rules;\n}\n\n/** 动态渲染表单项 */\nfunction setFormItem(h, vModel, child, childAttrs = {}) {\n const {\n layout,\n layoutSize,\n $scopedSlots\n } = this;\n let childDefaultAttrs = {\n key: child.model,\n prop: child.model,\n label: child.label,\n colon: !(layout == 'inline')\n };\n const slotsName = (childAttrs.parentModel ?? '') + child.model;\n return h(FormModelItem, {\n \"class\": [{\n FormLineVertical: child.size === layoutSize && layout === 'vertical'\n }, {\n FormLine: child.size === layoutSize\n }],\n \"attrs\": {\n ...{\n ...childDefaultAttrs,\n ...childAttrs\n }\n }\n }, [$scopedSlots[child.model] ? $scopedSlots[child.model](child) : h(_components_RenderComp_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n \"attrs\": {\n \"component\": child.is,\n ...child.attrs\n },\n \"on\": {\n ...child.event\n },\n \"model\": {\n value: vModel[child.model],\n callback: $$v => {\n this.$set(vModel, child.model, $$v);\n }\n }\n }), $scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](child)]);\n}\n\n//# sourceURL=webpack://mui/./plugins/lib/form/utils/render.js?");
|
|
9134
9134
|
|
|
9135
9135
|
/***/ }),
|
|
9136
9136
|
|
|
@@ -9426,7 +9426,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
|
|
|
9426
9426
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
9427
9427
|
|
|
9428
9428
|
"use strict";
|
|
9429
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".FormModel {\\n display: flex;\\n flex-wrap: wrap;\\n}\\n.FormModel .ant-select,\\n.FormModel .ant-input-number,\\n.FormModel .ant-calendar-picker {\\n width: 100% !important;\\n}\\n.FormModel .FormLine {\\n display: flex;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-label) {\\n width: 85px;\\n text-align: right;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-control-wrapper) {\\n width: calc(100% - 85px);\\n}\\n.FormModel .FormLineVertical {\\n display: flex;\\n flex-direction: column;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-label) {\\n text-align: left;\\n width: 100%;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-control-wrapper) {\\n width: 100%;\\n}\\n.FormModel .MultipleForm {\\n display: flex;\\n flex-wrap: wrap;\\n
|
|
9429
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".FormModel {\\n display: flex;\\n flex-wrap: wrap;\\n}\\n.FormModel__LabelTips {\\n width: 100%;\\n}\\n.FormModel .ant-select,\\n.FormModel .ant-input-number,\\n.FormModel .ant-calendar-picker {\\n width: 100% !important;\\n}\\n.FormModel .ant-form-item-children {\\n display: flex;\\n align-items: center;\\n}\\n.FormModel .FormLine {\\n display: flex;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-label) {\\n width: 85px;\\n text-align: right;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-control-wrapper) {\\n width: calc(100% - 85px);\\n}\\n.FormModel .FormLineVertical {\\n display: flex;\\n flex-direction: column;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-label) {\\n text-align: left;\\n width: 100%;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-control-wrapper) {\\n width: 100%;\\n}\\n.FormModel .MultipleForm {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/form/style/Model.less?./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D");
|
|
9430
9430
|
|
|
9431
9431
|
/***/ }),
|
|
9432
9432
|
|
package/dist/form.umd.js
CHANGED
|
@@ -7440,7 +7440,7 @@ eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source cod
|
|
|
7440
7440
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
7441
7441
|
|
|
7442
7442
|
"use strict";
|
|
7443
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _utils_render__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/render */ \"./plugins/lib/form/utils/render.js\");\n/* harmony import */ var _style_Model_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Model.less */ \"./plugins/lib/form/style/Model.less\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'Model',\n model: {\n prop: 'value',\n event: 'Change:Model'\n },\n data() {\n return {\n formRules: {}\n };\n },\n props: {\n value: {\n type: Object,\n default: () => ({})\n },\n /* Form布局方式 */\n layout: {\n type: String,\n default: 'vertical'\n },\n /* 一行显示几个 PS:最多5个 */\n layoutSize: {\n type: Number,\n default: 4,\n validator: value => {\n return value <= 5;\n }\n },\n /* 表单项配置 */\n formSetting: Array\n },\n computed: {\n form: {\n get() {\n /** 校验单独赋值延迟的字段 */\n for (const k in this.value) {\n Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel
|
|
7443
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _utils_render__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/render */ \"./plugins/lib/form/utils/render.js\");\n/* harmony import */ var _style_Model_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Model.less */ \"./plugins/lib/form/style/Model.less\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'Model',\n model: {\n prop: 'value',\n event: 'Change:Model'\n },\n data() {\n return {\n formRules: {}\n };\n },\n props: {\n value: {\n type: Object,\n default: () => ({})\n },\n /* Form布局方式 */\n layout: {\n type: String,\n default: 'vertical'\n },\n /* 一行显示几个 PS:最多5个 */\n layoutSize: {\n type: Number,\n default: 4,\n validator: value => {\n return value <= 5;\n }\n },\n /* 表单项配置 */\n formSetting: Array\n },\n computed: {\n form: {\n get() {\n /** 校验单独赋值延迟的字段 */\n for (const k in this.value) {\n Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k);\n }\n return this.value;\n },\n set(value) {\n this.$emit('Change:Model', value);\n }\n },\n formAttrs() {\n let attr = {\n labelCol: {\n span: 4\n },\n wrapperCol: {\n span: 20\n },\n ...this.$attrs\n };\n this.layout === 'vertical' && (delete attr.labelCol, delete attr.wrapperCol);\n return attr;\n },\n filterSetting() {\n return this.formSetting.filter(settingItem => !settingItem.hidden);\n }\n },\n watch: {\n filterSetting: {\n handler(newVal, oldVal) {\n newVal.forEach(node => this.$set(this.formRules, node.model, _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItemRule.call(this, node)));\n },\n immediate: true\n }\n },\n mounted() {\n this.$emit('update:refForm', this.$refs.FormModel);\n },\n methods: {\n /** 包含单表单项，多表单项，动态增减表单项合并处理 */\n setModelRender(props) {\n const h = this.$createElement;\n const dynamicModel = this.form[props.model];\n return (\n /** \r\n * multiple为动态多项\r\n * multipleConfig为配置的动态项数据 */\n h(\"div\", {\n \"class\": props.multiple && ['MultipleForm'],\n \"attrs\": {\n ...{\n style: _utils_render__WEBPACK_IMPORTED_MODULE_1__.getFormWidth.call(this, props, this.layoutSize)\n }\n }\n }, [this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props), /** 处理动态增减表单 */\n dynamicModel instanceof Array && props.multiple ? dynamicModel.map((modelItem, index) => props.multipleConfig.map((configItem, key) => {\n /** 为动态项时重新定义绑定key、prop等来进行检验 */\n /** 目前还有一个动态项layoutSize排版问题 */\n const childAttrs = {\n key: index,\n prop: `${props.model}.${index}.${configItem.model}`,\n label: configItem.label,\n style: _utils_render__WEBPACK_IMPORTED_MODULE_1__.getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),\n rules: _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItemRule.call(this, configItem, modelItem),\n parentModel: props.model\n };\n return _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItem.call(this, h, modelItem, configItem, childAttrs);\n })) : _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItem.call(this, h, this.form, props), this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)])\n );\n },\n /** 提交测验 */\n formSubmit() {\n return this.$refs.FormModel.validate();\n }\n },\n render() {\n const h = arguments[0];\n const {\n layout,\n formAttrs,\n setModelRender\n } = this;\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default()([{\n \"ref\": \"FormModel\",\n \"class\": \"FormModel\"\n }, {\n \"props\": {\n model: this.form,\n rules: this.formRules,\n layout,\n ...formAttrs\n }\n }]), [this.$slots.default ?? this.filterSetting.map(props => setModelRender(props))]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/form/Model.js?");
|
|
7444
7444
|
|
|
7445
7445
|
/***/ }),
|
|
7446
7446
|
|
|
@@ -7462,7 +7462,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
7462
7462
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
7463
7463
|
|
|
7464
7464
|
"use strict";
|
|
7465
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getFormWidth: function() { return /* binding */ getFormWidth; },\n/* harmony export */ setFormItem: function() { return /* binding */ setFormItem; },\n/* harmony export */
|
|
7465
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getFormWidth: function() { return /* binding */ getFormWidth; },\n/* harmony export */ setFormItem: function() { return /* binding */ setFormItem; },\n/* harmony export */ setFormItemRule: function() { return /* binding */ setFormItemRule; }\n/* harmony export */ });\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _components_RenderComp_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/RenderComp.vue */ \"./plugins/lib/form/components/RenderComp.vue\");\n\n\nconst FormModelItem = ant_design_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Item;\n\n/** 根据layoutSize来进行距离及大小切分 */\nfunction getFormWidth(child, layoutSize) {\n if (this.layout === 'vertical') return `flex: 0 1 calc((${100 / layoutSize * (child.size ?? 1)}% - 24px));margin-right:24px;`;\n return `flex: 0 1 ${100 / layoutSize * (child.size ?? 1)}%;`;\n}\n\n/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */\nfunction setFormItemRule(node, nodeParent = {}) {\n const required = node.required ?? nodeParent.required ?? this.formAttrs.required ?? true;\n\n /** node.placeholder与组件内的提示文字位置不对等 */\n const message = node.attrs?.placeholder || (/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') + (node.label || '');\n const rules = [{\n required,\n message,\n trigger: ['change', 'blur']\n }].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))));\n return rules;\n}\n\n/** 动态渲染表单项 */\nfunction setFormItem(h, vModel, child, childAttrs = {}) {\n const {\n layout,\n layoutSize,\n $scopedSlots\n } = this;\n let childDefaultAttrs = {\n key: child.model,\n prop: child.model,\n label: child.label,\n colon: !(layout == 'inline')\n };\n const slotsName = (childAttrs.parentModel ?? '') + child.model;\n return h(FormModelItem, {\n \"class\": [{\n FormLineVertical: child.size === layoutSize && layout === 'vertical'\n }, {\n FormLine: child.size === layoutSize\n }],\n \"attrs\": {\n ...{\n ...childDefaultAttrs,\n ...childAttrs\n }\n }\n }, [$scopedSlots[child.model] ? $scopedSlots[child.model](child) : h(_components_RenderComp_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n \"attrs\": {\n \"component\": child.is,\n ...child.attrs\n },\n \"on\": {\n ...child.event\n },\n \"model\": {\n value: vModel[child.model],\n callback: $$v => {\n this.$set(vModel, child.model, $$v);\n }\n }\n }), $scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](child)]);\n}\n\n//# sourceURL=webpack://mui/./plugins/lib/form/utils/render.js?");
|
|
7466
7466
|
|
|
7467
7467
|
/***/ }),
|
|
7468
7468
|
|
|
@@ -7484,7 +7484,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
7484
7484
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
7485
7485
|
|
|
7486
7486
|
"use strict";
|
|
7487
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".FormModel {\\n display: flex;\\n flex-wrap: wrap;\\n}\\n.FormModel .ant-select,\\n.FormModel .ant-input-number,\\n.FormModel .ant-calendar-picker {\\n width: 100% !important;\\n}\\n.FormModel .FormLine {\\n display: flex;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-label) {\\n width: 85px;\\n text-align: right;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-control-wrapper) {\\n width: calc(100% - 85px);\\n}\\n.FormModel .FormLineVertical {\\n display: flex;\\n flex-direction: column;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-label) {\\n text-align: left;\\n width: 100%;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-control-wrapper) {\\n width: 100%;\\n}\\n.FormModel .MultipleForm {\\n display: flex;\\n flex-wrap: wrap;\\n
|
|
7487
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".FormModel {\\n display: flex;\\n flex-wrap: wrap;\\n}\\n.FormModel__LabelTips {\\n width: 100%;\\n}\\n.FormModel .ant-select,\\n.FormModel .ant-input-number,\\n.FormModel .ant-calendar-picker {\\n width: 100% !important;\\n}\\n.FormModel .ant-form-item-children {\\n display: flex;\\n align-items: center;\\n}\\n.FormModel .FormLine {\\n display: flex;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-label) {\\n width: 85px;\\n text-align: right;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-control-wrapper) {\\n width: calc(100% - 85px);\\n}\\n.FormModel .FormLineVertical {\\n display: flex;\\n flex-direction: column;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-label) {\\n text-align: left;\\n width: 100%;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-control-wrapper) {\\n width: 100%;\\n}\\n.FormModel .MultipleForm {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/form/style/Model.less?./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D");
|
|
7488
7488
|
|
|
7489
7489
|
/***/ }),
|
|
7490
7490
|
|
package/dist/index.umd.js
CHANGED
|
@@ -9108,7 +9108,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var ant_
|
|
|
9108
9108
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
9109
9109
|
|
|
9110
9110
|
"use strict";
|
|
9111
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _utils_render__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/render */ \"./plugins/lib/form/utils/render.js\");\n/* harmony import */ var _style_Model_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Model.less */ \"./plugins/lib/form/style/Model.less\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'Model',\n model: {\n prop: 'value',\n event: 'Change:Model'\n },\n data() {\n return {\n formRules: {}\n };\n },\n props: {\n value: {\n type: Object,\n default: () => ({})\n },\n /* Form布局方式 */\n layout: {\n type: String,\n default: 'vertical'\n },\n /* 一行显示几个 PS:最多5个 */\n layoutSize: {\n type: Number,\n default: 4,\n validator: value => {\n return value <= 5;\n }\n },\n /* 表单项配置 */\n formSetting: Array\n },\n computed: {\n form: {\n get() {\n /** 校验单独赋值延迟的字段 */\n for (const k in this.value) {\n Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel
|
|
9111
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _utils_render__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/render */ \"./plugins/lib/form/utils/render.js\");\n/* harmony import */ var _style_Model_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style/Model.less */ \"./plugins/lib/form/style/Model.less\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'Model',\n model: {\n prop: 'value',\n event: 'Change:Model'\n },\n data() {\n return {\n formRules: {}\n };\n },\n props: {\n value: {\n type: Object,\n default: () => ({})\n },\n /* Form布局方式 */\n layout: {\n type: String,\n default: 'vertical'\n },\n /* 一行显示几个 PS:最多5个 */\n layoutSize: {\n type: Number,\n default: 4,\n validator: value => {\n return value <= 5;\n }\n },\n /* 表单项配置 */\n formSetting: Array\n },\n computed: {\n form: {\n get() {\n /** 校验单独赋值延迟的字段 */\n for (const k in this.value) {\n Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k);\n }\n return this.value;\n },\n set(value) {\n this.$emit('Change:Model', value);\n }\n },\n formAttrs() {\n let attr = {\n labelCol: {\n span: 4\n },\n wrapperCol: {\n span: 20\n },\n ...this.$attrs\n };\n this.layout === 'vertical' && (delete attr.labelCol, delete attr.wrapperCol);\n return attr;\n },\n filterSetting() {\n return this.formSetting.filter(settingItem => !settingItem.hidden);\n }\n },\n watch: {\n filterSetting: {\n handler(newVal, oldVal) {\n newVal.forEach(node => this.$set(this.formRules, node.model, _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItemRule.call(this, node)));\n },\n immediate: true\n }\n },\n mounted() {\n this.$emit('update:refForm', this.$refs.FormModel);\n },\n methods: {\n /** 包含单表单项，多表单项，动态增减表单项合并处理 */\n setModelRender(props) {\n const h = this.$createElement;\n const dynamicModel = this.form[props.model];\n return (\n /** \r\n * multiple为动态多项\r\n * multipleConfig为配置的动态项数据 */\n h(\"div\", {\n \"class\": props.multiple && ['MultipleForm'],\n \"attrs\": {\n ...{\n style: _utils_render__WEBPACK_IMPORTED_MODULE_1__.getFormWidth.call(this, props, this.layoutSize)\n }\n }\n }, [this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props), /** 处理动态增减表单 */\n dynamicModel instanceof Array && props.multiple ? dynamicModel.map((modelItem, index) => props.multipleConfig.map((configItem, key) => {\n /** 为动态项时重新定义绑定key、prop等来进行检验 */\n /** 目前还有一个动态项layoutSize排版问题 */\n const childAttrs = {\n key: index,\n prop: `${props.model}.${index}.${configItem.model}`,\n label: configItem.label,\n style: _utils_render__WEBPACK_IMPORTED_MODULE_1__.getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),\n rules: _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItemRule.call(this, configItem, modelItem),\n parentModel: props.model\n };\n return _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItem.call(this, h, modelItem, configItem, childAttrs);\n })) : _utils_render__WEBPACK_IMPORTED_MODULE_1__.setFormItem.call(this, h, this.form, props), this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)])\n );\n },\n /** 提交测验 */\n formSubmit() {\n return this.$refs.FormModel.validate();\n }\n },\n render() {\n const h = arguments[0];\n const {\n layout,\n formAttrs,\n setModelRender\n } = this;\n return h(ant_design_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_0___default()([{\n \"ref\": \"FormModel\",\n \"class\": \"FormModel\"\n }, {\n \"props\": {\n model: this.form,\n rules: this.formRules,\n layout,\n ...formAttrs\n }\n }]), [this.$slots.default ?? this.filterSetting.map(props => setModelRender(props))]);\n }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/form/Model.js?");
|
|
9112
9112
|
|
|
9113
9113
|
/***/ }),
|
|
9114
9114
|
|
|
@@ -9130,7 +9130,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
9130
9130
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
9131
9131
|
|
|
9132
9132
|
"use strict";
|
|
9133
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getFormWidth: function() { return /* binding */ getFormWidth; },\n/* harmony export */ setFormItem: function() { return /* binding */ setFormItem; },\n/* harmony export */
|
|
9133
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ getFormWidth: function() { return /* binding */ getFormWidth; },\n/* harmony export */ setFormItem: function() { return /* binding */ setFormItem; },\n/* harmony export */ setFormItemRule: function() { return /* binding */ setFormItemRule; }\n/* harmony export */ });\n/* harmony import */ var ant_design_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ant-design-vue */ \"./node_modules/ant-design-vue/es/form-model/index.js\");\n/* harmony import */ var _components_RenderComp_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/RenderComp.vue */ \"./plugins/lib/form/components/RenderComp.vue\");\n\n\nconst FormModelItem = ant_design_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"].Item;\n\n/** 根据layoutSize来进行距离及大小切分 */\nfunction getFormWidth(child, layoutSize) {\n if (this.layout === 'vertical') return `flex: 0 1 calc((${100 / layoutSize * (child.size ?? 1)}% - 24px));margin-right:24px;`;\n return `flex: 0 1 ${100 / layoutSize * (child.size ?? 1)}%;`;\n}\n\n/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */\nfunction setFormItemRule(node, nodeParent = {}) {\n const required = node.required ?? nodeParent.required ?? this.formAttrs.required ?? true;\n\n /** node.placeholder与组件内的提示文字位置不对等 */\n const message = node.attrs?.placeholder || (/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') + (node.label || '');\n const rules = [{\n required,\n message,\n trigger: ['change', 'blur']\n }].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))));\n return rules;\n}\n\n/** 动态渲染表单项 */\nfunction setFormItem(h, vModel, child, childAttrs = {}) {\n const {\n layout,\n layoutSize,\n $scopedSlots\n } = this;\n let childDefaultAttrs = {\n key: child.model,\n prop: child.model,\n label: child.label,\n colon: !(layout == 'inline')\n };\n const slotsName = (childAttrs.parentModel ?? '') + child.model;\n return h(FormModelItem, {\n \"class\": [{\n FormLineVertical: child.size === layoutSize && layout === 'vertical'\n }, {\n FormLine: child.size === layoutSize\n }],\n \"attrs\": {\n ...{\n ...childDefaultAttrs,\n ...childAttrs\n }\n }\n }, [$scopedSlots[child.model] ? $scopedSlots[child.model](child) : h(_components_RenderComp_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {\n \"attrs\": {\n \"component\": child.is,\n ...child.attrs\n },\n \"on\": {\n ...child.event\n },\n \"model\": {\n value: vModel[child.model],\n callback: $$v => {\n this.$set(vModel, child.model, $$v);\n }\n }\n }), $scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](child)]);\n}\n\n//# sourceURL=webpack://mui/./plugins/lib/form/utils/render.js?");
|
|
9134
9134
|
|
|
9135
9135
|
/***/ }),
|
|
9136
9136
|
|
|
@@ -9426,7 +9426,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
|
|
|
9426
9426
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
9427
9427
|
|
|
9428
9428
|
"use strict";
|
|
9429
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".FormModel {\\n display: flex;\\n flex-wrap: wrap;\\n}\\n.FormModel .ant-select,\\n.FormModel .ant-input-number,\\n.FormModel .ant-calendar-picker {\\n width: 100% !important;\\n}\\n.FormModel .FormLine {\\n display: flex;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-label) {\\n width: 85px;\\n text-align: right;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-control-wrapper) {\\n width: calc(100% - 85px);\\n}\\n.FormModel .FormLineVertical {\\n display: flex;\\n flex-direction: column;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-label) {\\n text-align: left;\\n width: 100%;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-control-wrapper) {\\n width: 100%;\\n}\\n.FormModel .MultipleForm {\\n display: flex;\\n flex-wrap: wrap;\\n
|
|
9429
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".FormModel {\\n display: flex;\\n flex-wrap: wrap;\\n}\\n.FormModel__LabelTips {\\n width: 100%;\\n}\\n.FormModel .ant-select,\\n.FormModel .ant-input-number,\\n.FormModel .ant-calendar-picker {\\n width: 100% !important;\\n}\\n.FormModel .ant-form-item-children {\\n display: flex;\\n align-items: center;\\n}\\n.FormModel .FormLine {\\n display: flex;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-label) {\\n width: 85px;\\n text-align: right;\\n}\\n.FormModel .FormLine :deep(.ant-form-item-control-wrapper) {\\n width: calc(100% - 85px);\\n}\\n.FormModel .FormLineVertical {\\n display: flex;\\n flex-direction: column;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-label) {\\n text-align: left;\\n width: 100%;\\n}\\n.FormModel .FormLineVertical :deep(.ant-form-item-control-wrapper) {\\n width: 100%;\\n}\\n.FormModel .MultipleForm {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/form/style/Model.less?./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D");
|
|
9430
9430
|
|
|
9431
9431
|
/***/ }),
|
|
9432
9432
|
|
package/lib/form/Model.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FormModel } from 'ant-design-vue'
|
|
2
|
-
import { getFormWidth,
|
|
2
|
+
import { getFormWidth, setFormItemRule, setFormItem } from './utils/render'
|
|
3
3
|
|
|
4
4
|
import './style/Model.less'
|
|
5
5
|
|
|
@@ -40,12 +40,12 @@ export default {
|
|
|
40
40
|
get() {
|
|
41
41
|
/** 校验单独赋值延迟的字段 */
|
|
42
42
|
for (const k in this.value) {
|
|
43
|
-
Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel
|
|
44
|
-
}
|
|
43
|
+
Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k)
|
|
44
|
+
}
|
|
45
45
|
return this.value
|
|
46
46
|
},
|
|
47
47
|
set(value) {
|
|
48
|
-
this.$emit('Change:Model', value)
|
|
48
|
+
this.$emit('Change:Model', value)
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
formAttrs() {
|
|
@@ -67,7 +67,9 @@ export default {
|
|
|
67
67
|
watch: {
|
|
68
68
|
filterSetting: {
|
|
69
69
|
handler(newVal, oldVal) {
|
|
70
|
-
|
|
70
|
+
newVal.forEach(node =>
|
|
71
|
+
this.$set(this.formRules, node.model, setFormItemRule.call(this, node))
|
|
72
|
+
)
|
|
71
73
|
},
|
|
72
74
|
immediate: true
|
|
73
75
|
}
|
|
@@ -84,23 +86,27 @@ export default {
|
|
|
84
86
|
* multiple为动态多项
|
|
85
87
|
* multipleConfig为配置的动态项数据 */
|
|
86
88
|
<div class={props.multiple && ['MultipleForm']} {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize) } }}>
|
|
89
|
+
{/* 使用场景：添加分层提示信息及其他隔层操作 */}
|
|
90
|
+
{this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props)}
|
|
87
91
|
{
|
|
88
92
|
/** 处理动态增减表单 */
|
|
89
|
-
dynamicModel instanceof Array && props.multiple ?
|
|
93
|
+
dynamicModel instanceof Array && props.multiple ?
|
|
90
94
|
dynamicModel.map( (modelItem, index) =>
|
|
91
|
-
multipleConfig.map( (configItem, key) => {
|
|
95
|
+
props.multipleConfig.map( (configItem, key) => {
|
|
92
96
|
/** 为动态项时重新定义绑定key、prop等来进行检验 */
|
|
93
97
|
/** 目前还有一个动态项layoutSize排版问题 */
|
|
94
98
|
const childAttrs = {
|
|
95
99
|
key: index,
|
|
96
100
|
prop: `${props.model}.${index}.${configItem.model}`,
|
|
97
|
-
label:
|
|
98
|
-
style: getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize)
|
|
99
|
-
|
|
101
|
+
label: configItem.label,
|
|
102
|
+
style: getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),
|
|
103
|
+
rules: setFormItemRule.call(this, configItem, modelItem),
|
|
104
|
+
parentModel: props.model
|
|
105
|
+
}
|
|
100
106
|
return setFormItem.call(this, h, modelItem, configItem, childAttrs)
|
|
101
107
|
} )
|
|
102
108
|
) :
|
|
103
|
-
setFormItem.call(this, h, this.form, props)
|
|
109
|
+
setFormItem.call(this, h, this.form, props)
|
|
104
110
|
}
|
|
105
111
|
{/* 使用场景：如另起一行添加其他额外信息及操作 */}
|
|
106
112
|
{this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)}
|
|
@@ -3,12 +3,21 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-wrap: wrap;
|
|
5
5
|
|
|
6
|
+
&__LabelTips {
|
|
7
|
+
width: 100%;
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
.ant-select,
|
|
7
11
|
.ant-input-number,
|
|
8
12
|
.ant-calendar-picker {
|
|
9
13
|
width: 100% !important;
|
|
10
14
|
}
|
|
11
15
|
|
|
16
|
+
.ant-form-item-children {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
12
21
|
.FormLine {
|
|
13
22
|
display: flex;
|
|
14
23
|
|
|
@@ -39,16 +48,6 @@
|
|
|
39
48
|
.MultipleForm {
|
|
40
49
|
display: flex;
|
|
41
50
|
flex-wrap: wrap;
|
|
42
|
-
|
|
43
|
-
.NoWrapper {
|
|
44
|
-
width: 100%;
|
|
45
|
-
margin: unset;
|
|
46
|
-
padding: unset;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
:deep(.ant-form-item-children) {
|
|
51
|
-
display: flex;
|
|
52
51
|
align-items: center;
|
|
53
52
|
}
|
|
54
53
|
}
|
package/lib/form/utils/render.js
CHANGED
|
@@ -10,31 +10,25 @@ export function getFormWidth(child, layoutSize) {
|
|
|
10
10
|
return `flex: 0 1 ${(100 / layoutSize) * (child.size ?? 1)}%;`
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
/**
|
|
14
|
-
export function
|
|
13
|
+
/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */
|
|
14
|
+
export function setFormItemRule(node, nodeParent = {}) {
|
|
15
|
+
const required = (node.required ?? nodeParent.required ?? this.formAttrs.required) ?? true
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
/** node.placeholder与组件内的提示文字位置不对等 */
|
|
18
|
+
const message =
|
|
19
|
+
node.attrs?.placeholder ||
|
|
20
|
+
(/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') +
|
|
21
|
+
(node.label || '')
|
|
17
22
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const rules = [
|
|
27
|
-
{
|
|
28
|
-
required,
|
|
29
|
-
message,
|
|
30
|
-
trigger: ['change', 'blur']
|
|
31
|
-
}
|
|
32
|
-
].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))))
|
|
33
|
-
|
|
34
|
-
this.$set(formRules, node.model, rules)
|
|
35
|
-
|
|
36
|
-
})
|
|
23
|
+
const rules = [
|
|
24
|
+
{
|
|
25
|
+
required,
|
|
26
|
+
message,
|
|
27
|
+
trigger: ['change', 'blur']
|
|
28
|
+
}
|
|
29
|
+
].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))))
|
|
37
30
|
|
|
31
|
+
return rules
|
|
38
32
|
}
|
|
39
33
|
|
|
40
34
|
/** 动态渲染表单项 */
|
|
@@ -49,6 +43,9 @@ export function setFormItem(h, vModel, child, childAttrs = {}) {
|
|
|
49
43
|
colon: !(layout == 'inline')
|
|
50
44
|
}
|
|
51
45
|
|
|
46
|
+
const slotsName =
|
|
47
|
+
(childAttrs.parentModel ?? '') + child.model
|
|
48
|
+
|
|
52
49
|
return (
|
|
53
50
|
<FormModelItem
|
|
54
51
|
class={[
|
|
@@ -68,7 +65,7 @@ export function setFormItem(h, vModel, child, childAttrs = {}) {
|
|
|
68
65
|
/>
|
|
69
66
|
)}
|
|
70
67
|
{/* 如若再某个model后需添加按钮等场景（例如地图的选址按钮 */}
|
|
71
|
-
{$scopedSlots[`${
|
|
68
|
+
{$scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](child)}
|
|
72
69
|
</FormModelItem>
|
|
73
70
|
)
|
|
74
71
|
}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FormModel } from 'ant-design-vue'
|
|
2
|
-
import { getFormWidth,
|
|
2
|
+
import { getFormWidth, setFormItemRule, setFormItem } from './utils/render'
|
|
3
3
|
|
|
4
4
|
import './style/Model.less'
|
|
5
5
|
|
|
@@ -40,12 +40,12 @@ export default {
|
|
|
40
40
|
get() {
|
|
41
41
|
/** 校验单独赋值延迟的字段 */
|
|
42
42
|
for (const k in this.value) {
|
|
43
|
-
Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel
|
|
44
|
-
}
|
|
43
|
+
Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel?.validateField(k)
|
|
44
|
+
}
|
|
45
45
|
return this.value
|
|
46
46
|
},
|
|
47
47
|
set(value) {
|
|
48
|
-
this.$emit('Change:Model', value)
|
|
48
|
+
this.$emit('Change:Model', value)
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
formAttrs() {
|
|
@@ -67,7 +67,9 @@ export default {
|
|
|
67
67
|
watch: {
|
|
68
68
|
filterSetting: {
|
|
69
69
|
handler(newVal, oldVal) {
|
|
70
|
-
|
|
70
|
+
newVal.forEach(node =>
|
|
71
|
+
this.$set(this.formRules, node.model, setFormItemRule.call(this, node))
|
|
72
|
+
)
|
|
71
73
|
},
|
|
72
74
|
immediate: true
|
|
73
75
|
}
|
|
@@ -84,23 +86,27 @@ export default {
|
|
|
84
86
|
* multiple为动态多项
|
|
85
87
|
* multipleConfig为配置的动态项数据 */
|
|
86
88
|
<div class={props.multiple && ['MultipleForm']} {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize) } }}>
|
|
89
|
+
{/* 使用场景：添加分层提示信息及其他隔层操作 */}
|
|
90
|
+
{this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props)}
|
|
87
91
|
{
|
|
88
92
|
/** 处理动态增减表单 */
|
|
89
|
-
dynamicModel instanceof Array && props.multiple ?
|
|
93
|
+
dynamicModel instanceof Array && props.multiple ?
|
|
90
94
|
dynamicModel.map( (modelItem, index) =>
|
|
91
|
-
multipleConfig.map( (configItem, key) => {
|
|
95
|
+
props.multipleConfig.map( (configItem, key) => {
|
|
92
96
|
/** 为动态项时重新定义绑定key、prop等来进行检验 */
|
|
93
97
|
/** 目前还有一个动态项layoutSize排版问题 */
|
|
94
98
|
const childAttrs = {
|
|
95
99
|
key: index,
|
|
96
100
|
prop: `${props.model}.${index}.${configItem.model}`,
|
|
97
|
-
label:
|
|
98
|
-
style: getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize)
|
|
99
|
-
|
|
101
|
+
label: configItem.label,
|
|
102
|
+
style: getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),
|
|
103
|
+
rules: setFormItemRule.call(this, configItem, modelItem),
|
|
104
|
+
parentModel: props.model
|
|
105
|
+
}
|
|
100
106
|
return setFormItem.call(this, h, modelItem, configItem, childAttrs)
|
|
101
107
|
} )
|
|
102
108
|
) :
|
|
103
|
-
setFormItem.call(this, h, this.form, props)
|
|
109
|
+
setFormItem.call(this, h, this.form, props)
|
|
104
110
|
}
|
|
105
111
|
{/* 使用场景：如另起一行添加其他额外信息及操作 */}
|
|
106
112
|
{this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)}
|
|
@@ -3,12 +3,21 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-wrap: wrap;
|
|
5
5
|
|
|
6
|
+
&__LabelTips {
|
|
7
|
+
width: 100%;
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
.ant-select,
|
|
7
11
|
.ant-input-number,
|
|
8
12
|
.ant-calendar-picker {
|
|
9
13
|
width: 100% !important;
|
|
10
14
|
}
|
|
11
15
|
|
|
16
|
+
.ant-form-item-children {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
12
21
|
.FormLine {
|
|
13
22
|
display: flex;
|
|
14
23
|
|
|
@@ -39,16 +48,6 @@
|
|
|
39
48
|
.MultipleForm {
|
|
40
49
|
display: flex;
|
|
41
50
|
flex-wrap: wrap;
|
|
42
|
-
|
|
43
|
-
.NoWrapper {
|
|
44
|
-
width: 100%;
|
|
45
|
-
margin: unset;
|
|
46
|
-
padding: unset;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
:deep(.ant-form-item-children) {
|
|
51
|
-
display: flex;
|
|
52
51
|
align-items: center;
|
|
53
52
|
}
|
|
54
53
|
}
|
|
@@ -10,31 +10,25 @@ export function getFormWidth(child, layoutSize) {
|
|
|
10
10
|
return `flex: 0 1 ${(100 / layoutSize) * (child.size ?? 1)}%;`
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
/**
|
|
14
|
-
export function
|
|
13
|
+
/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */
|
|
14
|
+
export function setFormItemRule(node, nodeParent = {}) {
|
|
15
|
+
const required = (node.required ?? nodeParent.required ?? this.formAttrs.required) ?? true
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
/** node.placeholder与组件内的提示文字位置不对等 */
|
|
18
|
+
const message =
|
|
19
|
+
node.attrs?.placeholder ||
|
|
20
|
+
(/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') +
|
|
21
|
+
(node.label || '')
|
|
17
22
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const rules = [
|
|
27
|
-
{
|
|
28
|
-
required,
|
|
29
|
-
message,
|
|
30
|
-
trigger: ['change', 'blur']
|
|
31
|
-
}
|
|
32
|
-
].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))))
|
|
33
|
-
|
|
34
|
-
this.$set(formRules, node.model, rules)
|
|
35
|
-
|
|
36
|
-
})
|
|
23
|
+
const rules = [
|
|
24
|
+
{
|
|
25
|
+
required,
|
|
26
|
+
message,
|
|
27
|
+
trigger: ['change', 'blur']
|
|
28
|
+
}
|
|
29
|
+
].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))))
|
|
37
30
|
|
|
31
|
+
return rules
|
|
38
32
|
}
|
|
39
33
|
|
|
40
34
|
/** 动态渲染表单项 */
|
|
@@ -49,6 +43,9 @@ export function setFormItem(h, vModel, child, childAttrs = {}) {
|
|
|
49
43
|
colon: !(layout == 'inline')
|
|
50
44
|
}
|
|
51
45
|
|
|
46
|
+
const slotsName =
|
|
47
|
+
(childAttrs.parentModel ?? '') + child.model
|
|
48
|
+
|
|
52
49
|
return (
|
|
53
50
|
<FormModelItem
|
|
54
51
|
class={[
|
|
@@ -68,7 +65,7 @@ export function setFormItem(h, vModel, child, childAttrs = {}) {
|
|
|
68
65
|
/>
|
|
69
66
|
)}
|
|
70
67
|
{/* 如若再某个model后需添加按钮等场景（例如地图的选址按钮 */}
|
|
71
|
-
{$scopedSlots[`${
|
|
68
|
+
{$scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](child)}
|
|
72
69
|
</FormModelItem>
|
|
73
70
|
)
|
|
74
71
|
}
|