dynamicformdjx 0.3.4 → 0.3.5

package/README.md

@@ -53,13 +53,16 @@ pnpm add dynamicformdjx
   import {ref} from "vue";
   import {NButton} from "naive-ui";
   import {useDyForm, useReactiveForm} from "dynamicformdjx";
-  import {type naiDynamicFormRef, NaiDynamicForm, renderInput} from "dynamicformdjx/naiveUi";
+  import {type naiDynamicFormRef, NaiDynamicForm, renderInput, renderRadioGroup} from "dynamicformdjx/naiveUi";
+  import type {PresetType} from "dynamicformdjx/types/index";
 
   type FormRow = {
     username: string
     password: string
+    preset: PresetType
   }
   const naiDynamicFormRef = ref<naiDynamicFormRef | null>(null)
+  const presetType = ref<PresetType>('fullRow')
   const formItems = useReactiveForm<FormRow>([
     {
       key: "username",
@@ -69,6 +72,7 @@ pnpm add dynamicformdjx
       placeholder: '请输入姓名',
       required: true, // 是否必填 (简化rules规则)
       render2: f => renderInput(f.value, {}, f),
+      span: 6
     },
     {
       key: "password",
@@ -79,7 +83,22 @@ pnpm add dynamicformdjx
       required: true,
       placeholder: '请输入密码',
       render2: f => renderInput(f.value, {showPasswordOn: 'click'}, f),
-    }
+      span: 6,
+      requiredHint:l=>`${l} is not empty`
+    },
+    {
+      key: "preset",
+      label: "表格预设",
+      value: ref<PresetType | null>(presetType.value),
+      render2: f => renderRadioGroup(f.value, [
+        {label: '整行', value: 'fullRow'},
+        {label: '表格', value: 'grid'},
+      ], {name: 'preset'}, f),
+      onChange: (v) => {
+        console.log(v)
+        presetType.value = v
+      }
+    },
   ])
   const useForm = useDyForm<FormRow>(formItems)
   const getData = () => {
@@ -89,7 +108,7 @@ pnpm add dynamicformdjx
   }
   const resetData = () => {
     // useForm.onReset() // 或
-    naiDynamicFormRef.value?.reset()
+    naiDynamicFormRef.value?.reset?.()
   }
   const setData = () => {
     // 隐藏username
@@ -113,16 +132,26 @@ pnpm add dynamicformdjx
 </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>
+  <NaiDynamicForm :items="formItems" ref="naiDynamicFormRef" :preset="presetType">
+    <template #header>
+      <h3>基本表单</h3>
+    </template>
+    <template #footer>
+      <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>
+  </NaiDynamicForm>
 </template>
 
 <style scoped>
+  h3{
+    text-align: center;
+    margin:0 0 10px 0;
+  }
   .control {
     display: flex;
     gap: 5px;

package/dist/index.css

@@ -1 +1 @@
-.dynamicForm{overflow:hidden}.dynamicForm.small .dyFormList{gap:6px}.dynamicForm.small .dyFormList .typeBtn{padding:.2em .6em;height:18px}.dynamicForm.small .dyFormList>.dItem .input .key{font-size:.7em}.dynamicForm.small .dyFormList>.dItem .input .vInput{padding:.15em .4em}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot>button{padding:.1em .4em;font-size:.8em}.dynamicForm.small .dyFormList>.dItem .btn .bt{padding:.3em .8em}.dynamicForm.large .dyFormList{gap:15px}.dynamicForm.large .dyFormList .dItem{column-gap:20px}.dynamicForm.large .dyFormList .dItem .input .key{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput{padding:.5em .4em}.dynamicForm.large .dyFormList .dItem .input .vInput input{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.large .dyFormList .dItem .input .vInput .slot>button{padding:.15em .4em;font-size:1em}.dynamicForm.large .dyFormList .dItem .btn .bt{padding:.8em 1.2em}.dynamicForm .dyFormList{overflow:auto;display:grid;gap:10px;padding:0 5px 10px}.dynamicForm .dyFormList.noList{padding:0}.dynamicForm .dyFormList .dItem{width:100%;display:grid;grid-template-columns:1fr 100px;column-gap:0}.dynamicForm .dyFormList .dItem .input{display:flex;justify-content:flex-start;align-items:center;column-gap:15px}.dynamicForm .dyFormList .dItem .input .key{text-align:center;width:150px}.dynamicForm .dyFormList .dItem .input .key.nativeInput{border:1px solid #d2d6dd;padding:.5em .4em;border-radius:3px}.dynamicForm .dyFormList .dItem .input .key.nativeInput:focus{outline:none;box-shadow:0 0 5px #007bff4d}.dynamicForm .dyFormList .dItem .input .vInput{width:100%;border:1px solid #d2d6dd;padding:.2em .4em;border-radius:3px;display:flex;column-gap:5px}.dynamicForm .dyFormList .dItem .input .vInput>.value{border:none;width:100%}.dynamicForm .dyFormList .dItem .input .vInput>.value.nativeV{letter-spacing:3px}.dynamicForm .dyFormList .dItem .input .vInput>.value.nativeV:focus{outline:none}.dynamicForm .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicForm .dyFormList .dItem .input .vInput .slot>button{font-weight:400;border-radius:3px;font-size:.8em}.dynamicForm .dyFormList .dItem .btn{display:flex;justify-content:flex-end;align-items:center;column-gap:8px}.dynamicForm .dyFormList .dItem .btn .n-button{font-size:25px;padding:10px 12px}.dynamicForm .dyFormList .dItem .btn .el-button+.el-button{margin-left:0}.dynamicForm .dyFormList .dItem .btn .bt{padding:.5em 1em}.dynamicForm .key .el-input__inner,.dynamicForm .isKey .el-input__inner{text-align:center}.dynamicForm .control{display:flex;justify-content:center;align-items:center;margin-top:5px;column-gap:10px}.dynamicForm .control.noList{margin-top:0}.dynamicForm .bt{color:#fff;border-radius:5px;border:1px solid transparent;padding:.3em .8em;font-size:.9em;font-weight:600;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:.25s;opacity:.9}.dynamicForm .bt:hover{opacity:1}.dynamicForm .bt:disabled{opacity:.35;cursor:not-allowed}.dynamicForm .default{background:#fff;color:#000;border:1px solid #d2d6dd}.dynamicForm .info{background:#8a8e94}.dynamicForm .success{background:#63ba39}.dynamicForm .danger{background:#ea696a}.dynamicCascadeForm{overflow:hidden}.dynamicCascadeForm.small .dyFormList{gap:6px}.dynamicCascadeForm.small .dyFormList .typeBtn{padding:.2em .6em;height:18px}.dynamicCascadeForm.small .dyFormList>.dItem .input .key{font-size:.7em}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput{padding:.15em .4em}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput .slot>button{padding:.1em .4em;font-size:.8em}.dynamicCascadeForm.small .dyFormList>.dItem .btn .bt{padding:.3em .8em}.dynamicCascadeForm.large .dyFormList{gap:15px}.dynamicCascadeForm.large .dyFormList .dItem{column-gap:20px}.dynamicCascadeForm.large .dyFormList .dItem .input .key{font-size:1.2em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput{padding:.5em .4em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput input{font-size:1.2em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput .slot>button{padding:.15em .4em;font-size:1em}.dynamicCascadeForm.large .dyFormList .dItem .btn .bt{padding:.8em 1.2em}.dynamicCascadeForm .dyFormList{overflow:auto;display:grid;gap:10px;padding:0 5px 10px}.dynamicCascadeForm .dyFormList.noList{padding:0}.dynamicCascadeForm .dyFormList .dItem{width:100%;display:grid;grid-template-columns:1fr 100px;column-gap:0}.dynamicCascadeForm .dyFormList .dItem .input{display:flex;justify-content:flex-start;align-items:center;column-gap:15px}.dynamicCascadeForm .dyFormList .dItem .input .key{text-align:center;width:150px}.dynamicCascadeForm .dyFormList .dItem .input .key.nativeInput{border:1px solid #d2d6dd;padding:.5em .4em;border-radius:3px}.dynamicCascadeForm .dyFormList .dItem .input .key.nativeInput:focus{outline:none;box-shadow:0 0 5px #007bff4d}.dynamicCascadeForm .dyFormList .dItem .input .vInput{width:100%;border:1px solid #d2d6dd;padding:.2em .4em;border-radius:3px;display:flex;column-gap:5px}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value{border:none;width:100%}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value.nativeV{letter-spacing:3px}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value.nativeV:focus{outline:none}.dynamicCascadeForm .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm .dyFormList .dItem .input .vInput .slot>button{font-weight:400;border-radius:3px;font-size:.8em}.dynamicCascadeForm .dyFormList .dItem .btn{display:flex;justify-content:flex-end;align-items:center;column-gap:8px}.dynamicCascadeForm .dyFormList .dItem .btn .n-button{font-size:25px;padding:10px 12px}.dynamicCascadeForm .dyFormList .dItem .btn .el-button+.el-button{margin-left:0}.dynamicCascadeForm .dyFormList .dItem .btn .bt{padding:.5em 1em}.dynamicCascadeForm .key .el-input__inner,.dynamicCascadeForm .isKey .el-input__inner{text-align:center}.dynamicCascadeForm .control{display:flex;justify-content:center;align-items:center;margin-top:5px;column-gap:10px}.dynamicCascadeForm .control.noList{margin-top:0}.dynamicCascadeForm .bt{color:#fff;border-radius:5px;border:1px solid transparent;padding:.3em .8em;font-size:.9em;font-weight:600;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:.25s;opacity:.9}.dynamicCascadeForm .bt:hover{opacity:1}.dynamicCascadeForm .bt:disabled{opacity:.35;cursor:not-allowed}.dynamicCascadeForm .default{background:#fff;color:#000;border:1px solid #d2d6dd}.dynamicCascadeForm .info{background:#8a8e94}.dynamicCascadeForm .success{background:#63ba39}.dynamicCascadeForm .danger{background:#ea696a}.dynamicCascadeForm .dyFormList .dItem{width:inherit}.dynamicCascadeForm .dyFormList .dItem .vInput .surSlot{white-space:nowrap}.dynamicCascadeForm .dyFormList .dItem .vInput .surSlot>button{padding:.1em .4em;font-size:.8em}.dynamicCascadeForm .dyFormList .dItem .input .value.isKey{text-align:center}.dynamicCascadeForm .dyFormList .dItem .input .value.isKey input{font-weight:700}.dynamicCascadeForm .dyFormList>.depth-1{display:grid;border:1px solid var(--c1);border-style:dashed;border-radius:5px}.dynamicCascadeForm .dyFormList>.depth-1>.dItem{padding:5px}.dynamicCascadeForm .dyFormList>.depth-1 .dItem+.dItem{margin-top:5px}.dynamicCascadeForm .dyFormList>.depth-1.no-pad>.dItem{padding:0}.dynamicCascadeForm .dyFormList .depth-1 .depth-2{border:1px solid var(--c2);border-style:dashed;padding:8px;border-radius:5px;margin-top:10px;row-gap:-3px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .dItem .btn .n-button{transform:scale(.84)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3{border:1px solid var(--c3);border-style:dashed;padding:7px;border-radius:5px;margin-top:9px;row-gap:-5px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .dItem .btn .n-button{transform:scale(.76)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4{border:1px solid var(--c4);border-style:dashed;padding:6px;border-radius:5px;margin-top:8px;row-gap:-7px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .dItem .btn .n-button{transform:scale(.68)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .depth-5{border:1px solid var(--c5);border-style:dashed;padding:5px;border-radius:5px;margin-top:7px;row-gap:-9px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .depth-5 .dItem .btn .n-button{transform:scale(.6)}.dynamicCascadeForm .dyFormList .no-border{border:none!important}.dynamicCascadeForm .dyFormList .no-pad{padding:0!important}.naiDynamicForm .cls-required{margin-left:5px;color:red}@media(max-width:756px){.dynamicForm .dyFormList .dItem .input .key{width:50px}.dynamicForm .dyFormList .dItem .input .value{width:calc(100% - 60px)}}
+.dynamicForm{overflow:hidden}.dynamicForm.small .dyFormList{gap:6px}.dynamicForm.small .dyFormList .typeBtn{padding:.2em .6em;height:18px}.dynamicForm.small .dyFormList>.dItem .input .key{font-size:.7em}.dynamicForm.small .dyFormList>.dItem .input .vInput{padding:.15em .4em}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot>button{padding:.1em .4em;font-size:.8em}.dynamicForm.small .dyFormList>.dItem .btn .bt{padding:.3em .8em}.dynamicForm.large .dyFormList{gap:15px}.dynamicForm.large .dyFormList .dItem{column-gap:20px}.dynamicForm.large .dyFormList .dItem .input .key{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput{padding:.5em .4em}.dynamicForm.large .dyFormList .dItem .input .vInput input{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.large .dyFormList .dItem .input .vInput .slot>button{padding:.15em .4em;font-size:1em}.dynamicForm.large .dyFormList .dItem .btn .bt{padding:.8em 1.2em}.dynamicForm .dyFormList{overflow:auto;display:grid;gap:10px;padding:0 5px 10px}.dynamicForm .dyFormList.noList{padding:0}.dynamicForm .dyFormList .dItem{width:100%;display:grid;grid-template-columns:1fr 100px;column-gap:0}.dynamicForm .dyFormList .dItem .input{display:flex;justify-content:flex-start;align-items:center;column-gap:15px}.dynamicForm .dyFormList .dItem .input .key{text-align:center;width:150px}.dynamicForm .dyFormList .dItem .input .key.nativeInput{border:1px solid #d2d6dd;padding:.5em .4em;border-radius:3px}.dynamicForm .dyFormList .dItem .input .key.nativeInput:focus{outline:none;box-shadow:0 0 5px #007bff4d}.dynamicForm .dyFormList .dItem .input .vInput{width:100%;border:1px solid #d2d6dd;padding:.2em .4em;border-radius:3px;display:flex;column-gap:5px}.dynamicForm .dyFormList .dItem .input .vInput>.value{border:none;width:100%}.dynamicForm .dyFormList .dItem .input .vInput>.value.nativeV{letter-spacing:3px}.dynamicForm .dyFormList .dItem .input .vInput>.value.nativeV:focus{outline:none}.dynamicForm .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicForm .dyFormList .dItem .input .vInput .slot>button{font-weight:400;border-radius:3px;font-size:.8em}.dynamicForm .dyFormList .dItem .btn{display:flex;justify-content:flex-end;align-items:center;column-gap:8px}.dynamicForm .dyFormList .dItem .btn .n-button{font-size:25px;padding:10px 12px}.dynamicForm .dyFormList .dItem .btn .el-button+.el-button{margin-left:0}.dynamicForm .dyFormList .dItem .btn .bt{padding:.5em 1em}.dynamicForm .key .el-input__inner,.dynamicForm .isKey .el-input__inner{text-align:center}.dynamicForm .control{display:flex;justify-content:center;align-items:center;margin-top:5px;column-gap:10px}.dynamicForm .control.noList{margin-top:0}.dynamicForm .bt{color:#fff;border-radius:5px;border:1px solid transparent;padding:.3em .8em;font-size:.9em;font-weight:600;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:.25s;opacity:.9}.dynamicForm .bt:hover{opacity:1}.dynamicForm .bt:disabled{opacity:.35;cursor:not-allowed}.dynamicForm .default{background:#fff;color:#000;border:1px solid #d2d6dd}.dynamicForm .info{background:#8a8e94}.dynamicForm .success{background:#63ba39}.dynamicForm .danger{background:#ea696a}.dynamicCascadeForm{overflow:hidden}.dynamicCascadeForm.small .dyFormList{gap:6px}.dynamicCascadeForm.small .dyFormList .typeBtn{padding:.2em .6em;height:18px}.dynamicCascadeForm.small .dyFormList>.dItem .input .key{font-size:.7em}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput{padding:.15em .4em}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput .slot>button{padding:.1em .4em;font-size:.8em}.dynamicCascadeForm.small .dyFormList>.dItem .btn .bt{padding:.3em .8em}.dynamicCascadeForm.large .dyFormList{gap:15px}.dynamicCascadeForm.large .dyFormList .dItem{column-gap:20px}.dynamicCascadeForm.large .dyFormList .dItem .input .key{font-size:1.2em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput{padding:.5em .4em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput input{font-size:1.2em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput .slot>button{padding:.15em .4em;font-size:1em}.dynamicCascadeForm.large .dyFormList .dItem .btn .bt{padding:.8em 1.2em}.dynamicCascadeForm .dyFormList{overflow:auto;display:grid;gap:10px;padding:0 5px 10px}.dynamicCascadeForm .dyFormList.noList{padding:0}.dynamicCascadeForm .dyFormList .dItem{width:100%;display:grid;grid-template-columns:1fr 100px;column-gap:0}.dynamicCascadeForm .dyFormList .dItem .input{display:flex;justify-content:flex-start;align-items:center;column-gap:15px}.dynamicCascadeForm .dyFormList .dItem .input .key{text-align:center;width:150px}.dynamicCascadeForm .dyFormList .dItem .input .key.nativeInput{border:1px solid #d2d6dd;padding:.5em .4em;border-radius:3px}.dynamicCascadeForm .dyFormList .dItem .input .key.nativeInput:focus{outline:none;box-shadow:0 0 5px #007bff4d}.dynamicCascadeForm .dyFormList .dItem .input .vInput{width:100%;border:1px solid #d2d6dd;padding:.2em .4em;border-radius:3px;display:flex;column-gap:5px}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value{border:none;width:100%}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value.nativeV{letter-spacing:3px}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value.nativeV:focus{outline:none}.dynamicCascadeForm .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm .dyFormList .dItem .input .vInput .slot>button{font-weight:400;border-radius:3px;font-size:.8em}.dynamicCascadeForm .dyFormList .dItem .btn{display:flex;justify-content:flex-end;align-items:center;column-gap:8px}.dynamicCascadeForm .dyFormList .dItem .btn .n-button{font-size:25px;padding:10px 12px}.dynamicCascadeForm .dyFormList .dItem .btn .el-button+.el-button{margin-left:0}.dynamicCascadeForm .dyFormList .dItem .btn .bt{padding:.5em 1em}.dynamicCascadeForm .key .el-input__inner,.dynamicCascadeForm .isKey .el-input__inner{text-align:center}.dynamicCascadeForm .control{display:flex;justify-content:center;align-items:center;margin-top:5px;column-gap:10px}.dynamicCascadeForm .control.noList{margin-top:0}.dynamicCascadeForm .bt{color:#fff;border-radius:5px;border:1px solid transparent;padding:.3em .8em;font-size:.9em;font-weight:600;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:.25s;opacity:.9}.dynamicCascadeForm .bt:hover{opacity:1}.dynamicCascadeForm .bt:disabled{opacity:.35;cursor:not-allowed}.dynamicCascadeForm .default{background:#fff;color:#000;border:1px solid #d2d6dd}.dynamicCascadeForm .info{background:#8a8e94}.dynamicCascadeForm .success{background:#63ba39}.dynamicCascadeForm .danger{background:#ea696a}.dynamicCascadeForm .dyFormList .dItem{width:inherit}.dynamicCascadeForm .dyFormList .dItem .vInput .surSlot{white-space:nowrap}.dynamicCascadeForm .dyFormList .dItem .vInput .surSlot>button{padding:.1em .4em;font-size:.8em}.dynamicCascadeForm .dyFormList .dItem .input .value.isKey{text-align:center}.dynamicCascadeForm .dyFormList .dItem .input .value.isKey input{font-weight:700}.dynamicCascadeForm .dyFormList>.depth-1{display:grid;border:1px solid var(--c1);border-style:dashed;border-radius:5px}.dynamicCascadeForm .dyFormList>.depth-1>.dItem{padding:5px}.dynamicCascadeForm .dyFormList>.depth-1 .dItem+.dItem{margin-top:5px}.dynamicCascadeForm .dyFormList>.depth-1.no-pad>.dItem{padding:0}.dynamicCascadeForm .dyFormList .depth-1 .depth-2{border:1px solid var(--c2);border-style:dashed;padding:8px;border-radius:5px;margin-top:10px;row-gap:-3px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .dItem .btn .n-button{transform:scale(.84)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3{border:1px solid var(--c3);border-style:dashed;padding:7px;border-radius:5px;margin-top:9px;row-gap:-5px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .dItem .btn .n-button{transform:scale(.76)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4{border:1px solid var(--c4);border-style:dashed;padding:6px;border-radius:5px;margin-top:8px;row-gap:-7px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .dItem .btn .n-button{transform:scale(.68)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .depth-5{border:1px solid var(--c5);border-style:dashed;padding:5px;border-radius:5px;margin-top:7px;row-gap:-9px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .depth-5 .dItem .btn .n-button{transform:scale(.6)}.dynamicCascadeForm .dyFormList .no-border{border:none!important}.dynamicCascadeForm .dyFormList .no-pad{padding:0!important}.naiDynamicForm .cls-required{margin-left:5px;color:red}.naiDynamicForm .header{margin-bottom:5px}.naiDynamicForm .footer{margin-top:5px}@media(max-width:756px){.dynamicForm .dyFormList .dItem .input .key{width:50px}.dynamicForm .dyFormList .dItem .input .value{width:calc(100% - 60px)}}

package/dist/naiveUi/NaiDynamicForm.d.ts

@@ -1,7 +1,8 @@
-import { PropType } from 'vue';
+import { PropType, SlotsType } from 'vue';
 import { FormProps, GridProps } from 'naive-ui';
 import { DyFormItem } from '../types/form';
 import { FormRules } from 'naive-ui/es/form/src/interface';
+import { DynamicFormSlots, PresetType } from '../types';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     formConfig: {
         type: PropType<FormProps>;
@@ -22,7 +23,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<FormRules>;
     };
     preset: {
-        type: PropType<"fullRow" | "grid">;
+        type: PropType<PresetType>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -50,7 +51,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<FormRules>;
     };
     preset: {
-        type: PropType<"fullRow" | "grid">;
+        type: PropType<PresetType>;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -61,6 +62,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{}>, {
     formConfig: FormProps;
     gridConfig: GridProps;
-    preset: "fullRow" | "grid";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    preset: PresetType;
+}, SlotsType<DynamicFormSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/naiveUi/index.cjs

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

package/dist/naiveUi/index.mjs

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

package/dist/types/form.d.ts

@@ -20,9 +20,9 @@ export interface DyFormItem<K = any, RuleT = any> extends BaseDyFormItem<K> {
     path?: string;
     hidden?: boolean;
     render2?: (formItem: DyFormItem) => VNode;
-    reset?: (formItem: DyFormItem) => void;
     rule?: RuleT;
     required?: boolean;
+    requiredHint?: (label: string) => string;
     disabled?: Ref<boolean> | boolean;
     clearable?: boolean;
     type?: "text" | "textarea" | "password";

package/dist/types/index.d.ts

@@ -1,4 +1,6 @@
 import { DyFormItem } from './form.ts';
+import { VNode } from 'vue';
+export * from './form.ts';
 export type DyCFormItem = {
     rId: string;
     key: string;
@@ -36,8 +38,13 @@ export type ExposeType = {
     onSet?: (obj?: object) => void;
     getResult?: (t?: 'res' | 'ori') => DyCFormItem[] | object;
 };
+export type PresetType = 'fullRow' | 'grid';
 export type ExposeDyFType = {
     reset?: (v?: any) => void;
     validator: () => Promise<object>;
     getResult?: (t?: 'res' | 'ori') => DyFormItem[] | object;
 };
+export interface DynamicFormSlots {
+    header?: () => VNode[];
+    footer?: () => VNode[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamicformdjx",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "author": "xczcdjx",
   "license": "MIT",
@@ -22,6 +22,9 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./types/*": {
+      "types": "./dist/types/*.d.ts"
+    },
     "./naiveUi": {
       "types": "./dist/naiveUi/index.d.ts",
       "import": "./dist/naiveUi/index.mjs",