dynamicformdjx 0.4.0 → 0.4.1

package/README.md

@@ -1,23 +1,34 @@
 # dynamicformdjx
 
-基于 **Vue 3** 的动态表单。
+基于 **Vue 3** 的动态表单及录入。
 
 [文档](https://xczcdjx.github.io/dynamicFormDoc/)
+> 1.当前为0.41版本，已完成所有配合element plus 或naive ui表单的适配
+
+> 2.其中简单表单，自定义表单，装饰表单均可使用
+
+> 3.文档还在完善中，可参考源码中的components组件查看具体使用
 
 [Vue2 版本](https://www.npmjs.com/package/dynamicformdjx-vue2) 
 
 [React 版本](https://www.npmjs.com/package/dynamicformdjx-react) 
 
-### 组件版本说明
-- **v0.2 及以上版本**
-- Form字段改为Input, ElementPlus缩短为Ele, NaiveUi缩短为Nai
-- 请使用：`DynamicInput`, `DynamicCascadeInput`，`EleDynamicInput`,`NaiDynamicInput` 等导入
+[//]: # (### 组件版本说明)
+
+[//]: # (- **v0.2 及以上版本**)
+
+[//]: # (- Form字段改为Input, ElementPlus缩短为Ele, NaiveUi缩短为Nai)
+
+[//]: # (- 请使用：`DynamicInput`, `DynamicCascadeInput`，`EleDynamicInput`,`NaiDynamicInput` 等导入)
+
+
+[//]: # (| 版本范围 | 组件导入方式 |)
+
+[//]: # (|---------|--------------|)
 
+[//]: # (| ≥ 0.2   | DynamicInput, DynamicCascadeInput |)
 
-| 版本范围 | 组件导入方式 |
-|---------|--------------|
-| ≥ 0.2   | DynamicInput, DynamicCascadeInput |
-| < 0.2   | DynamicForm, DynamicCascadeForm |
+[//]: # (| < 0.2   | DynamicForm, DynamicCascadeForm |)
 
 ## 概述
 

package/dist/elementPlus/hooks/decorateForm.d.ts

@@ -0,0 +1,4 @@
+import { DecorateDyFormItem, Renderers } from '../../types';
+import { DyFormItem } from '../../types/form';
+export declare function createUseDecorateForm(renderers: Renderers<any, any>): <Row extends Record<string, any>, RuleT = any>(items: DecorateDyFormItem<Row, RuleT>[], isReactive?: boolean) => DyFormItem<Row, RuleT>[];
+export declare const useDecorateForm: <Row extends Record<string, any>, RuleT = any>(items: DecorateDyFormItem<Row, RuleT>[], isReactive?: boolean) => DyFormItem<Row, RuleT>[];

package/dist/elementPlus/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),N=require("../index-CA3F2Lxo.cjs"),o=require("element-plus"),I=l.defineComponent({name:"EleDynamicInput",props:{size:{type:String},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:e=>`${Date.now()}_${e??0}`},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},modelValue:{type:Object,required:!0}},emits:{"update:modelValue":e=>!0,onReset:()=>!0,onMerge:(e,s)=>!0},setup(e,{emit:s,expose:d}){const i={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...e.btnConfigs},y={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...e.configs},u={arraySplitSymbol:",",...e.dyListConfigs},v=e.size,f=l.ref(N.tranArr(e.modelValue,e.randomFun,u.arraySplitSymbol)),p=l.ref(null);return l.watch(f,r=>{if(!e.isController)return;const c=N.resetObj(r,u.arraySplitSymbol);s("update:modelValue",c),s("onMerge",c,l.toRaw(f.value))},{deep:!0}),d({onSet:r=>{f.value=N.tranArr(r??e.modelValue,e.randomFun,u.arraySplitSymbol)},getResult:(r="res")=>r==="ori"?l.toRaw(f.value):N.resetObj(f.value,u.arraySplitSymbol)}),()=>l.createVNode("div",{class:e.dyCls??`dynamicForm ${v}`,style:{maxHeight:y.maxHeight}},[l.createVNode("div",{class:`dyFormList ${f.value.length?"":"noList"}`,ref:p},[f.value.map((r,c,a)=>l.createVNode("div",{class:"dItem",key:r.rId},[l.createVNode("div",{class:"input"},[l.createVNode(o.ElInput,{size:v,modelValue:r.key,class:"key",onInput:t=>{r.key=t}},null),l.createTextVNode(":"),l.createVNode(o.ElInput,{size:v,modelValue:r.value,class:"value",onInput:t=>{y.allowFilter&&r.isNumber?r.value=N.formatNumberInput(t,r.isArray,u.arraySplitSymbol):r.value=t}},{prefix:()=>l.createVNode(l.Fragment,null,[l.createVNode(o.ElButton,{class:"typeBtn",type:r.isArray?"success":"default",size:"small",onClick:()=>{r.isArray=!r.isArray}},{default:()=>[l.createTextVNode("Array")]}),l.createTextVNode(" "),l.createVNode(o.ElButton,{class:"typeBtn",type:r.isNumber?"success":"default",size:"small",onClick:()=>{r.isNumber=!r.isNumber}},{default:()=>[l.createTextVNode("Number")]})])})]),l.createVNode("div",{class:"btn"},[l.createVNode(o.ElButton,{type:"success",size:v,disabled:c!==a.length-1,onClick:()=>{f.value.push({rId:e.randomFun(),key:"",value:""}),y.autoScroll&&l.nextTick(()=>{const t=p.value;t?.scrollTo({top:t.scrollHeight,behavior:"smooth"})})}},{default:()=>[l.createTextVNode("+")]}),l.createVNode(o.ElButton,{size:v,type:"danger",onClick:()=>{f.value=f.value.filter(t=>t.rId!==r.rId)}},{default:()=>[l.createTextVNode("-")]})])]))]),l.createVNode("div",{class:`control ${f.value.length?"":"noList"}`},[!f.value.length&&l.createVNode(o.ElButton,{size:v,type:"success",onClick:()=>{f.value.push({rId:e.randomFun(),key:"",value:""})}},{default:()=>[i.newTxt]}),!e.isController&&l.createVNode(l.Fragment,null,[!y.hideReset&&l.createVNode(o.ElButton,{size:v,type:"default",onClick:()=>{f.value=N.tranArr(e.modelValue,e.randomFun,u.arraySplitSymbol),s("onReset")}},{default:()=>[i.resetTxt]}),l.createVNode(o.ElButton,{size:v,type:"info",onClick:()=>{f.value.sort((c,a)=>+c.rId-+a.rId);const r=N.resetObj(f.value,u.arraySplitSymbol);s("update:modelValue",r),s("onMerge",r,l.toRaw(f.value)),f.value=N.tranArr(r,e.randomFun,u.arraySplitSymbol)}},{default:()=>[i.mergeTxt]})])])])}});function A(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const x=l.defineComponent({name:"EleDynamicCascadeInput",props:{modelValue:{type:Object,required:!0},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:e=>`${Date.now()}_${e??0}`},depth:{type:Number,default:3},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},newChildTxt:{type:Function,default:e=>`添加 '${e.key}' 子项`}},emits:{"update:modelValue":e=>!0,onReset:()=>!0,onMerge:(e,s)=>!0},setup(e,{emit:s,expose:d}){const i={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...e.btnConfigs},y={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...e.configs},u={arraySplitSymbol:",",...e.dyListConfigs},v=a=>["string","number"].includes(a),f=a=>Object.keys(a).map((t,m)=>{let n=a[t];const b=Array.isArray(n),C=b?n.every(h=>typeof h=="number"):typeof n=="number",k=n===null;return v(typeof n)&&(n=a[t]),k&&(n=""),{rId:e.randomFun(m),key:t,value:Object.prototype.toString.call(n)==="[object Object]"?f(a[t]):b?n.join(u.arraySplitSymbol):n,isArray:b||void 0,isNumber:C||void 0}}),p=a=>a.reduce((t,m)=>{const n=m.value;return m.key.trim().length&&(t[m.key]=Array.isArray(n)?p(n):N.parseValue(m.value,m.isArray,m.isNumber,u.arraySplitSymbol)),t},{}),r=l.ref(f(e.modelValue)),c=(a,t=1,m)=>l.createVNode("div",{class:[`depth-${t}`,y.showBorder?"":"no-border",y.showPad?"":"no-pad"],style:{"--depth":t,["--c"+[t]]:N.saferRepairColor(y.borderColors,t)}},[a.map((n,b,C)=>{const k=Array.isArray(n.value),h=v(typeof n.value);return l.createVNode("div",{class:"dItem",key:n.rId,style:{marginLeft:t>1?`${t*y.retractLen}px`:"0"}},[l.createVNode("div",{class:"input"},[!k&&l.createVNode(l.Fragment,null,[l.createVNode(o.ElInput,{modelValue:n.key,class:"key",onInput:V=>n.key=V},null),l.createTextVNode(":")]),l.createVNode(o.ElInput,{class:`value ${k?"isKey":""}`,modelValue:h?n.value:n.key,onInput:V=>{if(k){n.key=V;return}y.allowFilter&&n.isNumber?n.value=N.formatNumberInput(V,n.isArray,u.arraySplitSymbol):n.value=V}},{prefix:Array.isArray(n.value)?void 0:()=>l.createVNode(l.Fragment,null,[l.createVNode(o.ElButton,{type:n.isArray?"success":"default",size:"small",onClick:()=>{n.isArray=!n.isArray}},{default:()=>[l.createTextVNode("Array")]}),l.createTextVNode(" "),l.createVNode(o.ElButton,{type:n.isNumber?"success":"default",size:"small",onClick:()=>{n.isNumber=!n.isNumber}},{default:()=>[l.createTextVNode("Number")]})]),suffix:()=>{let V;return t<e.depth?!k&&l.createVNode(o.ElButton,{type:"success",size:"small",onClick:()=>{h&&(n.value=[],n.isArray=void 0),n.value.push({rId:e.randomFun(),key:"",value:""})}},A(V=e.newChildTxt(n))?V:{default:()=>[V]}):null}})]),l.createVNode("div",{class:"btn"},[l.createVNode(o.ElButton,{type:"success",disabled:b!==C.length-1,onClick:()=>{a.push({rId:e.randomFun(),key:"",value:""})}},{default:()=>[l.createTextVNode("+")]}),l.createVNode(o.ElButton,{type:"danger",onClick:()=>{if(a.splice(b,1),a.length<1){if(m===void 0)return p([]);const V=r.value.findIndex(F=>F.rId===m?.rId);t<1?r.value.splice(V,1,{...m,value:""}):m.value=""}}},{default:()=>[l.createTextVNode("-")]})]),Array.isArray(n.value)&&c(n.value,t+1,n)])})]);return l.watch(r,a=>{if(!e.isController)return;const t=p(a);s("update:modelValue",t),s("onMerge",t,l.toRaw(r.value))},{deep:!0}),d({onSet:a=>{r.value=f(a??e.modelValue)},getResult:(a="res")=>a==="ori"?l.toRaw(r.value):p(r.value)}),()=>l.createVNode("div",{class:e.dyCls??"dynamicCascadeForm"},[l.createVNode("div",{class:"dyFormList",style:{maxHeight:y.maxHeight}},[c(r.value)]),l.createVNode("div",{class:"control"},[!r.value.length&&l.createVNode(o.ElButton,{type:"success",onClick:()=>{r.value.push({rId:e.randomFun(),key:"",value:""})}},{default:()=>[i.newTxt]}),!e.isController&&l.createVNode(l.Fragment,null,[!y.hideReset&&l.createVNode(o.ElButton,{type:"default",onClick:()=>{r.value=f(e.modelValue),s("onReset")}},{default:()=>[i.resetTxt]}),l.createVNode(o.ElButton,{type:"info",onClick:()=>{const a=p(r.value);s("update:modelValue",a),s("onMerge",a,l.toRaw(r.value)),r.value=f(a)}},{default:()=>[i.mergeTxt]})])])])}}),T=l.defineComponent({name:"EleDynamicForm",props:{formConfig:{type:Object,default:()=>({labelPosition:"left",size:"default"})},rowConfig:{type:Object,default:()=>({gutter:10,justify:"start",align:"top"})},rules:{type:Object},preset:{type:String,default:"fullRow",validator:e=>["fullRow","grid"].includes(e)?!0:(console.error("preset value must be `fullRow` or `grid`, the default value is `fullRow`"),!1)},items:{type:Array,require:!0}},slots:Object,setup(e,{expose:s,slots:d}){const i=l.ref(null),y=l.computed(()=>(e.items??[]).filter(c=>!c.hidden)),u=l.computed(()=>y.value?y.value.reduce((c,a)=>(c[a.key]=a.value.value,c),{}):{}),v=l.computed(()=>({...y.value?.reduce((a,t)=>{let m=t.rule;return t.required&&!t.rule&&(m={required:!0,message:t.requiredHint?.(t.label)??`${t.label}不能为空`,trigger:"blur"}),a[t.key]=m,a},{}),...e.rules})),f=l.computed(()=>[...y.value].sort((a,t)=>{const m=a.sort??1/0,n=t.sort??1/0;return Number(m)-Number(n)}));function p(c=null){y.value&&y.value.forEach(a=>{a.value.value=c})}function r(){return new Promise((c,a)=>{i.value?.validate((t,m)=>{t?c(u.value):a(m)})})}if(s({reset:p,validator:r,getResult:(c="res")=>c==="ori"?y.value:u.value}),!e.items)throw new Error("prop items must be not null");return()=>l.createVNode("div",{class:"naiDynamicForm"},[d.header&&l.createVNode("div",{class:"header"},[d.header?.()]),l.createVNode(o.ElForm,l.mergeProps({ref:i},e.formConfig,{model:u.value,rules:v.value}),{default(){const c=f.value;return e.preset==="grid"?l.h(o.ElRow,{...e.rowConfig},{default:()=>c?.map(a=>l.h(o.ElCol,{span:a.span??24,offset:a.offset??0},{default:()=>l.h(o.ElFormItem,{label:a.label,prop:a.path||a.key},{default:R(a)})}))}):c?.map(a=>l.h(o.ElFormItem,{label:a.label,prop:a.path||a.key},{default:R(a)}))}}),d.footer&&l.h("div",{class:"footer"},d.footer?.())])}});function R(e){return function(){return e.render2?e.render2(e):null}}function g(e,s,d){return e?.[s]??d}function w(e){return!!e&&(e.type==="group"||Array.isArray(e.children)||Array.isArray(e.options))}function S(e){return(e??[]).map(s=>{if(w(s)){const d=s.children??s.options??[];return{...s,__isGroup:!0,__children:d}}return{...s,__isGroup:!1}})}function O(e,s,d="label",i="value"){const y=S(s);for(const u of y)if(u.__isGroup){for(const v of u.__children)if(g(v,i,v.value)===e)return g(v,d,v.label)}else if(g(u,i,u.value)===e)return g(u,d,u.label);return""}function B(e,s={},d){const{onChange:i,value:y,...u}=d;return l.h(o.ElInput,{...u,modelValue:e.value,"onUpdate:modelValue":v=>{e.value=v,d?.onChange?.(v,d)},...s})}function _(e,s,d={},i){const{onChange:y,labelField:u,valueField:v,options:f,...p}=i??{},r=u??"label",c=v??"value",a=S(f??s);return l.h(o.ElSelect,{...p,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,i?.onChange?.(t,i,a)},...d},{default:()=>a.map((t,m)=>{if(t.__isGroup)return l.h(o.ElOptionGroup,{key:t.key??`g-${m}`,label:g(t,r,t.label)},{default:()=>(t.__children??[]).map((C,k)=>{const h=g(C,r,C.label),V=g(C,c,C.value);return l.h(o.ElOption,{key:C.key??`${m}-${k}`,label:h,value:V,disabled:C.disabled})})});const n=g(t,r,t.label),b=g(t,c,t.value);return l.h(o.ElOption,{key:t.key??`${m}`,label:n,value:b,disabled:t.disabled})})})}function j(e,s,d={},i,y){const{labelField:u,valueField:v,options:f,onChange:p,...r}=i??{},c=u??"label",a=v??"value",t=f??s,m=S(t),n=()=>{if(y)return y;const b=Array.isArray(e.value)?e.value.length?`已选 ${e.value.length} 项`:"请选择":e.value!=null?O(e.value,t,c,a)||String(e.value):"请选择";return l.h(o.ElButton,null,{default:()=>b})};return Array.isArray(e.value)?l.createVNode(o.ElPopover,{trigger:"click",...r,...d},{reference:()=>n(),default:()=>l.h(o.ElCheckboxGroup,{modelValue:e.value,"onUpdate:modelValue":b=>{e.value=b,i?.onChange?.(b,i,m)}},{default:()=>l.h(o.ElSpace,{wrap:!0},{default:()=>m.flatMap((b,C)=>(b.__isGroup?b.__children??[]:[b]).map((h,V)=>{const F=g(h,c,h.label),E=g(h,a,h.value);return l.h(o.ElCheckbox,{key:h.key??`${C}-${V}`,label:E,disabled:h.disabled},{default:()=>F})}))})})}):l.createVNode(o.ElDropdown,{trigger:"click",...r,onCommand:b=>{e.value=b,i?.onChange?.(b,i,m)},...d},{default:()=>n(),dropdown:()=>l.h(o.ElDropdownMenu,null,{default:()=>m.flatMap((b,C)=>(b.__isGroup?b.__children??[]:[b]).map((h,V)=>{const F=g(h,c,h.label),E=g(h,a,h.value);return l.h(o.ElDropdownItem,{key:h.key??`${C}-${V}`,command:E,disabled:h.disabled},{default:()=>F})}))})})}function $(e,s,d={},i){const{valueField:y="value",labelField:u="label",childrenField:v="children",onChange:f,options:p,...r}=i??{},c=p??s;return l.h(o.ElTreeSelect,{...r,data:c,modelValue:e.value,"onUpdate:modelValue":a=>{e.value=a,i?.onChange?.(a,i,c)},props:{value:y,label:u,children:v,disabled:"disabled"},...d})}function D(e,s,d={},i){const{onChange:y,labelField:u,valueField:v,options:f,...p}=i??{},r=u??"label",c=v??"value",a=f??s;return l.h(o.ElRadioGroup,{...p,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,i?.onChange?.(t,i,a)},...d},{default:()=>(a??[]).map((t,m)=>{const n=g(t,r,t.label),b=g(t,c,t.value);return l.h(o.ElRadio,{key:t.key??m,label:b,disabled:t.disabled},()=>n)})})}function G(e,s,d={},i){const{onChange:y,labelField:u,valueField:v,options:f,...p}=i??{},r=u??"label",c=v??"value",a=f??s;return l.h(o.ElRadioGroup,{...p,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,i?.onChange?.(t,i,a)},...d},{default:()=>(a??[]).map((t,m)=>{const n=g(t,r,t.label),b=g(t,c,t.value);return l.h(o.ElRadioButton,{key:t.key??m,label:b,disabled:t.disabled},()=>n)})})}function z(e,s,d={},i){const{onChange:y,labelField:u,valueField:v,options:f,...p}=i??{},r=u??"label",c=v??"value",a=f??s;return l.h(o.ElCheckboxGroup,{...p,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,i?.onChange?.(t,i,a)},...d},{default:()=>l.h(o.ElSpace,{wrap:!0},{default:()=>(a??[]).map((t,m)=>{const n=g(t,r,t.label),b=g(t,c,t.value);return l.h(o.ElCheckbox,{key:t.key??m,label:b,disabled:t.disabled},()=>n)})})})}function P(e,s={},d){const{onChange:i,...y}=d??{};return l.h(o.ElSwitch,{...y,modelValue:e.value,"onUpdate:modelValue":u=>{e.value=u,d?.onChange?.(u,d)},...s})}function M(e,s={},d){const{onChange:i,...y}=d??{};return l.h(o.ElDatePicker,{...y,modelValue:e.value,"onUpdate:modelValue":u=>{e.value=u,d?.onChange?.(u,d)},...s})}function L(e,s={},d){const{onChange:i,...y}=d??{};return l.h(o.ElTimePicker,{...y,modelValue:e.value,"onUpdate:modelValue":u=>{e.value=u,d?.onChange?.(u,d)},...s})}exports.EleDynamicCascadeInput=x;exports.EleDynamicForm=T;exports.EleDynamicInput=I;exports.renderCheckboxGroup=z;exports.renderDatePicker=M;exports.renderInput=B;exports.renderPopSelect=j;exports.renderRadioButtonGroup=G;exports.renderRadioGroup=D;exports.renderSelect=_;exports.renderSwitch=P;exports.renderTimePicker=L;exports.renderTreeSelect=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),k=require("../index-CA3F2Lxo.cjs"),d=require("element-plus"),D=l.defineComponent({name:"EleDynamicInput",props:{size:{type:String},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:e=>`${Date.now()}_${e??0}`},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},modelValue:{type:Object,required:!0}},emits:{"update:modelValue":e=>!0,onReset:()=>!0,onMerge:(e,c)=>!0},setup(e,{emit:c,expose:i}){const y={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...e.btnConfigs},u={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...e.configs},s={arraySplitSymbol:",",...e.dyListConfigs},p=e.size,r=l.ref(k.tranArr(e.modelValue,e.randomFun,s.arraySplitSymbol)),v=l.ref(null);return l.watch(r,a=>{if(!e.isController)return;const m=k.resetObj(a,s.arraySplitSymbol);c("update:modelValue",m),c("onMerge",m,l.toRaw(r.value))},{deep:!0}),i({onSet:a=>{r.value=k.tranArr(a??e.modelValue,e.randomFun,s.arraySplitSymbol)},getResult:(a="res")=>a==="ori"?l.toRaw(r.value):k.resetObj(r.value,s.arraySplitSymbol)}),()=>l.createVNode("div",{class:e.dyCls??`dynamicForm ${p}`,style:{maxHeight:u.maxHeight}},[l.createVNode("div",{class:`dyFormList ${r.value.length?"":"noList"}`,ref:v},[r.value.map((a,m,n)=>l.createVNode("div",{class:"dItem",key:a.rId},[l.createVNode("div",{class:"input"},[l.createVNode(d.ElInput,{size:p,modelValue:a.key,class:"key",onInput:t=>{a.key=t}},null),l.createTextVNode(":"),l.createVNode(d.ElInput,{size:p,modelValue:a.value,class:"value",onInput:t=>{u.allowFilter&&a.isNumber?a.value=k.formatNumberInput(t,a.isArray,s.arraySplitSymbol):a.value=t}},{prefix:()=>l.createVNode(l.Fragment,null,[l.createVNode(d.ElButton,{class:"typeBtn",type:a.isArray?"success":"default",size:"small",onClick:()=>{a.isArray=!a.isArray}},{default:()=>[l.createTextVNode("Array")]}),l.createTextVNode(" "),l.createVNode(d.ElButton,{class:"typeBtn",type:a.isNumber?"success":"default",size:"small",onClick:()=>{a.isNumber=!a.isNumber}},{default:()=>[l.createTextVNode("Number")]})])})]),l.createVNode("div",{class:"btn"},[l.createVNode(d.ElButton,{type:"success",size:p,disabled:m!==n.length-1,onClick:()=>{r.value.push({rId:e.randomFun(),key:"",value:""}),u.autoScroll&&l.nextTick(()=>{const t=v.value;t?.scrollTo({top:t.scrollHeight,behavior:"smooth"})})}},{default:()=>[l.createTextVNode("+")]}),l.createVNode(d.ElButton,{size:p,type:"danger",onClick:()=>{r.value=r.value.filter(t=>t.rId!==a.rId)}},{default:()=>[l.createTextVNode("-")]})])]))]),l.createVNode("div",{class:`control ${r.value.length?"":"noList"}`},[!r.value.length&&l.createVNode(d.ElButton,{size:p,type:"success",onClick:()=>{r.value.push({rId:e.randomFun(),key:"",value:""})}},{default:()=>[y.newTxt]}),!e.isController&&l.createVNode(l.Fragment,null,[!u.hideReset&&l.createVNode(d.ElButton,{size:p,type:"default",onClick:()=>{r.value=k.tranArr(e.modelValue,e.randomFun,s.arraySplitSymbol),c("onReset")}},{default:()=>[y.resetTxt]}),l.createVNode(d.ElButton,{size:p,type:"info",onClick:()=>{r.value.sort((m,n)=>+m.rId-+n.rId);const a=k.resetObj(r.value,s.arraySplitSymbol);c("update:modelValue",a),c("onMerge",a,l.toRaw(r.value)),r.value=k.tranArr(a,e.randomFun,s.arraySplitSymbol)}},{default:()=>[y.mergeTxt]})])])])}});function G(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const $=l.defineComponent({name:"EleDynamicCascadeInput",props:{modelValue:{type:Object,required:!0},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:e=>`${Date.now()}_${e??0}`},depth:{type:Number,default:3},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},newChildTxt:{type:Function,default:e=>`添加 '${e.key}' 子项`}},emits:{"update:modelValue":e=>!0,onReset:()=>!0,onMerge:(e,c)=>!0},setup(e,{emit:c,expose:i}){const y={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...e.btnConfigs},u={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...e.configs},s={arraySplitSymbol:",",...e.dyListConfigs},p=n=>["string","number"].includes(n),r=n=>Object.keys(n).map((t,f)=>{let o=n[t];const b=Array.isArray(o),C=b?o.every(h=>typeof h=="number"):typeof o=="number",N=o===null;return p(typeof o)&&(o=n[t]),N&&(o=""),{rId:e.randomFun(f),key:t,value:Object.prototype.toString.call(o)==="[object Object]"?r(n[t]):b?o.join(s.arraySplitSymbol):o,isArray:b||void 0,isNumber:C||void 0}}),v=n=>n.reduce((t,f)=>{const o=f.value;return f.key.trim().length&&(t[f.key]=Array.isArray(o)?v(o):k.parseValue(f.value,f.isArray,f.isNumber,s.arraySplitSymbol)),t},{}),a=l.ref(r(e.modelValue)),m=(n,t=1,f)=>l.createVNode("div",{class:[`depth-${t}`,u.showBorder?"":"no-border",u.showPad?"":"no-pad"],style:{"--depth":t,["--c"+[t]]:k.saferRepairColor(u.borderColors,t)}},[n.map((o,b,C)=>{const N=Array.isArray(o.value),h=p(typeof o.value);return l.createVNode("div",{class:"dItem",key:o.rId,style:{marginLeft:t>1?`${t*u.retractLen}px`:"0"}},[l.createVNode("div",{class:"input"},[!N&&l.createVNode(l.Fragment,null,[l.createVNode(d.ElInput,{modelValue:o.key,class:"key",onInput:V=>o.key=V},null),l.createTextVNode(":")]),l.createVNode(d.ElInput,{class:`value ${N?"isKey":""}`,modelValue:h?o.value:o.key,onInput:V=>{if(N){o.key=V;return}u.allowFilter&&o.isNumber?o.value=k.formatNumberInput(V,o.isArray,s.arraySplitSymbol):o.value=V}},{prefix:Array.isArray(o.value)?void 0:()=>l.createVNode(l.Fragment,null,[l.createVNode(d.ElButton,{type:o.isArray?"success":"default",size:"small",onClick:()=>{o.isArray=!o.isArray}},{default:()=>[l.createTextVNode("Array")]}),l.createTextVNode(" "),l.createVNode(d.ElButton,{type:o.isNumber?"success":"default",size:"small",onClick:()=>{o.isNumber=!o.isNumber}},{default:()=>[l.createTextVNode("Number")]})]),suffix:()=>{let V;return t<e.depth?!N&&l.createVNode(d.ElButton,{type:"success",size:"small",onClick:()=>{h&&(o.value=[],o.isArray=void 0),o.value.push({rId:e.randomFun(),key:"",value:""})}},G(V=e.newChildTxt(o))?V:{default:()=>[V]}):null}})]),l.createVNode("div",{class:"btn"},[l.createVNode(d.ElButton,{type:"success",disabled:b!==C.length-1,onClick:()=>{n.push({rId:e.randomFun(),key:"",value:""})}},{default:()=>[l.createTextVNode("+")]}),l.createVNode(d.ElButton,{type:"danger",onClick:()=>{if(n.splice(b,1),n.length<1){if(f===void 0)return v([]);const V=a.value.findIndex(F=>F.rId===f?.rId);t<1?a.value.splice(V,1,{...f,value:""}):f.value=""}}},{default:()=>[l.createTextVNode("-")]})]),Array.isArray(o.value)&&m(o.value,t+1,o)])})]);return l.watch(a,n=>{if(!e.isController)return;const t=v(n);c("update:modelValue",t),c("onMerge",t,l.toRaw(a.value))},{deep:!0}),i({onSet:n=>{a.value=r(n??e.modelValue)},getResult:(n="res")=>n==="ori"?l.toRaw(a.value):v(a.value)}),()=>l.createVNode("div",{class:e.dyCls??"dynamicCascadeForm"},[l.createVNode("div",{class:"dyFormList",style:{maxHeight:u.maxHeight}},[m(a.value)]),l.createVNode("div",{class:"control"},[!a.value.length&&l.createVNode(d.ElButton,{type:"success",onClick:()=>{a.value.push({rId:e.randomFun(),key:"",value:""})}},{default:()=>[y.newTxt]}),!e.isController&&l.createVNode(l.Fragment,null,[!u.hideReset&&l.createVNode(d.ElButton,{type:"default",onClick:()=>{a.value=r(e.modelValue),c("onReset")}},{default:()=>[y.resetTxt]}),l.createVNode(d.ElButton,{type:"info",onClick:()=>{const n=v(a.value);c("update:modelValue",n),c("onMerge",n,l.toRaw(a.value)),a.value=r(n)}},{default:()=>[y.mergeTxt]})])])])}}),z=l.defineComponent({name:"EleDynamicForm",props:{formConfig:{type:Object,default:()=>({labelPosition:"left",size:"default"})},rowConfig:{type:Object,default:()=>({gutter:10,justify:"start",align:"top"})},rules:{type:Object},preset:{type:String,default:"fullRow",validator:e=>["fullRow","grid"].includes(e)?!0:(console.error("preset value must be `fullRow` or `grid`, the default value is `fullRow`"),!1)},items:{type:Array,require:!0}},slots:Object,setup(e,{expose:c,slots:i}){const y=l.ref(null),u=l.computed(()=>(e.items??[]).filter(m=>!m.hidden)),s=l.computed(()=>u.value?u.value.reduce((m,n)=>(m[n.key]=n.value.value,m),{}):{}),p=l.computed(()=>({...u.value?.reduce((n,t)=>{let f=t.rule;return t.required&&!t.rule&&(f={required:!0,message:t.requiredHint?.(t.label)??`${t.label}不能为空`,trigger:"blur"}),n[t.key]=f,n},{}),...e.rules})),r=l.computed(()=>[...u.value].sort((n,t)=>{const f=n.sort??1/0,o=t.sort??1/0;return Number(f)-Number(o)}));function v(m=null){u.value&&u.value.forEach(n=>{n.value.value=m})}function a(){return new Promise((m,n)=>{y.value?.validate((t,f)=>{t?m(s.value):n(f)})})}if(c({reset:v,validator:a,getResult:(m="res")=>m==="ori"?u.value:s.value}),!e.items)throw new Error("prop items must be not null");return()=>l.createVNode("div",{class:"naiDynamicForm"},[i.header&&l.createVNode("div",{class:"header"},[i.header?.()]),l.createVNode(d.ElForm,l.mergeProps({ref:y},e.formConfig,{model:s.value,rules:p.value}),{default(){const m=r.value;return e.preset==="grid"?l.h(d.ElRow,{...e.rowConfig},{default:()=>m?.map(n=>l.h(d.ElCol,{span:n.span??24,offset:n.offset??0},{default:()=>l.h(d.ElFormItem,{label:n.label,prop:n.path||n.key},{default:R(n)})}))}):m?.map(n=>l.h(d.ElFormItem,{label:n.label,prop:n.path||n.key},{default:R(n)}))}}),i.footer&&l.h("div",{class:"footer"},i.footer?.())])}});function R(e){return function(){return e.render2?e.render2(e):null}}function g(e,c,i){return e?.[c]??i}function M(e){return!!e&&(e.type==="group"||Array.isArray(e.children)||Array.isArray(e.options))}function E(e){return(e??[]).map(c=>{if(M(c)){const i=c.children??c.options??[];return{...c,__isGroup:!0,__children:i}}return{...c,__isGroup:!1}})}function L(e,c,i="label",y="value"){const u=E(c);for(const s of u)if(s.__isGroup){for(const p of s.__children)if(g(p,y,p.value)===e)return g(p,i,p.label)}else if(g(s,y,s.value)===e)return g(s,i,s.label);return""}function I(e,c={},i){const{onChange:y,value:u,...s}=i;return l.h(d.ElInput,{...s,modelValue:e.value,"onUpdate:modelValue":p=>{e.value=p,i?.onChange?.(p,i)},...c})}function T(e,c,i={},y){const{onChange:u,labelField:s,valueField:p,options:r,...v}=y??{},a=s??"label",m=p??"value",n=E(r??c);return l.h(d.ElSelect,{...v,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,y?.onChange?.(t,y,n)},...i},{default:()=>n.map((t,f)=>{if(t.__isGroup)return l.h(d.ElOptionGroup,{key:t.key??`g-${f}`,label:g(t,a,t.label)},{default:()=>(t.__children??[]).map((C,N)=>{const h=g(C,a,C.label),V=g(C,m,C.value);return l.h(d.ElOption,{key:C.key??`${f}-${N}`,label:h,value:V,disabled:C.disabled})})});const o=g(t,a,t.label),b=g(t,m,t.value);return l.h(d.ElOption,{key:t.key??`${f}`,label:o,value:b,disabled:t.disabled})})})}function x(e,c,i={},y,u){const{labelField:s,valueField:p,options:r,onChange:v,...a}=y??{},m=s??"label",n=p??"value",t=r??c,f=E(t),o=()=>{if(u)return u;const b=Array.isArray(e.value)?e.value.length?`已选 ${e.value.length} 项`:"请选择":e.value!=null?L(e.value,t,m,n)||String(e.value):"请选择";return l.h(d.ElButton,null,{default:()=>b})};return Array.isArray(e.value)?l.createVNode(d.ElPopover,{trigger:"click",...a,...i},{reference:()=>o(),default:()=>l.h(d.ElCheckboxGroup,{modelValue:e.value,"onUpdate:modelValue":b=>{e.value=b,y?.onChange?.(b,y,f)}},{default:()=>l.h(d.ElSpace,{wrap:!0},{default:()=>f.flatMap((b,C)=>(b.__isGroup?b.__children??[]:[b]).map((h,V)=>{const F=g(h,m,h.label),S=g(h,n,h.value);return l.h(d.ElCheckbox,{key:h.key??`${C}-${V}`,label:S,disabled:h.disabled},{default:()=>F})}))})})}):l.createVNode(d.ElDropdown,{trigger:"click",...a,onCommand:b=>{e.value=b,y?.onChange?.(b,y,f)},...i},{default:()=>o(),dropdown:()=>l.h(d.ElDropdownMenu,null,{default:()=>f.flatMap((b,C)=>(b.__isGroup?b.__children??[]:[b]).map((h,V)=>{const F=g(h,m,h.label),S=g(h,n,h.value);return l.h(d.ElDropdownItem,{key:h.key??`${C}-${V}`,command:S,disabled:h.disabled},{default:()=>F})}))})})}function A(e,c,i={},y){const{valueField:u="value",labelField:s="label",childrenField:p="children",onChange:r,options:v,...a}=y??{},m=v??c;return l.h(d.ElTreeSelect,{...a,data:m,modelValue:e.value,"onUpdate:modelValue":n=>{e.value=n,y?.onChange?.(n,y,m)},props:{value:u,label:s,children:p,disabled:"disabled"},...i})}function w(e,c,i={},y){const{onChange:u,labelField:s,valueField:p,options:r,...v}=y??{},a=s??"label",m=p??"value",n=r??c;return l.h(d.ElRadioGroup,{...v,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,y?.onChange?.(t,y,n)},...i},{default:()=>(n??[]).map((t,f)=>{const o=g(t,a,t.label),b=g(t,m,t.value);return l.h(d.ElRadio,{key:t.key??f,label:b,disabled:t.disabled},()=>o)})})}function O(e,c,i={},y){const{onChange:u,labelField:s,valueField:p,options:r,...v}=y??{},a=s??"label",m=p??"value",n=r??c;return l.h(d.ElRadioGroup,{...v,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,y?.onChange?.(t,y,n)},...i},{default:()=>(n??[]).map((t,f)=>{const o=g(t,a,t.label),b=g(t,m,t.value);return l.h(d.ElRadioButton,{key:t.key??f,label:b,disabled:t.disabled},()=>o)})})}function P(e,c,i={},y){const{onChange:u,labelField:s,valueField:p,options:r,...v}=y??{},a=s??"label",m=p??"value",n=r??c;return l.h(d.ElCheckboxGroup,{...v,modelValue:e.value,"onUpdate:modelValue":t=>{e.value=t,y?.onChange?.(t,y,n)},...i},{default:()=>l.h(d.ElSpace,{wrap:!0},{default:()=>(n??[]).map((t,f)=>{const o=g(t,a,t.label),b=g(t,m,t.value);return l.h(d.ElCheckbox,{key:t.key??f,label:b,disabled:t.disabled},()=>o)})})})}function _(e,c={},i){const{onChange:y,...u}=i??{};return l.h(d.ElSwitch,{...u,modelValue:e.value,"onUpdate:modelValue":s=>{e.value=s,i?.onChange?.(s,i)},...c})}function B(e,c={},i){const{onChange:y,...u}=i??{};return l.h(d.ElDatePicker,{...u,modelValue:e.value,"onUpdate:modelValue":s=>{e.value=s,i?.onChange?.(s,i)},...c})}function j(e,c={},i){const{onChange:y,...u}=i??{};return l.h(d.ElTimePicker,{...u,modelValue:e.value,"onUpdate:modelValue":s=>{e.value=s,i?.onChange?.(s,i)},...c})}const U=Object.freeze(Object.defineProperty({__proto__:null,renderCheckboxGroup:P,renderDatePicker:B,renderInput:I,renderPopSelect:x,renderRadioButtonGroup:O,renderRadioGroup:w,renderSelect:T,renderSwitch:_,renderTimePicker:j,renderTreeSelect:A},Symbol.toStringTag,{value:"Module"}));function q(e){return function(i,y=!0){const u=e,s={renderInput:r=>u.renderInput(r.value,r.renderProps??{},r),renderSelect:r=>u.renderSelect(r.value,r.options??[],r.renderProps??{},r),renderPopSelect:r=>u.renderPopSelect(r.value,r.options??[],r.renderProps??{},r),renderTreeSelect:r=>u.renderTreeSelect(r.value,r.options??[],r.renderProps??{},r),renderRadioGroup:r=>u.renderRadioGroup(r.value,r.options??[],r.renderProps??{},r),renderRadioButtonGroup:r=>u.renderRadioButtonGroup(r.value,r.options??[],r.renderProps??{},r),renderCheckboxGroup:r=>u.renderCheckboxGroup(r.value,r.options??[],r.renderProps??{},r),renderSwitch:r=>u.renderSwitch(r.value,r.renderProps??{},r),renderDatePicker:r=>u.renderDatePicker(r.value,r.renderProps??{},r),renderTimePicker:r=>u.renderTimePicker(r.value,r.renderProps??{},r)};return i.map(r=>{const v=r;if(v.value=k.ensureRef(r.value),typeof r.render2=="function")v.render2=r.render2;else{const a=r.renderType??"renderInput",m=s[a];m?v.render2=()=>m(v):(console.warn(`[useDecorateForm] unknown renderType: ${r.renderType}`),v.render2=()=>s.renderInput(v))}return y?l.shallowReactive(v):v})}}const H=q(U);exports.EleDynamicCascadeInput=$;exports.EleDynamicForm=z;exports.EleDynamicInput=D;exports.renderCheckboxGroup=P;exports.renderDatePicker=B;exports.renderInput=I;exports.renderPopSelect=x;exports.renderRadioButtonGroup=O;exports.renderRadioGroup=w;exports.renderSelect=T;exports.renderSwitch=_;exports.renderTimePicker=j;exports.renderTreeSelect=A;exports.useDecorateForm=H;

package/dist/elementPlus/index.d.ts

@@ -2,6 +2,8 @@ import { default as EleDynamicInput } from './EleDynamicInput';
 import { default as EleDynamicCascadeInput } from './EleDynamicCascadeInput';
 import { default as EleDynamicForm } from './EleDynamicForm';
 import { ExposeDyFType, ExposeType } from '../types';
+import { useDecorateForm } from './hooks/decorateForm';
+export { useDecorateForm };
 export * from './hooks/renderForm';
 export type eleDynamicInputRef = InstanceType<typeof EleDynamicInput> & ExposeType;
 export type eleCascadeDynamicInputRef = InstanceType<typeof EleDynamicCascadeInput> & ExposeType;