@gopowerteam/form-render 0.0.5 → 0.0.7

package/dist/cjs/defines/index.d.ts

@@ -0,0 +1 @@
+export * from './define-form';

package/dist/cjs/form-items/select/index.d.ts

@@ -6,6 +6,7 @@ export interface RenderSelectItemOptions {
     clearable?: boolean;
     options: SelectOptions | Promise<SelectOptions> | (() => Promise<SelectOptions>);
     multiple?: boolean;
+    maxTagCount?: number;
     default?: string | number | boolean;
     autoSumbit?: boolean;
 }

package/dist/cjs/form-render/index.d.ts

@@ -3,9 +3,17 @@ import { type FieldRule } from '@arco-design/web-vue';
 import type { FormItemsOptions } from '../interfaces';
 export declare const FormRender: import("vue").DefineComponent<{
     form: {
-        type: PropType<FormItemsOptions>;
+        type: PropType<FormItemsOptions<any>>;
         required: true;
     };
+    value: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
+    modelValue: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
     minWidth: {
         type: NumberConstructor;
         required: false;
@@ -287,11 +295,22 @@ export declare const FormRender: import("vue").DefineComponent<{
     formCollspased: import("vue").Ref<boolean>;
     formActiosSpan: import("vue").ComputedRef<number>;
     toggleFormCollapsed: () => boolean;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "cancel")[], "submit" | "cancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    updateFormField: (key: string, value: any) => void;
+    updateFormSource: (value: import("../interfaces").DataRecord) => void;
+    reset: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "cancel" | "update:model-value")[], "submit" | "cancel" | "update:model-value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     form: {
-        type: PropType<FormItemsOptions>;
+        type: PropType<FormItemsOptions<any>>;
         required: true;
     };
+    value: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
+    modelValue: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
     minWidth: {
         type: NumberConstructor;
         required: false;
@@ -320,6 +339,7 @@ export declare const FormRender: import("vue").DefineComponent<{
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
     footer: boolean;
     name: string;

package/dist/cjs/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-form';

package/dist/cjs/hooks/use-form.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPublicInstance, type Ref } from 'vue';
+import type { FormRenderInstance } from '../form-render';
+type FormRenderExpose = {
+    -readonly [K in keyof Omit<FormRenderInstance, keyof ComponentPublicInstance>]: FormRenderInstance[K];
+};
+/**
+ * 获取TableRender实例
+ * @param key
+ * @returns
+ */
+export declare function useForm(key: string): Readonly<Ref<FormRenderExpose>>;
+export {};

package/dist/cjs/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),c=require("@arco-design/web-vue"),b=require("dayjs");const $=Symbol("ArcoConfigProvider"),N="arco",x="$arco",S=e=>{var t,r,a;const n=l.getCurrentInstance(),d=l.inject($,void 0),u=(a=(r=d==null?void 0:d.prefixCls)!=null?r:(t=n==null?void 0:n.appContext.config.globalProperties[x])==null?void 0:t.classPrefix)!=null?a:N;return e?`${u}-${e}`:u},w=Object.prototype.toString;function g(e){return w.call(e)==="[object Number]"&&e===e}var C=(e,t)=>{for(const[r,a]of t)e[r]=a;return e};const F=l.defineComponent({name:"IconDown",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:t}){const r=S("icon"),a=l.computed(()=>[r,`${r}-down`,{[`${r}-spin`]:e.spin}]),n=l.computed(()=>{const u={};return e.size&&(u.fontSize=g(e.size)?`${e.size}px`:e.size),e.rotate&&(u.transform=`rotate(${e.rotate}deg)`),u});return{cls:a,innerStyle:n,onClick:u=>{t("click",u)}}}}),I=["stroke-width","stroke-linecap","stroke-linejoin"],D=l.createElementVNode("path",{d:"M39.6 17.443 24.043 33 8.487 17.443"},null,-1),_=[D];function j(e,t,r,a,n,d){return l.openBlock(),l.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:l.normalizeClass(e.cls),style:l.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:t[0]||(t[0]=(...u)=>e.onClick&&e.onClick(...u))},_,14,I)}var k=C(F,[["render",j]]);const P=Object.assign(k,{install:(e,t)=>{var r;const a=(r=t==null?void 0:t.iconPrefix)!=null?r:"";e.component(a+k.name,k)}}),z=l.defineComponent({name:"IconUp",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:t}){const r=S("icon"),a=l.computed(()=>[r,`${r}-up`,{[`${r}-spin`]:e.spin}]),n=l.computed(()=>{const u={};return e.size&&(u.fontSize=g(e.size)?`${e.size}px`:e.size),e.rotate&&(u.transform=`rotate(${e.rotate}deg)`),u});return{cls:a,innerStyle:n,onClick:u=>{t("click",u)}}}}),B=["stroke-width","stroke-linecap","stroke-linejoin"],L=l.createElementVNode("path",{d:"M39.6 30.557 24.043 15 8.487 30.557"},null,-1),O=[L];function M(e,t,r,a,n,d){return l.openBlock(),l.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:l.normalizeClass(e.cls),style:l.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:t[0]||(t[0]=(...u)=>e.onClick&&e.onClick(...u))},O,14,B)}var y=C(z,[["render",M]]);const U=Object.assign(y,{install:(e,t)=>{var r;const a=(r=t==null?void 0:t.iconPrefix)!=null?r:"";e.component(a+y.name,y)}}),v={id:Symbol("ID"),source:Symbol("Source")};function q(e){const t=l.ref({});return e==null||e.forEach(a=>{t.value[a.key]=(typeof a.default=="function"?a.default():a.default)||null}),[t,a=>{t.value=a}]}function R(e){function t(r,a){return e!=null&&e.disabledDate?e.disabledDate(r,a):!1}return(r,a)=>{switch(e==null?void 0:e.type){case"week":return l.createVNode(c.WeekPicker,{modelValue:r[a.key],"onUpdate:modelValue":n=>r[a.key]=n,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"month":return l.createVNode(c.MonthPicker,{modelValue:r[a.key],"onUpdate:modelValue":n=>r[a.key]=n,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"quarter":return l.createVNode(c.QuarterPicker,{modelValue:r[a.key],"onUpdate:modelValue":n=>r[a.key]=n,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"year":return l.createVNode(c.YearPicker,{modelValue:r[a.key],"onUpdate:modelValue":n=>r[a.key]=n,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"date":default:return l.createVNode(c.DatePicker,{modelValue:r[a.key],"onUpdate:modelValue":n=>r[a.key]=n,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null)}}}function T(e){return(t,r)=>{switch(e==null?void 0:e.type){case"number":return l.createVNode(c.InputNumber,{modelValue:t[r.key],"onUpdate:modelValue":a=>t[r.key]=a,hideButton:!0,placeholder:e==null?void 0:e.placeholder,allowClear:e==null?void 0:e.clearable},null);case"string":default:return l.createVNode(c.Input,{modelValue:t[r.key],"onUpdate:modelValue":a=>t[r.key]=a,placeholder:e==null?void 0:e.placeholder,allowClear:e==null?void 0:e.clearable},null)}}}function E(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}function A(e){let t=!1;const r=l.ref(new Map);e.options instanceof Function?e.options().then(n=>r.value=n):e.options instanceof Promise?e.options.then(n=>r.value=n):r.value=e.options;function a(){e.autoSumbit}return(n,d)=>{let u;return e.default&&!t&&(n[d.key]=e.default,t=!0),l.createVNode(c.Select,{multiple:e.multiple,modelValue:n[d.key],"onUpdate:modelValue":i=>n[d.key]=i,placeholder:e.placeholder,allowClear:e.clearable,onChange:a},E(u=Array.from(r.value.entries()).map(([i,s])=>l.createVNode(c.Option,{key:i,value:i,label:s},null)))?u:{default:()=>[u]})}}function Y(e){function t(){e!=null&&e.autoSumbit}return(r,a)=>(e!=null&&e.default&&(r[a.key]=e.default),l.createVNode(c.Switch,{modelValue:r[a.key],"onUpdate:modelValue":n=>r[a.key]=n,checkedText:(e==null?void 0:e.openLabel)??"是",uncheckedText:(e==null?void 0:e.closeLabel)??"否",checkedValue:(e==null?void 0:e.openValue)??!0,uncheckedValue:(e==null?void 0:e.closeValue)??!1,onChange:t},null))}function W(e){return(t,r)=>{let a=[];function n(i){a=i}function d(i){if(i&&i.length===2){const[s,o]=i.sort(),m=b(s).startOf("days"),f=b(o).endOf("days");t[r.key]=[m.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD"),f.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD")]}}function u(i){return e!=null&&e.disabledDate?e.disabledDate(a,i):!1}return l.createVNode("div",null,[l.createVNode(c.RangePicker,{style:{width:"300px"},modelValue:t[r.key],"onUpdate:modelValue":i=>t[r.key]=i,onSelect:n,onChange:d,mode:e==null?void 0:e.type,allowClear:e==null?void 0:e.clearable,"disabled-date":u,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null)])}}function G(e){return(t,r)=>l.createVNode(c.Textarea,{modelValue:t[r.key],"onUpdate:modelValue":a=>t[r.key]=a,placeholder:e==null?void 0:e.placeholder,autoSize:e==null?void 0:e.autosize,maxLength:e==null?void 0:e.maxLength},null)}function K(e){return t=>e(t)}function Q(){return{input:T,textarea:G,select:A,date:R,switch:Y,dateRange:W,render:K}}function X(e,t){t.render||(t.render=a=>a.input());const r=t.render({...Q()});return{default:()=>r(e,t)}}function H(e,t){return l.h(c.FormItem,{field:t.key,label:t.title},X(e,t))}function V(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const J=l.defineComponent({props:{form:{type:Object,required:!0},minWidth:{type:Number,required:!1,default:300},name:{type:String,required:!1,default:"form"},submitable:{type:Boolean,required:!1,default:!1},searchable:{type:Boolean,required:!1,default:!1},footer:{type:Boolean,required:!1,default:!1}},emits:["submit","cancel"],expose:["formSource"],setup(e){const t=Math.random().toString(32).slice(2).toUpperCase(),r=l.ref(),[a]=q(e.form),n=l.ref(0),d=l.ref(!0),u=()=>d.value=!d.value;l.provide(v.id,t),l.provide(v.source,a);const i=l.computed(()=>{if(!n.value)return 1;const m=e.form.reduce((f,h)=>f+((h==null?void 0:h.span)||1),0);return n.value-m%n.value}),s=l.computed(()=>e.form.reduce((m,f)=>(f.rule&&(m[f.key]=f.rule),m),{}));function o(){var f;const m=(f=r.value)==null?void 0:f.$el;n.value=Math.floor(m.offsetWidth/e.minWidth)}return l.onMounted(()=>{o()}),window.addEventListener("resize",o),{formId:t,formSource:a,formInstance:r,formColumns:n,formRules:s,formCollspased:d,formActiosSpan:i,toggleFormCollapsed:u}},render(){const e=()=>{this.$emit("submit",this.formSource)},t=()=>{const r=[],a=this.footer?{span:this.formColumns}:{span:this.formActiosSpan};if(this.searchable&&(r.push(l.createVNode(c.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("搜索")]})),r.push(l.createVNode(c.Button,{type:"secondary",onClick:()=>{var n;return(n=this.formInstance)==null?void 0:n.resetFields()}},{default:()=>[l.createTextVNode("重置")]}))),this.submitable&&(r.push(l.createVNode(c.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("提交")]})),r.push(l.createVNode(c.Button,{type:"secondary",onClick:()=>this.$emit("cancel")},{default:()=>[l.createTextVNode("取消")]}))),this.form.some(n=>!!n.collapsed)&&r.push(l.createVNode(c.Button,{onClick:this.toggleFormCollapsed},{default:()=>this.formCollspased?"展开":"收起",icon:()=>this.formCollspased?l.createVNode(P,null,null):l.createVNode(U,null,null)})),this.$slots.actions&&r.push(...this.$slots.actions()),r.length)return l.createVNode(c.GridItem,a,{default:()=>[l.createVNode(c.FormItem,{hideLabel:!0,contentClass:this.footer?"form-footer":""},{default:()=>[l.createVNode(c.Space,null,V(r)?r:{default:()=>[r]})]})]})};return l.createVNode(c.Form,l.mergeProps({rules:this.formRules,onSubmitSuccess:e},{name:this.name},{"auto-label-width":!0,ref:r=>this.formInstance=r,model:this.formSource}),{default:()=>[l.createVNode(c.Grid,{cols:this.formColumns,"col-gap":10,"rol-gap":10},{default:()=>[this.form.filter(r=>this.formCollspased?!r.collapsed:!0).map(r=>{let a;return l.createVNode(c.GridItem,{span:r.span},V(a=H(this.formSource,r))?a:{default:()=>[a]})}),t()]})]})}});function Z(e){return e}exports.FormRender=J;exports.defineForm=Z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),d=require("@arco-design/web-vue"),V=require("dayjs");const F=Symbol("ArcoConfigProvider"),w="arco",I="$arco",C=e=>{var r,t,a;const n=l.getCurrentInstance(),c=l.inject(F,void 0),u=(a=(t=c==null?void 0:c.prefixCls)!=null?t:(r=n==null?void 0:n.appContext.config.globalProperties[I])==null?void 0:r.classPrefix)!=null?a:w;return e?`${u}-${e}`:u},j=Object.prototype.toString;function $(e){return j.call(e)==="[object Number]"&&e===e}var N=(e,r)=>{for(const[t,a]of r)e[t]=a;return e};const D=l.defineComponent({name:"IconDown",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:r}){const t=C("icon"),a=l.computed(()=>[t,`${t}-down`,{[`${t}-spin`]:e.spin}]),n=l.computed(()=>{const u={};return e.size&&(u.fontSize=$(e.size)?`${e.size}px`:e.size),e.rotate&&(u.transform=`rotate(${e.rotate}deg)`),u});return{cls:a,innerStyle:n,onClick:u=>{r("click",u)}}}}),_=["stroke-width","stroke-linecap","stroke-linejoin"],P=l.createElementVNode("path",{d:"M39.6 17.443 24.043 33 8.487 17.443"},null,-1),z=[P];function B(e,r,t,a,n,c){return l.openBlock(),l.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:l.normalizeClass(e.cls),style:l.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:r[0]||(r[0]=(...u)=>e.onClick&&e.onClick(...u))},z,14,_)}var b=N(D,[["render",B]]);const O=Object.assign(b,{install:(e,r)=>{var t;const a=(t=r==null?void 0:r.iconPrefix)!=null?t:"";e.component(a+b.name,b)}}),L=l.defineComponent({name:"IconUp",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:r}){const t=C("icon"),a=l.computed(()=>[t,`${t}-up`,{[`${t}-spin`]:e.spin}]),n=l.computed(()=>{const u={};return e.size&&(u.fontSize=$(e.size)?`${e.size}px`:e.size),e.rotate&&(u.transform=`rotate(${e.rotate}deg)`),u});return{cls:a,innerStyle:n,onClick:u=>{r("click",u)}}}}),M=["stroke-width","stroke-linecap","stroke-linejoin"],U=l.createElementVNode("path",{d:"M39.6 30.557 24.043 15 8.487 30.557"},null,-1),q=[U];function T(e,r,t,a,n,c){return l.openBlock(),l.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:l.normalizeClass(e.cls),style:l.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:r[0]||(r[0]=(...u)=>e.onClick&&e.onClick(...u))},q,14,M)}var v=N(L,[["render",T]]);const R=Object.assign(v,{install:(e,r)=>{var t;const a=(t=r==null?void 0:r.iconPrefix)!=null?t:"";e.component(a+v.name,v)}}),S={id:Symbol("ID"),source:Symbol("Source")};function E(e,r){const t=l.ref({});return e==null||e.forEach(n=>{let c=null;n.default&&(c=(typeof n.default=="function"?n.default():n.default)||null),r&&r[n.key]&&(c=r[n.key]),t.value[n.key]=c}),[t,n=>{t.value=n}]}function A(e){function r(t,a){return e!=null&&e.disabledDate?e.disabledDate(t,a):!1}return(t,a)=>{switch(e==null?void 0:e.type){case"week":return l.createVNode(d.WeekPicker,{modelValue:t[a.key],"onUpdate:modelValue":n=>t[a.key]=n,"disabled-date":r,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"month":return l.createVNode(d.MonthPicker,{modelValue:t[a.key],"onUpdate:modelValue":n=>t[a.key]=n,"disabled-date":r,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"quarter":return l.createVNode(d.QuarterPicker,{modelValue:t[a.key],"onUpdate:modelValue":n=>t[a.key]=n,"disabled-date":r,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"year":return l.createVNode(d.YearPicker,{modelValue:t[a.key],"onUpdate:modelValue":n=>t[a.key]=n,"disabled-date":r,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"date":default:return l.createVNode(d.DatePicker,{modelValue:t[a.key],"onUpdate:modelValue":n=>t[a.key]=n,"disabled-date":r,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null)}}}function Y(e){return(r,t)=>{switch(e==null?void 0:e.type){case"number":return l.createVNode(d.InputNumber,{modelValue:r[t.key],"onUpdate:modelValue":a=>r[t.key]=a,hideButton:!0,placeholder:e==null?void 0:e.placeholder,allowClear:e==null?void 0:e.clearable},null);case"string":default:return l.createVNode(d.Input,{modelValue:r[t.key],"onUpdate:modelValue":a=>r[t.key]=a,placeholder:e==null?void 0:e.placeholder,allowClear:e==null?void 0:e.clearable},null)}}}function W(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}function G(e){let r=!1;const t=l.ref(new Map);e.options instanceof Function?e.options().then(n=>t.value=n):e.options instanceof Promise?e.options.then(n=>t.value=n):t.value=e.options;function a(){e.autoSumbit}return(n,c)=>{let u;return e.default&&!r&&(n[c.key]=e.default,r=!0),l.createVNode(d.Select,{multiple:e.multiple,modelValue:n[c.key],"onUpdate:modelValue":o=>n[c.key]=o,placeholder:e.placeholder,allowClear:e.clearable,maxTagCount:e.maxTagCount,onChange:a},W(u=Array.from(t.value.entries()).map(([o,m])=>l.createVNode(d.Option,{key:o,value:o,label:m},null)))?u:{default:()=>[u]})}}function K(e){function r(){e!=null&&e.autoSumbit}return(t,a)=>(e!=null&&e.default&&(t[a.key]=e.default),l.createVNode(d.Switch,{modelValue:t[a.key],"onUpdate:modelValue":n=>t[a.key]=n,checkedText:(e==null?void 0:e.openLabel)??"是",uncheckedText:(e==null?void 0:e.closeLabel)??"否",checkedValue:(e==null?void 0:e.openValue)??!0,uncheckedValue:(e==null?void 0:e.closeValue)??!1,onChange:r},null))}function Q(e){return(r,t)=>{let a=[];function n(o){a=o}function c(o){if(o&&o.length===2){const[m,h]=o.sort(),s=V(m).startOf("days"),k=V(h).endOf("days");r[t.key]=[s.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD"),k.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD")]}}function u(o){return e!=null&&e.disabledDate?e.disabledDate(a,o):!1}return l.createVNode("div",null,[l.createVNode(d.RangePicker,{style:{width:"300px"},modelValue:r[t.key],"onUpdate:modelValue":o=>r[t.key]=o,onSelect:n,onChange:c,mode:e==null?void 0:e.type,allowClear:e==null?void 0:e.clearable,"disabled-date":u,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null)])}}function X(e){return(r,t)=>l.createVNode(d.Textarea,{modelValue:r[t.key],"onUpdate:modelValue":a=>r[t.key]=a,placeholder:e==null?void 0:e.placeholder,autoSize:e==null?void 0:e.autosize,maxLength:e==null?void 0:e.maxLength},null)}function H(e){return r=>e(r)}function J(){return{input:Y,textarea:X,select:G,date:A,switch:K,dateRange:Q,render:H}}function Z(e,r){r.render||(r.render=a=>a.input());const t=r.render({...J()});return{default:()=>t(e,r)}}function p(e,r){return l.h(d.FormItem,{field:r.key,label:r.title},Z(e,r))}function g(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const ee=l.defineComponent({props:{form:{type:Object,required:!0},value:{type:Object,required:!1},modelValue:{type:Object,required:!1},minWidth:{type:Number,required:!1,default:300},name:{type:String,required:!1,default:"form"},submitable:{type:Boolean,required:!1,default:!1},searchable:{type:Boolean,required:!1,default:!1},footer:{type:Boolean,required:!1,default:!1}},emits:["submit","cancel","update:model-value"],expose:["formSource","updateFormField","updateFormSource","reset"],setup(e){const r=Math.random().toString(32).slice(2).toUpperCase(),t=l.ref(),[a,n]=E(e.form,e.modelValue||e.value),c=l.ref(0),u=l.ref(!0),o=()=>u.value=!u.value;l.provide(S.id,r),l.provide(S.source,a);const m=l.computed(()=>{if(!c.value)return 1;const f=e.form.reduce((i,y)=>i+((y==null?void 0:y.span)||1),0);return c.value-f%c.value}),h=l.computed(()=>e.form.reduce((f,i)=>(i.rule&&(f[i.key]=i.rule),f),{}));function s(){var i;const f=(i=t.value)==null?void 0:i.$el;c.value=Math.floor(f.offsetWidth/e.minWidth)}l.onMounted(()=>{s()});function k(f,i){n({...a,[f]:i})}function x(){var f;(f=t.value)==null||f.resetFields()}return window.addEventListener("resize",s),{formId:r,formSource:a,formInstance:t,formColumns:c,formRules:h,formCollspased:u,formActiosSpan:m,toggleFormCollapsed:o,updateFormField:k,updateFormSource:n,reset:x}},render(){const e=()=>{this.$emit("submit",this.formSource),this.$emit("update:model-value",this.formSource)},r=()=>{const t=[],a=this.footer?{span:this.formColumns}:{span:this.formActiosSpan};if(this.searchable&&(t.push(l.createVNode(d.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("搜索")]})),t.push(l.createVNode(d.Button,{type:"secondary",onClick:()=>{var n;return(n=this.formInstance)==null?void 0:n.resetFields()}},{default:()=>[l.createTextVNode("重置")]}))),this.submitable&&(t.push(l.createVNode(d.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("提交")]})),t.push(l.createVNode(d.Button,{type:"secondary",onClick:()=>this.$emit("cancel")},{default:()=>[l.createTextVNode("取消")]}))),this.form.some(n=>!!n.collapsed)&&t.push(l.createVNode(d.Button,{onClick:this.toggleFormCollapsed},{default:()=>this.formCollspased?"展开":"收起",icon:()=>this.formCollspased?l.createVNode(O,null,null):l.createVNode(R,null,null)})),this.$slots.actions&&t.push(...this.$slots.actions()),t.length)return l.createVNode(d.GridItem,a,{default:()=>[l.createVNode(d.FormItem,{hideLabel:!0,contentClass:this.footer?"form-footer":""},{default:()=>[l.createVNode(d.Space,null,g(t)?t:{default:()=>[t]})]})]})};return l.createVNode(d.Form,l.mergeProps({rules:this.formRules,onSubmitSuccess:e},{name:this.name},{"auto-label-width":!0,ref:t=>this.formInstance=t,model:this.formSource}),{default:()=>[l.createVNode(d.Grid,{cols:this.formColumns,"col-gap":10,"rol-gap":10},{default:()=>[this.form.filter(t=>this.formCollspased?!t.collapsed:!0).map(t=>{let a;return l.createVNode(d.GridItem,{span:t.span},g(a=p(this.formSource,t))?a:{default:()=>[a]})}),r()]})]})}});function te(e){return e}function re(e){const r=l.getCurrentInstance(),t=l.ref();function a(){var c,u;const n=(u=(c=r==null?void 0:r.proxy)==null?void 0:c.$refs)==null?void 0:u[e];n&&(t.value=n)}return l.onMounted(a),l.onUpdated(a),t}exports.FormRender=ee;exports.defineForm=te;exports.useForm=re;

package/dist/cjs/index.d.ts

@@ -1,3 +1,4 @@
 export { FormRender, type FormRenderInstance } from './form-render';
-export { defineForm } from './defines/define-form';
+export * from './defines';
+export * from './hooks';
 export * from './interfaces';

package/dist/cjs/utils/create-form-source.d.ts

@@ -1,3 +1,3 @@
 import { type Ref } from 'vue';
 import type { DataRecord, FormItemsOptions } from '../interfaces';
-export declare function createFormSource(form?: FormItemsOptions): [Ref<DataRecord>, (value: DataRecord) => void];
+export declare function createFormSource(form?: FormItemsOptions, source?: Record<string, any>): [Ref<DataRecord>, (value: DataRecord) => void];

package/dist/es/defines/index.d.ts

@@ -0,0 +1 @@
+export * from './define-form';

package/dist/es/form-items/select/index.d.ts

@@ -6,6 +6,7 @@ export interface RenderSelectItemOptions {
     clearable?: boolean;
     options: SelectOptions | Promise<SelectOptions> | (() => Promise<SelectOptions>);
     multiple?: boolean;
+    maxTagCount?: number;
     default?: string | number | boolean;
     autoSumbit?: boolean;
 }

package/dist/es/form-render/index.d.ts

@@ -3,9 +3,17 @@ import { type FieldRule } from '@arco-design/web-vue';
 import type { FormItemsOptions } from '../interfaces';
 export declare const FormRender: import("vue").DefineComponent<{
     form: {
-        type: PropType<FormItemsOptions>;
+        type: PropType<FormItemsOptions<any>>;
         required: true;
     };
+    value: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
+    modelValue: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
     minWidth: {
         type: NumberConstructor;
         required: false;
@@ -287,11 +295,22 @@ export declare const FormRender: import("vue").DefineComponent<{
     formCollspased: import("vue").Ref<boolean>;
     formActiosSpan: import("vue").ComputedRef<number>;
     toggleFormCollapsed: () => boolean;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "cancel")[], "submit" | "cancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    updateFormField: (key: string, value: any) => void;
+    updateFormSource: (value: import("../interfaces").DataRecord) => void;
+    reset: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "cancel" | "update:model-value")[], "submit" | "cancel" | "update:model-value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     form: {
-        type: PropType<FormItemsOptions>;
+        type: PropType<FormItemsOptions<any>>;
         required: true;
     };
+    value: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
+    modelValue: {
+        type: PropType<Record<string, any>>;
+        required: false;
+    };
     minWidth: {
         type: NumberConstructor;
         required: false;
@@ -320,6 +339,7 @@ export declare const FormRender: import("vue").DefineComponent<{
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
     footer: boolean;
     name: string;

package/dist/es/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-form';

package/dist/es/hooks/use-form.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPublicInstance, type Ref } from 'vue';
+import type { FormRenderInstance } from '../form-render';
+type FormRenderExpose = {
+    -readonly [K in keyof Omit<FormRenderInstance, keyof ComponentPublicInstance>]: FormRenderInstance[K];
+};
+/**
+ * 获取TableRender实例
+ * @param key
+ * @returns
+ */
+export declare function useForm(key: string): Readonly<Ref<FormRenderExpose>>;
+export {};

package/dist/es/index.d.ts

@@ -1,3 +1,4 @@
 export { FormRender, type FormRenderInstance } from './form-render';
-export { defineForm } from './defines/define-form';
+export * from './defines';
+export * from './hooks';
 export * from './interfaces';

package/dist/es/index.mjs

@@ -1,20 +1,20 @@
-import { getCurrentInstance as U, inject as M, defineComponent as g, computed as s, openBlock as F, createElementBlock as I, normalizeClass as D, normalizeStyle as _, createElementVNode as j, ref as h, createVNode as u, isVNode as P, h as B, provide as $, onMounted as R, mergeProps as q, createTextVNode as y } from "vue";
-import { DatePicker as A, YearPicker as Y, QuarterPicker as E, MonthPicker as T, WeekPicker as W, Input as G, InputNumber as K, Select as Q, Option as X, Switch as H, RangePicker as J, Textarea as Z, FormItem as z, Form as p, Grid as ee, GridItem as C, Button as o, Space as re } from "@arco-design/web-vue";
-import x from "dayjs";
-const le = Symbol("ArcoConfigProvider"), te = "arco", ae = "$arco", L = (e) => {
+import { getCurrentInstance as D, inject as T, defineComponent as C, computed as s, openBlock as _, createElementBlock as j, normalizeClass as P, normalizeStyle as z, createElementVNode as L, ref as m, createVNode as n, isVNode as O, h as A, provide as x, onMounted as U, mergeProps as Y, createTextVNode as y, onUpdated as E } from "vue";
+import { DatePicker as W, YearPicker as G, QuarterPicker as K, MonthPicker as Q, WeekPicker as X, Input as H, InputNumber as J, Select as Z, Option as p, Switch as ee, RangePicker as re, Textarea as le, FormItem as N, Form as te, Grid as ae, GridItem as F, Button as h, Space as ue } from "@arco-design/web-vue";
+import w from "dayjs";
+const ne = Symbol("ArcoConfigProvider"), ce = "arco", de = "$arco", M = (e) => {
   var l, r, t;
-  const a = U(), c = M(le, void 0), n = (t = (r = c == null ? void 0 : c.prefixCls) != null ? r : (l = a == null ? void 0 : a.appContext.config.globalProperties[ae]) == null ? void 0 : l.classPrefix) != null ? t : te;
-  return e ? `${n}-${e}` : n;
-}, ne = Object.prototype.toString;
-function N(e) {
-  return ne.call(e) === "[object Number]" && e === e;
+  const a = D(), c = T(ne, void 0), u = (t = (r = c == null ? void 0 : c.prefixCls) != null ? r : (l = a == null ? void 0 : a.appContext.config.globalProperties[de]) == null ? void 0 : l.classPrefix) != null ? t : ce;
+  return e ? `${u}-${e}` : u;
+}, fe = Object.prototype.toString;
+function B(e) {
+  return fe.call(e) === "[object Number]" && e === e;
 }
-var O = (e, l) => {
+var q = (e, l) => {
   for (const [r, t] of l)
     e[r] = t;
   return e;
 };
-const ue = g({
+const ie = C({
   name: "IconDown",
   props: {
     size: {
@@ -43,45 +43,45 @@ const ue = g({
   setup(e, {
     emit: l
   }) {
-    const r = L("icon"), t = s(() => [r, `${r}-down`, {
+    const r = M("icon"), t = s(() => [r, `${r}-down`, {
       [`${r}-spin`]: e.spin
     }]), a = s(() => {
-      const n = {};
-      return e.size && (n.fontSize = N(e.size) ? `${e.size}px` : e.size), e.rotate && (n.transform = `rotate(${e.rotate}deg)`), n;
+      const u = {};
+      return e.size && (u.fontSize = B(e.size) ? `${e.size}px` : e.size), e.rotate && (u.transform = `rotate(${e.rotate}deg)`), u;
     });
     return {
       cls: t,
       innerStyle: a,
-      onClick: (n) => {
-        l("click", n);
+      onClick: (u) => {
+        l("click", u);
       }
     };
   }
-}), ce = ["stroke-width", "stroke-linecap", "stroke-linejoin"], de = /* @__PURE__ */ j("path", {
+}), me = ["stroke-width", "stroke-linecap", "stroke-linejoin"], se = /* @__PURE__ */ L("path", {
   d: "M39.6 17.443 24.043 33 8.487 17.443"
-}, null, -1), fe = [de];
-function ie(e, l, r, t, a, c) {
-  return F(), I("svg", {
+}, null, -1), oe = [se];
+function he(e, l, r, t, a, c) {
+  return _(), j("svg", {
     viewBox: "0 0 48 48",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     stroke: "currentColor",
-    class: D(e.cls),
-    style: _(e.innerStyle),
+    class: P(e.cls),
+    style: z(e.innerStyle),
     "stroke-width": e.strokeWidth,
     "stroke-linecap": e.strokeLinecap,
     "stroke-linejoin": e.strokeLinejoin,
-    onClick: l[0] || (l[0] = (...n) => e.onClick && e.onClick(...n))
-  }, fe, 14, ce);
+    onClick: l[0] || (l[0] = (...u) => e.onClick && e.onClick(...u))
+  }, oe, 14, me);
 }
-var v = /* @__PURE__ */ O(ue, [["render", ie]]);
-const se = Object.assign(v, {
+var g = /* @__PURE__ */ q(ie, [["render", he]]);
+const ke = Object.assign(g, {
   install: (e, l) => {
     var r;
     const t = (r = l == null ? void 0 : l.iconPrefix) != null ? r : "";
-    e.component(t + v.name, v);
+    e.component(t + g.name, g);
   }
-}), me = g({
+}), ye = C({
   name: "IconUp",
   props: {
     size: {
@@ -110,64 +110,65 @@ const se = Object.assign(v, {
   setup(e, {
     emit: l
   }) {
-    const r = L("icon"), t = s(() => [r, `${r}-up`, {
+    const r = M("icon"), t = s(() => [r, `${r}-up`, {
       [`${r}-spin`]: e.spin
     }]), a = s(() => {
-      const n = {};
-      return e.size && (n.fontSize = N(e.size) ? `${e.size}px` : e.size), e.rotate && (n.transform = `rotate(${e.rotate}deg)`), n;
+      const u = {};
+      return e.size && (u.fontSize = B(e.size) ? `${e.size}px` : e.size), e.rotate && (u.transform = `rotate(${e.rotate}deg)`), u;
     });
     return {
       cls: t,
       innerStyle: a,
-      onClick: (n) => {
-        l("click", n);
+      onClick: (u) => {
+        l("click", u);
       }
     };
   }
-}), oe = ["stroke-width", "stroke-linecap", "stroke-linejoin"], he = /* @__PURE__ */ j("path", {
+}), be = ["stroke-width", "stroke-linecap", "stroke-linejoin"], ve = /* @__PURE__ */ L("path", {
   d: "M39.6 30.557 24.043 15 8.487 30.557"
-}, null, -1), ke = [he];
-function ye(e, l, r, t, a, c) {
-  return F(), I("svg", {
+}, null, -1), Se = [ve];
+function ge(e, l, r, t, a, c) {
+  return _(), j("svg", {
     viewBox: "0 0 48 48",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     stroke: "currentColor",
-    class: D(e.cls),
-    style: _(e.innerStyle),
+    class: P(e.cls),
+    style: z(e.innerStyle),
     "stroke-width": e.strokeWidth,
     "stroke-linecap": e.strokeLinecap,
     "stroke-linejoin": e.strokeLinejoin,
-    onClick: l[0] || (l[0] = (...n) => e.onClick && e.onClick(...n))
-  }, ke, 14, oe);
+    onClick: l[0] || (l[0] = (...u) => e.onClick && e.onClick(...u))
+  }, Se, 14, be);
 }
-var S = /* @__PURE__ */ O(me, [["render", ye]]);
-const be = Object.assign(S, {
+var $ = /* @__PURE__ */ q(ye, [["render", ge]]);
+const $e = Object.assign($, {
   install: (e, l) => {
     var r;
     const t = (r = l == null ? void 0 : l.iconPrefix) != null ? r : "";
-    e.component(t + S.name, S);
+    e.component(t + $.name, $);
   }
-}), w = {
+}), V = {
   id: Symbol("ID"),
   source: Symbol("Source")
 };
-function ve(e) {
-  const l = h({});
-  return e == null || e.forEach((t) => {
-    l.value[t.key] = (typeof t.default == "function" ? t.default() : t.default) || null;
-  }), [l, (t) => {
-    l.value = t;
+function Ce(e, l) {
+  const r = m({});
+  return e == null || e.forEach((a) => {
+    let c = null;
+    a.default && (c = (typeof a.default == "function" ? a.default() : a.default) || null), l && l[a.key] && (c = l[a.key]), r.value[a.key] = c;
+  }), [r, (a) => {
+    r.value = a;
   }];
 }
-function Se(e) {
+function xe(e) {
   function l(r, t) {
     return e != null && e.disabledDate ? e.disabledDate(r, t) : !1;
   }
   return (r, t) => {
     switch (e == null ? void 0 : e.type) {
       case "week":
-        return u(W, {
+        return n(X, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -175,7 +176,7 @@ function Se(e) {
           "value-format": e == null ? void 0 : e.valueFormat
         }, null);
       case "month":
-        return u(T, {
+        return n(Q, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -183,7 +184,7 @@ function Se(e) {
           "value-format": e == null ? void 0 : e.valueFormat
         }, null);
       case "quarter":
-        return u(E, {
+        return n(K, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -191,7 +192,7 @@ function Se(e) {
           "value-format": e == null ? void 0 : e.valueFormat
         }, null);
       case "year":
-        return u(Y, {
+        return n(G, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -200,7 +201,7 @@ function Se(e) {
         }, null);
       case "date":
       default:
-        return u(A, {
+        return n(W, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -210,11 +211,11 @@ function Se(e) {
     }
   };
 }
-function ge(e) {
+function Fe(e) {
   return (l, r) => {
     switch (e == null ? void 0 : e.type) {
       case "number":
-        return u(K, {
+        return n(J, {
           modelValue: l[r.key],
           "onUpdate:modelValue": (t) => l[r.key] = t,
           hideButton: !0,
@@ -223,7 +224,7 @@ function ge(e) {
         }, null);
       case "string":
       default:
-        return u(G, {
+        return n(H, {
           modelValue: l[r.key],
           "onUpdate:modelValue": (t) => l[r.key] = t,
           placeholder: e == null ? void 0 : e.placeholder,
@@ -232,39 +233,40 @@ function ge(e) {
     }
   };
 }
-function $e(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !P(e);
+function we(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !O(e);
 }
-function Ce(e) {
+function Ve(e) {
   let l = !1;
-  const r = h(/* @__PURE__ */ new Map());
+  const r = m(/* @__PURE__ */ new Map());
   e.options instanceof Function ? e.options().then((a) => r.value = a) : e.options instanceof Promise ? e.options.then((a) => r.value = a) : r.value = e.options;
   function t() {
     e.autoSumbit;
   }
   return (a, c) => {
-    let n;
-    return e.default && !l && (a[c.key] = e.default, l = !0), u(Q, {
+    let u;
+    return e.default && !l && (a[c.key] = e.default, l = !0), n(Z, {
       multiple: e.multiple,
       modelValue: a[c.key],
       "onUpdate:modelValue": (d) => a[c.key] = d,
       placeholder: e.placeholder,
       allowClear: e.clearable,
+      maxTagCount: e.maxTagCount,
       onChange: t
-    }, $e(n = Array.from(r.value.entries()).map(([d, m]) => u(X, {
+    }, we(u = Array.from(r.value.entries()).map(([d, o]) => n(p, {
       key: d,
       value: d,
-      label: m
-    }, null))) ? n : {
-      default: () => [n]
+      label: o
+    }, null))) ? u : {
+      default: () => [u]
     });
   };
 }
-function xe(e) {
+function Ie(e) {
   function l() {
     e != null && e.autoSumbit;
   }
-  return (r, t) => (e != null && e.default && (r[t.key] = e.default), u(H, {
+  return (r, t) => (e != null && e.default && (r[t.key] = e.default), n(ee, {
     modelValue: r[t.key],
     "onUpdate:modelValue": (a) => r[t.key] = a,
     checkedText: (e == null ? void 0 : e.openLabel) ?? "是",
@@ -274,7 +276,7 @@ function xe(e) {
     onChange: l
   }, null));
 }
-function we(e) {
+function De(e) {
   return (l, r) => {
     let t = [];
     function a(d) {
@@ -282,14 +284,14 @@ function we(e) {
     }
     function c(d) {
       if (d && d.length === 2) {
-        const [m, k] = d.sort(), i = x(m).startOf("days"), f = x(k).endOf("days");
-        l[r.key] = [i.format((e == null ? void 0 : e.valueFormat) || "YYYY-MM-DD"), f.format((e == null ? void 0 : e.valueFormat) || "YYYY-MM-DD")];
+        const [o, b] = d.sort(), k = w(o).startOf("days"), v = w(b).endOf("days");
+        l[r.key] = [k.format((e == null ? void 0 : e.valueFormat) || "YYYY-MM-DD"), v.format((e == null ? void 0 : e.valueFormat) || "YYYY-MM-DD")];
       }
     }
-    function n(d) {
+    function u(d) {
       return e != null && e.disabledDate ? e.disabledDate(t, d) : !1;
     }
-    return u("div", null, [u(J, {
+    return n("div", null, [n(re, {
       style: {
         width: "300px"
       },
@@ -299,14 +301,14 @@ function we(e) {
       onChange: c,
       mode: e == null ? void 0 : e.type,
       allowClear: e == null ? void 0 : e.clearable,
-      "disabled-date": n,
+      "disabled-date": u,
       format: e == null ? void 0 : e.labelFormat,
       "value-format": e == null ? void 0 : e.valueFormat
     }, null)]);
   };
 }
-function Ve(e) {
-  return (l, r) => u(Z, {
+function _e(e) {
+  return (l, r) => n(le, {
     modelValue: l[r.key],
     "onUpdate:modelValue": (t) => l[r.key] = t,
     placeholder: e == null ? void 0 : e.placeholder,
@@ -314,44 +316,52 @@ function Ve(e) {
     maxLength: e == null ? void 0 : e.maxLength
   }, null);
 }
-function Fe(e) {
+function je(e) {
   return (l) => e(l);
 }
-function Ie() {
+function Pe() {
   return {
-    input: ge,
-    textarea: Ve,
-    select: Ce,
-    date: Se,
-    switch: xe,
-    dateRange: we,
-    render: Fe
+    input: Fe,
+    textarea: _e,
+    select: Ve,
+    date: xe,
+    switch: Ie,
+    dateRange: De,
+    render: je
   };
 }
-function De(e, l) {
+function ze(e, l) {
   l.render || (l.render = (t) => t.input());
   const r = l.render({
-    ...Ie()
+    ...Pe()
   });
   return {
     default: () => r(e, l)
   };
 }
-function _e(e, l) {
-  return B(z, {
+function Le(e, l) {
+  return A(N, {
     field: l.key,
     label: l.title
-  }, De(e, l));
+  }, ze(e, l));
 }
-function V(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !P(e);
+function I(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !O(e);
 }
-const Le = /* @__PURE__ */ g({
+const Me = /* @__PURE__ */ C({
   props: {
     form: {
       type: Object,
       required: !0
     },
+    value: {
+      type: Object,
+      required: !1
+    },
+    modelValue: {
+      type: Object,
+      required: !1
+    },
     minWidth: {
       type: Number,
       required: !1,
@@ -378,50 +388,64 @@ const Le = /* @__PURE__ */ g({
       default: !1
     }
   },
-  emits: ["submit", "cancel"],
-  expose: ["formSource"],
+  emits: ["submit", "cancel", "update:model-value"],
+  expose: ["formSource", "updateFormField", "updateFormSource", "reset"],
   setup(e) {
-    const l = Math.random().toString(32).slice(2).toUpperCase(), r = h(), [t] = ve(e.form), a = h(0), c = h(!0), n = () => c.value = !c.value;
-    $(w.id, l), $(w.source, t);
-    const d = s(() => {
-      if (!a.value)
+    const l = Math.random().toString(32).slice(2).toUpperCase(), r = m(), [t, a] = Ce(e.form, e.modelValue || e.value), c = m(0), u = m(!0), d = () => u.value = !u.value;
+    x(V.id, l), x(V.source, t);
+    const o = s(() => {
+      if (!c.value)
         return 1;
-      const i = e.form.reduce((f, b) => f + ((b == null ? void 0 : b.span) || 1), 0);
-      return a.value - i % a.value;
-    }), m = s(() => e.form.reduce((i, f) => (f.rule && (i[f.key] = f.rule), i), {}));
+      const f = e.form.reduce((i, S) => i + ((S == null ? void 0 : S.span) || 1), 0);
+      return c.value - f % c.value;
+    }), b = s(() => e.form.reduce((f, i) => (i.rule && (f[i.key] = i.rule), f), {}));
     function k() {
-      var f;
-      const i = (f = r.value) == null ? void 0 : f.$el;
-      a.value = Math.floor(i.offsetWidth / e.minWidth);
+      var i;
+      const f = (i = r.value) == null ? void 0 : i.$el;
+      c.value = Math.floor(f.offsetWidth / e.minWidth);
     }
-    return R(() => {
+    U(() => {
       k();
-    }), window.addEventListener("resize", k), {
+    });
+    function v(f, i) {
+      a({
+        ...t,
+        [f]: i
+      });
+    }
+    function R() {
+      var f;
+      (f = r.value) == null || f.resetFields();
+    }
+    return window.addEventListener("resize", k), {
       formId: l,
       formSource: t,
       formInstance: r,
-      formColumns: a,
-      formRules: m,
-      formCollspased: c,
-      formActiosSpan: d,
-      toggleFormCollapsed: n
+      formColumns: c,
+      formRules: b,
+      formCollspased: u,
+      formActiosSpan: o,
+      toggleFormCollapsed: d,
+      updateFormField: v,
+      updateFormSource: a,
+      reset: R
     };
   },
   render() {
     const e = () => {
-      this.$emit("submit", this.formSource);
+      this.$emit("submit", this.formSource), this.$emit("update:model-value", this.formSource);
     }, l = () => {
       const r = [], t = this.footer ? {
         span: this.formColumns
       } : {
         span: this.formActiosSpan
       };
-      if (this.searchable && (r.push(u(o, {
+      if (this.searchable && (r.push(n(h, {
         type: "primary",
         htmlType: "submit"
       }, {
         default: () => [y("搜索")]
-      })), r.push(u(o, {
+      })), r.push(n(h, {
         type: "secondary",
         onClick: () => {
           var a;
@@ -429,34 +453,34 @@ const Le = /* @__PURE__ */ g({
         }
       }, {
         default: () => [y("重置")]
-      }))), this.submitable && (r.push(u(o, {
+      }))), this.submitable && (r.push(n(h, {
         type: "primary",
         htmlType: "submit"
       }, {
         default: () => [y("提交")]
-      })), r.push(u(o, {
+      })), r.push(n(h, {
         type: "secondary",
         onClick: () => this.$emit("cancel")
       }, {
         default: () => [y("取消")]
-      }))), this.form.some((a) => !!a.collapsed) && r.push(u(o, {
+      }))), this.form.some((a) => !!a.collapsed) && r.push(n(h, {
         onClick: this.toggleFormCollapsed
       }, {
         default: () => this.formCollspased ? "展开" : "收起",
-        icon: () => this.formCollspased ? u(se, null, null) : u(be, null, null)
+        icon: () => this.formCollspased ? n(ke, null, null) : n($e, null, null)
       })), this.$slots.actions && r.push(...this.$slots.actions()), r.length)
-        return u(C, t, {
-          default: () => [u(z, {
+        return n(F, t, {
+          default: () => [n(N, {
             hideLabel: !0,
             contentClass: this.footer ? "form-footer" : ""
           }, {
-            default: () => [u(re, null, V(r) ? r : {
+            default: () => [n(ue, null, I(r) ? r : {
               default: () => [r]
             })]
           })]
         });
     };
-    return u(p, q({
+    return n(te, Y({
       rules: this.formRules,
       onSubmitSuccess: e
     }, {
@@ -466,16 +490,16 @@ const Le = /* @__PURE__ */ g({
       ref: (r) => this.formInstance = r,
       model: this.formSource
     }), {
-      default: () => [u(ee, {
+      default: () => [n(ae, {
         cols: this.formColumns,
         "col-gap": 10,
         "rol-gap": 10
       }, {
         default: () => [this.form.filter((r) => this.formCollspased ? !r.collapsed : !0).map((r) => {
           let t;
-          return u(C, {
+          return n(F, {
             span: r.span
-          }, V(t = _e(this.formSource, r)) ? t : {
+          }, I(t = Le(this.formSource, r)) ? t : {
             default: () => [t]
           });
         }), l()]
@@ -483,10 +507,20 @@ const Le = /* @__PURE__ */ g({
     });
   }
 });
-function Ne(e) {
+function Be(e) {
   return e;
 }
+function qe(e) {
+  const l = D(), r = m();
+  function t() {
+    var c, u;
+    const a = (u = (c = l == null ? void 0 : l.proxy) == null ? void 0 : c.$refs) == null ? void 0 : u[e];
+    a && (r.value = a);
+  }
+  return U(t), E(t), r;
+}
 export {
-  Le as FormRender,
-  Ne as defineForm
+  Me as FormRender,
+  Be as defineForm,
+  qe as useForm
 };

package/dist/es/utils/create-form-source.d.ts

@@ -1,3 +1,3 @@
 import { type Ref } from 'vue';
 import type { DataRecord, FormItemsOptions } from '../interfaces';
-export declare function createFormSource(form?: FormItemsOptions): [Ref<DataRecord>, (value: DataRecord) => void];
+export declare function createFormSource(form?: FormItemsOptions, source?: Record<string, any>): [Ref<DataRecord>, (value: DataRecord) => void];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gopowerteam/form-render",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": {
     "name": "zhuchentong",
     "email": "2037630@gmail.com"