Skip to content

Commit 66dd5d4

Browse files
author
Mirek Simek
committed
initial version
0 parents  commit 66dd5d4

14 files changed

+9413
-0
lines changed

‎.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["@babel/preset-flow"],
3+
"plugins": [
4+
["@babel/plugin-proposal-decorators", { "legacy": true }],
5+
["@babel/plugin-proposal-class-properties", {}]
6+
]
7+
}
8+

‎.eslintrc.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
module.exports = {
2+
root: true,
3+
4+
parserOptions: {
5+
parser: 'babel-eslint',
6+
sourceType: 'module'
7+
},
8+
9+
env: {
10+
browser: true,
11+
"cypress/globals": true
12+
},
13+
14+
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
15+
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
16+
extends: [
17+
'plugin:vue/essential',
18+
'airbnb-base'
19+
],
20+
21+
// required to lint *.vue files
22+
plugins: [
23+
'vue',
24+
'cypress'
25+
],
26+
27+
globals: {
28+
'ga': true, // Google Analytics
29+
'cordova': true,
30+
'__statics': true,
31+
"cy": false,
32+
"Cypress": false
33+
},
34+
35+
// add your custom rules here
36+
rules: {
37+
'no-param-reassign': 'off',
38+
'prefer-promise-reject-errors': 'off',
39+
40+
'import/first': 'off',
41+
'import/named': 'error',
42+
'import/namespace': 'error',
43+
'import/default': 'error',
44+
'import/export': 'error',
45+
'import/extensions': 'off',
46+
'import/no-unresolved': 'off',
47+
'import/no-extraneous-dependencies': 'off',
48+
49+
// allow console.log during development only
50+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
51+
// allow debugger during development only
52+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
53+
54+
indent: ['error', 4],
55+
'max-len': ['warn', 140],
56+
'no-underscore-dangle': ['off'],
57+
'class-methods-use-this': ['off'],
58+
'padded-blocks': ['off'],
59+
}
60+
};

‎.flowconfig

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
[ignore]
2+
3+
[include]
4+
5+
[libs]
6+
7+
[lints]
8+
9+
[options]
10+
11+
[strict]

‎.gitignore

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# OS Files
2+
.DS_Store
3+
Thumbs.db
4+
5+
# Dependencies
6+
node_modules/
7+
8+
# Dev/Build Artifacts
9+
/dist/
10+
/tests/e2e/demo/public/browser/dist/
11+
/tests/e2e/videos/
12+
/tests/e2e/screenshots/
13+
/tests/e2e/fixtures/public/packages/
14+
/tests/unit/coverage/
15+
jsconfig.json
16+
17+
# Local Env Files
18+
.env.local
19+
.env.*.local
20+
21+
# Log Files
22+
*.log
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# Unconfigured Editors
28+
.idea
29+
*.suo
30+
*.ntvs*
31+
*.njsproj
32+
*.sln
33+
*.sw*

‎.npmignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.DS_Store
2+
node_modules
3+
src
4+
package-lock.json
5+
publish.sh
6+
yarn-error.log
7+
yarn.lock
8+
.idea
9+
.babelrc
10+
.eslintrc.js
11+
.flowconfig

‎LICENSE.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Copyright 2019 Miroslav Simek ([email protected])
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# vuelidate property decorators
2+
3+
This library provides a thin wrapper of
4+
[vuelidate](https://vuelidate.netlify.com/)
5+
library to simplify its usage with `vue-class-component`
6+
or `vue-property-decorator`.
7+
8+
## Installation
9+
10+
```bash
11+
yarn add vuelidate-property-decorators
12+
```
13+
14+
## Usage
15+
16+
Set up `vuelidate` library as described in (https://vuelidate.netlify.com/#sub-installation).
17+
18+
Then on your component:
19+
20+
### Validating single field
21+
22+
To set per-field validation, use the `@Validate` decorator:
23+
24+
```javascript
25+
26+
import {Validate} from 'vuelidate-property-decorators';
27+
import {required} from 'vuelidate/lib/validators'
28+
29+
@Component({})
30+
export default class AddressForm extends Vue {
31+
32+
@Validate({required})
33+
firstName = '';
34+
35+
@Validate({required})
36+
lastName = '';
37+
38+
}
39+
40+
```
41+
42+
Template (pug in this case) looks the same way as in pure `vuelidate`:
43+
44+
```pug
45+
.form-group
46+
q-input(v-model="$v.firstName.$model")
47+
.error(v-if="!$v.firstName.required") Field is required
48+
49+
.form-group
50+
q-input(v-model="$v.lastName.$model")
51+
.error(v-if="!$v.lastName.required") Field is required
52+
```
53+
54+
### Setting validation for all fields at once
55+
56+
To set the validation for all fields at once, use `@Validations` decorator:
57+
58+
59+
```javascript
60+
61+
import {Validations} from 'vuelidate-property-decorators';
62+
import {required} from 'vuelidate/lib/validators'
63+
64+
@Component({})
65+
export default class AddressForm extends Vue {
66+
67+
firstName = '';
68+
lastName = '';
69+
70+
@Validations()
71+
validations = {
72+
firstName: {required},
73+
lastName: {required}
74+
}
75+
76+
}
77+
78+
```
79+
80+
## Dynamic validations
81+
82+
Both the argument of `@Validate(...)` and the value of `@Validations()`
83+
can be a function. In this case the function is called (reactively)
84+
with `this` set to the component instance.
85+
86+
Example:
87+
88+
```javascript
89+
90+
import {Validate, Validations} from 'vuelidate-property-decorators';
91+
import {required} from 'vuelidate/lib/validators'
92+
93+
@Component({})
94+
export default class AddressForm extends Vue {
95+
96+
firstName = '';
97+
lastName = '';
98+
99+
isRequired = false;
100+
101+
@Validations()
102+
validations() {
103+
if (this.isRequired) {
104+
return {
105+
firstName: {required},
106+
lastName: {required}
107+
}
108+
}
109+
return {}
110+
}
111+
112+
@Validate(() => {
113+
if (this.isRequired) {
114+
return {required}
115+
}
116+
return {}
117+
})
118+
test = '';
119+
}
120+
121+
```

0 commit comments

Comments
 (0)