├── .gitignore ├── rollup.config.js ├── .github └── FUNDING.yml ├── src └── index.ts ├── LICENSE ├── package.json ├── README.md └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import cleaner from 'rollup-plugin-cleaner'; 4 | import resolve from '@rollup/plugin-node-resolve'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import pkg from './package.json'; 7 | 8 | export default { 9 | input: './src/index.ts', 10 | output: [{ 11 | file: pkg.module, 12 | format: 'esm', 13 | sourcemap: true 14 | }, { 15 | file: pkg.main, 16 | format: 'umd', 17 | name: 'window', 18 | sourcemap: true, 19 | extend: true 20 | }], 21 | plugins: [ 22 | resolve(), 23 | typescript(), 24 | commonjs(), 25 | terser(), 26 | cleaner({ targets: ['./dist'] }) 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: gabrielcursino 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | polar: # Replace with a single Polar username 14 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 15 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Mask } from '@ionited/mask'; 2 | import { Directive, DirectiveBinding } from 'vue'; 3 | 4 | const addMask = (el: any, input: HTMLInputElement, options: any) => el.mask = Mask(input, options); 5 | 6 | const getInput = (el: HTMLElement, binding: DirectiveBinding) => { 7 | if (el.nodeName === 'INPUT') addMask(el, el as HTMLInputElement, binding.value); 8 | else { 9 | const input = el.querySelector('input') as HTMLInputElement; 10 | 11 | if (input) addMask(el, input, binding.value); 12 | else setTimeout(() => getInput(el, binding), 25); 13 | } 14 | } 15 | 16 | export const mask: Directive = { 17 | mounted(el, binding) { 18 | getInput(el, binding); 19 | }, 20 | 21 | unmounted(el) { 22 | el.mask.instance.destroy(); 23 | } 24 | } 25 | 26 | export const register = (name: string, mask: any) => Mask.register(name, mask); 27 | 28 | export { MaskCore } from '@ionited/mask/core'; 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Ion 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ionited/mask-vue", 3 | "version": "0.1.28", 4 | "description": "Create your masks for Vue easily", 5 | "main": "./dist/index.js", 6 | "module": "./dist/index.esm.js", 7 | "types": "./dist/index.d.ts", 8 | "scripts": { 9 | "build": "rollup -c" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/ionited/mask-vue.git" 14 | }, 15 | "keywords": [ 16 | "Mask", 17 | "Core", 18 | "Vue", 19 | "Ionic", 20 | "Ionic Vue" 21 | ], 22 | "author": "Ion", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/ionited/mask-vue/issues" 26 | }, 27 | "homepage": "https://github.com/ionited/mask-vue#readme", 28 | "dependencies": { 29 | "@ionited/mask": "^0.7.0", 30 | "vue": "^3.5.13" 31 | }, 32 | "devDependencies": { 33 | "@rollup/plugin-commonjs": "^22.0.2", 34 | "@rollup/plugin-node-resolve": "^14.1.0", 35 | "rollup": "^2.79.1", 36 | "rollup-plugin-cleaner": "^1.0.0", 37 | "rollup-plugin-terser": "^7.0.2", 38 | "rollup-plugin-typescript2": "^0.36.0", 39 | "typescript": "^5.2.2" 40 | }, 41 | "files": [ 42 | "dist/**/*" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mask-vue 2 | 3 | > Create your masks for Vue easily 4 | 5 | Vue wrapper for [@ionited/mask](https://github.com/ionited/mask). Compatible with Vue 3 and Ionic Vue 6 | 7 | ## Quick start 8 | 9 | Choose your favorite option below: 10 | 11 | ### Install with NPM 12 | 13 | ``` 14 | npm i @ionited/mask-vue 15 | ``` 16 | 17 | ### Get from UNPKG 18 | 19 | [https://unpkg.com/@ionited/mask-vue@latest/dist/index.js](https://unpkg.com/@ionited/mask-vue@latest/dist/indext.js) 20 | 21 | --- 22 | 23 | ## Usage 24 | 25 | To basic usage you can simply call: 26 | 27 | ```html 28 | 31 | ``` 32 | 33 | Local import: 34 | 35 | ```ts 36 | import { mask } from '@ionited/mask-vue'; 37 | 38 | export default { 39 | ... 40 | directives: { mask }, 41 | ... 42 | } 43 | ``` 44 | 45 | or global import: 46 | 47 | ```ts 48 | import { mask } from '@ionited/mask-vue'; 49 | 50 | const app = createApp(App) 51 | .directive('mask', mask); 52 | ``` 53 | 54 | ### Register your own masks 55 | 56 | You can create your own mask logic easily, you only need `register` a mask and use: 57 | 58 | ```ts 59 | register(name: string, mask: any): void; 60 | ``` 61 | 62 | See more [@ionited/mask](https://github.com/ionited/mask) 63 | 64 | ## License 65 | 66 | Copyright (c) 2021 Ion. Licensed under [MIT License](LICENSE). 67 | 68 | [https://ionited.io](https://ionited.io) 69 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Basic Options */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ 8 | "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 9 | // "lib": [], /* Specify library files to be included in the compilation. */ 10 | // "allowJs": true, /* Allow javascript files to be compiled. */ 11 | // "checkJs": true, /* Report errors in .js files. */ 12 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ 13 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 15 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 16 | // "outFile": "./", /* Concatenate and emit output to single file. */ 17 | "outDir": "./dist", /* Redirect output structure to the directory. */ 18 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 19 | // "composite": true, /* Enable project compilation */ 20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 21 | // "removeComments": true, /* Do not emit comments to output. */ 22 | // "noEmit": true, /* Do not emit outputs. */ 23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 26 | 27 | /* Strict Type-Checking Options */ 28 | "strict": true, /* Enable all strict type-checking options. */ 29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 30 | // "strictNullChecks": true, /* Enable strict null checks. */ 31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 36 | 37 | /* Additional Checks */ 38 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 42 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 43 | // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ 44 | 45 | /* Module Resolution Options */ 46 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 47 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 48 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 49 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 50 | // "typeRoots": [], /* List of folders to include type definitions from. */ 51 | // "types": [], /* Type declaration files to be included in compilation. */ 52 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 53 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 54 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 55 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 56 | 57 | /* Source Map Options */ 58 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 59 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 60 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 61 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 62 | 63 | /* Experimental Options */ 64 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 65 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 66 | 67 | /* Advanced Options */ 68 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 69 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 70 | }, 71 | "include": ["./src/*"] 72 | } 73 | --------------------------------------------------------------------------------