{"_id":"@ai-low-form/tdesign-mobile-form","_rev":"2-73e996d3dcd4ca7be96fad77fdd71980","name":"@ai-low-form/tdesign-mobile-form","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@ai-low-form/tdesign-mobile-form","version":"1.0.1","keywords":["vue","vue3","form","mobile","tdesign","component"],"author":"","license":"MIT","_id":"@ai-low-form/tdesign-mobile-form@1.0.1","maintainers":[{"name":"xianxiaobai","email":"2424028327@qq.com"}],"dist":{"shasum":"d087adb83ba2ed7ebced55b4ea716b85e03b56e0","tarball":"https://registry.npmjs.org/@ai-low-form/tdesign-mobile-form/-/tdesign-mobile-form-1.0.1.tgz","fileCount":26,"integrity":"sha512-g6HZxqIXwHmBANwpmitd9GzYjsinPvGJz3U/009Tg6ktIZsoma6f5DFT0juiNAZAq5i1Rm+W7cAlYozrJgwL/g==","signatures":[{"sig":"MEQCIBQvFoxyuSFU/bEbrSVB7+b/4wQkXt5AGU/GiqtyWU7CAiBR7nFE4umqrKuhMIpXwINvb0CD9xduhsXlv/IgZbb7NA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":233537},"main":"./dist/index.js","pnpm":{"overrides":{"vite":"npm:rolldown-vite@7.2.5"}},"type":"module","types":"./src/components/form/index.ts","module":"./dist/index.js","gitHead":"2f6f60d1f99c5d48232286af56a2c72dc08b553e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","test:browser":"vitest --config=vitest.browser.config.ts"},"_npmUser":{"name":"xianxiaobai","email":"2424028327@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"A mobile form component for Vue 3 with TDesign Mobile","directories":{},"_nodeVersion":"24.12.0","dependencies":{"vue":"^3.5.24","tdesign-mobile-vue":"^1.12.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"npm:rolldown-vite@7.2.5","vitest":"^4.0.18","vue-tsc":"^3.1.4","typescript":"~5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1","vitest-browser-vue":"^2.0.2","@vitejs/plugin-vue-jsx":"^5.1.3","@vue/language-plugin-pug":"^3.2.3","@vitest/browser-webdriverio":"^4.0.18"},"_npmOperationalInternal":{"tmp":"tmp/tdesign-mobile-form_1.0.1_1769388931453_0.1881954567422064","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ai-low-form/tdesign-mobile-form","version":"1.0.2","type":"module","description":"A mobile form component for Vue 3 with TDesign Mobile","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/components/form/index.d.ts","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","test:browser":"vitest --config=vitest.browser.config.ts"},"keywords":["vue","vue3","form","mobile","tdesign","component"],"author":"","license":"MIT","repository":{"type":"git","url":""},"dependencies":{"tdesign-mobile-vue":"^1.12.1","vue":"^3.5.24"},"devDependencies":{"@types/node":"^24.10.1","@vitejs/plugin-vue":"^6.0.1","@vitejs/plugin-vue-jsx":"^5.1.3","@vitest/browser-webdriverio":"^4.0.18","@vue/language-plugin-pug":"^3.2.3","@vue/tsconfig":"^0.8.1","typescript":"~5.9.3","vite":"npm:rolldown-vite@7.2.5","vite-plugin-dts":"^4.5.4","vitest":"^4.0.18","vitest-browser-vue":"^2.0.2","vue-tsc":"^3.1.4"},"pnpm":{"overrides":{"vite":"npm:rolldown-vite@7.2.5"}},"publishConfig":{"access":"public"},"gitHead":"2f6f60d1f99c5d48232286af56a2c72dc08b553e","_id":"@ai-low-form/tdesign-mobile-form@1.0.2","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-E+DCw8Hhcv5sEexer6r9JnR6yAHj99niEOHYFvxHGmjYV7/zYMkSoFWUP4N8o1A4KFB0VsKS4O1gAeg7lJwlVA==","shasum":"7931280347d36a40a5c94dcff7ca56976b9813e3","tarball":"https://registry.npmjs.org/@ai-low-form/tdesign-mobile-form/-/tdesign-mobile-form-1.0.2.tgz","fileCount":39,"unpackedSize":180484,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHw7eXm2oEzUHLVMp3JtB6G8To95yDpeIjuNO6+G6hwUAiEAq4gHKEr2FEaQD79i3dvvTjBQrZJQAM9UX6Y7UsKyD08="}]},"_npmUser":{"name":"xianxiaobai","email":"2424028327@qq.com"},"directories":{},"maintainers":[{"name":"xianxiaobai","email":"2424028327@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tdesign-mobile-form_1.0.2_1769390593380_0.24391559852303346"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-26T00:55:31.346Z","modified":"2026-01-26T01:23:13.669Z","1.0.1":"2026-01-26T00:55:31.605Z","1.0.2":"2026-01-26T01:23:13.534Z"},"license":"MIT","keywords":["vue","vue3","form","mobile","tdesign","component"],"repository":{"type":"git","url":""},"description":"A mobile form component for Vue 3 with TDesign Mobile","maintainers":[{"name":"xianxiaobai","email":"2424028327@qq.com"}],"readme":"# @ai-low-form/tdesign-mobile-form\n\n基于 Vue 3 + TDesign Mobile 的移动端配置化表单组件，通过 JSON 配置即可快速生成复杂的表单。\n\n## ✨ 特性\n\n- 🚀 **配置化驱动**：通过 JSON 配置快速生成表单\n- 📱 **移动端优化**：基于 TDesign Mobile Vue 组件\n- 🎨 **动态布局**：支持动态设置标签对齐方式\n- ✅ **内置验证**：支持必填、正则、自定义验证规则\n- 🔄 **数据转换**：支持表单数据的双向转换\n- 🎯 **TypeScript**：完整的类型定义\n- 🔌 **高度可扩展**：支持自定义组件和万能插槽\n\n## 📦 安装\n\n```bash\n# 使用 npm\nnpm install @ai-low-form/tdesign-mobile-form\n\n# 使用 pnpm\npnpm add @ai-low-form/tdesign-mobile-form\n\n# 使用 yarn\nyarn add @ai-low-form/tdesign-mobile-form\n```\n\n## 🚀 快速开始\n\n### 1. 全局注册 TDesign 组件\n\n```typescript\n// main.ts\nimport { createApp } from 'vue';\nimport TDesign from 'tdesign-mobile-vue';\nimport 'tdesign-mobile-vue/es/style/index.css';\n\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(TDesign);\napp.mount('#app');\n```\n\n### 2. 基础使用\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { MobileForm } from '@ai-low-form/tdesign-mobile-form';\nimport type { MobileFormRef, MobileFormConfig } from '@ai-low-form/tdesign-mobile-form';\n\n// 表单引用\nconst formRef = ref<MobileFormRef>();\n\n// 表单配置\nconst formConfig: MobileFormConfig = {\n  // 表单项配置\n  items: [\n    {\n      label: '用户名',\n      prop: 'username',\n      required: true,\n    },\n    {\n      label: '邮箱',\n      prop: 'email',\n      component: {\n        name: 't-input',\n        props: {\n          placeholder: '请输入邮箱',\n          type: 'email',\n        },\n      },\n      required: true,\n      rules: {\n        pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,\n        message: '请输入正确的邮箱格式',\n      },\n    },\n    {\n      label: '性别',\n      prop: 'gender',\n      component: {\n        name: 't-select',\n        options: [\n          { label: '男', value: 'male' },\n          { label: '女', value: 'female' },\n        ],\n      },\n    },\n  ],\n  \n  // 表单属性\n  props: {\n    labelAlign: 'top', // 'left' | 'right' | 'top'\n    labelWidth: 'auto',\n  },\n  \n  // 提交回调\n  onSubmit: async (data) => {\n    console.log('表单数据:', data);\n  },\n};\n\n// 提交表单\nasync function handleSubmit() {\n  try {\n    await formRef.value?.submit();\n    alert('提交成功！');\n  } catch (error) {\n    alert('表单验证失败！');\n  }\n}\n</script>\n\n<template>\n  <MobileForm ref=\"formRef\" :config=\"formConfig\" />\n  <button @click=\"handleSubmit\">提交</button>\n</template>\n```\n\n## 📖 配置说明\n\n### MobileFormConfig\n\n表单的全局配置对象。\n\n```typescript\ninterface MobileFormConfig {\n  // 表单项列表\n  items?: MobileFormItem[];\n  \n  // 初始表单数据\n  form?: Record<string, any>;\n  \n  // 提交回调\n  onSubmit?: (data: Record<string, any>) => void | Promise<void>;\n  \n  // 表单全局属性\n  props?: {\n    labelAlign?: 'left' | 'right' | 'top'; // 标签对齐方式\n    labelWidth?: string; // 标签宽度\n  };\n  \n  // 是否在打开时重置表单\n  isReset?: boolean;\n}\n```\n\n### MobileFormItem\n\n表单项配置。\n\n```typescript\ninterface MobileFormItem {\n  // 字段名（必填）\n  prop: string;\n  \n  // 标签文本\n  label?: string;\n  \n  // 组件类型（向后兼容）\n  type?: 'picker' | 'date' | 'input' | 'switch' | 'rate' | 'stepper' | 'textarea' | 'radio' | 'checkbox' | 'slider' | 'upload';\n  \n  // 自定义组件渲染（推荐）\n  component?: {\n    name: string; // 组件名称（如 't-input', 't-select'）\n    props?: Record<string, any>; // 组件属性\n    options?: Array<{ label: string; value: any }>; // 选择器选项\n  };\n  \n  // 选择器选项（也可以放在外层）\n  options?: Array<{ label: string; value: any }>;\n  \n  // 是否必填\n  required?: boolean;\n  \n  // 验证规则\n  rules?: {\n    pattern?: RegExp; // 正则表达式\n    validator?: (value: any) => boolean | string; // 自定义验证器\n    min?: number; // 最小长度\n    max?: number; // 最大长度\n    message?: string; // 错误消息\n  };\n  \n  // 数据转换钩子\n  hook?: {\n    bind?: HookKey | HookFunction; // 绑定时转换\n    submit?: HookKey | HookFunction; // 提交时转换\n  };\n  \n  // 默认值\n  value?: any;\n  \n  // 是否隐藏\n  hidden?: boolean;\n  \n  // 组件属性\n  props?: Record<string, any>;\n}\n```\n\n## 🎨 支持的组件类型\n\n| 组件名称 | type 值 | 说明 |\n|---------|---------|------|\n| t-input | `input` | 输入框（默认） |\n| t-textarea | `textarea` | 多行文本输入 |\n| t-select | `picker` | 选择器（弹出选择） |\n| t-date-picker | `date` | 日期选择器 |\n| t-switch | `switch` | 开关 |\n| t-rate | `rate` | 评分 |\n| t-stepper | `stepper` | 步进器 |\n| t-radio | `radio` | 单选框组 |\n| t-checkbox | `checkbox` | 复选框组 |\n| t-slider | `slider` | 滑块 |\n| t-upload | `upload` | 上传 |\n\n## 🔧 API 方法\n\n通过 `ref` 可以调用以下方法：\n\n```typescript\nconst formRef = ref<MobileFormRef>();\n\n// 验证表单\nawait formRef.value?.validate(); // Promise<boolean>\n\n// 提交表单（会先验证）\nawait formRef.value?.submit(); // Promise<void>\n\n// 重置表单\nformRef.value?.reset();\n\n// 清空表单\nformRef.value?.clear();\n\n// 获取表单数据\nconst data = formRef.value?.getForm(); // 返回所有数据\nconst value = formRef.value?.getForm('username'); // 获取指定字段\n\n// 设置表单数据\nformRef.value?.setForm('username', 'John');\n\n// 更新选择器选项\nformRef.value?.setOptions('gender', [\n  { label: '男', value: 'male' },\n  { label: '女', value: 'female' },\n]);\n\n// 动态设置表单配置\nformRef.value?.setConfig({\n  labelAlign: 'left',\n  labelWidth: '100px',\n});\n\n// 显示/隐藏加载状态\nformRef.value?.showLoading();\nformRef.value?.hideLoading();\n\n// 设置禁用状态\nformRef.value?.setDisabled(true);\nformRef.value?.setDisabled(false);\n```\n\n## 📝 高级用法\n\n### 1. 动态设置标签对齐\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { MobileForm } from '@ai-low-form/tdesign-mobile-form';\n\nconst formRef = ref<MobileFormRef>();\n\nfunction changeLabelAlign() {\n  formRef.value?.setConfig({ labelAlign: 'left' });\n}\n</script>\n\n<template>\n  <button @click=\"changeLabelAlign\">切换为左对齐</button>\n  <MobileForm ref=\"formRef\" :config=\"formConfig\" />\n</template>\n```\n\n### 2. 数据转换\n\n```typescript\nconst formConfig: MobileFormConfig = {\n  items: [\n    {\n      label: '年龄',\n      prop: 'age',\n      component: { name: 't-input' },\n      // 提交时转换为数字\n      hook: {\n        submit: 'number',\n      },\n    },\n  ],\n};\n```\n\n### 3. 自定义验证\n\n```typescript\nconst formConfig: MobileFormConfig = {\n  items: [\n    {\n      label: '密码',\n      prop: 'password',\n      required: true,\n      rules: {\n        validator: (value) => {\n          if (value.length < 6) {\n            return '密码长度至少6位';\n          }\n          if (!/[A-Z]/.test(value)) {\n            return '密码必须包含大写字母';\n          }\n          return true;\n        },\n      },\n    },\n  ],\n};\n```\n\n### 4. 万能插槽\n\n```vue\n<template>\n  <MobileForm :config=\"formConfig\">\n    <!-- 自定义昵称输入框 -->\n    <template #slot-nickname-input=\"{ scope }\">\n      <t-input\n        v-model=\"scope.nickname\"\n        placeholder=\"请输入昵称\"\n        clearable\n      />\n    </template>\n  </MobileForm>\n</template>\n```\n\n## 🌟 完整示例\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { MobileForm } from '@ai-low-form/tdesign-mobile-form';\nimport type { MobileFormRef, MobileFormConfig } from '@ai-low-form/tdesign-mobile-form';\n\nconst formRef = ref<MobileFormRef>();\n\nconst formConfig: MobileFormConfig = {\n  items: [\n    {\n      label: '姓名',\n      prop: 'name',\n      required: true,\n    },\n    {\n      label: '手机号',\n      prop: 'phone',\n      component: {\n        name: 't-input',\n        props: {\n          type: 'tel',\n          maxlength: 11,\n        },\n      },\n      required: true,\n      rules: {\n        pattern: /^1[3-9]\\d{9}$/,\n        message: '请输入正确的手机号',\n      },\n    },\n    {\n      label: '性别',\n      prop: 'gender',\n      component: {\n        name: 't-select',\n        options: [\n          { label: '男', value: 'male' },\n          { label: '女', value: 'female' },\n        ],\n      },\n    },\n    {\n      label: '生日',\n      prop: 'birthday',\n      component: {\n        name: 't-date-picker',\n      },\n    },\n    {\n      label: '个人简介',\n      prop: 'bio',\n      component: {\n        name: 't-textarea',\n        props: {\n          maxlength: 200,\n          placeholder: '请介绍一下自己',\n        },\n      },\n    },\n  ],\n  props: {\n    labelAlign: 'top',\n  },\n  onSubmit: async (data) => {\n    console.log('提交的数据:', data);\n    // 发送到服务器...\n  },\n};\n\nasync function handleSubmit() {\n  try {\n    await formRef.value?.submit();\n    alert('提交成功！');\n  } catch (error) {\n    console.error('验证失败:', error);\n  }\n}\n</script>\n\n<template>\n  <div class=\"container\">\n    <h1>用户信息</h1>\n    <MobileForm ref=\"formRef\" :config=\"formConfig\" />\n    <button @click=\"handleSubmit\">提交</button>\n  </div>\n</template>\n```\n\n## 📄 License\n\nMIT\n\n## 🤝 贡献\n\n欢迎提交 Issue 和 Pull Request！\n","readmeFilename":"README.md"}