feat(filter): make filter work with RegExps, functions and respect cu…

…stom replacers

Implements: #499

src/__tests__/index.test.js

@@ -283,4 +283,38 @@ describe('filter usage', () => {
  });
  expect(wrapper.text()).toBe('');
  });
+
+ it('should accept an array of regular expressions directly', async () => {
+ const wrapper = mountWithMask({
+ data: () => ({ mask: ['(', /\d/, /\d/, /\d/, ') ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], value: '5555551234' }),
+ template: '<span>{{ value | VMask(mask) }}</span>',
+ });
+ expect(wrapper.text()).toBe('(555) 555-1234');
+ });
+
+ it('should be possible to create a mask for accepting a valid time range', async () => {
+ const wrapper = mountWithMask({
+ data: () => ({
+ mask: timeRangeMask,
+ value: '02532137',
+ }),
+ template: '<span>{{ value | VMask(mask) }}</span>',
+ });
+ expect(wrapper.text()).toBe('02:53-21:37');
+ });
+
+ it('should allow for add/removal of global mask placeholders', async () => {
+ const localVue = createLocalVue();
+ localVue.use(VueMask, {
+ placeholders: {
+ '#': null,
+ D: /\d/,
+ },
+ });
+ const wrapper = mount({
+ data: () => ({ mask: '###-DDD-###-DDD', value: '123456' }),
+ template: '<span>{{ value | VMask(mask) }}</span>',
+ }, { localVue });
+ expect(wrapper.text()).toBe('###-123-###-456');
+ });
 });

src/filter.js

@@ -1,16 +1,30 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import conformToMask from 'text-mask-core/src/conformToMask';
-import { stringMaskToRegExpMask } from './utils/maskToRegExpMask';
 import { isString } from './utils';
+import parseMask from './utils/parseMask';
+import extendMaskReplacers from './utils/extendMaskReplacers';
 
 /**
- * Vue filter definition
- * @param {string|number} value
- * @param {string} stringMask
+ * Create the Vue filter
+ * @param {Object} filterOptions
+ * @param {MaskReplaces} filterOptions.placeholders
  */
-export default (value, stringMask) => {
- const mask = stringMaskToRegExpMask(stringMask);
- if (!isString(value) && !Number.isFinite(value)) return value;
- const { conformedValue } = conformToMask(`${value}`, mask, { guide: false });
- return conformedValue;
-};
+export function createFilter(filterOptions = {}) {
+ const instanceMaskReplacers = extendMaskReplacers(
+ filterOptions && filterOptions.placeholders,
+ );
+
+ /**
+ * Vue filter definition
+ * @param {string|number} value
+ * @param {string|Array.<string|RegExp>|Function|null} inputMask
+ */
+ return (value, inputMask) => {
+ if (!isString(value) && !Number.isFinite(value)) return value;
+ const mask = parseMask(inputMask, instanceMaskReplacers);
+ const { conformedValue } = conformToMask(`${value}`, mask, { guide: false });
+ return conformedValue;
+ };
+}
+
+export default createFilter();

src/plugin.js

@@ -1,5 +1,5 @@
 import { createDirective } from './directive';
-import filter from './filter';
+import { createFilter } from './filter';
 
 /**
  * Vue plugin definition
@@ -9,5 +9,5 @@ import filter from './filter';
  */
 export default (Vue, options = {}) => {
  Vue.directive('mask', createDirective(options));
- Vue.filter('VMask', filter);
+ Vue.filter('VMask', createFilter(options));
 };