{"id":22616338,"url":"https://github.com/xpepermint/vue-rawmodel","last_synced_at":"2025-04-11T12:23:31.807Z","repository":{"id":143925574,"uuid":"73090867","full_name":"xpepermint/vue-rawmodel","owner":"xpepermint","description":"RawModel.js plugin for Vue.js v2. Form validation has never been easier!","archived":false,"fork":false,"pushed_at":"2023-02-10T02:48:34.000Z","size":1421,"stargazers_count":79,"open_issues_count":6,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-15T04:33:22.689Z","etag":null,"topics":["classes","debounce","form","model","plugin","promise","rawmodel","reactivity","schema","typescript","validation","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/xpepermint.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}},"created_at":"2016-11-07T15:14:32.000Z","updated_at":"2024-09-28T14:33:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"a70d33ed-486c-45ce-bd8a-e22a25a6c3d5","html_url":"https://github.com/xpepermint/vue-rawmodel","commit_stats":null,"previous_names":["xpepermint/vue-contextable"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpepermint%2Fvue-rawmodel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpepermint%2Fvue-rawmodel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpepermint%2Fvue-rawmodel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpepermint%2Fvue-rawmodel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xpepermint","download_url":"https://codeload.github.com/xpepermint/vue-rawmodel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248401368,"owners_count":21097328,"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":["classes","debounce","form","model","plugin","promise","rawmodel","reactivity","schema","typescript","validation","vue"],"created_at":"2024-12-08T19:12:10.634Z","updated_at":"2025-04-11T12:23:31.776Z","avatar_url":"https://github.com/xpepermint.png","language":"TypeScript","funding_links":[],"categories":["UI实用程序","Components \u0026 Libraries","UI Utilities [🔝](#readme)","UI Utilities"],"sub_categories":["形成","UI Utilities","Form"],"readme":"[![NPM Version](https://badge.fury.io/js/vue-rawmodel.svg)](https://badge.fury.io/js/vue-rawmodel)\u0026nbsp;[![Dependency Status](https://gemnasium.com/xpepermint/vue-rawmodel.svg)](https://gemnasium.com/xpepermint/vue-rawmodel)\n\n# [vue](https://vuejs.org)-[rawmodel](https://github.com/xpepermint/rawmodeljs)\n\n\u003e RawModel.js plugin for Vue.js v2. Form validation has never been easier!\n\nThis plugin integrates [RawModel.js](https://github.com/xpepermint/rawmodeljs) framework into your [Vue.js](https://vuejs.org) application.\n\n[RawModel.js](https://github.com/xpepermint/rawmodeljs) is a simple framework which provides a strongly-typed JavaScript object with support for validation and error handling. It has a rich API which significantly simplifies **server-side** and **client-side** data validation and manipulation. Because it's an unopinionated framework it flawlessly integrates with popular modules like [vuex](http://vuex.vuejs.org/en/index.html), [apollo-client](http://dev.apollodata.com) and other related libraries.\n\n[RawModel.js](https://github.com/xpepermint/rawmodeljs) together with [Vue.js](https://vuejs.org) represents a web framework on steroids. Thanks to its powerful and flexible model objects, a form validation has never been easier. This plugin brings even more elegant way to do form validation using `RawModel.js` and still leaves you freedom to customize and fine-tune the integration.\n\nMake sure you check [RawModel.js API](https://github.com/xpepermint/rawmodeljs) page for details about the framework.\n\nThis is a light weight open source package for [Vue.js](https://vuejs.org) written with TypeScript. It's actively maintained and ready for production environments. The source code is available on [GitHub](https://github.com/xpepermint/vue-rawmodel) where you can also find our [issue tracker](https://github.com/xpepermint/vue-rawmodel/issues).\n\n## Related Projects\n\n* [RawModel.js](https://github.com/xpepermint/rawmodeljs): Strongly-typed JavaScript object with support for validation and error handling.\n\n## Installation\n\nRun the command below to install the package.\n\n```\n$ npm install --save vue-rawmodel rawmodel\n```\n\nThis package uses promises thus you need to use [Promise polyfill](https://github.com/taylorhakes/promise-polyfill) when promises are not supported.\n\nWhen used with a module system, you must explicitly install `vue-rawmodel` via `Vue.use()`.\n\n```js\nimport Vue from 'vue';\nimport VueRawModel from 'vue-rawmodel';\n\nVue.use(VueRawModel);\n```\n\n## Getting Started\n\nThis package provides a special class called `ReactiveModel` which extends from `Model` class provided by [RawModel.js](https://github.com/xpepermint/rawmodeljs). You don't need to attach the plugin to Vue. ReactiveModel is completely independent thus you can use it directly. Below is an example of a simple reactive model called `User` with a single field `name`.\n\n```js\nimport {ReactiveModel} from 'vue-rawmodel';\n\nclass User extends ReactiveModel {\n  constructor (data = {}) {\n    super(data); // initializing parent class\n\n    this.defineField('name', { // defining class property `name`\n      type: 'String', // setting type casting\n      validate: [ // field validations\n        { // validator recipe\n          validator: 'presence', // validator name\n          message: 'is required' // validator error message\n        }\n      ]\n      // check the API for all available options\n    });\n  }\n}\n```\n\nWe can optionally pass models to the root `Vue` instance as the `models` option. This will populate the `$models` property which is then injected into every child component.\n\n```js\nconst app = new Vue({\n  models: { User }, // [optional] injecting models into child components (later available as this.$models.User)\n  ...\n});\n```\n\n## Form Example\n\nObject validation has been one of the incentives for creating  [RawModel.js](https://github.com/xpepermint/rawmodeljs) framework. This plugin brings even more elegant way to do form validation.\n\n```html\n\u003ctemplate\u003e\n  \u003cform novalidate v-on:submit.prevent=\"submit\"\u003e\n    \u003c!-- input field --\u003e\n    \u003cinput type=\"text\" v-model=\"user.name\" placeholder=\"User name\"/\u003e\n    \u003cspan v-if=\"user.getField('name').hasErrors()\"\u003e\n      {{ user.getField('name').errors | firstMessage }}\n    \u003c/span\u003e\n    \u003c!-- buttons --\u003e\n    \u003cbutton v-bind:disabled=\"user.hasErrors()\"\u003eSubmit\u003c/button\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      user: new this.$models.User({\n        vm: this, // instance of Vue's VM\n        dataKey: 'user', // name of data model key\n        name: 'John Smith' // initializing the `name` field\n      })\n    };\n  },\n  methods: {\n    submit () {\n      // Send data to the remote server\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nUse the `$populate()` method to reactively apply data to your model.\n\n```js\nexport default {\n  ...\n  created () {\n    this.user.$populate({\n      name: 'John Smith'\n    });\n  }\n}\n```\n\nUse Vue watchers to install real-time form validation.\n\n```js\nexport default {\n  ...\n  watch: {\n    user: {\n      handler: (user) =\u003e user.$validate({debounce: 300}), // reactively validate fields and display errors\n      deep: true, // always required\n      immediate: true // set this to validate immediately after the form is created\n    }\n  }\n}\n```\n\nCheck the [RawModel.js API](https://github.com/xpepermint/rawmodeljs#api) page and this [package API section](#api) for details.\n\n## API\n\nThis plugin extends [RawModel.js](https://github.com/xpepermint/rawmodeljs) functionality, which help us write reactive code in Vue. If you don't need reactivity then you can use [RawModel.js](https://github.com/xpepermint/rawmodeljs) directly.\n\n### ReactiveModel\n\n**ReactiveModel({vm, dataKey, parent, ...data})**\n\n\u003e Abstract reactive class which represents a strongly-typed JavaScript object. This class extends from [Model](https://github.com/xpepermint/rawmodeljs#model-class) and adds new reactive capabilities.\n\n| Option | Type | Required | Default | Description\n|--------|------|----------|---------|------------\n| vm | Vue | No | - | Vue VM instance.\n| dataKey | String | No | - | The name of the data key.\n| parent | Model | No | - | Parent model instance.\n| data | Object | No | - | Data for populating model fields.\n\n\n**ReactiveModel.prototype.$applyErrors(errors)**: ReactiveModel\n\n\u003e A reactive alternative of method `applyErrors()` which deeply populates fields with the provided `errors` (useful for loading validation errors received from the server).\n\n| Option | Type | Required | Default | Description\n|--------|------|----------|---------|------------\n| errors | Array | No | [] | An array of errors.\n\n**ReactiveModel.prototype.$clear()**: ReactiveModel\n\n\u003e Reactive alternative of method `clear()` which sets all fileds to `null`.\n\n**ReactiveModel.prototype.$fake()**: ReactiveModel\n\n\u003e Reactive alternative of method `fake()` which resets fields then sets fields to their fake values.\n\n**ReactiveModel.prototype.$forceUpdate ()**: ReactiveModel\n\n\u003e Force the `vm` instance to re-render.\n\n**ReactiveModel.prototype.$handle (error, {quiet, debounce})**: Promise\u003cReactiveModel\u003e\n\n\u003e Reactive alternative of method `handle()` which handles the error and throws an error if the error can not be handled.\n\n| Option | Type | Required | Default | Description\n|--------|------|----------|---------|------------\n| error | Any | Yes | - | Error to be handled.\n| quiet | Boolean | No | true | When set to false, a handled validation error is thrown. This doesn't affect the unhandled errors (they are always thrown).\n| debounce | Boolean | 0 | - | Number of milliseconds to wait before running validations.\n\n**ReactiveModel.prototype.$invalidate ()**: ReactiveModel\n\n\u003e Reactive alternative of method `invalidate()` which removes fields errors.\n\n**ReactiveModel.prototype.isReactive (): Boolean**\n\n\u003e Returns `true` when reactive properties (`vm` and `dataKey`) are set.\n\n**ReactiveModel.prototype.$populate (data)**: ReactiveModel\n\n\u003e Reactive alternative of method `populate()` which applies data to a model.\n\n| Option | Type | Required | Default | Description\n|--------|------|----------|---------|------------\n| data | Object | Yes | - | Data object.\n\n**ReactiveModel.prototype.$rebuild ()**: ReactiveModel\n\n\u003e Rebuilds model's reactivity system.\n\n**ReactiveModel.prototype.$reset ()**: ReactiveModel\n\n\u003e Reactive alternative of method `reset()` which sets each model field to its default value.\n\n**ReactiveModel.prototype.$rollback ()**: ReactiveModel\n\n\u003e Reactive alternative of method `rollback()` which sets each field to its initial value (value before last commit).\n\n**ReactiveModel.prototype.$validate({quiet, debounce})**: Promise(ReactiveModel)\n\n\u003e Reactive alternative of method `validate()` which validates the model fields and throws a validation error if not all fields are valid unless the `quiet` is set to true.\n\n| Option | Type | Required | Default | Description\n|--------|------|----------|---------|------------\n| quiet | Boolean | No | true | When set to `true`, a validation error is thrown.\n| debounce | Boolean | 0 | - | Number of milliseconds to wait before running validations.\n\n### Filters\n\n**firstMessage**\n\n\u003e Extracts the first error message from a list of errors.\n\n## Example\n\nAn example is available in the `./example` folder which you can run with the `npm run example` command. There is also [vue-example](https://github.com/xpepermint/vue-example) app available which you should take a look.\n\n## Tutorials\n\nSee [vue-js-cheatsheet](https://www.gitbook.com/book/xpepermint/vue-js-cheatsheet/) for more.\n\n## License (MIT)\n\n```\nCopyright (c) 2016 Kristijan Sedlak \u003cxpepermint@gmail.com\u003e\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpepermint%2Fvue-rawmodel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxpepermint%2Fvue-rawmodel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpepermint%2Fvue-rawmodel/lists"}