{"id":21819480,"url":"https://github.com/blocka/vue-simpleform","last_synced_at":"2025-04-14T02:29:31.985Z","repository":{"id":52106079,"uuid":"107038572","full_name":"blocka/vue-simpleform","owner":"blocka","description":"Form library for vue. Inspired by Formik for react.","archived":false,"fork":false,"pushed_at":"2024-04-15T20:10:54.000Z","size":911,"stargazers_count":38,"open_issues_count":18,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T02:29:26.297Z","etag":null,"topics":["forms","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blocka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-15T18:36:17.000Z","updated_at":"2024-10-20T09:26:53.000Z","dependencies_parsed_at":"2023-01-24T18:04:45.876Z","dependency_job_id":null,"html_url":"https://github.com/blocka/vue-simpleform","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocka%2Fvue-simpleform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocka%2Fvue-simpleform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocka%2Fvue-simpleform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blocka%2Fvue-simpleform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blocka","download_url":"https://codeload.github.com/blocka/vue-simpleform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248810806,"owners_count":21165187,"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","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":["forms","vue"],"created_at":"2024-11-27T16:19:24.577Z","updated_at":"2025-04-14T02:29:31.945Z","avatar_url":"https://github.com/blocka.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-simpleform\n\nA form library for vue, inspired by Formik for react\n## Is it really simple?\n\nI think it is, but really I couldn't think of a better name\n\n## Basic Usage\n\n```html\n\u003ctemplate\u003e\n\u003cSimpleForm :value=\"initialValues\" :validate=\"validate\" @submit=\"handleSubmit\"\u003e\n    \u003ctemplate scope=\"{values, errors, touched, input, blur, setValue, setTouched, handleSubmit, submitted, submitting}\"\u003e\n    \u003cform\u003e\n        \u003cinput type=\"email\" v-on=\"{input, blur}\" name=\"email\" :value=\"values.email\" /\u003e\n        \u003cspan class=\"error\" v-if=\"touched('email') \u0026\u0026 errors('email')\"\u003e{{errors('email')}}\u003c/span\u003e\n        \n        \u003cbutton @click.prevent=\"handleSubmit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n    \u003c/template\u003e\n\u003c/SimpleForm\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    import SimpleForm from 'vue-simpleform'\n    \n    export default {\n        data () {\n            return {\n                initialValues: {\n                    email: null\n                }\n            }\n        },\n        methods: {\n            handleSubmit ({ values, errors, setSubmitting, setSubmitted }) {\n                // if form is valid, errors will be undefined\n            },\n            validate (values) {\n                return {\n                    email: 'Email is invalid'\n                }\n            }\n        },\n        components: { SimpleForm }\n    }\n\u003c/script\u003e\n```\n\nThe main component takes two props: \n\n1. `value`. This is used to set the initial form state, which will be a deep copy of what is passed in. \n2. `validate`. This is a function which is called to validate the form. This happens when any of the fields are updated, or the form is submitted. ~It can return a promise to do asynchronous validation~ as of 1.0.0 it only works synchronously\n\nAnd `$emits` a `submit` event when the form is submitted. The callback for the submit event takes an object with following keys:\n\n1. values\n2. errors\n3. setSubmitting\n4. setSubmitted\n\nIf the form is valid, `errors` will be undefined\n\nThe scoped slot is passed the following props:\n\n1. values. All the form values, but \"flattened\".\n2. errors. A function taking a name of a field, and returning it's error message (if invalid.\n3. touched. A function taking a name of a field, and returning if the field was touched\n4. input. Input and blur are functions ready to be passed in as event handlers. They are only useful on a real form field (eg., and \u003cinput\u003e element. The element needs a `name` attribute as well\n5. blur\n6. setValue. Manually set a field value. Useful for integrating a custom component\n7. setTouched. Ditto, but for setting touched\n8. handleSubmit. A callback that will initiate the submittion process\n9. submitted\n10. submitting\n## Other components\n\nThere are two other components which are useful for encapsulating common patterns, or removing boilerplate. They are available as named exports.\n\n1. `\u003cSimpleFormFieldSet\u003e`. This is used to make a set of fields which are prefixed. It can be used also to set up an array of fields\n ```html\n \u003ctemplate v-for=\"(item, i) of items\"\u003e\n   \u003cSimpleFormFieldSet :name=\"`items[${i}]`\" :value=\"item\"\u003e\n```\n\nIt can be passed a single component, or a scoped slot. The same props passed in from `SimpleForm` will be passed in (as props to the component, or as props of the scoped slot), but will all be namespaced.\n\n2. `\u003cField\u003e`\n This component removes some of the boilerplate in hooking up inputs\n\n```html\n\u003cField type=\"email\" name=\"email\" errorClass=\"error\" /\u003e\n```\n\nWill render an \u003cinput type=\"email\" for the field email. `errorClass` is an optional prop. The default value is error\n\nIt can also take an element or a custom component\n\n```html\n\u003cField name=\"favoriteColor\"\u003e\n   \u003cselect\u003e\n      \u003coption value=\"red\"\u003eRed\u003c/option\u003e\n      \u003coption value=\"yellow\"\u003eYellow\u003c/option\u003e\n      \u003coption value=\"green\"\u003eGreen\u003c/option\u003e\n    \u003c/select\u003e\n\u003c/Field\u003e\n```\n\n```html\n\u003cField name=\"customComponentValue\"\u003e\n  \u003cCustomComponent /\u003e\n\u003c/Field\u003e\n```\nThe custom component will have `value` and `class` (with the erroClass) injected as a props, and `input` and `blur` as listeners. So the custom component has to `$emit` `input` with the new value, and `blur`.\n\n3. `\u003cError\u003e`\n\n```html\n\u003cError name=\"email\" class=\"error-label\" tag=\"span\"\u003e\n```\n\nDisplays an error if the given field is touched and has an error to show.\nBy defaul will use a div, but the `tag` prop can be used to use a different element.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblocka%2Fvue-simpleform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblocka%2Fvue-simpleform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblocka%2Fvue-simpleform/lists"}