dynamicformdjx 0.2.0 → 0.3.0

package/README.md

@@ -21,12 +21,16 @@
 
 ## 概述
 
-`DynamicForm` 组件是一个灵活且动态的表单输入组件，允许用户添加、修改和删除键值对。它提供了多种自定义选项，如按钮文本、表单布局和输入过滤等。
+`DynamicForm` 一个灵活且动态的表单组件，使用数组，简化模版操作，提供多种hook快速操作表单等。
+
+- 简化template代码，快速处理表单
+- 提供render2函数，自定义处理表单项灵活性强
+
+`DynamicInput` 组件是一个灵活且动态的表单输入组件，允许用户添加、修改和删除键值对。它提供了多种自定义选项，如按钮文本、表单布局和输入过滤
 
 - 支持通过 `v-model` 双向绑定任意对象，(包含受控和非受控) 可动态增删字段
 - 支持将值解析为：字符串 / 数字 / 数组（字符串数组、数字数组）
 - 文案、样式、数组分隔符等均可配置
-
 ---
 
 ## 安装
@@ -39,9 +43,81 @@ yarn add dynamicformdjx
 # or
 pnpm add dynamicformdjx
 ```
+###  动态表单 (**新**)
+> (该表单依赖于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";
+
+  type FormRow = {
+    username: string
+    password: string
+  }
+  const naiDynamicFormRef = ref<naiDynamicFormRef | null>(null)
+  const formItems = useReactiveForm<FormRow>([
+    {
+      key: "username",
+      label: "姓名",
+      value: ref<string | null>(null),
+      clearable: true,
+      placeholder: '请输入姓名',
+      required: true, // 是否必填 (简化rules规则)
+      render2: f => renderInput(f.value, {}, f),
+    },
+    {
+      key: "password",
+      label: "密码",
+      value: ref<string | null>(null),
+      clearable: true,
+      type: 'password',
+      required: true,
+      placeholder: '请输入密码',
+      render2: f => renderInput(f.value, {showPasswordOn: 'click'}, f),
+    },
+  ])
+  const useForm = useDyForm<FormRow>(formItems)
+  const getData = () => {
+    // const res=useForm.getValues() // 或
+    const res = naiDynamicFormRef.value?.getResult()
+    console.log(res)
+  }
+  const setData = () => {
+    // 隐藏username
+    // useForm.setHidden(true, ['username'])
+    // 设置username 为不可输入
+    // useForm.setDisabled(true, ['username'])
+    //  直接修改
+    useForm.setValues({
+      username: 'naive-ui',
+      password: '520'
+    })
+  }
+  const validatorData = () => {
+    // 校验
+    naiDynamicFormRef.value.validator().then(data => {
+      console.log(data)
+    }).catch(err => {
+      console.log(err)
+    })
+  }
+</script>
+
+<template>
+  <NaiDynamicForm :items="formItems" ref="naiDynamicFormRef"/>
+  <n-button @click="getData" type="success" size="small">get Data</n-button>&nbsp;
+  <n-button @click="setData" type="warning" size="small">set Data</n-button>&nbsp;
+  <n-button @click="validatorData" type="default" size="small">validate Data</n-button>
+</template>
+```
 
-### 基本使用
+###  动态录入
 
+#### 1.单组件
 ```vue
 <script setup lang="ts">
   import {ref} from "vue";
@@ -69,7 +145,7 @@ pnpm add dynamicformdjx
 </template>
 ```
 
-### 级联基本使用
+#### 2.级联基本使用
 
 ```vue
 <script setup lang="ts">

package/dist/hooks/useDyForm.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+import { DyFormItem } from '../types/form';
+type KeyOf<T> = Extract<keyof T, string>;
+export declare function useReactiveForm<T extends Record<string, any>, U = any>(items: DyFormItem<T, U>[], isDecorate?: boolean): DyFormItem<T, U>[];
+export declare function useDyForm<Row extends Record<string, any>>(items: DyFormItem<Row>[] | Ref<DyFormItem<Row>[]>): {
+    setDisabled: (disabled: boolean, keys?: KeyOf<Row>[]) => void;
+    setHidden: (hidden: boolean, keys?: KeyOf<Row>[]) => void;
+    setValue: <K extends KeyOf<Row>>(key: K, value: Row[K]) => void;
+    setValues: (patch: Partial<{ [K in KeyOf<Row>]: Row[K]; }>) => void;
+    getValue: <K extends KeyOf<Row>>(key: K) => DyFormItem<Row> | undefined;
+    getValues: <K extends KeyOf<Row>>(keys?: readonly K[]) => Partial<Pick<Row, K>> & Record<string, any>;
+};
+export {};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),y=require("./index-BWQjnQQF.cjs"),S=e.defineComponent({name:"DynamicInput",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,u)=>!0},setup(t,{emit:u,expose:x}){const b={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...t.btnConfigs},c={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...t.configs},i={arraySplitSymbol:",",...t.dyListConfigs},d=t.size,o=e.ref(y.tranArr(t.modelValue,t.randomFun,i.arraySplitSymbol)),v=e.ref(null);return e.watch(o,a=>{if(!t.isController)return;const m=y.resetObj(a,i.arraySplitSymbol);u("update:modelValue",m),u("onMerge",m,e.toRaw(o.value))},{deep:!0}),x({onSet:a=>{o.value=y.tranArr(a??t.modelValue,t.randomFun,i.arraySplitSymbol)},getResult:(a="res")=>a==="ori"?e.toRaw(o.value):y.resetObj(o.value,i.arraySplitSymbol)}),()=>e.createVNode("div",{class:t.dyCls??`dynamicForm ${d}`},[e.createVNode("div",{class:"dyFormList",ref:v,style:{maxHeight:c.maxHeight}},[o.value.map((a,m,r)=>e.createVNode("div",{class:"dItem",key:a.rId},[e.createVNode("div",{class:"input"},[e.createVNode("input",{size:d,value:a.key,class:"key nativeInput",onInput:n=>{a.key=n.target.value}},null),e.createTextVNode(":"),e.createVNode("div",{class:"vInput"},[e.createVNode("div",{class:"slot"},[e.createVNode("button",{class:[a.isArray?"success":"default","small","bt"],onClick:()=>{a.isArray=!a.isArray}},[e.createTextVNode("Array")]),e.createTextVNode(" "),e.createVNode("button",{class:[a.isNumber?"success":"default","small","bt"],onClick:()=>{a.isNumber=!a.isNumber}},[e.createTextVNode("Number")])]),e.createVNode("input",{size:d,value:a.value,class:"value nativeV",onInput:n=>{const s=n.target.value;c.allowFilter&&a.isNumber?a.value=y.formatNumberInput(s,a.isArray,i.arraySplitSymbol):a.value=s}},null)])]),e.createVNode("div",{class:"btn"},[e.createVNode("button",{class:[d,"success","bt"],disabled:m!==r.length-1,onClick:()=>{o.value.push({rId:t.randomFun(),key:"",value:""}),c.autoScroll&&e.nextTick(()=>{const n=v.value;n?.scrollTo({top:n.scrollHeight,behavior:"smooth"})})}},[e.createTextVNode("+")]),e.createVNode("button",{class:["danger",d,"bt"],onClick:()=>{o.value=o.value.filter(n=>n.rId!==a.rId)}},[e.createTextVNode("-")])])]))]),e.createVNode("div",{class:"control"},[!o.value.length&&e.createVNode("button",{class:["success",d,"bt"],onClick:()=>{o.value.push({rId:t.randomFun(),key:"",value:""})}},[b.newTxt]),!t.isController&&e.createVNode(e.Fragment,null,[!c.hideReset&&e.createVNode("button",{class:["default",d,"bt"],onClick:()=>{o.value=y.tranArr(t.modelValue,t.randomFun,i.arraySplitSymbol),u("onReset")}},[b.resetTxt]),e.createVNode("button",{class:["info",d,"bt"],onClick:()=>{o.value.sort((m,r)=>+m.rId-+r.rId);const a=y.resetObj(o.value,i.arraySplitSymbol);u("update:modelValue",a),u("onMerge",a,e.toRaw(o.value)),o.value=y.tranArr(a,t.randomFun,i.arraySplitSymbol)}},[b.mergeTxt])])])])}}),k=e.defineComponent({name:"DynamicCascadeInput",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,u)=>!0},setup(t,{emit:u,expose:x}){const b={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...t.btnConfigs},c={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...t.configs},i={arraySplitSymbol:",",...t.dyListConfigs},d=r=>["string","number"].includes(r),o=r=>Object.keys(r).map((n,s)=>{let l=r[n];const N=Array.isArray(l),I=N?l.every(C=>typeof C=="number"):typeof l=="number",V=l===null;return d(typeof l)&&(l=r[n]),V&&(l=""),{rId:t.randomFun(s),key:n,value:Object.prototype.toString.call(l)==="[object Object]"?o(r[n]):N?l.join(i.arraySplitSymbol):l,isArray:N||void 0,isNumber:I||void 0}}),v=r=>r.reduce((n,s)=>{const l=s.value;return s.key.trim().length&&(n[s.key]=Array.isArray(l)?v(l):y.parseValue(s.value,s.isArray,s.isNumber,i.arraySplitSymbol)),n},{}),a=e.ref(o(t.modelValue)),m=(r,n=1,s)=>e.createVNode("div",{class:[`depth-${n}`,c.showBorder?"":"no-border",c.showPad?"":"no-pad"],style:{"--depth":n,["--c"+[n]]:y.saferRepairColor(c.borderColors,n)}},[r.map((l,N,I)=>{const V=Array.isArray(l.value),C=d(typeof l.value);return e.createVNode("div",{class:"dItem",key:l.rId,style:{marginLeft:n>1?`${n*c.retractLen}px`:"0"}},[e.createVNode("div",{class:"input"},[!V&&e.createVNode(e.Fragment,null,[e.createVNode("input",{value:l.key,class:"key nativeInput",onInput:g=>l.key=g.target.value},null),e.createTextVNode(":")]),e.createVNode("div",{class:"vInput"},[e.createVNode("div",{class:"slot"},[Array.isArray(l.value)?void 0:e.createVNode(e.Fragment,null,[e.createVNode("button",{class:[l.isArray?"success":"default","small","bt"],onClick:()=>{l.isArray=!l.isArray}},[e.createTextVNode("Array")]),e.createTextVNode(" "),e.createVNode("button",{class:[l.isNumber?"success":"default","small","bt"],onClick:()=>{l.isNumber=!l.isNumber}},[e.createTextVNode("Number")])])]),e.createVNode("input",{class:`value nativeV ${V?"isKey":""}`,value:C?l.value:l.key,onInput:g=>{const f=g.target.value;if(V){l.key=f;return}c.allowFilter&&l.isNumber?l.value=y.formatNumberInput(f,l.isArray,i.arraySplitSymbol):l.value=f}},null),e.createVNode("div",{class:"surSlot"},[n<t.depth?!V&&e.createVNode("button",{class:["success","bt"],onClick:()=>{C&&(l.value=[],l.isArray=void 0),l.value.push({rId:t.randomFun(),key:"",value:""})}},[t.newChildTxt(l)]):null])])]),e.createVNode("div",{class:"btn"},[e.createVNode("button",{class:["success","bt"],disabled:N!==I.length-1,onClick:()=>{r.push({rId:t.randomFun(),key:"",value:""})}},[e.createTextVNode("+")]),e.createVNode("button",{class:["danger","bt"],onClick:()=>{if(r.splice(N,1),r.length<1){if(s===void 0)return v([]);const g=a.value.findIndex(f=>f.rId===s?.rId);n<1?a.value.splice(g,1,{...s,value:""}):s.value=""}}},[e.createTextVNode("-")])]),Array.isArray(l.value)&&m(l.value,n+1,l)])})]);return e.watch(a,r=>{if(!t.isController)return;const n=v(r);u("update:modelValue",n),u("onMerge",n,e.toRaw(a.value))},{deep:!0}),x({onSet:r=>{a.value=o(r??t.modelValue)},getResult:(r="res")=>r==="ori"?e.toRaw(a.value):v(a.value)}),()=>e.createVNode("div",{class:t.dyCls??"dynamicCascadeForm"},[e.createVNode("div",{class:"dyFormList",style:{maxHeight:c.maxHeight}},[m(a.value)]),e.createVNode("div",{class:"control"},[!a.value.length&&e.createVNode("button",{class:["success","bt"],onClick:()=>{a.value.push({rId:t.randomFun(),key:"",value:""})}},[b.newTxt]),!t.isController&&e.createVNode(e.Fragment,null,[!c.hideReset&&e.createVNode("button",{class:["default","bt"],onClick:()=>{a.value=o(t.modelValue),u("onReset")}},[b.resetTxt]),e.createVNode("button",{class:["info","bt"],onClick:()=>{const r=v(a.value);u("update:modelValue",r),u("onMerge",r,e.toRaw(a.value)),a.value=o(r)}},[b.mergeTxt])])])])}}),p={install(t){t.component("DynamicInput",S),t.component("DynamicCascadeInput",k)}};exports.DynamicCascadeInput=k;exports.DynamicInput=S;exports.DynamicInputPlugin=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("./index-BWQjnQQF.cjs"),I=e.defineComponent({name:"DynamicInput",props:{size:{type:String},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:a=>`${Date.now()}_${a??0}`},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},modelValue:{type:Object,required:!0}},emits:{"update:modelValue":a=>!0,onReset:()=>!0,onMerge:(a,c)=>!0},setup(a,{emit:c,expose:f}){const b={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...a.btnConfigs},d={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...a.configs},y={arraySplitSymbol:",",...a.dyListConfigs},m=a.size,s=e.ref(v.tranArr(a.modelValue,a.randomFun,y.arraySplitSymbol)),u=e.ref(null);return e.watch(s,t=>{if(!a.isController)return;const o=v.resetObj(t,y.arraySplitSymbol);c("update:modelValue",o),c("onMerge",o,e.toRaw(s.value))},{deep:!0}),f({onSet:t=>{s.value=v.tranArr(t??a.modelValue,a.randomFun,y.arraySplitSymbol)},getResult:(t="res")=>t==="ori"?e.toRaw(s.value):v.resetObj(s.value,y.arraySplitSymbol)}),()=>e.createVNode("div",{class:a.dyCls??`dynamicForm ${m}`},[e.createVNode("div",{class:"dyFormList",ref:u,style:{maxHeight:d.maxHeight}},[s.value.map((t,o,n)=>e.createVNode("div",{class:"dItem",key:t.rId},[e.createVNode("div",{class:"input"},[e.createVNode("input",{size:m,value:t.key,class:"key nativeInput",onInput:r=>{t.key=r.target.value}},null),e.createTextVNode(":"),e.createVNode("div",{class:"vInput"},[e.createVNode("div",{class:"slot"},[e.createVNode("button",{class:[t.isArray?"success":"default","small","bt"],onClick:()=>{t.isArray=!t.isArray}},[e.createTextVNode("Array")]),e.createTextVNode(" "),e.createVNode("button",{class:[t.isNumber?"success":"default","small","bt"],onClick:()=>{t.isNumber=!t.isNumber}},[e.createTextVNode("Number")])]),e.createVNode("input",{size:m,value:t.value,class:"value nativeV",onInput:r=>{const i=r.target.value;d.allowFilter&&t.isNumber?t.value=v.formatNumberInput(i,t.isArray,y.arraySplitSymbol):t.value=i}},null)])]),e.createVNode("div",{class:"btn"},[e.createVNode("button",{class:[m,"success","bt"],disabled:o!==n.length-1,onClick:()=>{s.value.push({rId:a.randomFun(),key:"",value:""}),d.autoScroll&&e.nextTick(()=>{const r=u.value;r?.scrollTo({top:r.scrollHeight,behavior:"smooth"})})}},[e.createTextVNode("+")]),e.createVNode("button",{class:["danger",m,"bt"],onClick:()=>{s.value=s.value.filter(r=>r.rId!==t.rId)}},[e.createTextVNode("-")])])]))]),e.createVNode("div",{class:"control"},[!s.value.length&&e.createVNode("button",{class:["success",m,"bt"],onClick:()=>{s.value.push({rId:a.randomFun(),key:"",value:""})}},[b.newTxt]),!a.isController&&e.createVNode(e.Fragment,null,[!d.hideReset&&e.createVNode("button",{class:["default",m,"bt"],onClick:()=>{s.value=v.tranArr(a.modelValue,a.randomFun,y.arraySplitSymbol),c("onReset")}},[b.resetTxt]),e.createVNode("button",{class:["info",m,"bt"],onClick:()=>{s.value.sort((o,n)=>+o.rId-+n.rId);const t=v.resetObj(s.value,y.arraySplitSymbol);c("update:modelValue",t),c("onMerge",t,e.toRaw(s.value)),s.value=v.tranArr(t,a.randomFun,y.arraySplitSymbol)}},[b.mergeTxt])])])])}}),S=e.defineComponent({name:"DynamicCascadeInput",props:{modelValue:{type:Object,required:!0},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:a=>`${Date.now()}_${a??0}`},depth:{type:Number,default:3},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},newChildTxt:{type:Function,default:a=>`添加 '${a.key}' 子项`}},emits:{"update:modelValue":a=>!0,onReset:()=>!0,onMerge:(a,c)=>!0},setup(a,{emit:c,expose:f}){const b={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...a.btnConfigs},d={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...a.configs},y={arraySplitSymbol:",",...a.dyListConfigs},m=n=>["string","number"].includes(n),s=n=>Object.keys(n).map((r,i)=>{let l=n[r];const V=Array.isArray(l),x=V?l.every(k=>typeof k=="number"):typeof l=="number",N=l===null;return m(typeof l)&&(l=n[r]),N&&(l=""),{rId:a.randomFun(i),key:r,value:Object.prototype.toString.call(l)==="[object Object]"?s(n[r]):V?l.join(y.arraySplitSymbol):l,isArray:V||void 0,isNumber:x||void 0}}),u=n=>n.reduce((r,i)=>{const l=i.value;return i.key.trim().length&&(r[i.key]=Array.isArray(l)?u(l):v.parseValue(i.value,i.isArray,i.isNumber,y.arraySplitSymbol)),r},{}),t=e.ref(s(a.modelValue)),o=(n,r=1,i)=>e.createVNode("div",{class:[`depth-${r}`,d.showBorder?"":"no-border",d.showPad?"":"no-pad"],style:{"--depth":r,["--c"+[r]]:v.saferRepairColor(d.borderColors,r)}},[n.map((l,V,x)=>{const N=Array.isArray(l.value),k=m(typeof l.value);return e.createVNode("div",{class:"dItem",key:l.rId,style:{marginLeft:r>1?`${r*d.retractLen}px`:"0"}},[e.createVNode("div",{class:"input"},[!N&&e.createVNode(e.Fragment,null,[e.createVNode("input",{value:l.key,class:"key nativeInput",onInput:C=>l.key=C.target.value},null),e.createTextVNode(":")]),e.createVNode("div",{class:"vInput"},[e.createVNode("div",{class:"slot"},[Array.isArray(l.value)?void 0:e.createVNode(e.Fragment,null,[e.createVNode("button",{class:[l.isArray?"success":"default","small","bt"],onClick:()=>{l.isArray=!l.isArray}},[e.createTextVNode("Array")]),e.createTextVNode(" "),e.createVNode("button",{class:[l.isNumber?"success":"default","small","bt"],onClick:()=>{l.isNumber=!l.isNumber}},[e.createTextVNode("Number")])])]),e.createVNode("input",{class:`value nativeV ${N?"isKey":""}`,value:k?l.value:l.key,onInput:C=>{const g=C.target.value;if(N){l.key=g;return}d.allowFilter&&l.isNumber?l.value=v.formatNumberInput(g,l.isArray,y.arraySplitSymbol):l.value=g}},null),e.createVNode("div",{class:"surSlot"},[r<a.depth?!N&&e.createVNode("button",{class:["success","bt"],onClick:()=>{k&&(l.value=[],l.isArray=void 0),l.value.push({rId:a.randomFun(),key:"",value:""})}},[a.newChildTxt(l)]):null])])]),e.createVNode("div",{class:"btn"},[e.createVNode("button",{class:["success","bt"],disabled:V!==x.length-1,onClick:()=>{n.push({rId:a.randomFun(),key:"",value:""})}},[e.createTextVNode("+")]),e.createVNode("button",{class:["danger","bt"],onClick:()=>{if(n.splice(V,1),n.length<1){if(i===void 0)return u([]);const C=t.value.findIndex(g=>g.rId===i?.rId);r<1?t.value.splice(C,1,{...i,value:""}):i.value=""}}},[e.createTextVNode("-")])]),Array.isArray(l.value)&&o(l.value,r+1,l)])})]);return e.watch(t,n=>{if(!a.isController)return;const r=u(n);c("update:modelValue",r),c("onMerge",r,e.toRaw(t.value))},{deep:!0}),f({onSet:n=>{t.value=s(n??a.modelValue)},getResult:(n="res")=>n==="ori"?e.toRaw(t.value):u(t.value)}),()=>e.createVNode("div",{class:a.dyCls??"dynamicCascadeForm"},[e.createVNode("div",{class:"dyFormList",style:{maxHeight:d.maxHeight}},[o(t.value)]),e.createVNode("div",{class:"control"},[!t.value.length&&e.createVNode("button",{class:["success","bt"],onClick:()=>{t.value.push({rId:a.randomFun(),key:"",value:""})}},[b.newTxt]),!a.isController&&e.createVNode(e.Fragment,null,[!d.hideReset&&e.createVNode("button",{class:["default","bt"],onClick:()=>{t.value=s(a.modelValue),c("onReset")}},[b.resetTxt]),e.createVNode("button",{class:["info","bt"],onClick:()=>{const n=u(t.value);c("update:modelValue",n),c("onMerge",n,e.toRaw(t.value)),t.value=s(n)}},[b.mergeTxt])])])])}});function h(a,c=!0){return c?a.map(f=>e.shallowReactive(f)):a}function p(a){const c=()=>e.unref(a),f=(u,t)=>{c().forEach(o=>{const n=o.key;(!t||t.includes(n))&&(o.disabled=u)})},b=(u,t)=>{c().forEach(o=>{const n=o.key;(!t||t.includes(n))&&(o.hidden=u)})},d=(u,t)=>{const o=c().find(n=>n.key===u);o&&(e.isRef(o.value)?o.value.value=t:o.value=t)};return{setDisabled:f,setHidden:b,setValue:d,setValues:u=>{Object.entries(u).forEach(([t,o])=>{d(t,o)})},getValue:u=>c().find(t=>t.key===u),getValues:u=>{const t=u&&u.length?new Set(u):null;return c().reduce((o,n)=>{const r=n.key;if(!t||t.has(r)){const i=e.isRef(n.value)?n.value.value:n.value;o[r]=i}return o},{})}}}const F={install(a){a.component("DynamicInput",I),a.component("DynamicCascadeInput",S)}};exports.DynamicCascadeInput=S;exports.DynamicInput=I;exports.DynamicInputPlugin=F;exports.useDyForm=p;exports.useReactiveForm=h;

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:10px 5px}.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 .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:10px 5px}.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 .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}@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:10px 5px}.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 .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:10px 5px}.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 .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)}}

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export declare const DynamicInputPlugin: {
 export type dynamicInputRef = InstanceType<typeof DynamicInput> & ExposeType;
 export type dynamicCascadeInputRef = InstanceType<typeof DynamicCascadeInput> & ExposeType;
 export { DynamicInput, DynamicCascadeInput };
+export * from './hooks/useDyForm';