{"id":33376344,"url":"https://github.com/riceball-tw/auto-form-vue","last_synced_at":"2026-05-04T17:35:17.149Z","repository":{"id":325661545,"uuid":"1101393275","full_name":"riceball-tw/auto-form-vue","owner":"riceball-tw","description":null,"archived":false,"fork":false,"pushed_at":"2025-11-22T15:36:00.000Z","size":1083,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-22T17:25:31.713Z","etag":null,"topics":["shadcn","vee-validate","vue","zod"],"latest_commit_sha":null,"homepage":"https://riceball-tw.github.io/auto-form-vue/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/riceball-tw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-21T15:58:04.000Z","updated_at":"2025-11-22T15:35:48.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/riceball-tw/auto-form-vue","commit_stats":null,"previous_names":["riceball-tw/auto-form-vue"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/riceball-tw/auto-form-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riceball-tw%2Fauto-form-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riceball-tw%2Fauto-form-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riceball-tw%2Fauto-form-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riceball-tw%2Fauto-form-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riceball-tw","download_url":"https://codeload.github.com/riceball-tw/auto-form-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riceball-tw%2Fauto-form-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285879574,"owners_count":27247109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-22T02:00:05.934Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["shadcn","vee-validate","vue","zod"],"created_at":"2025-11-23T00:01:22.407Z","updated_at":"2025-11-23T00:02:39.344Z","avatar_url":"https://github.com/riceball-tw.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Auto Form Vue\n\n\u003e Powerful Vue component for building dynamic, multi-step forms with automatic validation, field dependencies, and a [visual form builder](https://riceball-tw.github.io/auto-form-vue/).\n\nThe `AutoForm.vue` component is base on:\n\n- [Vue 3](https://vuejs.org/)\n- [Zod](https://zod.dev/)\n- [Vee-Validate](https://vee-validate.logaretm.com/v4/guide/overview/)\n- [Shadcn Vue](https://www.shadcn-vue.com/)\n\n## Installation\n\nJust copy-paste [components](https://github.com/riceball-tw/auto-form-vue/tree/main/src/components) folder :)\n\n## Quick Start\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { AutoForm } from 'auto-form-vue'\nimport { z } from 'zod'\n\nconst formSchema = {\n  steps: [\n    {\n      title: 'Personal Information',\n      description: 'Tell us about yourself',\n      fields: {\n        name: {\n          label: 'Full Name',\n          id: 'name',\n          as: 'input' as const,\n          rules: z.string().min(2, 'Name must be at least 2 characters'),\n          placeholder: 'Enter your full name'\n        },\n        email: {\n          label: 'Email',\n          id: 'email',\n          as: 'input' as const,\n          rules: z.string().email('Invalid email address'),\n          placeholder: 'Enter your email'\n        }\n      }\n    }\n  ]\n}\n\nconst handleSubmit = (data: any) =\u003e {\n  console.log('Form submitted:', data)\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cAutoForm :schema=\"formSchema\" :on-submit=\"handleSubmit\" /\u003e\n\u003c/template\u003e\n```\n\n## Field Types\n\n- `input` - Text input field\n- `textarea` - Multi-line text input\n- `select` - Dropdown selection\n- `checkbox` - Multiple choice checkboxes\n- `switch` - Boolean toggle\n\n## Advanced Features\n\n### Field Dependencies\n\n```typescript\nconst fieldWithDependency = {\n  label: 'State',\n  id: 'state',\n  as: 'select' as const,\n  rules: z.string(),\n  options: [], // Will be set dynamically\n  dependencies: [\n    {\n      sourceField: 'country',\n      type: 'SETS_OPTIONS',\n      when: (sourceValue: string) =\u003e sourceValue === 'US',\n      options: [\n        { label: 'California', value: 'CA' },\n        { label: 'New York', value: 'NY' }\n      ]\n    }\n  ]\n}\n```\n\n### Multi-step Forms\n\n```typescript\nconst multiStepSchema = {\n  steps: [\n    {\n      title: 'Step 1',\n      description: 'First step',\n      fields: { /* fields */ }\n    },\n    {\n      title: 'Step 2',\n      description: 'Second step',\n      fields: { /* fields */ }\n    }\n  ]\n}\n```\n\n## API Reference\n\n### AutoForm Props\n\n- `schema` - Form schema object defining steps and fields\n- `onSubmit` - Function called when form is submitted with valid data\n- `initialValues` - Optional initial form values\n\n### Field Configuration\n\nEach field in the schema supports:\n\n- `label` - Display label\n- `id` - Unique field identifier\n- `as` - Field type ('input' | 'textarea' | 'select' | 'checkbox' | 'switch')\n- `rules` - Zod validation schema\n- `placeholder` - Input placeholder text\n- `options` - Array of {label, value} for select/checkbox fields\n- `dependencies` - Array of field dependencies\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friceball-tw%2Fauto-form-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friceball-tw%2Fauto-form-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friceball-tw%2Fauto-form-vue/lists"}