@gopowerteam/form-render 0.0.9 → 0.0.10

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

@@ -10,6 +10,15 @@ export declare const FormRender: import("vue").DefineComponent<{
         type: PropType<Record<string, any>>;
         required: false;
     };
+    layout: {
+        type: PropType<"horizontal" | "vertical">;
+        required: false;
+        default: string;
+    };
+    columns: {
+        type: NumberConstructor;
+        required: false;
+    };
     modelValue: {
         type: PropType<Record<string, any>>;
         required: false;
@@ -307,6 +316,15 @@ export declare const FormRender: import("vue").DefineComponent<{
         type: PropType<Record<string, any>>;
         required: false;
     };
+    layout: {
+        type: PropType<"horizontal" | "vertical">;
+        required: false;
+        default: string;
+    };
+    columns: {
+        type: NumberConstructor;
+        required: false;
+    };
     modelValue: {
         type: PropType<Record<string, any>>;
         required: false;
@@ -343,6 +361,7 @@ export declare const FormRender: import("vue").DefineComponent<{
 }, {
     footer: boolean;
     name: string;
+    layout: "horizontal" | "vertical";
     minWidth: number;
     submitable: boolean;
     searchable: boolean;

package/dist/cjs/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),d=require("@arco-design/web-vue"),V=require("dayjs"),w=require("./resolver.cjs");const I=Symbol("ArcoConfigProvider"),_="arco",j="$arco",C=e=>{var t,r,a;const n=l.getCurrentInstance(),c=l.inject(I,void 0),u=(a=(r=c==null?void 0:c.prefixCls)!=null?r:(t=n==null?void 0:n.appContext.config.globalProperties[j])==null?void 0:t.classPrefix)!=null?a:_;return e?`${u}-${e}`:u},D=Object.prototype.toString;function $(e){return D.call(e)==="[object Number]"&&e===e}var F=(e,t)=>{for(const[r,a]of t)e[r]=a;return e};const P=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=C("icon"),a=l.computed(()=>[r,`${r}-down`,{[`${r}-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=>{t("click",u)}}}}),z=["stroke-width","stroke-linecap","stroke-linejoin"],B=l.createElementVNode("path",{d:"M39.6 17.443 24.043 33 8.487 17.443"},null,-1),O=[B];function L(e,t,r,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:t[0]||(t[0]=(...u)=>e.onClick&&e.onClick(...u))},O,14,z)}var b=F(P,[["render",L]]);const M=Object.assign(b,{install:(e,t)=>{var r;const a=(r=t==null?void 0:t.iconPrefix)!=null?r:"";e.component(a+b.name,b)}}),R=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=C("icon"),a=l.computed(()=>[r,`${r}-up`,{[`${r}-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=>{t("click",u)}}}}),U=["stroke-width","stroke-linecap","stroke-linejoin"],q=l.createElementVNode("path",{d:"M39.6 30.557 24.043 15 8.487 30.557"},null,-1),T=[q];function E(e,t,r,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:t[0]||(t[0]=(...u)=>e.onClick&&e.onClick(...u))},T,14,U)}var v=F(R,[["render",E]]);const A=Object.assign(v,{install:(e,t)=>{var r;const a=(r=t==null?void 0:t.iconPrefix)!=null?r:"";e.component(a+v.name,v)}}),S={id:Symbol("ID"),source:Symbol("Source")};function Y(e,t){const r=l.ref({});return e==null||e.forEach(n=>{let c=null;n.default&&(c=(typeof n.default=="function"?n.default():n.default)||null),t&&t[n.key]&&(c=t[n.key]),r.value[n.key]=c}),[r,n=>{r.value=n}]}function W(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(d.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(d.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(d.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(d.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(d.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 G(e){return(t,r)=>{switch(e==null?void 0:e.type){case"number":return l.createVNode(d.InputNumber,{modelValue:t[r.key],"onUpdate:modelValue":a=>t[r.key]=a,hideButton:!0,"read-only":e==null?void 0:e.readonly,placeholder:e==null?void 0:e.placeholder,allowClear:e==null?void 0:e.clearable},null);case"string":default:return l.createVNode(d.Input,{modelValue:t[r.key],"onUpdate:modelValue":a=>t[r.key]=a,placeholder:e==null?void 0:e.placeholder,readonly:e==null?void 0:e.readonly,allowClear:e==null?void 0:e.clearable},null)}}}function K(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}function Q(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,c)=>{let u;return e.default&&!t&&(n[c.key]=e.default,t=!0),l.createVNode(d.Select,{multiple:e.multiple,modelValue:n[c.key],"onUpdate:modelValue":f=>n[c.key]=f,placeholder:e.placeholder,allowClear:e.clearable,maxTagCount:e.maxTagCount??5,onChange:a},K(u=Array.from(r.value.entries()).map(([f,i])=>l.createVNode(d.Option,{key:f,value:f,label:i},null)))?u:{default:()=>[u]})}}function X(e){function t(){e!=null&&e.autoSumbit}return(r,a)=>(e!=null&&e.default&&(r[a.key]=e.default),l.createVNode(d.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 H(e){return(t,r)=>{let a=[];function n(f){a=f}function c(f){if(f&&f.length===2){const[i,h]=f.sort(),s=V(i).startOf("days"),y=V(h).endOf("days");t[r.key]=[s.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD"),y.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD")]}}function u(f){return e!=null&&e.disabledDate?e.disabledDate(a,f):!1}return l.createVNode("div",null,[l.createVNode(d.RangePicker,{style:{width:"300px"},modelValue:t[r.key],"onUpdate:modelValue":f=>t[r.key]=f,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 J(e){return(t,r)=>l.createVNode(d.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 Z(e){return t=>e(t)}function p(){return{input:G,textarea:J,select:Q,date:W,switch:X,dateRange:H,render:Z}}function ee(e,t){t.render||(t.render=a=>a.input());const r=t.render({...p()});return{default:()=>r(e,t)}}function re(e,t){return l.h(d.FormItem,{field:t.key,label:t.title},ee(e,t))}function g(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const N=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 t=Math.random().toString(32).slice(2).toUpperCase(),r=l.ref(),[a,n]=Y(e.form,e.modelValue||e.value),c=l.ref(0),u=l.ref(!0),f=()=>u.value=!u.value;l.provide(S.id,t),l.provide(S.source,a);const i=l.computed(()=>{if(!c.value)return 1;const o=e.form.reduce((m,k)=>m+((k==null?void 0:k.span)||1),0);return c.value-o%c.value}),h=l.computed(()=>e.form.reduce((o,m)=>(m.rule&&(o[m.key]=m.rule),o),{}));function s(){var m;const o=(m=r.value)==null?void 0:m.$el;c.value=Math.floor(o.offsetWidth/e.minWidth)}l.onMounted(()=>{s()});function y(o,m){a.value[o]=m,n({...a})}function x(){var o;(o=r.value)==null||o.resetFields()}return window.addEventListener("resize",s),{formId:t,formSource:a,formInstance:r,formColumns:c,formRules:h,formCollspased:u,formActiosSpan:i,toggleFormCollapsed:f,updateFormField:y,updateFormSource:n,reset:x}},render(){const e=()=>{this.$emit("submit",this.formSource),this.$emit("update:model-value",this.formSource)},t=()=>{const r=[],a=this.footer?{span:this.formColumns}:{span:this.formActiosSpan};if(this.searchable&&(r.push(l.createVNode(d.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("搜索")]})),r.push(l.createVNode(d.Button,{type:"secondary",onClick:()=>{var n;return(n=this.formInstance)==null?void 0:n.resetFields()}},{default:()=>[l.createTextVNode("重置")]}))),this.submitable&&(r.push(l.createVNode(d.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("提交")]})),r.push(l.createVNode(d.Button,{type:"secondary",onClick:()=>this.$emit("cancel")},{default:()=>[l.createTextVNode("取消")]}))),this.form.some(n=>!!n.collapsed)&&r.push(l.createVNode(d.Button,{onClick:this.toggleFormCollapsed},{default:()=>this.formCollspased?"展开":"收起",icon:()=>this.formCollspased?l.createVNode(M,null,null):l.createVNode(A,null,null)})),this.$slots.actions&&r.push(...this.$slots.actions()),r.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(r)?r:{default:()=>[r]})]})]})};return l.createVNode(d.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(d.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(d.GridItem,{span:r.span},g(a=re(this.formSource,r))?a:{default:()=>[a]})}),t()]})]})}});function te(e){return e}function le(e){const t=l.getCurrentInstance(),r=l.ref();function a(){var c,u;const n=(u=(c=t==null?void 0:t.proxy)==null?void 0:c.$refs)==null?void 0:u[e];n&&(r.value=n)}return l.onMounted(a),l.onUpdated(a),r}const ae={install(e,t){e.component("FormRender",N)}};exports.FormRenderResolver=w.FormRenderResolver;exports.FormRender=N;exports.default=ae;exports.defineForm=te;exports.useForm=le;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),d=require("@arco-design/web-vue"),V=require("dayjs"),w=require("./resolver.cjs");const I=Symbol("ArcoConfigProvider"),_="arco",j="$arco",C=e=>{var t,r,a;const u=l.getCurrentInstance(),c=l.inject(I,void 0),n=(a=(r=c==null?void 0:c.prefixCls)!=null?r:(t=u==null?void 0:u.appContext.config.globalProperties[j])==null?void 0:t.classPrefix)!=null?a:_;return e?`${n}-${e}`:n},D=Object.prototype.toString;function $(e){return D.call(e)==="[object Number]"&&e===e}var F=(e,t)=>{for(const[r,a]of t)e[r]=a;return e};const z=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=C("icon"),a=l.computed(()=>[r,`${r}-down`,{[`${r}-spin`]:e.spin}]),u=l.computed(()=>{const n={};return e.size&&(n.fontSize=$(e.size)?`${e.size}px`:e.size),e.rotate&&(n.transform=`rotate(${e.rotate}deg)`),n});return{cls:a,innerStyle:u,onClick:n=>{t("click",n)}}}}),P=["stroke-width","stroke-linecap","stroke-linejoin"],B=l.createElementVNode("path",{d:"M39.6 17.443 24.043 33 8.487 17.443"},null,-1),O=[B];function q(e,t,r,a,u,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:t[0]||(t[0]=(...n)=>e.onClick&&e.onClick(...n))},O,14,P)}var b=F(z,[["render",q]]);const L=Object.assign(b,{install:(e,t)=>{var r;const a=(r=t==null?void 0:t.iconPrefix)!=null?r:"";e.component(a+b.name,b)}}),M=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=C("icon"),a=l.computed(()=>[r,`${r}-up`,{[`${r}-spin`]:e.spin}]),u=l.computed(()=>{const n={};return e.size&&(n.fontSize=$(e.size)?`${e.size}px`:e.size),e.rotate&&(n.transform=`rotate(${e.rotate}deg)`),n});return{cls:a,innerStyle:u,onClick:n=>{t("click",n)}}}}),R=["stroke-width","stroke-linecap","stroke-linejoin"],U=l.createElementVNode("path",{d:"M39.6 30.557 24.043 15 8.487 30.557"},null,-1),T=[U];function E(e,t,r,a,u,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:t[0]||(t[0]=(...n)=>e.onClick&&e.onClick(...n))},T,14,R)}var v=F(M,[["render",E]]);const A=Object.assign(v,{install:(e,t)=>{var r;const a=(r=t==null?void 0:t.iconPrefix)!=null?r:"";e.component(a+v.name,v)}}),S={id:Symbol("ID"),source:Symbol("Source")};function Y(e,t){const r=l.ref({});return e==null||e.forEach(u=>{let c=null;u.default&&(c=(typeof u.default=="function"?u.default():u.default)||null),t&&t[u.key]&&(c=t[u.key]),r.value[u.key]=c}),[r,u=>{r.value=u}]}function W(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(d.WeekPicker,{modelValue:r[a.key],"onUpdate:modelValue":u=>r[a.key]=u,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"month":return l.createVNode(d.MonthPicker,{modelValue:r[a.key],"onUpdate:modelValue":u=>r[a.key]=u,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"quarter":return l.createVNode(d.QuarterPicker,{modelValue:r[a.key],"onUpdate:modelValue":u=>r[a.key]=u,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null);case"year":return l.createVNode(d.YearPicker,{modelValue:r[a.key],"onUpdate:modelValue":u=>r[a.key]=u,"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(d.DatePicker,{modelValue:r[a.key],"onUpdate:modelValue":u=>r[a.key]=u,"disabled-date":t,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null)}}}function G(e){return(t,r)=>{switch(e==null?void 0:e.type){case"number":return l.createVNode(d.InputNumber,{modelValue:t[r.key],"onUpdate:modelValue":a=>t[r.key]=a,hideButton:!0,"read-only":e==null?void 0:e.readonly,placeholder:e==null?void 0:e.placeholder,allowClear:e==null?void 0:e.clearable},null);case"string":default:return l.createVNode(d.Input,{modelValue:t[r.key],"onUpdate:modelValue":a=>t[r.key]=a,placeholder:e==null?void 0:e.placeholder,readonly:e==null?void 0:e.readonly,allowClear:e==null?void 0:e.clearable},null)}}}function K(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}function Q(e){let t=!1;const r=l.ref(new Map);e.options instanceof Function?e.options().then(u=>r.value=u):e.options instanceof Promise?e.options.then(u=>r.value=u):r.value=e.options;function a(){e.autoSumbit}return(u,c)=>{let n;return e.default&&!t&&(u[c.key]=e.default,t=!0),l.createVNode(d.Select,{multiple:e.multiple,modelValue:u[c.key],"onUpdate:modelValue":o=>u[c.key]=o,placeholder:e.placeholder,allowClear:e.clearable,maxTagCount:e.maxTagCount??5,onChange:a},K(n=Array.from(r.value.entries()).map(([o,i])=>l.createVNode(d.Option,{key:o,value:o,label:i},null)))?n:{default:()=>[n]})}}function X(e){function t(){e!=null&&e.autoSumbit}return(r,a)=>(e!=null&&e.default&&(r[a.key]=e.default),l.createVNode(d.Switch,{modelValue:r[a.key],"onUpdate:modelValue":u=>r[a.key]=u,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 H(e){return(t,r)=>{let a=[];function u(o){a=o}function c(o){if(o&&o.length===2){const[i,h]=o.sort(),s=V(i).startOf("days"),y=V(h).endOf("days");t[r.key]=[s.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD"),y.format((e==null?void 0:e.valueFormat)||"YYYY-MM-DD")]}}function n(o){return e!=null&&e.disabledDate?e.disabledDate(a,o):!1}return l.createVNode("div",null,[l.createVNode(d.RangePicker,{style:{width:"300px"},modelValue:t[r.key],"onUpdate:modelValue":o=>t[r.key]=o,onSelect:u,onChange:c,mode:e==null?void 0:e.type,allowClear:e==null?void 0:e.clearable,"disabled-date":n,format:e==null?void 0:e.labelFormat,"value-format":e==null?void 0:e.valueFormat},null)])}}function J(e){return(t,r)=>l.createVNode(d.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 Z(e){return t=>e(t)}function p(){return{input:G,textarea:J,select:Q,date:W,switch:X,dateRange:H,render:Z}}function ee(e,t){t.render||(t.render=a=>a.input());const r=t.render({...p()});return{default:()=>r(e,t)}}function re(e,t){return l.h(d.FormItem,{field:t.key,label:t.title},ee(e,t))}function g(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const N=l.defineComponent({props:{form:{type:Object,required:!0},value:{type:Object,required:!1},layout:{type:String,required:!1,default:"horizontal"},columns:{type:Number,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 t=Math.random().toString(32).slice(2).toUpperCase(),r=l.ref(),[a,u]=Y(e.form,e.modelValue||e.value),c=l.ref(e.columns||0),n=l.ref(!0),o=()=>n.value=!n.value;l.provide(S.id,t),l.provide(S.source,a);const i=l.computed(()=>{if(!c.value)return 1;const f=e.form.reduce((m,k)=>m+((k==null?void 0:k.span)||1),0);return c.value-f%c.value}),h=l.computed(()=>e.form.reduce((f,m)=>(m.rule&&(f[m.key]=m.rule),f),{}));function s(){var f;if(c.value===0){const m=(f=r.value)==null?void 0:f.$el;c.value=Math.floor(m.offsetWidth/e.minWidth)}}l.onMounted(()=>{s()});function y(f,m){a.value[f]=m,u({...a})}function x(){var f;(f=r.value)==null||f.resetFields()}return window.addEventListener("resize",s),{formId:t,formSource:a,formInstance:r,formColumns:c,formRules:h,formCollspased:n,formActiosSpan:i,toggleFormCollapsed:o,updateFormField:y,updateFormSource:u,reset:x}},render(){const e=()=>{this.$emit("submit",this.formSource),this.$emit("update:model-value",this.formSource)},t=()=>{const r=[],a=this.footer?{span:this.formColumns}:{span:this.formActiosSpan};if(this.searchable&&(r.push(l.createVNode(d.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("搜索")]})),r.push(l.createVNode(d.Button,{type:"secondary",onClick:()=>{var u;return(u=this.formInstance)==null?void 0:u.resetFields()}},{default:()=>[l.createTextVNode("重置")]}))),this.submitable&&(r.push(l.createVNode(d.Button,{type:"primary",htmlType:"submit"},{default:()=>[l.createTextVNode("提交")]})),r.push(l.createVNode(d.Button,{type:"secondary",onClick:()=>this.$emit("cancel")},{default:()=>[l.createTextVNode("取消")]}))),this.form.some(u=>!!u.collapsed)&&r.push(l.createVNode(d.Button,{onClick:this.toggleFormCollapsed},{default:()=>this.formCollspased?"展开":"收起",icon:()=>this.formCollspased?l.createVNode(L,null,null):l.createVNode(A,null,null)})),this.$slots.actions&&r.push(...this.$slots.actions()),r.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(r)?r:{default:()=>[r]})]})]})};return l.createVNode(d.Form,l.mergeProps({layout:this.$props.layout,rules:this.formRules,onSubmitSuccess:e},{name:this.name},{"auto-label-width":!0,ref:r=>this.formInstance=r,model:this.formSource}),{default:()=>[l.createVNode(d.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(d.GridItem,{span:r.span},g(a=re(this.formSource,r))?a:{default:()=>[a]})}),t()]})]})}});function te(e){return e}function le(e){const t=l.getCurrentInstance(),r=l.ref();function a(){var c,n;const u=(n=(c=t==null?void 0:t.proxy)==null?void 0:c.$refs)==null?void 0:n[e];u&&(r.value=u)}return l.onMounted(a),l.onUpdated(a),r}const ae={install(e,t){e.component("FormRender",N)}};exports.FormRenderResolver=w.FormRenderResolver;exports.FormRender=N;exports.default=ae;exports.defineForm=te;exports.useForm=le;

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

@@ -10,6 +10,15 @@ export declare const FormRender: import("vue").DefineComponent<{
         type: PropType<Record<string, any>>;
         required: false;
     };
+    layout: {
+        type: PropType<"horizontal" | "vertical">;
+        required: false;
+        default: string;
+    };
+    columns: {
+        type: NumberConstructor;
+        required: false;
+    };
     modelValue: {
         type: PropType<Record<string, any>>;
         required: false;
@@ -307,6 +316,15 @@ export declare const FormRender: import("vue").DefineComponent<{
         type: PropType<Record<string, any>>;
         required: false;
     };
+    layout: {
+        type: PropType<"horizontal" | "vertical">;
+        required: false;
+        default: string;
+    };
+    columns: {
+        type: NumberConstructor;
+        required: false;
+    };
     modelValue: {
         type: PropType<Record<string, any>>;
         required: false;
@@ -343,6 +361,7 @@ export declare const FormRender: import("vue").DefineComponent<{
 }, {
     footer: boolean;
     name: string;
+    layout: "horizontal" | "vertical";
     minWidth: number;
     submitable: boolean;
     searchable: boolean;

package/dist/es/index.mjs

@@ -1,16 +1,16 @@
-import { getCurrentInstance as _, inject as T, defineComponent as C, computed as s, openBlock as D, createElementBlock as j, normalizeClass as P, normalizeStyle as z, createElementVNode as L, ref as i, createVNode as n, isVNode as O, h as A, provide as x, onMounted as U, mergeProps as Y, createTextVNode as k, 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 { getCurrentInstance as _, inject as T, defineComponent as C, computed as s, openBlock as D, createElementBlock as j, normalizeClass as P, normalizeStyle as z, createElementVNode as L, ref as i, createVNode as c, isVNode as O, h as A, provide as x, onMounted as N, mergeProps as Y, createTextVNode as k, 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 U, Form as te, Grid as ae, GridItem as F, Button as h, Space as ue } from "@arco-design/web-vue";
 import w from "dayjs";
 import { FormRenderResolver as Ye } from "./resolver.mjs";
 const ne = Symbol("ArcoConfigProvider"), ce = "arco", de = "$arco", M = (e) => {
   var l, r, t;
-  const a = _(), 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;
+  const a = _(), n = T(ne, void 0), u = (t = (r = n == null ? void 0 : n.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 R(e) {
   return fe.call(e) === "[object Number]" && e === e;
 }
-var B = (e, l) => {
+var q = (e, l) => {
   for (const [r, t] of l)
     e[r] = t;
   return e;
@@ -61,7 +61,7 @@ const me = C({
 }), ie = ["stroke-width", "stroke-linecap", "stroke-linejoin"], se = /* @__PURE__ */ L("path", {
   d: "M39.6 17.443 24.043 33 8.487 17.443"
 }, null, -1), oe = [se];
-function he(e, l, r, t, a, c) {
+function he(e, l, r, t, a, n) {
   return D(), j("svg", {
     viewBox: "0 0 48 48",
     fill: "none",
@@ -75,7 +75,7 @@ function he(e, l, r, t, a, c) {
     onClick: l[0] || (l[0] = (...u) => e.onClick && e.onClick(...u))
   }, oe, 14, ie);
 }
-var g = /* @__PURE__ */ B(me, [["render", he]]);
+var g = /* @__PURE__ */ q(me, [["render", he]]);
 const ye = Object.assign(g, {
   install: (e, l) => {
     var r;
@@ -128,7 +128,7 @@ const ye = Object.assign(g, {
 }), 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), Se = [ve];
-function ge(e, l, r, t, a, c) {
+function ge(e, l, r, t, a, n) {
   return D(), j("svg", {
     viewBox: "0 0 48 48",
     fill: "none",
@@ -142,7 +142,7 @@ function ge(e, l, r, t, a, c) {
     onClick: l[0] || (l[0] = (...u) => e.onClick && e.onClick(...u))
   }, Se, 14, be);
 }
-var $ = /* @__PURE__ */ B(ke, [["render", ge]]);
+var $ = /* @__PURE__ */ q(ke, [["render", ge]]);
 const $e = Object.assign($, {
   install: (e, l) => {
     var r;
@@ -156,8 +156,8 @@ const $e = Object.assign($, {
 function Ce(e, l) {
   const r = i({});
   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;
+    let n = null;
+    a.default && (n = (typeof a.default == "function" ? a.default() : a.default) || null), l && l[a.key] && (n = l[a.key]), r.value[a.key] = n;
   }), [r, (a) => {
     r.value = a;
   }];
@@ -169,7 +169,7 @@ function xe(e) {
   return (r, t) => {
     switch (e == null ? void 0 : e.type) {
       case "week":
-        return n(X, {
+        return c(X, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -177,7 +177,7 @@ function xe(e) {
           "value-format": e == null ? void 0 : e.valueFormat
         }, null);
       case "month":
-        return n(Q, {
+        return c(Q, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -185,7 +185,7 @@ function xe(e) {
           "value-format": e == null ? void 0 : e.valueFormat
         }, null);
       case "quarter":
-        return n(K, {
+        return c(K, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -193,7 +193,7 @@ function xe(e) {
           "value-format": e == null ? void 0 : e.valueFormat
         }, null);
       case "year":
-        return n(G, {
+        return c(G, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -202,7 +202,7 @@ function xe(e) {
         }, null);
       case "date":
       default:
-        return n(W, {
+        return c(W, {
           modelValue: r[t.key],
           "onUpdate:modelValue": (a) => r[t.key] = a,
           "disabled-date": l,
@@ -216,7 +216,7 @@ function Fe(e) {
   return (l, r) => {
     switch (e == null ? void 0 : e.type) {
       case "number":
-        return n(J, {
+        return c(J, {
           modelValue: l[r.key],
           "onUpdate:modelValue": (t) => l[r.key] = t,
           hideButton: !0,
@@ -226,7 +226,7 @@ function Fe(e) {
         }, null);
       case "string":
       default:
-        return n(H, {
+        return c(H, {
           modelValue: l[r.key],
           "onUpdate:modelValue": (t) => l[r.key] = t,
           placeholder: e == null ? void 0 : e.placeholder,
@@ -246,17 +246,17 @@ function Ve(e) {
   function t() {
     e.autoSumbit;
   }
-  return (a, c) => {
+  return (a, n) => {
     let u;
-    return e.default && !l && (a[c.key] = e.default, l = !0), n(Z, {
+    return e.default && !l && (a[n.key] = e.default, l = !0), c(Z, {
       multiple: e.multiple,
-      modelValue: a[c.key],
-      "onUpdate:modelValue": (d) => a[c.key] = d,
+      modelValue: a[n.key],
+      "onUpdate:modelValue": (d) => a[n.key] = d,
       placeholder: e.placeholder,
       allowClear: e.clearable,
       maxTagCount: e.maxTagCount ?? 5,
       onChange: t
-    }, we(u = Array.from(r.value.entries()).map(([d, o]) => n(p, {
+    }, we(u = Array.from(r.value.entries()).map(([d, o]) => c(p, {
       key: d,
       value: d,
       label: o
@@ -269,7 +269,7 @@ function Ie(e) {
   function l() {
     e != null && e.autoSumbit;
   }
-  return (r, t) => (e != null && e.default && (r[t.key] = e.default), n(ee, {
+  return (r, t) => (e != null && e.default && (r[t.key] = e.default), c(ee, {
     modelValue: r[t.key],
     "onUpdate:modelValue": (a) => r[t.key] = a,
     checkedText: (e == null ? void 0 : e.openLabel) ?? "是",
@@ -285,7 +285,7 @@ function _e(e) {
     function a(d) {
       t = d;
     }
-    function c(d) {
+    function n(d) {
       if (d && d.length === 2) {
         const [o, b] = d.sort(), y = w(o).startOf("days"), v = w(b).endOf("days");
         l[r.key] = [y.format((e == null ? void 0 : e.valueFormat) || "YYYY-MM-DD"), v.format((e == null ? void 0 : e.valueFormat) || "YYYY-MM-DD")];
@@ -294,14 +294,14 @@ function _e(e) {
     function u(d) {
       return e != null && e.disabledDate ? e.disabledDate(t, d) : !1;
     }
-    return n("div", null, [n(re, {
+    return c("div", null, [c(re, {
       style: {
         width: "300px"
       },
       modelValue: l[r.key],
       "onUpdate:modelValue": (d) => l[r.key] = d,
       onSelect: a,
-      onChange: c,
+      onChange: n,
       mode: e == null ? void 0 : e.type,
       allowClear: e == null ? void 0 : e.clearable,
       "disabled-date": u,
@@ -311,7 +311,7 @@ function _e(e) {
   };
 }
 function De(e) {
-  return (l, r) => n(le, {
+  return (l, r) => c(le, {
     modelValue: l[r.key],
     "onUpdate:modelValue": (t) => l[r.key] = t,
     placeholder: e == null ? void 0 : e.placeholder,
@@ -343,7 +343,7 @@ function ze(e, l) {
   };
 }
 function Le(e, l) {
-  return A(N, {
+  return A(U, {
     field: l.key,
     label: l.title
   }, ze(e, l));
@@ -361,6 +361,15 @@ const Oe = /* @__PURE__ */ C({
       type: Object,
       required: !1
     },
+    layout: {
+      type: String,
+      required: !1,
+      default: "horizontal"
+    },
+    columns: {
+      type: Number,
+      required: !1
+    },
     modelValue: {
       type: Object,
       required: !1
@@ -394,20 +403,22 @@ const Oe = /* @__PURE__ */ C({
   emits: ["submit", "cancel", "update:model-value"],
   expose: ["formSource", "updateFormField", "updateFormSource", "reset"],
   setup(e) {
-    const l = Math.random().toString(32).slice(2).toUpperCase(), r = i(), [t, a] = Ce(e.form, e.modelValue || e.value), c = i(0), u = i(!0), d = () => u.value = !u.value;
+    const l = Math.random().toString(32).slice(2).toUpperCase(), r = i(), [t, a] = Ce(e.form, e.modelValue || e.value), n = i(e.columns || 0), u = i(!0), d = () => u.value = !u.value;
     x(V.id, l), x(V.source, t);
     const o = s(() => {
-      if (!c.value)
+      if (!n.value)
         return 1;
       const f = e.form.reduce((m, S) => m + ((S == null ? void 0 : S.span) || 1), 0);
-      return c.value - f % c.value;
+      return n.value - f % n.value;
     }), b = s(() => e.form.reduce((f, m) => (m.rule && (f[m.key] = m.rule), f), {}));
     function y() {
-      var m;
-      const f = (m = r.value) == null ? void 0 : m.$el;
-      c.value = Math.floor(f.offsetWidth / e.minWidth);
+      var f;
+      if (n.value === 0) {
+        const m = (f = r.value) == null ? void 0 : f.$el;
+        n.value = Math.floor(m.offsetWidth / e.minWidth);
+      }
     }
-    U(() => {
+    N(() => {
       y();
     });
     function v(f, m) {
@@ -415,7 +426,7 @@ const Oe = /* @__PURE__ */ C({
         ...t
       });
     }
-    function q() {
+    function B() {
       var f;
       (f = r.value) == null || f.resetFields();
     }
@@ -423,14 +434,14 @@ const Oe = /* @__PURE__ */ C({
       formId: l,
       formSource: t,
       formInstance: r,
-      formColumns: c,
+      formColumns: n,
       formRules: b,
       formCollspased: u,
       formActiosSpan: o,
       toggleFormCollapsed: d,
       updateFormField: v,
       updateFormSource: a,
-      reset: q
+      reset: B
     };
   },
   render() {
@@ -442,12 +453,12 @@ const Oe = /* @__PURE__ */ C({
       } : {
         span: this.formActiosSpan
       };
-      if (this.searchable && (r.push(n(h, {
+      if (this.searchable && (r.push(c(h, {
         type: "primary",
         htmlType: "submit"
       }, {
         default: () => [k("搜索")]
-      })), r.push(n(h, {
+      })), r.push(c(h, {
         type: "secondary",
         onClick: () => {
           var a;
@@ -455,34 +466,35 @@ const Oe = /* @__PURE__ */ C({
         }
       }, {
         default: () => [k("重置")]
-      }))), this.submitable && (r.push(n(h, {
+      }))), this.submitable && (r.push(c(h, {
         type: "primary",
         htmlType: "submit"
       }, {
         default: () => [k("提交")]
-      })), r.push(n(h, {
+      })), r.push(c(h, {
         type: "secondary",
         onClick: () => this.$emit("cancel")
       }, {
         default: () => [k("取消")]
-      }))), this.form.some((a) => !!a.collapsed) && r.push(n(h, {
+      }))), this.form.some((a) => !!a.collapsed) && r.push(c(h, {
         onClick: this.toggleFormCollapsed
       }, {
         default: () => this.formCollspased ? "展开" : "收起",
-        icon: () => this.formCollspased ? n(ye, null, null) : n($e, null, null)
+        icon: () => this.formCollspased ? c(ye, null, null) : c($e, null, null)
       })), this.$slots.actions && r.push(...this.$slots.actions()), r.length)
-        return n(F, t, {
-          default: () => [n(N, {
+        return c(F, t, {
+          default: () => [c(U, {
             hideLabel: !0,
             contentClass: this.footer ? "form-footer" : ""
           }, {
-            default: () => [n(ue, null, I(r) ? r : {
+            default: () => [c(ue, null, I(r) ? r : {
               default: () => [r]
             })]
           })]
         });
     };
-    return n(te, Y({
+    return c(te, Y({
+      layout: this.$props.layout,
       rules: this.formRules,
       onSubmitSuccess: e
     }, {
@@ -492,14 +504,14 @@ const Oe = /* @__PURE__ */ C({
       ref: (r) => this.formInstance = r,
       model: this.formSource
     }), {
-      default: () => [n(ae, {
+      default: () => [c(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 n(F, {
+          return c(F, {
             span: r.span
           }, I(t = Le(this.formSource, r)) ? t : {
             default: () => [t]
@@ -512,16 +524,16 @@ const Oe = /* @__PURE__ */ C({
 function Re(e) {
   return e;
 }
-function Be(e) {
+function qe(e) {
   const l = _(), r = i();
   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];
+    var n, u;
+    const a = (u = (n = l == null ? void 0 : l.proxy) == null ? void 0 : n.$refs) == null ? void 0 : u[e];
     a && (r.value = a);
   }
-  return U(t), E(t), r;
+  return N(t), E(t), r;
 }
-const qe = {
+const Be = {
   install(e, l) {
     e.component("FormRender", Oe);
   }
@@ -529,7 +541,7 @@ const qe = {
 export {
   Oe as FormRender,
   Ye as FormRenderResolver,
-  qe as default,
+  Be as default,
   Re as defineForm,
-  Be as useForm
+  qe as useForm
 };

package/package.json

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