release v2.0.0-alpha.7

Author: kazupon

.gitignore

@@ -3,5 +3,6 @@ coverage
 node_modules
 .DS_Store
 *.log
+*.gz
 *.swp
 *~

CHANGELOG.md

@@ -1,3 +1,31 @@
+<a name="2.0.0-alpha.7"></a>
+# [2.0.0-alpha.7](https://github.com/vuejs/vue-validator/compare/v2.0.0-alpha.6...v2.0.0-alpha.7) (2015-12-10)
+
+
+### Features
+
+* **syntax:** support array syntax on v-validate expression ([bf33bb4](https://github.com/vuejs/vue-validator/commit/bf33bb4))
+
+
+
+<a name="2.0.0-alpha.6"></a>
+# [2.0.0-alpha.6](https://github.com/vuejs/vue-validator/compare/v2.0.0-alpha.6...v2.0.0-alpha.6) (2015-12-07)
+
+
+### Performances
+
+* **bundle**: more compact the vue-validator
+  about 20% smaller build with rollupjs.
+
+  - before
+    - vue-validator.min.js 11701
+    - vue-validator.js 26180
+  - after
+    - vue-validator.min.js 9309
+    - vue-validator.js 20713
+
+
+
 <a name="2.0.0-alpha.5"></a>
 # [2.0.0-alpha.5](https://github.com/vuejs/vue-validator/compare/v2.0.0-alpha.4...v2.0.0-alpha.5) (2015-11-24)
 

README.md

@@ -58,8 +58,8 @@ We can use `validator` element directive and `v-validate` directive. The followi
 <div id="app">
   <validator name="validation1">
     <form novalidate>
-      <input type="text" v-validate:username.required>
-      <input type="text" v-validate:comment.maxlength="256">
+      <input type="text" v-validate:username="['required']">
+      <input type="text" v-validate:comment="{ maxlength: 256 }">
       <div>
         <span v-show="$validation1.username.required">Required your name.</span>
         <span v-show="$validation1.comment.maxlength">Your comment is too long.</span>
@@ -139,47 +139,66 @@ The various top-level properties has been defined in the validation scope, and t
 - `modified`: if modified field exist even **one** in validate fields, return `true`, else `false`.
 - `dirty`: if dirty field exist even **one** in validate fields, return `true`, else `false`.
 - `pristine`: whether **all** fields is pristine, if so, return `true`, else `false`.
-- `errors`: if invalid even one exist, return all field error message wrapped with object, else `undefined`.
+- `messages`: if invalid even one exist, return all field error message wrapped with object, else `undefined`.
 
 
 # Validator syntax
 `v-validate` directive syntax the below:
 
 ```
-    v-validate:field.[validator]+[="primitive literal | object literal | binding"]
+    v-validate:field="array literal | object literal | binding"
 ```
 
 ## Literal
 
-### Primitive
-The below is example that using literal of string value:
+### Array
+The below is example that using array literal:
 
 ```html
 <validator name="validation">
   <form novalidate>
-    Zip: <input type="text" v-validate:zip.pattern="'/^[0-9]{3}-[0-9]{4}$/'"><br />
+    Zip: <input type="text" v-validate:zip="['required']"><br />
     <div>
-      <span v-if="$validation.zip.pattern">Invalid format of your zip code.</span>
+      <span v-if="$validation.zip.required">Required zip code.</span>
     </div>
   </form>
 </validator>
 ```
 
+Like the `required`, if you don't need to specify the rule, you should use it.
+
+
 ### Object
 The below is example that using object literal:
 
 ```html
 <validator name="validation">
   <form novalidate>
-    ID: <input type="text" v-validate:id.minlength.maxlength="{ minlength: 3, maxlength: 16 }"><br />
+    ID: <input type="text" v-validate:id="{ required: true, minlength: 3, maxlength: 16 }"><br />
     <div>
+      <span v-if="$validation.id.required">Required Your ID.</span>
       <span v-if="$validation.id.minlength">Your ID is too short.</span>
       <span v-if="$validation.id.maxlength">Your ID is too long.</span>
     </div>
   </form>
 </validator>
 ```
 
+You can specify the rule value on the object literal. Like the `required`, you can specify the **dummy rule** value on the literal object.
+
+And also, you can specify strict object as the below:
+
+```html
+<validator name="validation">
+  <form novalidate>
+    ID: <input type="text" v-validate:id="{ minlength: { rule: 3 }, maxlength: { rule: 16 } }"><br />
+    <div>
+      <span v-if="$validation.id.minlength">Your ID is too short.</span>
+      <span v-if="$validation.id.maxlength">Your ID is too long.</span>
+    </div>
+  </form>
+```
+
 ## Binding
 The below is example that using binding:
 
@@ -198,7 +217,7 @@ new Vue({
 <div id="app">
   <validator name="validation">
     <form novalidate>
-      ID: <input type="text" v-validate:id.minlength.maxlength="rules"><br />
+      ID: <input type="text" v-validate:id="rules"><br />
       <div>
         <span v-if="$validation.id.minlength">Your ID is too short.</span>
         <span v-if="$validation.id.maxlength">Your ID is too long.</span>
@@ -215,9 +234,9 @@ You can grouping validation results. the below example:
 
 ```html
 <validator name="validation1" :groups="['user', 'password']">
-  username: <input type="text" group="user" v-validate:username.required><br />
-  password: <input type="text" group="password" v-validate:password1.required.minlength="{ minlength: 8 }"/><br />
-  password (confirm): <input type="text" group="password" v-validate:password2.required.minlength="{ minlength: 8 }"/>
+  username: <input type="text" group="user" v-validate:username="['required']"><br />
+  password: <input type="text" group="password" v-validate:password1="{ minlength: 8, required: true }"/><br />
+  password (confirm): <input type="text" group="password" v-validate:password2="{ minlength: 8, required: true }"/>
   <div class="user">
     <span v-if="$validation1.username.required">Required your name.</span>
   </div>
@@ -232,10 +251,10 @@ You can specify error message that can get the validation scope.
 
 ```html
 <validator name="validation1">
-  username: <input type="text" v-validate:username.required="{
+  username: <input type="text" v-validate:username="{
     required: { rule: true, message: 'required you name !!' }
   }"><br />
-  password: <input type="text" v-validate:password.required.minlength="{
+  password: <input type="text" v-validate:password="{
     required: { rule: true, message: 'required you password !!' },
     minlength: { rule: 8, messsage: 'your password short too !!' }
   }"/><br />
@@ -270,7 +289,7 @@ new Vue({
 ```html
 <div id="app">
   <validator name="validation1">
-    comment: <input type="text" @valid="onValid" @invalid="onInvalid" v-validate:comment.required/>
+    comment: <input type="text" @valid="onValid" @invalid="onInvalid" v-validate:comment="[required]"/>
   </validator>
 </div>
 ```
@@ -295,7 +314,7 @@ new Vue({
 ```html
 <div id="app">
   <validator name="validation1">
-    address: <input type="text" v-validate:address.email><br />
+    address: <input type="text" v-validate:address=['email']><br />
     <div>
       <span v-if="$validation1.address.email">invalid your email address format.</span>
     </div>
@@ -308,7 +327,6 @@ new Vue({
 
 # TODO
 - async validation
-- errors properties
 - validate timing customize with options
 - local asset registration (`compontents` asset-like)
 - server-side validation error applying

config/karma.conf.js

@@ -29,7 +29,7 @@ module.exports = function (config) {
       devtool: 'source-map',
       module: {
         noParse: [
-          /node_modules\/sinon\//,
+          /node_modules\/sinon\//
         ],
         loaders: [{
           test: /\.js$/,

config/webpack.e2e.conf.js

@@ -1,17 +1,29 @@
+var webpack = require('webpack')
+
 module.exports = {
-  entry: {
-    app: ['webpack/hot/dev-server', './test/e2e/index.js']
-  },
+  entry: './test/e2e/index.js',
   output: {
     path: './test/e2e',
-    filename: 'index.build.js'
+    filename: 'e2e.js'
   },
   module: {
     loaders: [{
       test: /\.js$/,
-      exclude: /node_modules/,
-      loader: 'babel'
+      exclude: /node_modules|vue\/dist/,
+      loader: 'babel',
+      query: {
+        presets: ['es2015']
+      }
     }]
   },
-  devtool: 'inline-source-map'
+  devtool: 'source-map',
+  devServer: {
+    contentBase: './test/e2e',
+    port: 8080,
+    hot: true,
+    inline: true
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ]
 }

config/webpack.test.conf.js

@@ -10,7 +10,7 @@ module.exports = {
   devtool: 'source-map',
   module: {
     noParse: [
-      /node_modules\/sinon\//,
+      /node_modules\/sinon\//
     ],
     preLoaders: [{
       test: /\.js$/,

dist/vue-validator.common.js

@@ -1,5 +1,5 @@
 /*!
- * vue-validator v2.0.0-alpha.6
+ * vue-validator v2.0.0-alpha.7
  * (c) 2015 kazuya kawaguchi
  * Released under the MIT License.
  */
@@ -334,40 +334,27 @@ var Validation = (function () {
     this.touched = false;
     this.dirty = false;
     this.modified = false;
-    this.validates = this._buildValidates(dir);
+    this.validators = Object.create(null);
   }
 
   babelHelpers.createClass(Validation, [{
-    key: '_buildValidates',
-    value: function _buildValidates(dir) {
-      var arg = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
-
+    key: 'setValidation',
+    value: function setValidation(name, arg, msg, fn) {
       var resolveAsset = exports$1.Vue.util.resolveAsset;
-      var camelize = exports$1.Vue.util.camelize;
 
-      var ret = Object.create(null);
-      var validates = dir.modifiers;
+      var validator = this.validators[name];
+      if (!validator) {
+        validator = this.validators[name] = {};
+        validator.fn = resolveAsset(this.dir.vm.$options, 'validators', name);
+      }
 
-      for (var validate in validates) {
-        var fn = resolveAsset(dir.vm.$options, 'validators', camelize(validate));
-        if (fn) {
-          ret[validate] = { arg: arg, fn: fn };
-        }
+      validator.arg = arg;
+      if (msg) {
+        validator.msg = msg;
       }
 
-      return ret;
-    }
-  }, {
-    key: 'updateValidate',
-    value: function updateValidate(name, arg, msg, fn) {
-      if (this.validates[name]) {
-        this.validates[name].arg = arg;
-        if (msg) {
-          this.validates[name].msg = msg;
-        }
-        if (fn) {
-          this.validates[name].fn = fn;
-        }
+      if (fn) {
+        validator.fn = fn;
       }
     }
   }, {
@@ -399,8 +386,8 @@ var Validation = (function () {
       var messages = Object.create(null);
       var valid = true;
 
-      each(this.validates, function (descriptor, name) {
-        var res = descriptor.fn(_this.el.value, descriptor.arg);
+      each(this.validators, function (descriptor, name) {
+        var res = descriptor.fn.call(_this.dir.vm, _this.el.value, descriptor.arg);
         if (!res) {
           valid = false;
           var msg = descriptor.msg;
@@ -467,26 +454,30 @@ function Validate (Vue) {
 
       if (_.isPlainObject(value)) {
         this.handleObject(value);
-      } else {
-        this.handleSingle(value);
+      } else if (Array.isArray(value)) {
+        this.handleArray(value);
       }
 
       this.validator.validate(this.validation);
     },
-    handleSingle: function handleSingle(value) {
-      var validateKey = Object.keys(this.validation.validates)[0];
-      this.validation.updateValidate(validateKey, value);
+    handleArray: function handleArray(value) {
+      var _this = this;
+
+      each(value, function (val) {
+        _this.validation.setValidation(val);
+      }, this);
     },
     handleObject: function handleObject(value) {
-      var _this = this;
+      var _this2 = this;
 
       each(value, function (val, key) {
         if (_.isPlainObject(val)) {
           if ('rule' in val) {
-            _this.validation.updateValidate(key, val.rule, 'message' in val ? val.message : null);
+            var msg = 'message' in val ? val.message : null;
+            _this2.validation.setValidation(key, val.rule, msg);
           }
         } else {
-          _this.validation.updateValidate(key, val);
+          _this2.validation.setValidation(key, val);
         }
       }, this);
     },
@@ -779,7 +770,7 @@ function plugin(Vue) {
   Validate(Vue);
 }
 
-plugin.version = '2.0.0-alpha.5';
+plugin.version = '2.0.0-alpha.7';
 
 if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(plugin);