vxe-pc-ui/lib/form/src/form.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_util=require("./util"),_tooltip=_interopRequireDefault(require("../../tooltip/src/tooltip")),_formConfigItem=_interopRequireDefault(require("./form-config-item")),_loading=_interopRequireDefault(require("../../loading/src/loading")),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}require("../render");class Rule{constructor(e){Object.assign(this,{$options:e,required:e.required,min:e.min,max:e.min,type:e.type,pattern:e.pattern,validator:e.validator,trigger:e.trigger,maxWidth:e.maxWidth})}get content(){return(0,_utils.getFuncText)(this.$options.content||this.$options.message)}get message(){return this.content}}function validREValue(e,t){return!(e&&!(_xeUtils.default.isRegExp(e)?e:new RegExp(e)).test(t))}function validMaxValue(e,t){return!(!_xeUtils.default.eqNull(e)&&t>_xeUtils.default.toNumber(e))}function validMinValue(e,t){return!(!_xeUtils.default.eqNull(e)&&t<_xeUtils.default.toNumber(e))}function validRuleValue(e,t,i){var{type:e,min:l,max:r,pattern:a}=e,u="array"===e,o="number"===e,e="string"===e,n=""+t;if(!validREValue(a,n))return!1;if(u){if(!_xeUtils.default.isArray(t))return!1;if(i&&!t.length)return!1;if(!validMinValue(l,t.length))return!1;if(!validMaxValue(r,t.length))return!1}else if(o){a=Number(t);if(isNaN(a))return!1;if(!validMinValue(l,a))return!1;if(!validMaxValue(r,a))return!1}else{if(e&&!_xeUtils.default.isString(t))return!1;if(i&&!n)return!1;if(!validMinValue(l,n.length))return!1;if(!validMaxValue(r,n.length))return!1}return!0}function checkRuleStatus(e,t){var i=e["required"],l=_xeUtils.default.isArray(t)?!t.length:(0,_utils.eqEmptyValue)(t);if(i){if(l)return!1;if(!validRuleValue(e,t,i))return!1}else if(!l&&!validRuleValue(e,t,i))return!1;return!0}function createInternalData(){return{meTimeout:void 0,stTimeout:void 0,tooltipStore:{item:null,visible:!1},itemFormatCache:{}}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeForm",props:{collapseStatus:{type:Boolean,default:!0},loading:Boolean,data:Object,size:{type:String,default:()=>(0,_ui.getConfig)().form.size||(0,_ui.getConfig)().size},span:{type:[String,Number],default:()=>(0,_ui.getConfig)().form.span},align:{type:String,default:()=>(0,_ui.getConfig)().form.align},verticalAlign:{type:String,default:()=>(0,_ui.getConfig)().form.verticalAlign},border:{type:Boolean,default:()=>(0,_ui.getConfig)().form.border},titleBackground:{type:Boolean,default:()=>(0,_ui.getConfig)().form.titleBackground},titleBold:{type:Boolean,default:()=>(0,_ui.getConfig)().form.titleBold},titleAlign:{type:String,default:()=>(0,_ui.getConfig)().form.titleAlign},titleWidth:{type:[String,Number],default:()=>(0,_ui.getConfig)().form.titleWidth},titleColon:{type:Boolean,default:()=>(0,_ui.getConfig)().form.titleColon},titleAsterisk:{type:Boolean,default:()=>(0,_ui.getConfig)().form.titleAsterisk},titleOverflow:{type:[Boolean,String],default:()=>(0,_ui.getConfig)().form.titleOverflow},vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().form.vertical},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().form.padding},className:[String,Function],readonly:Boolean,disabled:Boolean,items:Array,rules:Object,preventSubmit:{type:Boolean,default:()=>(0,_ui.getConfig)().form.preventSubmit},validConfig:Object,tooltipConfig:Object,collapseConfig:Object,customLayout:{type:Boolean,default:()=>(0,_ui.getConfig)().form.customLayout},params:Object},emits:["update:collapseStatus","collapse","toggle-collapse","submit","submit-invalid","reset"],setup(s,e){const{slots:d,emit:l}=e,o=(0,_vue.inject)("$xeGrid",null);var t=_xeUtils.default.uniqueId();const c=(0,_ui.useSize)(s)["computeSize"],f=(0,_vue.reactive)({collapseAll:s.collapseStatus,staticItems:[],formItems:[],itemWidth:0}),m=createInternalData(),v=(0,_vue.ref)(),g=(0,_vue.ref)();let i={};const p=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().form.validConfig,s.validConfig)),_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tooltip,(0,_ui.getConfig)().form.tooltipConfig,s.tooltipConfig));var r=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().form.collapseConfig,s.collapseConfig));const a=(0,_vue.computed)(()=>{const{titleWidth:l,vertical:r}=s;var e=f["formItems"];const a=[];return _xeUtils.default.eachTree(e,e=>{var{titleWidth:t,vertical:i}=e;"auto"!==t&&("auto"!==((_xeUtils.default.eqNull(i)?r:i)?null:_xeUtils.default.eqNull(t)?l:t)||e.children&&e.children.length)||a.push(e)},{children:"children"}),a}),u={refElem:v},n={computeSize:c,computeValidOpts:p,computeTooltipOpts:_,computeCollapseOpts:r,computeAutoItemWidthList:a},h={xID:t,props:s,context:e,reactData:f,internalData:m,xeGrid:o,getRefMaps:()=>u,getComputeMaps:()=>n};const x=e=>(e.length&&e.forEach(e=>{e.slots&&_xeUtils.default.each(e.slots,e=>{_xeUtils.default.isFunction(e)||d[e]||(0,_log.errLog)("vxe.error.notSlot",[e])})}),f.staticItems=_xeUtils.default.mapTree(e,e=>(0,_util.createItem)(h,e),{children:"children"}),m.itemFormatCache={},(0,_vue.nextTick)().then(()=>F())),y=()=>{const t=[];return _xeUtils.default.eachTree(f.formItems,e=>{t.push(e)},{children:"children"}),t},b=t=>{var e=_xeUtils.default.findTree(f.formItems,e=>e.field===t,{children:"children"});return e?e.item:null},C=()=>f.collapseAll,U=()=>{var e=!C();return f.collapseAll=e,l("update:collapseStatus",e),(0,_vue.nextTick)()};const E=t=>{if(t){let e=t;(e=_xeUtils.default.isArray(t)?e:[t]).forEach(e=>{e&&(e=(0,_util.handleFieldOrItem)(h,e))&&(e.showError=!1)})}else y().forEach(e=>{e.showError=!1});return(0,_vue.nextTick)()},S=(e,t,i)=>{var{field:l,resetValue:r}=e;return _xeUtils.default.isFunction(r)?r({field:l,item:e,data:t,$form:h,$grid:o}):_xeUtils.default.eqNull(r)&&_xeUtils.default.isArray(i)?[]:r},T=()=>{const u=s["data"];var e=y();return u&&e.forEach(e=>{var t,i,l,{field:r,itemRender:a}=e;(0,_utils.isEnableConf)(a)&&({name:a,startField:t,endField:i}=a,l=(a=_ui.renderer.get(a))?a.formItemResetMethod||a.itemResetMethod:null,a&&l?l({data:u,field:r,property:r,item:e,$form:h,$grid:o}):r&&(a=_xeUtils.default.get(u,r),_xeUtils.default.set(u,r,S(e,u,a))),t)&&i&&(_xeUtils.default.set(u,t,S(e,u,_xeUtils.default.get(u,t))),_xeUtils.default.set(u,i,S(e,u,_xeUtils.default.get(u,i))))}),m.itemFormatCache={},E(),F()},I=e=>{e.preventDefault(),T(),i.dispatchEvent("reset",{data:s.data},e)},q=e=>{var i=v.value;if(i)for(let t=0;t<e.length;t++){var l=e[t],r=b(l);if(r&&(0,_utils.isEnableConf)(r.itemRender)){var a=r["itemRender"],u=_ui.renderer.get(a.name);t||(0,_dom.scrollToView)(i.querySelector("."+r.id));let e=null;a=a.autoFocus||a.autofocus||(u?u.formItemAutoFocus:null);if(_xeUtils.default.isFunction(a)?e=a({$form:h,$grid:o,item:r,data:s.data,field:l}):!0===a?e=i.querySelector(`.${r.id} input,textarea`):a&&(e=i.querySelector(`.${r.id} `+a)),e){e.focus();break}}}},R=(e,t,i)=>{const{data:c,rules:l}=s,r={};return _xeUtils.default.isArray(t)||(t=[t]),Promise.all(t.map(u=>{const o=[],n=[];if(u&&l){const s=_xeUtils.default.get(l,u);if(s){const d=_xeUtils.default.isUndefined(i)?_xeUtils.default.get(c,u):i;s.forEach(t=>{const{trigger:i,validator:l}=t;if("all"===e||!i||e===i)if(l){var r,a={itemValue:d,rule:t,rules:s,data:c,field:u,property:u,$form:h};let e;_xeUtils.default.isString(l)?(r=_ui.validators.get(l))?(r=r.formItemValidatorMethod||r.itemValidatorMethod)?e=r(a):(0,_log.warnLog)("vxe.error.notValidators",[l]):(0,_log.errLog)("vxe.error.notValidators",[l]):e=l(a),e&&(_xeUtils.default.isError(e)?o.push(new Rule({type:"custom",trigger:i,content:e.message,rule:new Rule(t)})):e.catch&&n.push(e.catch(e=>{o.push(new Rule({type:"custom",trigger:i,content:e?e.message:t.content||t.message,rule:new Rule(t)}))})))}else checkRuleStatus(t,d)||o.push(new Rule(t))})}}return Promise.all(n).then(()=>{o.length&&(r[u]=o.map(e=>({$form:h,rule:e,data:c,field:u,property:u})))})})).then(()=>{if(!_xeUtils.default.isEmpty(r))return Promise.reject(r)})},w=(t,e,i)=>{var{data:l,rules:r}=s;const a=p.value,u={},o=[],n=[];return clearTimeout(m.meTimeout),l&&r?(t.forEach(t=>{const i=t["field"];i&&!(0,_util.isHiddenItem)(h,t)&&(0,_util.isActiveItem)(h,t)&&n.push(R(e||"all",i).then(()=>{t.errRule=null}).catch(e=>{e=e[i];return u[i]||(u[i]=[]),u[i].push(e),o.push(i),t.errRule=e[0].rule,Promise.reject(e)}))}),Promise.all(n).then(()=>{i&&i()}).catch(()=>new Promise(e=>{m.meTimeout=setTimeout(()=>{t.forEach(e=>{e.errRule&&(e.showError=!0)})},20),!1!==a.autoPos&&(0,_vue.nextTick)(()=>{q(o)}),i?(i(u),e()):e(u)}))):(i&&i(),Promise.resolve())};const k=t=>{var e=s["readonly"];t.preventDefault(),s.preventSubmit||(E(),e?(i.dispatchEvent("submit",{data:s.data},t),F()):w(y()).then(e=>{e?i.dispatchEvent("submit-invalid",{data:s.data,errMap:e},t):i.dispatchEvent("submit",{data:s.data},t),F()}))},V=()=>{var e=m["tooltipStore"],t=g.value;return e.visible&&(Object.assign(e,{item:null,visible:!1}),t)&&t.close(),(0,_vue.nextTick)()};const A=(e,i,t)=>i?R(e?["blur"].includes(e.type)?"blur":"change":"all",i,t).then(()=>{E(i)}).catch(e=>{var e=e[i],t=b(i);e&&t&&(t.showError=!0,t.errRule=e[0].rule)}):(0,_vue.nextTick)();const F=()=>{var e=a.value,i=v.value;if(i&&e.length){i=i.querySelectorAll(e.map(e=>`.vxe-form--item-title[itemid="${e.id}"]`).join(","));let t=0;_xeUtils.default.arrayEach(i,e=>{e.style.width="",t=Math.max(t,Math.ceil(e.clientWidth+2))}),_xeUtils.default.arrayEach(i,e=>{e.style.width=t+"px"})}return(0,_vue.nextTick)()},M=()=>{F()};i={dispatchEvent(e,t,i){l(e,(0,_ui.createEvent)(i,{$form:h,$grid:o},t))},reset:T,validate:e=>{var t=s["readonly"];return E(),t?(0,_vue.nextTick)():w(y(),"",e).then(e=>(F(),e))},validateField:(e,t)=>{var i=s["readonly"];if(i)return(0,_vue.nextTick)();let l=[];return e&&(l=_xeUtils.default.isArray(e)?e:[e]),w(l.map(e=>(0,_util.handleFieldOrItem)(h,e)),"",t).then(e=>(F(),e))},clearValidate:E,updateStatus:(e,t)=>{e=e.field;return A(new Event("change"),e,t)},toggleCollapse:U,getItems:y,getItemByField:b,closeTooltip:V,recalculate:F};r={callSlot:(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=d[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],triggerItemEvent:A,toggleCollapseEvent:e=>{U();var t=C();i.dispatchEvent("toggle-collapse",{status:t,collapse:t,data:s.data},e),i.dispatchEvent("collapse",{status:t,collapse:t,data:s.data},e),(0,_vue.nextTick)(()=>{F(),o&&o.recalculate()})},triggerTitleTipEvent:(e,t)=>{var t=t["item"],i=m["tooltipStore"],l=g.value,e=e.currentTarget.children[0],r=(e.textContent||"").trim(),a=e.scrollWidth>e.clientWidth;clearTimeout(m.stTimeout),i.item!==t&&V(),r&&a&&(Object.assign(i,{item:t,visible:!0}),l)&&l.open(e,r)},handleTitleTipLeaveEvent:()=>{var e=_.value;let t=g.value;t&&t.setActived(!1),e.enterable?m.stTimeout=setTimeout(()=>{(t=g.value)&&!t.isActived()&&V()},e.leaveDelay):V()}};Object.assign(h,i,r);const O=(0,_vue.ref)(0),$=((0,_vue.watch)(()=>f.staticItems.length,()=>{O.value++}),(0,_vue.watch)(()=>f.staticItems,()=>{O.value++}),(0,_vue.watch)(O,()=>{f.formItems=f.staticItems,(0,_vue.nextTick)().then(()=>{F()})}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>s.items?s.items.length:-1,()=>{$.value++}),(0,_vue.watch)(()=>s.items,()=>{$.value++}),(0,_vue.watch)($,()=>{x(s.items||[])}),(0,_vue.watch)(()=>s.collapseStatus,e=>{f.collapseAll=!!e}),(0,_vue.watch)(()=>s.readonly,()=>{E()}),(0,_vue.watch)(()=>s.disabled,()=>{E()}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{s.customLayout&&s.items&&(0,_log.errLog)("vxe.error.errConflicts",["custom-layout","items"])}),_ui.globalEvents.on(h,"resize",M)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(h,"resize"),_xeUtils.default.assign(m,createInternalData())}),s.items&&x(s.items),(0,_vue.provide)("xeFormItemInfo",null),(0,_vue.provide)("$xeForm",h),(0,_vue.provide)("$xeFormGroup",null),(0,_vue.provide)("$xeFormItem",null),h.renderVN=()=>{var{loading:e,border:t,className:i,data:l,customLayout:r}=s,a=f["formItems"],u=c.value,o=_.value,n=d.default;return(0,_vue.h)("form",{ref:v,class:["vxe-form",i?_xeUtils.default.isFunction(i)?i({items:a,data:l,$form:h}):i:"",{["size--"+u]:u,"is--border":t,"custom--layout":r,"is--loading":e}],onSubmit:k,onReset:I},[(0,_vue.h)("div",{class:"vxe-form--wrapper vxe-form--item-row"},r?n?n({}):[]:a.map((e,t)=>(0,_vue.h)(_formConfigItem.default,{key:t,itemConfig:e}))),(0,_vue.h)("div",{class:"vxe-form-slots",ref:"hideItem"},!r&&n?n({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-form--loading",modelValue:e}),(0,_vue.h)(_tooltip.default,Object.assign({ref:g},o))])},h},render(){return this.renderVN()}});