Use scopeEval for show prop to allow more complex expressions

README.md

@@ -141,7 +141,7 @@ The output of `formstate` will be:
 ### Displaying messages
 Display validation errors or success messages with `field-messages`.
 
-The `show` prop supports simple expressions which specifiy when messages should be displayed based on the current state of the field, e.g: `$dirty`, `$dirty && $touched`, `$dirty || $touched`, `$touched || $submitted`
+The `show` prop supports simple expressions which specifiy when messages should be displayed based on the current state of the field, e.g: `$dirty`, `$dirty && $touched`, `$dirty || $touched`, `$touched || $submitted`, `$focused && ($dirty || $submitted)`
 
 ```html
 <field-messages name="name" show="$dirty && $touched">

dist/vue-form.js

@@ -354,25 +354,26 @@ var isPlainObject = function isPlainObject(obj) {
 	// Own properties are enumerated firstly, so to speed up,
 	// if last one is own, then all properties are own.
 	var key;
-	for (key in obj) {/**/}
+	for (key in obj) { /**/ }
 
 	return typeof key === 'undefined' || hasOwn.call(obj, key);
 };
 
 var index = function extend() {
-	var options, name, src, copy, copyIsArray, clone,
-		target = arguments[0],
-		i = 1,
-		length = arguments.length,
-		deep = false;
+	var options, name, src, copy, copyIsArray, clone;
+	var target = arguments[0];
+	var i = 1;
+	var length = arguments.length;
+	var deep = false;
 
 	// Handle a deep copy situation
 	if (typeof target === 'boolean') {
 		deep = target;
 		target = arguments[1] || {};
 		// skip the boolean and the target
 		i = 2;
-	} else if ((typeof target !== 'object' && typeof target !== 'function') || target == null) {
+	}
+	if (target == null || (typeof target !== 'object' && typeof target !== 'function')) {
 		target = {};
 	}
 
@@ -580,6 +581,41 @@ var vueForm = {
   }
 };
 
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+
+
+
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var scope_eval = createCommonjsModule(function (module) {
+// Generated by CoffeeScript 1.10.0
+(function() {
+  var hasProp = {}.hasOwnProperty,
+    slice = [].slice;
+
+  module.exports = function(source, scope) {
+    var key, keys, value, values;
+    keys = [];
+    values = [];
+    for (key in scope) {
+      if (!hasProp.call(scope, key)) continue;
+      value = scope[key];
+      if (key === 'this') {
+        continue;
+      }
+      keys.push(key);
+      values.push(value);
+    }
+    return Function.apply(null, slice.call(keys).concat(["return eval(" + (JSON.stringify(source)) + ")"])).apply(scope["this"], values);
+  };
+
+}).call(commonjsGlobal);
+});
+
 function findLabel(nodes) {
   if (!nodes) {
     return;
@@ -664,22 +700,7 @@ var messages = {
         return true;
       }
 
-      var compare = function compare(v) {
-        return field[v.trim()];
-      };
-
-      if (show.indexOf('&&') > -1) {
-        // and logic - every
-        var split = show.split('&&');
-        return split.every(compare);
-      } else if (show.indexOf('||') > -1) {
-        // or logic - some
-        var _split = show.split('||');
-        return _split.some(compare);
-      } else {
-        // single
-        return field[show];
-      }
+      return scope_eval(show, field);
     }
   }
 };

example/bootstrap.html

@@ -27,7 +27,7 @@
         <label>Name</label>
         <input type="text" name="name" class="form-control" required v-model.lazy="model.name">
 
-        <field-messages name="name" show="$touched || $submitted" class="form-control-feedback">
+        <field-messages name="name" show="$focused && ($dirty || $submitted)" class="form-control-feedback">
           <div>Success!</div>
           <div slot="required">Name is a required field</div>
         </field-messages>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-form",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "Form validation for Vue.js",
   "main": "dist/vue-form.js",
   "scripts": {
@@ -32,6 +32,7 @@
     "yargs": "^7.0.2"
   },
   "dependencies": {
-    "extend": "^3.0.0"
+    "extend": "3.0.1",
+    "scope-eval": "1.0.0"
   }
 }

src/components/messages.js

@@ -1,4 +1,5 @@
 import { vueFormConfig, vueFormState, vueFormParentForm } from '../providers';
+import scopeEval from 'scope-eval';
 
 function findLabel (nodes) {
   if(!nodes) {
@@ -80,22 +81,7 @@ export default {
         return true;
       }
 
-      const compare = (v) => {
-        return field[v.trim()];
-      };
-
-      if (show.indexOf('&&') > -1) {
-        // and logic - every
-        const split = show.split('&&');
-        return split.every(compare);
-      } else if (show.indexOf('||') > -1) {
-        // or logic - some
-        const split = show.split('||');
-        return split.some(compare);
-      } else {
-        // single
-        return field[show];
-      }
+      return scopeEval(show,field);
     }
   }
 };