Package Exports
- vue-types
- vue-types/dist
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-types) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vue-types
Prop type definitions for Vue.js. Compatible with both Vue 1.x and 2.x
Introduction
vue-types is a collection of configurable prop type definitions for Vue.js components, inspired by React.PropTypes.
When to use
While basic prop type definition in Vue is simple and convenient, detailed prop validation can become verbose on complex components.
This is the case for vue-types.
Instead of:
export default {
props: {
id: {
type: Number,
default: 10
},
name: {
type: String,
required: true
},
age: {
type: Number,
validator(value) {
return Number.isInteger(value)
}
},
nationality: String
},
methods: {
// ...
}
};You may write:
import VueTypes from 'vue-types';
export default {
props: {
id: VueTypes.number.def(10),
name: VueTypes.string.isRequired,
age: VueTypes.integer,
// No need for `default` or `required` key, so keep it simple
nationality: String
},
methods: {
// ...
}
}Installation
NPM package
npm install vue-types --save
# or
yarn add vue-typesCDN delivered <script>
add the following script tags before your code
<script src="https://unpkg.com/vue-types"></script>Documentation
Native Types
Most native types come with a default value, a .def() method to reassign the default value for the current prop and a isRequired flag to set the required: true key
const numProp = vueTypes.number
// numProp === { type: Number, default : 0}
const numPropCustom = vueTypes.number.def(10)
// numPropCustom === { type: Number, default : 10}
const numPropRequired = vueTypes.number.isRequired
// numPropCustom === { type: Number, required : true}
const numPropRequiredCustom = vueTypes.number.def(10).isRequired
// numPropRequiredCustom === { type: Number, default: 10, required : true}VueTypes.any
Validates any type of value and has no default value.
VueTypes.array
Validates that a prop is an array primitive.
- Default: an empty array
VueTypes.bool
Validates boolean props.
- default:
true
VueTypes.func
Validates that a prop is a function.
- default: an empty function
VueTypes.number
Validates that a prop is a number.
- default:
0
VueTypes.integer
Validates that a prop is an integer (uses Number.isInteger).
- default:
0
VueTypes.object
VueTypes.objectValidates that a prop is an object.
- default: an empty object
VueTypes.string
VueTypes.stringValidates that a prop is a string.
- default:
''
VueTypes.symbol
VueTypes.symbolValidates that a prop is a Symbol.
- default: none
Native Types Configuration
All native types (with the exception of any) come with a sensible default value. Anyway you may wish to set your custom defaults or disable them.
To do so you can set the vueTypes.sensibleDefaults property:
//use vue-types default (this is the "default" value)
vueTypes.sensibleDefaults = true
//disable all sensible defaults.
//Use .def(...) to set one
vueTypes.sensibleDefaults = false
//assign an object to specify custom defaults
vueTypes.sensibleDefaults = {
string: 'mystringdefault'
//...
}Custom Types
Custom types have not default value, a .def() method to assign a default value for the current prop and a isRequired flag to set the required: true key
const oneOfPropDefault = vueTypes.oneOf([0, 1]).def(1)
// oneOfPropCustom.default === 1
const oneOfPropRequired = vueTypes.oneOf([0, 1]).isRequired
// oneOfPropCustom.required === true
const oneOfPropRequiredCustom = vueTypes.oneOf([0, 1]).def(1).isRequired
// oneOfPropRequiredCustom.default === 1
// oneOfPropRequiredCustom.required === trueVueTypes.instanceOf()
class Person {
// ...
}
export default {
props: {
user: VueTypes.instanceOf(Person)
}
}Validates that a prop is an instance of a JavaScript constructor. This uses JavaScript's instanceof operator.
VueTypes.oneOf()
VueTypes.oneOf(arrayOfValues)Validates that a prop is one of the provided values.
export default {
props: {
genre: VueTypes.oneOf(['action', 'thriller'])
}
}VueTypes.oneOfType()
Validates that a prop is an object that could be one of many types. Accepts both simple and vue-types types.
export default {
props: {
theProp: VueTypes.oneOfType([
String,
VueTypes.integer,
VueTypes.instanceOf(Person)
])
}
}VueTypes.arrayOf()
Validates that a prop is an array of a certain type.
export default {
props: {
theProp: VueTypes.arrayOf(String)
}
}
//accepts: ['my', 'string']
//rejects: ['my', 1]VueTypes.objectOf()
Validates that a prop is an object with values of a certain type.
export default {
props: {
userData: VueTypes.objectOf(String)
}
}
//accepts: userData = {name: 'John', surname: 'Doe'}
//rejects: userData = {name: 'John', surname: 'Doe', age: 30}VueTypes.shape()
Validates that a prop is an object taking on a particular shape. Accepts both simple and vue-types types. You can set shape's types as required but (obviously) you cannot use .def()
export default {
props: {
userData: VueTypes.shape({
name: String,
age: VueTypes.integer,
id: VueTypes.integer.isRequired
})
}
}
//accepts: userData = {name: 'John', age: 30, id: 1}
//rejects: userData = {name: 'John', age: 'wrong data', id: 1}
//rejects: userData = {name: 'John', age: 'wrong data'} --> missing required `id` keyBy default .shape() won't validate objects with properties not defined in the shape. To allow partial matching use the loose flag:
export default {
props: {
userData: VueTypes.shape({
name: String,
id: VueTypes.integer.isRequired
}),
userDataLoose: VueTypes.shape({
name: String,
id: VueTypes.integer.isRequired
}).loose
}
}
//accepts: userData = {name: 'John', id: 1}
//rejects: userData = {name: 'John', age: 30, id: 1}
//accepts: userData2 = {name: 'John', age: 30, id: 1} --> loose matchingLicense
Copyright (c) 2017 Marco Solazzi