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

A vue based PC component library

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")),_formConfigItem=_interopRequireDefault(require("./form-config-item")),_loading=_interopRequireDefault(require("../../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,l){var{type:e,min:i,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(l&&!t.length)return!1;if(!validMinValue(i,t.length))return!1;if(!validMaxValue(r,t.length))return!1}else if(o){a=Number(t);if(isNaN(a))return!1;if(!validMinValue(i,a))return!1;if(!validMaxValue(r,a))return!1}else{if(e&&!_xeUtils.default.isString(t))return!1;if(l&&!n)return!1;if(!validMinValue(i,n.length))return!1;if(!validMaxValue(r,n.length))return!1}return!0}function checkRuleStatus(e,t,l){var{required:i,field:r}=e,t=r?_xeUtils.default.get(t,r):l,r=_xeUtils.default.isArray(t)?!t.length:(0,_utils.eqEmptyValue)(t);if(i){if(r)return!1;if(!validRuleValue(e,t,i))return!1}else if(!r&&!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){let{slots:d,emit:i}=e,o=(0,_vue.inject)("$xeGrid",null);var t=_xeUtils.default.uniqueId();let f=(0,_ui.useSize)(s).computeSize,c=(0,_vue.reactive)({collapseAll:s.collapseStatus,staticItems:[],formItems:[],itemWidth:0}),m=createInternalData(),v=(0,_vue.ref)(),g=(0,_vue.ref)(),r={},_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().form.validConfig,s.validConfig)),p=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tooltip,(0,_ui.getConfig)().form.tooltipConfig,s.tooltipConfig));var l=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().form.collapseConfig,s.collapseConfig));let a=(0,_vue.computed)(()=>{let{titleWidth:i,vertical:r}=s;var e=c.formItems;let a=[];return _xeUtils.default.eachTree(e,e=>{var{titleWidth:t,vertical:l}=e;"auto"!==t&&("auto"!==((_xeUtils.default.eqNull(l)?r:l)?null:_xeUtils.default.eqNull(t)?i:t)||e.children&&e.children.length)||a.push(e)},{children:"children"}),a}),u={refElem:v},n={computeSize:f,computeValidOpts:_,computeTooltipOpts:p,computeCollapseOpts:l,computeAutoItemWidthList:a},h={xID:t,props:s,context:e,reactData:c,internalData:m,xeGrid:o,getRefMaps:()=>u,getComputeMaps:()=>n};let 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",["[form] "+e])})}),c.staticItems=_xeUtils.default.mapTree(e,e=>(0,_util.createItem)(h,e),{children:"children"}),m.itemFormatCache={},(0,_vue.nextTick)().then(()=>M())),y=()=>{let t=[];return _xeUtils.default.eachTree(c.formItems,e=>{t.push(e)},{children:"children"}),t},b=t=>{var e=_xeUtils.default.findTree(c.formItems,e=>e.field===t,{children:"children"});return e?e.item:null},C=()=>c.collapseAll,U=()=>{var e=!C();return c.collapseAll=e,i("update:collapseStatus",e),(0,_vue.nextTick)()};let 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,e.showIconMsg=!1)})}else y().forEach(e=>{e.showError=!1,e.showIconMsg=!1});return(0,_vue.nextTick)()},I=(e,t,l)=>{var{field:i,resetValue:r}=e;return _xeUtils.default.isFunction(r)?r({field:i,item:e,data:t,$form:h,$grid:o}):_xeUtils.default.eqNull(r)&&_xeUtils.default.isArray(l)?[]:r},S=()=>{let u=s.data;var e=y();return u&&e.forEach(e=>{var t,l,i,{field:r,itemRender:a}=e;(0,_utils.isEnableConf)(a)&&({name:a,startField:t,endField:l}=a,i=(a=_ui.renderer.get(a))?a.formItemResetMethod||a.itemResetMethod:null,a&&i?i({data:u,field:r,property:r,item:e,$form:h,$grid:o}):r&&(a=_xeUtils.default.get(u,r),_xeUtils.default.set(u,r,I(e,u,a))),t)&&l&&(_xeUtils.default.set(u,t,I(e,u,_xeUtils.default.get(u,t))),_xeUtils.default.set(u,l,I(e,u,_xeUtils.default.get(u,l))))}),m.itemFormatCache={},E(),M()},$=e=>{e.preventDefault(),S(),r.dispatchEvent("reset",{data:s.data},e)},j=e=>{var l=v.value;if(l)for(let t=0;t<e.length;t++){var i=e[t],r=b(i);if(r&&(0,_utils.isEnableConf)(r.itemRender)){var a=r.itemRender,u=_ui.renderer.get(a.name);t||(0,_dom.scrollToView)(l.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:i}):!0===a?e=l.querySelector(`.${r.id} input,textarea`):a&&(e=l.querySelector(`.${r.id} `+a)),e){e.focus();break}}}},w=(e,t,l)=>{let{data:f,rules:i}=s,r={};return _xeUtils.default.isArray(t)||(t=[t]),Promise.all(t.map(n=>{let s=[],d=[];if(n&&i){let o=_xeUtils.default.get(i,n);if(o){let u=_xeUtils.default.isUndefined(l)?_xeUtils.default.get(f,n):l;o.forEach(t=>{let{trigger:l,validator:i}=t;if("all"===e||!l||e===l)if(i){var r,a={itemValue:u,rule:t,rules:o,data:f,field:n,property:n,$form:h};let e;_xeUtils.default.isString(i)?(r=_ui.validators.get(i))?(r=r.formItemValidatorMethod||r.itemValidatorMethod)?e=r(a):(0,_log.warnLog)("vxe.error.notValidators",["[form] "+i]):(0,_log.errLog)("vxe.error.notValidators",["[form] "+i]):e=i(a),e&&(_xeUtils.default.isError(e)?s.push(new Rule({type:"custom",trigger:l,content:e.message,rule:new Rule(t)})):e.catch&&d.push(e.catch(e=>{s.push(new Rule({type:"custom",trigger:l,content:e?e.message:t.content||t.message,rule:new Rule(t)}))})))}else checkRuleStatus(t,f,u)||s.push(new Rule(t))})}}return Promise.all(d).then(()=>{s.length&&(r[n]=s.map(e=>({$form:h,rule:e,data:f,field:n,property:n})))})})).then(()=>{if(!_xeUtils.default.isEmpty(r))return Promise.reject(r)})},T=(t,e,l)=>{var{data:i,rules:r}=s;let a=_.value,u={},o=[],n=[];return clearTimeout(m.meTimeout),i&&r?(t.forEach(t=>{let l=t.field;l&&!(0,_util.isHiddenItem)(h,t)&&(0,_util.isActiveItem)(h,t)&&n.push(w(e||"all",l).then(()=>{t.errRule=null}).catch(e=>{e=e[l];return u[l]||(u[l]=[]),u[l].push(e),o.push(l),t.errRule=e[0].rule,Promise.reject(e)}))}),Promise.all(n).then(()=>{l&&l()}).catch(()=>new Promise(e=>{m.meTimeout=setTimeout(()=>{t.forEach(e=>{e.errRule&&(e.showError=!0)})},20),!1!==a.autoPos&&(0,_vue.nextTick)(()=>{j(o)}),l?(l(u),e()):e(u)}))):(l&&l(),Promise.resolve())};let q=t=>{var e=s.readonly;E(),e?(h.dispatchEvent("submit",{data:s.data},t),M()):T(y()).then(e=>{e?h.dispatchEvent("submit-invalid",{data:s.data,errMap:e},t):h.dispatchEvent("submit",{data:s.data},t),M()})},k=e=>{e.preventDefault(),s.preventSubmit||q(e)},R=()=>{var e=m.tooltipStore,t=g.value;return e.visible&&(Object.assign(e,{item:null,visible:!1}),t)&&t.close(),(0,_vue.nextTick)()};let V=(e,l,t)=>l?w(e?["blur"].includes(e.type)?"blur":"change":"all",l,t).then(()=>{E(l)}).catch(e=>{var e=e[l],t=b(l);e&&t&&(t.showError=!0,t.errRule=e[0].rule)}):(0,_vue.nextTick)();let M=()=>{var e=a.value,l=v.value;if(l&&e.length){l=l.querySelectorAll(e.map(e=>`.vxe-form--item-title[itemid="${e.id}"]`).join(","));let t=0;_xeUtils.default.arrayEach(l,e=>{e.style.width="",t=Math.max(t,Math.ceil(e.clientWidth+2))}),_xeUtils.default.arrayEach(l,e=>{e.style.width=t+"px"})}return(0,_vue.nextTick)()},B=()=>{M()};r={dispatchEvent(e,t,l){i(e,(0,_ui.createEvent)(l,{$form:h,$grid:o},t))},reset:S,validate:e=>{var t=s.readonly;return E(),t?(0,_vue.nextTick)():T(y(),"",e).then(e=>(M(),e))},validateField:(e,t)=>{var l=s.readonly;if(l)return(0,_vue.nextTick)();let i=[];l=(i=e?_xeUtils.default.isArray(e)?e:[e]:i).map(e=>(0,_util.handleFieldOrItem)(h,e));return T(l,"",t).then(e=>(M(),e))},clearValidate:E,updateStatus:(e,t)=>{e=e.field;return V(new Event("change"),e,t)},toggleCollapse:U,getItems:y,getItemByField:b,closeTooltip:R,recalculate:M};l={callSlot:(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=d[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],triggerItemEvent:V,toggleCollapseEvent:e=>{var t=U(),l=C();r.dispatchEvent("toggle-collapse",{status:l,collapse:l,data:s.data},e),r.dispatchEvent("collapse",{status:l,collapse:l,data:s.data},e),t.then(()=>{M().then(()=>{o&&o.recalculate(!0)}),o&&o.recalculate()})},triggerTitleTipEvent:(e,t)=>{var t=t.item,l=m.tooltipStore,i=g.value,e=e.currentTarget.children[0],r=(e.textContent||"").trim(),a=e.scrollWidth>e.clientWidth;clearTimeout(m.stTimeout),l.item!==t&&R(),r&&a&&(Object.assign(l,{item:t,visible:!0}),i)&&i.open(e,r)},handleTitleTipLeaveEvent:()=>{var e=p.value;let t=g.value;t&&t.setActived(!1),e.enterable?m.stTimeout=setTimeout(()=>{(t=g.value)&&!t.isActived()&&R()},e.leaveDelay):R()},handleValidIconEvent(e,t){t=t.item;t.showIconMsg=!t.showIconMsg},handleSubmitEvent:q};Object.assign(h,r,l);let A=(0,_vue.ref)(0),F=((0,_vue.watch)(()=>s.vertical,()=>{A.value++}),(0,_vue.watch)(()=>s.titleWidth,()=>{A.value++}),(0,_vue.watch)(A,()=>{(0,_vue.nextTick)().then(()=>{M()})}),(0,_vue.ref)(0)),O=((0,_vue.watch)(()=>c.staticItems.length,()=>{F.value++}),(0,_vue.watch)(()=>c.staticItems,()=>{F.value++}),(0,_vue.watch)(F,()=>{c.formItems=c.staticItems,A.value++}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>s.items?s.items.length:-1,()=>{O.value++}),(0,_vue.watch)(()=>s.items,()=>{O.value++}),(0,_vue.watch)(O,()=>{x(s.items||[])}),(0,_vue.watch)(()=>s.collapseStatus,e=>{c.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",["[form] custom-layout","items"])}),_ui.globalEvents.on(h,"resize",B)}),(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:l,data:i,customLayout:r}=s,a=c.formItems,u=f.value,o=p.value,n=d.default;return(0,_vue.h)("form",{ref:v,class:["vxe-form",l?_xeUtils.default.isFunction(l)?l({items:a,data:i,$form:h}):l:"",{["size--"+u]:u,"is--border":t,"custom--layout":r,"is--loading":e}],onSubmit:k,onReset:$},[(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()}});