fix(filter): remove unsupported Vue.filter (RonaldJerez#81)

Vue 3 doesn't support Vue.filter anymore but we can use the masker directly instead.

closes RonaldJerez#44

Author: Robo-Rin

README.md

@@ -33,7 +33,7 @@ yarn add vue-input-facade@beta
 
 ### Globally
 
-Installs the component, directive and filter for your entire application.
+Installs the component and directive for your entire application.
 
 ```javascript
 import InputFacade from 'vue-input-facade'
@@ -45,12 +45,14 @@ app.use(InputFacade)
 Install per component as needed
 
 ```javascript
-import { InputFacade, facade, filter } from 'vue-input-facade'
+import { InputFacade, facade, masker } from 'vue-input-facade'
 
 export default {
   components: { InputFacade },
   directives: { facade },
-  filters: { facade: filter },
+  setup() {
+    return { masker }
+  }
   // ... rest of component config
 }
 ```

docs/filter.md

@@ -0,0 +1,8 @@
+You may use the library to mask values in static text as well, taking advantage of the same mask tokens.
+
+```js 
+let phoneNumber = 18001234567
+let orderNumber = 'ABC1234510'
+
+<p>Thanks for ordering with us. Your order number is <b>{{ masker(orderNumber, 'SSS-#####-##').masked }}</b>.  If you need assistance please call us at <b>{{ facade(phoneNumber, '#-###-###-####').masked }}</b></p>
+```

docs/masker.md

@@ -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": [

package.json

@@ -18,22 +18,10 @@ 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
- *
- * @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) {
-  return masker(value, config).masked
 }
 
 export default install
-export { InputFacade, facade, tokens, masker, filter }
+export { InputFacade, facade, tokens, masker }
 
 // Install by default if included from script tag
 if (typeof window !== 'undefined' && window.Vue) {

src/plugin.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const pkg = require('../package.json')
-const { execSync } = require('child_process');
+const { execSync } = require('child_process')
 
 const root = path.resolve(__dirname, '../')
 
@@ -35,8 +35,8 @@ module.exports = {
       content: `${root}/docs/directive.md`
     },
     {
-      name: 'Filter',
-      content: `${root}/docs/filter.md`
+      name: 'Masker',
+      content: `${root}/docs/masker.md`
     },
     {
       name: 'Advanced',