From 5a31047f4e1fc136207cacac9315fee166560d37 Mon Sep 17 00:00:00 2001
From: Kevin Ball <kmball11@gmail.com>
Date: Thu, 4 Oct 2018 14:11:32 -0700
Subject: [PATCH] Add the ability to namespace vue2-filters

---
 README.md           | 15 ++++++++++
 src/index.js        | 47 ++++++++++++++++++-------------
 test/mixins.spec.js | 68 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 19 deletions(-)
 create mode 100644 test/mixins.spec.js

diff --git a/README.md b/README.md
index 6a48838..36c1e83 100755
--- a/README.md
+++ b/README.md
@@ -269,6 +269,21 @@ module.exports = {
   </ul>
   ```
 
+## Namespacing
+
+This package adds a set of filters and methods to every Vue component. If you are using `vue2-filters` in combination with other 3rd party components you may run into a collision between these methods and props or methods used by those components. To avoid this, it is possible to namespace the filters and methods added by `vue2-filters`. To do so, change your installation code as follows:
+
+
+```javascript
+import Vue from 'vue'
+import { NamespacedVue2Filters } from 'vue2-filters'
+
+
+Vue.use(NamespacedVue2Filters('VF'))
+```
+
+This will add the string you pass in (in the example above `VF`) to be prepended to every filter and method name. E.g. `VForderBy` and `VFcapitalize`.
+
 ## Contribution
 
 If you find a bug or want to contribute to the code or documentation, you can help by submitting an [issue](https://github.com/freearhey/vue2-filters/issues) or a [pull request](https://github.com/freearhey/vue2-filters/pulls).
diff --git a/src/index.js b/src/index.js
index c09e228..758896c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,29 +3,38 @@ import * as stringFilters from './string/index'
 import * as arrayFilters from './array/index'
 import * as otherFilters from './other/index'
 
-var Vue2Filters = {
-  install: function(Vue) {
-    util.each(stringFilters, function(value, key) {
-        Vue.filter(key, value)
-    })
-
-    util.each(otherFilters, function(value, key) {
-        Vue.filter(key, value)
-    })
-
-    Vue.mixin({
-      methods: {
-        limitBy: arrayFilters.limitBy,
-        filterBy: arrayFilters.filterBy,
-        orderBy: arrayFilters.orderBy,
-        find: arrayFilters.find
-      }
-    })
-  }
+var install = function(Vue, namespace = '') {
+  util.each(stringFilters, function(value, key) {
+      Vue.filter(namespace + key, value)
+  })
+
+  util.each(otherFilters, function(value, key) {
+      Vue.filter(namespace + key, value)
+  })
+
+  Vue.mixin({
+    methods: {
+      [namespace + 'limitBy']: arrayFilters.limitBy,
+      [namespace + 'filterBy']: arrayFilters.filterBy,
+      [namespace + 'orderBy']: arrayFilters.orderBy,
+      [namespace + 'find']: arrayFilters.find
+    }
+  })
+}
+
+export var Vue2Filters = {
+  install: (Vue) => install(Vue)
+}
+
+export function NamespacedVue2Filters(namespace) {
+  return {
+    install: (Vue) => install(Vue, namespace)
+  };
 }
 
 export default Vue2Filters;
 
+
 if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(Vue2Filters);
 }
diff --git a/test/mixins.spec.js b/test/mixins.spec.js
new file mode 100644
index 0000000..a2b87dd
--- /dev/null
+++ b/test/mixins.spec.js
@@ -0,0 +1,68 @@
+import { Vue2Filters, NamespacedVue2Filters } from '../src/index';
+
+class VueStub {
+
+  constructor() {
+    this.filters = {};
+    this.methods = {};
+  }
+
+  filter(key, value) {
+    this.filters[key] = value;
+  }
+
+  mixin(object) {
+    this.methods = object.methods;
+  }
+
+  use(initializer) {
+    initializer.install(this);
+  }
+};
+
+describe('basic include', function() {
+  beforeAll(function() {
+    this.Vue = new VueStub();
+    this.Vue.use(Vue2Filters);
+  });
+
+  it('has all expected filters', function() {
+    expect(typeof this.Vue.filters.capitalize).toEqual('function');
+    expect(typeof this.Vue.filters.uppercase).toEqual('function');
+    expect(typeof this.Vue.filters.lowercase).toEqual('function');
+    expect(typeof this.Vue.filters.placeholder).toEqual('function');
+    expect(typeof this.Vue.filters.truncate).toEqual('function');
+    expect(typeof this.Vue.filters.currency).toEqual('function');
+    expect(typeof this.Vue.filters.pluralize).toEqual('function');
+  });
+
+  it('has all expected methods', function() {
+    expect(typeof this.Vue.methods.limitBy).toEqual('function');
+    expect(typeof this.Vue.methods.filterBy).toEqual('function');
+    expect(typeof this.Vue.methods.find).toEqual('function');
+    expect(typeof this.Vue.methods.orderBy).toEqual('function');
+  });
+});
+describe('namespaced include', function() {
+  beforeAll(function() {
+    this.Vue = new VueStub();
+    this.Vue.use(NamespacedVue2Filters('vf'));
+  });
+
+  it('has all expected filters with VF namespace', function() {
+    expect(typeof this.Vue.filters.vfcapitalize).toEqual('function');
+    expect(typeof this.Vue.filters.vfuppercase).toEqual('function');
+    expect(typeof this.Vue.filters.vflowercase).toEqual('function');
+    expect(typeof this.Vue.filters.vfplaceholder).toEqual('function');
+    expect(typeof this.Vue.filters.vftruncate).toEqual('function');
+    expect(typeof this.Vue.filters.vfcurrency).toEqual('function');
+    expect(typeof this.Vue.filters.vfpluralize).toEqual('function');
+  });
+
+  it('has all expected methods', function() {
+    expect(typeof this.Vue.methods.vflimitBy).toEqual('function');
+    expect(typeof this.Vue.methods.vffilterBy).toEqual('function');
+    expect(typeof this.Vue.methods.vffind).toEqual('function');
+    expect(typeof this.Vue.methods.vforderBy).toEqual('function');
+  });
+});