dynamicformdjx 0.3.4 → 0.4.0

package/README.md

@@ -45,21 +45,24 @@ yarn add dynamicformdjx
 pnpm add dynamicformdjx
 ```
 ###  动态表单 (**新**)
-> (该表单依赖于naive ui,请配合一起使用)
-
-#### 1.简单表单
+> (该表单依赖于naive ui或element plus,请配合一起使用)
+#### 与Naive ui配合
+##### 1.简单表单
 ```vue
 <script setup lang="ts">
   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: 8,
+      offset: 2,
+      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) => {
+        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,23 +132,33 @@ 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>与Naive ui结合简单表单</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;
   }
 </style>
 ```
-#### 2.自定义表单 
+##### 2.自定义表单 
 > (所有render2函数使用自定义)
 ##### InputTest.vue
 ```vue
@@ -186,7 +215,7 @@ const formItems = useReactiveForm<FormRow, FormRules | FormItemRule>([
     label: "描述",
     value: ref<string | null>(null),
     clearable: true,
-    placeholder: '请输入姓名',
+    placeholder: '请输入描述',
     required: true,
     type: 'textarea',
     render2: f => h(InputTest, {
@@ -262,7 +291,7 @@ const validatorData = () => {
 }
 </style>
 ```
-#### 3.装饰表单
+##### 3.装饰表单
 > (可省略render2函数)
 ```vue
 <script setup lang="ts">
@@ -347,6 +376,110 @@ const validatorData = () => {
 </template>
 
 <style scoped>
+.control {
+  display: flex;
+  gap: 5px;
+}
+</style>
+```
+
+#### 与Element-plus配合
+> (这里只展示一种,只是导入从"dynamicformdjx/elementPlus"中，类型方法与上方naive ui一致)
+##### 简单表单
+```vue
+<script setup lang="ts">
+import {ref} from "vue";
+import {ElButton} from "element-plus";
+import {useDyForm, useReactiveForm} from "dynamicformdjx";
+import {type eleDynamicFormRef, renderInput, renderRadioGroup, EleDynamicForm} from "dynamicformdjx/elementPlus";
+import type {PresetType} from "dynamicformdjx/types/index";
+
+type FormRow = {
+  username: string
+  password: string
+  preset: PresetType
+}
+const eleDynamicFormRef = ref<eleDynamicFormRef | null>(null)
+const presetType = ref<PresetType>('fullRow')
+const formItems = useReactiveForm<FormRow>([
+  {
+    key: "username",
+    label: "姓名",
+    value: ref<string | null>(null),
+    clearable: true,
+    placeholder: '请输入姓名',
+    required: true, // 是否必填 (简化rules规则)
+    render2: f => renderInput(f.value, {}, f),
+    span: 8
+  },
+  {
+    key: "password",
+    label: "密码",
+    value: ref<string | null>(null),
+    clearable: true,
+    type: 'password',
+    required: true,
+    placeholder: '请输入密码',
+    render2: f => renderInput(f.value, {showPassword: true}, f),
+    span: 8,
+    offset: 2,
+    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) => {
+      presetType.value = v
+    }
+  },
+])
+const useForm = useDyForm<FormRow>(formItems)
+const getData = () => {
+  const res = eleDynamicFormRef.value?.getResult?.()
+  console.log(res)
+}
+const resetData = () => eleDynamicFormRef.value?.reset?.()
+const setData = () => useForm.setValues({
+  username: 'element-plus',
+  password: '520'
+})
+const validatorData = () => {
+  // 校验
+  eleDynamicFormRef.value?.validator().then(data => {
+    console.log(data)
+  }).catch(err => {
+    console.log(err)
+  })
+}
+</script>
+
+<template>
+  <EleDynamicForm :items="formItems" ref="eleDynamicFormRef" :preset="presetType">
+    <template #header>
+      <h3>与Element plus结合简单表单</h3>
+    </template>
+    <template #footer>
+      <div class="control">
+        <el-button @click="getData" type="success" size="small">get Data</el-button>
+        <el-button @click="setData" type="warning" size="small">set Data</el-button>
+        <el-button @click="validatorData" type="default" size="small">validate Data</el-button>
+        <el-button @click="resetData" type="danger" size="small">reset Data</el-button>
+      </div>
+    </template>
+  </EleDynamicForm>
+</template>
+
+<style scoped>
+h3 {
+  text-align: center;
+  margin: 0 0 10px 0;
+}
+
 .control {
   display: flex;
   gap: 5px;

package/dist/elementPlus/EleDynamicForm.d.ts

@@ -0,0 +1,66 @@
+import { PropType, SlotsType } from 'vue';
+import { DyFormItem } from '../types/form';
+import { DynamicFormSlots, PresetType } from '../types';
+import { FormRules, FormProps, RowProps } from 'element-plus';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    formConfig: {
+        type: PropType<FormProps>;
+        default: () => {
+            labelPosition: string;
+            size: string;
+        };
+    };
+    rowConfig: {
+        type: PropType<RowProps>;
+        default: () => {
+            gutter: number;
+            justify: string;
+            align: string;
+        };
+    };
+    rules: {
+        type: PropType<FormRules<any>>;
+    };
+    preset: {
+        type: PropType<PresetType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    items: {
+        type: PropType<Array<DyFormItem>>;
+        require: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    formConfig: {
+        type: PropType<FormProps>;
+        default: () => {
+            labelPosition: string;
+            size: string;
+        };
+    };
+    rowConfig: {
+        type: PropType<RowProps>;
+        default: () => {
+            gutter: number;
+            justify: string;
+            align: string;
+        };
+    };
+    rules: {
+        type: PropType<FormRules<any>>;
+    };
+    preset: {
+        type: PropType<PresetType>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    items: {
+        type: PropType<Array<DyFormItem>>;
+        require: boolean;
+    };
+}>> & Readonly<{}>, {
+    formConfig: FormProps;
+    preset: PresetType;
+    rowConfig: RowProps;
+}, SlotsType<DynamicFormSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,41 @@
+import { InputProps } from 'element-plus';
+import { Ref, VNode, AllowedComponentProps } from 'vue';
+import { DyFormItem } from '../../types/form';
+type AnyProps = Record<string, any> & AllowedComponentProps;
+type BasicOption = Record<string, any>;
+export declare function renderInput(model: Ref<string>, optionProps?: InputProps | AllowedComponentProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderSelect(model: Ref<any>, options: any[], optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+/**
+ * PopSelect（Element Plus 无 1:1 组件）
+ * - 单选：ElDropdown（点击项立即选中）
+ * - 多选（model 是数组）：ElPopover + ElCheckboxGroup
+ */
+export declare function renderPopSelect(model: Ref<string | number | Array<string | number> | null>, options: Array<any>, optionProps?: AnyProps, rf?: DyFormItem, defaultRender?: VNode): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderTreeSelect(model: Ref<any>, options: any[], optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderRadioGroup(value: Ref<string | number | null | undefined>, options: BasicOption[], optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderRadioButtonGroup(value: Ref<string | number | null | undefined>, options: BasicOption[], optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderCheckboxGroup(model: Ref<(string | number)[]>, options: BasicOption[], optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderSwitch(value: Ref<boolean>, optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderDatePicker(value: Ref<any>, optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare function renderTimePicker(value: Ref<any>, optionProps?: AnyProps, rf?: DyFormItem): VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export {};

package/dist/elementPlus/index.cjs

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

package/dist/elementPlus/index.d.ts

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