import{Q as q,R as j,T as D,U as z,V as T,W as N,X as O,Y as Q,Z as E,$ as _,a0 as M,a1 as $,d as S,B as Z,_ as G,a2 as V,j as p,k as y,l as W,w as e,f as o,e as a,b as n,r as R,a3 as B,P as nn,a as L,h as an,q as tn,F as sn,a4 as K,a5 as U,c as P,a6 as J,L as X,n as x}from"./index.c1b9962e.js";import{M as on}from"./MinusCircleOutlined.ae0bf06f.js";import{L as en}from"./LockOutlined.8533f5c5.js";import{U as pn}from"./UserOutlined.f4b09e7f.js";var cn="[object String]";function ln(s){return typeof s=="string"||!q(s)&&j(s)&&D(s)==cn}function un(s,t){return z(t,function(g){return s[g]})}function kn(s){return s==null?[]:un(s,T(s))}function rn(s){for(var t,g=[];!(t=s.next()).done;)g.push(t.value);return g}var gn="[object Map]",dn="[object Set]",H=N?N.iterator:void 0;function mn(s){if(!s)return[];if(O(s))return ln(s)?Q(s):E(s);if(H&&s[H])return rn(s[H]());var t=_(s),g=t==gn?M:t==dn?$:kn;return g(s)}const In=S({setup(){const s=Z({name:"",region:void 0,date1:void 0,delivery:!1,type:[],resource:"",desc:""});return{labelCol:{span:4},wrapperCol:{span:14},formState:s,onSubmit:()=>{console.log("submit!",V(s))}}}});function Cn(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-select-option"),d=p("a-select"),k=p("a-date-picker"),r=p("a-switch"),I=p("a-checkbox"),m=p("a-checkbox-group"),v=p("a-radio"),A=p("a-radio-group"),f=p("a-button"),Y=p("a-form"),F=p("demo-box");return y(),W(F,{jsfiddle:{us:"Basic Form data control. Includes layout, initial values, validation and submit.",cn:"\u57FA\u672C\u7684\u8868\u5355\u6570\u636E\u57DF\u63A7\u5236\u5C55\u793A\uFF0C\u5305\u542B\u5E03\u5C40\u3001\u521D\u59CB\u5316\u3001\u9A8C\u8BC1\u3001\u63D0\u4EA4\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u57FA\u672C\u7684\u8868\u5355\u6570\u636E\u57DF\u63A7\u5236\u5C55\u793A\uFF0C\u5305\u542B\u5E03\u5C40\u3001\u521D\u59CB\u5316\u3001\u9A8C\u8BC1\u3001\u63D0\u4EA4\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Basic Form data control. Includes layout, initial values, validation and submit.</p>
`,order:0,title:{"zh-CN":"\u57FA\u672C\u4F7F\u7528","en-US":"Basic Usage"},relativePath:"src/docs/form/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOm1vZGVsPSJmb3JtU3RhdGUiIDpsYWJlbC1jb2w9ImxhYmVsQ29sIiA6d3JhcHBlci1jb2w9IndyYXBwZXJDb2wiPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBuYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSB6b25lIj4KICAgICAgPGEtc2VsZWN0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5yZWdpb24iIHBsYWNlaG9sZGVyPSJwbGVhc2Ugc2VsZWN0IHlvdXIgem9uZSI+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0ic2hhbmdoYWkiPlpvbmUgb25lPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0iYmVpamluZyI+Wm9uZSB0d288L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgPC9hLXNlbGVjdD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHRpbWUiPgogICAgICA8YS1kYXRlLXBpY2tlcgogICAgICAgIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5kYXRlMSIKICAgICAgICBzaG93LXRpbWUKICAgICAgICB0eXBlPSJkYXRlIgogICAgICAgIHBsYWNlaG9sZGVyPSJQaWNrIGEgZGF0ZSIKICAgICAgICBzdHlsZT0id2lkdGg6IDEwMCUiCiAgICAgIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJJbnN0YW50IGRlbGl2ZXJ5Ij4KICAgICAgPGEtc3dpdGNoIHYtbW9kZWw6Y2hlY2tlZD0iZm9ybVN0YXRlLmRlbGl2ZXJ5IiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgdHlwZSI+CiAgICAgIDxhLWNoZWNrYm94LWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS50eXBlIj4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMSIgbmFtZT0idHlwZSI+T25saW5lPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIyIiBuYW1lPSJ0eXBlIj5Qcm9tb3Rpb248L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjMiIG5hbWU9InR5cGUiPk9mZmxpbmU8L2EtY2hlY2tib3g+CiAgICAgIDwvYS1jaGVja2JveC1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IlJlc291cmNlcyI+CiAgICAgIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5yZXNvdXJjZSI+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjEiPlNwb25zb3I8L2EtcmFkaW8+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjIiPlZlbnVlPC9hLXJhZGlvPgogICAgICA8L2EtcmFkaW8tZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBmb3JtIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLmRlc2MiIHR5cGU9InRleHRhcmVhIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib25TdWJtaXQiPkNyZWF0ZTwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiBzdHlsZT0ibWFyZ2luLWxlZnQ6IDEwcHgiPkNhbmNlbDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgTW9tZW50IH0gZnJvbSAnbW9tZW50JzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SYXcsIFVud3JhcFJlZiB9IGZyb20gJ3Z1ZSc7CmludGVyZmFjZSBGb3JtU3RhdGUgewogIG5hbWU6IHN0cmluZzsKICByZWdpb246IHN0cmluZyB8IHVuZGVmaW5lZDsKICBkYXRlMTogTW9tZW50IHwgdW5kZWZpbmVkOwogIGRlbGl2ZXJ5OiBib29sZWFuOwogIHR5cGU6IHN0cmluZ1tdOwogIHJlc291cmNlOiBzdHJpbmc7CiAgZGVzYzogc3RyaW5nOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtU3RhdGU6IFVud3JhcFJlZjxGb3JtU3RhdGU+ID0gcmVhY3RpdmUoewogICAgICBuYW1lOiAnJywKICAgICAgcmVnaW9uOiB1bmRlZmluZWQsCiAgICAgIGRhdGUxOiB1bmRlZmluZWQsCiAgICAgIGRlbGl2ZXJ5OiBmYWxzZSwKICAgICAgdHlwZTogW10sCiAgICAgIHJlc291cmNlOiAnJywKICAgICAgZGVzYzogJycsCiAgICB9KTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICBjb25zb2xlLmxvZygnc3VibWl0IScsIHRvUmF3KGZvcm1TdGF0ZSkpOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGxhYmVsQ29sOiB7IHNwYW46IDQgfSwKICAgICAgd3JhcHBlckNvbDogeyBzcGFuOiAxNCB9LAogICAgICBmb3JtU3RhdGUsCiAgICAgIG9uU3VibWl0LAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOm1vZGVsPSJmb3JtU3RhdGUiIDpsYWJlbC1jb2w9ImxhYmVsQ29sIiA6d3JhcHBlci1jb2w9IndyYXBwZXJDb2wiPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBuYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSB6b25lIj4KICAgICAgPGEtc2VsZWN0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5yZWdpb24iIHBsYWNlaG9sZGVyPSJwbGVhc2Ugc2VsZWN0IHlvdXIgem9uZSI+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0ic2hhbmdoYWkiPlpvbmUgb25lPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0iYmVpamluZyI+Wm9uZSB0d288L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgPC9hLXNlbGVjdD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHRpbWUiPgogICAgICA8YS1kYXRlLXBpY2tlcgogICAgICAgIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5kYXRlMSIKICAgICAgICBzaG93LXRpbWUKICAgICAgICB0eXBlPSJkYXRlIgogICAgICAgIHBsYWNlaG9sZGVyPSJQaWNrIGEgZGF0ZSIKICAgICAgICBzdHlsZT0id2lkdGg6IDEwMCUiCiAgICAgIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJJbnN0YW50IGRlbGl2ZXJ5Ij4KICAgICAgPGEtc3dpdGNoIHYtbW9kZWw6Y2hlY2tlZD0iZm9ybVN0YXRlLmRlbGl2ZXJ5IiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgdHlwZSI+CiAgICAgIDxhLWNoZWNrYm94LWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS50eXBlIj4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMSIgbmFtZT0idHlwZSI+T25saW5lPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIyIiBuYW1lPSJ0eXBlIj5Qcm9tb3Rpb248L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjMiIG5hbWU9InR5cGUiPk9mZmxpbmU8L2EtY2hlY2tib3g+CiAgICAgIDwvYS1jaGVja2JveC1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IlJlc291cmNlcyI+CiAgICAgIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5yZXNvdXJjZSI+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjEiPlNwb25zb3I8L2EtcmFkaW8+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjIiPlZlbnVlPC9hLXJhZGlvPgogICAgICA8L2EtcmFkaW8tZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBmb3JtIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLmRlc2MiIHR5cGU9InRleHRhcmVhIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib25TdWJtaXQiPkNyZWF0ZTwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiBzdHlsZT0ibWFyZ2luLWxlZnQ6IDEwcHgiPkNhbmNlbDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JhdyB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtU3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6ICcnLAogICAgICByZWdpb246IHVuZGVmaW5lZCwKICAgICAgZGF0ZTE6IHVuZGVmaW5lZCwKICAgICAgZGVsaXZlcnk6IGZhbHNlLAogICAgICB0eXBlOiBbXSwKICAgICAgcmVzb3VyY2U6ICcnLAogICAgICBkZXNjOiAnJywKICAgIH0pOwogICAgY29uc3Qgb25TdWJtaXQgPSAoKSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdzdWJtaXQhJywgdG9SYXcoZm9ybVN0YXRlKSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICBzcGFuOiA0LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgc3BhbjogMTQsCiAgICAgIH0sCiAgICAgIGZvcm1TdGF0ZSwKICAgICAgb25TdWJtaXQsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:e(()=>[o(Y,{model:s.formState,"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,{label:"Activity name"},{default:e(()=>[o(u,{value:s.formState.name,"onUpdate:value":t[0]||(t[0]=h=>s.formState.name=h)},null,8,["value"])]),_:1}),o(c,{label:"Activity zone"},{default:e(()=>[o(d,{value:s.formState.region,"onUpdate:value":t[1]||(t[1]=h=>s.formState.region=h),placeholder:"please select your zone"},{default:e(()=>[o(l,{value:"shanghai"},{default:e(()=>t[7]||(t[7]=[a("Zone one")])),_:1,__:[7]}),o(l,{value:"beijing"},{default:e(()=>t[8]||(t[8]=[a("Zone two")])),_:1,__:[8]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Activity time"},{default:e(()=>[o(k,{value:s.formState.date1,"onUpdate:value":t[2]||(t[2]=h=>s.formState.date1=h),"show-time":"",type:"date",placeholder:"Pick a date",style:{width:"100%"}},null,8,["value"])]),_:1}),o(c,{label:"Instant delivery"},{default:e(()=>[o(r,{checked:s.formState.delivery,"onUpdate:checked":t[3]||(t[3]=h=>s.formState.delivery=h)},null,8,["checked"])]),_:1}),o(c,{label:"Activity type"},{default:e(()=>[o(m,{value:s.formState.type,"onUpdate:value":t[4]||(t[4]=h=>s.formState.type=h)},{default:e(()=>[o(I,{value:"1",name:"type"},{default:e(()=>t[9]||(t[9]=[a("Online")])),_:1,__:[9]}),o(I,{value:"2",name:"type"},{default:e(()=>t[10]||(t[10]=[a("Promotion")])),_:1,__:[10]}),o(I,{value:"3",name:"type"},{default:e(()=>t[11]||(t[11]=[a("Offline")])),_:1,__:[11]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Resources"},{default:e(()=>[o(A,{value:s.formState.resource,"onUpdate:value":t[5]||(t[5]=h=>s.formState.resource=h)},{default:e(()=>[o(v,{value:"1"},{default:e(()=>t[12]||(t[12]=[a("Sponsor")])),_:1,__:[12]}),o(v,{value:"2"},{default:e(()=>t[13]||(t[13]=[a("Venue")])),_:1,__:[13]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Activity form"},{default:e(()=>[o(u,{value:s.formState.desc,"onUpdate:value":t[6]||(t[6]=h=>s.formState.desc=h),type:"textarea"},null,8,["value"])]),_:1}),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(f,{type:"primary",onClick:s.onSubmit},{default:e(()=>t[14]||(t[14]=[a("Create")])),_:1,__:[14]},8,["onClick"]),o(f,{style:{"margin-left":"10px"}},{default:e(()=>t[15]||(t[15]=[a("Cancel")])),_:1,__:[15]})]),_:1})]),_:1},8,["model","label-col","wrapper-col"])]),htmlCode:e(()=>t[16]||(t[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity time"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-date-picker")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.date1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"show-time"),a(`
        `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pick a date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Instant delivery"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Resources"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Sponsor"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Venue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity form"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.desc"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("textarea"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Moment "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'moment'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw"),n("span",{class:"token punctuation"},","),a(" UnwrapRef "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"FormState"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(" string "),n("span",{class:"token operator"},"|"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(" Moment "),n("span",{class:"token operator"},"|"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(" boolean"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"formState"),n("span",{class:"token operator"},":"),a(" UnwrapRef"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'submit!'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[17]||(t[17]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity time"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-date-picker")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.date1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"show-time"),a(`
        `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pick a date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Instant delivery"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Resources"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Sponsor"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Venue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity form"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.desc"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("textarea"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'submit!'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var bn=G(In,[["render",Cn]]);const An=S({setup(){const s=R(),t=Z({pass:"",checkPass:"",age:void 0});return{formState:t,formRef:s,rules:{pass:[{required:!0,validator:async(k,r)=>r===""?Promise.reject("Please input the password"):(t.checkPass!==""&&s.value.validateFields("checkPass"),Promise.resolve()),trigger:"change"}],checkPass:[{validator:async(k,r)=>r===""?Promise.reject("Please input the password again"):r!==t.pass?Promise.reject("Two inputs don't match!"):Promise.resolve(),trigger:"change"}],age:[{validator:async(k,r)=>r?Number.isInteger(r)?r<18?Promise.reject("Age must be greater than 18"):Promise.resolve():Promise.reject("Please input digits"):Promise.reject("Please input the age"),trigger:"change"}]},layout:{labelCol:{span:4},wrapperCol:{span:14}},handleFinishFailed:k=>{console.log(k)},handleFinish:k=>{console.log(k,t)},resetForm:()=>{s.value.resetFields()}}}});function yn(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-input-number"),d=p("a-button"),k=p("a-form"),r=p("demo-box");return y(),W(r,{jsfiddle:{us:"This example shows how to customize your own validation rules to finish a two-factor password verification.\nYou can use `has-feedback` to reflect validation result as an icon.\nSee more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).",cn:"\u8FD9\u4E2A\u4F8B\u5B50\u4E2D\u5C55\u793A\u4E86\u5982\u4F55\u4F7F\u7528\u81EA\u5B9A\u4E49\u9A8C\u8BC1\u89C4\u5219\u6765\u5B8C\u6210\u5BC6\u7801\u7684\u4E8C\u6B21\u9A8C\u8BC1\u3002\u672C\u4F8B\u8FD8\u4F7F\u7528 `has-feedback` \u5C5E\u6027\u4E3A\u8F93\u5165\u6846\u6DFB\u52A0\u4E86\u8868\u793A\u6821\u9A8C\u7ED3\u679C\u7684\u53CD\u9988\u56FE\u6807\u3002\n\u66F4\u591A\u9AD8\u7EA7\u7528\u6CD5\u53EF\u53C2\u8003 [async-validator](https://github.com/yiminghe/async-validator)",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u8FD9\u4E2A\u4F8B\u5B50\u4E2D\u5C55\u793A\u4E86\u5982\u4F55\u4F7F\u7528\u81EA\u5B9A\u4E49\u9A8C\u8BC1\u89C4\u5219\u6765\u5B8C\u6210\u5BC6\u7801\u7684\u4E8C\u6B21\u9A8C\u8BC1\u3002\u672C\u4F8B\u8FD8\u4F7F\u7528 <code>has-feedback</code> \u5C5E\u6027\u4E3A\u8F93\u5165\u6846\u6DFB\u52A0\u4E86\u8868\u793A\u6821\u9A8C\u7ED3\u679C\u7684\u53CD\u9988\u56FE\u6807\u3002
\u66F4\u591A\u9AD8\u7EA7\u7528\u6CD5\u53EF\u53C2\u8003 <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a></p>
<h2 id="en-us">en-US</h2>
<p>This example shows how to customize your own validation rules to finish a two-factor password verification.
You can use <code>has-feedback</code> to reflect validation result as an icon.
See more advanced usage at <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>.</p>
`,order:1,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219","en-US":"Custom validation rules"},relativePath:"src/docs/form/demo/custom-validation.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0KICAgIG5hbWU9ImN1c3RvbS12YWxpZGF0aW9uIgogICAgcmVmPSJmb3JtUmVmIgogICAgOm1vZGVsPSJmb3JtU3RhdGUiCiAgICA6cnVsZXM9InJ1bGVzIgogICAgdi1iaW5kPSJsYXlvdXQiCiAgICBAZmluaXNoPSJoYW5kbGVGaW5pc2giCiAgICBAZmluaXNoRmFpbGVkPSJoYW5kbGVGaW5pc2hGYWlsZWQiCiAgPgogICAgPGEtZm9ybS1pdGVtIGhhcy1mZWVkYmFjayBsYWJlbD0iUGFzc3dvcmQiIG5hbWU9InBhc3MiPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUucGFzcyIgdHlwZT0icGFzc3dvcmQiIGF1dG9jb21wbGV0ZT0ib2ZmIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBoYXMtZmVlZGJhY2sgbGFiZWw9IkNvbmZpcm0iIG5hbWU9ImNoZWNrUGFzcyI+CiAgICAgIDxhLWlucHV0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5jaGVja1Bhc3MiIHR5cGU9InBhc3N3b3JkIiBhdXRvY29tcGxldGU9Im9mZiIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gaGFzLWZlZWRiYWNrIGxhYmVsPSJBZ2UiIG5hbWU9ImFnZSI+CiAgICAgIDxhLWlucHV0LW51bWJlciB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUuYWdlIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIGh0bWwtdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0Rm9ybSI+UmVzZXQ8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFJ1bGVPYmplY3QsIFZhbGlkYXRlRXJyb3JFbnRpdHkgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZS9lcy9mb3JtL2ludGVyZmFjZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHJlZiwgVW53cmFwUmVmIH0gZnJvbSAndnVlJzsKaW50ZXJmYWNlIEZvcm1TdGF0ZSB7CiAgcGFzczogc3RyaW5nOwogIGNoZWNrUGFzczogc3RyaW5nOwogIGFnZTogbnVtYmVyIHwgdW5kZWZpbmVkOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtUmVmID0gcmVmKCk7CiAgICBjb25zdCBmb3JtU3RhdGU6IFVud3JhcFJlZjxGb3JtU3RhdGU+ID0gcmVhY3RpdmUoewogICAgICBwYXNzOiAnJywKICAgICAgY2hlY2tQYXNzOiAnJywKICAgICAgYWdlOiB1bmRlZmluZWQsCiAgICB9KTsKICAgIGxldCBjaGVja0FnZSA9IGFzeW5jIChydWxlOiBSdWxlT2JqZWN0LCB2YWx1ZTogbnVtYmVyKSA9PiB7CiAgICAgIGlmICghdmFsdWUpIHsKICAgICAgICByZXR1cm4gUHJvbWlzZS5yZWplY3QoJ1BsZWFzZSBpbnB1dCB0aGUgYWdlJyk7CiAgICAgIH0KICAgICAgaWYgKCFOdW1iZXIuaXNJbnRlZ2VyKHZhbHVlKSkgewogICAgICAgIHJldHVybiBQcm9taXNlLnJlamVjdCgnUGxlYXNlIGlucHV0IGRpZ2l0cycpOwogICAgICB9IGVsc2UgewogICAgICAgIGlmICh2YWx1ZSA8IDE4KSB7CiAgICAgICAgICByZXR1cm4gUHJvbWlzZS5yZWplY3QoJ0FnZSBtdXN0IGJlIGdyZWF0ZXIgdGhhbiAxOCcpOwogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICByZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCk7CiAgICAgICAgfQogICAgICB9CiAgICB9OwogICAgbGV0IHZhbGlkYXRlUGFzcyA9IGFzeW5jIChydWxlOiBSdWxlT2JqZWN0LCB2YWx1ZTogc3RyaW5nKSA9PiB7CiAgICAgIGlmICh2YWx1ZSA9PT0gJycpIHsKICAgICAgICByZXR1cm4gUHJvbWlzZS5yZWplY3QoJ1BsZWFzZSBpbnB1dCB0aGUgcGFzc3dvcmQnKTsKICAgICAgfSBlbHNlIHsKICAgICAgICBpZiAoZm9ybVN0YXRlLmNoZWNrUGFzcyAhPT0gJycpIHsKICAgICAgICAgIGZvcm1SZWYudmFsdWUudmFsaWRhdGVGaWVsZHMoJ2NoZWNrUGFzcycpOwogICAgICAgIH0KICAgICAgICByZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCk7CiAgICAgIH0KICAgIH07CiAgICBsZXQgdmFsaWRhdGVQYXNzMiA9IGFzeW5jIChydWxlOiBSdWxlT2JqZWN0LCB2YWx1ZTogc3RyaW5nKSA9PiB7CiAgICAgIGlmICh2YWx1ZSA9PT0gJycpIHsKICAgICAgICByZXR1cm4gUHJvbWlzZS5yZWplY3QoJ1BsZWFzZSBpbnB1dCB0aGUgcGFzc3dvcmQgYWdhaW4nKTsKICAgICAgfSBlbHNlIGlmICh2YWx1ZSAhPT0gZm9ybVN0YXRlLnBhc3MpIHsKICAgICAgICByZXR1cm4gUHJvbWlzZS5yZWplY3QoIlR3byBpbnB1dHMgZG9uJ3QgbWF0Y2ghIik7CiAgICAgIH0gZWxzZSB7CiAgICAgICAgcmV0dXJuIFByb21pc2UucmVzb2x2ZSgpOwogICAgICB9CiAgICB9OwoKICAgIGNvbnN0IHJ1bGVzID0gewogICAgICBwYXNzOiBbeyByZXF1aXJlZDogdHJ1ZSwgdmFsaWRhdG9yOiB2YWxpZGF0ZVBhc3MsIHRyaWdnZXI6ICdjaGFuZ2UnIH1dLAogICAgICBjaGVja1Bhc3M6IFt7IHZhbGlkYXRvcjogdmFsaWRhdGVQYXNzMiwgdHJpZ2dlcjogJ2NoYW5nZScgfV0sCiAgICAgIGFnZTogW3sgdmFsaWRhdG9yOiBjaGVja0FnZSwgdHJpZ2dlcjogJ2NoYW5nZScgfV0sCiAgICB9OwogICAgY29uc3QgbGF5b3V0ID0gewogICAgICBsYWJlbENvbDogeyBzcGFuOiA0IH0sCiAgICAgIHdyYXBwZXJDb2w6IHsgc3BhbjogMTQgfSwKICAgIH07CiAgICBjb25zdCBoYW5kbGVGaW5pc2ggPSAodmFsdWVzOiBGb3JtU3RhdGUpID0+IHsKICAgICAgY29uc29sZS5sb2codmFsdWVzLCBmb3JtU3RhdGUpOwogICAgfTsKICAgIGNvbnN0IGhhbmRsZUZpbmlzaEZhaWxlZCA9IChlcnJvcnM6IFZhbGlkYXRlRXJyb3JFbnRpdHk8Rm9ybVN0YXRlPikgPT4gewogICAgICBjb25zb2xlLmxvZyhlcnJvcnMpOwogICAgfTsKICAgIGNvbnN0IHJlc2V0Rm9ybSA9ICgpID0+IHsKICAgICAgZm9ybVJlZi52YWx1ZS5yZXNldEZpZWxkcygpOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGZvcm1TdGF0ZSwKICAgICAgZm9ybVJlZiwKICAgICAgcnVsZXMsCiAgICAgIGxheW91dCwKICAgICAgaGFuZGxlRmluaXNoRmFpbGVkLAogICAgICBoYW5kbGVGaW5pc2gsCiAgICAgIHJlc2V0Rm9ybSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0KICAgIG5hbWU9ImN1c3RvbS12YWxpZGF0aW9uIgogICAgcmVmPSJmb3JtUmVmIgogICAgOm1vZGVsPSJmb3JtU3RhdGUiCiAgICA6cnVsZXM9InJ1bGVzIgogICAgdi1iaW5kPSJsYXlvdXQiCiAgICBAZmluaXNoPSJoYW5kbGVGaW5pc2giCiAgICBAZmluaXNoRmFpbGVkPSJoYW5kbGVGaW5pc2hGYWlsZWQiCiAgPgogICAgPGEtZm9ybS1pdGVtIGhhcy1mZWVkYmFjayBsYWJlbD0iUGFzc3dvcmQiIG5hbWU9InBhc3MiPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUucGFzcyIgdHlwZT0icGFzc3dvcmQiIGF1dG9jb21wbGV0ZT0ib2ZmIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBoYXMtZmVlZGJhY2sgbGFiZWw9IkNvbmZpcm0iIG5hbWU9ImNoZWNrUGFzcyI+CiAgICAgIDxhLWlucHV0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5jaGVja1Bhc3MiIHR5cGU9InBhc3N3b3JkIiBhdXRvY29tcGxldGU9Im9mZiIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gaGFzLWZlZWRiYWNrIGxhYmVsPSJBZ2UiIG5hbWU9ImFnZSI+CiAgICAgIDxhLWlucHV0LW51bWJlciB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUuYWdlIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIGh0bWwtdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0Rm9ybSI+UmVzZXQ8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZvcm1SZWYgPSByZWYoKTsKICAgIGNvbnN0IGZvcm1TdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgcGFzczogJycsCiAgICAgIGNoZWNrUGFzczogJycsCiAgICAgIGFnZTogdW5kZWZpbmVkLAogICAgfSk7CiAgICBsZXQgY2hlY2tBZ2UgPSBhc3luYyAocnVsZSwgdmFsdWUpID0+IHsKICAgICAgaWYgKCF2YWx1ZSkgewogICAgICAgIHJldHVybiBQcm9taXNlLnJlamVjdCgnUGxlYXNlIGlucHV0IHRoZSBhZ2UnKTsKICAgICAgfQogICAgICBpZiAoIU51bWJlci5pc0ludGVnZXIodmFsdWUpKSB7CiAgICAgICAgcmV0dXJuIFByb21pc2UucmVqZWN0KCdQbGVhc2UgaW5wdXQgZGlnaXRzJyk7CiAgICAgIH0gZWxzZSB7CiAgICAgICAgaWYgKHZhbHVlIDwgMTgpIHsKICAgICAgICAgIHJldHVybiBQcm9taXNlLnJlamVjdCgnQWdlIG11c3QgYmUgZ3JlYXRlciB0aGFuIDE4Jyk7CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHJldHVybiBQcm9taXNlLnJlc29sdmUoKTsKICAgICAgICB9CiAgICAgIH0KICAgIH07CiAgICBsZXQgdmFsaWRhdGVQYXNzID0gYXN5bmMgKHJ1bGUsIHZhbHVlKSA9PiB7CiAgICAgIGlmICh2YWx1ZSA9PT0gJycpIHsKICAgICAgICByZXR1cm4gUHJvbWlzZS5yZWplY3QoJ1BsZWFzZSBpbnB1dCB0aGUgcGFzc3dvcmQnKTsKICAgICAgfSBlbHNlIHsKICAgICAgICBpZiAoZm9ybVN0YXRlLmNoZWNrUGFzcyAhPT0gJycpIHsKICAgICAgICAgIGZvcm1SZWYudmFsdWUudmFsaWRhdGVGaWVsZHMoJ2NoZWNrUGFzcycpOwogICAgICAgIH0KICAgICAgICByZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCk7CiAgICAgIH0KICAgIH07CiAgICBsZXQgdmFsaWRhdGVQYXNzMiA9IGFzeW5jIChydWxlLCB2YWx1ZSkgPT4gewogICAgICBpZiAodmFsdWUgPT09ICcnKSB7CiAgICAgICAgcmV0dXJuIFByb21pc2UucmVqZWN0KCdQbGVhc2UgaW5wdXQgdGhlIHBhc3N3b3JkIGFnYWluJyk7CiAgICAgIH0gZWxzZSBpZiAodmFsdWUgIT09IGZvcm1TdGF0ZS5wYXNzKSB7CiAgICAgICAgcmV0dXJuIFByb21pc2UucmVqZWN0KCJUd28gaW5wdXRzIGRvbid0IG1hdGNoISIpOwogICAgICB9IGVsc2UgewogICAgICAgIHJldHVybiBQcm9taXNlLnJlc29sdmUoKTsKICAgICAgfQogICAgfTsKICAgIGNvbnN0IHJ1bGVzID0gewogICAgICBwYXNzOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICB2YWxpZGF0b3I6IHZhbGlkYXRlUGFzcywKICAgICAgICAgIHRyaWdnZXI6ICdjaGFuZ2UnLAogICAgICAgIH0sCiAgICAgIF0sCiAgICAgIGNoZWNrUGFzczogWwogICAgICAgIHsKICAgICAgICAgIHZhbGlkYXRvcjogdmFsaWRhdGVQYXNzMiwKICAgICAgICAgIHRyaWdnZXI6ICdjaGFuZ2UnLAogICAgICAgIH0sCiAgICAgIF0sCiAgICAgIGFnZTogWwogICAgICAgIHsKICAgICAgICAgIHZhbGlkYXRvcjogY2hlY2tBZ2UsCiAgICAgICAgICB0cmlnZ2VyOiAnY2hhbmdlJywKICAgICAgICB9LAogICAgICBdLAogICAgfTsKICAgIGNvbnN0IGxheW91dCA9IHsKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICBzcGFuOiA0LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgc3BhbjogMTQsCiAgICAgIH0sCiAgICB9OwogICAgY29uc3QgaGFuZGxlRmluaXNoID0gdmFsdWVzID0+IHsKICAgICAgY29uc29sZS5sb2codmFsdWVzLCBmb3JtU3RhdGUpOwogICAgfTsKICAgIGNvbnN0IGhhbmRsZUZpbmlzaEZhaWxlZCA9IGVycm9ycyA9PiB7CiAgICAgIGNvbnNvbGUubG9nKGVycm9ycyk7CiAgICB9OwogICAgY29uc3QgcmVzZXRGb3JtID0gKCkgPT4gewogICAgICBmb3JtUmVmLnZhbHVlLnJlc2V0RmllbGRzKCk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgZm9ybVN0YXRlLAogICAgICBmb3JtUmVmLAogICAgICBydWxlcywKICAgICAgbGF5b3V0LAogICAgICBoYW5kbGVGaW5pc2hGYWlsZWQsCiAgICAgIGhhbmRsZUZpbmlzaCwKICAgICAgcmVzZXRGb3JtLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:e(()=>[o(k,B({name:"custom-validation",ref:"formRef",model:s.formState,rules:s.rules},s.layout,{onFinish:s.handleFinish,onFinishFailed:s.handleFinishFailed}),{default:e(()=>[o(c,{"has-feedback":"",label:"Password",name:"pass"},{default:e(()=>[o(u,{value:s.formState.pass,"onUpdate:value":t[0]||(t[0]=I=>s.formState.pass=I),type:"password",autocomplete:"off"},null,8,["value"])]),_:1}),o(c,{"has-feedback":"",label:"Confirm",name:"checkPass"},{default:e(()=>[o(u,{value:s.formState.checkPass,"onUpdate:value":t[1]||(t[1]=I=>s.formState.checkPass=I),type:"password",autocomplete:"off"},null,8,["value"])]),_:1}),o(c,{"has-feedback":"",label:"Age",name:"age"},{default:e(()=>[o(l,{value:s.formState.age,"onUpdate:value":t[2]||(t[2]=I=>s.formState.age=I)},null,8,["value"])]),_:1}),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(d,{type:"primary","html-type":"submit"},{default:e(()=>t[3]||(t[3]=[a("Submit")])),_:1,__:[3]}),o(d,{style:{"margin-left":"10px"},onClick:s.resetForm},{default:e(()=>t[4]||(t[4]=[a("Reset")])),_:1,__:[4]},8,["onClick"])]),_:1})]),_:1},16,["model","rules","onFinish","onFinishFailed"])]),htmlCode:e(()=>t[5]||(t[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
    `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("custom-validation"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("layout"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finish"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinish"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finishFailed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinishFailed"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"has-feedback"),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pass"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.pass"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"autocomplete"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("off"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"has-feedback"),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Confirm"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("checkPass"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.checkPass"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"autocomplete"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("off"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"has-feedback"),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Age"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("age"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input-number")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.age"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"html-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" RuleObject"),n("span",{class:"token punctuation"},","),a(" ValidateErrorEntity "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue/es/form/interface'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref"),n("span",{class:"token punctuation"},","),a(" UnwrapRef "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"FormState"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"pass"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"checkPass"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"age"),n("span",{class:"token operator"},":"),a(" number "),n("span",{class:"token operator"},"|"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"formState"),n("span",{class:"token operator"},":"),a(" UnwrapRef"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"pass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"checkPass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"age"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"let"),a(),n("span",{class:"token function-variable function"},"checkAge"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token keyword"},"async"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"rule"),n("span",{class:"token operator"},":"),a(" RuleObject"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"value"),n("span",{class:"token operator"},":"),a(" number")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),a("value"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input the age'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),a("Number"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"isInteger"),n("span",{class:"token punctuation"},"("),a("value"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input digits'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"<"),a(),n("span",{class:"token number"},"18"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Age must be greater than 18'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"let"),a(),n("span",{class:"token function-variable function"},"validatePass"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token keyword"},"async"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"rule"),n("span",{class:"token operator"},":"),a(" RuleObject"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"value"),n("span",{class:"token operator"},":"),a(" string")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input the password'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},"."),a("checkPass "),n("span",{class:"token operator"},"!=="),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
          formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validateFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'checkPass'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"let"),a(),n("span",{class:"token function-variable function"},"validatePass2"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token keyword"},"async"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"rule"),n("span",{class:"token operator"},":"),a(" RuleObject"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"value"),n("span",{class:"token operator"},":"),a(" string")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input the password again'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"!=="),a(" formState"),n("span",{class:"token punctuation"},"."),a("pass"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},`"Two inputs don't match!"`),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(" rules "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"pass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"validator"),n("span",{class:"token operator"},":"),a(" validatePass"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"checkPass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"validator"),n("span",{class:"token operator"},":"),a(" validatePass2"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"age"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"validator"),n("span",{class:"token operator"},":"),a(" checkAge"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" layout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinish"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"values"),n("span",{class:"token operator"},":"),a(" FormState")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("values"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinishFailed"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"errors"),n("span",{class:"token operator"},":"),a(" ValidateErrorEntity"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("errors"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      layout`),n("span",{class:"token punctuation"},","),a(`
      handleFinishFailed`),n("span",{class:"token punctuation"},","),a(`
      handleFinish`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[6]||(t[6]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
    `),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("custom-validation"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("layout"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finish"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinish"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finishFailed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinishFailed"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"has-feedback"),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pass"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.pass"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"autocomplete"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("off"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"has-feedback"),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Confirm"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("checkPass"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.checkPass"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"autocomplete"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("off"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"has-feedback"),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Age"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("age"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input-number")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.age"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"html-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"pass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"checkPass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"age"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"let"),a(),n("span",{class:"token function-variable function"},"checkAge"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token keyword"},"async"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("rule"),n("span",{class:"token punctuation"},","),a(" value")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),a("value"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input the age'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token operator"},"!"),a("Number"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"isInteger"),n("span",{class:"token punctuation"},"("),a("value"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input digits'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"<"),a(),n("span",{class:"token number"},"18"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Age must be greater than 18'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"let"),a(),n("span",{class:"token function-variable function"},"validatePass"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token keyword"},"async"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("rule"),n("span",{class:"token punctuation"},","),a(" value")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input the password'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},"."),a("checkPass "),n("span",{class:"token operator"},"!=="),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
          formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validateFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'checkPass'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"let"),a(),n("span",{class:"token function-variable function"},"validatePass2"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token keyword"},"async"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("rule"),n("span",{class:"token punctuation"},","),a(" value")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Please input the password again'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("value "),n("span",{class:"token operator"},"!=="),a(" formState"),n("span",{class:"token punctuation"},"."),a("pass"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"reject"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},`"Two inputs don't match!"`),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"else"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"return"),a(" Promise"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resolve"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rules "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"pass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"validator"),n("span",{class:"token operator"},":"),a(" validatePass"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"checkPass"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"validator"),n("span",{class:"token operator"},":"),a(" validatePass2"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"age"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"validator"),n("span",{class:"token operator"},":"),a(" checkAge"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" layout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinish"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"values"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("values"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinishFailed"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"errors"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("errors"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      layout`),n("span",{class:"token punctuation"},","),a(`
      handleFinishFailed`),n("span",{class:"token punctuation"},","),a(`
      handleFinish`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var vn=G(An,[["render",yn]]);const fn=S({setup(){const s=R(),t={labelCol:{xs:{span:24},sm:{span:4}},wrapperCol:{xs:{span:24},sm:{span:20}}},g={wrapperCol:{xs:{span:24,offset:0},sm:{span:20,offset:4}}},i=Z({domains:[]});return{formRef:s,formItemLayout:t,formItemLayoutWithOutLabel:g,dynamicValidateForm:i,submitForm:()=>{s.value.validate().then(()=>{console.log("values",i.domains)}).catch(l=>{console.log("error",l)})},resetForm:()=>{s.value.resetFields()},removeDomain:l=>{let d=i.domains.indexOf(l);d!==-1&&i.domains.splice(d,1)},addDomain:()=>{i.domains.push({value:"",key:Date.now()})}}},components:{MinusCircleOutlined:on,PlusOutlined:nn}});function Zn(s,t,g,i,C,b){const u=p("a-input"),c=p("MinusCircleOutlined"),l=p("a-form-item"),d=p("PlusOutlined"),k=p("a-button"),r=p("a-form"),I=p("demo-box");return y(),W(I,{jsfiddle:{us:"Add or remove form items dynamically.",cn:"\u52A8\u6001\u589E\u52A0\u3001\u51CF\u5C11\u8868\u5355\u9879\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u52A8\u6001\u589E\u52A0\u3001\u51CF\u5C11\u8868\u5355\u9879\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Add or remove form items dynamically.</p>
`,order:3,title:{"zh-CN":"\u52A8\u6001\u589E\u51CF\u8868\u5355\u9879","en-US":"Dynamic Form Item"},relativePath:"src/docs/form/demo/dynamic-form-item.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gcmVmPSJmb3JtUmVmIiA6bW9kZWw9ImR5bmFtaWNWYWxpZGF0ZUZvcm0iIHYtYmluZD0iZm9ybUl0ZW1MYXlvdXRXaXRoT3V0TGFiZWwiPgogICAgPGEtZm9ybS1pdGVtCiAgICAgIHYtZm9yPSIoZG9tYWluLCBpbmRleCkgaW4gZHluYW1pY1ZhbGlkYXRlRm9ybS5kb21haW5zIgogICAgICA6a2V5PSJkb21haW4ua2V5IgogICAgICB2LWJpbmQ9ImluZGV4ID09PSAwID8gZm9ybUl0ZW1MYXlvdXQgOiB7fSIKICAgICAgOmxhYmVsPSJpbmRleCA9PT0gMCA/ICdEb21haW5zJyA6ICcnIgogICAgICA6bmFtZT0iWydkb21haW5zJywgaW5kZXgsICd2YWx1ZSddIgogICAgICA6cnVsZXM9InsKICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICBtZXNzYWdlOiAnZG9tYWluIGNhbiBub3QgYmUgbnVsbCcsCiAgICAgICAgdHJpZ2dlcjogJ2NoYW5nZScsCiAgICAgIH0iCiAgICA+CiAgICAgIDxhLWlucHV0CiAgICAgICAgdi1tb2RlbDp2YWx1ZT0iZG9tYWluLnZhbHVlIgogICAgICAgIHBsYWNlaG9sZGVyPSJwbGVhc2UgaW5wdXQgZG9tYWluIgogICAgICAgIHN0eWxlPSJ3aWR0aDogNjAlOyBtYXJnaW4tcmlnaHQ6IDhweCIKICAgICAgLz4KICAgICAgPE1pbnVzQ2lyY2xlT3V0bGluZWQKICAgICAgICB2LWlmPSJkeW5hbWljVmFsaWRhdGVGb3JtLmRvbWFpbnMubGVuZ3RoID4gMSIKICAgICAgICBjbGFzcz0iZHluYW1pYy1kZWxldGUtYnV0dG9uIgogICAgICAgIDpkaXNhYmxlZD0iZHluYW1pY1ZhbGlkYXRlRm9ybS5kb21haW5zLmxlbmd0aCA9PT0gMSIKICAgICAgICBAY2xpY2s9InJlbW92ZURvbWFpbihkb21haW4pIgogICAgICAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSB2LWJpbmQ9ImZvcm1JdGVtTGF5b3V0V2l0aE91dExhYmVsIj4KICAgICAgPGEtYnV0dG9uIHR5cGU9ImRhc2hlZCIgc3R5bGU9IndpZHRoOiA2MCUiIEBjbGljaz0iYWRkRG9tYWluIj4KICAgICAgICA8UGx1c091dGxpbmVkIC8+CiAgICAgICAgQWRkIGZpZWxkCiAgICAgIDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIHYtYmluZD0iZm9ybUl0ZW1MYXlvdXRXaXRoT3V0TGFiZWwiPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgaHRtbC10eXBlPSJzdWJtaXQiIEBjbGljaz0ic3VibWl0Rm9ybSI+U3VibWl0PC9hLWJ1dHRvbj4KICAgICAgPGEtYnV0dG9uIHN0eWxlPSJtYXJnaW4tbGVmdDogMTBweCIgQGNsaWNrPSJyZXNldEZvcm0iPlJlc2V0PC9hLWJ1dHRvbj4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgPC9hLWZvcm0+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBNaW51c0NpcmNsZU91dGxpbmVkLCBQbHVzT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBWYWxpZGF0ZUVycm9yRW50aXR5IH0gZnJvbSAnYW50LWRlc2lnbi12dWUvZXMvZm9ybS9pbnRlcmZhY2UnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCByZWYsIFVud3JhcFJlZiB9IGZyb20gJ3Z1ZSc7CgppbnRlcmZhY2UgRG9tYWluIHsKICB2YWx1ZTogc3RyaW5nOwogIGtleTogbnVtYmVyOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtUmVmID0gcmVmKCk7CiAgICBjb25zdCBmb3JtSXRlbUxheW91dCA9IHsKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICB4czogeyBzcGFuOiAyNCB9LAogICAgICAgIHNtOiB7IHNwYW46IDQgfSwKICAgICAgfSwKICAgICAgd3JhcHBlckNvbDogewogICAgICAgIHhzOiB7IHNwYW46IDI0IH0sCiAgICAgICAgc206IHsgc3BhbjogMjAgfSwKICAgICAgfSwKICAgIH07CiAgICBjb25zdCBmb3JtSXRlbUxheW91dFdpdGhPdXRMYWJlbCA9IHsKICAgICAgd3JhcHBlckNvbDogewogICAgICAgIHhzOiB7IHNwYW46IDI0LCBvZmZzZXQ6IDAgfSwKICAgICAgICBzbTogeyBzcGFuOiAyMCwgb2Zmc2V0OiA0IH0sCiAgICAgIH0sCiAgICB9OwogICAgY29uc3QgZHluYW1pY1ZhbGlkYXRlRm9ybTogVW53cmFwUmVmPHsgZG9tYWluczogRG9tYWluW10gfT4gPSByZWFjdGl2ZSh7CiAgICAgIGRvbWFpbnM6IFtdLAogICAgfSk7CiAgICBjb25zdCBzdWJtaXRGb3JtID0gKCkgPT4gewogICAgICBmb3JtUmVmLnZhbHVlCiAgICAgICAgLnZhbGlkYXRlKCkKICAgICAgICAudGhlbigoKSA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygndmFsdWVzJywgZHluYW1pY1ZhbGlkYXRlRm9ybS5kb21haW5zKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaCgoZXJyb3I6IFZhbGlkYXRlRXJyb3JFbnRpdHk8YW55PikgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ2Vycm9yJywgZXJyb3IpOwogICAgICAgIH0pOwogICAgfTsKICAgIGNvbnN0IHJlc2V0Rm9ybSA9ICgpID0+IHsKICAgICAgZm9ybVJlZi52YWx1ZS5yZXNldEZpZWxkcygpOwogICAgfTsKICAgIGNvbnN0IHJlbW92ZURvbWFpbiA9IChpdGVtOiBEb21haW4pID0+IHsKICAgICAgbGV0IGluZGV4ID0gZHluYW1pY1ZhbGlkYXRlRm9ybS5kb21haW5zLmluZGV4T2YoaXRlbSk7CiAgICAgIGlmIChpbmRleCAhPT0gLTEpIHsKICAgICAgICBkeW5hbWljVmFsaWRhdGVGb3JtLmRvbWFpbnMuc3BsaWNlKGluZGV4LCAxKTsKICAgICAgfQogICAgfTsKICAgIGNvbnN0IGFkZERvbWFpbiA9ICgpID0+IHsKICAgICAgZHluYW1pY1ZhbGlkYXRlRm9ybS5kb21haW5zLnB1c2goewogICAgICAgIHZhbHVlOiAnJywKICAgICAgICBrZXk6IERhdGUubm93KCksCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGZvcm1SZWYsCiAgICAgIGZvcm1JdGVtTGF5b3V0LAogICAgICBmb3JtSXRlbUxheW91dFdpdGhPdXRMYWJlbCwKICAgICAgZHluYW1pY1ZhbGlkYXRlRm9ybSwKICAgICAgc3VibWl0Rm9ybSwKICAgICAgcmVzZXRGb3JtLAogICAgICByZW1vdmVEb21haW4sCiAgICAgIGFkZERvbWFpbiwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNaW51c0NpcmNsZU91dGxpbmVkLAogICAgUGx1c091dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KPHN0eWxlPgouZHluYW1pYy1kZWxldGUtYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIHRvcDogNHB4OwogIGZvbnQtc2l6ZTogMjRweDsKICBjb2xvcjogIzk5OTsKICB0cmFuc2l0aW9uOiBhbGwgMC4zczsKfQouZHluYW1pYy1kZWxldGUtYnV0dG9uOmhvdmVyIHsKICBjb2xvcjogIzc3NzsKfQouZHluYW1pYy1kZWxldGUtYnV0dG9uW2Rpc2FibGVkXSB7CiAgY3Vyc29yOiBub3QtYWxsb3dlZDsKICBvcGFjaXR5OiAwLjU7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gcmVmPSJmb3JtUmVmIiA6bW9kZWw9ImR5bmFtaWNWYWxpZGF0ZUZvcm0iIHYtYmluZD0iZm9ybUl0ZW1MYXlvdXRXaXRoT3V0TGFiZWwiPgogICAgPGEtZm9ybS1pdGVtCiAgICAgIHYtZm9yPSIoZG9tYWluLCBpbmRleCkgaW4gZHluYW1pY1ZhbGlkYXRlRm9ybS5kb21haW5zIgogICAgICA6a2V5PSJkb21haW4ua2V5IgogICAgICB2LWJpbmQ9ImluZGV4ID09PSAwID8gZm9ybUl0ZW1MYXlvdXQgOiB7fSIKICAgICAgOmxhYmVsPSJpbmRleCA9PT0gMCA/ICdEb21haW5zJyA6ICcnIgogICAgICA6bmFtZT0iWydkb21haW5zJywgaW5kZXgsICd2YWx1ZSddIgogICAgICA6cnVsZXM9InsKICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICBtZXNzYWdlOiAnZG9tYWluIGNhbiBub3QgYmUgbnVsbCcsCiAgICAgICAgdHJpZ2dlcjogJ2NoYW5nZScsCiAgICAgIH0iCiAgICA+CiAgICAgIDxhLWlucHV0CiAgICAgICAgdi1tb2RlbDp2YWx1ZT0iZG9tYWluLnZhbHVlIgogICAgICAgIHBsYWNlaG9sZGVyPSJwbGVhc2UgaW5wdXQgZG9tYWluIgogICAgICAgIHN0eWxlPSJ3aWR0aDogNjAlOyBtYXJnaW4tcmlnaHQ6IDhweCIKICAgICAgLz4KICAgICAgPE1pbnVzQ2lyY2xlT3V0bGluZWQKICAgICAgICB2LWlmPSJkeW5hbWljVmFsaWRhdGVGb3JtLmRvbWFpbnMubGVuZ3RoID4gMSIKICAgICAgICBjbGFzcz0iZHluYW1pYy1kZWxldGUtYnV0dG9uIgogICAgICAgIDpkaXNhYmxlZD0iZHluYW1pY1ZhbGlkYXRlRm9ybS5kb21haW5zLmxlbmd0aCA9PT0gMSIKICAgICAgICBAY2xpY2s9InJlbW92ZURvbWFpbihkb21haW4pIgogICAgICAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSB2LWJpbmQ9ImZvcm1JdGVtTGF5b3V0V2l0aE91dExhYmVsIj4KICAgICAgPGEtYnV0dG9uIHR5cGU9ImRhc2hlZCIgc3R5bGU9IndpZHRoOiA2MCUiIEBjbGljaz0iYWRkRG9tYWluIj4KICAgICAgICA8UGx1c091dGxpbmVkIC8+CiAgICAgICAgQWRkIGZpZWxkCiAgICAgIDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIHYtYmluZD0iZm9ybUl0ZW1MYXlvdXRXaXRoT3V0TGFiZWwiPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgaHRtbC10eXBlPSJzdWJtaXQiIEBjbGljaz0ic3VibWl0Rm9ybSI+U3VibWl0PC9hLWJ1dHRvbj4KICAgICAgPGEtYnV0dG9uIHN0eWxlPSJtYXJnaW4tbGVmdDogMTBweCIgQGNsaWNrPSJyZXNldEZvcm0iPlJlc2V0PC9hLWJ1dHRvbj4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgPC9hLWZvcm0+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IE1pbnVzQ2lyY2xlT3V0bGluZWQsIFBsdXNPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtUmVmID0gcmVmKCk7CiAgICBjb25zdCBmb3JtSXRlbUxheW91dCA9IHsKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICB4czogewogICAgICAgICAgc3BhbjogMjQsCiAgICAgICAgfSwKICAgICAgICBzbTogewogICAgICAgICAgc3BhbjogNCwKICAgICAgICB9LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgeHM6IHsKICAgICAgICAgIHNwYW46IDI0LAogICAgICAgIH0sCiAgICAgICAgc206IHsKICAgICAgICAgIHNwYW46IDIwLAogICAgICAgIH0sCiAgICAgIH0sCiAgICB9OwogICAgY29uc3QgZm9ybUl0ZW1MYXlvdXRXaXRoT3V0TGFiZWwgPSB7CiAgICAgIHdyYXBwZXJDb2w6IHsKICAgICAgICB4czogewogICAgICAgICAgc3BhbjogMjQsCiAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgfSwKICAgICAgICBzbTogewogICAgICAgICAgc3BhbjogMjAsCiAgICAgICAgICBvZmZzZXQ6IDQsCiAgICAgICAgfSwKICAgICAgfSwKICAgIH07CiAgICBjb25zdCBkeW5hbWljVmFsaWRhdGVGb3JtID0gcmVhY3RpdmUoewogICAgICBkb21haW5zOiBbXSwKICAgIH0pOwogICAgY29uc3Qgc3VibWl0Rm9ybSA9ICgpID0+IHsKICAgICAgZm9ybVJlZi52YWx1ZQogICAgICAgIC52YWxpZGF0ZSgpCiAgICAgICAgLnRoZW4oKCkgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ3ZhbHVlcycsIGR5bmFtaWNWYWxpZGF0ZUZvcm0uZG9tYWlucyk7CiAgICAgICAgfSkKICAgICAgICAuY2F0Y2goZXJyb3IgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ2Vycm9yJywgZXJyb3IpOwogICAgICAgIH0pOwogICAgfTsKICAgIGNvbnN0IHJlc2V0Rm9ybSA9ICgpID0+IHsKICAgICAgZm9ybVJlZi52YWx1ZS5yZXNldEZpZWxkcygpOwogICAgfTsKICAgIGNvbnN0IHJlbW92ZURvbWFpbiA9IGl0ZW0gPT4gewogICAgICBsZXQgaW5kZXggPSBkeW5hbWljVmFsaWRhdGVGb3JtLmRvbWFpbnMuaW5kZXhPZihpdGVtKTsKICAgICAgaWYgKGluZGV4ICE9PSAtMSkgewogICAgICAgIGR5bmFtaWNWYWxpZGF0ZUZvcm0uZG9tYWlucy5zcGxpY2UoaW5kZXgsIDEpOwogICAgICB9CiAgICB9OwogICAgY29uc3QgYWRkRG9tYWluID0gKCkgPT4gewogICAgICBkeW5hbWljVmFsaWRhdGVGb3JtLmRvbWFpbnMucHVzaCh7CiAgICAgICAgdmFsdWU6ICcnLAogICAgICAgIGtleTogRGF0ZS5ub3coKSwKICAgICAgfSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgZm9ybVJlZiwKICAgICAgZm9ybUl0ZW1MYXlvdXQsCiAgICAgIGZvcm1JdGVtTGF5b3V0V2l0aE91dExhYmVsLAogICAgICBkeW5hbWljVmFsaWRhdGVGb3JtLAogICAgICBzdWJtaXRGb3JtLAogICAgICByZXNldEZvcm0sCiAgICAgIHJlbW92ZURvbWFpbiwKICAgICAgYWRkRG9tYWluLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1pbnVzQ2lyY2xlT3V0bGluZWQsCiAgICBQbHVzT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGU+Ci5keW5hbWljLWRlbGV0ZS1idXR0b24gewogIGN1cnNvcjogcG9pbnRlcjsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgdG9wOiA0cHg7CiAgZm9udC1zaXplOiAyNHB4OwogIGNvbG9yOiAjOTk5OwogIHRyYW5zaXRpb246IGFsbCAwLjNzOwp9Ci5keW5hbWljLWRlbGV0ZS1idXR0b246aG92ZXIgewogIGNvbG9yOiAjNzc3Owp9Ci5keW5hbWljLWRlbGV0ZS1idXR0b25bZGlzYWJsZWRdIHsKICBjdXJzb3I6IG5vdC1hbGxvd2VkOwogIG9wYWNpdHk6IDAuNTsKfQo8L3N0eWxlPg=="}},{default:e(()=>[o(r,B({ref:"formRef",model:s.dynamicValidateForm},s.formItemLayoutWithOutLabel),{default:e(()=>[(y(!0),L(sn,null,an(s.dynamicValidateForm.domains,(m,v)=>(y(),W(l,B({key:m.key,ref_for:!0},v===0?s.formItemLayout:{},{label:v===0?"Domains":"",name:["domains",v,"value"],rules:{required:!0,message:"domain can not be null",trigger:"change"}}),{default:e(()=>[o(u,{value:m.value,"onUpdate:value":A=>m.value=A,placeholder:"please input domain",style:{width:"60%","margin-right":"8px"}},null,8,["value","onUpdate:value"]),s.dynamicValidateForm.domains.length>1?(y(),W(c,{key:0,class:"dynamic-delete-button",disabled:s.dynamicValidateForm.domains.length===1,onClick:A=>s.removeDomain(m)},null,8,["disabled","onClick"])):tn("",!0)]),_:2},1040,["label","name"]))),128)),o(l,K(U(s.formItemLayoutWithOutLabel)),{default:e(()=>[o(k,{type:"dashed",style:{width:"60%"},onClick:s.addDomain},{default:e(()=>[o(d),t[0]||(t[0]=a(" Add field "))]),_:1,__:[0]},8,["onClick"])]),_:1},16),o(l,K(U(s.formItemLayoutWithOutLabel)),{default:e(()=>[o(k,{type:"primary","html-type":"submit",onClick:s.submitForm},{default:e(()=>t[1]||(t[1]=[a("Submit")])),_:1,__:[1]},8,["onClick"]),o(k,{style:{"margin-left":"10px"},onClick:s.resetForm},{default:e(()=>t[2]||(t[2]=[a("Reset")])),_:1,__:[2]},8,["onClick"])]),_:1},16)]),_:1},16,["model"])]),htmlCode:e(()=>t[3]||(t[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamicValidateForm"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayoutWithOutLabel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(`
      `),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("(domain, index) in dynamicValidateForm.domains"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("domain.key"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index === 0 ? formItemLayout : {}"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index === 0 ? 'Domains' : ''"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("['domains', index, 'value']"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{
        required: true,
        message: 'domain can not be null',
        trigger: 'change',
      }`),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("domain.value"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please input domain"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 60%"),n("span",{class:"token punctuation"},";"),a(),n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("MinusCircleOutlined")]),a(`
        `),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamicValidateForm.domains.length > 1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamic-delete-button"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamicValidateForm.domains.length === 1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("removeDomain(domain)"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayoutWithOutLabel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dashed"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 60%")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("addDomain"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("PlusOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
        Add field
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayoutWithOutLabel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"html-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submit"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submitForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" MinusCircleOutlined"),n("span",{class:"token punctuation"},","),a(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ValidateErrorEntity "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue/es/form/interface'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref"),n("span",{class:"token punctuation"},","),a(" UnwrapRef "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"Domain"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"value"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formItemLayout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"xs"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"24"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"sm"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"xs"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"24"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"sm"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"20"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formItemLayoutWithOutLabel "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"xs"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"offset"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"0"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"sm"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"offset"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"dynamicValidateForm"),n("span",{class:"token operator"},":"),a(" UnwrapRef"),n("span",{class:"token operator"},"<"),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"domains"),n("span",{class:"token operator"},":"),a(" Domain"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"domains"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"submitForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a(`value
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'values'"),n("span",{class:"token punctuation"},","),a(" dynamicValidateForm"),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"error"),n("span",{class:"token operator"},":"),a(" ValidateErrorEntity"),n("span",{class:"token operator"},"<"),a("any"),n("span",{class:"token operator"},">")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"removeDomain"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"item"),n("span",{class:"token operator"},":"),a(" Domain")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"let"),a(" index "),n("span",{class:"token operator"},"="),a(" dynamicValidateForm"),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),a("item"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("index "),n("span",{class:"token operator"},"!=="),a(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        dynamicValidateForm`),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"splice"),n("span",{class:"token punctuation"},"("),a("index"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"addDomain"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      dynamicValidateForm`),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"push"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"value"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),a(" Date"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"now"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      formItemLayout`),n("span",{class:"token punctuation"},","),a(`
      formItemLayoutWithOutLabel`),n("span",{class:"token punctuation"},","),a(`
      dynamicValidateForm`),n("span",{class:"token punctuation"},","),a(`
      submitForm`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
      removeDomain`),n("span",{class:"token punctuation"},","),a(`
      addDomain`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    MinusCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},".dynamic-delete-button"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"cursor"),n("span",{class:"token punctuation"},":"),a(" pointer"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"position"),n("span",{class:"token punctuation"},":"),a(" relative"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"top"),n("span",{class:"token punctuation"},":"),a(" 4px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 24px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #999"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"transition"),n("span",{class:"token punctuation"},":"),a(" all 0.3s"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},".dynamic-delete-button:hover"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #777"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},".dynamic-delete-button[disabled]"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"cursor"),n("span",{class:"token punctuation"},":"),a(" not-allowed"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"opacity"),n("span",{class:"token punctuation"},":"),a(" 0.5"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[4]||(t[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamicValidateForm"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayoutWithOutLabel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(`
      `),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("(domain, index) in dynamicValidateForm.domains"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("domain.key"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index === 0 ? formItemLayout : {}"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index === 0 ? 'Domains' : ''"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("['domains', index, 'value']"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{
        required: true,
        message: 'domain can not be null',
        trigger: 'change',
      }`),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("domain.value"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please input domain"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 60%"),n("span",{class:"token punctuation"},";"),a(),n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("MinusCircleOutlined")]),a(`
        `),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamicValidateForm.domains.length > 1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamic-delete-button"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dynamicValidateForm.domains.length === 1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("removeDomain(domain)"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayoutWithOutLabel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dashed"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 60%")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("addDomain"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("PlusOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
        Add field
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayoutWithOutLabel"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"html-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submit"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submitForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" MinusCircleOutlined"),n("span",{class:"token punctuation"},","),a(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formItemLayout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"xs"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"sm"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"xs"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"sm"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formItemLayoutWithOutLabel "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"xs"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"offset"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"sm"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"offset"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" dynamicValidateForm "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"domains"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"submitForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a(`value
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'values'"),n("span",{class:"token punctuation"},","),a(" dynamicValidateForm"),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"error"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"removeDomain"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"item"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"let"),a(" index "),n("span",{class:"token operator"},"="),a(" dynamicValidateForm"),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),a("item"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("index "),n("span",{class:"token operator"},"!=="),a(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        dynamicValidateForm`),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"splice"),n("span",{class:"token punctuation"},"("),a("index"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"addDomain"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      dynamicValidateForm`),n("span",{class:"token punctuation"},"."),a("domains"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"push"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"value"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),a(" Date"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"now"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      formItemLayout`),n("span",{class:"token punctuation"},","),a(`
      formItemLayoutWithOutLabel`),n("span",{class:"token punctuation"},","),a(`
      dynamicValidateForm`),n("span",{class:"token punctuation"},","),a(`
      submitForm`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
      removeDomain`),n("span",{class:"token punctuation"},","),a(`
      addDomain`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    MinusCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},".dynamic-delete-button"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"cursor"),n("span",{class:"token punctuation"},":"),a(" pointer"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"position"),n("span",{class:"token punctuation"},":"),a(" relative"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"top"),n("span",{class:"token punctuation"},":"),a(" 4px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 24px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #999"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"transition"),n("span",{class:"token punctuation"},":"),a(" all 0.3s"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},".dynamic-delete-button:hover"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #777"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},".dynamic-delete-button[disabled]"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"cursor"),n("span",{class:"token punctuation"},":"),a(" not-allowed"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"opacity"),n("span",{class:"token punctuation"},":"),a(" 0.5"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var hn=G(fn,[["render",Zn]]);const Wn=S({setup(){const s=Z({user:"",password:""});return{formState:s,handleFinish:i=>{console.log(i,s)},handleFinishFailed:i=>{console.log(i)}}},components:{UserOutlined:pn,LockOutlined:en}});function Gn(s,t,g,i,C,b){const u=p("UserOutlined"),c=p("a-input"),l=p("a-form-item"),d=p("LockOutlined"),k=p("a-button"),r=p("a-form"),I=p("demo-box");return y(),W(I,{jsfiddle:{us:"Inline login form is often used in navigation bar.",cn:"\u6C34\u5E73\u767B\u5F55\u680F\uFF0C\u5E38\u7528\u5728\u9876\u90E8\u5BFC\u822A\u680F\u4E2D\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u6C34\u5E73\u767B\u5F55\u680F\uFF0C\u5E38\u7528\u5728\u9876\u90E8\u5BFC\u822A\u680F\u4E2D\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Inline login form is often used in navigation bar.</p>
`,order:4,title:{"zh-CN":"\u5185\u8054\u767B\u5F55\u680F","en-US":"Inline Login Form"},relativePath:"src/docs/form/demo/horizontal-login.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0KICAgIGxheW91dD0iaW5saW5lIgogICAgOm1vZGVsPSJmb3JtU3RhdGUiCiAgICBAZmluaXNoPSJoYW5kbGVGaW5pc2giCiAgICBAZmluaXNoRmFpbGVkPSJoYW5kbGVGaW5pc2hGYWlsZWQiCiAgPgogICAgPGEtZm9ybS1pdGVtPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUudXNlciIgcGxhY2Vob2xkZXI9IlVzZXJuYW1lIj4KICAgICAgICA8dGVtcGxhdGUgI3ByZWZpeD48VXNlck91dGxpbmVkIHN0eWxlPSJjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjI1KSIgLz48L3RlbXBsYXRlPgogICAgICA8L2EtaW5wdXQ+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUucGFzc3dvcmQiIHR5cGU9InBhc3N3b3JkIiBwbGFjZWhvbGRlcj0iUGFzc3dvcmQiPgogICAgICAgIDx0ZW1wbGF0ZSAjcHJlZml4PjxMb2NrT3V0bGluZWQgc3R5bGU9ImNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMjUpIiAvPjwvdGVtcGxhdGU+CiAgICAgIDwvYS1pbnB1dD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0+CiAgICAgIDxhLWJ1dHRvbgogICAgICAgIHR5cGU9InByaW1hcnkiCiAgICAgICAgaHRtbC10eXBlPSJzdWJtaXQiCiAgICAgICAgOmRpc2FibGVkPSJmb3JtU3RhdGUudXNlciA9PT0gJycgfHwgZm9ybVN0YXRlLnBhc3N3b3JkID09PSAnJyIKICAgICAgPgogICAgICAgIExvZyBpbgogICAgICA8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFVzZXJPdXRsaW5lZCwgTG9ja091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgVmFsaWRhdGVFcnJvckVudGl0eSB9IGZyb20gJ2FudC1kZXNpZ24tdnVlL2VzL2Zvcm0vaW50ZXJmYWNlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgVW53cmFwUmVmIH0gZnJvbSAndnVlJzsKaW50ZXJmYWNlIEZvcm1TdGF0ZSB7CiAgdXNlcjogc3RyaW5nOwogIHBhc3N3b3JkOiBzdHJpbmc7Cn0KZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZvcm1TdGF0ZTogVW53cmFwUmVmPEZvcm1TdGF0ZT4gPSByZWFjdGl2ZSh7CiAgICAgIHVzZXI6ICcnLAogICAgICBwYXNzd29yZDogJycsCiAgICB9KTsKICAgIGNvbnN0IGhhbmRsZUZpbmlzaCA9ICh2YWx1ZXM6IEZvcm1TdGF0ZSkgPT4gewogICAgICBjb25zb2xlLmxvZyh2YWx1ZXMsIGZvcm1TdGF0ZSk7CiAgICB9OwogICAgY29uc3QgaGFuZGxlRmluaXNoRmFpbGVkID0gKGVycm9yczogVmFsaWRhdGVFcnJvckVudGl0eTxGb3JtU3RhdGU+KSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKGVycm9ycyk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgZm9ybVN0YXRlLAogICAgICBoYW5kbGVGaW5pc2gsCiAgICAgIGhhbmRsZUZpbmlzaEZhaWxlZCwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBVc2VyT3V0bGluZWQsCiAgICBMb2NrT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0KICAgIGxheW91dD0iaW5saW5lIgogICAgOm1vZGVsPSJmb3JtU3RhdGUiCiAgICBAZmluaXNoPSJoYW5kbGVGaW5pc2giCiAgICBAZmluaXNoRmFpbGVkPSJoYW5kbGVGaW5pc2hGYWlsZWQiCiAgPgogICAgPGEtZm9ybS1pdGVtPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUudXNlciIgcGxhY2Vob2xkZXI9IlVzZXJuYW1lIj4KICAgICAgICA8dGVtcGxhdGUgI3ByZWZpeD48VXNlck91dGxpbmVkIHN0eWxlPSJjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjI1KSIgLz48L3RlbXBsYXRlPgogICAgICA8L2EtaW5wdXQ+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUucGFzc3dvcmQiIHR5cGU9InBhc3N3b3JkIiBwbGFjZWhvbGRlcj0iUGFzc3dvcmQiPgogICAgICAgIDx0ZW1wbGF0ZSAjcHJlZml4PjxMb2NrT3V0bGluZWQgc3R5bGU9ImNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMjUpIiAvPjwvdGVtcGxhdGU+CiAgICAgIDwvYS1pbnB1dD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0+CiAgICAgIDxhLWJ1dHRvbgogICAgICAgIHR5cGU9InByaW1hcnkiCiAgICAgICAgaHRtbC10eXBlPSJzdWJtaXQiCiAgICAgICAgOmRpc2FibGVkPSJmb3JtU3RhdGUudXNlciA9PT0gJycgfHwgZm9ybVN0YXRlLnBhc3N3b3JkID09PSAnJyIKICAgICAgPgogICAgICAgIExvZyBpbgogICAgICA8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgVXNlck91dGxpbmVkLCBMb2NrT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZvcm1TdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgdXNlcjogJycsCiAgICAgIHBhc3N3b3JkOiAnJywKICAgIH0pOwogICAgY29uc3QgaGFuZGxlRmluaXNoID0gdmFsdWVzID0+IHsKICAgICAgY29uc29sZS5sb2codmFsdWVzLCBmb3JtU3RhdGUpOwogICAgfTsKICAgIGNvbnN0IGhhbmRsZUZpbmlzaEZhaWxlZCA9IGVycm9ycyA9PiB7CiAgICAgIGNvbnNvbGUubG9nKGVycm9ycyk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgZm9ybVN0YXRlLAogICAgICBoYW5kbGVGaW5pc2gsCiAgICAgIGhhbmRsZUZpbmlzaEZhaWxlZCwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBVc2VyT3V0bGluZWQsCiAgICBMb2NrT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:e(()=>[o(r,{layout:"inline",model:s.formState,onFinish:s.handleFinish,onFinishFailed:s.handleFinishFailed},{default:e(()=>[o(l,null,{default:e(()=>[o(c,{value:s.formState.user,"onUpdate:value":t[0]||(t[0]=m=>s.formState.user=m),placeholder:"Username"},{prefix:e(()=>[o(u,{style:{color:"rgba(0, 0, 0, 0.25)"}})]),_:1},8,["value"])]),_:1}),o(l,null,{default:e(()=>[o(c,{value:s.formState.password,"onUpdate:value":t[1]||(t[1]=m=>s.formState.password=m),type:"password",placeholder:"Password"},{prefix:e(()=>[o(d,{style:{color:"rgba(0, 0, 0, 0.25)"}})]),_:1},8,["value"])]),_:1}),o(l,null,{default:e(()=>[o(k,{type:"primary","html-type":"submit",disabled:s.formState.user===""||s.formState.password===""},{default:e(()=>t[2]||(t[2]=[a(" Log in ")])),_:1,__:[2]},8,["disabled"])]),_:1})]),_:1},8,["model","onFinish","onFinishFailed"])]),htmlCode:e(()=>t[3]||(t[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
    `),n("span",{class:"token attr-name"},"layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inline"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finish"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinish"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finishFailed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinishFailed"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.user"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Username"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#prefix"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0.25"),n("span",{class:"token punctuation"},")")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-input")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Password"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#prefix"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("LockOutlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0.25"),n("span",{class:"token punctuation"},")")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-input")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(`
        `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"html-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submit"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.user === '' || formState.password === ''"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},">")]),a(`
        Log in
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined"),n("span",{class:"token punctuation"},","),a(" LockOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ValidateErrorEntity "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue/es/form/interface'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" UnwrapRef "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"FormState"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"user"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"password"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"formState"),n("span",{class:"token operator"},":"),a(" UnwrapRef"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"user"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"password"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinish"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"values"),n("span",{class:"token operator"},":"),a(" FormState")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("values"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinishFailed"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"errors"),n("span",{class:"token operator"},":"),a(" ValidateErrorEntity"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("errors"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      handleFinish`),n("span",{class:"token punctuation"},","),a(`
      handleFinishFailed`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    UserOutlined`),n("span",{class:"token punctuation"},","),a(`
    LockOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[4]||(t[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
    `),n("span",{class:"token attr-name"},"layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inline"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finish"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinish"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@finishFailed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleFinishFailed"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.user"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Username"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#prefix"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("UserOutlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0.25"),n("span",{class:"token punctuation"},")")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-input")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("password"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Password"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#prefix"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("LockOutlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0.25"),n("span",{class:"token punctuation"},")")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-input")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(`
        `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"html-type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("submit"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.user === '' || formState.password === ''"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},">")]),a(`
        Log in
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" UserOutlined"),n("span",{class:"token punctuation"},","),a(" LockOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"user"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"password"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinish"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"values"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("values"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleFinishFailed"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"errors"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("errors"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      handleFinish`),n("span",{class:"token punctuation"},","),a(`
      handleFinishFailed`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    UserOutlined`),n("span",{class:"token punctuation"},","),a(`
    LockOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var wn=G(Wn,[["render",Gn]]);const Bn=S({setup(){const s=R(),t=Z({name:void 0,sub:{name:void 0}});return{formRef:s,labelCol:{span:4},wrapperCol:{span:14},formState:t,rules:{name:{required:!0,message:"Please input name"},sub:{name:[{required:!0,message:"Please input name"}]}},onSubmit:()=>{s.value.validate().then(()=>{console.log("values",t,V(t))}).catch(b=>{console.log("error",b)})},resetForm:()=>{s.value.resetFields()}}}});function Sn(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-button"),d=p("a-form"),k=p("demo-box");return y(),W(k,{jsfiddle:{us:"Nested form.",cn:"\u5D4C\u5957\u8868\u5355",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u5D4C\u5957\u8868\u5355</p>
<h2 id="en-us">en-US</h2>
<p>Nested form.</p>
`,order:11,title:{"zh-CN":"\u5D4C\u5957\u8868\u5355","en-US":"Nested Form"},relativePath:"src/docs/form/demo/nested-form.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1mb3JtCiAgICAgIHJlZj0iZm9ybVJlZiIKICAgICAgOm1vZGVsPSJmb3JtU3RhdGUiCiAgICAgIDpydWxlcz0icnVsZXMiCiAgICAgIDpsYWJlbC1jb2w9ImxhYmVsQ29sIgogICAgICA6d3JhcHBlci1jb2w9IndyYXBwZXJDb2wiCiAgICA+CiAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgbmFtZSIgbmFtZT0ibmFtZSI+CiAgICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iU3ViIG5hbWUiIDpuYW1lPSJbJ3N1YicsICduYW1lJ10iPgogICAgICAgIDxhLWlucHV0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5zdWIubmFtZSIgLz4KICAgICAgPC9hLWZvcm0taXRlbT4KCiAgICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJvblN1Ym1pdCI+Q3JlYXRlPC9hLWJ1dHRvbj4KICAgICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0Rm9ybSI+UmVzZXQ8L2EtYnV0dG9uPgogICAgICA8L2EtZm9ybS1pdGVtPgogICAgPC9hLWZvcm0+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCByZWYsIHRvUmF3IH0gZnJvbSAndnVlJzsKCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtUmVmID0gcmVmKCk7CiAgICBjb25zdCBmb3JtU3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6IHVuZGVmaW5lZCwKICAgICAgc3ViOiB7IG5hbWU6IHVuZGVmaW5lZCB9LAogICAgfSk7CiAgICBjb25zdCBydWxlcyA9IHsKICAgICAgbmFtZTogewogICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgaW5wdXQgbmFtZScsCiAgICAgIH0sCiAgICAgIHN1YjogewogICAgICAgIG5hbWU6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgaW5wdXQgbmFtZScsCiAgICAgICAgICB9LAogICAgICAgIF0sCiAgICAgIH0sCiAgICB9OwogICAgY29uc3Qgb25TdWJtaXQgPSAoKSA9PiB7CiAgICAgIGZvcm1SZWYudmFsdWUKICAgICAgICAudmFsaWRhdGUoKQogICAgICAgIC50aGVuKCgpID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKCd2YWx1ZXMnLCBmb3JtU3RhdGUsIHRvUmF3KGZvcm1TdGF0ZSkpOwogICAgICAgIH0pCiAgICAgICAgLmNhdGNoKGVycm9yID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKCdlcnJvcicsIGVycm9yKTsKICAgICAgICB9KTsKICAgIH07CiAgICBjb25zdCByZXNldEZvcm0gPSAoKSA9PiB7CiAgICAgIGZvcm1SZWYudmFsdWUucmVzZXRGaWVsZHMoKTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBmb3JtUmVmLAogICAgICBsYWJlbENvbDogeyBzcGFuOiA0IH0sCiAgICAgIHdyYXBwZXJDb2w6IHsgc3BhbjogMTQgfSwKICAgICAgZm9ybVN0YXRlLAogICAgICBydWxlcywKICAgICAgb25TdWJtaXQsCiAgICAgIHJlc2V0Rm9ybSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1mb3JtCiAgICAgIHJlZj0iZm9ybVJlZiIKICAgICAgOm1vZGVsPSJmb3JtU3RhdGUiCiAgICAgIDpydWxlcz0icnVsZXMiCiAgICAgIDpsYWJlbC1jb2w9ImxhYmVsQ29sIgogICAgICA6d3JhcHBlci1jb2w9IndyYXBwZXJDb2wiCiAgICA+CiAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgbmFtZSIgbmFtZT0ibmFtZSI+CiAgICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iU3ViIG5hbWUiIDpuYW1lPSJbJ3N1YicsICduYW1lJ10iPgogICAgICAgIDxhLWlucHV0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5zdWIubmFtZSIgLz4KICAgICAgPC9hLWZvcm0taXRlbT4KCiAgICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJvblN1Ym1pdCI+Q3JlYXRlPC9hLWJ1dHRvbj4KICAgICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0Rm9ybSI+UmVzZXQ8L2EtYnV0dG9uPgogICAgICA8L2EtZm9ybS1pdGVtPgogICAgPC9hLWZvcm0+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHJlZiwgdG9SYXcgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgZm9ybVJlZiA9IHJlZigpOwogICAgY29uc3QgZm9ybVN0YXRlID0gcmVhY3RpdmUoewogICAgICBuYW1lOiB1bmRlZmluZWQsCiAgICAgIHN1YjogewogICAgICAgIG5hbWU6IHVuZGVmaW5lZCwKICAgICAgfSwKICAgIH0pOwogICAgY29uc3QgcnVsZXMgPSB7CiAgICAgIG5hbWU6IHsKICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIGlucHV0IG5hbWUnLAogICAgICB9LAogICAgICBzdWI6IHsKICAgICAgICBuYW1lOiBbCiAgICAgICAgICB7CiAgICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIGlucHV0IG5hbWUnLAogICAgICAgICAgfSwKICAgICAgICBdLAogICAgICB9LAogICAgfTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICBmb3JtUmVmLnZhbHVlCiAgICAgICAgLnZhbGlkYXRlKCkKICAgICAgICAudGhlbigoKSA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygndmFsdWVzJywgZm9ybVN0YXRlLCB0b1Jhdyhmb3JtU3RhdGUpKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaChlcnJvciA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygnZXJyb3InLCBlcnJvcik7CiAgICAgICAgfSk7CiAgICB9OwogICAgY29uc3QgcmVzZXRGb3JtID0gKCkgPT4gewogICAgICBmb3JtUmVmLnZhbHVlLnJlc2V0RmllbGRzKCk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgZm9ybVJlZiwKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICBzcGFuOiA0LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgc3BhbjogMTQsCiAgICAgIH0sCiAgICAgIGZvcm1TdGF0ZSwKICAgICAgcnVsZXMsCiAgICAgIG9uU3VibWl0LAogICAgICByZXNldEZvcm0sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:e(()=>[n("div",null,[o(d,{ref:"formRef",model:s.formState,rules:s.rules,"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,{label:"Activity name",name:"name"},{default:e(()=>[o(u,{value:s.formState.name,"onUpdate:value":t[0]||(t[0]=r=>s.formState.name=r)},null,8,["value"])]),_:1}),o(c,{label:"Sub name",name:["sub","name"]},{default:e(()=>[o(u,{value:s.formState.sub.name,"onUpdate:value":t[1]||(t[1]=r=>s.formState.sub.name=r)},null,8,["value"])]),_:1}),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(l,{type:"primary",onClick:s.onSubmit},{default:e(()=>t[2]||(t[2]=[a("Create")])),_:1,__:[2]},8,["onClick"]),o(l,{style:{"margin-left":"10px"},onClick:s.resetForm},{default:e(()=>t[3]||(t[3]=[a("Reset")])),_:1,__:[3]},8,["onClick"])]),_:1})]),_:1},8,["model","rules","label-col","wrapper-col"])])]),htmlCode:e(()=>t[4]||(t[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
      `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Sub name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("['sub', 'name']"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.sub.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`

      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"sub"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rules "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"sub"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
          `),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a(`value
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'values'"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"error"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[5]||(t[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
      `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Sub name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("['sub', 'name']"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.sub.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`

      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"sub"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rules "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"sub"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
          `),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a(`value
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'values'"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"error"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var Vn=G(Bn,[["render",Sn]]);const Yn=S({setup(){const s=Z({layout:"horizontal",fieldA:"",fieldB:""}),t=P(()=>{const{layout:i}=s;return i==="horizontal"?{labelCol:{span:4},wrapperCol:{span:14}}:{}}),g=P(()=>{const{layout:i}=s;return i==="horizontal"?{wrapperCol:{span:14,offset:4}}:{}});return{formState:s,formItemLayout:t,buttonItemLayout:g}}});function Fn(s,t,g,i,C,b){const u=p("a-radio-button"),c=p("a-radio-group"),l=p("a-form-item"),d=p("a-input"),k=p("a-button"),r=p("a-form"),I=p("demo-box");return y(),W(I,{jsfiddle:{us:"There are three layout for form: `horizontal`, `vertical`, `inline`.",cn:"\u8868\u5355\u6709\u4E09\u79CD\u5E03\u5C40\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u8868\u5355\u6709\u4E09\u79CD\u5E03\u5C40\u3002</p>
<h2 id="en-us">en-US</h2>
<p>There are three layout for form: <code>horizontal</code>, <code>vertical</code>, <code>inline</code>.</p>
`,order:5,title:{"zh-CN":"\u8868\u5355\u5E03\u5C40","en-US":"Form Layout"},relativePath:"src/docs/form/demo/layout.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxheW91dD0iZm9ybVN0YXRlLmxheW91dCIgOm1vZGVsPSJmb3JtU3RhdGUiIHYtYmluZD0iZm9ybUl0ZW1MYXlvdXQiPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJGb3JtIExheW91dCI+CiAgICAgIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5sYXlvdXQiPgogICAgICAgIDxhLXJhZGlvLWJ1dHRvbiB2YWx1ZT0iaG9yaXpvbnRhbCI+SG9yaXpvbnRhbDwvYS1yYWRpby1idXR0b24+CiAgICAgICAgPGEtcmFkaW8tYnV0dG9uIHZhbHVlPSJ2ZXJ0aWNhbCI+VmVydGljYWw8L2EtcmFkaW8tYnV0dG9uPgogICAgICAgIDxhLXJhZGlvLWJ1dHRvbiB2YWx1ZT0iaW5saW5lIj5JbmxpbmU8L2EtcmFkaW8tYnV0dG9uPgogICAgICA8L2EtcmFkaW8tZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJGaWVsZCBBIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLmZpZWxkQSIgcGxhY2Vob2xkZXI9ImlucHV0IHBsYWNlaG9sZGVyIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iRmllbGQgQiI+CiAgICAgIDxhLWlucHV0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5maWVsZEIiIHBsYWNlaG9sZGVyPSJpbnB1dCBwbGFjZWhvbGRlciIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gOndyYXBwZXItY29sPSJidXR0b25JdGVtTGF5b3V0LndyYXBwZXJDb2wiPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSI+U3VibWl0PC9hLWJ1dHRvbj4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgPC9hLWZvcm0+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBjb21wdXRlZCwgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgVW53cmFwUmVmIH0gZnJvbSAndnVlJzsKCmludGVyZmFjZSBGb3JtU3RhdGUgewogIGxheW91dDogJ2hvcml6b250YWwnIHwgJ3ZlcnRpY2FsJyB8ICdpbmxpbmUnOwogIGZpZWxkQTogc3RyaW5nOwogIGZpZWxkQjogc3RyaW5nOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtU3RhdGU6IFVud3JhcFJlZjxGb3JtU3RhdGU+ID0gcmVhY3RpdmUoewogICAgICBsYXlvdXQ6ICdob3Jpem9udGFsJywKICAgICAgZmllbGRBOiAnJywKICAgICAgZmllbGRCOiAnJywKICAgIH0pOwogICAgY29uc3QgZm9ybUl0ZW1MYXlvdXQgPSBjb21wdXRlZCgoKSA9PiB7CiAgICAgIGNvbnN0IHsgbGF5b3V0IH0gPSBmb3JtU3RhdGU7CiAgICAgIHJldHVybiBsYXlvdXQgPT09ICdob3Jpem9udGFsJwogICAgICAgID8gewogICAgICAgICAgICBsYWJlbENvbDogeyBzcGFuOiA0IH0sCiAgICAgICAgICAgIHdyYXBwZXJDb2w6IHsgc3BhbjogMTQgfSwKICAgICAgICAgIH0KICAgICAgICA6IHt9OwogICAgfSk7CiAgICBjb25zdCBidXR0b25JdGVtTGF5b3V0ID0gY29tcHV0ZWQoKCkgPT4gewogICAgICBjb25zdCB7IGxheW91dCB9ID0gZm9ybVN0YXRlOwogICAgICByZXR1cm4gbGF5b3V0ID09PSAnaG9yaXpvbnRhbCcKICAgICAgICA/IHsKICAgICAgICAgICAgd3JhcHBlckNvbDogeyBzcGFuOiAxNCwgb2Zmc2V0OiA0IH0sCiAgICAgICAgICB9CiAgICAgICAgOiB7fTsKICAgIH0pOwogICAgcmV0dXJuIHsKICAgICAgZm9ybVN0YXRlLAogICAgICBmb3JtSXRlbUxheW91dCwKICAgICAgYnV0dG9uSXRlbUxheW91dCwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxheW91dD0iZm9ybVN0YXRlLmxheW91dCIgOm1vZGVsPSJmb3JtU3RhdGUiIHYtYmluZD0iZm9ybUl0ZW1MYXlvdXQiPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJGb3JtIExheW91dCI+CiAgICAgIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5sYXlvdXQiPgogICAgICAgIDxhLXJhZGlvLWJ1dHRvbiB2YWx1ZT0iaG9yaXpvbnRhbCI+SG9yaXpvbnRhbDwvYS1yYWRpby1idXR0b24+CiAgICAgICAgPGEtcmFkaW8tYnV0dG9uIHZhbHVlPSJ2ZXJ0aWNhbCI+VmVydGljYWw8L2EtcmFkaW8tYnV0dG9uPgogICAgICAgIDxhLXJhZGlvLWJ1dHRvbiB2YWx1ZT0iaW5saW5lIj5JbmxpbmU8L2EtcmFkaW8tYnV0dG9uPgogICAgICA8L2EtcmFkaW8tZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJGaWVsZCBBIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLmZpZWxkQSIgcGxhY2Vob2xkZXI9ImlucHV0IHBsYWNlaG9sZGVyIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iRmllbGQgQiI+CiAgICAgIDxhLWlucHV0IHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5maWVsZEIiIHBsYWNlaG9sZGVyPSJpbnB1dCBwbGFjZWhvbGRlciIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gOndyYXBwZXItY29sPSJidXR0b25JdGVtTGF5b3V0LndyYXBwZXJDb2wiPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSI+U3VibWl0PC9hLWJ1dHRvbj4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgPC9hLWZvcm0+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGNvbXB1dGVkLCBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZvcm1TdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgbGF5b3V0OiAnaG9yaXpvbnRhbCcsCiAgICAgIGZpZWxkQTogJycsCiAgICAgIGZpZWxkQjogJycsCiAgICB9KTsKICAgIGNvbnN0IGZvcm1JdGVtTGF5b3V0ID0gY29tcHV0ZWQoKCkgPT4gewogICAgICBjb25zdCB7IGxheW91dCB9ID0gZm9ybVN0YXRlOwogICAgICByZXR1cm4gbGF5b3V0ID09PSAnaG9yaXpvbnRhbCcKICAgICAgICA/IHsKICAgICAgICAgICAgbGFiZWxDb2w6IHsKICAgICAgICAgICAgICBzcGFuOiA0LAogICAgICAgICAgICB9LAogICAgICAgICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgICAgICAgc3BhbjogMTQsCiAgICAgICAgICAgIH0sCiAgICAgICAgICB9CiAgICAgICAgOiB7fTsKICAgIH0pOwogICAgY29uc3QgYnV0dG9uSXRlbUxheW91dCA9IGNvbXB1dGVkKCgpID0+IHsKICAgICAgY29uc3QgeyBsYXlvdXQgfSA9IGZvcm1TdGF0ZTsKICAgICAgcmV0dXJuIGxheW91dCA9PT0gJ2hvcml6b250YWwnCiAgICAgICAgPyB7CiAgICAgICAgICAgIHdyYXBwZXJDb2w6IHsKICAgICAgICAgICAgICBzcGFuOiAxNCwKICAgICAgICAgICAgICBvZmZzZXQ6IDQsCiAgICAgICAgICAgIH0sCiAgICAgICAgICB9CiAgICAgICAgOiB7fTsKICAgIH0pOwogICAgcmV0dXJuIHsKICAgICAgZm9ybVN0YXRlLAogICAgICBmb3JtSXRlbUxheW91dCwKICAgICAgYnV0dG9uSXRlbUxheW91dCwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:e(()=>[o(r,B({layout:s.formState.layout,model:s.formState},s.formItemLayout),{default:e(()=>[o(l,{label:"Form Layout"},{default:e(()=>[o(c,{value:s.formState.layout,"onUpdate:value":t[0]||(t[0]=m=>s.formState.layout=m)},{default:e(()=>[o(u,{value:"horizontal"},{default:e(()=>t[3]||(t[3]=[a("Horizontal")])),_:1,__:[3]}),o(u,{value:"vertical"},{default:e(()=>t[4]||(t[4]=[a("Vertical")])),_:1,__:[4]}),o(u,{value:"inline"},{default:e(()=>t[5]||(t[5]=[a("Inline")])),_:1,__:[5]})]),_:1},8,["value"])]),_:1}),o(l,{label:"Field A"},{default:e(()=>[o(d,{value:s.formState.fieldA,"onUpdate:value":t[1]||(t[1]=m=>s.formState.fieldA=m),placeholder:"input placeholder"},null,8,["value"])]),_:1}),o(l,{label:"Field B"},{default:e(()=>[o(d,{value:s.formState.fieldB,"onUpdate:value":t[2]||(t[2]=m=>s.formState.fieldB=m),placeholder:"input placeholder"},null,8,["value"])]),_:1}),o(l,{"wrapper-col":s.buttonItemLayout.wrapperCol},{default:e(()=>[o(k,{type:"primary"},{default:e(()=>t[6]||(t[6]=[a("Submit")])),_:1,__:[6]})]),_:1},8,["wrapper-col"])]),_:1},16,["layout","model"])]),htmlCode:e(()=>t[7]||(t[7]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.layout"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayout"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Form Layout"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.layout"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-button")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("horizontal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Horizontal"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-button")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vertical"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Vertical"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-button")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inline"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Inline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Field A"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.fieldA"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("input placeholder"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Field B"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.fieldB"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("input placeholder"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("buttonItemLayout.wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" computed"),n("span",{class:"token punctuation"},","),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" UnwrapRef "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"FormState"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"layout"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'horizontal'"),a(),n("span",{class:"token operator"},"|"),a(),n("span",{class:"token string"},"'vertical'"),a(),n("span",{class:"token operator"},"|"),a(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"fieldA"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"fieldB"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"formState"),n("span",{class:"token operator"},":"),a(" UnwrapRef"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"layout"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'horizontal'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"fieldA"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"fieldB"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formItemLayout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" layout "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(" formState"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"return"),a(" layout "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"'horizontal'"),a(`
        `),n("span",{class:"token operator"},"?"),a(),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),a(`
        `),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" buttonItemLayout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" layout "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(" formState"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"return"),a(" layout "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"'horizontal'"),a(`
        `),n("span",{class:"token operator"},"?"),a(),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"offset"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),a(`
        `),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      formItemLayout`),n("span",{class:"token punctuation"},","),a(`
      buttonItemLayout`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[8]||(t[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.layout"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formItemLayout"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Form Layout"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.layout"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-button")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("horizontal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Horizontal"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-button")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vertical"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Vertical"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-button")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inline"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Inline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Field A"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.fieldA"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("input placeholder"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Field B"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.fieldB"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("input placeholder"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("buttonItemLayout.wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" computed"),n("span",{class:"token punctuation"},","),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"layout"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'horizontal'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"fieldA"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"fieldB"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formItemLayout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" layout "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(" formState"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"return"),a(" layout "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"'horizontal'"),a(`
        `),n("span",{class:"token operator"},"?"),a(),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
              `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
              `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),a(`
        `),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" buttonItemLayout "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" layout "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(" formState"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"return"),a(" layout "),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token string"},"'horizontal'"),a(`
        `),n("span",{class:"token operator"},"?"),a(),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
              `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
              `),n("span",{class:"token literal-property property"},"offset"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),a(`
        `),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      formItemLayout`),n("span",{class:"token punctuation"},","),a(`
      buttonItemLayout`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var Rn=G(Yn,[["render",Fn]]);const Jn=S({setup(){const s=R(),t=Z({name:"",region:void 0,date1:void 0,delivery:!1,type:[],resource:"",desc:""});return{formRef:s,labelCol:{span:4},wrapperCol:{span:14},other:"",formState:t,rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{required:!0,message:"Please pick a date",trigger:"change",type:"object"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},onSubmit:()=>{s.value.validate().then(()=>{console.log("values",t,V(t))}).catch(b=>{console.log("error",b)})},resetForm:()=>{s.value.resetFields()}}}});function Xn(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-select-option"),d=p("a-select"),k=p("a-date-picker"),r=p("a-switch"),I=p("a-checkbox"),m=p("a-checkbox-group"),v=p("a-radio"),A=p("a-radio-group"),f=p("a-textarea"),Y=p("a-button"),F=p("a-form"),h=p("demo-box");return y(),W(h,{jsfiddle:{us:"Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `FormItem` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).",cn:"Form \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u8868\u5355\u9A8C\u8BC1\u7684\u529F\u80FD\uFF0C\u53EA\u9700\u8981\u901A\u8FC7 `rules` \u5C5E\u6027\u4F20\u5165\u7EA6\u5B9A\u7684\u9A8C\u8BC1\u89C4\u5219\uFF0C\u5E76\u5C06 `FormItem` \u7684 `prop` \u5C5E\u6027\u8BBE\u7F6E\u4E3A\u9700\u6821\u9A8C\u7684\u5B57\u6BB5\u540D\u5373\u53EF\u3002\u6821\u9A8C\u89C4\u5219\u53C2\u89C1 [async-validator](https://github.com/yiminghe/async-validator)",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>Form \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u8868\u5355\u9A8C\u8BC1\u7684\u529F\u80FD\uFF0C\u53EA\u9700\u8981\u901A\u8FC7 <code>rules</code> \u5C5E\u6027\u4F20\u5165\u7EA6\u5B9A\u7684\u9A8C\u8BC1\u89C4\u5219\uFF0C\u5E76\u5C06 <code>FormItem</code> \u7684 <code>prop</code> \u5C5E\u6027\u8BBE\u7F6E\u4E3A\u9700\u6821\u9A8C\u7684\u5B57\u6BB5\u540D\u5373\u53EF\u3002\u6821\u9A8C\u89C4\u5219\u53C2\u89C1 <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a></p>
<h2 id="en-us">en-US</h2>
<p>Just add the <code>rules</code> attribute for <code>Form</code> component, pass validation rules, and set <code>prop</code> attribute for <code>FormItem</code> as a specific key that needs to be validated. See more information at <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>.</p>
`,order:6,title:{"zh-CN":"\u8868\u5355\u9A8C\u8BC1","en-US":"Validation"},relativePath:"src/docs/form/demo/validation.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0KICAgIHJlZj0iZm9ybVJlZiIKICAgIDptb2RlbD0iZm9ybVN0YXRlIgogICAgOnJ1bGVzPSJydWxlcyIKICAgIDpsYWJlbC1jb2w9ImxhYmVsQ29sIgogICAgOndyYXBwZXItY29sPSJ3cmFwcGVyQ29sIgogID4KICAgIDxhLWZvcm0taXRlbSByZWY9Im5hbWUiIGxhYmVsPSJBY3Rpdml0eSBuYW1lIiBuYW1lPSJuYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSB6b25lIiBuYW1lPSJyZWdpb24iPgogICAgICA8YS1zZWxlY3Qgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLnJlZ2lvbiIgcGxhY2Vob2xkZXI9InBsZWFzZSBzZWxlY3QgeW91ciB6b25lIj4KICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJzaGFuZ2hhaSI+Wm9uZSBvbmU8L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJiZWlqaW5nIj5ab25lIHR3bzwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICA8L2Etc2VsZWN0PgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgdGltZSIgcmVxdWlyZWQgbmFtZT0iZGF0ZTEiPgogICAgICA8YS1kYXRlLXBpY2tlcgogICAgICAgIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5kYXRlMSIKICAgICAgICBzaG93LXRpbWUKICAgICAgICB0eXBlPSJkYXRlIgogICAgICAgIHBsYWNlaG9sZGVyPSJQaWNrIGEgZGF0ZSIKICAgICAgICBzdHlsZT0id2lkdGg6IDEwMCUiCiAgICAgIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJJbnN0YW50IGRlbGl2ZXJ5IiBuYW1lPSJkZWxpdmVyeSI+CiAgICAgIDxhLXN3aXRjaCB2LW1vZGVsOmNoZWNrZWQ9ImZvcm1TdGF0ZS5kZWxpdmVyeSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHR5cGUiIG5hbWU9InR5cGUiPgogICAgICA8YS1jaGVja2JveC1ncm91cCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUudHlwZSI+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjEiIG5hbWU9InR5cGUiPk9ubGluZTwvYS1jaGVja2JveD4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMiIgbmFtZT0idHlwZSI+UHJvbW90aW9uPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIzIiBuYW1lPSJ0eXBlIj5PZmZsaW5lPC9hLWNoZWNrYm94PgogICAgICA8L2EtY2hlY2tib3gtZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJSZXNvdXJjZXMiIG5hbWU9InJlc291cmNlIj4KICAgICAgPGEtcmFkaW8tZ3JvdXAgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLnJlc291cmNlIj4KICAgICAgICA8YS1yYWRpbyB2YWx1ZT0iMSI+U3BvbnNvcjwvYS1yYWRpbz4KICAgICAgICA8YS1yYWRpbyB2YWx1ZT0iMiI+VmVudWU8L2EtcmFkaW8+CiAgICAgIDwvYS1yYWRpby1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IGZvcm0iIG5hbWU9ImRlc2MiPgogICAgICA8YS10ZXh0YXJlYSB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUuZGVzYyIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gOndyYXBwZXItY29sPSJ7IHNwYW46IDE0LCBvZmZzZXQ6IDQgfSI+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uU3VibWl0Ij5DcmVhdGU8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0Rm9ybSI+UmVzZXQ8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFZhbGlkYXRlRXJyb3JFbnRpdHkgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZS9lcy9mb3JtL2ludGVyZmFjZSc7CmltcG9ydCB7IE1vbWVudCB9IGZyb20gJ21vbWVudCc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHJlZiwgdG9SYXcsIFVud3JhcFJlZiB9IGZyb20gJ3Z1ZSc7CmludGVyZmFjZSBGb3JtU3RhdGUgewogIG5hbWU6IHN0cmluZzsKICByZWdpb246IHN0cmluZyB8IHVuZGVmaW5lZDsKICBkYXRlMTogTW9tZW50IHwgdW5kZWZpbmVkOwogIGRlbGl2ZXJ5OiBib29sZWFuOwogIHR5cGU6IHN0cmluZ1tdOwogIHJlc291cmNlOiBzdHJpbmc7CiAgZGVzYzogc3RyaW5nOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtUmVmID0gcmVmKCk7CiAgICBjb25zdCBmb3JtU3RhdGU6IFVud3JhcFJlZjxGb3JtU3RhdGU+ID0gcmVhY3RpdmUoewogICAgICBuYW1lOiAnJywKICAgICAgcmVnaW9uOiB1bmRlZmluZWQsCiAgICAgIGRhdGUxOiB1bmRlZmluZWQsCiAgICAgIGRlbGl2ZXJ5OiBmYWxzZSwKICAgICAgdHlwZTogW10sCiAgICAgIHJlc291cmNlOiAnJywKICAgICAgZGVzYzogJycsCiAgICB9KTsKICAgIGNvbnN0IHJ1bGVzID0gewogICAgICBuYW1lOiBbCiAgICAgICAgeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBBY3Rpdml0eSBuYW1lJywgdHJpZ2dlcjogJ2JsdXInIH0sCiAgICAgICAgeyBtaW46IDMsIG1heDogNSwgbWVzc2FnZTogJ0xlbmd0aCBzaG91bGQgYmUgMyB0byA1JywgdHJpZ2dlcjogJ2JsdXInIH0sCiAgICAgIF0sCiAgICAgIHJlZ2lvbjogW3sgcmVxdWlyZWQ6IHRydWUsIG1lc3NhZ2U6ICdQbGVhc2Ugc2VsZWN0IEFjdGl2aXR5IHpvbmUnLCB0cmlnZ2VyOiAnY2hhbmdlJyB9XSwKICAgICAgZGF0ZTE6IFt7IHJlcXVpcmVkOiB0cnVlLCBtZXNzYWdlOiAnUGxlYXNlIHBpY2sgYSBkYXRlJywgdHJpZ2dlcjogJ2NoYW5nZScsIHR5cGU6ICdvYmplY3QnIH1dLAogICAgICB0eXBlOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2FycmF5JywKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgYXQgbGVhc3Qgb25lIGFjdGl2aXR5IHR5cGUnLAogICAgICAgICAgdHJpZ2dlcjogJ2NoYW5nZScsCiAgICAgICAgfSwKICAgICAgXSwKICAgICAgcmVzb3VyY2U6IFt7IHJlcXVpcmVkOiB0cnVlLCBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCBhY3Rpdml0eSByZXNvdXJjZScsIHRyaWdnZXI6ICdjaGFuZ2UnIH1dLAogICAgICBkZXNjOiBbeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBhY3Rpdml0eSBmb3JtJywgdHJpZ2dlcjogJ2JsdXInIH1dLAogICAgfTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICBmb3JtUmVmLnZhbHVlCiAgICAgICAgLnZhbGlkYXRlKCkKICAgICAgICAudGhlbigoKSA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygndmFsdWVzJywgZm9ybVN0YXRlLCB0b1Jhdyhmb3JtU3RhdGUpKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaCgoZXJyb3I6IFZhbGlkYXRlRXJyb3JFbnRpdHk8Rm9ybVN0YXRlPikgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ2Vycm9yJywgZXJyb3IpOwogICAgICAgIH0pOwogICAgfTsKICAgIGNvbnN0IHJlc2V0Rm9ybSA9ICgpID0+IHsKICAgICAgZm9ybVJlZi52YWx1ZS5yZXNldEZpZWxkcygpOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGZvcm1SZWYsCiAgICAgIGxhYmVsQ29sOiB7IHNwYW46IDQgfSwKICAgICAgd3JhcHBlckNvbDogeyBzcGFuOiAxNCB9LAogICAgICBvdGhlcjogJycsCiAgICAgIGZvcm1TdGF0ZSwKICAgICAgcnVsZXMsCiAgICAgIG9uU3VibWl0LAogICAgICByZXNldEZvcm0sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0KICAgIHJlZj0iZm9ybVJlZiIKICAgIDptb2RlbD0iZm9ybVN0YXRlIgogICAgOnJ1bGVzPSJydWxlcyIKICAgIDpsYWJlbC1jb2w9ImxhYmVsQ29sIgogICAgOndyYXBwZXItY29sPSJ3cmFwcGVyQ29sIgogID4KICAgIDxhLWZvcm0taXRlbSByZWY9Im5hbWUiIGxhYmVsPSJBY3Rpdml0eSBuYW1lIiBuYW1lPSJuYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSB6b25lIiBuYW1lPSJyZWdpb24iPgogICAgICA8YS1zZWxlY3Qgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLnJlZ2lvbiIgcGxhY2Vob2xkZXI9InBsZWFzZSBzZWxlY3QgeW91ciB6b25lIj4KICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJzaGFuZ2hhaSI+Wm9uZSBvbmU8L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJiZWlqaW5nIj5ab25lIHR3bzwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICA8L2Etc2VsZWN0PgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgdGltZSIgcmVxdWlyZWQgbmFtZT0iZGF0ZTEiPgogICAgICA8YS1kYXRlLXBpY2tlcgogICAgICAgIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5kYXRlMSIKICAgICAgICBzaG93LXRpbWUKICAgICAgICB0eXBlPSJkYXRlIgogICAgICAgIHBsYWNlaG9sZGVyPSJQaWNrIGEgZGF0ZSIKICAgICAgICBzdHlsZT0id2lkdGg6IDEwMCUiCiAgICAgIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJJbnN0YW50IGRlbGl2ZXJ5IiBuYW1lPSJkZWxpdmVyeSI+CiAgICAgIDxhLXN3aXRjaCB2LW1vZGVsOmNoZWNrZWQ9ImZvcm1TdGF0ZS5kZWxpdmVyeSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHR5cGUiIG5hbWU9InR5cGUiPgogICAgICA8YS1jaGVja2JveC1ncm91cCB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUudHlwZSI+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjEiIG5hbWU9InR5cGUiPk9ubGluZTwvYS1jaGVja2JveD4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMiIgbmFtZT0idHlwZSI+UHJvbW90aW9uPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIzIiBuYW1lPSJ0eXBlIj5PZmZsaW5lPC9hLWNoZWNrYm94PgogICAgICA8L2EtY2hlY2tib3gtZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJSZXNvdXJjZXMiIG5hbWU9InJlc291cmNlIj4KICAgICAgPGEtcmFkaW8tZ3JvdXAgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLnJlc291cmNlIj4KICAgICAgICA8YS1yYWRpbyB2YWx1ZT0iMSI+U3BvbnNvcjwvYS1yYWRpbz4KICAgICAgICA8YS1yYWRpbyB2YWx1ZT0iMiI+VmVudWU8L2EtcmFkaW8+CiAgICAgIDwvYS1yYWRpby1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IGZvcm0iIG5hbWU9ImRlc2MiPgogICAgICA8YS10ZXh0YXJlYSB2LW1vZGVsOnZhbHVlPSJmb3JtU3RhdGUuZGVzYyIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gOndyYXBwZXItY29sPSJ7IHNwYW46IDE0LCBvZmZzZXQ6IDQgfSI+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uU3VibWl0Ij5DcmVhdGU8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0Rm9ybSI+UmVzZXQ8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgcmVmLCB0b1JhdyB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtUmVmID0gcmVmKCk7CiAgICBjb25zdCBmb3JtU3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6ICcnLAogICAgICByZWdpb246IHVuZGVmaW5lZCwKICAgICAgZGF0ZTE6IHVuZGVmaW5lZCwKICAgICAgZGVsaXZlcnk6IGZhbHNlLAogICAgICB0eXBlOiBbXSwKICAgICAgcmVzb3VyY2U6ICcnLAogICAgICBkZXNjOiAnJywKICAgIH0pOwogICAgY29uc3QgcnVsZXMgPSB7CiAgICAgIG5hbWU6IFsKICAgICAgICB7CiAgICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgaW5wdXQgQWN0aXZpdHkgbmFtZScsCiAgICAgICAgICB0cmlnZ2VyOiAnYmx1cicsCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICBtaW46IDMsCiAgICAgICAgICBtYXg6IDUsCiAgICAgICAgICBtZXNzYWdlOiAnTGVuZ3RoIHNob3VsZCBiZSAzIHRvIDUnLAogICAgICAgICAgdHJpZ2dlcjogJ2JsdXInLAogICAgICAgIH0sCiAgICAgIF0sCiAgICAgIHJlZ2lvbjogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgQWN0aXZpdHkgem9uZScsCiAgICAgICAgICB0cmlnZ2VyOiAnY2hhbmdlJywKICAgICAgICB9LAogICAgICBdLAogICAgICBkYXRlMTogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBwaWNrIGEgZGF0ZScsCiAgICAgICAgICB0cmlnZ2VyOiAnY2hhbmdlJywKICAgICAgICAgIHR5cGU6ICdvYmplY3QnLAogICAgICAgIH0sCiAgICAgIF0sCiAgICAgIHR5cGU6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAnYXJyYXknLAogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCBhdCBsZWFzdCBvbmUgYWN0aXZpdHkgdHlwZScsCiAgICAgICAgICB0cmlnZ2VyOiAnY2hhbmdlJywKICAgICAgICB9LAogICAgICBdLAogICAgICByZXNvdXJjZTogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgYWN0aXZpdHkgcmVzb3VyY2UnLAogICAgICAgICAgdHJpZ2dlcjogJ2NoYW5nZScsCiAgICAgICAgfSwKICAgICAgXSwKICAgICAgZGVzYzogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBhY3Rpdml0eSBmb3JtJywKICAgICAgICAgIHRyaWdnZXI6ICdibHVyJywKICAgICAgICB9LAogICAgICBdLAogICAgfTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICBmb3JtUmVmLnZhbHVlCiAgICAgICAgLnZhbGlkYXRlKCkKICAgICAgICAudGhlbigoKSA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygndmFsdWVzJywgZm9ybVN0YXRlLCB0b1Jhdyhmb3JtU3RhdGUpKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaChlcnJvciA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygnZXJyb3InLCBlcnJvcik7CiAgICAgICAgfSk7CiAgICB9OwogICAgY29uc3QgcmVzZXRGb3JtID0gKCkgPT4gewogICAgICBmb3JtUmVmLnZhbHVlLnJlc2V0RmllbGRzKCk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgZm9ybVJlZiwKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICBzcGFuOiA0LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgc3BhbjogMTQsCiAgICAgIH0sCiAgICAgIG90aGVyOiAnJywKICAgICAgZm9ybVN0YXRlLAogICAgICBydWxlcywKICAgICAgb25TdWJtaXQsCiAgICAgIHJlc2V0Rm9ybSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:e(()=>[o(F,{ref:"formRef",model:s.formState,rules:s.rules,"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,{ref:"name",label:"Activity name",name:"name"},{default:e(()=>[o(u,{value:s.formState.name,"onUpdate:value":t[0]||(t[0]=w=>s.formState.name=w)},null,8,["value"])]),_:1},512),o(c,{label:"Activity zone",name:"region"},{default:e(()=>[o(d,{value:s.formState.region,"onUpdate:value":t[1]||(t[1]=w=>s.formState.region=w),placeholder:"please select your zone"},{default:e(()=>[o(l,{value:"shanghai"},{default:e(()=>t[7]||(t[7]=[a("Zone one")])),_:1,__:[7]}),o(l,{value:"beijing"},{default:e(()=>t[8]||(t[8]=[a("Zone two")])),_:1,__:[8]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Activity time",required:"",name:"date1"},{default:e(()=>[o(k,{value:s.formState.date1,"onUpdate:value":t[2]||(t[2]=w=>s.formState.date1=w),"show-time":"",type:"date",placeholder:"Pick a date",style:{width:"100%"}},null,8,["value"])]),_:1}),o(c,{label:"Instant delivery",name:"delivery"},{default:e(()=>[o(r,{checked:s.formState.delivery,"onUpdate:checked":t[3]||(t[3]=w=>s.formState.delivery=w)},null,8,["checked"])]),_:1}),o(c,{label:"Activity type",name:"type"},{default:e(()=>[o(m,{value:s.formState.type,"onUpdate:value":t[4]||(t[4]=w=>s.formState.type=w)},{default:e(()=>[o(I,{value:"1",name:"type"},{default:e(()=>t[9]||(t[9]=[a("Online")])),_:1,__:[9]}),o(I,{value:"2",name:"type"},{default:e(()=>t[10]||(t[10]=[a("Promotion")])),_:1,__:[10]}),o(I,{value:"3",name:"type"},{default:e(()=>t[11]||(t[11]=[a("Offline")])),_:1,__:[11]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Resources",name:"resource"},{default:e(()=>[o(A,{value:s.formState.resource,"onUpdate:value":t[5]||(t[5]=w=>s.formState.resource=w)},{default:e(()=>[o(v,{value:"1"},{default:e(()=>t[12]||(t[12]=[a("Sponsor")])),_:1,__:[12]}),o(v,{value:"2"},{default:e(()=>t[13]||(t[13]=[a("Venue")])),_:1,__:[13]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Activity form",name:"desc"},{default:e(()=>[o(f,{value:s.formState.desc,"onUpdate:value":t[6]||(t[6]=w=>s.formState.desc=w)},null,8,["value"])]),_:1}),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(Y,{type:"primary",onClick:s.onSubmit},{default:e(()=>t[14]||(t[14]=[a("Create")])),_:1,__:[14]},8,["onClick"]),o(Y,{style:{"margin-left":"10px"},onClick:s.resetForm},{default:e(()=>t[15]||(t[15]=[a("Reset")])),_:1,__:[15]},8,["onClick"])]),_:1})]),_:1},8,["model","rules","label-col","wrapper-col"])]),htmlCode:e(()=>t[16]||(t[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
    `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("region"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity time"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("date1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-date-picker")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.date1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"show-time"),a(`
        `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pick a date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Instant delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("delivery"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Resources"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Sponsor"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Venue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity form"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("desc"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-textarea")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.desc"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ValidateErrorEntity "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue/es/form/interface'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Moment "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'moment'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref"),n("span",{class:"token punctuation"},","),a(" toRaw"),n("span",{class:"token punctuation"},","),a(" UnwrapRef "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"FormState"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(" string "),n("span",{class:"token operator"},"|"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(" Moment "),n("span",{class:"token operator"},"|"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(" boolean"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"formState"),n("span",{class:"token operator"},":"),a(" UnwrapRef"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rules "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input Activity name'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"min"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"max"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"5"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Length should be 3 to 5'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select Activity zone'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please pick a date'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'object'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'array'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select at least one activity type'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select activity resource'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input activity form'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a(`value
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'values'"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"error"),n("span",{class:"token operator"},":"),a(" ValidateErrorEntity"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"other"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[17]||(t[17]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(`
    `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formRef"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("region"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity time"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("date1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-date-picker")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.date1"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"show-time"),a(`
        `),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pick a date"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Instant delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("delivery"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Resources"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Sponsor"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Venue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity form"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("desc"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-textarea")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.desc"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetForm"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rules "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input Activity name'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"min"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"max"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"5"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Length should be 3 to 5'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select Activity zone'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"date1"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please pick a date'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'object'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'array'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select at least one activity type'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select activity resource'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'change'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input activity form'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a(`value
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'values'"),n("span",{class:"token punctuation"},","),a(" formState"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"error"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" error"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"resetForm"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      formRef`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"other"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
      resetForm`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var Hn=G(Jn,[["render",Xn]]);const Pn=J.useForm,Ln=S({setup(){const s=Z({name:"",region:void 0,type:[]}),t=Z({name:[{required:!0,message:"Please input name"}],region:[{required:!0,message:"Please select region"}],type:[{required:!0,message:"Please select type",type:"array"}]}),{resetFields:g,validate:i,validateInfos:C}=Pn(s,t);return{labelCol:{span:4},wrapperCol:{span:14},validateInfos:C,resetFields:g,modelRef:s,onSubmit:()=>{i().then(()=>{console.log(V(s))}).catch(u=>{console.log("error",u)})}}}});function Nn(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-select-option"),d=p("a-select"),k=p("a-checkbox"),r=p("a-checkbox-group"),I=p("a-button"),m=p("a-form"),v=p("demo-box");return y(),W(v,{jsfiddle:{us:"use [`Form.useForm`](#useForm) provides form validation logic and status.",cn:"\u901A\u8FC7 [`Form.useForm`](#useForm) \u66F4\u52A0\u7075\u6D3B\u7684\u4F7F\u7528\u8868\u5355\u7EC4\u4EF6\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u901A\u8FC7 <a href="#useForm"><code>Form.useForm</code></a> \u66F4\u52A0\u7075\u6D3B\u7684\u4F7F\u7528\u8868\u5355\u7EC4\u4EF6\u3002</p>
<h2 id="en-us">en-US</h2>
<p>use <a href="#useForm"><code>Form.useForm</code></a> provides form validation logic and status.</p>
`,order:7,title:{"zh-CN":"useForm \u57FA\u672C\u8868\u5355","en-US":"useForm Basic Usage"},relativePath:"src/docs/form/demo/useForm-basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5uYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYubmFtZSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHpvbmUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5yZWdpb24iPgogICAgICA8YS1zZWxlY3Qgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYucmVnaW9uIiBwbGFjZWhvbGRlcj0icGxlYXNlIHNlbGVjdCB5b3VyIHpvbmUiPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9InNoYW5naGFpIj5ab25lIG9uZTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9ImJlaWppbmciPlpvbmUgdHdvPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgIDwvYS1zZWxlY3Q+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSB0eXBlIiB2LWJpbmQ9InZhbGlkYXRlSW5mb3MudHlwZSI+CiAgICAgIDxhLWNoZWNrYm94LWdyb3VwIHYtbW9kZWw6dmFsdWU9Im1vZGVsUmVmLnR5cGUiPgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIxIiBuYW1lPSJ0eXBlIj5PbmxpbmU8L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjIiIG5hbWU9InR5cGUiPlByb21vdGlvbjwvYS1jaGVja2JveD4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMyIgbmFtZT0idHlwZSI+T2ZmbGluZTwvYS1jaGVja2JveD4KICAgICAgPC9hLWNoZWNrYm94LWdyb3VwPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljay5wcmV2ZW50PSJvblN1Ym1pdCI+Q3JlYXRlPC9hLWJ1dHRvbj4KICAgICAgPGEtYnV0dG9uIHN0eWxlPSJtYXJnaW4tbGVmdDogMTBweCIgQGNsaWNrPSJyZXNldEZpZWxkcyI+UmVzZXQ8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmF3IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgRm9ybSB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKCmNvbnN0IHVzZUZvcm0gPSBGb3JtLnVzZUZvcm07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBtb2RlbFJlZiA9IHJlYWN0aXZlKHsKICAgICAgbmFtZTogJycsCiAgICAgIHJlZ2lvbjogdW5kZWZpbmVkLAogICAgICB0eXBlOiBbXSwKICAgIH0pOwogICAgY29uc3QgcnVsZXNSZWYgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6IFsKICAgICAgICB7CiAgICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgaW5wdXQgbmFtZScsCiAgICAgICAgfSwKICAgICAgXSwKICAgICAgcmVnaW9uOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCByZWdpb24nLAogICAgICAgIH0sCiAgICAgIF0sCiAgICAgIHR5cGU6IFsKICAgICAgICB7CiAgICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICAgIG1lc3NhZ2U6ICdQbGVhc2Ugc2VsZWN0IHR5cGUnLAogICAgICAgICAgdHlwZTogJ2FycmF5JywKICAgICAgICB9LAogICAgICBdLAogICAgfSk7CiAgICBjb25zdCB7IHJlc2V0RmllbGRzLCB2YWxpZGF0ZSwgdmFsaWRhdGVJbmZvcyB9ID0gdXNlRm9ybShtb2RlbFJlZiwgcnVsZXNSZWYpOwogICAgY29uc3Qgb25TdWJtaXQgPSAoKSA9PiB7CiAgICAgIHZhbGlkYXRlKCkKICAgICAgICAudGhlbigoKSA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZyh0b1Jhdyhtb2RlbFJlZikpOwogICAgICAgIH0pCiAgICAgICAgLmNhdGNoKGVyciA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygnZXJyb3InLCBlcnIpOwogICAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGxhYmVsQ29sOiB7IHNwYW46IDQgfSwKICAgICAgd3JhcHBlckNvbDogeyBzcGFuOiAxNCB9LAogICAgICB2YWxpZGF0ZUluZm9zLAogICAgICByZXNldEZpZWxkcywKICAgICAgbW9kZWxSZWYsCiAgICAgIG9uU3VibWl0LAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5uYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYubmFtZSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHpvbmUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5yZWdpb24iPgogICAgICA8YS1zZWxlY3Qgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYucmVnaW9uIiBwbGFjZWhvbGRlcj0icGxlYXNlIHNlbGVjdCB5b3VyIHpvbmUiPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9InNoYW5naGFpIj5ab25lIG9uZTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9ImJlaWppbmciPlpvbmUgdHdvPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgIDwvYS1zZWxlY3Q+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSB0eXBlIiB2LWJpbmQ9InZhbGlkYXRlSW5mb3MudHlwZSI+CiAgICAgIDxhLWNoZWNrYm94LWdyb3VwIHYtbW9kZWw6dmFsdWU9Im1vZGVsUmVmLnR5cGUiPgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIxIiBuYW1lPSJ0eXBlIj5PbmxpbmU8L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjIiIG5hbWU9InR5cGUiPlByb21vdGlvbjwvYS1jaGVja2JveD4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMyIgbmFtZT0idHlwZSI+T2ZmbGluZTwvYS1jaGVja2JveD4KICAgICAgPC9hLWNoZWNrYm94LWdyb3VwPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljay5wcmV2ZW50PSJvblN1Ym1pdCI+Q3JlYXRlPC9hLWJ1dHRvbj4KICAgICAgPGEtYnV0dG9uIHN0eWxlPSJtYXJnaW4tbGVmdDogMTBweCIgQGNsaWNrPSJyZXNldEZpZWxkcyI+UmVzZXQ8L2EtYnV0dG9uPgogICAgPC9hLWZvcm0taXRlbT4KICA8L2EtZm9ybT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SYXcgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBGb3JtIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwpjb25zdCB1c2VGb3JtID0gRm9ybS51c2VGb3JtOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgbW9kZWxSZWYgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6ICcnLAogICAgICByZWdpb246IHVuZGVmaW5lZCwKICAgICAgdHlwZTogW10sCiAgICB9KTsKICAgIGNvbnN0IHJ1bGVzUmVmID0gcmVhY3RpdmUoewogICAgICBuYW1lOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIGlucHV0IG5hbWUnLAogICAgICAgIH0sCiAgICAgIF0sCiAgICAgIHJlZ2lvbjogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgcmVnaW9uJywKICAgICAgICB9LAogICAgICBdLAogICAgICB0eXBlOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCB0eXBlJywKICAgICAgICAgIHR5cGU6ICdhcnJheScsCiAgICAgICAgfSwKICAgICAgXSwKICAgIH0pOwogICAgY29uc3QgeyByZXNldEZpZWxkcywgdmFsaWRhdGUsIHZhbGlkYXRlSW5mb3MgfSA9IHVzZUZvcm0obW9kZWxSZWYsIHJ1bGVzUmVmKTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICB2YWxpZGF0ZSgpCiAgICAgICAgLnRoZW4oKCkgPT4gewogICAgICAgICAgY29uc29sZS5sb2codG9SYXcobW9kZWxSZWYpKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaChlcnIgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ2Vycm9yJywgZXJyKTsKICAgICAgICB9KTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBsYWJlbENvbDogewogICAgICAgIHNwYW46IDQsCiAgICAgIH0sCiAgICAgIHdyYXBwZXJDb2w6IHsKICAgICAgICBzcGFuOiAxNCwKICAgICAgfSwKICAgICAgdmFsaWRhdGVJbmZvcywKICAgICAgcmVzZXRGaWVsZHMsCiAgICAgIG1vZGVsUmVmLAogICAgICBvblN1Ym1pdCwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:e(()=>[o(m,{"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,B({label:"Activity name"},s.validateInfos.name),{default:e(()=>[o(u,{value:s.modelRef.name,"onUpdate:value":t[0]||(t[0]=A=>s.modelRef.name=A)},null,8,["value"])]),_:1},16),o(c,B({label:"Activity zone"},s.validateInfos.region),{default:e(()=>[o(d,{value:s.modelRef.region,"onUpdate:value":t[1]||(t[1]=A=>s.modelRef.region=A),placeholder:"please select your zone"},{default:e(()=>[o(l,{value:"shanghai"},{default:e(()=>t[3]||(t[3]=[a("Zone one")])),_:1,__:[3]}),o(l,{value:"beijing"},{default:e(()=>t[4]||(t[4]=[a("Zone two")])),_:1,__:[4]})]),_:1},8,["value"])]),_:1},16),o(c,B({label:"Activity type"},s.validateInfos.type),{default:e(()=>[o(r,{value:s.modelRef.type,"onUpdate:value":t[2]||(t[2]=A=>s.modelRef.type=A)},{default:e(()=>[o(k,{value:"1",name:"type"},{default:e(()=>t[5]||(t[5]=[a("Online")])),_:1,__:[5]}),o(k,{value:"2",name:"type"},{default:e(()=>t[6]||(t[6]=[a("Promotion")])),_:1,__:[6]}),o(k,{value:"3",name:"type"},{default:e(()=>t[7]||(t[7]=[a("Offline")])),_:1,__:[7]})]),_:1},8,["value"])]),_:1},16),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(I,{type:"primary",onClick:X(s.onSubmit,["prevent"])},{default:e(()=>t[8]||(t[8]=[a("Create")])),_:1,__:[8]},8,["onClick"]),o(I,{style:{"margin-left":"10px"},onClick:s.resetFields},{default:e(()=>t[9]||(t[9]=[a("Reset")])),_:1,__:[9]},8,["onClick"])]),_:1})]),_:1},8,["label-col","wrapper-col"])]),htmlCode:e(()=>t[10]||(t[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.region"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetFields"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rulesRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select region'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select type'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'array'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},","),a(" rulesRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      resetFields`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[11]||(t[11]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.region"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetFields"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rulesRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select region'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select type'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'array'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},","),a(" rulesRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      resetFields`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var Kn=G(Ln,[["render",Nn]]);const Un=J.useForm,xn=S({setup(){const s=Z({name:"",sub:{name:""}}),{resetFields:t,validate:g,validateInfos:i}=Un(s,Z({name:[{required:!0,message:"Please input name"}],"sub.name":[{required:!0,message:"Please input sub name"}]}));return{labelCol:{span:4},wrapperCol:{span:14},validateInfos:i,reset:()=>{t()},modelRef:s,onSubmit:()=>{g().then(u=>{console.log(u,V(s))}).catch(u=>{console.log("error",u)})}}}});function qn(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-button"),d=p("a-form"),k=p("demo-box");return y(),W(k,{jsfiddle:{us:"[`Form.useForm`](#useForm) use dot string splicing for nested data verification.",cn:"\u901A\u8FC7 [`Form.useForm`](#useForm)  \u4F7F\u7528\u70B9\u5B57\u7B26\u4E32\u62FC\u63A5\u8FDB\u884C\u5D4C\u5957\u6570\u636E\u6821\u9A8C\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u901A\u8FC7 <a href="#useForm"><code>Form.useForm</code></a>  \u4F7F\u7528\u70B9\u5B57\u7B26\u4E32\u62FC\u63A5\u8FDB\u884C\u5D4C\u5957\u6570\u636E\u6821\u9A8C\u3002</p>
<h2 id="en-us">en-US</h2>
<p><a href="#useForm"><code>Form.useForm</code></a> use dot string splicing for nested data verification.</p>
`,order:9,title:{"zh-CN":"useForm \u5D4C\u5957\u8868\u5355","en-US":"useForm for nested Form"},relativePath:"src/docs/form/demo/useForm-nested.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5uYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYubmFtZSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IlN1YiBuYW1lIiB2LWJpbmQ9InZhbGlkYXRlSW5mb3NbJ3N1Yi5uYW1lJ10iPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5zdWIubmFtZSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gOndyYXBwZXItY29sPSJ7IHNwYW46IDE0LCBvZmZzZXQ6IDQgfSI+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2sucHJldmVudD0ib25TdWJtaXQiPkNyZWF0ZTwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiBzdHlsZT0ibWFyZ2luLWxlZnQ6IDEwcHgiIEBjbGljaz0icmVzZXQiPlJlc2V0PC9hLWJ1dHRvbj4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgPC9hLWZvcm0+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JhdyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IEZvcm0gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7Cgpjb25zdCB1c2VGb3JtID0gRm9ybS51c2VGb3JtOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgbW9kZWxSZWYgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6ICcnLAogICAgICBzdWI6IHsKICAgICAgICBuYW1lOiAnJywKICAgICAgfSwKICAgIH0pOwogICAgY29uc3QgeyByZXNldEZpZWxkcywgdmFsaWRhdGUsIHZhbGlkYXRlSW5mb3MgfSA9IHVzZUZvcm0oCiAgICAgIG1vZGVsUmVmLAogICAgICByZWFjdGl2ZSh7CiAgICAgICAgbmFtZTogWwogICAgICAgICAgewogICAgICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBuYW1lJywKICAgICAgICAgIH0sCiAgICAgICAgXSwKICAgICAgICAnc3ViLm5hbWUnOiBbCiAgICAgICAgICB7CiAgICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIGlucHV0IHN1YiBuYW1lJywKICAgICAgICAgIH0sCiAgICAgICAgXSwKICAgICAgfSksCiAgICApOwogICAgY29uc3Qgb25TdWJtaXQgPSAoKSA9PiB7CiAgICAgIHZhbGlkYXRlKCkKICAgICAgICAudGhlbihyZXMgPT4gewogICAgICAgICAgY29uc29sZS5sb2cocmVzLCB0b1Jhdyhtb2RlbFJlZikpOwogICAgICAgIH0pCiAgICAgICAgLmNhdGNoKGVyciA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygnZXJyb3InLCBlcnIpOwogICAgICAgIH0pOwogICAgfTsKICAgIGNvbnN0IHJlc2V0ID0gKCkgPT4gewogICAgICByZXNldEZpZWxkcygpOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGxhYmVsQ29sOiB7IHNwYW46IDQgfSwKICAgICAgd3JhcHBlckNvbDogeyBzcGFuOiAxNCB9LAogICAgICB2YWxpZGF0ZUluZm9zLAogICAgICByZXNldCwKICAgICAgbW9kZWxSZWYsCiAgICAgIG9uU3VibWl0LAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5uYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYubmFtZSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IlN1YiBuYW1lIiB2LWJpbmQ9InZhbGlkYXRlSW5mb3NbJ3N1Yi5uYW1lJ10iPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5zdWIubmFtZSIgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gOndyYXBwZXItY29sPSJ7IHNwYW46IDE0LCBvZmZzZXQ6IDQgfSI+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2sucHJldmVudD0ib25TdWJtaXQiPkNyZWF0ZTwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiBzdHlsZT0ibWFyZ2luLWxlZnQ6IDEwcHgiIEBjbGljaz0icmVzZXQiPlJlc2V0PC9hLWJ1dHRvbj4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgPC9hLWZvcm0+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmF3IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgRm9ybSB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKY29uc3QgdXNlRm9ybSA9IEZvcm0udXNlRm9ybTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IG1vZGVsUmVmID0gcmVhY3RpdmUoewogICAgICBuYW1lOiAnJywKICAgICAgc3ViOiB7CiAgICAgICAgbmFtZTogJycsCiAgICAgIH0sCiAgICB9KTsKICAgIGNvbnN0IHsgcmVzZXRGaWVsZHMsIHZhbGlkYXRlLCB2YWxpZGF0ZUluZm9zIH0gPSB1c2VGb3JtKAogICAgICBtb2RlbFJlZiwKICAgICAgcmVhY3RpdmUoewogICAgICAgIG5hbWU6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgaW5wdXQgbmFtZScsCiAgICAgICAgICB9LAogICAgICAgIF0sCiAgICAgICAgJ3N1Yi5uYW1lJzogWwogICAgICAgICAgewogICAgICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBzdWIgbmFtZScsCiAgICAgICAgICB9LAogICAgICAgIF0sCiAgICAgIH0pLAogICAgKTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICB2YWxpZGF0ZSgpCiAgICAgICAgLnRoZW4ocmVzID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKHJlcywgdG9SYXcobW9kZWxSZWYpKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaChlcnIgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ2Vycm9yJywgZXJyKTsKICAgICAgICB9KTsKICAgIH07CiAgICBjb25zdCByZXNldCA9ICgpID0+IHsKICAgICAgcmVzZXRGaWVsZHMoKTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBsYWJlbENvbDogewogICAgICAgIHNwYW46IDQsCiAgICAgIH0sCiAgICAgIHdyYXBwZXJDb2w6IHsKICAgICAgICBzcGFuOiAxNCwKICAgICAgfSwKICAgICAgdmFsaWRhdGVJbmZvcywKICAgICAgcmVzZXQsCiAgICAgIG1vZGVsUmVmLAogICAgICBvblN1Ym1pdCwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:e(()=>[o(d,{"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,B({label:"Activity name"},s.validateInfos.name),{default:e(()=>[o(u,{value:s.modelRef.name,"onUpdate:value":t[0]||(t[0]=r=>s.modelRef.name=r)},null,8,["value"])]),_:1},16),o(c,B({label:"Sub name"},s.validateInfos["sub.name"]),{default:e(()=>[o(u,{value:s.modelRef.sub.name,"onUpdate:value":t[1]||(t[1]=r=>s.modelRef.sub.name=r)},null,8,["value"])]),_:1},16),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(l,{type:"primary",onClick:X(s.onSubmit,["prevent"])},{default:e(()=>t[2]||(t[2]=[a("Create")])),_:1,__:[2]},8,["onClick"]),o(l,{style:{"margin-left":"10px"},onClick:s.reset},{default:e(()=>t[3]||(t[3]=[a("Reset")])),_:1,__:[3]},8,["onClick"])]),_:1})]),_:1},8,["label-col","wrapper-col"])]),htmlCode:e(()=>t[4]||(t[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Sub name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos['sub.name']"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.sub.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("reset"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"sub"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
          `),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token string-property property"},"'sub.name'"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
          `),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input sub name'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("res"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"reset"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      reset`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[5]||(t[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Sub name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos['sub.name']"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.sub.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("reset"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"sub"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
          `),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token string-property property"},"'sub.name'"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
          `),n("span",{class:"token punctuation"},"{"),a(`
            `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
            `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input sub name'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("res"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"reset"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"resetFields"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      reset`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var jn=G(xn,[["render",qn]]);const Dn=J.useForm,zn=S({setup(){const s=Z({name:"",region:void 0}),t=Z({name:[{required:!0,message:"Please input Activity name"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select region"}]}),{resetFields:g,validate:i,validateInfos:C}=Dn(s,t);return{labelCol:{span:4},wrapperCol:{span:14},validate:i,validateInfos:C,resetFields:g,modelRef:s,onSubmit:()=>{i().then(()=>{console.log(V(s))}).catch(u=>{console.log("error",u)})}}}});function Tn(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-select-option"),d=p("a-select"),k=p("a-button"),r=p("a-form"),I=p("demo-box");return y(),W(I,{jsfiddle:{us:"use [`Form.useForm`](#useForm) custom trigger to validation logic and status.",cn:"\u901A\u8FC7 [`Form.useForm`](#useForm) \u81EA\u5B9A\u4E49\u89E6\u53D1\u6821\u9A8C\u65F6\u673A",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u901A\u8FC7 <a href="#useForm"><code>Form.useForm</code></a> \u81EA\u5B9A\u4E49\u89E6\u53D1\u6821\u9A8C\u65F6\u673A</p>
<h2 id="en-us">en-US</h2>
<p>use <a href="#useForm"><code>Form.useForm</code></a> custom trigger to validation logic and status.</p>
`,order:10,title:{"zh-CN":"useForm \u81EA\u5B9A\u4E49\u89E6\u53D1\u65F6\u673A","en-US":"useForm custom trigger"},relativePath:"src/docs/form/demo/useForm-trigger.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5uYW1lIj4KICAgICAgPGEtaW5wdXQKICAgICAgICB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5uYW1lIgogICAgICAgIEBibHVyPSJ2YWxpZGF0ZSgnbmFtZScsIHsgdHJpZ2dlcjogJ2JsdXInIH0pLmNhdGNoKCgpID0+IHt9KSIKICAgICAgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHpvbmUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5yZWdpb24iPgogICAgICA8YS1zZWxlY3Qgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYucmVnaW9uIiBwbGFjZWhvbGRlcj0icGxlYXNlIHNlbGVjdCB5b3VyIHpvbmUiPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9InNoYW5naGFpIj5ab25lIG9uZTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9ImJlaWppbmciPlpvbmUgdHdvPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgIDwvYS1zZWxlY3Q+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIDp3cmFwcGVyLWNvbD0ieyBzcGFuOiAxNCwgb2Zmc2V0OiA0IH0iPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrLnByZXZlbnQ9Im9uU3VibWl0Ij5DcmVhdGU8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0RmllbGRzIj5SZXNldDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SYXcgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBGb3JtIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwoKY29uc3QgdXNlRm9ybSA9IEZvcm0udXNlRm9ybTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IG1vZGVsUmVmID0gcmVhY3RpdmUoewogICAgICBuYW1lOiAnJywKICAgICAgcmVnaW9uOiB1bmRlZmluZWQsCiAgICB9KTsKICAgIGNvbnN0IHJ1bGVzUmVmID0gcmVhY3RpdmUoewogICAgICBuYW1lOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIGlucHV0IEFjdGl2aXR5IG5hbWUnLAogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgbWluOiAzLAogICAgICAgICAgbWF4OiA1LAogICAgICAgICAgbWVzc2FnZTogJ0xlbmd0aCBzaG91bGQgYmUgMyB0byA1JywKICAgICAgICAgIHRyaWdnZXI6ICdibHVyJywKICAgICAgICB9LAogICAgICBdLAogICAgICByZWdpb246IFsKICAgICAgICB7CiAgICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICAgIG1lc3NhZ2U6ICdQbGVhc2Ugc2VsZWN0IHJlZ2lvbicsCiAgICAgICAgfSwKICAgICAgXSwKICAgIH0pOwogICAgY29uc3QgeyByZXNldEZpZWxkcywgdmFsaWRhdGUsIHZhbGlkYXRlSW5mb3MgfSA9IHVzZUZvcm0obW9kZWxSZWYsIHJ1bGVzUmVmKTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICB2YWxpZGF0ZSgpCiAgICAgICAgLnRoZW4oKCkgPT4gewogICAgICAgICAgY29uc29sZS5sb2codG9SYXcobW9kZWxSZWYpKTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaChlcnIgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ2Vycm9yJywgZXJyKTsKICAgICAgICB9KTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBsYWJlbENvbDogeyBzcGFuOiA0IH0sCiAgICAgIHdyYXBwZXJDb2w6IHsgc3BhbjogMTQgfSwKICAgICAgdmFsaWRhdGUsCiAgICAgIHZhbGlkYXRlSW5mb3MsCiAgICAgIHJlc2V0RmllbGRzLAogICAgICBtb2RlbFJlZiwKICAgICAgb25TdWJtaXQsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5uYW1lIj4KICAgICAgPGEtaW5wdXQKICAgICAgICB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5uYW1lIgogICAgICAgIEBibHVyPSJ2YWxpZGF0ZSgnbmFtZScsIHsgdHJpZ2dlcjogJ2JsdXInIH0pLmNhdGNoKCgpID0+IHt9KSIKICAgICAgLz4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHpvbmUiIHYtYmluZD0idmFsaWRhdGVJbmZvcy5yZWdpb24iPgogICAgICA8YS1zZWxlY3Qgdi1tb2RlbDp2YWx1ZT0ibW9kZWxSZWYucmVnaW9uIiBwbGFjZWhvbGRlcj0icGxlYXNlIHNlbGVjdCB5b3VyIHpvbmUiPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9InNoYW5naGFpIj5ab25lIG9uZTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9ImJlaWppbmciPlpvbmUgdHdvPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgIDwvYS1zZWxlY3Q+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIDp3cmFwcGVyLWNvbD0ieyBzcGFuOiAxNCwgb2Zmc2V0OiA0IH0iPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrLnByZXZlbnQ9Im9uU3VibWl0Ij5DcmVhdGU8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0RmllbGRzIj5SZXNldDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JhdyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IEZvcm0gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmNvbnN0IHVzZUZvcm0gPSBGb3JtLnVzZUZvcm07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBtb2RlbFJlZiA9IHJlYWN0aXZlKHsKICAgICAgbmFtZTogJycsCiAgICAgIHJlZ2lvbjogdW5kZWZpbmVkLAogICAgfSk7CiAgICBjb25zdCBydWxlc1JlZiA9IHJlYWN0aXZlKHsKICAgICAgbmFtZTogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBBY3Rpdml0eSBuYW1lJywKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIG1pbjogMywKICAgICAgICAgIG1heDogNSwKICAgICAgICAgIG1lc3NhZ2U6ICdMZW5ndGggc2hvdWxkIGJlIDMgdG8gNScsCiAgICAgICAgICB0cmlnZ2VyOiAnYmx1cicsCiAgICAgICAgfSwKICAgICAgXSwKICAgICAgcmVnaW9uOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCByZWdpb24nLAogICAgICAgIH0sCiAgICAgIF0sCiAgICB9KTsKICAgIGNvbnN0IHsgcmVzZXRGaWVsZHMsIHZhbGlkYXRlLCB2YWxpZGF0ZUluZm9zIH0gPSB1c2VGb3JtKG1vZGVsUmVmLCBydWxlc1JlZik7CiAgICBjb25zdCBvblN1Ym1pdCA9ICgpID0+IHsKICAgICAgdmFsaWRhdGUoKQogICAgICAgIC50aGVuKCgpID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKHRvUmF3KG1vZGVsUmVmKSk7CiAgICAgICAgfSkKICAgICAgICAuY2F0Y2goZXJyID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKCdlcnJvcicsIGVycik7CiAgICAgICAgfSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICBzcGFuOiA0LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgc3BhbjogMTQsCiAgICAgIH0sCiAgICAgIHZhbGlkYXRlLAogICAgICB2YWxpZGF0ZUluZm9zLAogICAgICByZXNldEZpZWxkcywKICAgICAgbW9kZWxSZWYsCiAgICAgIG9uU3VibWl0LAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:e(()=>[o(r,{"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,B({label:"Activity name"},s.validateInfos.name),{default:e(()=>[o(u,{value:s.modelRef.name,"onUpdate:value":t[0]||(t[0]=m=>s.modelRef.name=m),onBlur:t[1]||(t[1]=m=>s.validate("name",{trigger:"blur"}).catch(()=>{}))},null,8,["value"])]),_:1},16),o(c,B({label:"Activity zone"},s.validateInfos.region),{default:e(()=>[o(d,{value:s.modelRef.region,"onUpdate:value":t[2]||(t[2]=m=>s.modelRef.region=m),placeholder:"please select your zone"},{default:e(()=>[o(l,{value:"shanghai"},{default:e(()=>t[3]||(t[3]=[a("Zone one")])),_:1,__:[3]}),o(l,{value:"beijing"},{default:e(()=>t[4]||(t[4]=[a("Zone two")])),_:1,__:[4]})]),_:1},8,["value"])]),_:1},16),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(k,{type:"primary",onClick:X(s.onSubmit,["prevent"])},{default:e(()=>t[5]||(t[5]=[a("Create")])),_:1,__:[5]},8,["onClick"]),o(k,{style:{"margin-left":"10px"},onClick:s.resetFields},{default:e(()=>t[6]||(t[6]=[a("Reset")])),_:1,__:[6]},8,["onClick"])]),_:1})]),_:1},8,["label-col","wrapper-col"])]),htmlCode:e(()=>t[7]||(t[7]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"@blur"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validate('name', { trigger: 'blur' }).catch(() => {})"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.region"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetFields"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rulesRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input Activity name'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"min"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"max"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"5"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Length should be 3 to 5'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select region'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},","),a(" rulesRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validate`),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      resetFields`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[8]||(t[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
        `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},"@blur"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validate('name', { trigger: 'blur' }).catch(() => {})"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("validateInfos.region"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetFields"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rulesRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input Activity name'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"min"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"max"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"5"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Length should be 3 to 5'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"trigger"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'blur'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select region'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},","),a(" rulesRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validate`),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      resetFields`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var On=G(zn,[["render",Tn]]);const Qn=J.useForm,En=S({setup(){const s=Z({name:"",region:void 0,type:[]}),t=Z({name:[{required:!0,message:"Please input name"}],region:[{required:!0,message:"Please select region"}],type:[{required:!0,message:"Please select type",type:"array"}]}),{resetFields:g,validate:i,validateInfos:C,mergeValidateInfo:b}=Qn(s,t),u=()=>{i().then(()=>{console.log(V(s))}).catch(l=>{console.log("error",l)})},c=P(()=>b(mn(C)));return{labelCol:{span:4},wrapperCol:{span:14},validateInfos:C,resetFields:g,modelRef:s,onSubmit:u,errorInfos:c}}});function _n(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-select-option"),d=p("a-select"),k=p("a-checkbox"),r=p("a-checkbox-group"),I=p("a-button"),m=p("a-form"),v=p("demo-box");return y(),W(v,{jsfiddle:{us:"use [`Form.useForm`](#useForm)  combined display form verification information.",cn:"\u901A\u8FC7 [`Form.useForm`](#useForm)  \u5408\u5E76\u5C55\u793A\u8868\u5355\u6821\u9A8C\u4FE1\u606F\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u901A\u8FC7 <a href="#useForm"><code>Form.useForm</code></a>  \u5408\u5E76\u5C55\u793A\u8868\u5355\u6821\u9A8C\u4FE1\u606F\u3002</p>
<h2 id="en-us">en-US</h2>
<p>use <a href="#useForm"><code>Form.useForm</code></a>  combined display form verification information.</p>
`,order:8,title:{"zh-CN":"useForm \u5408\u5E76\u9519\u8BEF\u4FE1\u606F","en-US":"useForm merge status info"},relativePath:"src/docs/form/demo/useForm-merge.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHJlcXVpcmVkPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5uYW1lIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgem9uZSIgcmVxdWlyZWQ+CiAgICAgIDxhLXNlbGVjdCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5yZWdpb24iIHBsYWNlaG9sZGVyPSJwbGVhc2Ugc2VsZWN0IHlvdXIgem9uZSI+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0ic2hhbmdoYWkiPlpvbmUgb25lPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0iYmVpamluZyI+Wm9uZSB0d288L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgPC9hLXNlbGVjdD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHR5cGUiIHJlcXVpcmVkPgogICAgICA8YS1jaGVja2JveC1ncm91cCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi50eXBlIj4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMSIgbmFtZT0idHlwZSI+T25saW5lPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIyIiBuYW1lPSJ0eXBlIj5Qcm9tb3Rpb248L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjMiIG5hbWU9InR5cGUiPk9mZmxpbmU8L2EtY2hlY2tib3g+CiAgICAgIDwvYS1jaGVja2JveC1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gY2xhc3M9ImVycm9yLWluZm9zIiA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9IiB2LWJpbmQ9ImVycm9ySW5mb3MiPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrLnByZXZlbnQ9Im9uU3VibWl0Ij5DcmVhdGU8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0RmllbGRzIj5SZXNldDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgcmVhY3RpdmUsIHRvUmF3LCBjb21wdXRlZCwgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgdG9BcnJheSB9IGZyb20gJ2xvZGFzaC1lcyc7CmltcG9ydCB7IEZvcm0gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7Cgpjb25zdCB1c2VGb3JtID0gRm9ybS51c2VGb3JtOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgbW9kZWxSZWYgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6ICcnLAogICAgICByZWdpb246IHVuZGVmaW5lZCwKICAgICAgdHlwZTogW10sCiAgICB9KTsKICAgIGNvbnN0IHJ1bGVzUmVmID0gcmVhY3RpdmUoewogICAgICBuYW1lOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIGlucHV0IG5hbWUnLAogICAgICAgIH0sCiAgICAgIF0sCiAgICAgIHJlZ2lvbjogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgcmVnaW9uJywKICAgICAgICB9LAogICAgICBdLAogICAgICB0eXBlOiBbCiAgICAgICAgewogICAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCB0eXBlJywKICAgICAgICAgIHR5cGU6ICdhcnJheScsCiAgICAgICAgfSwKICAgICAgXSwKICAgIH0pOwogICAgY29uc3QgeyByZXNldEZpZWxkcywgdmFsaWRhdGUsIHZhbGlkYXRlSW5mb3MsIG1lcmdlVmFsaWRhdGVJbmZvIH0gPSB1c2VGb3JtKG1vZGVsUmVmLCBydWxlc1JlZik7CiAgICBjb25zdCBvblN1Ym1pdCA9ICgpID0+IHsKICAgICAgdmFsaWRhdGUoKQogICAgICAgIC50aGVuKCgpID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKHRvUmF3KG1vZGVsUmVmKSk7CiAgICAgICAgfSkKICAgICAgICAuY2F0Y2goZXJyID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKCdlcnJvcicsIGVycik7CiAgICAgICAgfSk7CiAgICB9OwogICAgY29uc3QgZXJyb3JJbmZvcyA9IGNvbXB1dGVkKCgpID0+IHsKICAgICAgcmV0dXJuIG1lcmdlVmFsaWRhdGVJbmZvKHRvQXJyYXkodmFsaWRhdGVJbmZvcykpOwogICAgfSk7CiAgICByZXR1cm4gewogICAgICBsYWJlbENvbDogeyBzcGFuOiA0IH0sCiAgICAgIHdyYXBwZXJDb2w6IHsgc3BhbjogMTQgfSwKICAgICAgdmFsaWRhdGVJbmZvcywKICAgICAgcmVzZXRGaWVsZHMsCiAgICAgIG1vZGVsUmVmLAogICAgICBvblN1Ym1pdCwKICAgICAgZXJyb3JJbmZvcywKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGUgc2NvcGVkPgouZXJyb3ItaW5mb3MgOmRlZXAoLmFudC1mb3JtLWV4cGxhaW4pIHsKICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOmxhYmVsLWNvbD0ibGFiZWxDb2wiIDp3cmFwcGVyLWNvbD0id3JhcHBlckNvbCI+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IG5hbWUiIHJlcXVpcmVkPgogICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5uYW1lIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgem9uZSIgcmVxdWlyZWQ+CiAgICAgIDxhLXNlbGVjdCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi5yZWdpb24iIHBsYWNlaG9sZGVyPSJwbGVhc2Ugc2VsZWN0IHlvdXIgem9uZSI+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0ic2hhbmdoYWkiPlpvbmUgb25lPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0iYmVpamluZyI+Wm9uZSB0d288L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgPC9hLXNlbGVjdD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IkFjdGl2aXR5IHR5cGUiIHJlcXVpcmVkPgogICAgICA8YS1jaGVja2JveC1ncm91cCB2LW1vZGVsOnZhbHVlPSJtb2RlbFJlZi50eXBlIj4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMSIgbmFtZT0idHlwZSI+T25saW5lPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIyIiBuYW1lPSJ0eXBlIj5Qcm9tb3Rpb248L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjMiIG5hbWU9InR5cGUiPk9mZmxpbmU8L2EtY2hlY2tib3g+CiAgICAgIDwvYS1jaGVja2JveC1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gY2xhc3M9ImVycm9yLWluZm9zIiA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9IiB2LWJpbmQ9ImVycm9ySW5mb3MiPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrLnByZXZlbnQ9Im9uU3VibWl0Ij5DcmVhdGU8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1sZWZ0OiAxMHB4IiBAY2xpY2s9InJlc2V0RmllbGRzIj5SZXNldDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyByZWFjdGl2ZSwgdG9SYXcsIGNvbXB1dGVkLCBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgeyB0b0FycmF5IH0gZnJvbSAnbG9kYXNoLWVzJzsKaW1wb3J0IHsgRm9ybSB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKY29uc3QgdXNlRm9ybSA9IEZvcm0udXNlRm9ybTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IG1vZGVsUmVmID0gcmVhY3RpdmUoewogICAgICBuYW1lOiAnJywKICAgICAgcmVnaW9uOiB1bmRlZmluZWQsCiAgICAgIHR5cGU6IFtdLAogICAgfSk7CiAgICBjb25zdCBydWxlc1JlZiA9IHJlYWN0aXZlKHsKICAgICAgbmFtZTogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBuYW1lJywKICAgICAgICB9LAogICAgICBdLAogICAgICByZWdpb246IFsKICAgICAgICB7CiAgICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICAgIG1lc3NhZ2U6ICdQbGVhc2Ugc2VsZWN0IHJlZ2lvbicsCiAgICAgICAgfSwKICAgICAgXSwKICAgICAgdHlwZTogWwogICAgICAgIHsKICAgICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgdHlwZScsCiAgICAgICAgICB0eXBlOiAnYXJyYXknLAogICAgICAgIH0sCiAgICAgIF0sCiAgICB9KTsKICAgIGNvbnN0IHsgcmVzZXRGaWVsZHMsIHZhbGlkYXRlLCB2YWxpZGF0ZUluZm9zLCBtZXJnZVZhbGlkYXRlSW5mbyB9ID0gdXNlRm9ybShtb2RlbFJlZiwgcnVsZXNSZWYpOwogICAgY29uc3Qgb25TdWJtaXQgPSAoKSA9PiB7CiAgICAgIHZhbGlkYXRlKCkKICAgICAgICAudGhlbigoKSA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZyh0b1Jhdyhtb2RlbFJlZikpOwogICAgICAgIH0pCiAgICAgICAgLmNhdGNoKGVyciA9PiB7CiAgICAgICAgICBjb25zb2xlLmxvZygnZXJyb3InLCBlcnIpOwogICAgICAgIH0pOwogICAgfTsKICAgIGNvbnN0IGVycm9ySW5mb3MgPSBjb21wdXRlZCgoKSA9PiB7CiAgICAgIHJldHVybiBtZXJnZVZhbGlkYXRlSW5mbyh0b0FycmF5KHZhbGlkYXRlSW5mb3MpKTsKICAgIH0pOwogICAgcmV0dXJuIHsKICAgICAgbGFiZWxDb2w6IHsKICAgICAgICBzcGFuOiA0LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgc3BhbjogMTQsCiAgICAgIH0sCiAgICAgIHZhbGlkYXRlSW5mb3MsCiAgICAgIHJlc2V0RmllbGRzLAogICAgICBtb2RlbFJlZiwKICAgICAgb25TdWJtaXQsCiAgICAgIGVycm9ySW5mb3MsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KPHN0eWxlIHNjb3BlZD4KLmVycm9yLWluZm9zIDpkZWVwKC5hbnQtZm9ybS1leHBsYWluKSB7CiAgd2hpdGUtc3BhY2U6IHByZS1saW5lOwp9Cjwvc3R5bGU+"}},{default:e(()=>[o(m,{"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,{label:"Activity name",required:""},{default:e(()=>[o(u,{value:s.modelRef.name,"onUpdate:value":t[0]||(t[0]=A=>s.modelRef.name=A)},null,8,["value"])]),_:1}),o(c,{label:"Activity zone",required:""},{default:e(()=>[o(d,{value:s.modelRef.region,"onUpdate:value":t[1]||(t[1]=A=>s.modelRef.region=A),placeholder:"please select your zone"},{default:e(()=>[o(l,{value:"shanghai"},{default:e(()=>t[3]||(t[3]=[a("Zone one")])),_:1,__:[3]}),o(l,{value:"beijing"},{default:e(()=>t[4]||(t[4]=[a("Zone two")])),_:1,__:[4]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Activity type",required:""},{default:e(()=>[o(r,{value:s.modelRef.type,"onUpdate:value":t[2]||(t[2]=A=>s.modelRef.type=A)},{default:e(()=>[o(k,{value:"1",name:"type"},{default:e(()=>t[5]||(t[5]=[a("Online")])),_:1,__:[5]}),o(k,{value:"2",name:"type"},{default:e(()=>t[6]||(t[6]=[a("Promotion")])),_:1,__:[6]}),o(k,{value:"3",name:"type"},{default:e(()=>t[7]||(t[7]=[a("Offline")])),_:1,__:[7]})]),_:1},8,["value"])]),_:1}),o(c,B({class:"error-infos","wrapper-col":{span:14,offset:4}},s.errorInfos),{default:e(()=>[o(I,{type:"primary",onClick:X(s.onSubmit,["prevent"])},{default:e(()=>t[8]||(t[8]=[a("Create")])),_:1,__:[8]},8,["onClick"]),o(I,{style:{"margin-left":"10px"},onClick:s.resetFields},{default:e(()=>t[9]||(t[9]=[a("Reset")])),_:1,__:[9]},8,["onClick"])]),_:1},16)]),_:1},8,["label-col","wrapper-col"])]),htmlCode:e(()=>t[10]||(t[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error-infos"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("errorInfos"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetFields"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw"),n("span",{class:"token punctuation"},","),a(" computed"),n("span",{class:"token punctuation"},","),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" toArray "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'lodash-es'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rulesRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select region'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select type'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'array'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos"),n("span",{class:"token punctuation"},","),a(" mergeValidateInfo "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},","),a(" rulesRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" errorInfos "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token function"},"mergeValidateInfo"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toArray"),n("span",{class:"token punctuation"},"("),a("validateInfos"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      resetFields`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
      errorInfos`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},".error-infos :deep(.ant-form-explain)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"white-space"),n("span",{class:"token punctuation"},":"),a(" pre-line"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[11]||(t[11]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity zone"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.region"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please select your zone"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("shanghai"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone one"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("beijing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Zone two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"required"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("modelRef.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error-infos"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-bind"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("errorInfos"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click.prevent"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("resetFields"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Reset"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw"),n("span",{class:"token punctuation"},","),a(" computed"),n("span",{class:"token punctuation"},","),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" toArray "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'lodash-es'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" Form "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"const"),a(" useForm "),n("span",{class:"token operator"},"="),a(" Form"),n("span",{class:"token punctuation"},"."),a("useForm"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" modelRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"undefined"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rulesRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please input name'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"region"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select region'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),a(`
        `),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select type'"),n("span",{class:"token punctuation"},","),a(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'array'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" resetFields"),n("span",{class:"token punctuation"},","),a(" validate"),n("span",{class:"token punctuation"},","),a(" validateInfos"),n("span",{class:"token punctuation"},","),a(" mergeValidateInfo "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"useForm"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},","),a(" rulesRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token function"},"validate"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("modelRef"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),a(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"catch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"err"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'error'"),n("span",{class:"token punctuation"},","),a(" err"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" errorInfos "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token function"},"mergeValidateInfo"),n("span",{class:"token punctuation"},"("),n("span",{class:"token function"},"toArray"),n("span",{class:"token punctuation"},"("),a("validateInfos"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      validateInfos`),n("span",{class:"token punctuation"},","),a(`
      resetFields`),n("span",{class:"token punctuation"},","),a(`
      modelRef`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
      errorInfos`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},".error-infos :deep(.ant-form-explain)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"white-space"),n("span",{class:"token punctuation"},":"),a(" pre-line"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var Mn=G(En,[["render",_n],["__scopeId","data-v-6657d024"]]);const $n=S({setup(){const s=Z({name:"",delivery:!1,type:[],resource:"",desc:""});return{labelCol:{style:{width:"150px"}},wrapperCol:{span:14},formState:s,onSubmit:()=>{console.log("submit!",V(s))}}}});function na(s,t,g,i,C,b){const u=p("a-input"),c=p("a-form-item"),l=p("a-switch"),d=p("a-checkbox"),k=p("a-checkbox-group"),r=p("a-radio"),I=p("a-radio-group"),m=p("a-button"),v=p("a-form"),A=p("demo-box");return y(),W(A,{jsfiddle:{us:"Set label width by labelCol.style",cn:"\u901A\u8FC7 labelCol.style \u8BBE\u7F6E\u56FA\u5B9A\u5BBD\u5EA6",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u901A\u8FC7 labelCol.style \u8BBE\u7F6E\u56FA\u5B9A\u5BBD\u5EA6</p>
<h2 id="en-us">en-US</h2>
<p>Set label width by labelCol.style</p>
`,order:0,title:{"zh-CN":"\u56FA\u5B9A Label \u5BBD\u5EA6","en-US":"Fixed lable width"},relativePath:"src/docs/form/demo/lable-width.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOm1vZGVsPSJmb3JtU3RhdGUiIDpsYWJlbC1jb2w9ImxhYmVsQ29sIiA6d3JhcHBlci1jb2w9IndyYXBwZXJDb2wiPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBuYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJJbnN0YW50IGRlbGl2ZXJ5Ij4KICAgICAgPGEtc3dpdGNoIHYtbW9kZWw6Y2hlY2tlZD0iZm9ybVN0YXRlLmRlbGl2ZXJ5IiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgdHlwZSI+CiAgICAgIDxhLWNoZWNrYm94LWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS50eXBlIj4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMSIgbmFtZT0idHlwZSI+T25saW5lPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIyIiBuYW1lPSJ0eXBlIj5Qcm9tb3Rpb248L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjMiIG5hbWU9InR5cGUiPk9mZmxpbmU8L2EtY2hlY2tib3g+CiAgICAgIDwvYS1jaGVja2JveC1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IlJlc291cmNlcyI+CiAgICAgIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5yZXNvdXJjZSI+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjEiPlNwb25zb3I8L2EtcmFkaW8+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjIiPlZlbnVlPC9hLXJhZGlvPgogICAgICA8L2EtcmFkaW8tZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBmb3JtIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLmRlc2MiIHR5cGU9InRleHRhcmVhIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib25TdWJtaXQiPkNyZWF0ZTwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiBzdHlsZT0ibWFyZ2luLWxlZnQ6IDEwcHgiPkNhbmNlbDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SYXcsIFVud3JhcFJlZiB9IGZyb20gJ3Z1ZSc7CmludGVyZmFjZSBGb3JtU3RhdGUgewogIG5hbWU6IHN0cmluZzsKICBkZWxpdmVyeTogYm9vbGVhbjsKICB0eXBlOiBzdHJpbmdbXTsKICByZXNvdXJjZTogc3RyaW5nOwogIGRlc2M6IHN0cmluZzsKfQpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgZm9ybVN0YXRlOiBVbndyYXBSZWY8Rm9ybVN0YXRlPiA9IHJlYWN0aXZlKHsKICAgICAgbmFtZTogJycsCiAgICAgIGRlbGl2ZXJ5OiBmYWxzZSwKICAgICAgdHlwZTogW10sCiAgICAgIHJlc291cmNlOiAnJywKICAgICAgZGVzYzogJycsCiAgICB9KTsKICAgIGNvbnN0IG9uU3VibWl0ID0gKCkgPT4gewogICAgICBjb25zb2xlLmxvZygnc3VibWl0IScsIHRvUmF3KGZvcm1TdGF0ZSkpOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGxhYmVsQ29sOiB7IHN0eWxlOiB7IHdpZHRoOiAnMTUwcHgnIH0gfSwKICAgICAgd3JhcHBlckNvbDogeyBzcGFuOiAxNCB9LAogICAgICBmb3JtU3RhdGUsCiAgICAgIG9uU3VibWl0LAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWZvcm0gOm1vZGVsPSJmb3JtU3RhdGUiIDpsYWJlbC1jb2w9ImxhYmVsQ29sIiA6d3JhcHBlci1jb2w9IndyYXBwZXJDb2wiPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBuYW1lIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLm5hbWUiIC8+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJJbnN0YW50IGRlbGl2ZXJ5Ij4KICAgICAgPGEtc3dpdGNoIHYtbW9kZWw6Y2hlY2tlZD0iZm9ybVN0YXRlLmRlbGl2ZXJ5IiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQWN0aXZpdHkgdHlwZSI+CiAgICAgIDxhLWNoZWNrYm94LWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS50eXBlIj4KICAgICAgICA8YS1jaGVja2JveCB2YWx1ZT0iMSIgbmFtZT0idHlwZSI+T25saW5lPC9hLWNoZWNrYm94PgogICAgICAgIDxhLWNoZWNrYm94IHZhbHVlPSIyIiBuYW1lPSJ0eXBlIj5Qcm9tb3Rpb248L2EtY2hlY2tib3g+CiAgICAgICAgPGEtY2hlY2tib3ggdmFsdWU9IjMiIG5hbWU9InR5cGUiPk9mZmxpbmU8L2EtY2hlY2tib3g+CiAgICAgIDwvYS1jaGVja2JveC1ncm91cD4KICAgIDwvYS1mb3JtLWl0ZW0+CiAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9IlJlc291cmNlcyI+CiAgICAgIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9ImZvcm1TdGF0ZS5yZXNvdXJjZSI+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjEiPlNwb25zb3I8L2EtcmFkaW8+CiAgICAgICAgPGEtcmFkaW8gdmFsdWU9IjIiPlZlbnVlPC9hLXJhZGlvPgogICAgICA8L2EtcmFkaW8tZ3JvdXA+CiAgICA8L2EtZm9ybS1pdGVtPgogICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJBY3Rpdml0eSBmb3JtIj4KICAgICAgPGEtaW5wdXQgdi1tb2RlbDp2YWx1ZT0iZm9ybVN0YXRlLmRlc2MiIHR5cGU9InRleHRhcmVhIiAvPgogICAgPC9hLWZvcm0taXRlbT4KICAgIDxhLWZvcm0taXRlbSA6d3JhcHBlci1jb2w9Insgc3BhbjogMTQsIG9mZnNldDogNCB9Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib25TdWJtaXQiPkNyZWF0ZTwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiBzdHlsZT0ibWFyZ2luLWxlZnQ6IDEwcHgiPkNhbmNlbDwvYS1idXR0b24+CiAgICA8L2EtZm9ybS1pdGVtPgogIDwvYS1mb3JtPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JhdyB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBmb3JtU3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6ICcnLAogICAgICBkZWxpdmVyeTogZmFsc2UsCiAgICAgIHR5cGU6IFtdLAogICAgICByZXNvdXJjZTogJycsCiAgICAgIGRlc2M6ICcnLAogICAgfSk7CiAgICBjb25zdCBvblN1Ym1pdCA9ICgpID0+IHsKICAgICAgY29uc29sZS5sb2coJ3N1Ym1pdCEnLCB0b1Jhdyhmb3JtU3RhdGUpKTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBsYWJlbENvbDogewogICAgICAgIHN0eWxlOiB7CiAgICAgICAgICB3aWR0aDogJzE1MHB4JywKICAgICAgICB9LAogICAgICB9LAogICAgICB3cmFwcGVyQ29sOiB7CiAgICAgICAgc3BhbjogMTQsCiAgICAgIH0sCiAgICAgIGZvcm1TdGF0ZSwKICAgICAgb25TdWJtaXQsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:e(()=>[o(v,{model:s.formState,"label-col":s.labelCol,"wrapper-col":s.wrapperCol},{default:e(()=>[o(c,{label:"Activity name"},{default:e(()=>[o(u,{value:s.formState.name,"onUpdate:value":t[0]||(t[0]=f=>s.formState.name=f)},null,8,["value"])]),_:1}),o(c,{label:"Instant delivery"},{default:e(()=>[o(l,{checked:s.formState.delivery,"onUpdate:checked":t[1]||(t[1]=f=>s.formState.delivery=f)},null,8,["checked"])]),_:1}),o(c,{label:"Activity type"},{default:e(()=>[o(k,{value:s.formState.type,"onUpdate:value":t[2]||(t[2]=f=>s.formState.type=f)},{default:e(()=>[o(d,{value:"1",name:"type"},{default:e(()=>t[5]||(t[5]=[a("Online")])),_:1,__:[5]}),o(d,{value:"2",name:"type"},{default:e(()=>t[6]||(t[6]=[a("Promotion")])),_:1,__:[6]}),o(d,{value:"3",name:"type"},{default:e(()=>t[7]||(t[7]=[a("Offline")])),_:1,__:[7]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Resources"},{default:e(()=>[o(I,{value:s.formState.resource,"onUpdate:value":t[3]||(t[3]=f=>s.formState.resource=f)},{default:e(()=>[o(r,{value:"1"},{default:e(()=>t[8]||(t[8]=[a("Sponsor")])),_:1,__:[8]}),o(r,{value:"2"},{default:e(()=>t[9]||(t[9]=[a("Venue")])),_:1,__:[9]})]),_:1},8,["value"])]),_:1}),o(c,{label:"Activity form"},{default:e(()=>[o(u,{value:s.formState.desc,"onUpdate:value":t[4]||(t[4]=f=>s.formState.desc=f),type:"textarea"},null,8,["value"])]),_:1}),o(c,{"wrapper-col":{span:14,offset:4}},{default:e(()=>[o(m,{type:"primary",onClick:s.onSubmit},{default:e(()=>t[10]||(t[10]=[a("Create")])),_:1,__:[10]},8,["onClick"]),o(m,{style:{"margin-left":"10px"}},{default:e(()=>t[11]||(t[11]=[a("Cancel")])),_:1,__:[11]})]),_:1})]),_:1},8,["model","label-col","wrapper-col"])]),htmlCode:e(()=>t[12]||(t[12]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Instant delivery"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Resources"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Sponsor"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Venue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity form"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.desc"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("textarea"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw"),n("span",{class:"token punctuation"},","),a(" UnwrapRef "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"interface"),a(),n("span",{class:"token class-name"},"FormState"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(" boolean"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"formState"),n("span",{class:"token operator"},":"),a(" UnwrapRef"),n("span",{class:"token operator"},"<"),a("FormState"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'submit!'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"width"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'150px'"),a(),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:e(()=>t[13]||(t[13]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":label-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("labelCol"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("wrapperCol"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Instant delivery"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.delivery"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Online"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Promotion"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkbox")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Offline"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkbox-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Resources"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.resource"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Sponsor"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Venue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Activity form"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("formState.desc"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("textarea"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},":wrapper-col"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 14, offset: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onSubmit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Create"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-left"),n("span",{class:"token punctuation"},":"),a(" 10px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRaw "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" formState "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"delivery"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"resource"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"desc"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onSubmit"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'submit!'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token function"},"toRaw"),n("span",{class:"token punctuation"},"("),a("formState"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"labelCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
          `),n("span",{class:"token literal-property property"},"width"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'150px'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"wrapperCol"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"span"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"14"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      formState`),n("span",{class:"token punctuation"},","),a(`
      onSubmit`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}var aa=G($n,[["render",na]]);const ta={pageData:{title:"Form",description:"",frontmatter:{category:"Components",subtitle:"\u8868\u5355",type:"\u6570\u636E\u5F55\u5165",cols:1,title:"Form",cover:"https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:""},{level:2,title:"\u8868\u5355",slug:"\u8868\u5355",content:"\u6211\u4EEC\u4E3A `form` \u63D0\u4F9B\u4E86\u4EE5\u4E0B\u4E09\u79CD\u6392\u5217\u65B9\u5F0F\uFF1A"},{level:2,title:"\u8868\u5355\u57DF",slug:"\u8868\u5355\u57DF",content:"\u8868\u5355\u4E00\u5B9A\u4F1A\u5305\u542B\u8868\u5355\u57DF\uFF0C\u8868\u5355\u57DF\u53EF\u4EE5\u662F\u8F93\u5165\u63A7\u4EF6\uFF0C\u6807\u51C6\u8868\u5355\u57DF\uFF0C\u6807\u7B7E\uFF0C\u4E0B\u62C9\u83DC\u5355\uFF0C\u6587\u672C\u57DF\u7B49\u3002"},{level:2,title:"API",slug:"api",content:"Form"},{level:3,title:"Form",slug:"form",content:""},{level:3,title:"\u4E8B\u4EF6",slug:"\u4E8B\u4EF6",content:""},{level:3,title:"\u65B9\u6CD5",slug:"\u65B9\u6CD5",content:""},{level:3,title:"Form.Item",slug:"form-item",content:""},{level:3,title:"\u6821\u9A8C\u89C4\u5219",slug:"\u6821\u9A8C\u89C4\u5219",content:""},{level:3,title:"useForm (v2.2)",slug:"useform-v2-2",content:"`useForm` \u662F\u4E00\u4E2A\u53EF\u4EE5\u72EC\u7ACB Form \u7EC4\u4EF6\u8FD0\u884C\u7684\u65B9\u6CD5\uFF0C\u5B83\u4F7F\u7528 Vue \u54CD\u5E94\u5F0F\u673A\u5236\u8FDB\u884C\u6570\u636E\u7684\u76D1\u542C\u548C\u6821\u9A8C\uFF0C\u5E76\u5C06\u6821\u9A8C\u7ED3\u679C\u8FD4\u56DE\uFF0C\u4F60\u53EF\u4EE5\u5C06\u6821\u9A8C\u7ED3\u679C\u7ED1\u5B9A\u5230\u4EFB\u4F55\u7EC4\u4EF6\u4E0A\uFF0C`Form.Item` \u4E5F\u4EC5\u4EC5\u662F\u5C06\u7ED3\u679C\u5C55\u793A\u3002"}],relativePath:"src/docs/form/index.zh-CN.md",content:`
\u9AD8\u6027\u80FD\u8868\u5355\u63A7\u4EF6\uFF0C\u81EA\u5E26\u6570\u636E\u57DF\u7BA1\u7406\u3002\u5305\u542B\u6570\u636E\u5F55\u5165\u3001\u6821\u9A8C\u4EE5\u53CA\u5BF9\u5E94\u6837\u5F0F\u3002

## \u4F55\u65F6\u4F7F\u7528

- \u7528\u4E8E\u521B\u5EFA\u4E00\u4E2A\u5B9E\u4F53\u6216\u6536\u96C6\u4FE1\u606F\u3002
- \u9700\u8981\u5BF9\u8F93\u5165\u7684\u6570\u636E\u7C7B\u578B\u8FDB\u884C\u6821\u9A8C\u65F6\u3002

## \u8868\u5355

\u6211\u4EEC\u4E3A \`form\` \u63D0\u4F9B\u4E86\u4EE5\u4E0B\u4E09\u79CD\u6392\u5217\u65B9\u5F0F\uFF1A

- \u6C34\u5E73\u6392\u5217\uFF1A\u6807\u7B7E\u548C\u8868\u5355\u63A7\u4EF6\u6C34\u5E73\u6392\u5217\uFF1B\uFF08\u9ED8\u8BA4\uFF09
- \u5782\u76F4\u6392\u5217\uFF1A\u6807\u7B7E\u548C\u8868\u5355\u63A7\u4EF6\u4E0A\u4E0B\u5782\u76F4\u6392\u5217\uFF1B
- \u884C\u5185\u6392\u5217\uFF1A\u8868\u5355\u9879\u6C34\u5E73\u884C\u5185\u6392\u5217\u3002

## \u8868\u5355\u57DF

\u8868\u5355\u4E00\u5B9A\u4F1A\u5305\u542B\u8868\u5355\u57DF\uFF0C\u8868\u5355\u57DF\u53EF\u4EE5\u662F\u8F93\u5165\u63A7\u4EF6\uFF0C\u6807\u51C6\u8868\u5355\u57DF\uFF0C\u6807\u7B7E\uFF0C\u4E0B\u62C9\u83DC\u5355\uFF0C\u6587\u672C\u57DF\u7B49\u3002

## API

### Form

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
| --- | --- | --- | --- | --- |
| model | \u8868\u5355\u6570\u636E\u5BF9\u8C61 | object |  |  |
| rules | \u8868\u5355\u9A8C\u8BC1\u89C4\u5219 | object |  |  |
| hideRequiredMark | \u9690\u85CF\u6240\u6709\u8868\u5355\u9879\u7684\u5FC5\u9009\u6807\u8BB0 | Boolean | false |  |
| labelAlign | label \u6807\u7B7E\u7684\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F | &#39;left&#39; \\| &#39;right&#39; | &#39;right&#39; |  |
| layout | \u8868\u5355\u5E03\u5C40 | &#39;horizontal&#39;\\|&#39;vertical&#39;\\|&#39;inline&#39; | &#39;horizontal&#39; |  |
| labelCol | label \u6807\u7B7E\u5E03\u5C40\uFF0C\u540C \`&lt;Col&gt;\` \u7EC4\u4EF6\uFF0C\u8BBE\u7F6E \`span\` \`offset\` \u503C\uFF0C\u5982 \`{span: 3, offset: 12}\` \u6216 \`sm: {span: 3, offset: 12}\` | [object](/components/grid-cn/#Col) |  |  |
| wrapperCol | \u9700\u8981\u4E3A\u8F93\u5165\u63A7\u4EF6\u8BBE\u7F6E\u5E03\u5C40\u6837\u5F0F\u65F6\uFF0C\u4F7F\u7528\u8BE5\u5C5E\u6027\uFF0C\u7528\u6CD5\u540C labelCol | [object](/components/grid-cn/#Col) |  |  |
| colon | \u914D\u7F6E Form.Item \u7684 colon \u7684\u9ED8\u8BA4\u503C (\u53EA\u6709\u5728\u5C5E\u6027 layout \u4E3A horizontal \u65F6\u6709\u6548) | boolean | true |  |
| validateOnRuleChange | \u662F\u5426\u5728 rules \u5C5E\u6027\u6539\u53D8\u540E\u7ACB\u5373\u89E6\u53D1\u4E00\u6B21\u9A8C\u8BC1 | boolean | true |  |
| scrollToFirstError | \u63D0\u4EA4\u5931\u8D25\u81EA\u52A8\u6EDA\u52A8\u5230\u7B2C\u4E00\u4E2A\u9519\u8BEF\u5B57\u6BB5 | boolean \\| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| name | \u8868\u5355\u540D\u79F0\uFF0C\u4F1A\u4F5C\u4E3A\u8868\u5355\u5B57\u6BB5 \`id\` \u524D\u7F00\u4F7F\u7528 | string | - | 2.0.0 |
| validateTrigger | \u7EDF\u4E00\u8BBE\u7F6E\u5B57\u6BB5\u6821\u9A8C\u89C4\u5219 | string \\| string[] | \`change\` | 2.0.0 |

### \u4E8B\u4EF6

| \u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 | \u7248\u672C |
| --- | --- | --- | --- |
| submit | \u6570\u636E\u9A8C\u8BC1\u6210\u529F\u540E\u56DE\u8C03\u4E8B\u4EF6 | Function(e:Event) | \uFF5C |
| validate | \u4EFB\u4E00\u8868\u5355\u9879\u88AB\u6821\u9A8C\u540E\u89E6\u53D1 | \u88AB\u6821\u9A8C\u7684\u8868\u5355\u9879 name \u503C\uFF0C\u6821\u9A8C\u662F\u5426\u901A\u8FC7\uFF0C\u9519\u8BEF\u6D88\u606F\uFF08\u5982\u679C\u5B58\u5728\uFF09 |
| finish | \u63D0\u4EA4\u8868\u5355\u4E14\u6570\u636E\u9A8C\u8BC1\u6210\u529F\u540E\u56DE\u8C03\u4E8B\u4EF6 | function(values) | - | 2.0.0 |
| finishFailed | \u63D0\u4EA4\u8868\u5355\u4E14\u6570\u636E\u9A8C\u8BC1\u5931\u8D25\u540E\u56DE\u8C03\u4E8B\u4EF6 | function({ values, errorFields, outOfDate }) | - | 2.0.0 |

### \u65B9\u6CD5

| \u65B9\u6CD5\u540D | \u8BF4\u660E | \u53C2\u6570 |
| --- | --- | --- |
| validate | \u89E6\u53D1\u8868\u5355\u9A8C\u8BC1, \u540C validateFields | (nameList?: [NamePath](#NamePath)[]) =&gt; Promise |
| validateFields | \u89E6\u53D1\u8868\u5355\u9A8C\u8BC1 | (nameList?: [NamePath](#NamePath)[]) =&gt; Promise |
| scrollToField | \u6EDA\u52A8\u5230\u5BF9\u5E94\u5B57\u6BB5\u4F4D\u7F6E | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) =&gt; void |  |  |
| resetFields | \u5BF9\u6574\u4E2A\u8868\u5355\u8FDB\u884C\u91CD\u7F6E\uFF0C\u5C06\u6240\u6709\u5B57\u6BB5\u503C\u91CD\u7F6E\u4E3A\u521D\u59CB\u503C\u5E76\u79FB\u9664\u6821\u9A8C\u7ED3\u679C | \u2014 |
| clearValidate | \u79FB\u9664\u8868\u5355\u9879\u7684\u6821\u9A8C\u7ED3\u679C\u3002\u4F20\u5165\u5F85\u79FB\u9664\u7684\u8868\u5355\u9879\u7684 name \u5C5E\u6027\u6216\u8005 name \u7EC4\u6210\u7684\u6570\u7EC4\uFF0C\u5982\u4E0D\u4F20\u5219\u79FB\u9664\u6574\u4E2A\u8868\u5355\u7684\u6821\u9A8C\u7ED3\u679C | Function(name: array \\| string) |

### Form.Item

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
| --- | --- | --- | --- | --- |
| name | \u8868\u5355\u57DF model \u5B57\u6BB5\uFF0C\u5728\u4F7F\u7528 validate\u3001resetFields \u65B9\u6CD5\u7684\u60C5\u51B5\u4E0B\uFF0C\u8BE5\u5C5E\u6027\u662F\u5FC5\u586B\u7684 | string |  |  |
| rules | \u8868\u5355\u9A8C\u8BC1\u89C4\u5219 | object \\| array |  |  |
| autoLink | \u662F\u5426\u81EA\u52A8\u5173\u8054\u8868\u5355\u57DF\uFF0C\u5BF9\u4E8E\u5927\u90E8\u5206\u60C5\u51B5\u90FD\u53EF\u4EE5\u4F7F\u7528\u81EA\u52A8\u5173\u8054\uFF0C\u5982\u679C\u4E0D\u6EE1\u8DB3\u81EA\u52A8\u5173\u8054\u7684\u6761\u4EF6\uFF0C\u53EF\u4EE5\u624B\u52A8\u5173\u8054\uFF0C\u53C2\u89C1\u4E0B\u65B9\u6CE8\u610F\u4E8B\u9879 | boolean | true |  |
| colon | \u914D\u5408 label \u5C5E\u6027\u4F7F\u7528\uFF0C\u8868\u793A\u662F\u5426\u663E\u793A label \u540E\u9762\u7684\u5192\u53F7 | boolean | true |  |
| extra | \u989D\u5916\u7684\u63D0\u793A\u4FE1\u606F\uFF0C\u548C help \u7C7B\u4F3C\uFF0C\u5F53\u9700\u8981\u9519\u8BEF\u4FE1\u606F\u548C\u63D0\u793A\u6587\u6848\u540C\u65F6\u51FA\u73B0\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u8FD9\u4E2A\u3002 | string\\|slot |  |  |
| hasFeedback | \u914D\u5408 validateStatus \u5C5E\u6027\u4F7F\u7528\uFF0C\u5C55\u793A\u6821\u9A8C\u72B6\u6001\u56FE\u6807\uFF0C\u5EFA\u8BAE\u53EA\u914D\u5408 Input \u7EC4\u4EF6\u4F7F\u7528 | boolean | false |  |
| help | \u63D0\u793A\u4FE1\u606F\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210 | string\\|slot |  |  |
| htmlFor | \u8BBE\u7F6E\u5B50\u5143\u7D20 label \`htmlFor\` \u5C5E\u6027 | string |  |  |
| label | label \u6807\u7B7E\u7684\u6587\u672C | string\\|slot |  |  |
| labelCol | label \u6807\u7B7E\u5E03\u5C40\uFF0C\u540C \`&lt;Col&gt;\` \u7EC4\u4EF6\uFF0C\u8BBE\u7F6E \`span\` \`offset\` \u503C\uFF0C\u5982 \`{span: 3, offset: 12}\` \u6216 \`sm: {span: 3, offset: 12}\` | [object](/components/grid-cn/#Col) |  |  |
| labelAlign | \u6807\u7B7E\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F | &#39;left&#39; \\| &#39;right&#39; | &#39;right&#39; |  |
| required | \u662F\u5426\u5FC5\u586B\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210 | boolean | false |  |
| validateStatus | \u6821\u9A8C\u72B6\u6001\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210\uFF0C\u53EF\u9009\uFF1A&#39;success&#39; &#39;warning&#39; &#39;error&#39; &#39;validating&#39; | string |  |  |
| wrapperCol | \u9700\u8981\u4E3A\u8F93\u5165\u63A7\u4EF6\u8BBE\u7F6E\u5E03\u5C40\u6837\u5F0F\u65F6\uFF0C\u4F7F\u7528\u8BE5\u5C5E\u6027\uFF0C\u7528\u6CD5\u540C labelCol | [object](/components/grid-cn/#Col) |  |  |
| validateFirst | \u5F53\u67D0\u4E00\u89C4\u5219\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\uFF0C\u662F\u5426\u505C\u6B62\u5269\u4E0B\u7684\u89C4\u5219\u7684\u6821\u9A8C\u3002 | boolean | false | 2.0.0 |
| validateTrigger | \u8BBE\u7F6E\u5B57\u6BB5\u6821\u9A8C\u7684\u65F6\u673A | string \\| string[] | \`change\` | 2.0.0 |

#### \u6CE8\u610F\uFF1A

Form.Item \u4F1A\u5BF9\u552F\u4E00\u5B50\u5143\u7D20\u8FDB\u884C\u52AB\u6301\uFF0C\u5E76\u76D1\u542C \`blur\` \u548C \`change\` \u4E8B\u4EF6\uFF0C\u6765\u8FBE\u5230\u81EA\u52A8\u6821\u9A8C\u7684\u76EE\u7684\uFF0C\u6240\u4EE5\u8BF7\u786E\u4FDD\u8868\u5355\u57DF\u6CA1\u6709\u5176\u5B83\u5143\u7D20\u5305\u88F9\u3002\u5982\u679C\u6709\u591A\u4E2A\u5B50\u5143\u7D20\uFF0C\u5C06\u53EA\u4F1A\u76D1\u542C\u7B2C\u4E00\u4E2A\u5B50\u5143\u7D20\u7684\u53D8\u5316\u3002

\u5982\u679C\u8981\u76D1\u542C\u7684\u8868\u5355\u57DF\u4E0D\u6EE1\u8DB3\u81EA\u52A8\u76D1\u542C\u7684\u6761\u4EF6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u65B9\u5F0F\u5173\u8054\u8868\u5355\u57DF\uFF1A

\`\`\`html
&lt;a-form-item name=&quot;form.name&quot; ref=&quot;name&quot; :autoLink=&quot;false&quot;&gt;
  &lt;a-input v-model:value=&quot;other&quot; /&gt;
  &lt;span&gt;hahha&lt;/span&gt;
  &lt;div&gt;
    &lt;a-input
      v-model:value=&quot;form.name&quot;
      @blur=&quot;() =&gt; {$refs.name.onFieldBlur()}&quot;
      @change=&quot;() =&gt; {$refs.name.onFieldChange()}&quot;
    /&gt;
  &lt;/div&gt;
&lt;/a-form-item&gt;
\`\`\`

### \u6821\u9A8C\u89C4\u5219

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
| --- | --- | --- | --- |
| trigger | \u6821\u9A8C\u89E6\u53D1\u7684\u65F6\u673A | &#39;blur&#39; \\| &#39;change&#39; \\| \`[&#39;change&#39;, &#39;blur&#39;]\` | - |
| enum | \u679A\u4E3E\u7C7B\u578B | string | - |
| len | \u5B57\u6BB5\u957F\u5EA6 | number | - |
| max | \u6700\u5927\u957F\u5EA6 | number | - |
| message | \u6821\u9A8C\u6587\u6848 | string | - |
| min | \u6700\u5C0F\u957F\u5EA6 | number | - |
| pattern | \u6B63\u5219\u8868\u8FBE\u5F0F\u6821\u9A8C | RegExp | - |
| required | \u662F\u5426\u5FC5\u9009 | boolean | \`false\` |
| transform | \u6821\u9A8C\u524D\u8F6C\u6362\u5B57\u6BB5\u503C | function(value) =&gt; transformedValue:any | - |
| type | \u5185\u5EFA\u6821\u9A8C\u7C7B\u578B\uFF0C[\u53EF\u9009\u9879](https://github.com/yiminghe/async-validator#type) | string | &#39;string&#39; |
| validator | \u81EA\u5B9A\u4E49\u6821\u9A8C\uFF08\u6CE8\u610F\uFF0C[callback \u5FC5\u987B\u88AB\u8C03\u7528](https://github.com/ant-design/ant-design/issues/5155)\uFF09 | function(rule, value, callback) | - |
| whitespace | \u5FC5\u9009\u65F6\uFF0C\u7A7A\u683C\u662F\u5426\u4F1A\u88AB\u89C6\u4E3A\u9519\u8BEF | boolean | \`false\` |

\u66F4\u591A\u9AD8\u7EA7\u7528\u6CD5\u53EF\u7814\u7A76 [async-validator](https://github.com/yiminghe/async-validator)\u3002

### useForm (v2.2)

\`useForm\` \u662F\u4E00\u4E2A\u53EF\u4EE5\u72EC\u7ACB Form \u7EC4\u4EF6\u8FD0\u884C\u7684\u65B9\u6CD5\uFF0C\u5B83\u4F7F\u7528 Vue \u54CD\u5E94\u5F0F\u673A\u5236\u8FDB\u884C\u6570\u636E\u7684\u76D1\u542C\u548C\u6821\u9A8C\uFF0C\u5E76\u5C06\u6821\u9A8C\u7ED3\u679C\u8FD4\u56DE\uFF0C\u4F60\u53EF\u4EE5\u5C06\u6821\u9A8C\u7ED3\u679C\u7ED1\u5B9A\u5230\u4EFB\u4F55\u7EC4\u4EF6\u4E0A\uFF0C\`Form.Item\` \u4E5F\u4EC5\u4EC5\u662F\u5C06\u7ED3\u679C\u5C55\u793A\u3002

2.2 \u4EE5\u4E0B\u7248\u672C\u9700\u8981\u9700\u8981 @ant-design-vue/use \u5E93\u5355\u72EC\u63D0\u4F9B\uFF0C\u4E0D\u5EFA\u8BAE\u7EE7\u7EED\u4F7F\u7528\uFF0C\u4F60\u5E94\u8BE5\u5C3D\u5FEB\u5347\u7EA7\u5230 2.2+ \u7248\u672C


\`\`\`ts
import { Form } from &#39;ant-design-vue&#39;;
const useForm = Form.useForm;

useForm(modelRef, ruleRef, [options]);

\`\`\`

\u53C2\u6570\u8BF4\u660E\uFF1A

\`\`\`ts
/*
 modelRef\`, \`ruleRef\` \u5FC5\u987B\u662F\u54CD\u5E94\u5F0F\u6570\u636E
*/

interface Props {
  [key: string]: any;
}
function useForm(
  modelRef: Props | Ref&lt;Props&gt;,
  rulesRef?: Props | Ref&lt;Props&gt;,
  options?: {
    immediate?: boolean;
    deep?: boolean;
    validateOnRuleChange?: boolean;
    debounce?: DebounceSettings;
  },
): {
  modelRef: Props | Ref&lt;Props&gt;;
  rulesRef: Props | Ref&lt;Props&gt;;
  initialModel: Props;
  validateInfos: validateInfos;
  resetFields: (newValues?: Props) =&gt; void;
  validate: &lt;T = any&gt;(names?: namesType, option?: validateOptions) =&gt; Promise&lt;T&gt;;
  validateField: (
    name?: string,
    value?: any,
    rules?: [Record&lt;string, unknown&gt;],
    option?: validateOptions,
  ) =&gt; Promise&lt;RuleError[]&gt;;
  mergeValidateInfo: (items: ValidateInfo | ValidateInfo[]) =&gt; ValidateInfo;
  clearValidate: (names?: namesType) =&gt; void;
}
\`\`\``,html:`<p>\u9AD8\u6027\u80FD\u8868\u5355\u63A7\u4EF6\uFF0C\u81EA\u5E26\u6570\u636E\u57DF\u7BA1\u7406\u3002\u5305\u542B\u6570\u636E\u5F55\u5165\u3001\u6821\u9A8C\u4EE5\u53CA\u5BF9\u5E94\u6837\u5F0F\u3002</p>
<h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2>
<ul>
<li>\u7528\u4E8E\u521B\u5EFA\u4E00\u4E2A\u5B9E\u4F53\u6216\u6536\u96C6\u4FE1\u606F\u3002</li>
<li>\u9700\u8981\u5BF9\u8F93\u5165\u7684\u6570\u636E\u7C7B\u578B\u8FDB\u884C\u6821\u9A8C\u65F6\u3002</li>
</ul>
<h2 id="\u8868\u5355">\u8868\u5355</h2>
<p>\u6211\u4EEC\u4E3A <code>form</code> \u63D0\u4F9B\u4E86\u4EE5\u4E0B\u4E09\u79CD\u6392\u5217\u65B9\u5F0F\uFF1A</p>
<ul>
<li>\u6C34\u5E73\u6392\u5217\uFF1A\u6807\u7B7E\u548C\u8868\u5355\u63A7\u4EF6\u6C34\u5E73\u6392\u5217\uFF1B\uFF08\u9ED8\u8BA4\uFF09</li>
<li>\u5782\u76F4\u6392\u5217\uFF1A\u6807\u7B7E\u548C\u8868\u5355\u63A7\u4EF6\u4E0A\u4E0B\u5782\u76F4\u6392\u5217\uFF1B</li>
<li>\u884C\u5185\u6392\u5217\uFF1A\u8868\u5355\u9879\u6C34\u5E73\u884C\u5185\u6392\u5217\u3002</li>
</ul>
<h2 id="\u8868\u5355\u57DF">\u8868\u5355\u57DF</h2>
<p>\u8868\u5355\u4E00\u5B9A\u4F1A\u5305\u542B\u8868\u5355\u57DF\uFF0C\u8868\u5355\u57DF\u53EF\u4EE5\u662F\u8F93\u5165\u63A7\u4EF6\uFF0C\u6807\u51C6\u8868\u5355\u57DF\uFF0C\u6807\u7B7E\uFF0C\u4E0B\u62C9\u83DC\u5355\uFF0C\u6587\u672C\u57DF\u7B49\u3002</p>
<h2 id="api">API</h2>
<h3 id="form">Form</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>\u8868\u5355\u6570\u636E\u5BF9\u8C61</td>
<td>object</td>
<td></td>
<td></td>
</tr>
<tr>
<td>rules</td>
<td>\u8868\u5355\u9A8C\u8BC1\u89C4\u5219</td>
<td>object</td>
<td></td>
<td></td>
</tr>
<tr>
<td>hideRequiredMark</td>
<td>\u9690\u85CF\u6240\u6709\u8868\u5355\u9879\u7684\u5FC5\u9009\u6807\u8BB0</td>
<td>Boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>labelAlign</td>
<td>label \u6807\u7B7E\u7684\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F</td>
<td>'left' | 'right'</td>
<td>'right'</td>
<td></td>
</tr>
<tr>
<td>layout</td>
<td>\u8868\u5355\u5E03\u5C40</td>
<td>'horizontal'|'vertical'|'inline'</td>
<td>'horizontal'</td>
<td></td>
</tr>
<tr>
<td>labelCol</td>
<td>label \u6807\u7B7E\u5E03\u5C40\uFF0C\u540C <code>&lt;Col&gt;</code> \u7EC4\u4EF6\uFF0C\u8BBE\u7F6E <code>span</code> <code>offset</code> \u503C\uFF0C\u5982 <code>{span: 3, offset: 12}</code> \u6216 <code>sm: {span: 3, offset: 12}</code></td>
<td><a href="/components/grid-cn/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>wrapperCol</td>
<td>\u9700\u8981\u4E3A\u8F93\u5165\u63A7\u4EF6\u8BBE\u7F6E\u5E03\u5C40\u6837\u5F0F\u65F6\uFF0C\u4F7F\u7528\u8BE5\u5C5E\u6027\uFF0C\u7528\u6CD5\u540C labelCol</td>
<td><a href="/components/grid-cn/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>colon</td>
<td>\u914D\u7F6E Form.Item \u7684 colon \u7684\u9ED8\u8BA4\u503C (\u53EA\u6709\u5728\u5C5E\u6027 layout \u4E3A horizontal \u65F6\u6709\u6548)</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>validateOnRuleChange</td>
<td>\u662F\u5426\u5728 rules \u5C5E\u6027\u6539\u53D8\u540E\u7ACB\u5373\u89E6\u53D1\u4E00\u6B21\u9A8C\u8BC1</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>scrollToFirstError</td>
<td>\u63D0\u4EA4\u5931\u8D25\u81EA\u52A8\u6EDA\u52A8\u5230\u7B2C\u4E00\u4E2A\u9519\u8BEF\u5B57\u6BB5</td>
<td>boolean | <a href="https://github.com/stipsan/scroll-into-view-if-needed/#options" target="_blank" rel="noopener noreferrer">options</a></td>
<td>false</td>
<td>2.0.0</td>
</tr>
<tr>
<td>name</td>
<td>\u8868\u5355\u540D\u79F0\uFF0C\u4F1A\u4F5C\u4E3A\u8868\u5355\u5B57\u6BB5 <code>id</code> \u524D\u7F00\u4F7F\u7528</td>
<td>string</td>
<td>-</td>
<td>2.0.0</td>
</tr>
<tr>
<td>validateTrigger</td>
<td>\u7EDF\u4E00\u8BBE\u7F6E\u5B57\u6BB5\u6821\u9A8C\u89C4\u5219</td>
<td>string | string[]</td>
<td><code>change</code></td>
<td>2.0.0</td>
</tr>
</tbody>
</table>
<h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6</h3>
<table>
<thead>
<tr>
<th>\u4E8B\u4EF6\u540D\u79F0</th>
<th>\u8BF4\u660E</th>
<th>\u56DE\u8C03\u53C2\u6570</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>submit</td>
<td>\u6570\u636E\u9A8C\u8BC1\u6210\u529F\u540E\u56DE\u8C03\u4E8B\u4EF6</td>
<td>Function(e:Event)</td>
<td>\uFF5C</td>
</tr>
<tr>
<td>validate</td>
<td>\u4EFB\u4E00\u8868\u5355\u9879\u88AB\u6821\u9A8C\u540E\u89E6\u53D1</td>
<td>\u88AB\u6821\u9A8C\u7684\u8868\u5355\u9879 name \u503C\uFF0C\u6821\u9A8C\u662F\u5426\u901A\u8FC7\uFF0C\u9519\u8BEF\u6D88\u606F\uFF08\u5982\u679C\u5B58\u5728\uFF09</td>
<td></td>
</tr>
<tr>
<td>finish</td>
<td>\u63D0\u4EA4\u8868\u5355\u4E14\u6570\u636E\u9A8C\u8BC1\u6210\u529F\u540E\u56DE\u8C03\u4E8B\u4EF6</td>
<td>function(values)</td>
<td>-</td>
</tr>
<tr>
<td>finishFailed</td>
<td>\u63D0\u4EA4\u8868\u5355\u4E14\u6570\u636E\u9A8C\u8BC1\u5931\u8D25\u540E\u56DE\u8C03\u4E8B\u4EF6</td>
<td>function({ values, errorFields, outOfDate })</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="\u65B9\u6CD5">\u65B9\u6CD5</h3>
<table>
<thead>
<tr>
<th>\u65B9\u6CD5\u540D</th>
<th>\u8BF4\u660E</th>
<th>\u53C2\u6570</th>
</tr>
</thead>
<tbody>
<tr>
<td>validate</td>
<td>\u89E6\u53D1\u8868\u5355\u9A8C\u8BC1, \u540C validateFields</td>
<td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td>
</tr>
<tr>
<td>validateFields</td>
<td>\u89E6\u53D1\u8868\u5355\u9A8C\u8BC1</td>
<td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td>
</tr>
<tr>
<td>scrollToField</td>
<td>\u6EDA\u52A8\u5230\u5BF9\u5E94\u5B57\u6BB5\u4F4D\u7F6E</td>
<td>(name: <a href="#NamePath">NamePath</a>, options: [<a href="https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options" target="_blank" rel="noopener noreferrer">ScrollOptions</a>]) =&gt; void</td>
</tr>
<tr>
<td>resetFields</td>
<td>\u5BF9\u6574\u4E2A\u8868\u5355\u8FDB\u884C\u91CD\u7F6E\uFF0C\u5C06\u6240\u6709\u5B57\u6BB5\u503C\u91CD\u7F6E\u4E3A\u521D\u59CB\u503C\u5E76\u79FB\u9664\u6821\u9A8C\u7ED3\u679C</td>
<td>\u2014</td>
</tr>
<tr>
<td>clearValidate</td>
<td>\u79FB\u9664\u8868\u5355\u9879\u7684\u6821\u9A8C\u7ED3\u679C\u3002\u4F20\u5165\u5F85\u79FB\u9664\u7684\u8868\u5355\u9879\u7684 name \u5C5E\u6027\u6216\u8005 name \u7EC4\u6210\u7684\u6570\u7EC4\uFF0C\u5982\u4E0D\u4F20\u5219\u79FB\u9664\u6574\u4E2A\u8868\u5355\u7684\u6821\u9A8C\u7ED3\u679C</td>
<td>Function(name: array | string)</td>
</tr>
</tbody>
</table>
<h3 id="form-item">Form.Item</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>\u8868\u5355\u57DF model \u5B57\u6BB5\uFF0C\u5728\u4F7F\u7528 validate\u3001resetFields \u65B9\u6CD5\u7684\u60C5\u51B5\u4E0B\uFF0C\u8BE5\u5C5E\u6027\u662F\u5FC5\u586B\u7684</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>rules</td>
<td>\u8868\u5355\u9A8C\u8BC1\u89C4\u5219</td>
<td>object | array</td>
<td></td>
<td></td>
</tr>
<tr>
<td>autoLink</td>
<td>\u662F\u5426\u81EA\u52A8\u5173\u8054\u8868\u5355\u57DF\uFF0C\u5BF9\u4E8E\u5927\u90E8\u5206\u60C5\u51B5\u90FD\u53EF\u4EE5\u4F7F\u7528\u81EA\u52A8\u5173\u8054\uFF0C\u5982\u679C\u4E0D\u6EE1\u8DB3\u81EA\u52A8\u5173\u8054\u7684\u6761\u4EF6\uFF0C\u53EF\u4EE5\u624B\u52A8\u5173\u8054\uFF0C\u53C2\u89C1\u4E0B\u65B9\u6CE8\u610F\u4E8B\u9879</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>colon</td>
<td>\u914D\u5408 label \u5C5E\u6027\u4F7F\u7528\uFF0C\u8868\u793A\u662F\u5426\u663E\u793A label \u540E\u9762\u7684\u5192\u53F7</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>extra</td>
<td>\u989D\u5916\u7684\u63D0\u793A\u4FE1\u606F\uFF0C\u548C help \u7C7B\u4F3C\uFF0C\u5F53\u9700\u8981\u9519\u8BEF\u4FE1\u606F\u548C\u63D0\u793A\u6587\u6848\u540C\u65F6\u51FA\u73B0\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u8FD9\u4E2A\u3002</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>hasFeedback</td>
<td>\u914D\u5408 validateStatus \u5C5E\u6027\u4F7F\u7528\uFF0C\u5C55\u793A\u6821\u9A8C\u72B6\u6001\u56FE\u6807\uFF0C\u5EFA\u8BAE\u53EA\u914D\u5408 Input \u7EC4\u4EF6\u4F7F\u7528</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>help</td>
<td>\u63D0\u793A\u4FE1\u606F\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>htmlFor</td>
<td>\u8BBE\u7F6E\u5B50\u5143\u7D20 label <code>htmlFor</code> \u5C5E\u6027</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>label</td>
<td>label \u6807\u7B7E\u7684\u6587\u672C</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>labelCol</td>
<td>label \u6807\u7B7E\u5E03\u5C40\uFF0C\u540C <code>&lt;Col&gt;</code> \u7EC4\u4EF6\uFF0C\u8BBE\u7F6E <code>span</code> <code>offset</code> \u503C\uFF0C\u5982 <code>{span: 3, offset: 12}</code> \u6216 <code>sm: {span: 3, offset: 12}</code></td>
<td><a href="/components/grid-cn/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>labelAlign</td>
<td>\u6807\u7B7E\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F</td>
<td>'left' | 'right'</td>
<td>'right'</td>
<td></td>
</tr>
<tr>
<td>required</td>
<td>\u662F\u5426\u5FC5\u586B\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>validateStatus</td>
<td>\u6821\u9A8C\u72B6\u6001\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210\uFF0C\u53EF\u9009\uFF1A'success' 'warning' 'error' 'validating'</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>wrapperCol</td>
<td>\u9700\u8981\u4E3A\u8F93\u5165\u63A7\u4EF6\u8BBE\u7F6E\u5E03\u5C40\u6837\u5F0F\u65F6\uFF0C\u4F7F\u7528\u8BE5\u5C5E\u6027\uFF0C\u7528\u6CD5\u540C labelCol</td>
<td><a href="/components/grid-cn/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>validateFirst</td>
<td>\u5F53\u67D0\u4E00\u89C4\u5219\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\uFF0C\u662F\u5426\u505C\u6B62\u5269\u4E0B\u7684\u89C4\u5219\u7684\u6821\u9A8C\u3002</td>
<td>boolean</td>
<td>false</td>
<td>2.0.0</td>
</tr>
<tr>
<td>validateTrigger</td>
<td>\u8BBE\u7F6E\u5B57\u6BB5\u6821\u9A8C\u7684\u65F6\u673A</td>
<td>string | string[]</td>
<td><code>change</code></td>
<td>2.0.0</td>
</tr>
</tbody>
</table>
<h4 id="\u6CE8\u610F\uFF1A">\u6CE8\u610F\uFF1A</h4>
<p>Form.Item \u4F1A\u5BF9\u552F\u4E00\u5B50\u5143\u7D20\u8FDB\u884C\u52AB\u6301\uFF0C\u5E76\u76D1\u542C <code>blur</code> \u548C <code>change</code> \u4E8B\u4EF6\uFF0C\u6765\u8FBE\u5230\u81EA\u52A8\u6821\u9A8C\u7684\u76EE\u7684\uFF0C\u6240\u4EE5\u8BF7\u786E\u4FDD\u8868\u5355\u57DF\u6CA1\u6709\u5176\u5B83\u5143\u7D20\u5305\u88F9\u3002\u5982\u679C\u6709\u591A\u4E2A\u5B50\u5143\u7D20\uFF0C\u5C06\u53EA\u4F1A\u76D1\u542C\u7B2C\u4E00\u4E2A\u5B50\u5143\u7D20\u7684\u53D8\u5316\u3002</p>
<p>\u5982\u679C\u8981\u76D1\u542C\u7684\u8868\u5355\u57DF\u4E0D\u6EE1\u8DB3\u81EA\u52A8\u76D1\u542C\u7684\u6761\u4EF6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u65B9\u5F0F\u5173\u8054\u8868\u5355\u57DF\uFF1A</p>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form.name<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">:autoLink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>other<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>hahha<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span>
      <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form.name<span class="token punctuation">"</span></span>
      <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>() => {$refs.name.onFieldBlur()}<span class="token punctuation">"</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>() => {$refs.name.onFieldChange()}<span class="token punctuation">"</span></span>
    <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="\u6821\u9A8C\u89C4\u5219">\u6821\u9A8C\u89C4\u5219</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>trigger</td>
<td>\u6821\u9A8C\u89E6\u53D1\u7684\u65F6\u673A</td>
<td>'blur' | 'change' | <code>['change', 'blur']</code></td>
<td>-</td>
</tr>
<tr>
<td>enum</td>
<td>\u679A\u4E3E\u7C7B\u578B</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>len</td>
<td>\u5B57\u6BB5\u957F\u5EA6</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>max</td>
<td>\u6700\u5927\u957F\u5EA6</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>message</td>
<td>\u6821\u9A8C\u6587\u6848</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>min</td>
<td>\u6700\u5C0F\u957F\u5EA6</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>pattern</td>
<td>\u6B63\u5219\u8868\u8FBE\u5F0F\u6821\u9A8C</td>
<td>RegExp</td>
<td>-</td>
</tr>
<tr>
<td>required</td>
<td>\u662F\u5426\u5FC5\u9009</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td>transform</td>
<td>\u6821\u9A8C\u524D\u8F6C\u6362\u5B57\u6BB5\u503C</td>
<td>function(value) =&gt; transformedValue:any</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>\u5185\u5EFA\u6821\u9A8C\u7C7B\u578B\uFF0C<a href="https://github.com/yiminghe/async-validator#type" target="_blank" rel="noopener noreferrer">\u53EF\u9009\u9879</a></td>
<td>string</td>
<td>'string'</td>
</tr>
<tr>
<td>validator</td>
<td>\u81EA\u5B9A\u4E49\u6821\u9A8C\uFF08\u6CE8\u610F\uFF0C<a href="https://github.com/ant-design/ant-design/issues/5155" target="_blank" rel="noopener noreferrer">callback \u5FC5\u987B\u88AB\u8C03\u7528</a>\uFF09</td>
<td>function(rule, value, callback)</td>
<td>-</td>
</tr>
<tr>
<td>whitespace</td>
<td>\u5FC5\u9009\u65F6\uFF0C\u7A7A\u683C\u662F\u5426\u4F1A\u88AB\u89C6\u4E3A\u9519\u8BEF</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<p>\u66F4\u591A\u9AD8\u7EA7\u7528\u6CD5\u53EF\u7814\u7A76 <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>\u3002</p>
<h3 id="useform-v2-2">useForm (v2.2)</h3>
<p><code>useForm</code> \u662F\u4E00\u4E2A\u53EF\u4EE5\u72EC\u7ACB Form \u7EC4\u4EF6\u8FD0\u884C\u7684\u65B9\u6CD5\uFF0C\u5B83\u4F7F\u7528 Vue \u54CD\u5E94\u5F0F\u673A\u5236\u8FDB\u884C\u6570\u636E\u7684\u76D1\u542C\u548C\u6821\u9A8C\uFF0C\u5E76\u5C06\u6821\u9A8C\u7ED3\u679C\u8FD4\u56DE\uFF0C\u4F60\u53EF\u4EE5\u5C06\u6821\u9A8C\u7ED3\u679C\u7ED1\u5B9A\u5230\u4EFB\u4F55\u7EC4\u4EF6\u4E0A\uFF0C<code>Form.Item</code> \u4E5F\u4EC5\u4EC5\u662F\u5C06\u7ED3\u679C\u5C55\u793A\u3002</p>
<p>2.2 \u4EE5\u4E0B\u7248\u672C\u9700\u8981\u9700\u8981 @ant-design-vue/use \u5E93\u5355\u72EC\u63D0\u4F9B\uFF0C\u4E0D\u5EFA\u8BAE\u7EE7\u7EED\u4F7F\u7528\uFF0C\u4F60\u5E94\u8BE5\u5C3D\u5FEB\u5347\u7EA7\u5230 2.2+ \u7248\u672C</p>
<pre class="language-ts" v-pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> useForm <span class="token operator">=</span> Form<span class="token punctuation">.</span>useForm<span class="token punctuation">;</span>

<span class="token function">useForm</span><span class="token punctuation">(</span>modelRef<span class="token punctuation">,</span> ruleRef<span class="token punctuation">,</span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre>
<p>\u53C2\u6570\u8BF4\u660E\uFF1A</p>
<pre class="language-ts" v-pre><code><span class="token comment">/*
 modelRef\`, \`ruleRef\` \u5FC5\u987B\u662F\u54CD\u5E94\u5F0F\u6570\u636E
*/</span>

<span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">useForm</span><span class="token punctuation">(</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">,</span>
  rulesRef<span class="token operator">?</span><span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">,</span>
  options<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    immediate<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    deep<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    validateOnRuleChange<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    debounce<span class="token operator">?</span><span class="token operator">:</span> DebounceSettings<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">;</span>
  rulesRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">;</span>
  initialModel<span class="token operator">:</span> Props<span class="token punctuation">;</span>
  validateInfos<span class="token operator">:</span> validateInfos<span class="token punctuation">;</span>
  <span class="token function-variable function">resetFields</span><span class="token operator">:</span> <span class="token punctuation">(</span>newValues<span class="token operator">?</span><span class="token operator">:</span> Props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span>
  validate<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">></span><span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">,</span> option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">;</span>
  <span class="token function-variable function">validateField</span><span class="token operator">:</span> <span class="token punctuation">(</span>
    name<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    value<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span>
    rules<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">[</span>Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">unknown</span><span class="token operator">></span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">,</span>
  <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>RuleError<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">;</span>
  <span class="token function-variable function">mergeValidateInfo</span><span class="token operator">:</span> <span class="token punctuation">(</span>items<span class="token operator">:</span> ValidateInfo <span class="token operator">|</span> ValidateInfo<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=></span> ValidateInfo<span class="token punctuation">;</span>
  <span class="token function-variable function">clearValidate</span><span class="token operator">:</span> <span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
`,lastUpdated:1748059052677}},sa={class:"markdown"};function oa(s,t,g,i,C,b){return y(),L("article",sa,t[0]||(t[0]=[x(`<p>\u9AD8\u6027\u80FD\u8868\u5355\u63A7\u4EF6\uFF0C\u81EA\u5E26\u6570\u636E\u57DF\u7BA1\u7406\u3002\u5305\u542B\u6570\u636E\u5F55\u5165\u3001\u6821\u9A8C\u4EE5\u53CA\u5BF9\u5E94\u6837\u5F0F\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2><ul><li>\u7528\u4E8E\u521B\u5EFA\u4E00\u4E2A\u5B9E\u4F53\u6216\u6536\u96C6\u4FE1\u606F\u3002</li><li>\u9700\u8981\u5BF9\u8F93\u5165\u7684\u6570\u636E\u7C7B\u578B\u8FDB\u884C\u6821\u9A8C\u65F6\u3002</li></ul><h2 id="\u8868\u5355">\u8868\u5355</h2><p>\u6211\u4EEC\u4E3A <code>form</code> \u63D0\u4F9B\u4E86\u4EE5\u4E0B\u4E09\u79CD\u6392\u5217\u65B9\u5F0F\uFF1A</p><ul><li>\u6C34\u5E73\u6392\u5217\uFF1A\u6807\u7B7E\u548C\u8868\u5355\u63A7\u4EF6\u6C34\u5E73\u6392\u5217\uFF1B\uFF08\u9ED8\u8BA4\uFF09</li><li>\u5782\u76F4\u6392\u5217\uFF1A\u6807\u7B7E\u548C\u8868\u5355\u63A7\u4EF6\u4E0A\u4E0B\u5782\u76F4\u6392\u5217\uFF1B</li><li>\u884C\u5185\u6392\u5217\uFF1A\u8868\u5355\u9879\u6C34\u5E73\u884C\u5185\u6392\u5217\u3002</li></ul><h2 id="\u8868\u5355\u57DF">\u8868\u5355\u57DF</h2><p>\u8868\u5355\u4E00\u5B9A\u4F1A\u5305\u542B\u8868\u5355\u57DF\uFF0C\u8868\u5355\u57DF\u53EF\u4EE5\u662F\u8F93\u5165\u63A7\u4EF6\uFF0C\u6807\u51C6\u8868\u5355\u57DF\uFF0C\u6807\u7B7E\uFF0C\u4E0B\u62C9\u83DC\u5355\uFF0C\u6587\u672C\u57DF\u7B49\u3002</p><h2 id="api">API</h2><h3 id="form">Form</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>model</td><td>\u8868\u5355\u6570\u636E\u5BF9\u8C61</td><td>object</td><td></td><td></td></tr><tr><td>rules</td><td>\u8868\u5355\u9A8C\u8BC1\u89C4\u5219</td><td>object</td><td></td><td></td></tr><tr><td>hideRequiredMark</td><td>\u9690\u85CF\u6240\u6709\u8868\u5355\u9879\u7684\u5FC5\u9009\u6807\u8BB0</td><td>Boolean</td><td>false</td><td></td></tr><tr><td>labelAlign</td><td>label \u6807\u7B7E\u7684\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F</td><td>&#39;left&#39; | &#39;right&#39;</td><td>&#39;right&#39;</td><td></td></tr><tr><td>layout</td><td>\u8868\u5355\u5E03\u5C40</td><td>&#39;horizontal&#39;|&#39;vertical&#39;|&#39;inline&#39;</td><td>&#39;horizontal&#39;</td><td></td></tr><tr><td>labelCol</td><td>label \u6807\u7B7E\u5E03\u5C40\uFF0C\u540C <code>&lt;Col&gt;</code> \u7EC4\u4EF6\uFF0C\u8BBE\u7F6E <code>span</code> <code>offset</code> \u503C\uFF0C\u5982 <code>{span: 3, offset: 12}</code> \u6216 <code>sm: {span: 3, offset: 12}</code></td><td><a href="/components/grid-cn/#Col">object</a></td><td></td><td></td></tr><tr><td>wrapperCol</td><td>\u9700\u8981\u4E3A\u8F93\u5165\u63A7\u4EF6\u8BBE\u7F6E\u5E03\u5C40\u6837\u5F0F\u65F6\uFF0C\u4F7F\u7528\u8BE5\u5C5E\u6027\uFF0C\u7528\u6CD5\u540C labelCol</td><td><a href="/components/grid-cn/#Col">object</a></td><td></td><td></td></tr><tr><td>colon</td><td>\u914D\u7F6E Form.Item \u7684 colon \u7684\u9ED8\u8BA4\u503C (\u53EA\u6709\u5728\u5C5E\u6027 layout \u4E3A horizontal \u65F6\u6709\u6548)</td><td>boolean</td><td>true</td><td></td></tr><tr><td>validateOnRuleChange</td><td>\u662F\u5426\u5728 rules \u5C5E\u6027\u6539\u53D8\u540E\u7ACB\u5373\u89E6\u53D1\u4E00\u6B21\u9A8C\u8BC1</td><td>boolean</td><td>true</td><td></td></tr><tr><td>scrollToFirstError</td><td>\u63D0\u4EA4\u5931\u8D25\u81EA\u52A8\u6EDA\u52A8\u5230\u7B2C\u4E00\u4E2A\u9519\u8BEF\u5B57\u6BB5</td><td>boolean | <a href="https://github.com/stipsan/scroll-into-view-if-needed/#options" target="_blank" rel="noopener noreferrer">options</a></td><td>false</td><td>2.0.0</td></tr><tr><td>name</td><td>\u8868\u5355\u540D\u79F0\uFF0C\u4F1A\u4F5C\u4E3A\u8868\u5355\u5B57\u6BB5 <code>id</code> \u524D\u7F00\u4F7F\u7528</td><td>string</td><td>-</td><td>2.0.0</td></tr><tr><td>validateTrigger</td><td>\u7EDF\u4E00\u8BBE\u7F6E\u5B57\u6BB5\u6821\u9A8C\u89C4\u5219</td><td>string | string[]</td><td><code>change</code></td><td>2.0.0</td></tr></tbody></table><h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>submit</td><td>\u6570\u636E\u9A8C\u8BC1\u6210\u529F\u540E\u56DE\u8C03\u4E8B\u4EF6</td><td>Function(e:Event)</td><td>\uFF5C</td></tr><tr><td>validate</td><td>\u4EFB\u4E00\u8868\u5355\u9879\u88AB\u6821\u9A8C\u540E\u89E6\u53D1</td><td>\u88AB\u6821\u9A8C\u7684\u8868\u5355\u9879 name \u503C\uFF0C\u6821\u9A8C\u662F\u5426\u901A\u8FC7\uFF0C\u9519\u8BEF\u6D88\u606F\uFF08\u5982\u679C\u5B58\u5728\uFF09</td><td></td></tr><tr><td>finish</td><td>\u63D0\u4EA4\u8868\u5355\u4E14\u6570\u636E\u9A8C\u8BC1\u6210\u529F\u540E\u56DE\u8C03\u4E8B\u4EF6</td><td>function(values)</td><td>-</td></tr><tr><td>finishFailed</td><td>\u63D0\u4EA4\u8868\u5355\u4E14\u6570\u636E\u9A8C\u8BC1\u5931\u8D25\u540E\u56DE\u8C03\u4E8B\u4EF6</td><td>function({ values, errorFields, outOfDate })</td><td>-</td></tr></tbody></table><h3 id="\u65B9\u6CD5">\u65B9\u6CD5</h3><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>validate</td><td>\u89E6\u53D1\u8868\u5355\u9A8C\u8BC1, \u540C validateFields</td><td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td></tr><tr><td>validateFields</td><td>\u89E6\u53D1\u8868\u5355\u9A8C\u8BC1</td><td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td></tr><tr><td>scrollToField</td><td>\u6EDA\u52A8\u5230\u5BF9\u5E94\u5B57\u6BB5\u4F4D\u7F6E</td><td>(name: <a href="#NamePath">NamePath</a>, options: [<a href="https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options" target="_blank" rel="noopener noreferrer">ScrollOptions</a>]) =&gt; void</td></tr><tr><td>resetFields</td><td>\u5BF9\u6574\u4E2A\u8868\u5355\u8FDB\u884C\u91CD\u7F6E\uFF0C\u5C06\u6240\u6709\u5B57\u6BB5\u503C\u91CD\u7F6E\u4E3A\u521D\u59CB\u503C\u5E76\u79FB\u9664\u6821\u9A8C\u7ED3\u679C</td><td>\u2014</td></tr><tr><td>clearValidate</td><td>\u79FB\u9664\u8868\u5355\u9879\u7684\u6821\u9A8C\u7ED3\u679C\u3002\u4F20\u5165\u5F85\u79FB\u9664\u7684\u8868\u5355\u9879\u7684 name \u5C5E\u6027\u6216\u8005 name \u7EC4\u6210\u7684\u6570\u7EC4\uFF0C\u5982\u4E0D\u4F20\u5219\u79FB\u9664\u6574\u4E2A\u8868\u5355\u7684\u6821\u9A8C\u7ED3\u679C</td><td>Function(name: array | string)</td></tr></tbody></table><h3 id="form-item">Form.Item</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>name</td><td>\u8868\u5355\u57DF model \u5B57\u6BB5\uFF0C\u5728\u4F7F\u7528 validate\u3001resetFields \u65B9\u6CD5\u7684\u60C5\u51B5\u4E0B\uFF0C\u8BE5\u5C5E\u6027\u662F\u5FC5\u586B\u7684</td><td>string</td><td></td><td></td></tr><tr><td>rules</td><td>\u8868\u5355\u9A8C\u8BC1\u89C4\u5219</td><td>object | array</td><td></td><td></td></tr><tr><td>autoLink</td><td>\u662F\u5426\u81EA\u52A8\u5173\u8054\u8868\u5355\u57DF\uFF0C\u5BF9\u4E8E\u5927\u90E8\u5206\u60C5\u51B5\u90FD\u53EF\u4EE5\u4F7F\u7528\u81EA\u52A8\u5173\u8054\uFF0C\u5982\u679C\u4E0D\u6EE1\u8DB3\u81EA\u52A8\u5173\u8054\u7684\u6761\u4EF6\uFF0C\u53EF\u4EE5\u624B\u52A8\u5173\u8054\uFF0C\u53C2\u89C1\u4E0B\u65B9\u6CE8\u610F\u4E8B\u9879</td><td>boolean</td><td>true</td><td></td></tr><tr><td>colon</td><td>\u914D\u5408 label \u5C5E\u6027\u4F7F\u7528\uFF0C\u8868\u793A\u662F\u5426\u663E\u793A label \u540E\u9762\u7684\u5192\u53F7</td><td>boolean</td><td>true</td><td></td></tr><tr><td>extra</td><td>\u989D\u5916\u7684\u63D0\u793A\u4FE1\u606F\uFF0C\u548C help \u7C7B\u4F3C\uFF0C\u5F53\u9700\u8981\u9519\u8BEF\u4FE1\u606F\u548C\u63D0\u793A\u6587\u6848\u540C\u65F6\u51FA\u73B0\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u8FD9\u4E2A\u3002</td><td>string|slot</td><td></td><td></td></tr><tr><td>hasFeedback</td><td>\u914D\u5408 validateStatus \u5C5E\u6027\u4F7F\u7528\uFF0C\u5C55\u793A\u6821\u9A8C\u72B6\u6001\u56FE\u6807\uFF0C\u5EFA\u8BAE\u53EA\u914D\u5408 Input \u7EC4\u4EF6\u4F7F\u7528</td><td>boolean</td><td>false</td><td></td></tr><tr><td>help</td><td>\u63D0\u793A\u4FE1\u606F\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210</td><td>string|slot</td><td></td><td></td></tr><tr><td>htmlFor</td><td>\u8BBE\u7F6E\u5B50\u5143\u7D20 label <code>htmlFor</code> \u5C5E\u6027</td><td>string</td><td></td><td></td></tr><tr><td>label</td><td>label \u6807\u7B7E\u7684\u6587\u672C</td><td>string|slot</td><td></td><td></td></tr><tr><td>labelCol</td><td>label \u6807\u7B7E\u5E03\u5C40\uFF0C\u540C <code>&lt;Col&gt;</code> \u7EC4\u4EF6\uFF0C\u8BBE\u7F6E <code>span</code> <code>offset</code> \u503C\uFF0C\u5982 <code>{span: 3, offset: 12}</code> \u6216 <code>sm: {span: 3, offset: 12}</code></td><td><a href="/components/grid-cn/#Col">object</a></td><td></td><td></td></tr><tr><td>labelAlign</td><td>\u6807\u7B7E\u6587\u672C\u5BF9\u9F50\u65B9\u5F0F</td><td>&#39;left&#39; | &#39;right&#39;</td><td>&#39;right&#39;</td><td></td></tr><tr><td>required</td><td>\u662F\u5426\u5FC5\u586B\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210</td><td>boolean</td><td>false</td><td></td></tr><tr><td>validateStatus</td><td>\u6821\u9A8C\u72B6\u6001\uFF0C\u5982\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4F1A\u6839\u636E\u6821\u9A8C\u89C4\u5219\u81EA\u52A8\u751F\u6210\uFF0C\u53EF\u9009\uFF1A&#39;success&#39; &#39;warning&#39; &#39;error&#39; &#39;validating&#39;</td><td>string</td><td></td><td></td></tr><tr><td>wrapperCol</td><td>\u9700\u8981\u4E3A\u8F93\u5165\u63A7\u4EF6\u8BBE\u7F6E\u5E03\u5C40\u6837\u5F0F\u65F6\uFF0C\u4F7F\u7528\u8BE5\u5C5E\u6027\uFF0C\u7528\u6CD5\u540C labelCol</td><td><a href="/components/grid-cn/#Col">object</a></td><td></td><td></td></tr><tr><td>validateFirst</td><td>\u5F53\u67D0\u4E00\u89C4\u5219\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\uFF0C\u662F\u5426\u505C\u6B62\u5269\u4E0B\u7684\u89C4\u5219\u7684\u6821\u9A8C\u3002</td><td>boolean</td><td>false</td><td>2.0.0</td></tr><tr><td>validateTrigger</td><td>\u8BBE\u7F6E\u5B57\u6BB5\u6821\u9A8C\u7684\u65F6\u673A</td><td>string | string[]</td><td><code>change</code></td><td>2.0.0</td></tr></tbody></table><h4 id="\u6CE8\u610F\uFF1A">\u6CE8\u610F\uFF1A</h4><p>Form.Item \u4F1A\u5BF9\u552F\u4E00\u5B50\u5143\u7D20\u8FDB\u884C\u52AB\u6301\uFF0C\u5E76\u76D1\u542C <code>blur</code> \u548C <code>change</code> \u4E8B\u4EF6\uFF0C\u6765\u8FBE\u5230\u81EA\u52A8\u6821\u9A8C\u7684\u76EE\u7684\uFF0C\u6240\u4EE5\u8BF7\u786E\u4FDD\u8868\u5355\u57DF\u6CA1\u6709\u5176\u5B83\u5143\u7D20\u5305\u88F9\u3002\u5982\u679C\u6709\u591A\u4E2A\u5B50\u5143\u7D20\uFF0C\u5C06\u53EA\u4F1A\u76D1\u542C\u7B2C\u4E00\u4E2A\u5B50\u5143\u7D20\u7684\u53D8\u5316\u3002</p><p>\u5982\u679C\u8981\u76D1\u542C\u7684\u8868\u5355\u57DF\u4E0D\u6EE1\u8DB3\u81EA\u52A8\u76D1\u542C\u7684\u6761\u4EF6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u65B9\u5F0F\u5173\u8054\u8868\u5355\u57DF\uFF1A</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:autoLink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>other<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>hahha<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span>
      <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.name<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {$refs.name.onFieldBlur()}<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {$refs.name.onFieldChange()}<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre><h3 id="\u6821\u9A8C\u89C4\u5219">\u6821\u9A8C\u89C4\u5219</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>trigger</td><td>\u6821\u9A8C\u89E6\u53D1\u7684\u65F6\u673A</td><td>&#39;blur&#39; | &#39;change&#39; | <code>[&#39;change&#39;, &#39;blur&#39;]</code></td><td>-</td></tr><tr><td>enum</td><td>\u679A\u4E3E\u7C7B\u578B</td><td>string</td><td>-</td></tr><tr><td>len</td><td>\u5B57\u6BB5\u957F\u5EA6</td><td>number</td><td>-</td></tr><tr><td>max</td><td>\u6700\u5927\u957F\u5EA6</td><td>number</td><td>-</td></tr><tr><td>message</td><td>\u6821\u9A8C\u6587\u6848</td><td>string</td><td>-</td></tr><tr><td>min</td><td>\u6700\u5C0F\u957F\u5EA6</td><td>number</td><td>-</td></tr><tr><td>pattern</td><td>\u6B63\u5219\u8868\u8FBE\u5F0F\u6821\u9A8C</td><td>RegExp</td><td>-</td></tr><tr><td>required</td><td>\u662F\u5426\u5FC5\u9009</td><td>boolean</td><td><code>false</code></td></tr><tr><td>transform</td><td>\u6821\u9A8C\u524D\u8F6C\u6362\u5B57\u6BB5\u503C</td><td>function(value) =&gt; transformedValue:any</td><td>-</td></tr><tr><td>type</td><td>\u5185\u5EFA\u6821\u9A8C\u7C7B\u578B\uFF0C<a href="https://github.com/yiminghe/async-validator#type" target="_blank" rel="noopener noreferrer">\u53EF\u9009\u9879</a></td><td>string</td><td>&#39;string&#39;</td></tr><tr><td>validator</td><td>\u81EA\u5B9A\u4E49\u6821\u9A8C\uFF08\u6CE8\u610F\uFF0C<a href="https://github.com/ant-design/ant-design/issues/5155" target="_blank" rel="noopener noreferrer">callback \u5FC5\u987B\u88AB\u8C03\u7528</a>\uFF09</td><td>function(rule, value, callback)</td><td>-</td></tr><tr><td>whitespace</td><td>\u5FC5\u9009\u65F6\uFF0C\u7A7A\u683C\u662F\u5426\u4F1A\u88AB\u89C6\u4E3A\u9519\u8BEF</td><td>boolean</td><td><code>false</code></td></tr></tbody></table><p>\u66F4\u591A\u9AD8\u7EA7\u7528\u6CD5\u53EF\u7814\u7A76 <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>\u3002</p><h3 id="useform-v2-2">useForm (v2.2)</h3><p><code>useForm</code> \u662F\u4E00\u4E2A\u53EF\u4EE5\u72EC\u7ACB Form \u7EC4\u4EF6\u8FD0\u884C\u7684\u65B9\u6CD5\uFF0C\u5B83\u4F7F\u7528 Vue \u54CD\u5E94\u5F0F\u673A\u5236\u8FDB\u884C\u6570\u636E\u7684\u76D1\u542C\u548C\u6821\u9A8C\uFF0C\u5E76\u5C06\u6821\u9A8C\u7ED3\u679C\u8FD4\u56DE\uFF0C\u4F60\u53EF\u4EE5\u5C06\u6821\u9A8C\u7ED3\u679C\u7ED1\u5B9A\u5230\u4EFB\u4F55\u7EC4\u4EF6\u4E0A\uFF0C<code>Form.Item</code> \u4E5F\u4EC5\u4EC5\u662F\u5C06\u7ED3\u679C\u5C55\u793A\u3002</p><p>2.2 \u4EE5\u4E0B\u7248\u672C\u9700\u8981\u9700\u8981 @ant-design-vue/use \u5E93\u5355\u72EC\u63D0\u4F9B\uFF0C\u4E0D\u5EFA\u8BAE\u7EE7\u7EED\u4F7F\u7528\uFF0C\u4F60\u5E94\u8BE5\u5C3D\u5FEB\u5347\u7EA7\u5230 2.2+ \u7248\u672C</p><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> useForm <span class="token operator">=</span> Form<span class="token punctuation">.</span>useForm<span class="token punctuation">;</span>

<span class="token function">useForm</span><span class="token punctuation">(</span>modelRef<span class="token punctuation">,</span> ruleRef<span class="token punctuation">,</span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><p>\u53C2\u6570\u8BF4\u660E\uFF1A</p><pre class="language-ts"><code><span class="token comment">/*
 modelRef\`, \`ruleRef\` \u5FC5\u987B\u662F\u54CD\u5E94\u5F0F\u6570\u636E
*/</span>

<span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">useForm</span><span class="token punctuation">(</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">,</span>
  rulesRef<span class="token operator">?</span><span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">,</span>
  options<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    immediate<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    deep<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    validateOnRuleChange<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    debounce<span class="token operator">?</span><span class="token operator">:</span> DebounceSettings<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">;</span>
  rulesRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">;</span>
  initialModel<span class="token operator">:</span> Props<span class="token punctuation">;</span>
  validateInfos<span class="token operator">:</span> validateInfos<span class="token punctuation">;</span>
  <span class="token function-variable function">resetFields</span><span class="token operator">:</span> <span class="token punctuation">(</span>newValues<span class="token operator">?</span><span class="token operator">:</span> Props<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
  validate<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">,</span> option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token function-variable function">validateField</span><span class="token operator">:</span> <span class="token punctuation">(</span>
    name<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    value<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span>
    rules<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">[</span>Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">unknown</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">,</span>
  <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>RuleError<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token function-variable function">mergeValidateInfo</span><span class="token operator">:</span> <span class="token punctuation">(</span>items<span class="token operator">:</span> ValidateInfo <span class="token operator">|</span> ValidateInfo<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> ValidateInfo<span class="token punctuation">;</span>
  <span class="token function-variable function">clearValidate</span><span class="token operator">:</span> <span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>`,30)]))}var ea=G(ta,[["render",oa]]);const pa={pageData:{title:"Form",description:"",frontmatter:{category:"Components",type:"Data Entry",cols:1,title:"Form",cover:"https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg"},headers:[{level:2,title:"When to use",slug:"when-to-use",content:""},{level:2,title:"Form Component",slug:"form-component",content:"You can align the controls of a `form` using the `layout` prop\uFF1A"},{level:2,title:"Form Item Component",slug:"form-item-component",content:"A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using `<a-form-item />`."},{level:2,title:"API",slug:"api",content:"Form"},{level:3,title:"Form",slug:"form",content:""},{level:3,title:"Events",slug:"events",content:""},{level:3,title:"Methods",slug:"methods",content:""},{level:3,title:"Form.Item",slug:"form-item",content:""},{level:3,title:"Validation Rules",slug:"validation-rules",content:""},{level:3,title:"useForm (v2.2)",slug:"useform-v2-2",content:"`useForm` is a method that can run independently of the Form component. It uses the Vue response mechanism to monitor and verify data, and returns the verification result. You can bind the verification result to any component, `Form. Item` only displays the results."}],relativePath:"src/docs/form/index.en-US.md",content:`
High performance Form component with data scope management. Including data collection, verification, and styles.

## When to use

- When you need to create an instance or collect information.
- When you need to validate fields in certain rules.

## Form Component

You can align the controls of a \`form\` using the \`layout\` prop\uFF1A

- \`horizontal\`\uFF1Ato horizontally align the \`label\`s and controls of the fields. (Default)
- \`vertical\`\uFF1Ato vertically align the \`label\`s and controls of the fields.
- \`inline\`\uFF1Ato render form fields in one line.

## Form Item Component

A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using \`&lt;a-form-item /&gt;\`.


## API

### Form

| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| model | data of form component | object |  |  |
| rules | validation rules of form | object |  |  |
| hideRequiredMark | Hide required mark of all form items | Boolean | false |  |
| layout | Define form layout | &#39;horizontal&#39;\\|&#39;vertical&#39;\\|&#39;inline&#39; | &#39;horizontal&#39; |  |
| labelAlign | text align of label of all items | &#39;left&#39; \\| &#39;right&#39; | &#39;right&#39; |  |
| labelCol | The layout of label. You can set \`span\` \`offset\` to something like \`{span: 3, offset: 12}\` or \`sm: {span: 3, offset: 12}\` same as with \`&lt;Col&gt;\` | [object](/components/grid/#Col) |  |  |
| wrapperCol | The layout for input controls, same as \`labelCol\` | [object](/components/grid/#Col) |  |  |
| colon | change default props colon value of Form.Item (only effective when prop layout is horizontal) | boolean | true |  |
| validateOnRuleChange | whether to trigger validation when the \`rules\` prop is changed | boolean | true |  |
| name | Form name. Will be the prefix of Field \`id\` | string | - | 2.0.0 |
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \\| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| validateTrigger | Config field validate trigger | string \\| string[] | \`change\` | 2.0.0 |

### Events

| Events Name | Description | Arguments | Version |
| --- | --- | --- | --- |
| submit | Defines a function will be called if form data validation is successful. | Function(e:Event) |  |
| validate | triggers after a form item is validated | name of the form item being validated, whether validation is passed and the error message if not |  |
| finish | Trigger after submitting the form and verifying data successfully | function(values) | - | 2.0.0 |
| finishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | 2.0.0 |

### Methods

| Method | Description | Parameters |
| --- | --- | --- |
| validate | Validate fields, it is same as validateFields | (nameList?: [NamePath](#NamePath)[]) =&gt; Promise |  |
| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)[]) =&gt; Promise |  |
| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) =&gt; void |  |
| resetFields | reset all the fields and remove validation result | \u2014 |
| clearValidate | clear validation message for certain fields. The parameter is name or an array of names of the form items whose validation messages will be removed. When omitted, all fields&#39; validation messages will be cleared | Function(props: string \\| array) |

### Form.Item

| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| name | a key of \`model\`. In the use of validate and resetFields method, the attribute is required | string |  | 2.0.0 |
| rules | validation rules of form | object \\| array |  |  |
| autoLink | Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below. | boolean | true |  |
| colon | Used with \`label\`, whether to display \`:\` after label text. | boolean | true |  |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\\|slot |  |  |
| hasFeedback | Used with \`validateStatus\`, this option specifies the validation status icon. Recommended to be used only with \`Input\`. | boolean | false |  |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\\|slot |  |  |
| htmlFor | Set sub label \`htmlFor\`. | string |  |  |
| label | Label text | string\\|slot |  |  |
| labelCol | The layout of label. You can set \`span\` \`offset\` to something like \`{span: 3, offset: 12}\` or \`sm: {span: 3, offset: 12}\` same as with \`&lt;Col&gt;\` | [object](/components/grid/#Col) |  |  |
| labelAlign | text align of label | &#39;left&#39; \\| &#39;right&#39; | &#39;right&#39; |  |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |  |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: &#39;success&#39; &#39;warning&#39; &#39;error&#39; &#39;validating&#39; | string |  |  |
| wrapperCol | The layout for input controls, same as \`labelCol\` | [object](/components/grid/#Col) |  |  |
| validateFirst | Whether stop validate on first rule of error for this field. | boolean | false |  |
| validateTrigger | When to validate the value of children node | string \\| string[] | \`change\` |  |

#### Note

Form.Item will hijack the only child element and listen to the \`blur\` and\`change\` events to achieve the purpose of automatic verification, so please ensure that the form field is not wrapped by other elements. If there are multiple child elements, only the first child element will be monitored for changes.

If the form field to be monitored does not meet the conditions for automatic monitoring, you can associate the form field as follows:

\`\`\`html
&lt;a-form-item name=&quot;form.name&quot; ref=&quot;name&quot; :autoLink=&quot;false&quot;&gt;
  &lt;a-input v-model:value=&quot;other&quot; /&gt;
  &lt;span&gt;hahha&lt;/span&gt;
  &lt;div&gt;
    &lt;a-input
      v-model:value=&quot;form.name&quot;
      @blur=&quot;() =&gt; {$refs.name.onFieldBlur()}&quot;
      @change=&quot;() =&gt; {$refs.name.onFieldChange()}&quot;
    /&gt;
  &lt;/div&gt;
&lt;/a-form-item&gt;
\`\`\`

### Validation Rules

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| trigger | When to validate the value of children node. | &#39;blur&#39; \\| &#39;change&#39; \\| \`[&#39;change&#39;, &#39;blur&#39;]\` | - |
| enum | validate a value from a list of possible values | string | - |
| len | validate an exact length of a field | number | - |
| max | validate a max length of a field | number | - |
| message | validation error message | string | - |
| min | validate a min length of a field | number | - |
| pattern | validate from a regular expression | RegExp | - |
| required | indicates whether field is required | boolean | \`false\` |
| transform | transform a value before validation | function(value) =&gt; transformedValue:any | - |
| type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | &#39;string&#39; |
| validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - |
| whitespace | treat required fields that only contain whitespace as errors | boolean | \`false\` |

See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).


### useForm (v2.2)

\`useForm\` is a method that can run independently of the Form component. It uses the Vue response mechanism to monitor and verify data, and returns the verification result. You can bind the verification result to any component, \`Form. Item\` only displays the results.

The following versions need to be provided separately by \`@ant-design-vue/use\` library, it is not recommended to continue to use, you should upgrade to version 2.2+ as soon as possible


\`\`\`ts
import { Form } from &#39;ant-design-vue&#39;;
const useForm = Form.useForm;

useForm(modelRef, ruleRef, [options]);

\`\`\`

\u53C2\u6570\u8BF4\u660E\uFF1A

\`\`\`ts
/*
 modelRef\`, \`ruleRef\` must be responsive data
*/

interface Props {
  [key: string]: any;
}
function useForm(
  modelRef: Props | Ref&lt;Props&gt;,
  rulesRef?: Props | Ref&lt;Props&gt;,
  options?: {
    immediate?: boolean;
    deep?: boolean;
    validateOnRuleChange?: boolean;
    debounce?: DebounceSettings;
  },
): {
  modelRef: Props | Ref&lt;Props&gt;;
  rulesRef: Props | Ref&lt;Props&gt;;
  initialModel: Props;
  validateInfos: validateInfos;
  resetFields: (newValues?: Props) =&gt; void;
  validate: &lt;T = any&gt;(names?: namesType, option?: validateOptions) =&gt; Promise&lt;T&gt;;
  validateField: (
    name?: string,
    value?: any,
    rules?: [Record&lt;string, unknown&gt;],
    option?: validateOptions,
  ) =&gt; Promise&lt;RuleError[]&gt;;
  mergeValidateInfo: (items: ValidateInfo | ValidateInfo[]) =&gt; ValidateInfo;
  clearValidate: (names?: namesType) =&gt; void;
}
\`\`\``,html:`<p>High performance Form component with data scope management. Including data collection, verification, and styles.</p>
<h2 id="when-to-use">When to use</h2>
<ul>
<li>When you need to create an instance or collect information.</li>
<li>When you need to validate fields in certain rules.</li>
</ul>
<h2 id="form-component">Form Component</h2>
<p>You can align the controls of a <code>form</code> using the <code>layout</code> prop\uFF1A</p>
<ul>
<li><code>horizontal</code>\uFF1Ato horizontally align the <code>label</code>s and controls of the fields. (Default)</li>
<li><code>vertical</code>\uFF1Ato vertically align the <code>label</code>s and controls of the fields.</li>
<li><code>inline</code>\uFF1Ato render form fields in one line.</li>
</ul>
<h2 id="form-item-component">Form Item Component</h2>
<p>A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using <code>&lt;a-form-item /&gt;</code>.</p>
<h2 id="api">API</h2>
<h3 id="form">Form</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default Value</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>data of form component</td>
<td>object</td>
<td></td>
<td></td>
</tr>
<tr>
<td>rules</td>
<td>validation rules of form</td>
<td>object</td>
<td></td>
<td></td>
</tr>
<tr>
<td>hideRequiredMark</td>
<td>Hide required mark of all form items</td>
<td>Boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>layout</td>
<td>Define form layout</td>
<td>'horizontal'|'vertical'|'inline'</td>
<td>'horizontal'</td>
<td></td>
</tr>
<tr>
<td>labelAlign</td>
<td>text align of label of all items</td>
<td>'left' | 'right'</td>
<td>'right'</td>
<td></td>
</tr>
<tr>
<td>labelCol</td>
<td>The layout of label. You can set <code>span</code> <code>offset</code> to something like <code>{span: 3, offset: 12}</code> or <code>sm: {span: 3, offset: 12}</code> same as with <code>&lt;Col&gt;</code></td>
<td><a href="/components/grid/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>wrapperCol</td>
<td>The layout for input controls, same as <code>labelCol</code></td>
<td><a href="/components/grid/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>colon</td>
<td>change default props colon value of Form.Item (only effective when prop layout is horizontal)</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>validateOnRuleChange</td>
<td>whether to trigger validation when the <code>rules</code> prop is changed</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>name</td>
<td>Form name. Will be the prefix of Field <code>id</code></td>
<td>string</td>
<td>-</td>
<td>2.0.0</td>
</tr>
<tr>
<td>scrollToFirstError</td>
<td>Auto scroll to first failed field when submit</td>
<td>boolean | <a href="https://github.com/stipsan/scroll-into-view-if-needed/#options" target="_blank" rel="noopener noreferrer">options</a></td>
<td>false</td>
<td>2.0.0</td>
</tr>
<tr>
<td>validateTrigger</td>
<td>Config field validate trigger</td>
<td>string | string[]</td>
<td><code>change</code></td>
<td>2.0.0</td>
</tr>
</tbody>
</table>
<h3 id="events">Events</h3>
<table>
<thead>
<tr>
<th>Events Name</th>
<th>Description</th>
<th>Arguments</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>submit</td>
<td>Defines a function will be called if form data validation is successful.</td>
<td>Function(e:Event)</td>
<td></td>
</tr>
<tr>
<td>validate</td>
<td>triggers after a form item is validated</td>
<td>name of the form item being validated, whether validation is passed and the error message if not</td>
<td></td>
</tr>
<tr>
<td>finish</td>
<td>Trigger after submitting the form and verifying data successfully</td>
<td>function(values)</td>
<td>-</td>
</tr>
<tr>
<td>finishFailed</td>
<td>Trigger after submitting the form and verifying data failed</td>
<td>function({ values, errorFields, outOfDate })</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="methods">Methods</h3>
<table>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>validate</td>
<td>Validate fields, it is same as validateFields</td>
<td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td>
</tr>
<tr>
<td>validateFields</td>
<td>Validate fields</td>
<td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td>
</tr>
<tr>
<td>scrollToField</td>
<td>Scroll to field position</td>
<td>(name: <a href="#NamePath">NamePath</a>, options: [<a href="https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options" target="_blank" rel="noopener noreferrer">ScrollOptions</a>]) =&gt; void</td>
</tr>
<tr>
<td>resetFields</td>
<td>reset all the fields and remove validation result</td>
<td>\u2014</td>
</tr>
<tr>
<td>clearValidate</td>
<td>clear validation message for certain fields. The parameter is name or an array of names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared</td>
<td>Function(props: string | array)</td>
</tr>
</tbody>
</table>
<h3 id="form-item">Form.Item</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default Value</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>a key of <code>model</code>. In the use of validate and resetFields method, the attribute is required</td>
<td>string</td>
<td></td>
<td>2.0.0</td>
</tr>
<tr>
<td>rules</td>
<td>validation rules of form</td>
<td>object | array</td>
<td></td>
<td></td>
</tr>
<tr>
<td>autoLink</td>
<td>Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below.</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>colon</td>
<td>Used with <code>label</code>, whether to display <code>:</code> after label text.</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>extra</td>
<td>The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>hasFeedback</td>
<td>Used with <code>validateStatus</code>, this option specifies the validation status icon. Recommended to be used only with <code>Input</code>.</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>help</td>
<td>The prompt message. If not provided, the prompt message will be generated by the validation rule.</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>htmlFor</td>
<td>Set sub label <code>htmlFor</code>.</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>label</td>
<td>Label text</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>labelCol</td>
<td>The layout of label. You can set <code>span</code> <code>offset</code> to something like <code>{span: 3, offset: 12}</code> or <code>sm: {span: 3, offset: 12}</code> same as with <code>&lt;Col&gt;</code></td>
<td><a href="/components/grid/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>labelAlign</td>
<td>text align of label</td>
<td>'left' | 'right'</td>
<td>'right'</td>
<td></td>
</tr>
<tr>
<td>required</td>
<td>Whether provided or not, it will be generated by the validation rule.</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>validateStatus</td>
<td>The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating'</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>wrapperCol</td>
<td>The layout for input controls, same as <code>labelCol</code></td>
<td><a href="/components/grid/#Col">object</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>validateFirst</td>
<td>Whether stop validate on first rule of error for this field.</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>validateTrigger</td>
<td>When to validate the value of children node</td>
<td>string | string[]</td>
<td><code>change</code></td>
<td></td>
</tr>
</tbody>
</table>
<h4 id="note">Note</h4>
<p>Form.Item will hijack the only child element and listen to the <code>blur</code> and<code>change</code> events to achieve the purpose of automatic verification, so please ensure that the form field is not wrapped by other elements. If there are multiple child elements, only the first child element will be monitored for changes.</p>
<p>If the form field to be monitored does not meet the conditions for automatic monitoring, you can associate the form field as follows:</p>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form.name<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">:autoLink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>other<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>hahha<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span>
      <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form.name<span class="token punctuation">"</span></span>
      <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>() => {$refs.name.onFieldBlur()}<span class="token punctuation">"</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>() => {$refs.name.onFieldChange()}<span class="token punctuation">"</span></span>
    <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="validation-rules">Validation Rules</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>trigger</td>
<td>When to validate the value of children node.</td>
<td>'blur' | 'change' | <code>['change', 'blur']</code></td>
<td>-</td>
</tr>
<tr>
<td>enum</td>
<td>validate a value from a list of possible values</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>len</td>
<td>validate an exact length of a field</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>max</td>
<td>validate a max length of a field</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>message</td>
<td>validation error message</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>min</td>
<td>validate a min length of a field</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>pattern</td>
<td>validate from a regular expression</td>
<td>RegExp</td>
<td>-</td>
</tr>
<tr>
<td>required</td>
<td>indicates whether field is required</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td>transform</td>
<td>transform a value before validation</td>
<td>function(value) =&gt; transformedValue:any</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>built-in validation type, <a href="https://github.com/yiminghe/async-validator#type" target="_blank" rel="noopener noreferrer">available options</a></td>
<td>string</td>
<td>'string'</td>
</tr>
<tr>
<td>validator</td>
<td>custom validate function (Note: <a href="https://github.com/ant-design/ant-design/issues/5155" target="_blank" rel="noopener noreferrer">callback must be called</a>)</td>
<td>function(rule, value, callback)</td>
<td>-</td>
</tr>
<tr>
<td>whitespace</td>
<td>treat required fields that only contain whitespace as errors</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<p>See more advanced usage at <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>.</p>
<h3 id="useform-v2-2">useForm (v2.2)</h3>
<p><code>useForm</code> is a method that can run independently of the Form component. It uses the Vue response mechanism to monitor and verify data, and returns the verification result. You can bind the verification result to any component, <code>Form. Item</code> only displays the results.</p>
<p>The following versions need to be provided separately by <code>@ant-design-vue/use</code> library, it is not recommended to continue to use, you should upgrade to version 2.2+ as soon as possible</p>
<pre class="language-ts" v-pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> useForm <span class="token operator">=</span> Form<span class="token punctuation">.</span>useForm<span class="token punctuation">;</span>

<span class="token function">useForm</span><span class="token punctuation">(</span>modelRef<span class="token punctuation">,</span> ruleRef<span class="token punctuation">,</span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre>
<p>\u53C2\u6570\u8BF4\u660E\uFF1A</p>
<pre class="language-ts" v-pre><code><span class="token comment">/*
 modelRef\`, \`ruleRef\` must be responsive data
*/</span>

<span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">useForm</span><span class="token punctuation">(</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">,</span>
  rulesRef<span class="token operator">?</span><span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">,</span>
  options<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    immediate<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    deep<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    validateOnRuleChange<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    debounce<span class="token operator">?</span><span class="token operator">:</span> DebounceSettings<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">;</span>
  rulesRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">></span><span class="token punctuation">;</span>
  initialModel<span class="token operator">:</span> Props<span class="token punctuation">;</span>
  validateInfos<span class="token operator">:</span> validateInfos<span class="token punctuation">;</span>
  <span class="token function-variable function">resetFields</span><span class="token operator">:</span> <span class="token punctuation">(</span>newValues<span class="token operator">?</span><span class="token operator">:</span> Props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span>
  validate<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">></span><span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">,</span> option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">;</span>
  <span class="token function-variable function">validateField</span><span class="token operator">:</span> <span class="token punctuation">(</span>
    name<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    value<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span>
    rules<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">[</span>Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">unknown</span><span class="token operator">></span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">,</span>
  <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>RuleError<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">;</span>
  <span class="token function-variable function">mergeValidateInfo</span><span class="token operator">:</span> <span class="token punctuation">(</span>items<span class="token operator">:</span> ValidateInfo <span class="token operator">|</span> ValidateInfo<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=></span> ValidateInfo<span class="token punctuation">;</span>
  <span class="token function-variable function">clearValidate</span><span class="token operator">:</span> <span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
`,lastUpdated:1748059052676}},ca={class:"markdown"};function la(s,t,g,i,C,b){return y(),L("article",ca,t[0]||(t[0]=[x(`<p>High performance Form component with data scope management. Including data collection, verification, and styles.</p><h2 id="when-to-use">When to use</h2><ul><li>When you need to create an instance or collect information.</li><li>When you need to validate fields in certain rules.</li></ul><h2 id="form-component">Form Component</h2><p>You can align the controls of a <code>form</code> using the <code>layout</code> prop\uFF1A</p><ul><li><code>horizontal</code>\uFF1Ato horizontally align the <code>label</code>s and controls of the fields. (Default)</li><li><code>vertical</code>\uFF1Ato vertically align the <code>label</code>s and controls of the fields.</li><li><code>inline</code>\uFF1Ato render form fields in one line.</li></ul><h2 id="form-item-component">Form Item Component</h2><p>A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using <code>&lt;a-form-item /&gt;</code>.</p><h2 id="api">API</h2><h3 id="form">Form</h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default Value</th><th>Version</th></tr></thead><tbody><tr><td>model</td><td>data of form component</td><td>object</td><td></td><td></td></tr><tr><td>rules</td><td>validation rules of form</td><td>object</td><td></td><td></td></tr><tr><td>hideRequiredMark</td><td>Hide required mark of all form items</td><td>Boolean</td><td>false</td><td></td></tr><tr><td>layout</td><td>Define form layout</td><td>&#39;horizontal&#39;|&#39;vertical&#39;|&#39;inline&#39;</td><td>&#39;horizontal&#39;</td><td></td></tr><tr><td>labelAlign</td><td>text align of label of all items</td><td>&#39;left&#39; | &#39;right&#39;</td><td>&#39;right&#39;</td><td></td></tr><tr><td>labelCol</td><td>The layout of label. You can set <code>span</code> <code>offset</code> to something like <code>{span: 3, offset: 12}</code> or <code>sm: {span: 3, offset: 12}</code> same as with <code>&lt;Col&gt;</code></td><td><a href="/components/grid/#Col">object</a></td><td></td><td></td></tr><tr><td>wrapperCol</td><td>The layout for input controls, same as <code>labelCol</code></td><td><a href="/components/grid/#Col">object</a></td><td></td><td></td></tr><tr><td>colon</td><td>change default props colon value of Form.Item (only effective when prop layout is horizontal)</td><td>boolean</td><td>true</td><td></td></tr><tr><td>validateOnRuleChange</td><td>whether to trigger validation when the <code>rules</code> prop is changed</td><td>boolean</td><td>true</td><td></td></tr><tr><td>name</td><td>Form name. Will be the prefix of Field <code>id</code></td><td>string</td><td>-</td><td>2.0.0</td></tr><tr><td>scrollToFirstError</td><td>Auto scroll to first failed field when submit</td><td>boolean | <a href="https://github.com/stipsan/scroll-into-view-if-needed/#options" target="_blank" rel="noopener noreferrer">options</a></td><td>false</td><td>2.0.0</td></tr><tr><td>validateTrigger</td><td>Config field validate trigger</td><td>string | string[]</td><td><code>change</code></td><td>2.0.0</td></tr></tbody></table><h3 id="events">Events</h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th><th>Version</th></tr></thead><tbody><tr><td>submit</td><td>Defines a function will be called if form data validation is successful.</td><td>Function(e:Event)</td><td></td></tr><tr><td>validate</td><td>triggers after a form item is validated</td><td>name of the form item being validated, whether validation is passed and the error message if not</td><td></td></tr><tr><td>finish</td><td>Trigger after submitting the form and verifying data successfully</td><td>function(values)</td><td>-</td></tr><tr><td>finishFailed</td><td>Trigger after submitting the form and verifying data failed</td><td>function({ values, errorFields, outOfDate })</td><td>-</td></tr></tbody></table><h3 id="methods">Methods</h3><table><thead><tr><th>Method</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>validate</td><td>Validate fields, it is same as validateFields</td><td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td></tr><tr><td>validateFields</td><td>Validate fields</td><td>(nameList?: <a href="#NamePath">NamePath</a>[]) =&gt; Promise</td></tr><tr><td>scrollToField</td><td>Scroll to field position</td><td>(name: <a href="#NamePath">NamePath</a>, options: [<a href="https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options" target="_blank" rel="noopener noreferrer">ScrollOptions</a>]) =&gt; void</td></tr><tr><td>resetFields</td><td>reset all the fields and remove validation result</td><td>\u2014</td></tr><tr><td>clearValidate</td><td>clear validation message for certain fields. The parameter is name or an array of names of the form items whose validation messages will be removed. When omitted, all fields&#39; validation messages will be cleared</td><td>Function(props: string | array)</td></tr></tbody></table><h3 id="form-item">Form.Item</h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default Value</th><th>Version</th></tr></thead><tbody><tr><td>name</td><td>a key of <code>model</code>. In the use of validate and resetFields method, the attribute is required</td><td>string</td><td></td><td>2.0.0</td></tr><tr><td>rules</td><td>validation rules of form</td><td>object | array</td><td></td><td></td></tr><tr><td>autoLink</td><td>Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below.</td><td>boolean</td><td>true</td><td></td></tr><tr><td>colon</td><td>Used with <code>label</code>, whether to display <code>:</code> after label text.</td><td>boolean</td><td>true</td><td></td></tr><tr><td>extra</td><td>The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.</td><td>string|slot</td><td></td><td></td></tr><tr><td>hasFeedback</td><td>Used with <code>validateStatus</code>, this option specifies the validation status icon. Recommended to be used only with <code>Input</code>.</td><td>boolean</td><td>false</td><td></td></tr><tr><td>help</td><td>The prompt message. If not provided, the prompt message will be generated by the validation rule.</td><td>string|slot</td><td></td><td></td></tr><tr><td>htmlFor</td><td>Set sub label <code>htmlFor</code>.</td><td>string</td><td></td><td></td></tr><tr><td>label</td><td>Label text</td><td>string|slot</td><td></td><td></td></tr><tr><td>labelCol</td><td>The layout of label. You can set <code>span</code> <code>offset</code> to something like <code>{span: 3, offset: 12}</code> or <code>sm: {span: 3, offset: 12}</code> same as with <code>&lt;Col&gt;</code></td><td><a href="/components/grid/#Col">object</a></td><td></td><td></td></tr><tr><td>labelAlign</td><td>text align of label</td><td>&#39;left&#39; | &#39;right&#39;</td><td>&#39;right&#39;</td><td></td></tr><tr><td>required</td><td>Whether provided or not, it will be generated by the validation rule.</td><td>boolean</td><td>false</td><td></td></tr><tr><td>validateStatus</td><td>The validation status. If not provided, it will be generated by validation rule. options: &#39;success&#39; &#39;warning&#39; &#39;error&#39; &#39;validating&#39;</td><td>string</td><td></td><td></td></tr><tr><td>wrapperCol</td><td>The layout for input controls, same as <code>labelCol</code></td><td><a href="/components/grid/#Col">object</a></td><td></td><td></td></tr><tr><td>validateFirst</td><td>Whether stop validate on first rule of error for this field.</td><td>boolean</td><td>false</td><td></td></tr><tr><td>validateTrigger</td><td>When to validate the value of children node</td><td>string | string[]</td><td><code>change</code></td><td></td></tr></tbody></table><h4 id="note">Note</h4><p>Form.Item will hijack the only child element and listen to the <code>blur</code> and<code>change</code> events to achieve the purpose of automatic verification, so please ensure that the form field is not wrapped by other elements. If there are multiple child elements, only the first child element will be monitored for changes.</p><p>If the form field to be monitored does not meet the conditions for automatic monitoring, you can associate the form field as follows:</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:autoLink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>other<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>hahha<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span>
      <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.name<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {$refs.name.onFieldBlur()}<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; {$refs.name.onFieldChange()}<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre><h3 id="validation-rules">Validation Rules</h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default Value</th></tr></thead><tbody><tr><td>trigger</td><td>When to validate the value of children node.</td><td>&#39;blur&#39; | &#39;change&#39; | <code>[&#39;change&#39;, &#39;blur&#39;]</code></td><td>-</td></tr><tr><td>enum</td><td>validate a value from a list of possible values</td><td>string</td><td>-</td></tr><tr><td>len</td><td>validate an exact length of a field</td><td>number</td><td>-</td></tr><tr><td>max</td><td>validate a max length of a field</td><td>number</td><td>-</td></tr><tr><td>message</td><td>validation error message</td><td>string</td><td>-</td></tr><tr><td>min</td><td>validate a min length of a field</td><td>number</td><td>-</td></tr><tr><td>pattern</td><td>validate from a regular expression</td><td>RegExp</td><td>-</td></tr><tr><td>required</td><td>indicates whether field is required</td><td>boolean</td><td><code>false</code></td></tr><tr><td>transform</td><td>transform a value before validation</td><td>function(value) =&gt; transformedValue:any</td><td>-</td></tr><tr><td>type</td><td>built-in validation type, <a href="https://github.com/yiminghe/async-validator#type" target="_blank" rel="noopener noreferrer">available options</a></td><td>string</td><td>&#39;string&#39;</td></tr><tr><td>validator</td><td>custom validate function (Note: <a href="https://github.com/ant-design/ant-design/issues/5155" target="_blank" rel="noopener noreferrer">callback must be called</a>)</td><td>function(rule, value, callback)</td><td>-</td></tr><tr><td>whitespace</td><td>treat required fields that only contain whitespace as errors</td><td>boolean</td><td><code>false</code></td></tr></tbody></table><p>See more advanced usage at <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>.</p><h3 id="useform-v2-2">useForm (v2.2)</h3><p><code>useForm</code> is a method that can run independently of the Form component. It uses the Vue response mechanism to monitor and verify data, and returns the verification result. You can bind the verification result to any component, <code>Form. Item</code> only displays the results.</p><p>The following versions need to be provided separately by <code>@ant-design-vue/use</code> library, it is not recommended to continue to use, you should upgrade to version 2.2+ as soon as possible</p><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> useForm <span class="token operator">=</span> Form<span class="token punctuation">.</span>useForm<span class="token punctuation">;</span>

<span class="token function">useForm</span><span class="token punctuation">(</span>modelRef<span class="token punctuation">,</span> ruleRef<span class="token punctuation">,</span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><p>\u53C2\u6570\u8BF4\u660E\uFF1A</p><pre class="language-ts"><code><span class="token comment">/*
 modelRef\`, \`ruleRef\` must be responsive data
*/</span>

<span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">useForm</span><span class="token punctuation">(</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">,</span>
  rulesRef<span class="token operator">?</span><span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">,</span>
  options<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    immediate<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    deep<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    validateOnRuleChange<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    debounce<span class="token operator">?</span><span class="token operator">:</span> DebounceSettings<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  modelRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">;</span>
  rulesRef<span class="token operator">:</span> Props <span class="token operator">|</span> Ref<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">;</span>
  initialModel<span class="token operator">:</span> Props<span class="token punctuation">;</span>
  validateInfos<span class="token operator">:</span> validateInfos<span class="token punctuation">;</span>
  <span class="token function-variable function">resetFields</span><span class="token operator">:</span> <span class="token punctuation">(</span>newValues<span class="token operator">?</span><span class="token operator">:</span> Props<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
  validate<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">,</span> option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token function-variable function">validateField</span><span class="token operator">:</span> <span class="token punctuation">(</span>
    name<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    value<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span>
    rules<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">[</span>Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">unknown</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    option<span class="token operator">?</span><span class="token operator">:</span> validateOptions<span class="token punctuation">,</span>
  <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>RuleError<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token function-variable function">mergeValidateInfo</span><span class="token operator">:</span> <span class="token punctuation">(</span>items<span class="token operator">:</span> ValidateInfo <span class="token operator">|</span> ValidateInfo<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> ValidateInfo<span class="token punctuation">;</span>
  <span class="token function-variable function">clearValidate</span><span class="token operator">:</span> <span class="token punctuation">(</span>names<span class="token operator">?</span><span class="token operator">:</span> namesType<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>`,30)]))}var ua=G(pa,[["render",la]]);const ia={US:ua,CN:ea,components:{Basic:bn,CustomValidation:vn,DynamicFormItem:hn,HorizontalLogin:wn,NestedForm:Vn,Layout:Rn,Validation:Hn,UseFormBasic:Kn,UseFormNested:jn,UseFormTrigger:On,UseFormMerge:Mn,LableWidth:aa}};function ka(s,t,g,i,C,b){const u=p("Basic"),c=p("LableWidth"),l=p("HorizontalLogin"),d=p("Layout"),k=p("Validation"),r=p("CustomValidation"),I=p("DynamicFormItem"),m=p("NestedForm"),v=p("UseFormBasic"),A=p("UseFormNested"),f=p("UseFormTrigger"),Y=p("UseFormMerge"),F=p("demo-sort");return y(),W(F,{cols:1},{default:e(()=>[o(u),o(c),o(l),o(d),o(k),o(r),o(I),o(m),o(v),o(A),o(f),o(Y)]),_:1})}var Ia=G(ia,[["render",ka]]);export{Ia as default};