{"_id":"@cimom/vben-core-form-ui","_rev":"8-ae8c44c4621d800a6897b580a68c0592","name":"@cimom/vben-core-form-ui","dist-tags":{"latest":"5.6.8"},"versions":{"5.5.9":{"name":"@cimom/vben-core-form-ui","version":"5.5.9","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-form-ui@5.5.9","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"f60548a152c47d4e5491bef75b068612a78981c5","tarball":"https://registry.npmjs.org/@cimom/vben-core-form-ui/-/vben-core-form-ui-5.5.9.tgz","fileCount":30,"integrity":"sha512-/cx+p8XdZEn8zdcjAi/oi6orjeomVj0m57lyfXMQhpf9alKzspddmruws+lG0Wlft0nofLTsWPuTnYvCZXODJA==","signatures":[{"sig":"MEQCIAYIzrRXI5X3VgpLNI4hlQaqnievinKvlZUAZGIKoIN2AiAQBDAvdx9YKCYn5ULyYW7jSDRl5rCWaJvnwS+LmlbJ/Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89453},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./dist/index.mjs","development":"./src/index.ts"}},"private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"_npmVersion":"10.5.1","description":"Form UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","zod":"^3.24.3","@vueuse/core":"^13.1.0","vee-validate":"^4.15.0","zod-defaults":"^0.1.3","@vee-validate/zod":"^4.15.0","@cimom/vben-core-icons":"^5.5.9","@cimom/vben-core-shared":"^5.5.9","@cimom/vben-core-typings":"^5.5.9","@cimom/vben-core-shadcn-ui":"^5.5.9","@cimom/vben-core-composables":"^5.5.9"},"publishConfig":{"access":"public","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-form-ui_5.5.9_1748415491791_0.8933904144254767","host":"s3://npm-registry-packages-npm-production"}},"5.5.12":{"name":"@cimom/vben-core-form-ui","version":"5.5.12","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-form-ui@5.5.12","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"8dedb114827e66e4de82a252b3d14667ca2622c0","tarball":"https://registry.npmjs.org/@cimom/vben-core-form-ui/-/vben-core-form-ui-5.5.12.tgz","fileCount":34,"integrity":"sha512-1FI//vaXB1Hm73dCSzWw9YPgiICKyABAZEl8xx1VubAHXdCkxibzOaErP/KFfFZMT/VS3MTs8m4Y8k7W00TUQA==","signatures":[{"sig":"MEUCIGHMRX6oy9VrwWrBePc7sNjrpqAhb/00/AFgLvj9Bp/1AiEArIRiSKwCEam8kO9vsiX1jaHtf08EM+LW+4Q8gueYvHo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89468},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"_npmVersion":"10.5.1","description":"Form UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","zod":"^3.24.3","@vueuse/core":"^13.1.0","vee-validate":"^4.15.0","zod-defaults":"^0.1.3","@vee-validate/zod":"^4.15.0","@cimom/vben-core-icons":"^5.5.12","@cimom/vben-core-shared":"^5.5.15","@cimom/vben-core-typings":"^5.5.12","@cimom/vben-core-shadcn-ui":"^5.5.13","@cimom/vben-core-composables":"^5.5.12"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-form-ui_5.5.12_1749025816680_0.5758572881861095","host":"s3://npm-registry-packages-npm-production"}},"5.6.0":{"name":"@cimom/vben-core-form-ui","version":"5.6.0","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-form-ui@5.6.0","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"b7f62bafa99c078ab9f1b1ec8ec64a9dbc4769bd","tarball":"https://registry.npmjs.org/@cimom/vben-core-form-ui/-/vben-core-form-ui-5.6.0.tgz","fileCount":29,"integrity":"sha512-8kCU5AIcIjw4LNzb+8/o2IT4DFPhTdi3XbIrBhic5naQMgGuaz5P5a0t4WxqjHeAEs4O2pAjdJd2bAuqwGQd8g==","signatures":[{"sig":"MEUCIE737UgXgzGUT1qSYUZRVs4t5sT7R2AurIxbhL7c1wSCAiEA63jBm0eX+Lwz26u2vLJx7tOf1AXPW7r4Q1aL+9Dykd4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80355},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"_npmVersion":"10.5.1","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","zod":"^3.24.3","@vueuse/core":"^13.1.0","vee-validate":"^4.15.0","zod-defaults":"^0.1.3","@vee-validate/zod":"^4.15.0","@cimom/vben-core-icons":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-core-typings":"^5.6.0","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-form-ui_5.6.0_1749435128825_0.6883138734602081","host":"s3://npm-registry-packages-npm-production"}},"5.6.1":{"name":"@cimom/vben-core-form-ui","version":"5.6.1","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-form-ui@5.6.1","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"0cb5d49463d27e8b92c6123a11828c6e92017f0d","tarball":"https://registry.npmjs.org/@cimom/vben-core-form-ui/-/vben-core-form-ui-5.6.1.tgz","fileCount":30,"integrity":"sha512-zeIPRDqviP3zAYDU0qMowOkd9f1/kR+LTSRVpGzqkSaIWq+VaS7FymwARRwitiYdXsiTdgKlgELCsSMCv50Zog==","signatures":[{"sig":"MEUCIF5MU8+ODeHF9mEElx/gQbpcZdMfcLmNORZDpRJ98evWAiEA8fNOeZmFyA7mdvzuecCS0C8VTT0c2ht4gwHh41HWgt8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89296},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"_npmVersion":"10.5.1","description":"Form UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","zod":"^3.24.3","@vueuse/core":"^13.1.0","vee-validate":"^4.15.0","zod-defaults":"^0.1.3","@vee-validate/zod":"^4.15.0","@cimom/vben-core-icons":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-core-typings":"^5.6.0","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-form-ui_5.6.1_1749440230375_0.8834408681742694","host":"s3://npm-registry-packages-npm-production"}},"5.6.2":{"name":"@cimom/vben-core-form-ui","version":"5.6.2","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-form-ui@5.6.2","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"dd618978e28dceb616ffc0844507e1e3e5c8b282","tarball":"https://registry.npmjs.org/@cimom/vben-core-form-ui/-/vben-core-form-ui-5.6.2.tgz","fileCount":30,"integrity":"sha512-MVj3HvISBiOyxT/Gb7x7ar/MRoUe0Y1JCUO+M7DVX08Fhd+6FYlB6WVI0kIB7ygIvq1YvOOZfqL3pYrwvlvD0g==","signatures":[{"sig":"MEUCIE5mopneseUZhJ4xrwUYr0aNHRzznQ677hj2A436rvUbAiEAo9+kvhXoAysj9BOjBzMSj+o4oqlt7l1waN/VlUJ0eHc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87784},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"_npmVersion":"10.5.1","description":"Form UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","zod":"^3.24.3","@vueuse/core":"^13.1.0","vee-validate":"^4.15.0","zod-defaults":"^0.1.3","@vee-validate/zod":"^4.15.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-form-ui_5.6.2_1749456975902_0.2539244963804468","host":"s3://npm-registry-packages-npm-production"}},"5.6.3":{"name":"@cimom/vben-core-form-ui","version":"5.6.3","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-form-ui@5.6.3","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"058c1df8768a57bd099d2fa0f92c605adf228fed","tarball":"https://registry.npmjs.org/@cimom/vben-core-form-ui/-/vben-core-form-ui-5.6.3.tgz","fileCount":47,"integrity":"sha512-EcIK1D1yRIwgiuEhZwng9iawaw2wh9YJo2jRfXB3X0lbSTxoBKLdm36Zkitxwf1jUfmf0Sh71AHdxr4nfQe4hg==","signatures":[{"sig":"MEYCIQCj6C7wxogkbHfqn2GBvb/ysIZIEv/AKyTJg45tKad8cQIhAKEvIydXIwyM5qqXJpyKT0XHCzh0Lg1y/fCP+OmYbvIi","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155289},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"4658e451554fb07b03bcd870c1694010f7362c31","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"_npmVersion":"10.5.1","description":"Form UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","zod":"^3.24.3","@vueuse/core":"^13.1.0","vee-validate":"^4.15.0","zod-defaults":"^0.1.3","@vee-validate/zod":"^4.15.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-form-ui_5.6.3_1749566871464_0.7838101143638654","host":"s3://npm-registry-packages-npm-production"}},"5.6.8":{"name":"@cimom/vben-core-form-ui","version":"5.6.8","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-form-ui@5.6.8","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"9ec4aaae958e4e4cb165cad9b1f7cb8a512b1b55","tarball":"https://registry.npmjs.org/@cimom/vben-core-form-ui/-/vben-core-form-ui-5.6.8.tgz","fileCount":47,"integrity":"sha512-7K4xLkhR4FYqER2TEVYiPgaLtFYi63lfkbvbdD9rqmTzcg1k+QvgRdeUobPnND9GrZ1nzDn7jt2eWob2odha5Q==","signatures":[{"sig":"MEUCIHNeQrA+I1EORM/n3DeMdrFluKI75TBA/9zAfx/8N7L2AiEAmN2I8VzvOKl4ukwCkrTDCVgEEeYwZtIG0xmYx3xef6Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155339},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"59e2231aeb00db23143220cc2a9229aabfdaceb4","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"_npmVersion":"10.5.1","description":"Form UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","zod":"^3.24.3","@vueuse/core":"^13.1.0","vee-validate":"^4.15.0","zod-defaults":"^0.1.3","@vee-validate/zod":"^4.15.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.5.13"},"_npmOperationalInternal":{"tmp":"tmp/vben-core-form-ui_5.6.8_1749620992522_0.035144654267255326","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-28T06:58:11.694Z","modified":"2026-01-14T01:37:28.696Z","5.5.9":"2025-05-28T06:58:11.991Z","5.5.12":"2025-06-04T08:30:16.866Z","5.6.0":"2025-06-09T02:12:09.085Z","5.6.1":"2025-06-09T03:37:10.558Z","5.6.2":"2025-06-09T08:16:16.078Z","5.6.3":"2025-06-10T14:47:51.669Z","5.6.8":"2025-06-11T05:49:52.683Z"},"bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","homepage":"https://github.com/vbenjs/vue-vben-admin","repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/form-ui"},"description":"Form UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。","maintainers":[{"email":"msj1370380114@gmail.com","name":"moushangjie"},{"email":"57237184@qq.com","name":"hdeqi2005"},{"email":"6983376@qq.com","name":"xxcazzy"}],"readme":"# Form UI 组件\n\nForm UI 组件是一个基于 Vue 3 的高度可定制化表单组件，提供了丰富的表单项和布局选项，支持表单验证、联动和动态渲染等功能。\n\n## 安装\n\n```bash\nnpm install @cimom/vben-core-ui-kit-form-ui\n```\n\n## 基本使用\n\n```vue\n<script setup lang=\"ts\">\nimport { VbenForm } from '@cimom/vben-core-ui-kit-form-ui';\nimport { ref } from 'vue';\nimport { z } from 'zod';\n\nconst formData = ref({\n  username: '',\n  password: '',\n});\n\nconst schema = [\n  {\n    fieldName: 'username',\n    label: '用户名',\n    component: 'VbenInput',\n    componentProps: {\n      placeholder: '请输入用户名',\n    },\n    rules: z.string().min(3, '用户名至少3个字符'),\n    required: true,\n  },\n  {\n    fieldName: 'password',\n    label: '密码',\n    component: 'VbenInputPassword',\n    componentProps: {\n      placeholder: '请输入密码',\n    },\n    rules: z.string().min(6, '密码至少6个字符'),\n    required: true,\n  },\n];\n\nconst handleSubmit = (values) => {\n  console.log('表单提交:', values);\n};\n\nconst handleReset = () => {\n  console.log('表单重置');\n};\n</script>\n\n<template>\n  <VbenForm\n    v-model=\"formData\"\n    :schema=\"schema\"\n    :handle-submit=\"handleSubmit\"\n    :handle-reset=\"handleReset\"\n  />\n</template>\n```\n\n## 组件属性\n\n### VbenForm Props\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| modelValue | `Record<string, any>` | `{}` | 表单数据对象 |\n| schema | `FormSchema[]` | `[]` | 表单配置模式 |\n| layout | `'horizontal' \\| 'vertical'` | `'horizontal'` | 表单布局方式 |\n| collapsed | `boolean` | `false` | 是否折叠表单 |\n| collapsedRows | `number` | `1` | 折叠时显示的行数 |\n| showCollapseButton | `boolean` | `false` | 是否显示折叠按钮 |\n| showDefaultActions | `boolean` | `true` | 是否显示默认的操作按钮 |\n| submitButtonOptions | `ActionButtonOptions` | `{}` | 提交按钮配置 |\n| resetButtonOptions | `ActionButtonOptions` | `{}` | 重置按钮配置 |\n| actionWrapperClass | `string` | `''` | 操作按钮容器的类名 |\n| wrapperClass | `WrapperClassType` | `'grid-cols-1'` | 表单容器的类名 |\n| commonConfig | `FormCommonConfig` | `{}` | 公共配置 |\n| handleSubmit | `HandleSubmitFn` | `undefined` | 提交表单的处理函数 |\n| handleReset | `HandleResetFn` | `undefined` | 重置表单的处理函数 |\n| handleValuesChange | `(values: Record<string, any>, fieldsChanged: string[]) => void` | `undefined` | 表单值变化的处理函数 |\n| submitOnChange | `boolean` | `false` | 值变化时是否自动提交 |\n| submitOnEnter | `boolean` | `false` | 按回车键是否自动提交 |\n\n### FormSchema 配置项\n\n| 属性名 | 类型 | 说明 |\n| --- | --- | --- |\n| fieldName | `string` | 字段名称（必填） |\n| label | `string \\| (() => Component \\| string)` | 标签文本 |\n| component | `Component \\| string` | 组件类型 |\n| componentProps | `MaybeComponentProps \\| ((value, actions) => MaybeComponentProps)` | 组件属性 |\n| defaultValue | `any` | 默认值 |\n| rules | `FormSchemaRuleType` | 验证规则 |\n| required | `boolean` | 是否必填 |\n| help | `string \\| (() => Component \\| string)` | 帮助信息 |\n| description | `string \\| (() => Component \\| string)` | 描述信息 |\n| suffix | `string \\| (() => Component \\| string)` | 后缀内容 |\n| dependencies | `FormItemDependencies` | 依赖配置 |\n| renderComponentContent | `RenderComponentContentType` | 自定义渲染组件内容 |\n\n### FormCommonConfig 公共配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| disabled | `boolean` | `false` | 是否禁用所有表单项 |\n| hideLabel | `boolean` | `false` | 是否隐藏所有表单项的标签 |\n| labelWidth | `number` | - | 标签宽度 |\n| labelClass | `string` | `''` | 标签类名 |\n| controlClass | `string` | `''` | 控件类名 |\n| formItemClass | `string` | `''` | 表单项类名 |\n| colon | `boolean` | `false` | 是否在标签后显示冒号 |\n| hideRequiredMark | `boolean` | `false` | 是否隐藏必填标记 |\n| emptyStateValue | `null \\| undefined` | `undefined` | 空状态值 |\n\n## 表单项联动\n\n可以通过 `dependencies` 属性设置表单项之间的联动关系：\n\n```vue\n<script setup>\nconst schema = [\n  {\n    fieldName: 'type',\n    label: '类型',\n    component: 'VbenSelect',\n    componentProps: {\n      options: [\n        { label: '类型A', value: 'A' },\n        { label: '类型B', value: 'B' },\n      ],\n    },\n  },\n  {\n    fieldName: 'extraInfo',\n    label: '额外信息',\n    component: 'VbenInput',\n    dependencies: {\n      triggerFields: ['type'],\n      show: (values) => values.type === 'B',\n      required: (values) => values.type === 'B',\n    },\n  },\n];\n</script>\n```\n\n## 使用 API 方法\n\n```vue\n<script setup>\nimport { VbenForm, useVbenForm } from '@cimom/vben-core-ui-kit-form-ui';\nimport { ref } from 'vue';\n\nconst formRef = ref(null);\nconst { formApi } = useVbenForm(formRef);\n\n// 使用表单API\nconst handleClick = () => {\n  // 获取表单值\n  const values = formApi.getValues();\n\n  // 设置表单值\n  formApi.setValues({ username: 'admin' });\n\n  // 验证表单\n  formApi.validate().then((result) => {\n    if (result.valid) {\n      console.log('表单验证通过');\n    }\n  });\n\n  // 重置表单\n  formApi.reset();\n};\n</script>\n\n<template>\n  <VbenForm ref=\"formRef\" :schema=\"schema\" />\n  <button @click=\"handleClick\">操作表单</button>\n</template>\n```\n\n## 可用的表单API方法\n\n| 方法名 | 参数 | 返回值 | 说明 |\n| --- | --- | --- | --- |\n| getValues | - | `Record<string, any>` | 获取表单所有值 |\n| getValue | `(name: string)` | `any` | 获取指定字段的值 |\n| setValues | `(values: Record<string, any>)` | `void` | 设置表单多个值 |\n| setValue | `(name: string, value: any)` | `void` | 设置指定字段的值 |\n| validate | `(names?: string[])` | `Promise<{ valid: boolean, errors: Record<string, string> }>` | 验证表单 |\n| reset | `(names?: string[])` | `void` | 重置表单 |\n| setFieldError | `(name: string, error: string)` | `void` | 设置字段错误信息 |\n| clearErrors | `(names?: string[])` | `void` | 清除错误信息 |\n| setFieldTouched | `(name: string, isTouched: boolean)` | `void` | 设置字段触摸状态 |\n| setFieldDisabled | `(name: string, disabled: boolean)` | `void` | 设置字段禁用状态 |\n\n## 示例\n\n### 基础表单示例\n\n```vue\n<template>\n  <div class=\"p-4\">\n    <h2 class=\"mb-4 text-lg font-bold\">基础表单</h2>\n    <VbenForm\n      v-model=\"formData\"\n      :schema=\"schema\"\n      :handle-submit=\"handleSubmit\"\n      :handle-reset=\"handleReset\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VbenForm } from '@cimom/vben-core-ui-kit-form-ui';\nimport { ref } from 'vue';\nimport { z } from 'zod';\n\nconst formData = ref({\n  username: '',\n  password: '',\n  remember: false,\n});\n\nconst schema = [\n  {\n    fieldName: 'username',\n    label: '用户名',\n    component: 'VbenInput',\n    componentProps: {\n      placeholder: '请输入用户名',\n    },\n    rules: z.string().min(3, '用户名至少3个字符'),\n    required: true,\n  },\n  {\n    fieldName: 'password',\n    label: '密码',\n    component: 'VbenInputPassword',\n    componentProps: {\n      placeholder: '请输入密码',\n    },\n    rules: z.string().min(6, '密码至少6个字符'),\n    required: true,\n  },\n  {\n    fieldName: 'remember',\n    label: '记住我',\n    component: 'VbenCheckbox',\n    defaultValue: false,\n  },\n];\n\nconst handleSubmit = (values) => {\n  console.log('表单提交:', values);\n};\n\nconst handleReset = () => {\n  console.log('表单重置');\n};\n</script>\n```\n\n### 表单布局示例\n\n```vue\n<template>\n  <div class=\"p-4\">\n    <h2 class=\"mb-4 text-lg font-bold\">表单布局</h2>\n    <div class=\"mb-4\">\n      <span class=\"mr-4\">布局方式:</span>\n      <label class=\"mr-2\">\n        <input type=\"radio\" v-model=\"layout\" value=\"horizontal\" /> 水平\n      </label>\n      <label>\n        <input type=\"radio\" v-model=\"layout\" value=\"vertical\" /> 垂直\n      </label>\n    </div>\n    <VbenForm\n      v-model=\"formData\"\n      :schema=\"schema\"\n      :layout=\"layout\"\n      :wrapperClass=\"wrapperClass\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VbenForm } from '@cimom/vben-core-ui-kit-form-ui';\nimport { ref } from 'vue';\n\nconst layout = ref('horizontal');\nconst wrapperClass = ref('grid-cols-1 md:grid-cols-2');\n\nconst formData = ref({\n  name: '',\n  age: '',\n  address: '',\n  email: '',\n});\n\nconst schema = [\n  {\n    fieldName: 'name',\n    label: '姓名',\n    component: 'VbenInput',\n  },\n  {\n    fieldName: 'age',\n    label: '年龄',\n    component: 'VbenInput',\n  },\n  {\n    fieldName: 'address',\n    label: '地址',\n    component: 'VbenInput',\n    formItemClass: 'md:col-span-2',\n  },\n  {\n    fieldName: 'email',\n    label: '邮箱',\n    component: 'VbenInput',\n    formItemClass: 'md:col-span-2',\n  },\n];\n</script>\n```\n","readmeFilename":"README.md"}