Merge branch 'release/1.5.0'

Author: dwightjack

README.md

@@ -18,6 +18,7 @@
     - [Native Types](#native-types)
     - [Native Types Configuration](#native-types-configuration)
     - [Custom Types](#custom-types)
+    - [Extending VueTypes](#extending-vuetypes)
     - [Utilities](#utilities)
 - [License](#license)
 
@@ -252,6 +253,25 @@ VueTypes.sensibleDefaults = {
 }
 ```
 
+Under the hood `VueTypes.sensibleDefaults` is a plain object with just some added _magic_. That let's you play with it like you'd do with every other object.
+
+For example you can remove some of the default values by leveraging [object rest spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) or [lodash.omit](https://lodash.com/docs/4.17.11#omit) like functions.
+
+```js
+// copy every default value but boolean
+
+console.log(VueTypes.bool.default)
+// logs true
+
+const { bool, ...newDefaults } = VueTypes.sensibleDefaults
+
+VueTypes.sensibleDefaults = newDefaults
+// or VueTypes.sensibleDefaults = _.omit(VueTypes.sensibleDefaults, ['bool'])
+
+console.log(VueTypes.bool.default)
+// logs undefined
+```
+
 ### Custom Types
 
 Custom types are a special kind of types useful to describe complex validation requirements. By design each custom type:
@@ -428,6 +448,99 @@ export default {
 }
 ```
 
+### Extending VueTypes
+
+You can extend VueTypes with your own types via `VueTypes.extend({...})`. The method accepts an object with every key supported by [Vue prop validation objects](https://vuejs.org/v2/guide/components-props.html#Prop-Validation) plus the following custom properties:
+
+- `name`: (string, required) The type name. Will be exposed as VueType.<name>
+- `validate`: (boolean, default: `false`) If `true` the type will have a `validate` method like native types.
+- `getter`: (boolean, default: `false`) If `true` will setup the type as an accessor property (like, for example `VueTypes.string`) else will setup the type as a configurable method (like, for example `VueTypes.arrayOf`).
+
+Examples:
+```js
+// as an accessor type
+VueTypes.extend({
+  name: 'negative',
+  getter: true,
+  type: Number,
+  validator: (v) => v < 0
+})
+
+const negativeProp = VueTypes.negative
+
+// as a configurable method
+VueTypes.extend({
+  name: 'negativeFn',
+  type: Number,
+  validator: (v) => v < 0
+})
+
+const negativeProp2 = VueTypes.negativeFn() // <-- we need to call it
+```
+
+Note that if `getter` is set to `false`, arguments passed to the type will be passed to the `validator` method together with the prop value:
+
+```js
+VueTypes.extend({
+  name: 'maxLength',
+  // getter: false, this is the default
+  type: String,
+  validator: (max, v) => v.length <= max
+})
+
+const maxLengthType = VueTypes.maxLength(2)
+
+maxLengthType.validator('ab') // true
+maxLengthType.validator('abcd') // false
+```
+
+#### Typescript
+
+When used in a TypeScript project, types added via `.extend()` might fail type checking. In order to instruct TypeScript about your custom types you can use the following pattern:
+
+```ts
+// propTypes.ts
+
+// import
+// - VueTypes library
+// - validation object interface (VueTypeDef)
+// - the default VueType interface (VueTypesInterface)
+import VueTypes, { VueTypeDef, VueTypesInterface } from 'vue-types'
+
+interface ProjectTypes extends VueTypesInterface {
+  //VueTypeDef accepts the prop expected type as argument
+  maxLength(max: number): VueTypeDef<string>
+}
+
+VueTypes.extend({
+  name: 'maxLength',
+  type: String,
+  validator: (max: number, v: string) => v.length <= max
+})
+
+export default VueTypes as ProjectTypes
+```
+
+Then import the newly created `propTypes.ts` instead of `vue-types`:
+
+```html
+<!-- MyComponent.vue -->
+<template>
+<!-- template here -->
+</template>
+<script lang="ts">
+import Vue from "vue";
+import VueTypes from "./prop-types";
+
+export default Vue.extend({
+  name: "MyComponent",
+  props: {
+    msg: VueTypes.maxLength(2)
+  }
+});
+</script>
+```
+
 ### Utilities
 
 `vue-types` exposes some utility functions on the `.utils` property:

dist/index.js

@@ -11,6 +11,8 @@ var _sensibles = require("./sensibles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var VueTypes = {
   get any() {
     return (0, _utils.toType)('any', {
@@ -72,6 +74,51 @@ var VueTypes = {
     }, true);
   },
 
+  extend: function extend(props) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    var _props = props,
+        name = _props.name,
+        _props$validate = _props.validate,
+        validate = _props$validate === void 0 ? false : _props$validate,
+        _props$getter = _props.getter,
+        getter = _props$getter === void 0 ? false : _props$getter,
+        type = _objectWithoutPropertiesLoose(_props, ["name", "validate", "getter"]);
+
+    var descriptor;
+
+    if (getter) {
+      descriptor = {
+        get: function get() {
+          return (0, _utils.toType)(name, type, validate);
+        },
+        enumerable: true,
+        configurable: false
+      };
+    } else {
+      var validator = type.validator;
+      descriptor = {
+        value: function value() {
+          if (validator) {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+
+            type.validator = validator.bind.apply(validator, [this].concat(args));
+          }
+
+          return (0, _utils.toType)(name, type, validate);
+        },
+        writable: false,
+        enumerable: true,
+        configurable: false
+      };
+    }
+
+    return Object.defineProperty(this, name, descriptor);
+  },
   custom: function custom(validatorFn, warnMsg) {
     if (warnMsg === void 0) {
       warnMsg = 'custom validation failed';

dist/shim.js

@@ -66,5 +66,16 @@ Object.defineProperty(vueTypes, 'shape', {
     });
   }
 });
+
+vueTypes.extend = function (props) {
+  var name = props.name,
+      validate = props.validate,
+      _props$getter = props.getter,
+      getter = _props$getter === void 0 ? false : _props$getter;
+  return createValidator(vueTypes, name, getter, validate && {
+    validate: function validate() {}
+  });
+};
+
 var _default = vueTypes;
 exports.default = _default;

es/index.js

@@ -1,3 +1,5 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import isPlainObject from 'lodash/isPlainObject';
 import { toType, getType, isFunction, validateType, isInteger, isArray, warn } from './utils';
 import { setDefaults } from './sensibles';
@@ -62,6 +64,51 @@ var VueTypes = {
     }, true);
   },
 
+  extend: function extend(props) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    var _props = props,
+        name = _props.name,
+        _props$validate = _props.validate,
+        validate = _props$validate === void 0 ? false : _props$validate,
+        _props$getter = _props.getter,
+        getter = _props$getter === void 0 ? false : _props$getter,
+        type = _objectWithoutPropertiesLoose(_props, ["name", "validate", "getter"]);
+
+    var descriptor;
+
+    if (getter) {
+      descriptor = {
+        get: function get() {
+          return toType(name, type, validate);
+        },
+        enumerable: true,
+        configurable: false
+      };
+    } else {
+      var validator = type.validator;
+      descriptor = {
+        value: function value() {
+          if (validator) {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+
+            type.validator = validator.bind.apply(validator, [this].concat(args));
+          }
+
+          return toType(name, type, validate);
+        },
+        writable: false,
+        enumerable: true,
+        configurable: false
+      };
+    }
+
+    return Object.defineProperty(this, name, descriptor);
+  },
   custom: function custom(validatorFn, warnMsg) {
     if (warnMsg === void 0) {
       warnMsg = 'custom validation failed';

es/shim.js

@@ -61,4 +61,15 @@ Object.defineProperty(vueTypes, 'shape', {
     });
   }
 });
+
+vueTypes.extend = function (props) {
+  var name = props.name,
+      validate = props.validate,
+      _props$getter = props.getter,
+      getter = _props$getter === void 0 ? false : _props$getter;
+  return createValidator(vueTypes, name, getter, validate && {
+    validate: function validate() {}
+  });
+};
+
 export default vueTypes;

examples/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "vue-types": ["../src/index.js"],
+      "vue-types/types": ["../types/vue-types.d.ts"]
+    }
+  }
+}