vue-next-form/dist/vue-next-form.umd.js

A configurable form component based on Vue 3 and Element Plus

(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.VueNextForm={},b.Vue,b.ElementPlus))})(this,function(b,e,p){"use strict";const _=e.defineComponent({__name:"InputText",props:e.mergeModels({type:{},placeholder:{default:"请输入"},clearable:{type:Boolean},disabled:{type:Boolean},size:{},itemLabel:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean}},{modelValue:{type:String,default:""},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=e.useModel(d,"modelValue"),l=d;return(n,t)=>(e.openBlock(),e.createBlock(e.unref(p.ElInput),{class:"j-input-text",modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=r=>s.value=r),type:"text",placeholder:l.placeholder,clearable:l.clearable,disabled:l.disabled,size:l.size},null,8,["modelValue","placeholder","clearable","disabled","size"]))}}),w=e.defineComponent({name:"InputNumber",__name:"InputNumber",props:e.mergeModels({type:{},max:{default:1/0},maxRel:{},min:{default:-1/0},step:{default:1},precision:{default:0},itemLabel:{},placeholder:{},size:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean},disabled:{type:Boolean}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=e.useModel(d,"modelValue"),l=d;return(n,t)=>(e.openBlock(),e.createBlock(e.unref(p.ElInputNumber),{class:"j-input-number-box",modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=r=>s.value=r),min:l.min,max:l.max,step:l.step,precision:l.precision},null,8,["modelValue","min","max","step","precision"]))}}),C={class:"select-single-container"},M=e.defineComponent({name:"SelectSingle",__name:"SelectSingle",props:e.mergeModels({type:{},placeholder:{default:"请选择"},url:{default:""},urlParams:{},options:{},extraOptions:{},extraPoistion:{default:"bottom"},disabledOptions:{default:()=>[]},getDate:{},showTextValue:{type:Boolean},footerFunctionName:{default:""},itemLabel:{},size:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean},disabled:{type:Boolean}},{modelValue:{type:[String,Number],default:""},modelModifiers:{}}),emits:e.mergeModels(["change","clickFooter"],["update:modelValue"]),setup(d,{expose:s,emit:l}){const n=e.useModel(d,"modelValue"),t=d,r=e.ref([]);t.getDate!==void 0?r.value=t.getDate():t.options?r.value=t.options:r.value=[];const m=()=>{t.extraOptions&&t.extraOptions.length&&(t.extraPoistion==="bottom"&&r.value.push(...t.extraOptions),t.extraPoistion==="top"&&r.value.unshift(...t.extraOptions))};m();const g=a=>{a&&t.getDate!==void 0&&(r.value=t.getDate(),m())},k=e.computed(()=>{if(t.showTextValue)return f(n.value)}),c=l,B=()=>{c("clickFooter",t.footerFunctionName)},f=a=>{const i=r.value.find(o=>o.value===a);return i?i.label:""},V=a=>{const i=f(a);c("change",a,i)};return s({addNewOption:a=>{r.value.push(a)}}),(a,i)=>(e.openBlock(),e.createElementBlock("div",C,[e.withDirectives(e.createVNode(e.unref(p.ElText),null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(k.value),1)]),_:1},512),[[e.vShow,t.showTextValue]]),e.withDirectives(e.createVNode(e.unref(p.ElSelect),e.mergeProps({class:"w-full",modelValue:n.value,"onUpdate:modelValue":i[0]||(i[0]=o=>n.value=o)},a.$attrs,t,{onChange:V,onVisibleChange:g}),e.createSlots({default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,o=>(e.openBlock(),e.createBlock(e.unref(p.ElOption),{key:o.value,label:o.label,value:o.value,disabled:t.disabledOptions.includes(o.value)},null,8,["label","value","disabled"]))),128))]),_:2},[t.footerFunctionName!==""?{name:"footer",fn:e.withCtx(()=>[e.createVNode(e.unref(p.ElButton),{class:"w-full",size:"small",onClick:B},{default:e.withCtx(()=>i[1]||(i[1]=[e.createTextVNode(" 新增 ")])),_:1})]),key:"0"}:void 0]),1040,["modelValue"]),[[e.vShow,!t.showTextValue]])]))}}),F={class:"w-full text-left"},T=((d,s)=>{const l=d.__vccOpts||d;for(const[n,t]of s)l[n]=t;return l})(e.defineComponent({name:"AhSelectSingleGroup",__name:"SelectSingleGroup",props:e.mergeModels({type:{},url:{default:""},urlParams:{},options:{},extraOptions:{},extraPoistion:{default:"bottom"},showTextValue:{type:Boolean},disabledOptions:{default:()=>[]},clearable:{},filterable:{type:Boolean},change:{},getData:{},itemLabel:{},placeholder:{default:"请选择"},size:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean},disabled:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(d,{emit:s}){const l=s,n=e.useModel(d,"modelValue"),t=d,r=e.ref([]);t.getData!==void 0?r.value=t.getData():t.options?r.value=t.options:r.value=[];const m=()=>{t.extraOptions&&t.extraOptions.length&&(t.extraPoistion==="bottom"&&r.value.push(...t.extraOptions),t.extraPoistion==="top"&&r.value.unshift(...t.extraOptions))};m();const g=f=>{f&&t.getData!==void 0&&(r.value=t.getData(),m())},k=e.computed(()=>{if(t.showTextValue){const f=r.value.find(V=>V.value===n.value);return f?f.label:""}}),c=f=>{for(let V=0;V<r.value.length;V++){const h=r.value[V].options;for(let a=0;a<h.length;a++)if(h[a].value===f)return h[a].label}},B=f=>{const V=c(f);l("change",f,V)};return(f,V)=>{const h=e.resolveComponent("el-text"),a=e.resolveComponent("el-option"),i=e.resolveComponent("el-option-group"),o=e.resolveComponent("el-select");return e.openBlock(),e.createElementBlock("div",F,[e.withDirectives(e.createVNode(h,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(k.value),1)]),_:1},512),[[e.vShow,t.showTextValue]]),e.withDirectives(e.createVNode(o,e.mergeProps({class:"w-full",modelValue:n.value,"onUpdate:modelValue":V[0]||(V[0]=y=>n.value=y)},f.$attrs,t,{onChange:B,onVisibleChange:g}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,y=>(e.openBlock(),e.createBlock(i,{key:y.label,label:y.label},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.options,u=>(e.openBlock(),e.createBlock(a,{key:u.value,label:u.label,value:u.value,disabled:t.disabledOptions.includes(u.value)},null,8,["label","value","disabled"]))),128))]),_:2},1032,["label"]))),128))]),_:1},16,["modelValue"]),[[e.vShow,!t.showTextValue]])])}}}),[["__scopeId","data-v-0ebf3bbc"]]),N=e.defineComponent({name:"AhDatePicker",__name:"DatePicker",props:e.mergeModels({type:{},clearable:{type:Boolean},disabled:{type:Boolean},format:{default:"YYYY-MM-DD"},valueFormat:{default:"YYYY-MM-DD"},itemLabel:{},placeholder:{},size:{},model:{},defaultValue:{},rule:{type:Function},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue"],["update:modelValue"]),setup(d,{emit:s}){const l=e.useModel(d,"modelValue");return(n,t)=>(e.openBlock(),e.createBlock(e.unref(p.ElDatePicker),{style:{width:"100%"},modelValue:l.value,"onUpdate:modelValue":t[0]||(t[0]=r=>l.value=r),placeholder:n.placeholder,format:n.format,"value-format":n.valueFormat,disabled:n.disabled},null,8,["modelValue","placeholder","format","value-format","disabled"]))}}),D=e.defineComponent({name:"DatePickerRange",__name:"DatePickerRange",props:e.mergeModels({type:{},clearable:{type:Boolean},disabled:{type:Boolean},format:{default:"YYYY-MM-DD"},valueFormat:{default:"YYYY-MM-DD"},startPlaceholder:{default:"请选择开始日期"},endPlaceholder:{default:"请选择结束日期"},itemLabel:{},placeholder:{},size:{},model:{},defaultValue:{},rule:{type:Function},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue"],["update:modelValue"]),setup(d,{emit:s}){const l=e.useModel(d,"modelValue");return(n,t)=>(e.openBlock(),e.createBlock(e.unref(p.ElDatePicker),{style:{width:"100%"},modelValue:l.value,"onUpdate:modelValue":t[0]||(t[0]=r=>l.value=r),"start-placeholder":n.startPlaceholder,"end-placeholder":n.endPlaceholder,format:n.format,"value-format":n.valueFormat,disabled:n.disabled,type:"daterange"},null,8,["modelValue","start-placeholder","end-placeholder","format","value-format","disabled"]))}}),E=e.defineComponent({name:"Text",__name:"Text",props:e.mergeModels({type:{},formatter:{},fontSize:{},color:{default:"#606266"},itemLabel:{},placeholder:{},size:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean},disabled:{type:Boolean}},{modelValue:{type:String,default:""},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=e.useModel(d,"modelValue"),l=d;return(n,t)=>l.formatter?(e.openBlock(),e.createBlock(e.unref(p.ElText),{key:0,innerHTML:l.formatter(s.value),style:e.normalizeStyle({fontSize:`${l.fontSize}px`,color:l.color})},null,8,["innerHTML","style"])):n.$slots.default?(e.openBlock(),e.createBlock(e.unref(p.ElText),{key:1,style:e.normalizeStyle({fontSize:`${l.fontSize}px`,color:l.color})},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["style"])):(e.openBlock(),e.createBlock(e.unref(p.ElText),{key:2,style:e.normalizeStyle({fontSize:`${l.fontSize}px`,color:l.color})},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.value),1)]),_:1},8,["style"]))}}),S={style:{width:"100%"}},U=e.defineComponent({name:"RadioGroup",__name:"RadioGroup",props:e.mergeModels({type:{},options:{},showTextValue:{type:Boolean,default:!1},getData:{},itemLabel:{},placeholder:{},size:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean},disabled:{type:Boolean}},{modelValue:{type:[String,Boolean,Number],required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=e.useModel(d,"modelValue"),l=d,n=e.ref([]);l.getData!==void 0?n.value=l.getData():l.options&&l.options.length?n.value=l.options:n.value=[];const t=e.computed(()=>{var r;if(l.showTextValue){const m=(r=n.value)==null?void 0:r.find(g=>g.value===s.value);return m?m.label:""}});return(r,m)=>(e.openBlock(),e.createElementBlock("div",S,[e.withDirectives(e.createVNode(e.unref(p.ElText),null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.value),1)]),_:1},512),[[e.vShow,l.showTextValue]]),e.withDirectives(e.createVNode(e.unref(p.ElRadioGroup),{modelValue:s.value,"onUpdate:modelValue":m[0]||(m[0]=g=>s.value=g),disabled:l.disabled},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(g,k)=>(e.openBlock(),e.createBlock(e.unref(p.ElRadio),{key:k,label:g.label,value:g.value},null,8,["label","value"]))),128))]),_:1},8,["modelValue","disabled"]),[[e.vShow,!l.showTextValue]])]))}}),z=e.defineComponent({name:"Checkbox",__name:"Checkbox",props:e.mergeModels({type:{},label:{},trueValue:{},falseValue:{},itemLabel:{},placeholder:{},size:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean},disabled:{type:Boolean}},{modelValue:{type:[String,Number,Boolean]},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=e.useModel(d,"modelValue"),l=d;return(n,t)=>(e.openBlock(),e.createBlock(e.unref(p.ElCheckbox),{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=r=>s.value=r),label:l.label,"true-value":l.trueValue,"false-value":l.falseValue,size:l.size},null,8,["modelValue","label","true-value","false-value","size"]))}}),P=e.defineComponent({name:"CheckboxGroup",__name:"checkbox-group",props:e.mergeModels({type:{},getData:{},options:{},itemLabel:{},placeholder:{},size:{},model:{},defaultValue:{},rule:{},ruleTrigger:{},reset:{type:Boolean},validate:{type:Boolean},disabled:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=d,l=e.useModel(d,"modelValue"),n=e.ref(s.getData?s.getData():s.options||[]);return(t,r)=>(e.openBlock(),e.createBlock(e.unref(p.ElCheckboxGroup),{modelValue:l.value,"onUpdate:modelValue":r[0]||(r[0]=m=>l.value=m)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,m=>(e.openBlock(),e.createBlock(e.unref(p.ElCheckbox),{key:m.value,value:m.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m.label),1)]),_:2},1032,["value"]))),128))]),_:1},8,["modelValue"]))}}),x=e.defineComponent({name:"VueNextForm",__name:"index",props:e.mergeModels({labelPosition:{default:"left"},inline:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},formField:{default:()=>[]}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(d,{expose:s}){const l=e.useModel(d,"modelValue"),n=e.ref({}),t=e.ref([]),r=e.ref([]),m=e.ref([]),g=()=>{let a=[];d.formField.forEach(i=>{if((i.type==="select-single"||i.type==="select-single-group")&&i.urlParams!==void 0&&Object.keys(i.urlParams).forEach(o=>{if(typeof i.urlParams[o]=="string"&&i.urlParams[o].startsWith("form:")){const y=i.urlParams[o].split(":")[1];i.urlParams[o]=e.toRef(l.value,y)}}),i.type==="input-number"&&i.maxRel!==void 0&&i.maxRel!==""&&i.maxRel.startsWith("form:")){const o=i.maxRel.split(":")[1];e.watchEffect(()=>{i.min!==void 0&&l.value[o]<i.min?i.max=i.min:i.max=l.value[o]})}a.push(i)}),m.value=a,console.log("handleUrlParams _newFormField",m.value)};(()=>{d.formField.forEach(a=>{l.value[a.model]=a.defaultValue,a.rule&&(a.ruleTrigger?n.value[a.model]=[{required:!0,validator:a.rule,trigger:a.ruleTrigger}]:n.value[a.model]=[{required:!0,validator:a.rule,trigger:"blur"}]),(a.reset===void 0||a.reset===!0)&&r.value.push(a.model),(a.validate===void 0||a.validate!==!1)&&t.value.push(a.model),console.log("generateFormValue",a)}),console.log("_formValue",l.value),console.log("_formRules",n.value),g()})();const c=e.useTemplateRef("elFormRef");return s({validate:()=>{c.value&&c.value.validate()},validateField:()=>{c.value&&(c.value.clearValidate(),c.value.validateField(t.value))},reset:()=>{c.value&&c.value.resetFields()},resetFields:()=>{c.value&&c.value.resetFields(r.value)}}),(a,i)=>(e.openBlock(),e.createBlock(e.unref(p.ElForm),{ref_key:"elFormRef",ref:c,class:"v-form-box",model:l.value,rules:n.value,"label-position":a.labelPosition,inline:a.inline,disabled:a.disabled},{default:e.withCtx(()=>[e.createVNode(e.unref(p.ElRow),{gutter:20},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,(o,y)=>(e.openBlock(),e.createBlock(e.unref(p.ElCol),{key:o.model+y,xs:24,sm:12,md:6,lg:4,xl:3},{default:e.withCtx(()=>[e.createVNode(e.unref(p.ElFormItem),{label:o.itemLabel,style:{width:"100%"},prop:o.model},{default:e.withCtx(()=>[o.type==="input-text"?(e.openBlock(),e.createBlock(e.unref(_),e.mergeProps({key:0,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="input-number"?(e.openBlock(),e.createBlock(e.unref(w),e.mergeProps({key:1,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="select-single"?(e.openBlock(),e.createBlock(e.unref(M),e.mergeProps({key:2,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="select-single-group"?(e.openBlock(),e.createBlock(e.unref(T),e.mergeProps({key:3,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="date-picker"?(e.openBlock(),e.createBlock(e.unref(N),e.mergeProps({key:4,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="date-picker-range"?(e.openBlock(),e.createBlock(e.unref(D),e.mergeProps({key:5,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="text"?(e.openBlock(),e.createBlock(e.unref(E),e.mergeProps({key:6,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="radio-group"?(e.openBlock(),e.createBlock(e.unref(U),e.mergeProps({key:7,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="checkbox"?(e.openBlock(),e.createBlock(e.unref(z),e.mergeProps({key:8,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),o.type==="checkbox-group"?(e.openBlock(),e.createBlock(e.unref(P),e.mergeProps({key:9,modelValue:l.value[o.model],"onUpdate:modelValue":u=>l.value[o.model]=u,ref_for:!0},o),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop"])]),_:2},1024))),128))]),_:1})]),_:1},8,["model","rules","label-position","inline","disabled"]))}}),O=[x],L={install:d=>{O.forEach(s=>{d.component(s.name,s)}),window.ElementPlus?d.use(window.ElementPlus):console.warn("[VueNextForm] 检测到未安装 ElementPlus，你需要自行安装：npm install element-plus")}};b.VueNextForm=x,b.default=L,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});