fix(filter): replace unsupported Vue.filter

Vue 3 doesn't support Vue.filter and needed to be replaced by a standard utility function.

closes #44

Author: Robo-Rin

package.json

@@ -20,7 +20,8 @@
     "build:docs": "vue-cli-service styleguidist:build --config styleguide/config.js",
     "test": "jest --coverage",
     "test:filter": "func() { yarn test \"$1\" --coverage-reporters=\"lcov\" --coverageThreshold={} ${@:2}; }; func",
-    "test:watch": "jest --coverage --watchAll"
+    "test:watch": "jest --coverage --watchAll",
+    "preyalcpublish": "yarn build:plugin"
   },
   "main": "dist/vue-input-facade.umd.min.js",
   "files": [

src/plugin.js

@@ -18,22 +18,24 @@ function install(Vue, options = {}) {
 
   Vue.component(InputFacade.name, InputFacade)
   Vue.directive(options.name || 'facade', facade)
-  Vue.filter(options.name || 'facade', filter)
 }
 
 /**
- * Utility function to be used as a vue filter
+ * Utility function to be used as a vue method
+ *
+ * This likely needs to be registered in the SFC as a method if using the options API,
+ * or in the `setup` hook if using the composition API.
  *
  * @param {String} value the value to apply the filter to
  * @param {*} config the masking config
  * @returns {string} the masked value as returned by the masker function
  */
-function filter(value, config) {
+function useFacade(value, config) {
   return masker(value, config).masked
 }
 
 export default install
-export { InputFacade, facade, tokens, masker, filter }
+export { InputFacade, facade, tokens, masker, useFacade }
 
 // Install by default if included from script tag
 if (typeof window !== 'undefined' && window.Vue) {

tests/plugin.test.js

@@ -0,0 +1,53 @@
+import { useFacade } from '../src/plugin'
+import { shallowMount } from '@vue/test-utils'
+
+describe('Plugin tests', () => {
+  describe('useFacade', () => {
+    const ComponentMock = {
+      template: '<div id="maskedText">{{ useFacade(input, facadeConfig) }}</div>',
+      data() {
+        return {
+          input: '',
+          facadeConfig: { mask: '' }
+        }
+      },
+      methods: { useFacade }
+    }
+
+    function createWrapper() {
+      return shallowMount(ComponentMock)
+    }
+
+    test('Should mask input according to the provided config', async () => {
+      const wrapper = createWrapper()
+      await wrapper.setData({
+        input: '1234',
+        facadeConfig: { mask: '###-#' }
+      })
+
+      expect(wrapper.find('#maskedText').text()).toBe('123-4')
+    })
+
+    test('Should return an empty mask if initial value is null', async () => {
+      const wrapper = createWrapper()
+      await wrapper.setData({
+        input: null,
+        facadeConfig: { mask: '###-#' }
+      })
+
+      expect(wrapper.find('#maskedText').text()).toBe('')
+    })
+
+    test('Should update the mask if the input value changes', async () => {
+      const wrapper = createWrapper()
+      await wrapper.setData({
+        input: '1234',
+        facadeConfig: { mask: '###-#' }
+      })
+      expect(wrapper.find('#maskedText').text()).toBe('123-4')
+
+      await wrapper.setData({ input: '5555' })
+      expect(wrapper.find('#maskedText').text()).toBe('555-5')
+    })
+  })
+})