dynamicformdjx 0.3.5 → 0.4.1

package/README.md

@@ -1,23 +1,34 @@
 # dynamicformdjx
 
-基于 **Vue 3** 的动态表单。
+基于 **Vue 3** 的动态表单及录入。
 
 [文档](https://xczcdjx.github.io/dynamicFormDoc/)
+> 1.当前为0.41版本，已完成所有配合element plus 或naive ui表单的适配
+
+> 2.其中简单表单，自定义表单，装饰表单均可使用
+
+> 3.文档还在完善中，可参考源码中的components组件查看具体使用
 
 [Vue2 版本](https://www.npmjs.com/package/dynamicformdjx-vue2) 
 
 [React 版本](https://www.npmjs.com/package/dynamicformdjx-react) 
 
-### 组件版本说明
-- **v0.2 及以上版本**
-- Form字段改为Input, ElementPlus缩短为Ele, NaiveUi缩短为Nai
-- 请使用：`DynamicInput`, `DynamicCascadeInput`，`EleDynamicInput`,`NaiDynamicInput` 等导入
+[//]: # (### 组件版本说明)
+
+[//]: # (- **v0.2 及以上版本**)
+
+[//]: # (- Form字段改为Input, ElementPlus缩短为Ele, NaiveUi缩短为Nai)
+
+[//]: # (- 请使用：`DynamicInput`, `DynamicCascadeInput`，`EleDynamicInput`,`NaiDynamicInput` 等导入)
 
 
-| 版本范围 | 组件导入方式 |
-|---------|--------------|
-| ≥ 0.2   | DynamicInput, DynamicCascadeInput |
-| < 0.2   | DynamicForm, DynamicCascadeForm |
+[//]: # (| 版本范围 | 组件导入方式 |)
+
+[//]: # (|---------|--------------|)
+
+[//]: # (| ≥ 0.2   | DynamicInput, DynamicCascadeInput |)
+
+[//]: # (| < 0.2   | DynamicForm, DynamicCascadeForm |)
 
 ## 概述
 
@@ -45,9 +56,9 @@ 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";
@@ -83,7 +94,8 @@ pnpm add dynamicformdjx
       required: true,
       placeholder: '请输入密码',
       render2: f => renderInput(f.value, {showPasswordOn: 'click'}, f),
-      span: 6,
+      span: 8,
+      offset: 2,
       requiredHint:l=>`${l} is not empty`
     },
     {
@@ -95,7 +107,6 @@ pnpm add dynamicformdjx
         {label: '表格', value: 'grid'},
       ], {name: 'preset'}, f),
       onChange: (v) => {
-        console.log(v)
         presetType.value = v
       }
     },
@@ -134,7 +145,7 @@ pnpm add dynamicformdjx
 <template>
   <NaiDynamicForm :items="formItems" ref="naiDynamicFormRef" :preset="presetType">
     <template #header>
-      <h3>基本表单</h3>
+      <h3>与Naive ui结合简单表单</h3>
     </template>
     <template #footer>
       <div class="control">
@@ -158,7 +169,7 @@ pnpm add dynamicformdjx
   }
 </style>
 ```
-#### 2.自定义表单 
+##### 2.自定义表单 
 > (所有render2函数使用自定义)
 ##### InputTest.vue
 ```vue
@@ -215,7 +226,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, {
@@ -291,7 +302,7 @@ const validatorData = () => {
 }
 </style>
 ```
-#### 3.装饰表单
+##### 3.装饰表单
 > (可省略render2函数)
 ```vue
 <script setup lang="ts">
@@ -376,6 +387,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/decorateForm.d.ts

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

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

package/dist/elementPlus/index.d.ts

@@ -1,6 +1,11 @@
-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';
+import { useDecorateForm } from './hooks/decorateForm';
+export { useDecorateForm };
+export * from './hooks/renderForm';
 export type eleDynamicInputRef = InstanceType<typeof EleDynamicInput> & ExposeType;
 export type eleCascadeDynamicInputRef = InstanceType<typeof EleDynamicCascadeInput> & ExposeType;
-export { EleDynamicInput, EleDynamicCascadeInput };
+export type eleDynamicFormRef = InstanceType<typeof EleDynamicForm> & ExposeDyFType;
+export { EleDynamicInput, EleDynamicCascadeInput, EleDynamicForm };