compiler & v-on: backport modifier changes

yyx990803 · yyx990803 · commit 4317393bab36 · 2015-10-09T22:48:19.000-04:00
diff --git a/src/directive.js b/src/directive.js
@@ -5,6 +5,8 @@ var textParser = require('./parsers/text')
 var expParser = require('./parsers/expression')
 function noop () {}
 
+var modifierRE = /\.[^\.]+/g
+
 /**
  * A directive links a DOM element with a piece of data,
  * which is the result of evaluating an expression.
@@ -35,6 +37,13 @@ function Directive (name, el, vm, descriptor, def, host, scope, frag, arg, liter
   // copy descriptor props
   this.expression = descriptor.expression
   this.arg = arg || descriptor.arg
+
+  // patch: modifiers
+  if (typeof this.arg === 'string') {
+    this.modifiers = parseModifiers(this.arg)
+    this.arg = this.arg.replace(modifierRE, '')
+  }
+
   this.filters = descriptor.filters
   // private
   this._def = def
@@ -318,4 +327,23 @@ function removeBindAttr (el, name) {
   }
 }
 
+/**
+ * Parse modifiers from directive attribute name.
+ *
+ * @param {String} name
+ * @return {Object}
+ */
+
+function parseModifiers (name) {
+  var res = Object.create(null)
+  var match = name.match(modifierRE)
+  if (match) {
+    var i = match.length
+    while (i--) {
+      res[match[i].slice(1)] = true
+    }
+  }
+  return res
+}
+
 module.exports = Directive
diff --git a/src/directives/on.js b/src/directives/on.js
@@ -1,19 +1,42 @@
 var _ = require('../util')
-var keyFilter = require('../filters').key
 
-// modifiers
-var stopRE = /\.stop\b/
-var preventRE = /\.prevent\b/
+// keyCode aliases
+var keyCodes = {
+  esc: 27,
+  tab: 9,
+  enter: 13,
+  space: 32,
+  'delete': 46,
+  up: 38,
+  left: 37,
+  right: 39,
+  down: 40
+}
+
+function keyFilter (handler, keys) {
+  var codes = keys.map(function (key) {
+    var code = keyCodes[key]
+    if (!code) {
+      code = parseInt(key, 10)
+    }
+    return code
+  })
+  return function keyHandler (e) {
+    if (codes.indexOf(e.keyCode) > -1) {
+      return handler.call(this, e)
+    }
+  }
+}
 
 function stopFilter (handler) {
-  return function (e) {
+  return function stopHandler (e) {
     e.stopPropagation()
     return handler.call(this, e)
   }
 }
 
 function preventFilter (handler) {
-  return function (e) {
+  return function preventHandler (e) {
     e.preventDefault()
     return handler.call(this, e)
   }
@@ -37,29 +60,6 @@ module.exports = {
       }
     }
 
-    var event = this.arg
-
-    // stop modifier
-    if (stopRE.test(event)) {
-      this.stop = true
-      event = event.replace(stopRE, '')
-    }
-
-    // prevent modifier
-    if (preventRE.test(event)) {
-      this.prevent = true
-      event = event.replace(preventRE, '')
-    }
-
-    // key modifier
-    var keyIndex = event.indexOf('.')
-    if (keyIndex > -1) {
-      this.arg = event.slice(0, keyIndex)
-      this.key = event.slice(keyIndex + 1)
-    } else {
-      this.arg = event
-    }
-
     // deal with iframes
     if (
       this.el.tagName === 'IFRAME' &&
@@ -76,22 +76,27 @@ module.exports = {
   update: function (handler) {
     if (typeof handler !== 'function') {
       process.env.NODE_ENV !== 'production' && _.warn(
-        'Directive v-on="' + this.arg + ': ' +
+        'v-on:' + this.arg + '="' +
         this.expression + '" expects a function value, ' +
         'got ' + handler
       )
       return
     }
 
     // apply modifiers
-    if (this.stop) {
+    if (this.modifiers.stop) {
       handler = stopFilter(handler)
     }
-    if (this.prevent) {
+    if (this.modifiers.prevent) {
       handler = preventFilter(handler)
     }
-    if (this.key) {
-      handler = keyFilter(handler, this.key)
+    // key filter
+    var keys = Object.keys(this.modifiers)
+      .filter(function (key) {
+        return key !== 'stop' && key !== 'prevent'
+      })
+    if (keys.length) {
+      handler = keyFilter(handler, keys)
     }
 
     this.reset()
