{"id":22591522,"url":"https://github.com/netsells/vue-form-state","last_synced_at":"2025-03-28T18:25:58.482Z","repository":{"id":42079906,"uuid":"176748628","full_name":"netsells/vue-form-state","owner":"netsells","description":null,"archived":false,"fork":false,"pushed_at":"2022-04-13T13:12:48.000Z","size":4429,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-02T18:51:58.872Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/netsells.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}},"created_at":"2019-03-20T14:12:47.000Z","updated_at":"2021-05-27T14:14:27.000Z","dependencies_parsed_at":"2022-08-12T04:20:32.707Z","dependency_job_id":null,"html_url":"https://github.com/netsells/vue-form-state","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/netsells%2Fvue-form-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netsells%2Fvue-form-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netsells%2Fvue-form-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netsells%2Fvue-form-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netsells","download_url":"https://codeload.github.com/netsells/vue-form-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246078416,"owners_count":20720148,"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":[],"created_at":"2024-12-08T09:12:59.853Z","updated_at":"2025-03-28T18:25:58.456Z","avatar_url":"https://github.com/netsells.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/%40netsells%2Fvue-form-state.svg)](https://badge.fury.io/js/%40netsells%2Fvue-form-state)\n[![Build Status](https://travis-ci.com/netsells/vue-form-state.svg?branch=master)](https://travis-ci.com/netsells/vue-form-state)\n[![codecov](https://codecov.io/gh/netsells/vue-form-state/branch/master/graph/badge.svg)](https://codecov.io/gh/netsells/vue-form-state)\n\n# Vue Form State\n\nHandle asynchronous loading, error and result states based on the result of a\npromise.\n\nCreated and maintained by the [Netsells team](https://netsells.co.uk/)\n\n## Installation\n```\nyarn add @netsells/vue-form-state\n```\n\n```javascript\nimport Vue from 'vue';\nimport VueFormState from '@netsells/vue-form-state';\n\nVue.use(VueFormState);\n```\n\n### Options\n\nYou can pass the following options to change the way it functions\n\n```javascript\nVue.use(VueFormState, {\n    parseError(error) {\n        return error.response.data.message;\n    },\n\n    name: 'handle-form-state',\n});\n```\n\n#### parseError\n\nParses an error for every form (i.e. globally). Output is stored in `error`\n(original error is in `rawError`)\n\n#### parseResult\n\nParses a response for every form (i.e. globally). Output is stored in `result`\n(original response is in `rawResult`)\n\n#### name\n\nChange the name of the component (`form-state` by default)\n\n## Usage\n\nIn your template:\n\n```html\n    \u003cform-state :submit=\"submitForm\"\u003e\n        \u003ctemplate\n            v-slot:default=\"{\n                submit,\n                error,\n                loading,\n                result,\n            }\"\n        \u003e\n            \u003cform @submit.prevent=\"submit\"\u003e\n                \u003c!-- your form --\u003e\n            \u003c/form\u003e\n        \u003c/template\u003e\n    \u003c/form-state\u003e\n```\n\nNote that the `submit` callback is a prop on the `form-state` component. This is\nso it has access to the return value (your promise).\n\nIn your methods:\n\n```javascript\nmethods: {\n    submitForm() {\n        return fetch(url, {\n            method: 'POST',\n            body: JSON.stringify(this.formData),\n        });\n    }\n}\n```\n\nThe result of this promise will be set to `rawResult` in the slot. If it errors,\nthe error will be set to the `rawError` scoped slot. If you have supplied either\na `parseResult` or `parseError` optional functional, the result of these will be\navailable as `result` and `error` respectively.\n\nYou can also get the result or error via an event emitted by `form-state`:\n\n```html\n\u003cform-state\n    :submit=\"submitForm\"\n    @result=\"handleResult\"\n    @error=\"handleError\"\n\u003e\n    \u003c!-- template --\u003e\n\u003c/form-state\u003e\n```\n\n```javascript\nmethods: {\n    handleResult(result, rawResult) {\n        // code\n    },\n\n    handleError(error, rawError) {\n        // code\n    },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetsells%2Fvue-form-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetsells%2Fvue-form-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetsells%2Fvue-form-state/lists"}