dynamicformdjx 0.3.2 → 0.3.3

package/README.md

@@ -262,7 +262,97 @@ const validatorData = () => {
 }
 </style>
 ```
+#### 3.装饰表单
+> (可省略render2函数)
+```vue
+<script setup lang="ts">
+import {h, ref} from "vue";
+import {NButton} from "naive-ui";
+import {useDyForm} from "dynamicformdjx";
+import {
+  type naiDynamicFormRef,
+  NaiDynamicForm,
+  useDecorateForm,
+  renderDatePicker
+} from "dynamicformdjx/naiveUi";
+
 
+type FormRow = {
+  password: string
+  job: number
+  birthday: number
+}
+const naiDynamicFormRef = ref<naiDynamicFormRef | null>(null)
+const formItems = useDecorateForm<FormRow>([
+  {
+    key: "password",
+    label: "密码",
+    value: null,
+    clearable: true,
+    placeholder: '请输入密码',
+    required: true,
+    type:'password',
+    renderType: 'renderInput',
+    renderProps:{
+      showPasswordOn:'click'
+    }
+  },
+  {
+    key: "job",
+    label: "职位",
+    value: null,
+    clearable: true,
+    options: ['前端', '后端'].map((label, value) => ({label, value})),
+    renderType: 'renderSelect',
+  },
+  {
+    key: "birthday",
+    label: "生日",
+    value: null,
+    render2: f => renderDatePicker(f.value, {type: 'datetime'}, f),
+  },
+])
+const useForm = useDyForm<FormRow>(formItems)
+const getData = () => {
+  const res = naiDynamicFormRef.value?.getResult?.()
+  console.log(res)
+}
+const resetData = () => {
+  naiDynamicFormRef.value?.reset()
+}
+const setData = () => {
+  useForm.setValues({
+    password: 'naive-ui',
+    job: 0,
+    birthday: Date.now(),
+  })
+}
+const validatorData = () => {
+  naiDynamicFormRef.value?.validator().then(data => {
+    console.log(data)
+  }).catch(err => {
+    console.log(err)
+  })
+}
+</script>
+
+<template>
+  <NaiDynamicForm :items="formItems" ref="naiDynamicFormRef"/>
+  <div class="control">
+    <n-button @click="getData" type="success" size="small">get Data</n-button>
+    <n-button @click="setData" type="warning" size="small">set Data</n-button>
+    <n-button @click="validatorData" type="default" size="small">validate Data</n-button>
+    <n-button @click="resetData" type="error" size="small">reset Data</n-button>
+  </div>
+</template>
+
+<style scoped>
+.control {
+  display: flex;
+  gap: 5px;
+}
+</style>
+```
 ###  动态录入
 
 #### 1.单组件

package/dist/hooks/useDyForm.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'vue';
 import { DyFormItem } from '../types/form';
 type KeyOf<T> = Extract<keyof T, string>;
-export declare function useReactiveForm<T extends Record<string, any>, U = any>(items: DyFormItem<T, U>[], isDecorate?: boolean): DyFormItem<T, U>[];
+export declare function useReactiveForm<T extends Record<string, any>, U = any>(items: DyFormItem<T, U>[], isReactive?: boolean): DyFormItem<T, U>[];
 export declare function useDyForm<Row extends Record<string, any>>(items: DyFormItem<Row>[] | Ref<DyFormItem<Row>[]>): {
     setDisabled: (disabled: boolean, keys?: KeyOf<Row>[]) => void;
     setHidden: (hidden: boolean, keys?: KeyOf<Row>[]) => void;

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

@@ -0,0 +1,8 @@
+import { DyFormItem } from '../../types/form';
+export type RenderType = "renderInput" | "renderSelect" | "renderPopSelect" | "renderTreeSelect" | "renderRadioGroup" | "renderRadioButtonGroup" | "renderCheckboxGroup" | "renderSwitch" | "renderDatePicker" | "renderTimePicker";
+export type DecorateDyFormItem<Row extends Record<string, any>, RuleT = any> = Omit<DyFormItem<Row, RuleT>, "value"> & {
+    value: DyFormItem<Row, RuleT>["value"] | any | null;
+    renderType?: RenderType;
+    renderProps?: Record<string, any>;
+};
+export declare function useDecorateForm<Row extends Record<string, any>, RuleT = any>(items: DecorateDyFormItem<Row, RuleT>[], isReactive?: boolean): DyFormItem<Row, RuleT>[];

package/dist/naiveUi/hooks/renderForm.d.ts

@@ -3,7 +3,7 @@ import { Value as DatePickerValue } from 'naive-ui/lib/date-picker/src/interface
 import { SelectGroupOption, Value as SelectValue } from 'naive-ui/lib/select/src/interface';
 import { TreeSelectOption, Value } from 'naive-ui/lib/tree-select/src/interface';
 import { AllowedComponentProps, Ref, VNode } from 'vue';
-import { DyFormItem } from '../../types/form.ts';
+import { DyFormItem } from '../../types/form';
 export declare function renderInput(model: Ref<string>, optionProps?: InputProps | AllowedComponentProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>;

package/dist/naiveUi/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),s=require("naive-ui"),b=require("../index-BWQjnQQF.cjs"),k=e.defineComponent({name:"NaiDynamicInput",props:{size:{type:String},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:t=>`${Date.now()}_${t??0}`},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},modelValue:{type:Object,required:!0}},emits:{"update:modelValue":t=>!0,onReset:()=>!0,onMerge:(t,o)=>!0},setup(t,{emit:o,expose:c}){const l={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...t.btnConfigs},i={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...t.configs},y={arraySplitSymbol:",",...t.dyListConfigs},v=t.size,d=e.ref(b.tranArr(t.modelValue,t.randomFun,y.arraySplitSymbol)),N=e.ref(null);return e.watch(d,n=>{if(!t.isController)return;const m=b.resetObj(n,y.arraySplitSymbol);o("update:modelValue",m),o("onMerge",m,e.toRaw(d.value))},{deep:!0}),c({onSet:n=>{d.value=b.tranArr(n??t.modelValue,t.randomFun,y.arraySplitSymbol)},getResult:(n="res")=>n==="ori"?e.toRaw(d.value):b.resetObj(d.value,y.arraySplitSymbol)}),()=>e.createVNode("div",{class:t.dyCls??`dynamicForm ${v}`},[e.createVNode("div",{class:`dyFormList ${d.value.length?"":"noList"}`,ref:N,style:{maxHeight:i.maxHeight}},[d.value.map((n,m,a)=>e.createVNode("div",{class:"dItem",key:n.rId},[e.createVNode("div",{class:"input"},[e.createVNode(s.NInput,{size:v,value:n.key,class:"key",onInput:r=>{n.key=r}},null),e.createTextVNode(":"),e.createVNode(s.NInput,{size:v,value:n.value,class:"value",onInput:r=>{i.allowFilter&&n.isNumber?n.value=b.formatNumberInput(r,n.isArray,y.arraySplitSymbol):n.value=r}},{prefix:()=>e.createVNode(e.Fragment,null,[e.createVNode(s.NButton,{type:n.isArray?"success":"default",size:"tiny",onClick:()=>{n.isArray=!n.isArray}},{default:()=>[e.createTextVNode("Array")]}),e.createTextVNode(" "),e.createVNode(s.NButton,{type:n.isNumber?"success":"default",size:"tiny",onClick:()=>{n.isNumber=!n.isNumber}},{default:()=>[e.createTextVNode("Number")]})])})]),e.createVNode("div",{class:"btn"},[e.createVNode(s.NButton,{type:"success",size:v,disabled:m!==a.length-1,onClick:()=>{d.value.push({rId:t.randomFun(),key:"",value:""}),i.autoScroll&&e.nextTick(()=>{const r=N.value;r?.scrollTo({top:r.scrollHeight,behavior:"smooth"})})}},{default:()=>[e.createTextVNode("+")]}),e.createVNode(s.NButton,{size:v,type:"error",onClick:()=>{d.value=d.value.filter(r=>r.rId!==n.rId)}},{default:()=>[e.createTextVNode("-")]})])]))]),e.createVNode("div",{class:`control ${d.value.length?"":"noList"}`},[!d.value.length&&e.createVNode(s.NButton,{size:v,type:"success",onClick:()=>{d.value.push({rId:t.randomFun(),key:"",value:""})}},{default:()=>[l.newTxt]}),!t.isController&&e.createVNode(e.Fragment,null,[!i.hideReset&&e.createVNode(s.NButton,{size:v,type:"default",onClick:()=>{d.value=b.tranArr(t.modelValue,t.randomFun,y.arraySplitSymbol),o("onReset")}},{default:()=>[l.resetTxt]}),e.createVNode(s.NButton,{size:v,type:"info",onClick:()=>{d.value.sort((m,a)=>+m.rId-+a.rId);const n=b.resetObj(d.value,y.arraySplitSymbol);o("update:modelValue",n),o("onMerge",n,e.toRaw(d.value)),d.value=b.tranArr(n,t.randomFun,y.arraySplitSymbol)}},{default:()=>[l.mergeTxt]})])])])}});function F(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const I=e.defineComponent({name:"NaiveUiDynamicCascadeInput",props:{modelValue:{type:Object,required:!0},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:t=>`${Date.now()}_${t??0}`},depth:{type:Number,default:3},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},newChildTxt:{type:Function,default:t=>`添加 '${t.key}' 子项`}},emits:{"update:modelValue":t=>!0,onReset:()=>!0,onMerge:(t,o)=>!0},setup(t,{emit:o,expose:c}){const l={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...t.btnConfigs},i={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...t.configs},y={arraySplitSymbol:",",...t.dyListConfigs},v=a=>["string","number"].includes(a),d=a=>Object.keys(a).map((r,f)=>{let u=a[r];const g=Array.isArray(u),C=g?u.every(h=>typeof h=="number"):typeof u=="number",V=u===null;return v(typeof u)&&(u=a[r]),V&&(u=""),{rId:t.randomFun(f),key:r,value:Object.prototype.toString.call(u)==="[object Object]"?d(a[r]):g?u.join(y.arraySplitSymbol):u,isArray:g||void 0,isNumber:C||void 0}}),N=a=>a.reduce((r,f)=>{const u=f.value;return f.key.trim().length&&(r[f.key]=Array.isArray(u)?N(u):b.parseValue(f.value,f.isArray,f.isNumber,y.arraySplitSymbol)),r},{}),n=e.ref(d(t.modelValue)),m=(a,r=1,f)=>e.createVNode("div",{class:[`depth-${r}`,i.showBorder?"":"no-border",i.showPad?"":"no-pad"],style:{"--depth":r,["--c"+[r]]:b.saferRepairColor(i.borderColors,r)}},[a.map((u,g,C)=>{const V=Array.isArray(u.value),h=v(typeof u.value);return e.createVNode("div",{class:"dItem",key:u.rId,style:{marginLeft:r>1?`${r*i.retractLen}px`:"0"}},[e.createVNode("div",{class:"input"},[!V&&e.createVNode(e.Fragment,null,[e.createVNode(s.NInput,{value:u.key,class:"key",onInput:p=>u.key=p},null),e.createTextVNode(":")]),e.createVNode(s.NInput,{class:`value ${V?"isKey":""}`,value:h?u.value:u.key,onInput:p=>{if(V){u.key=p;return}i.allowFilter&&u.isNumber?u.value=b.formatNumberInput(p,u.isArray,y.arraySplitSymbol):u.value=p}},{prefix:Array.isArray(u.value)?void 0:()=>e.createVNode(e.Fragment,null,[e.createVNode(s.NButton,{type:u.isArray?"success":"default",size:"tiny",onClick:()=>{u.isArray=!u.isArray}},{default:()=>[e.createTextVNode("Array")]}),e.createTextVNode(" "),e.createVNode(s.NButton,{type:u.isNumber?"success":"default",size:"tiny",onClick:()=>{u.isNumber=!u.isNumber}},{default:()=>[e.createTextVNode("Number")]})]),suffix:()=>{let p;return r<t.depth?!V&&e.createVNode(s.NButton,{type:"success",size:"tiny",onClick:()=>{h&&(u.value=[],u.isArray=void 0),u.value.push({rId:t.randomFun(),key:"",value:""})}},F(p=t.newChildTxt(u))?p:{default:()=>[p]}):null}})]),e.createVNode("div",{class:"btn"},[e.createVNode(s.NButton,{type:"success",disabled:g!==C.length-1,onClick:()=>{a.push({rId:t.randomFun(),key:"",value:""})}},{default:()=>[e.createTextVNode("+")]}),e.createVNode(s.NButton,{type:"error",onClick:()=>{if(a.splice(g,1),a.length<1){if(f===void 0)return N([]);const p=n.value.findIndex(S=>S.rId===f?.rId);r<1?n.value.splice(p,1,{...f,value:""}):f.value=""}}},{default:()=>[e.createTextVNode("-")]})]),Array.isArray(u.value)&&m(u.value,r+1,u)])})]);return e.watch(n,a=>{if(!t.isController)return;const r=N(a);o("update:modelValue",r),o("onMerge",r,e.toRaw(n.value))},{deep:!0}),c({onSet:a=>{n.value=d(a??t.modelValue)},getResult:(a="res")=>a==="ori"?e.toRaw(n.value):N(n.value)}),()=>e.createVNode("div",{class:t.dyCls??"dynamicCascadeForm"},[e.createVNode("div",{class:"dyFormList",style:{maxHeight:i.maxHeight}},[m(n.value)]),e.createVNode("div",{class:"control"},[!n.value.length&&e.createVNode(s.NButton,{type:"success",onClick:()=>{n.value.push({rId:t.randomFun(),key:"",value:""})}},{default:()=>[l.newTxt]}),!t.isController&&e.createVNode(e.Fragment,null,[!i.hideReset&&e.createVNode(s.NButton,{type:"default",onClick:()=>{n.value=d(t.modelValue),o("onReset")}},{default:()=>[l.resetTxt]}),e.createVNode(s.NButton,{type:"info",onClick:()=>{const a=N(n.value);o("update:modelValue",a),o("onMerge",a,e.toRaw(n.value)),n.value=d(a)}},{default:()=>[l.mergeTxt]})])])])}}),T=e.defineComponent({name:"NaiDynamicForm",props:{formConfig:{type:Object,default:()=>({labelPlacement:"left",size:"medium"})},gridConfig:{type:Object,default:()=>({responsive:"screen",cols:"xs:1 s:2 m:3 l:3 xl:4 2xl:4",xGap:10})},rules:{type:Object},preset:{type:String,default:"fullRow",validator:t=>["fullRow","grid"].includes(t)?!0:(console.error("preset value must be `fullRow` or `grid`, the default value is `fullRow`"),!1)},items:{type:Array,require:!0}},setup(t,{emit:o,expose:c}){const l=e.ref(null),i=e.computed(()=>(t.items??[]).filter(m=>!m.hidden)),y=e.computed(()=>i.value?i.value.reduce((m,a)=>(m[a.key]=a.value.value,m),{}):{}),v=e.computed(()=>({...i.value?.reduce((a,r)=>{let f=r.rule;return r.required&&!r.rule&&(f={required:!0,message:`${r.label}不能为空`,trigger:["blur"]}),a[r.key]=f,a},{}),...t.rules})),d=e.computed(()=>[...i.value].sort((a,r)=>{const f=a.sort??1/0,u=r.sort??1/0;return Number(f)-Number(u)}));function N(m=null){i.value&&i.value.forEach(a=>{a.reset?a.reset(a):a.value.value=m})}function n(){return new Promise((m,a)=>{l.value?.validate(r=>{r?a(r):m(y.value)})})}if(c({reset:N,validator:n,getResult:(m="res")=>m==="ori"?i.value:y.value}),!t.items)throw new Error("prop items must be not null");return()=>e.createVNode("div",{class:"naiDynamicForm"},[e.createVNode(s.NForm,e.mergeProps({ref:l},t.formConfig,{model:y.value,rules:v.value}),{default(){const m=d.value;return t.preset==="grid"?e.h(s.NGrid,{...t.gridConfig},{default:()=>m?.map(a=>e.h(s.NFormItemGridItem,{label:a.label,path:a.path||a.key},{default:x(a)}))}):m?.map(a=>e.h(s.NFormItem,{label:a.label,path:a.path||a.key},{default:x(a)}))}})])}});function x(t){return function(){return t.render2?t.render2(t):null}}function R(t,o={},c){return e.h(s.NInput,{...c,value:t.value,onUpdateValue:l=>{t.value=l,c?.onChange?.(l,c)},...o})}function A(t,o,c={},l){return e.h(s.NSelect,{...l,value:t.value,options:o,onUpdateValue:i=>{t.value=i,l?.onChange?.(i,l,o)},...c})}function w(t,o,c={},l,i){const{value:y,labelField:v,valueField:d,...N}=l,n=v??"label",m=d??"value",a=N.options??o;return e.createVNode(s.NPopselect,{...N,value:t.value,onUpdateValue:r=>{t.value=r,l?.onChange?.(r,l,a)},options:a.map(r=>({...r,label:r[n],value:r[m]})),...c},{default:()=>i??e.createVNode(s.NButton,null,{default:()=>t.value||"请选择"})})}function j(t,o,c={},l){const{valueField:i="value",...y}=l;return e.h(s.NTreeSelect,{...y,value:t.value,options:o,onUpdateValue:v=>{t.value=v,l?.onChange?.(v,l,o)},keyField:i,...c})}function B(t,o,c={},l){return e.h(s.NRadioGroup,{...l,value:t.value,onUpdateValue:i=>{t.value=i,l?.onChange?.(i,l,o)},...c},{default:()=>(l?.options??o).map(y=>{const v=l,d=y[v?.labelField??"label"],N=y[v?.valueField??"value"];return e.h(s.NRadio,{...y,label:d,value:N},{default:()=>y.label})})})}function O(t,o,c={},l){return e.createVNode(s.NRadioGroup,{...l,value:t.value,onUpdateValue:i=>{t.value=i,l?.onChange?.(i,l,o)},...c},{default:()=>(l?.options??o).map(y=>{const v=l,d=y[v?.labelField??"label"],N=y[v?.valueField??"value"];return e.createVNode(s.NRadioButton,{...y,label:d,value:N},{default:()=>y.label})})})}function P(t,o,c={},l){return e.h(s.NCheckboxGroup,{...l,value:t.value,onUpdateValue:i=>{t.value=i,l?.onChange?.(i,l,o)},...c},{default:()=>e.h(s.NSpace,{itemStyle:"display: flex"},{default:()=>(l?.options??o).map(y=>{const v=l,d=y[v?.labelField??"label"],N=y[v?.valueField??"value"];return e.h(s.NCheckbox,{value:N,label:d})})})})}function z(t,o={},c){return e.h(s.NSwitch,{...c,value:t.value,onUpdateValue:l=>{t.value=l,c?.onChange?.(l,c)},...o})}function D(t,o={},c){return e.h(s.NDatePicker,{...c,value:t.value,onUpdateValue:l=>{t.value=l,c?.onChange?.(l,c)},...o})}function G(t,o={},c){return e.h(s.NTimePicker,{...c,value:t.value,onUpdateValue:l=>{t.value=l,c?.onChange?.(l,c)},...o})}exports.NaiDynamicCascadeInput=I;exports.NaiDynamicForm=T;exports.NaiDynamicInput=k;exports.renderCheckboxGroup=P;exports.renderDatePicker=D;exports.renderInput=R;exports.renderPopSelect=w;exports.renderRadioButtonGroup=O;exports.renderRadioGroup=B;exports.renderSelect=A;exports.renderSwitch=z;exports.renderTimePicker=G;exports.renderTreeSelect=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i=require("naive-ui"),b=require("../index-BWQjnQQF.cjs"),O=e.defineComponent({name:"NaiDynamicInput",props:{size:{type:String},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:t=>`${Date.now()}_${t??0}`},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},modelValue:{type:Object,required:!0}},emits:{"update:modelValue":t=>!0,onReset:()=>!0,onMerge:(t,d)=>!0},setup(t,{emit:d,expose:c}){const n={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...t.btnConfigs},r={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...t.configs},s={arraySplitSymbol:",",...t.dyListConfigs},v=t.size,y=e.ref(b.tranArr(t.modelValue,t.randomFun,s.arraySplitSymbol)),p=e.ref(null);return e.watch(y,u=>{if(!t.isController)return;const m=b.resetObj(u,s.arraySplitSymbol);d("update:modelValue",m),d("onMerge",m,e.toRaw(y.value))},{deep:!0}),c({onSet:u=>{y.value=b.tranArr(u??t.modelValue,t.randomFun,s.arraySplitSymbol)},getResult:(u="res")=>u==="ori"?e.toRaw(y.value):b.resetObj(y.value,s.arraySplitSymbol)}),()=>e.createVNode("div",{class:t.dyCls??`dynamicForm ${v}`},[e.createVNode("div",{class:`dyFormList ${y.value.length?"":"noList"}`,ref:p,style:{maxHeight:r.maxHeight}},[y.value.map((u,m,a)=>e.createVNode("div",{class:"dItem",key:u.rId},[e.createVNode("div",{class:"input"},[e.createVNode(i.NInput,{size:v,value:u.key,class:"key",onInput:l=>{u.key=l}},null),e.createTextVNode(":"),e.createVNode(i.NInput,{size:v,value:u.value,class:"value",onInput:l=>{r.allowFilter&&u.isNumber?u.value=b.formatNumberInput(l,u.isArray,s.arraySplitSymbol):u.value=l}},{prefix:()=>e.createVNode(e.Fragment,null,[e.createVNode(i.NButton,{type:u.isArray?"success":"default",size:"tiny",onClick:()=>{u.isArray=!u.isArray}},{default:()=>[e.createTextVNode("Array")]}),e.createTextVNode(" "),e.createVNode(i.NButton,{type:u.isNumber?"success":"default",size:"tiny",onClick:()=>{u.isNumber=!u.isNumber}},{default:()=>[e.createTextVNode("Number")]})])})]),e.createVNode("div",{class:"btn"},[e.createVNode(i.NButton,{type:"success",size:v,disabled:m!==a.length-1,onClick:()=>{y.value.push({rId:t.randomFun(),key:"",value:""}),r.autoScroll&&e.nextTick(()=>{const l=p.value;l?.scrollTo({top:l.scrollHeight,behavior:"smooth"})})}},{default:()=>[e.createTextVNode("+")]}),e.createVNode(i.NButton,{size:v,type:"error",onClick:()=>{y.value=y.value.filter(l=>l.rId!==u.rId)}},{default:()=>[e.createTextVNode("-")]})])]))]),e.createVNode("div",{class:`control ${y.value.length?"":"noList"}`},[!y.value.length&&e.createVNode(i.NButton,{size:v,type:"success",onClick:()=>{y.value.push({rId:t.randomFun(),key:"",value:""})}},{default:()=>[n.newTxt]}),!t.isController&&e.createVNode(e.Fragment,null,[!r.hideReset&&e.createVNode(i.NButton,{size:v,type:"default",onClick:()=>{y.value=b.tranArr(t.modelValue,t.randomFun,s.arraySplitSymbol),d("onReset")}},{default:()=>[n.resetTxt]}),e.createVNode(i.NButton,{size:v,type:"info",onClick:()=>{y.value.sort((m,a)=>+m.rId-+a.rId);const u=b.resetObj(y.value,s.arraySplitSymbol);d("update:modelValue",u),d("onMerge",u,e.toRaw(y.value)),y.value=b.tranArr(u,t.randomFun,s.arraySplitSymbol)}},{default:()=>[n.mergeTxt]})])])])}});function D(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const z=e.defineComponent({name:"NaiveUiDynamicCascadeInput",props:{modelValue:{type:Object,required:!0},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:t=>`${Date.now()}_${t??0}`},depth:{type:Number,default:3},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},newChildTxt:{type:Function,default:t=>`添加 '${t.key}' 子项`}},emits:{"update:modelValue":t=>!0,onReset:()=>!0,onMerge:(t,d)=>!0},setup(t,{emit:d,expose:c}){const n={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...t.btnConfigs},r={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...t.configs},s={arraySplitSymbol:",",...t.dyListConfigs},v=a=>["string","number"].includes(a),y=a=>Object.keys(a).map((l,f)=>{let o=a[l];const g=Array.isArray(o),C=g?o.every(V=>typeof V=="number"):typeof o=="number",h=o===null;return v(typeof o)&&(o=a[l]),h&&(o=""),{rId:t.randomFun(f),key:l,value:Object.prototype.toString.call(o)==="[object Object]"?y(a[l]):g?o.join(s.arraySplitSymbol):o,isArray:g||void 0,isNumber:C||void 0}}),p=a=>a.reduce((l,f)=>{const o=f.value;return f.key.trim().length&&(l[f.key]=Array.isArray(o)?p(o):b.parseValue(f.value,f.isArray,f.isNumber,s.arraySplitSymbol)),l},{}),u=e.ref(y(t.modelValue)),m=(a,l=1,f)=>e.createVNode("div",{class:[`depth-${l}`,r.showBorder?"":"no-border",r.showPad?"":"no-pad"],style:{"--depth":l,["--c"+[l]]:b.saferRepairColor(r.borderColors,l)}},[a.map((o,g,C)=>{const h=Array.isArray(o.value),V=v(typeof o.value);return e.createVNode("div",{class:"dItem",key:o.rId,style:{marginLeft:l>1?`${l*r.retractLen}px`:"0"}},[e.createVNode("div",{class:"input"},[!h&&e.createVNode(e.Fragment,null,[e.createVNode(i.NInput,{value:o.key,class:"key",onInput:N=>o.key=N},null),e.createTextVNode(":")]),e.createVNode(i.NInput,{class:`value ${h?"isKey":""}`,value:V?o.value:o.key,onInput:N=>{if(h){o.key=N;return}r.allowFilter&&o.isNumber?o.value=b.formatNumberInput(N,o.isArray,s.arraySplitSymbol):o.value=N}},{prefix:Array.isArray(o.value)?void 0:()=>e.createVNode(e.Fragment,null,[e.createVNode(i.NButton,{type:o.isArray?"success":"default",size:"tiny",onClick:()=>{o.isArray=!o.isArray}},{default:()=>[e.createTextVNode("Array")]}),e.createTextVNode(" "),e.createVNode(i.NButton,{type:o.isNumber?"success":"default",size:"tiny",onClick:()=>{o.isNumber=!o.isNumber}},{default:()=>[e.createTextVNode("Number")]})]),suffix:()=>{let N;return l<t.depth?!h&&e.createVNode(i.NButton,{type:"success",size:"tiny",onClick:()=>{V&&(o.value=[],o.isArray=void 0),o.value.push({rId:t.randomFun(),key:"",value:""})}},D(N=t.newChildTxt(o))?N:{default:()=>[N]}):null}})]),e.createVNode("div",{class:"btn"},[e.createVNode(i.NButton,{type:"success",disabled:g!==C.length-1,onClick:()=>{a.push({rId:t.randomFun(),key:"",value:""})}},{default:()=>[e.createTextVNode("+")]}),e.createVNode(i.NButton,{type:"error",onClick:()=>{if(a.splice(g,1),a.length<1){if(f===void 0)return p([]);const N=u.value.findIndex(j=>j.rId===f?.rId);l<1?u.value.splice(N,1,{...f,value:""}):f.value=""}}},{default:()=>[e.createTextVNode("-")]})]),Array.isArray(o.value)&&m(o.value,l+1,o)])})]);return e.watch(u,a=>{if(!t.isController)return;const l=p(a);d("update:modelValue",l),d("onMerge",l,e.toRaw(u.value))},{deep:!0}),c({onSet:a=>{u.value=y(a??t.modelValue)},getResult:(a="res")=>a==="ori"?e.toRaw(u.value):p(u.value)}),()=>e.createVNode("div",{class:t.dyCls??"dynamicCascadeForm"},[e.createVNode("div",{class:"dyFormList",style:{maxHeight:r.maxHeight}},[m(u.value)]),e.createVNode("div",{class:"control"},[!u.value.length&&e.createVNode(i.NButton,{type:"success",onClick:()=>{u.value.push({rId:t.randomFun(),key:"",value:""})}},{default:()=>[n.newTxt]}),!t.isController&&e.createVNode(e.Fragment,null,[!r.hideReset&&e.createVNode(i.NButton,{type:"default",onClick:()=>{u.value=y(t.modelValue),d("onReset")}},{default:()=>[n.resetTxt]}),e.createVNode(i.NButton,{type:"info",onClick:()=>{const a=p(u.value);d("update:modelValue",a),d("onMerge",a,e.toRaw(u.value)),u.value=y(a)}},{default:()=>[n.mergeTxt]})])])])}}),G=e.defineComponent({name:"NaiDynamicForm",props:{formConfig:{type:Object,default:()=>({labelPlacement:"left",size:"medium"})},gridConfig:{type:Object,default:()=>({responsive:"screen",cols:"xs:1 s:2 m:3 l:3 xl:4 2xl:4",xGap:10})},rules:{type:Object},preset:{type:String,default:"fullRow",validator:t=>["fullRow","grid"].includes(t)?!0:(console.error("preset value must be `fullRow` or `grid`, the default value is `fullRow`"),!1)},items:{type:Array,require:!0}},setup(t,{emit:d,expose:c}){const n=e.ref(null),r=e.computed(()=>(t.items??[]).filter(m=>!m.hidden)),s=e.computed(()=>r.value?r.value.reduce((m,a)=>(m[a.key]=a.value.value,m),{}):{}),v=e.computed(()=>({...r.value?.reduce((a,l)=>{let f=l.rule;return l.required&&!l.rule&&(f={required:!0,message:`${l.label}不能为空`,trigger:["blur"]}),a[l.key]=f,a},{}),...t.rules})),y=e.computed(()=>[...r.value].sort((a,l)=>{const f=a.sort??1/0,o=l.sort??1/0;return Number(f)-Number(o)}));function p(m=null){r.value&&r.value.forEach(a=>{a.reset?a.reset(a):a.value.value=m})}function u(){return new Promise((m,a)=>{n.value?.validate(l=>{l?a(l):m(s.value)})})}if(c({reset:p,validator:u,getResult:(m="res")=>m==="ori"?r.value:s.value}),!t.items)throw new Error("prop items must be not null");return()=>e.createVNode("div",{class:"naiDynamicForm"},[e.createVNode(i.NForm,e.mergeProps({ref:n},t.formConfig,{model:s.value,rules:v.value}),{default(){const m=y.value;return t.preset==="grid"?e.h(i.NGrid,{...t.gridConfig},{default:()=>m?.map(a=>e.h(i.NFormItemGridItem,{label:a.label,path:a.path||a.key},{default:S(a)}))}):m?.map(a=>e.h(i.NFormItem,{label:a.label,path:a.path||a.key},{default:S(a)}))}})])}});function S(t){return function(){return t.render2?t.render2(t):null}}function k(t,d={},c){return e.h(i.NInput,{...c,value:t.value,onUpdateValue:n=>{t.value=n,c?.onChange?.(n,c)},...d})}function x(t,d,c={},n){return e.h(i.NSelect,{...n,value:t.value,options:d,onUpdateValue:r=>{t.value=r,n?.onChange?.(r,n,d)},...c})}function F(t,d,c={},n,r){const{value:s,labelField:v,valueField:y,...p}=n,u=v??"label",m=y??"value",a=p.options??d;return e.createVNode(i.NPopselect,{...p,value:t.value,onUpdateValue:l=>{t.value=l,n?.onChange?.(l,n,a)},options:a.map(l=>({...l,label:l[u],value:l[m]})),...c},{default:()=>r??e.createVNode(i.NButton,null,{default:()=>t.value||"请选择"})})}function I(t,d,c={},n){const{valueField:r="value",...s}=n;return e.h(i.NTreeSelect,{...s,value:t.value,options:d,onUpdateValue:v=>{t.value=v,n?.onChange?.(v,n,d)},keyField:r,...c})}function T(t,d,c={},n){return e.h(i.NRadioGroup,{...n,value:t.value,onUpdateValue:r=>{t.value=r,n?.onChange?.(r,n,d)},...c},{default:()=>(n?.options??d).map(s=>{const v=n,y=s[v?.labelField??"label"],p=s[v?.valueField??"value"];return e.h(i.NRadio,{...s,label:y,value:p},{default:()=>s.label})})})}function R(t,d,c={},n){return e.createVNode(i.NRadioGroup,{...n,value:t.value,onUpdateValue:r=>{t.value=r,n?.onChange?.(r,n,d)},...c},{default:()=>(n?.options??d).map(s=>{const v=n,y=s[v?.labelField??"label"],p=s[v?.valueField??"value"];return e.createVNode(i.NRadioButton,{...s,label:y,value:p},{default:()=>s.label})})})}function A(t,d,c={},n){return e.h(i.NCheckboxGroup,{...n,value:t.value,onUpdateValue:r=>{t.value=r,n?.onChange?.(r,n,d)},...c},{default:()=>e.h(i.NSpace,{itemStyle:"display: flex"},{default:()=>(n?.options??d).map(s=>{const v=n,y=s[v?.labelField??"label"],p=s[v?.valueField??"value"];return e.h(i.NCheckbox,{value:p,label:y})})})})}function P(t,d={},c){return e.h(i.NSwitch,{...c,value:t.value,onUpdateValue:n=>{t.value=n,c?.onChange?.(n,c)},...d})}function w(t,d={},c){return e.h(i.NDatePicker,{...c,value:t.value,onUpdateValue:n=>{t.value=n,c?.onChange?.(n,c)},...d})}function B(t,d={},c){return e.h(i.NTimePicker,{...c,value:t.value,onUpdateValue:n=>{t.value=n,c?.onChange?.(n,c)},...d})}function $(t){return e.isRef(t)?t:e.ref(t??null)}function L(t,d=!0){const c={renderInput:r=>k(r.value,r.renderProps??{},r),renderSelect:r=>x(r.value,r.options??[],r.renderProps??{},r),renderPopSelect:r=>F(r.value,r.options??[],r.renderProps??{},r),renderTreeSelect:r=>I(r.value,r.options??[],r.renderProps??{},r),renderRadioGroup:r=>T(r.value,r.options??[],r.renderProps??{},r),renderRadioButtonGroup:r=>R(r.value,r.options??[],r.renderProps??{},r),renderCheckboxGroup:r=>A(r.value,r.options??[],r.renderProps??{},r),renderSwitch:r=>P(r.value,r.renderProps??{},r),renderDatePicker:r=>w(r.value,r.renderProps??{},r),renderTimePicker:r=>B(r.value,r.renderProps??{},r)};return t.map(r=>{const s=r;if(s.value=$(r.value),typeof r.render2=="function")s.render2=r.render2;else if(r.renderType){const v=c[r.renderType];v?s.render2=()=>v(s):console.warn(`[useDecorateForm] unknown renderType: ${r.renderType}`)}else s.render2=()=>c.renderInput(s);return d?e.shallowReactive(s):s})}exports.NaiDynamicCascadeInput=z;exports.NaiDynamicForm=G;exports.NaiDynamicInput=O;exports.renderCheckboxGroup=A;exports.renderDatePicker=w;exports.renderInput=k;exports.renderPopSelect=F;exports.renderRadioButtonGroup=R;exports.renderRadioGroup=T;exports.renderSelect=x;exports.renderSwitch=P;exports.renderTimePicker=B;exports.renderTreeSelect=I;exports.useDecorateForm=L;

package/dist/naiveUi/index.d.ts

@@ -3,6 +3,7 @@ import { default as NaiDynamicCascadeInput } from './NaiDynamicCascadeInput';
 import { default as NaiDynamicForm } from './NaiDynamicForm';
 import { ExposeDyFType, ExposeType } from '../types';
 export * from './hooks/renderForm';
+export * from './hooks/decorateForm';
 export type naiDynamicInputRef = InstanceType<typeof NaiDynamicInput> & ExposeType;
 export type naiDynamicCascadeInputRef = InstanceType<typeof NaiDynamicCascadeInput> & ExposeType;
 export type naiDynamicFormRef = InstanceType<typeof NaiDynamicForm> & ExposeDyFType;

package/dist/naiveUi/index.mjs

@@ -1,7 +1,7 @@
-import { defineComponent as V, ref as R, watch as O, toRaw as S, createVNode as r, createTextVNode as C, Fragment as F, nextTick as $, isVNode as D, computed as I, mergeProps as M, h as p } from "vue";
-import { NInput as N, NButton as b, NForm as U, NGrid as G, NFormItemGridItem as B, NFormItem as H, NSelect as q, NPopselect as _, NTreeSelect as E, NRadioGroup as z, NRadio as K, NRadioButton as J, NCheckboxGroup as Q, NSpace as W, NCheckbox as X, NSwitch as Y, NDatePicker as Z, NTimePicker as ee } from "naive-ui";
-import { t as A, r as j, f as P, p as le, s as te } from "../index-BqKRE4oH.js";
-const oe = /* @__PURE__ */ V({
+import { defineComponent as j, ref as N, watch as z, toRaw as S, createVNode as o, createTextVNode as C, Fragment as F, nextTick as $, isVNode as L, computed as R, mergeProps as G, h as b, shallowReactive as M, isRef as U } from "vue";
+import { NInput as x, NButton as p, NForm as B, NGrid as H, NFormItemGridItem as q, NFormItem as _, NSelect as E, NPopselect as K, NTreeSelect as J, NRadioGroup as w, NRadio as Q, NRadioButton as W, NCheckboxGroup as X, NSpace as Y, NCheckbox as Z, NSwitch as ee, NDatePicker as le, NTimePicker as te } from "naive-ui";
+import { t as A, r as P, f as O, p as ne, s as re } from "../index-BqKRE4oH.js";
+const he = /* @__PURE__ */ j({
   name: "NaiDynamicInput",
   props: {
     size: {
@@ -34,151 +34,151 @@ const oe = /* @__PURE__ */ V({
   emits: {
     "update:modelValue": (e) => !0,
     onReset: () => !0,
-    onMerge: (e, o) => !0
+    onMerge: (e, s) => !0
   },
   setup(e, {
-    emit: o,
+    emit: s,
     expose: d
   }) {
-    const t = {
+    const n = {
       resetTxt: "重置",
       newTxt: "添加项",
       mergeTxt: "合并",
       ...e.btnConfigs
-    }, s = {
+    }, l = {
       hideReset: !1,
       maxHeight: "300px",
       autoScroll: !0,
       allowFilter: !0,
       ...e.configs
-    }, c = {
+    }, i = {
       arraySplitSymbol: ",",
       ...e.dyListConfigs
-    }, y = e.size, i = R(A(e.modelValue, e.randomFun, c.arraySplitSymbol)), m = R(null);
-    return O(i, (u) => {
+    }, y = e.size, c = N(A(e.modelValue, e.randomFun, i.arraySplitSymbol)), m = N(null);
+    return z(c, (a) => {
       if (!e.isController) return;
-      const v = j(u, c.arraySplitSymbol);
-      o("update:modelValue", v), o("onMerge", v, S(i.value));
+      const v = P(a, i.arraySplitSymbol);
+      s("update:modelValue", v), s("onMerge", v, S(c.value));
     }, {
       deep: !0
     }), d({
-      onSet: (u) => {
-        i.value = A(u ?? e.modelValue, e.randomFun, c.arraySplitSymbol);
+      onSet: (a) => {
+        c.value = A(a ?? e.modelValue, e.randomFun, i.arraySplitSymbol);
       },
-      getResult: (u = "res") => u === "ori" ? S(i.value) : j(i.value, c.arraySplitSymbol)
-    }), () => r("div", {
+      getResult: (a = "res") => a === "ori" ? S(c.value) : P(c.value, i.arraySplitSymbol)
+    }), () => o("div", {
       class: e.dyCls ?? `dynamicForm ${y}`
-    }, [r("div", {
-      class: `dyFormList ${i.value.length ? "" : "noList"}`,
+    }, [o("div", {
+      class: `dyFormList ${c.value.length ? "" : "noList"}`,
       ref: m,
       style: {
-        maxHeight: s.maxHeight
+        maxHeight: l.maxHeight
       }
-    }, [i.value.map((u, v, l) => r("div", {
+    }, [c.value.map((a, v, t) => o("div", {
       class: "dItem",
-      key: u.rId
-    }, [r("div", {
+      key: a.rId
+    }, [o("div", {
       class: "input"
-    }, [r(N, {
+    }, [o(x, {
       size: y,
-      value: u.key,
+      value: a.key,
       class: "key",
-      onInput: (a) => {
-        u.key = a;
+      onInput: (r) => {
+        a.key = r;
       }
-    }, null), C(":"), r(N, {
+    }, null), C(":"), o(x, {
       size: y,
-      value: u.value,
+      value: a.value,
       class: "value",
-      onInput: (a) => {
-        s.allowFilter && u.isNumber ? u.value = P(a, u.isArray, c.arraySplitSymbol) : u.value = a;
+      onInput: (r) => {
+        l.allowFilter && a.isNumber ? a.value = O(r, a.isArray, i.arraySplitSymbol) : a.value = r;
       }
     }, {
-      prefix: () => r(F, null, [r(b, {
-        type: u.isArray ? "success" : "default",
+      prefix: () => o(F, null, [o(p, {
+        type: a.isArray ? "success" : "default",
         size: "tiny",
         onClick: () => {
-          u.isArray = !u.isArray;
+          a.isArray = !a.isArray;
         }
       }, {
         default: () => [C("Array")]
-      }), C(" "), r(b, {
-        type: u.isNumber ? "success" : "default",
+      }), C(" "), o(p, {
+        type: a.isNumber ? "success" : "default",
         size: "tiny",
         onClick: () => {
-          u.isNumber = !u.isNumber;
+          a.isNumber = !a.isNumber;
         }
       }, {
         default: () => [C("Number")]
       })])
-    })]), r("div", {
+    })]), o("div", {
       class: "btn"
-    }, [r(b, {
+    }, [o(p, {
       type: "success",
       size: y,
-      disabled: v !== l.length - 1,
+      disabled: v !== t.length - 1,
       onClick: () => {
-        i.value.push({
+        c.value.push({
           rId: e.randomFun(),
           key: "",
           value: ""
-        }), s.autoScroll && $(() => {
-          const a = m.value;
-          a?.scrollTo({
-            top: a.scrollHeight,
+        }), l.autoScroll && $(() => {
+          const r = m.value;
+          r?.scrollTo({
+            top: r.scrollHeight,
             behavior: "smooth"
           });
         });
       }
     }, {
       default: () => [C("+")]
-    }), r(b, {
+    }), o(p, {
       size: y,
       type: "error",
       onClick: () => {
-        i.value = i.value.filter((a) => a.rId !== u.rId);
+        c.value = c.value.filter((r) => r.rId !== a.rId);
       }
     }, {
       default: () => [C("-")]
-    })])]))]), r("div", {
-      class: `control ${i.value.length ? "" : "noList"}`
-    }, [!i.value.length && r(b, {
+    })])]))]), o("div", {
+      class: `control ${c.value.length ? "" : "noList"}`
+    }, [!c.value.length && o(p, {
       size: y,
       type: "success",
       onClick: () => {
-        i.value.push({
+        c.value.push({
           rId: e.randomFun(),
           key: "",
           value: ""
         });
       }
     }, {
-      default: () => [t.newTxt]
-    }), !e.isController && r(F, null, [!s.hideReset && r(b, {
+      default: () => [n.newTxt]
+    }), !e.isController && o(F, null, [!l.hideReset && o(p, {
       size: y,
       type: "default",
       onClick: () => {
-        i.value = A(e.modelValue, e.randomFun, c.arraySplitSymbol), o("onReset");
+        c.value = A(e.modelValue, e.randomFun, i.arraySplitSymbol), s("onReset");
       }
     }, {
-      default: () => [t.resetTxt]
-    }), r(b, {
+      default: () => [n.resetTxt]
+    }), o(p, {
       size: y,
       type: "info",
       onClick: () => {
-        i.value.sort((v, l) => +v.rId - +l.rId);
-        const u = j(i.value, c.arraySplitSymbol);
-        o("update:modelValue", u), o("onMerge", u, S(i.value)), i.value = A(u, e.randomFun, c.arraySplitSymbol);
+        c.value.sort((v, t) => +v.rId - +t.rId);
+        const a = P(c.value, i.arraySplitSymbol);
+        s("update:modelValue", a), s("onMerge", a, S(c.value)), c.value = A(a, e.randomFun, i.arraySplitSymbol);
       }
     }, {
-      default: () => [t.mergeTxt]
+      default: () => [n.mergeTxt]
     })])])]);
   }
 });
 function ae(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !D(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !L(e);
 }
-const se = /* @__PURE__ */ V({
+const ke = /* @__PURE__ */ j({
   name: "NaiveUiDynamicCascadeInput",
   props: {
     modelValue: {
@@ -217,18 +217,18 @@ const se = /* @__PURE__ */ V({
   emits: {
     "update:modelValue": (e) => !0,
     onReset: () => !0,
-    onMerge: (e, o) => !0
+    onMerge: (e, s) => !0
   },
   setup(e, {
-    emit: o,
+    emit: s,
     expose: d
   }) {
-    const t = {
+    const n = {
       resetTxt: "重置",
       newTxt: "添加项",
       mergeTxt: "合并",
       ...e.btnConfigs
-    }, s = {
+    }, l = {
       hideReset: !1,
       maxHeight: "600px",
       allowFilter: !0,
@@ -237,93 +237,93 @@ const se = /* @__PURE__ */ V({
       retractLen: 0,
       borderColors: [],
       ...e.configs
-    }, c = {
+    }, i = {
       arraySplitSymbol: ",",
       ...e.dyListConfigs
-    }, y = (l) => ["string", "number"].includes(l), i = (l) => Object.keys(l).map((a, f) => {
-      let n = l[a];
-      const h = Array.isArray(n), T = h ? n.every((x) => typeof x == "number") : typeof n == "number", k = n === null;
-      return y(typeof n) && (n = l[a]), k && (n = ""), {
+    }, y = (t) => ["string", "number"].includes(t), c = (t) => Object.keys(t).map((r, f) => {
+      let u = t[r];
+      const h = Array.isArray(u), T = h ? u.every((I) => typeof I == "number") : typeof u == "number", k = u === null;
+      return y(typeof u) && (u = t[r]), k && (u = ""), {
         rId: e.randomFun(f),
-        key: a,
-        value: Object.prototype.toString.call(n) === "[object Object]" ? i(l[a]) : h ? n.join(c.arraySplitSymbol) : n,
+        key: r,
+        value: Object.prototype.toString.call(u) === "[object Object]" ? c(t[r]) : h ? u.join(i.arraySplitSymbol) : u,
         isArray: h || void 0,
         isNumber: T || void 0
       };
-    }), m = (l) => l.reduce((a, f) => {
-      const n = f.value;
-      return f.key.trim().length && (a[f.key] = Array.isArray(n) ? m(n) : le(f.value, f.isArray, f.isNumber, c.arraySplitSymbol)), a;
-    }, {}), u = R(i(e.modelValue)), v = (l, a = 1, f) => r("div", {
-      class: [`depth-${a}`, s.showBorder ? "" : "no-border", s.showPad ? "" : "no-pad"],
+    }), m = (t) => t.reduce((r, f) => {
+      const u = f.value;
+      return f.key.trim().length && (r[f.key] = Array.isArray(u) ? m(u) : ne(f.value, f.isArray, f.isNumber, i.arraySplitSymbol)), r;
+    }, {}), a = N(c(e.modelValue)), v = (t, r = 1, f) => o("div", {
+      class: [`depth-${r}`, l.showBorder ? "" : "no-border", l.showPad ? "" : "no-pad"],
       style: {
-        "--depth": a,
-        ["--c" + [a]]: te(s.borderColors, a)
+        "--depth": r,
+        ["--c" + [r]]: re(l.borderColors, r)
       }
-    }, [l.map((n, h, T) => {
-      const k = Array.isArray(n.value), x = y(typeof n.value);
-      return r("div", {
+    }, [t.map((u, h, T) => {
+      const k = Array.isArray(u.value), I = y(typeof u.value);
+      return o("div", {
         class: "dItem",
-        key: n.rId,
+        key: u.rId,
         style: {
-          marginLeft: a > 1 ? `${a * s.retractLen}px` : "0"
+          marginLeft: r > 1 ? `${r * l.retractLen}px` : "0"
         }
-      }, [r("div", {
+      }, [o("div", {
         class: "input"
-      }, [!k && r(F, null, [r(N, {
-        value: n.key,
+      }, [!k && o(F, null, [o(x, {
+        value: u.key,
         class: "key",
-        onInput: (g) => n.key = g
-      }, null), C(":")]), r(N, {
+        onInput: (g) => u.key = g
+      }, null), C(":")]), o(x, {
         class: `value ${k ? "isKey" : ""}`,
-        value: x ? n.value : n.key,
+        value: I ? u.value : u.key,
         onInput: (g) => {
           if (k) {
-            n.key = g;
+            u.key = g;
             return;
           }
-          s.allowFilter && n.isNumber ? n.value = P(g, n.isArray, c.arraySplitSymbol) : n.value = g;
+          l.allowFilter && u.isNumber ? u.value = O(g, u.isArray, i.arraySplitSymbol) : u.value = g;
         }
       }, {
-        prefix: Array.isArray(n.value) ? void 0 : () => r(F, null, [r(b, {
-          type: n.isArray ? "success" : "default",
+        prefix: Array.isArray(u.value) ? void 0 : () => o(F, null, [o(p, {
+          type: u.isArray ? "success" : "default",
           size: "tiny",
           onClick: () => {
-            n.isArray = !n.isArray;
+            u.isArray = !u.isArray;
           }
         }, {
           default: () => [C("Array")]
-        }), C(" "), r(b, {
-          type: n.isNumber ? "success" : "default",
+        }), C(" "), o(p, {
+          type: u.isNumber ? "success" : "default",
           size: "tiny",
           onClick: () => {
-            n.isNumber = !n.isNumber;
+            u.isNumber = !u.isNumber;
           }
         }, {
           default: () => [C("Number")]
         })]),
         suffix: () => {
           let g;
-          return a < e.depth ? !k && r(b, {
+          return r < e.depth ? !k && o(p, {
             type: "success",
             size: "tiny",
             onClick: () => {
-              x && (n.value = [], n.isArray = void 0), n.value.push({
+              I && (u.value = [], u.isArray = void 0), u.value.push({
                 rId: e.randomFun(),
                 key: "",
                 value: ""
               });
             }
-          }, ae(g = e.newChildTxt(n)) ? g : {
+          }, ae(g = e.newChildTxt(u)) ? g : {
             default: () => [g]
           }) : null;
         }
-      })]), r("div", {
+      })]), o("div", {
         class: "btn"
-      }, [r(b, {
+      }, [o(p, {
         type: "success",
         disabled: h !== T.length - 1,
         onClick: () => {
-          l.push({
+          t.push({
             rId: e.randomFun(),
             key: "",
             value: ""
@@ -331,13 +331,13 @@ const se = /* @__PURE__ */ V({
         }
       }, {
         default: () => [C("+")]
-      }), r(b, {
+      }), o(p, {
         type: "error",
         onClick: () => {
-          if (l.splice(h, 1), l.length < 1) {
+          if (t.splice(h, 1), t.length < 1) {
             if (f === void 0) return m([]);
-            const g = u.value.findIndex((L) => L.rId === f?.rId);
-            a < 1 ? u.value.splice(g, 1, {
+            const g = a.value.findIndex((D) => D.rId === f?.rId);
+            r < 1 ? a.value.splice(g, 1, {
               ...f,
               value: ""
             }) : f.value = "";
@@ -345,57 +345,57 @@ const se = /* @__PURE__ */ V({
         }
       }, {
         default: () => [C("-")]
-      })]), Array.isArray(n.value) && v(n.value, a + 1, n)]);
+      })]), Array.isArray(u.value) && v(u.value, r + 1, u)]);
     })]);
-    return O(u, (l) => {
+    return z(a, (t) => {
       if (!e.isController) return;
-      const a = m(l);
-      o("update:modelValue", a), o("onMerge", a, S(u.value));
+      const r = m(t);
+      s("update:modelValue", r), s("onMerge", r, S(a.value));
     }, {
       deep: !0
     }), d({
-      onSet: (l) => {
-        u.value = i(l ?? e.modelValue);
+      onSet: (t) => {
+        a.value = c(t ?? e.modelValue);
       },
-      getResult: (l = "res") => l === "ori" ? S(u.value) : m(u.value)
-    }), () => r("div", {
+      getResult: (t = "res") => t === "ori" ? S(a.value) : m(a.value)
+    }), () => o("div", {
       class: e.dyCls ?? "dynamicCascadeForm"
-    }, [r("div", {
+    }, [o("div", {
       class: "dyFormList",
       style: {
-        maxHeight: s.maxHeight
+        maxHeight: l.maxHeight
       }
-    }, [v(u.value)]), r("div", {
+    }, [v(a.value)]), o("div", {
       class: "control"
-    }, [!u.value.length && r(b, {
+    }, [!a.value.length && o(p, {
       type: "success",
       onClick: () => {
-        u.value.push({
+        a.value.push({
           rId: e.randomFun(),
           key: "",
           value: ""
         });
       }
     }, {
-      default: () => [t.newTxt]
-    }), !e.isController && r(F, null, [!s.hideReset && r(b, {
+      default: () => [n.newTxt]
+    }), !e.isController && o(F, null, [!l.hideReset && o(p, {
       type: "default",
       onClick: () => {
-        u.value = i(e.modelValue), o("onReset");
+        a.value = c(e.modelValue), s("onReset");
       }
     }, {
-      default: () => [t.resetTxt]
-    }), r(b, {
+      default: () => [n.resetTxt]
+    }), o(p, {
       type: "info",
       onClick: () => {
-        const l = m(u.value);
-        o("update:modelValue", l), o("onMerge", l, S(u.value)), u.value = i(l);
+        const t = m(a.value);
+        s("update:modelValue", t), s("onMerge", t, S(a.value)), a.value = c(t);
       }
     }, {
-      default: () => [t.mergeTxt]
+      default: () => [n.mergeTxt]
     })])])]);
   }
-}), ie = /* @__PURE__ */ V({
+}), Se = /* @__PURE__ */ j({
   name: "NaiDynamicForm",
   props: {
     formConfig: {
@@ -427,209 +427,209 @@ const se = /* @__PURE__ */ V({
     }
   },
   setup(e, {
-    emit: o,
+    emit: s,
     expose: d
   }) {
-    const t = R(null), s = I(() => (e.items ?? []).filter((v) => !v.hidden)), c = I(() => s.value ? s.value.reduce((v, l) => (v[l.key] = l.value.value, v), {}) : {}), y = I(() => ({
-      ...s.value?.reduce((l, a) => {
-        let f = a.rule;
-        return a.required && !a.rule && (f = {
+    const n = N(null), l = R(() => (e.items ?? []).filter((v) => !v.hidden)), i = R(() => l.value ? l.value.reduce((v, t) => (v[t.key] = t.value.value, v), {}) : {}), y = R(() => ({
+      ...l.value?.reduce((t, r) => {
+        let f = r.rule;
+        return r.required && !r.rule && (f = {
           required: !0,
-          message: `${a.label}不能为空`,
+          message: `${r.label}不能为空`,
           trigger: ["blur"]
-        }), l[a.key] = f, l;
+        }), t[r.key] = f, t;
       }, {}),
       ...e.rules
-    })), i = I(() => [...s.value].sort((l, a) => {
-      const f = l.sort ?? 1 / 0, n = a.sort ?? 1 / 0;
-      return Number(f) - Number(n);
+    })), c = R(() => [...l.value].sort((t, r) => {
+      const f = t.sort ?? 1 / 0, u = r.sort ?? 1 / 0;
+      return Number(f) - Number(u);
     }));
     function m(v = null) {
-      s.value && s.value.forEach((l) => {
-        l.reset ? l.reset(l) : l.value.value = v;
+      l.value && l.value.forEach((t) => {
+        t.reset ? t.reset(t) : t.value.value = v;
       });
     }
-    function u() {
-      return new Promise((v, l) => {
-        t.value?.validate((a) => {
-          a ? l(a) : v(c.value);
+    function a() {
+      return new Promise((v, t) => {
+        n.value?.validate((r) => {
+          r ? t(r) : v(i.value);
         });
       });
     }
     if (d({
       reset: m,
-      validator: u,
-      getResult: (v = "res") => v === "ori" ? s.value : c.value
+      validator: a,
+      getResult: (v = "res") => v === "ori" ? l.value : i.value
     }), !e.items) throw new Error("prop items must be not null");
-    return () => r("div", {
+    return () => o("div", {
       class: "naiDynamicForm"
-    }, [r(U, M({
-      ref: t
+    }, [o(B, G({
+      ref: n
     }, e.formConfig, {
-      model: c.value,
+      model: i.value,
       rules: y.value
     }), {
       default() {
-        const v = i.value;
-        return e.preset === "grid" ? p(G, {
+        const v = c.value;
+        return e.preset === "grid" ? b(H, {
           ...e.gridConfig
         }, {
-          default: () => v?.map((l) => p(B, {
-            label: l.label,
-            path: l.path || l.key
+          default: () => v?.map((t) => b(q, {
+            label: t.label,
+            path: t.path || t.key
           }, {
-            default: w(l)
+            default: V(t)
           }))
-        }) : v?.map((l) => p(H, {
-          label: l.label,
-          path: l.path || l.key
+        }) : v?.map((t) => b(_, {
+          label: t.label,
+          path: t.path || t.key
         }, {
-          default: w(l)
+          default: V(t)
         }));
       }
     })]);
   }
 });
-function w(e) {
+function V(e) {
   return function() {
     return e.render2 ? e.render2(e) : null;
   };
 }
-function de(e, o = {}, d) {
-  return p(N, {
+function ue(e, s = {}, d) {
+  return b(x, {
     ...d,
     value: e.value,
-    onUpdateValue: (t) => {
-      e.value = t, d?.onChange?.(t, d);
+    onUpdateValue: (n) => {
+      e.value = n, d?.onChange?.(n, d);
     },
-    ...o
+    ...s
   });
 }
-function ce(e, o, d = {}, t) {
-  return p(q, {
-    ...t,
+function oe(e, s, d = {}, n) {
+  return b(E, {
+    ...n,
     value: e.value,
-    options: o,
-    onUpdateValue: (s) => {
-      e.value = s, t?.onChange?.(s, t, o);
+    options: s,
+    onUpdateValue: (l) => {
+      e.value = l, n?.onChange?.(l, n, s);
     },
     ...d
   });
 }
-function ye(e, o, d = {}, t, s) {
-  const { value: c, labelField: y, valueField: i, ...m } = t, u = y ?? "label", v = i ?? "value", l = m.options ?? o;
-  return r(
-    _,
+function se(e, s, d = {}, n, l) {
+  const { value: i, labelField: y, valueField: c, ...m } = n, a = y ?? "label", v = c ?? "value", t = m.options ?? s;
+  return o(
+    K,
     {
       ...m,
       value: e.value,
-      onUpdateValue: (a) => {
-        e.value = a, t?.onChange?.(a, t, l);
+      onUpdateValue: (r) => {
+        e.value = r, n?.onChange?.(r, n, t);
       },
-      options: l.map((a) => ({ ...a, label: a[u], value: a[v] })),
+      options: t.map((r) => ({ ...r, label: r[a], value: r[v] })),
       ...d
     },
     {
-      default: () => s ?? r(b, null, {
+      default: () => l ?? o(p, null, {
         default: () => e.value || "请选择"
       })
     }
   );
 }
-function ve(e, o, d = {}, t) {
-  const { valueField: s = "value", ...c } = t;
-  return p(E, {
-    ...c,
+function ie(e, s, d = {}, n) {
+  const { valueField: l = "value", ...i } = n;
+  return b(J, {
+    ...i,
     value: e.value,
-    options: o,
+    options: s,
     onUpdateValue: (y) => {
-      e.value = y, t?.onChange?.(y, t, o);
+      e.value = y, n?.onChange?.(y, n, s);
     },
-    keyField: s,
+    keyField: l,
     ...d
   });
 }
-function me(e, o, d = {}, t) {
-  return p(
-    z,
+function de(e, s, d = {}, n) {
+  return b(
+    w,
     {
-      ...t,
+      ...n,
       value: e.value,
-      onUpdateValue: (s) => {
-        e.value = s, t?.onChange?.(s, t, o);
+      onUpdateValue: (l) => {
+        e.value = l, n?.onChange?.(l, n, s);
       },
       ...d
     },
     {
-      default: () => (t?.options ?? o).map((c) => {
-        const y = t, i = c[y?.labelField ?? "label"], m = c[y?.valueField ?? "value"];
-        return p(
-          K,
+      default: () => (n?.options ?? s).map((i) => {
+        const y = n, c = i[y?.labelField ?? "label"], m = i[y?.valueField ?? "value"];
+        return b(
+          Q,
           {
-            ...c,
-            label: i,
+            ...i,
+            label: c,
             value: m
           },
           {
-            default: () => c.label
+            default: () => i.label
           }
         );
       })
     }
   );
 }
-function fe(e, o, d = {}, t) {
-  return r(
-    z,
+function ce(e, s, d = {}, n) {
+  return o(
+    w,
     {
-      ...t,
+      ...n,
       value: e.value,
-      onUpdateValue: (s) => {
-        e.value = s, t?.onChange?.(s, t, o);
+      onUpdateValue: (l) => {
+        e.value = l, n?.onChange?.(l, n, s);
       },
       ...d
     },
     {
-      default: () => (t?.options ?? o).map((c) => {
-        const y = t, i = c[y?.labelField ?? "label"], m = c[y?.valueField ?? "value"];
-        return r(
-          J,
+      default: () => (n?.options ?? s).map((i) => {
+        const y = n, c = i[y?.labelField ?? "label"], m = i[y?.valueField ?? "value"];
+        return o(
+          W,
           {
-            ...c,
-            label: i,
+            ...i,
+            label: c,
             value: m
           },
           {
-            default: () => c.label
+            default: () => i.label
           }
         );
       })
     }
   );
 }
-function be(e, o, d = {}, t) {
-  return p(
-    Q,
+function ye(e, s, d = {}, n) {
+  return b(
+    X,
     {
-      ...t,
+      ...n,
       value: e.value,
-      onUpdateValue: (s) => {
-        e.value = s, t?.onChange?.(s, t, o);
+      onUpdateValue: (l) => {
+        e.value = l, n?.onChange?.(l, n, s);
       },
       ...d
     },
     {
-      default: () => p(
-        W,
+      default: () => b(
+        Y,
         {
           itemStyle: "display: flex"
         },
         {
-          default: () => (t?.options ?? o).map((c) => {
-            const y = t, i = c[y?.labelField ?? "label"], m = c[y?.valueField ?? "value"];
-            return p(X, {
+          default: () => (n?.options ?? s).map((i) => {
+            const y = n, c = i[y?.labelField ?? "label"], m = i[y?.valueField ?? "value"];
+            return b(Z, {
               value: m,
-              label: i
+              label: c
             });
           })
         }
@@ -637,48 +637,77 @@ function be(e, o, d = {}, t) {
     }
   );
 }
-function pe(e, o = {}, d) {
-  return p(Y, {
+function ve(e, s = {}, d) {
+  return b(ee, {
     ...d,
     value: e.value,
-    onUpdateValue: (t) => {
-      e.value = t, d?.onChange?.(t, d);
+    onUpdateValue: (n) => {
+      e.value = n, d?.onChange?.(n, d);
     },
-    ...o
+    ...s
   });
 }
-function ge(e, o = {}, d) {
-  return p(Z, {
+function me(e, s = {}, d) {
+  return b(le, {
     ...d,
     value: e.value,
-    onUpdateValue: (t) => {
-      e.value = t, d?.onChange?.(t, d);
+    onUpdateValue: (n) => {
+      e.value = n, d?.onChange?.(n, d);
     },
-    ...o
+    ...s
   });
 }
-function Ce(e, o = {}, d) {
-  return p(ee, {
+function fe(e, s = {}, d) {
+  return b(te, {
     ...d,
     value: e.value,
-    onUpdateValue: (t) => {
-      e.value = t, d?.onChange?.(t, d);
+    onUpdateValue: (n) => {
+      e.value = n, d?.onChange?.(n, d);
     },
-    ...o
+    ...s
+  });
+}
+function pe(e) {
+  return U(e) ? e : N(e ?? null);
+}
+function Fe(e, s = !0) {
+  const d = {
+    renderInput: (l) => ue(l.value, l.renderProps ?? {}, l),
+    renderSelect: (l) => oe(l.value, l.options ?? [], l.renderProps ?? {}, l),
+    renderPopSelect: (l) => se(l.value, l.options ?? [], l.renderProps ?? {}, l),
+    renderTreeSelect: (l) => ie(l.value, l.options ?? [], l.renderProps ?? {}, l),
+    renderRadioGroup: (l) => de(l.value, l.options ?? [], l.renderProps ?? {}, l),
+    renderRadioButtonGroup: (l) => ce(l.value, l.options ?? [], l.renderProps ?? {}, l),
+    renderCheckboxGroup: (l) => ye(l.value, l.options ?? [], l.renderProps ?? {}, l),
+    renderSwitch: (l) => ve(l.value, l.renderProps ?? {}, l),
+    renderDatePicker: (l) => me(l.value, l.renderProps ?? {}, l),
+    renderTimePicker: (l) => fe(l.value, l.renderProps ?? {}, l)
+  };
+  return e.map((l) => {
+    const i = l;
+    if (i.value = pe(l.value), typeof l.render2 == "function")
+      i.render2 = l.render2;
+    else if (l.renderType) {
+      const y = d[l.renderType];
+      y ? i.render2 = () => y(i) : console.warn(`[useDecorateForm] unknown renderType: ${l.renderType}`);
+    } else
+      i.render2 = () => d.renderInput(i);
+    return s ? M(i) : i;
   });
 }
 export {
-  se as NaiDynamicCascadeInput,
-  ie as NaiDynamicForm,
-  oe as NaiDynamicInput,
-  be as renderCheckboxGroup,
-  ge as renderDatePicker,
-  de as renderInput,
-  ye as renderPopSelect,
-  fe as renderRadioButtonGroup,
-  me as renderRadioGroup,
-  ce as renderSelect,
-  pe as renderSwitch,
-  Ce as renderTimePicker,
-  ve as renderTreeSelect
+  ke as NaiDynamicCascadeInput,
+  Se as NaiDynamicForm,
+  he as NaiDynamicInput,
+  ye as renderCheckboxGroup,
+  me as renderDatePicker,
+  ue as renderInput,
+  se as renderPopSelect,
+  ce as renderRadioButtonGroup,
+  de as renderRadioGroup,
+  oe as renderSelect,
+  ve as renderSwitch,
+  fe as renderTimePicker,
+  ie as renderTreeSelect,
+  Fe as useDecorateForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamicformdjx",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "author": "xczcdjx",
   "license": "MIT",