filterBy & orderBy first pass

.jshintrc

@@ -10,6 +10,7 @@
  "node": true,
  "laxbreak": true,
  "evil": true,
+ "eqnull": true,
  "globals": {
  "console": true
  }

src/directive.js

@@ -12,7 +12,7 @@ var utils = require('./utils'),
 
  ARG_RE = /^([\w-$ ]+):(.+)$/,
  FILTERS_RE = /\|[^\|]+/g,
- FILTER_TOKEN_RE = /[^\s']+|'[^']+'/g,
+ FILTER_TOKEN_RE = /[^\s']+|'[^']+'|[^\s"]+|"[^"]+"/g,
  NESTING_RE = /^\$(parent|root)\./,
  SINGLE_VAR_RE = /^[\w\.$]+$/
 
@@ -110,9 +110,6 @@ function parseFilter (filter, compiler) {
 
  var tokens = filter.slice(1).match(FILTER_TOKEN_RE)
  if (!tokens) return
- tokens = tokens.map(function (token) {
- return token.replace(/'/g, '').trim()
- })
 
  var name = tokens[0],
  apply = compiler.getOption('filters', name)

src/exp-parser.js

@@ -1,8 +1,9 @@
 var utils = require('./utils'),
- stringSaveRE = /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g,
- stringRestoreRE = /"(\d+)"/g,
- constructorRE = new RegExp('constructor'.split('').join('[\'"+, ]*')),
- unicodeRE = /\\u\d\d\d\d/
+ STR_SAVE_RE = /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g,
+ STR_RESTORE_RE = /"(\d+)"/g,
+ CTOR_RE = new RegExp('constructor'.split('').join('[\'"+, ]*')),
+ UNICODE_RE = /\\u\d\d\d\d/,
+ QUOTE_RE = /"/g
 
 // Variable extraction scooped from https://github.com/RubyLouvre/avalon
 
@@ -94,7 +95,7 @@ function makeGetter (exp, raw) {
  try {
  fn = new Function(exp)
  } catch (e) {
- utils.warn('Invalid expression: ' + raw)
+ utils.warn('Error parsing expression: ' + raw)
  }
  return fn
 }
@@ -108,14 +109,24 @@ function escapeDollar (v) {
  : v
 }
 
+/**
+ * Convert double quotes to single quotes
+ * so they don't mess up the generated function body
+ */
+function escapeQuote (v) {
+ return v.indexOf('"') > -1
+ ? v.replace(QUOTE_RE, '\'')
+ : v
+}
+
 /**
  * Parse and return an anonymous computed property getter function
  * from an arbitrary expression, together with a list of paths to be
  * created as bindings.
  */
 exports.parse = function (exp, compiler, data, filters) {
  // unicode and 'constructor' are not allowed for XSS security.
- if (unicodeRE.test(exp) || constructorRE.test(exp)) {
+ if (UNICODE_RE.test(exp) || CTOR_RE.test(exp)) {
  utils.warn('Unsafe expression: ' + exp)
  return
  }
@@ -138,15 +149,15 @@ exports.parse = function (exp, compiler, data, filters) {
  ")[$\\w\\.]*\\b", 'g'
  ),
  body = (' ' + exp)
- .replace(stringSaveRE, saveStrings)
+ .replace(STR_SAVE_RE, saveStrings)
  .replace(pathRE, replacePath)
- .replace(stringRestoreRE, restoreStrings)
+ .replace(STR_RESTORE_RE, restoreStrings)
 
  // wrap expression with computed filters
  if (filters) {
  filters.forEach(function (filter) {
  var args = filter.args
- ? ',"' + filter.args.join('","') + '"'
+ ? ',"' + filter.args.map(escapeQuote).join('","') + '"'
  : ''
  body =
  'this.$compiler.getOption("filters", "' +

src/filters.js

@@ -1,16 +1,46 @@
+var utils = require('./utils'),
+ get = utils.get,
+ slice = [].slice,
+ QUOTE_RE = /^'.*'$/
+
 var keyCodes = {
- enter : 13,
- tab : 9,
- 'delete' : 46,
- up : 38,
- left : 37,
- right : 39,
- down : 40,
- esc : 27
- },
- slice = [].slice
+ enter : 13,
+ tab : 9,
+ 'delete' : 46,
+ up : 38,
+ left : 37,
+ right : 39,
+ down : 40,
+ esc : 27
+}
+
+/**
+ * String contain helper
+ */
+function contains (val, search) {
+ /* jshint eqeqeq: false */
+ if (utils.typeOf(val) === 'Object') {
+ for (var key in val) {
+ if (contains(val[key], search)) {
+ return true
+ }
+ }
+ } else if (val != null) {
+ return val.toString().toLowerCase().indexOf(search) > -1
+ }
+}
 
-module.exports = {
+/**
+ * Test whether a string is in quotes,
+ * if yes return stripped string
+ */
+function stripQuotes (str) {
+ if (QUOTE_RE.test(str)) {
+ return str.slice(1, -1)
+ }
+}
+
+var filters = module.exports = {
 
  /**
  * 'abc' => 'Abc'
@@ -83,5 +113,54 @@ module.exports = {
  handler.call(this, e)
  }
  }
+ },
+
+ filterBy: function (arr, searchKey, delimiter, dataKey) {
+
+ // get the search string
+ var search = stripQuotes(searchKey) || get(this, searchKey)
+ if (!search) return arr
+ search = search.toLowerCase()
+
+ // get the optional dataKey
+ dataKey = dataKey && (stripQuotes(dataKey) || get(this, dataKey))
+
+ return arr.filter(function (item) {
+ return dataKey
+ ? contains(get(item, dataKey), search)
+ : contains(item, search)
+ })
+
+ },
+
+ orderBy: function (arr, sortKey, reverseKey) {
+
+ var key = stripQuotes(sortKey) || get(this, sortKey)
+ if (!key) return arr
+
+ var order = 1
+ if (reverseKey) {
+ if (reverseKey === '-1') {
+ order = -1
+ } else if (reverseKey.charAt(0) === '!') {
+ reverseKey = reverseKey.slice(1)
+ order = get(this, reverseKey) ? 1 : -1
+ } else {
+ order = get(this, reverseKey) ? -1 : 1
+ }
+ }
+
+ // sort on a copy to avoid mutating original array
+ return arr.slice().sort(function (a, b) {
+ a = a[key]
+ b = b[key]
+ return a === b ? 0 : a > b ? order : -order
+ })
+
  }
-}
+
+}
+
+// mark computed filters
+filters.filterBy.computed = true
+filters.orderBy.computed = true

src/utils.js

@@ -13,6 +13,9 @@ var utils = module.exports = {
  * get a value from an object keypath
  */
  get: function (obj, key) {
+ if (key.indexOf('.') < 0) {
+ return obj[key]
+ }
  var path = key.split('.'),
  d = -1, l = path.length
  while (++d < l && obj !== undefined) {
@@ -25,6 +28,10 @@ var utils = module.exports = {
  * set a value to an object keypath
  */
  set: function (obj, key, val) {
+ if (key.indexOf('.') < 0) {
+ obj[key] = val
+ return
+ }
  var path = key.split('.'),
  d = -1, l = path.length - 1
  while (++d < l) {

test/functional/fixtures/array-filters.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<script src="../../../dist/vue.js"></script>
+
+<div id="test">
+ Sort by
+ <select v-model="sortKey">
+ <option>name</option>
+ <option>phone</option>
+ </select>
+ <br>
+ <input type="checkbox" v-model="reverse"> Reverse
+ <hr></hr>
+ Filter by <input v-model="searchText"> in name only
+ <table id="t1">
+ <tr><th>Name</th><th>Phone</th></tr>
+ <tr v-repeat="friends | filterBy searchText in 'name' | orderBy sortKey reverse">
+ <td>{{name}}</td>
+ <td>{{phone}}</td>
+ </tr>
+ </table>
+ <hr></hr>
+ Filter by input in all fields and reversed
+ <table id="t2">
+ <tr><th>Name</th><th>Phone</th></tr>
+ <tr v-repeat="friends | filterBy searchText | orderBy sortKey !reverse">
+ <td>{{name}}</td>
+ <td>{{phone}}</td>
+ </tr>
+ </table>
+ <hr></hr>
+ Filter by "Julie" in
+ <select v-model="filterKey">
+ <option>name</option>
+ <option>phone</option>
+ </select>
+ <table id="t3">
+ <tr><th>Name</th><th>Phone</th></tr>
+ <tr v-repeat="friends | filterBy 'Julie' in filterKey | orderBy sortKey -1">
+ <td>{{name}}</td>
+ <td>{{phone}}</td>
+ </tr>
+ </table>
+</div>
+
+<script>
+new Vue({
+ el: '#test',
+ data: {
+ searchText: '',
+ filterKey: 'name',
+ sortKey: 'name',
+ reverse: false,
+ friends: [
+ {name:'John', phone:'555-1276', hidden: { id: 'hidden!' } },
+ {name:'Mary', phone:'800-BIG-MARY'},
+ {name:'Mike', phone:'555-4321'},
+ {name:'Adam', phone:'555-5678'},
+ {name:'Julie', phone:'555-8765'},
+ {name:'Juliette', phone:'555-5678'}
+ ]
+ }
+})
+</script>

test/unit/specs/directive.js

@@ -210,7 +210,7 @@ describe('Directive', function () {
  assert.strictEqual(f.name, 'pluralize', 'name')
  assert.strictEqual(f.args.length, 2, 'args length')
  assert.strictEqual(f.args[0], 'item', 'args value 1')
- assert.strictEqual(f.args[1], 'arg with spaces', 'args value 2')
+ assert.strictEqual(f.args[1], '\'arg with spaces\'', 'args value 2')
  })
 
  it('should extract correct filters (multiple filters)', function () {

test/unit/specs/filters.js

@@ -128,6 +128,30 @@ describe('Filters', function () {
 
  })
 
+ describe('filterBy', function () {
+
+ var filter = filters.filterBy
+
+ it('should be computed', function () {
+ assert.ok(filter.computed)
+ })
+
+ // TODO
+
+ })
+
+ describe('orderBy', function () {
+
+ var filter = filters.orderBy
+
+ it('should be computed', function () {
+ assert.ok(filter.computed)
+ })
+
+ // TODO
+
+ })
+
 })
 
 function assertNumberAndFalsy (filter) {