use-mask-input 3.11.1 → 3.12.0

package/dist/vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.mjs","names":[],"sources":["../src/vue/applyMask.ts","../src/vue/resolveVueElement.ts","../src/vue/directive.ts","../src/vue/useMaskInput.ts"],"sourcesContent":["import { applyMaskToElement } from '../core';\nimport { makeMaskCacheKey } from '../utils';\nimport isServer from '../utils/isServer';\n\nimport type { Mask, Options, VueMaskBinding, VueMaskConfig } from './types';\n\ntype MaskedElement = HTMLElement & {\n  inputmask?: { remove?: () => void };\n};\n\n/**\n * Single implementation both Vue surfaces route through, so the directive and\n * the composable cannot drift apart on what a given mask means.\n */\n\nfunction isConfig(binding: VueMaskBinding): binding is VueMaskConfig {\n  return (\n    typeof binding === 'object'\n    && binding !== null\n    && !Array.isArray(binding)\n    && 'mask' in binding\n  );\n}\n\n/** Unpacks the two accepted binding shapes into a mask and its options. */\nexport function normalizeBinding(binding: VueMaskBinding): {\n  mask: Mask;\n  options?: Options;\n} {\n  if (isConfig(binding)) {\n    return { mask: binding.mask, options: binding.options };\n  }\n\n  return { mask: binding as Mask };\n}\n\n/**\n * Shallow equality over mask options.\n *\n * ponytail: shallow on purpose. An options object mutated in place, or one\n * holding functions, won't compare equal-then-changed correctly — but deep\n * comparison on every re-render is exactly the cost this guard exists to\n * avoid. Documented as \"replace options, don't mutate them\".\n */\nfunction sameOptions(a?: Options, b?: Options): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n\n  const keysA = Object.keys(a) as (keyof Options)[];\n  const keysB = Object.keys(b) as (keyof Options)[];\n  if (keysA.length !== keysB.length) return false;\n\n  return keysA.every((key) => Object.is(a[key], b[key]));\n}\n\n/**\n * True when two bindings mean the same mask, so an unrelated re-render doesn't\n * rebuild Inputmask's buffer and drop the caret to the end mid-typing.\n *\n * Compares structurally, not by identity: an inline `v-mask-input=\"{ mask: 'cpf' }\"`\n * allocates a fresh object every render and would otherwise never look equal.\n */\nexport function sameBinding(a: VueMaskBinding, b: VueMaskBinding): boolean {\n  const left = normalizeBinding(a);\n  const right = normalizeBinding(b);\n\n  if (makeMaskCacheKey('', left.mask) !== makeMaskCacheKey('', right.mask)) {\n    return false;\n  }\n\n  return sameOptions(left.options, right.options);\n}\n\n/**\n * Applies a binding's mask to an already-resolved element.\n *\n * A null mask is not merely \"do nothing\": it has to tear down whatever mask is\n * already on the element. A binding is reactive, so `v-mask-input=\"on ? 'cpf' : null\"`\n * turns the mask off, and simply returning early would leave the element still\n * formatting as a CPF.\n *\n * @param element - The element to mask\n * @param binding - Mask, or `{ mask, options }`\n */\nexport default function applyMask(\n  element: HTMLElement | null,\n  binding: VueMaskBinding,\n): void {\n  if (isServer || !element) return;\n\n  const { mask, options } = normalizeBinding(binding);\n\n  if (mask === null || mask === undefined) {\n    (element as MaskedElement).inputmask?.remove?.();\n    return;\n  }\n\n  applyMaskToElement(element, mask, options);\n}\n","import { findInputElement, isHTMLElement } from '../core/elementResolver';\n\nimport type { MaskRefTarget } from './types';\n\n/**\n * Resolves whatever Vue hands us into the element that should carry the mask.\n *\n * A directive always receives a DOM element. A `:ref` on a component receives\n * the component's public instance instead, so the element has to be dug out of\n * `$el` first. Either way the existing `findInputElement` does the final\n * wrapper search, which is the same code path that makes Ant Design work on the\n * React side.\n *\n * Fragment-root components resolve to `null` on purpose: their `$el` is a text\n * anchor node, and Vue itself refuses this case for directives\n * (\"Runtime directive used on component with non-element root node\"). Walking\n * up to `parentElement` could just as easily find a sibling input as the\n * intended one.\n *\n * @param target - Element, component public instance, or null\n * @returns The element to mask, or null if there isn't one\n */\nexport default function resolveVueElement(target: MaskRefTarget): HTMLElement | null {\n  if (!target) return null;\n\n  if (isHTMLElement(target)) {\n    return findInputElement(target);\n  }\n\n  const { $el } = target as { $el?: unknown };\n  if (!isHTMLElement($el)) return null;\n\n  return findInputElement($el);\n}\n","import applyMask, { sameBinding } from './applyMask';\nimport resolveVueElement from './resolveVueElement';\n\nimport type { ObjectDirective } from 'vue';\n\nimport type { VueMaskBinding } from './types';\n\ntype MaskedElement = HTMLElement & {\n  inputmask?: { remove?: () => void };\n};\n\n/**\n * `v-mask-input` — the only thing in the Vue entry that applies a mask.\n *\n * Getting real lifecycle hooks is why this, and not the composable, is the\n * primitive: the React surface has no equivalent of `unmounted`, which is why\n * it never tears Inputmask down.\n *\n * Note there is no `v-model` handling here, and none is needed. Inputmask\n * replaces the element's `value` property with its own accessor, so `v-model`\n * reads and writes through the engine rather than around it — including\n * returning the unmasked value under `autoUnmask`.\n *\n * @example\n * ```vue\n * <script setup>\n * import { vMaskInput } from 'use-mask-input/vue'\n * </script>\n *\n * <template>\n *   <input v-mask-input=\"'cpf'\" />\n *   <input v-mask-input=\"{ mask: 'currency', options: { prefix: 'R$ ' } }\" />\n * </template>\n * ```\n */\nconst vMaskInput: ObjectDirective<HTMLElement, VueMaskBinding> = {\n  mounted(el, binding) {\n    applyMask(resolveVueElement(el), binding.value);\n  },\n\n  updated(el, binding) {\n    // Every parent re-render lands here. Re-masking an unchanged binding would\n    // rebuild the buffer and send the caret to the end while the user types.\n    if (sameBinding(binding.value, binding.oldValue as VueMaskBinding)) return;\n\n    applyMask(resolveVueElement(el), binding.value);\n  },\n\n  unmounted(el) {\n    const target = resolveVueElement(el) as MaskedElement | null;\n    target?.inputmask?.remove?.();\n  },\n\n  // Without this, @vue/server-renderer warns about an unhandled custom\n  // directive. There is nothing to render server-side.\n  getSSRProps: () => ({}),\n};\n\nexport default vMaskInput;\n","import applyMask from './applyMask';\nimport resolveVueElement from './resolveVueElement';\nimport { getUnmaskedValue } from '../utils';\nimport isServer from '../utils/isServer';\n\nimport type {\n  MaskRefTarget, Mask, Options, UseMaskInputReturn,\n} from './types';\n\n/**\n * Composable form, for imperative use and for reading the raw value when\n * `autoUnmask` is off.\n *\n * Narrower than the directive on purpose: wrapper components (PrimeVue,\n * Element Plus, Ant Design Vue) are already covered by `v-mask-input`, because\n * Vue applies directives to a component's root element and the mask engine\n * searches inside it. Reach for this when you need `unmaskedValue()` or a ref\n * you can hold.\n *\n * @param mask - The mask pattern or alias\n * @param options - Optional mask configuration options\n * @returns A ref callback to bind, and an unmasked-value accessor\n *\n * @example\n * ```vue\n * <script setup>\n * import { useMaskInput } from 'use-mask-input/vue'\n * const { maskRef, unmaskedValue } = useMaskInput('cpf')\n * function submit() { console.log(unmaskedValue()) }\n * </script>\n *\n * <template><input :ref=\"maskRef\" /></template>\n * ```\n */\nexport default function useMaskInput(mask: Mask, options?: Options): UseMaskInputReturn {\n  if (isServer) {\n    return {\n      maskRef: () => {\n        // server doesn't have dom, so just do nothing\n      },\n      unmaskedValue: () => '',\n    };\n  }\n\n  let element: HTMLElement | null = null;\n\n  const maskRef = (target: MaskRefTarget): void => {\n    element = resolveVueElement(target);\n    applyMask(element, { mask, options });\n  };\n\n  return {\n    maskRef,\n    unmaskedValue: () => getUnmaskedValue(element),\n  };\n}\n"],"mappings":"yFAeA,SAAS,EAAS,EAAmD,CACnE,OACE,OAAO,GAAY,YAChB,GACA,CAAC,MAAM,QAAQ,CAAO,GACtB,SAAU,CAEjB,CAGA,SAAgB,EAAiB,EAG/B,CAKA,OAJI,EAAS,CAAO,EACX,CAAE,KAAM,EAAQ,KAAM,QAAS,EAAQ,OAAQ,EAGjD,CAAE,KAAM,CAAgB,CACjC,CAUA,SAAS,EAAY,EAAa,EAAsB,CACtD,GAAI,IAAM,EAAG,MAAO,GACpB,GAAI,CAAC,GAAK,CAAC,EAAG,MAAO,GAErB,IAAM,EAAQ,OAAO,KAAK,CAAC,EACrB,EAAQ,OAAO,KAAK,CAAC,EAG3B,OAFI,EAAM,SAAW,EAAM,QAEpB,EAAM,MAAO,GAAQ,OAAO,GAAG,EAAE,GAAM,EAAE,EAAI,CAAC,CACvD,CASA,SAAgB,EAAY,EAAmB,EAA4B,CACzE,IAAM,EAAO,EAAiB,CAAC,EACzB,EAAQ,EAAiB,CAAC,EAMhC,OAJI,EAAiB,GAAI,EAAK,IAAI,IAAM,EAAiB,GAAI,EAAM,IAAI,GAIhE,EAAY,EAAK,QAAS,EAAM,OAAO,CAChD,CAaA,SAAwB,EACtB,EACA,EACM,CACN,GAAI,GAAY,CAAC,EAAS,OAE1B,GAAM,CAAE,OAAM,WAAY,EAAiB,CAAO,EAElD,GAAI,GAAS,KAA4B,CACvC,EAA2B,WAAW,SAAS,EAC/C,MACF,CAEA,EAAmB,EAAS,EAAM,CAAO,CAC3C,CC5EA,SAAwB,EAAkB,EAA2C,CACnF,GAAI,CAAC,EAAQ,OAAO,KAEpB,GAAI,EAAc,CAAM,EACtB,OAAO,EAAiB,CAAM,EAGhC,GAAM,CAAE,OAAQ,EAGhB,OAFK,EAAc,CAAG,EAEf,EAAiB,CAAG,EAFK,IAGlC,CCEA,MAAM,EAA2D,CAC/D,QAAQ,EAAI,EAAS,CACnB,EAAU,EAAkB,CAAE,EAAG,EAAQ,KAAK,CAChD,EAEA,QAAQ,EAAI,EAAS,CAGf,EAAY,EAAQ,MAAO,EAAQ,QAA0B,GAEjE,EAAU,EAAkB,CAAE,EAAG,EAAQ,KAAK,CAChD,EAEA,UAAU,EAAI,CAEZ,EADiC,CAC5B,CAAC,EAAE,WAAW,SAAS,CAC9B,EAIA,iBAAoB,CAAC,EACvB,ECtBA,SAAwB,EAAa,EAAY,EAAuC,CACtF,GAAI,EACF,MAAO,CACL,YAAe,CAEf,EACA,kBAAqB,EACvB,EAGF,IAAI,EAA8B,KAOlC,MAAO,CACL,QANe,GAAgC,CAC/C,EAAU,EAAkB,CAAM,EAClC,EAAU,EAAS,CAAE,OAAM,SAAQ,CAAC,CACtC,EAIE,kBAAqB,EAAiB,CAAO,CAC/C,CACF"}

package/dist/withMask--iSmiRbB.cjs

@@ -0,0 +1,2 @@
+const e=require("./core-BopfTGvA.cjs"),t=new Map;function n(n,r){if(!r){let r=e.o(``,n);if(t.has(r))return t.get(r)}let i=null,a=(t=>{if(e.u||n===null||!t)return;i=t;let a=e.l(e.f)(e.d(n,r));e.r(t,n,r),a.mask(t)});if(!r){let r=e.o(``,n);t.set(r,a)}return e.c(a,()=>e.a(i))}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});
+//# sourceMappingURL=withMask--iSmiRbB.cjs.map

package/dist/withMask--iSmiRbB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"withMask--iSmiRbB.cjs","names":["makeMaskCacheKey","isServer","interopDefaultSync","inputmask","getMaskOptions","setUnmaskedValue","getUnmaskedValue"],"sources":["../src/api/withMask.ts"],"sourcesContent":["/* eslint-disable import-x/no-extraneous-dependencies */\nimport inputmask from '../core/inputmask';\n\nimport { getMaskOptions } from '../core/maskConfig';\nimport { stripMaxLength } from '../core/maskEngine';\nimport { getUnmaskedValue, makeMaskCacheKey, setUnmaskedValue } from '../utils';\nimport isServer from '../utils/isServer';\nimport interopDefaultSync from '../utils/moduleInterop';\n\nimport type { Input, Mask, Options, UseMaskInputReturn } from '../types';\n\nconst callbackCache = new Map<string, UseMaskInputReturn>();\n\n/**\n * Higher-order function that creates a ref callback for applying input masks.\n * Simple function to apply mask via ref. No hooks, no drama.\n *\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A ref callback function that applies the mask\n */\nexport default function withMask(mask: Mask, options?: Options): UseMaskInputReturn {\n  // without options, we cant cache, so we always return a fresh callback. :P\n  if (!options) {\n    const cacheKey = makeMaskCacheKey('', mask);\n    if (callbackCache.has(cacheKey)) {\n      return callbackCache.get(cacheKey) as UseMaskInputReturn;\n    }\n  }\n\n  let currentInput: Input | null = null;\n\n  const callback = ((input: Input | null): void => {\n    if (isServer || mask === null || !input) return;\n\n    currentInput = input;\n    const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options));\n    stripMaxLength(input, mask, options);\n    maskInput.mask(input as HTMLElement);\n  }) as UseMaskInputReturn;\n\n  if (!options) {\n    const cacheKey = makeMaskCacheKey('', mask);\n    callbackCache.set(cacheKey, callback);\n  }\n\n  return setUnmaskedValue(callback, () => getUnmaskedValue(currentInput));\n}\n"],"mappings":"uCAWM,EAAgB,IAAI,IAU1B,SAAwB,EAAS,EAAY,EAAuC,CAElF,GAAI,CAAC,EAAS,CACZ,IAAM,EAAWA,EAAAA,EAAiB,GAAI,CAAI,EAC1C,GAAI,EAAc,IAAI,CAAQ,EAC5B,OAAO,EAAc,IAAI,CAAQ,CAErC,CAEA,IAAI,EAA6B,KAE3B,GAAa,GAA8B,CAC/C,GAAIC,EAAAA,GAAY,IAAS,MAAQ,CAAC,EAAO,OAEzC,EAAe,EACf,IAAM,EAAYC,EAAAA,EAAmBC,EAAAA,CAAS,CAAC,CAACC,EAAAA,EAAe,EAAM,CAAO,CAAC,EAC7E,EAAA,EAAe,EAAO,EAAM,CAAO,EACnC,EAAU,KAAK,CAAoB,CACrC,GAEA,GAAI,CAAC,EAAS,CACZ,IAAM,EAAWJ,EAAAA,EAAiB,GAAI,CAAI,EAC1C,EAAc,IAAI,EAAU,CAAQ,CACtC,CAEA,OAAOK,EAAAA,EAAiB,MAAgBC,EAAAA,EAAiB,CAAY,CAAC,CACxE"}

package/dist/withMask-DOmJHTJ4.mjs

@@ -0,0 +1,2 @@
+import{a as e,c as t,d as n,f as r,l as i,o as a,r as o,u as s}from"./core-CNGYEIpO.mjs";const c=new Map;function l(l,u){if(!u){let e=a(``,l);if(c.has(e))return c.get(e)}let d=null,f=(e=>{if(s||l===null||!e)return;d=e;let t=i(r)(n(l,u));o(e,l,u),t.mask(e)});if(!u){let e=a(``,l);c.set(e,f)}return t(f,()=>e(d))}export{l as t};
+//# sourceMappingURL=withMask-DOmJHTJ4.mjs.map

package/dist/withMask-DOmJHTJ4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"withMask-DOmJHTJ4.mjs","names":["inputmask"],"sources":["../src/api/withMask.ts"],"sourcesContent":["/* eslint-disable import-x/no-extraneous-dependencies */\nimport inputmask from '../core/inputmask';\n\nimport { getMaskOptions } from '../core/maskConfig';\nimport { stripMaxLength } from '../core/maskEngine';\nimport { getUnmaskedValue, makeMaskCacheKey, setUnmaskedValue } from '../utils';\nimport isServer from '../utils/isServer';\nimport interopDefaultSync from '../utils/moduleInterop';\n\nimport type { Input, Mask, Options, UseMaskInputReturn } from '../types';\n\nconst callbackCache = new Map<string, UseMaskInputReturn>();\n\n/**\n * Higher-order function that creates a ref callback for applying input masks.\n * Simple function to apply mask via ref. No hooks, no drama.\n *\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A ref callback function that applies the mask\n */\nexport default function withMask(mask: Mask, options?: Options): UseMaskInputReturn {\n  // without options, we cant cache, so we always return a fresh callback. :P\n  if (!options) {\n    const cacheKey = makeMaskCacheKey('', mask);\n    if (callbackCache.has(cacheKey)) {\n      return callbackCache.get(cacheKey) as UseMaskInputReturn;\n    }\n  }\n\n  let currentInput: Input | null = null;\n\n  const callback = ((input: Input | null): void => {\n    if (isServer || mask === null || !input) return;\n\n    currentInput = input;\n    const maskInput = interopDefaultSync(inputmask)(getMaskOptions(mask, options));\n    stripMaxLength(input, mask, options);\n    maskInput.mask(input as HTMLElement);\n  }) as UseMaskInputReturn;\n\n  if (!options) {\n    const cacheKey = makeMaskCacheKey('', mask);\n    callbackCache.set(cacheKey, callback);\n  }\n\n  return setUnmaskedValue(callback, () => getUnmaskedValue(currentInput));\n}\n"],"mappings":"yFAWA,MAAM,EAAgB,IAAI,IAU1B,SAAwB,EAAS,EAAY,EAAuC,CAElF,GAAI,CAAC,EAAS,CACZ,IAAM,EAAW,EAAiB,GAAI,CAAI,EAC1C,GAAI,EAAc,IAAI,CAAQ,EAC5B,OAAO,EAAc,IAAI,CAAQ,CAErC,CAEA,IAAI,EAA6B,KAE3B,GAAa,GAA8B,CAC/C,GAAI,GAAY,IAAS,MAAQ,CAAC,EAAO,OAEzC,EAAe,EACf,IAAM,EAAY,EAAmBA,CAAS,CAAC,CAAC,EAAe,EAAM,CAAO,CAAC,EAC7E,EAAe,EAAO,EAAM,CAAO,EACnC,EAAU,KAAK,CAAoB,CACrC,GAEA,GAAI,CAAC,EAAS,CACZ,IAAM,EAAW,EAAiB,GAAI,CAAI,EAC1C,EAAc,IAAI,EAAU,CAAQ,CACtC,CAEA,OAAO,EAAiB,MAAgB,EAAiB,CAAY,CAAC,CACxE"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "use-mask-input",
-  "version": "3.11.1",
+  "version": "3.12.0",
   "private": false,
-  "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
+  "description": "Input masks for React and Vue 3. Works with React Hook Form, TanStack Form, vee-validate, and Ant Design.",
   "license": "MIT",
   "author": "Eduardo Borges<euduardoborges@gmail.com>",
   "type": "module",
@@ -33,6 +33,16 @@
         "types": "./dist/antd.d.cts",
         "default": "./dist/antd.cjs"
       }
+    },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue.d.mts",
+        "default": "./dist/vue.mjs"
+      },
+      "require": {
+        "types": "./dist/vue.d.cts",
+        "default": "./dist/vue.cjs"
+      }
     }
   },
   "engines": {
@@ -50,11 +60,25 @@
   "peerDependencies": {
     "antd": ">=5",
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "vee-validate": ">=4",
+    "vue": ">=3.4"
   },
   "peerDependenciesMeta": {
     "antd": {
       "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vee-validate": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -65,23 +89,43 @@
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "@vitest/browser": "4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "4.1.10",
+    "@vue/server-renderer": "^3.5.40",
+    "@vue/test-utils": "^2.4.11",
     "antd": "^6.5.1",
     "inputmask": "5.0.10-beta.61",
     "jsdom": "^29.1.1",
     "oxlint": "1.74.0",
+    "playwright": "^1.62.0",
     "react-hook-form": "7.82.0",
     "tsdown": "^0.22.9",
     "typescript": "~6.0.3",
-    "vitest": "4.1.10"
+    "vee-validate": "^4.15.1",
+    "vitest": "4.1.10",
+    "vue": "^3.5.40"
   },
+  "keywords": [
+    "react",
+    "vue",
+    "react-hook-form",
+    "tanstack-form",
+    "vee-validate",
+    "antd",
+    "input-mask",
+    "input-masking",
+    "vue-mask",
+    "mask"
+  ],
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
     "lint": "oxlint ./src",
-    "test": "vitest --dir ./src --run --coverage",
+    "test": "vitest --project=unit --dir ./src --run --coverage",
+    "test:browser": "vitest --project=browser --run",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist",
-    "postbuild": "cp ../../README.md README.md"
+    "postbuild": "node scripts/assert-entry-isolation.mjs && cp ../../README.md README.md"
   }
 }

package/src/@types/inputmask.d.ts

@@ -11,6 +11,12 @@
 
 interface InputmaskInstance {
   unmaskedvalue?: () => string;
+  /** Resolved configuration, after alias defaults are merged with user options. */
+  opts?: Record<string, unknown>;
+  /** Detaches the mask from its element. Used by the Vue directive on unmount. */
+  remove?: () => void;
+  /** Pushes a value through the engine's own validation and formatting. */
+  setValue?: (value: string) => void;
 }
 
 interface HTMLInputElement {

package/src/types/index.ts

@@ -4,35 +4,15 @@ import type {
   UseFormRegisterReturn,
 } from 'react-hook-form';
 
-import type { Options as MaskOptions } from './inputmask.types';
+import type { UnmaskedValueApi } from './mask';
 
 export type { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
 
-export type Mask = 'datetime'
-  | 'email'
-  | 'numeric'
-  | 'currency'
-  | 'decimal'
-  | 'integer'
-  | 'percentage'
-  | 'url'
-  | 'ip'
-  | 'mac'
-  | 'ssn'
-  | 'brl-currency'
-  | 'cpf'
-  | 'cnpj'
-  | 'br-bank-account'
-  | 'br-bank-agency'
-  | (string & {})
-  | (string[] & {})
-  | null;
-export type Options = MaskOptions;
-export type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
-
-export interface UnmaskedValueApi {
-  unmaskedValue: () => string;
-}
+// Framework-agnostic types live in ./mask so the Vue entry can import them
+// without pulling this module's react / react-hook-form imports with them.
+export type {
+  Input, Mask, Options, UnmaskedValueApi,
+} from './mask';
 
 export type UseMaskInputReturn = RefCallback<HTMLElement | null> & UnmaskedValueApi;
 

package/src/types/mask.ts

@@ -0,0 +1,37 @@
+import type { Options as MaskOptions } from './inputmask.types';
+
+/**
+ * Framework-agnostic mask types.
+ *
+ * Split out of `./index.ts` so the Vue entry can import them without dragging
+ * in that module's `react` and `react-hook-form` type imports. `./index.ts`
+ * re-exports everything here, so the React-facing surface is unchanged.
+ */
+
+export type Mask = 'datetime'
+  | 'email'
+  | 'numeric'
+  | 'currency'
+  | 'decimal'
+  | 'integer'
+  | 'percentage'
+  | 'url'
+  | 'ip'
+  | 'mac'
+  | 'ssn'
+  | 'brl-currency'
+  | 'cpf'
+  | 'cnpj'
+  | 'br-bank-account'
+  | 'br-bank-agency'
+  | (string & {})
+  | (string[] & {})
+  | null;
+
+export type Options = MaskOptions;
+
+export type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement;
+
+export interface UnmaskedValueApi {
+  unmaskedValue: () => string;
+}

package/src/vue/applyMask.ts

@@ -0,0 +1,99 @@
+import { applyMaskToElement } from '../core';
+import { makeMaskCacheKey } from '../utils';
+import isServer from '../utils/isServer';
+
+import type { Mask, Options, VueMaskBinding, VueMaskConfig } from './types';
+
+type MaskedElement = HTMLElement & {
+  inputmask?: { remove?: () => void };
+};
+
+/**
+ * Single implementation both Vue surfaces route through, so the directive and
+ * the composable cannot drift apart on what a given mask means.
+ */
+
+function isConfig(binding: VueMaskBinding): binding is VueMaskConfig {
+  return (
+    typeof binding === 'object'
+    && binding !== null
+    && !Array.isArray(binding)
+    && 'mask' in binding
+  );
+}
+
+/** Unpacks the two accepted binding shapes into a mask and its options. */
+export function normalizeBinding(binding: VueMaskBinding): {
+  mask: Mask;
+  options?: Options;
+} {
+  if (isConfig(binding)) {
+    return { mask: binding.mask, options: binding.options };
+  }
+
+  return { mask: binding as Mask };
+}
+
+/**
+ * Shallow equality over mask options.
+ *
+ * ponytail: shallow on purpose. An options object mutated in place, or one
+ * holding functions, won't compare equal-then-changed correctly — but deep
+ * comparison on every re-render is exactly the cost this guard exists to
+ * avoid. Documented as "replace options, don't mutate them".
+ */
+function sameOptions(a?: Options, b?: Options): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+
+  const keysA = Object.keys(a) as (keyof Options)[];
+  const keysB = Object.keys(b) as (keyof Options)[];
+  if (keysA.length !== keysB.length) return false;
+
+  return keysA.every((key) => Object.is(a[key], b[key]));
+}
+
+/**
+ * True when two bindings mean the same mask, so an unrelated re-render doesn't
+ * rebuild Inputmask's buffer and drop the caret to the end mid-typing.
+ *
+ * Compares structurally, not by identity: an inline `v-mask-input="{ mask: 'cpf' }"`
+ * allocates a fresh object every render and would otherwise never look equal.
+ */
+export function sameBinding(a: VueMaskBinding, b: VueMaskBinding): boolean {
+  const left = normalizeBinding(a);
+  const right = normalizeBinding(b);
+
+  if (makeMaskCacheKey('', left.mask) !== makeMaskCacheKey('', right.mask)) {
+    return false;
+  }
+
+  return sameOptions(left.options, right.options);
+}
+
+/**
+ * Applies a binding's mask to an already-resolved element.
+ *
+ * A null mask is not merely "do nothing": it has to tear down whatever mask is
+ * already on the element. A binding is reactive, so `v-mask-input="on ? 'cpf' : null"`
+ * turns the mask off, and simply returning early would leave the element still
+ * formatting as a CPF.
+ *
+ * @param element - The element to mask
+ * @param binding - Mask, or `{ mask, options }`
+ */
+export default function applyMask(
+  element: HTMLElement | null,
+  binding: VueMaskBinding,
+): void {
+  if (isServer || !element) return;
+
+  const { mask, options } = normalizeBinding(binding);
+
+  if (mask === null || mask === undefined) {
+    (element as MaskedElement).inputmask?.remove?.();
+    return;
+  }
+
+  applyMaskToElement(element, mask, options);
+}

package/src/vue/directive.ts

@@ -0,0 +1,59 @@
+import applyMask, { sameBinding } from './applyMask';
+import resolveVueElement from './resolveVueElement';
+
+import type { ObjectDirective } from 'vue';
+
+import type { VueMaskBinding } from './types';
+
+type MaskedElement = HTMLElement & {
+  inputmask?: { remove?: () => void };
+};
+
+/**
+ * `v-mask-input` — the only thing in the Vue entry that applies a mask.
+ *
+ * Getting real lifecycle hooks is why this, and not the composable, is the
+ * primitive: the React surface has no equivalent of `unmounted`, which is why
+ * it never tears Inputmask down.
+ *
+ * Note there is no `v-model` handling here, and none is needed. Inputmask
+ * replaces the element's `value` property with its own accessor, so `v-model`
+ * reads and writes through the engine rather than around it — including
+ * returning the unmasked value under `autoUnmask`.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { vMaskInput } from 'use-mask-input/vue'
+ * </script>
+ *
+ * <template>
+ *   <input v-mask-input="'cpf'" />
+ *   <input v-mask-input="{ mask: 'currency', options: { prefix: 'R$ ' } }" />
+ * </template>
+ * ```
+ */
+const vMaskInput: ObjectDirective<HTMLElement, VueMaskBinding> = {
+  mounted(el, binding) {
+    applyMask(resolveVueElement(el), binding.value);
+  },
+
+  updated(el, binding) {
+    // Every parent re-render lands here. Re-masking an unchanged binding would
+    // rebuild the buffer and send the caret to the end while the user types.
+    if (sameBinding(binding.value, binding.oldValue as VueMaskBinding)) return;
+
+    applyMask(resolveVueElement(el), binding.value);
+  },
+
+  unmounted(el) {
+    const target = resolveVueElement(el) as MaskedElement | null;
+    target?.inputmask?.remove?.();
+  },
+
+  // Without this, @vue/server-renderer warns about an unhandled custom
+  // directive. There is nothing to render server-side.
+  getSSRProps: () => ({}),
+};
+
+export default vMaskInput;

package/src/vue/index.ts

@@ -0,0 +1,13 @@
+export { default as vMaskInput } from './directive';
+export { default as useMaskInput } from './useMaskInput';
+
+export { formatWithMask, unformatWithMask } from '../core';
+
+export type {
+  Mask,
+  MaskRefTarget,
+  Options,
+  UseMaskInputReturn,
+  VueMaskBinding,
+  VueMaskConfig,
+} from './types';

package/src/vue/resolveVueElement.ts

@@ -0,0 +1,34 @@
+import { findInputElement, isHTMLElement } from '../core/elementResolver';
+
+import type { MaskRefTarget } from './types';
+
+/**
+ * Resolves whatever Vue hands us into the element that should carry the mask.
+ *
+ * A directive always receives a DOM element. A `:ref` on a component receives
+ * the component's public instance instead, so the element has to be dug out of
+ * `$el` first. Either way the existing `findInputElement` does the final
+ * wrapper search, which is the same code path that makes Ant Design work on the
+ * React side.
+ *
+ * Fragment-root components resolve to `null` on purpose: their `$el` is a text
+ * anchor node, and Vue itself refuses this case for directives
+ * ("Runtime directive used on component with non-element root node"). Walking
+ * up to `parentElement` could just as easily find a sibling input as the
+ * intended one.
+ *
+ * @param target - Element, component public instance, or null
+ * @returns The element to mask, or null if there isn't one
+ */
+export default function resolveVueElement(target: MaskRefTarget): HTMLElement | null {
+  if (!target) return null;
+
+  if (isHTMLElement(target)) {
+    return findInputElement(target);
+  }
+
+  const { $el } = target as { $el?: unknown };
+  if (!isHTMLElement($el)) return null;
+
+  return findInputElement($el);
+}

package/src/vue/types.ts

@@ -0,0 +1,35 @@
+import type { Mask, Options } from '../types/mask';
+
+export type { Mask, Options } from '../types/mask';
+
+/** Object form of the directive binding, for when options are needed. */
+export interface VueMaskConfig {
+  mask: Mask;
+  options?: Options;
+}
+
+/**
+ * Everything `v-mask-input` accepts. A bare mask covers the common case;
+ * the object form adds options.
+ */
+export type VueMaskBinding = Mask | VueMaskConfig;
+
+/**
+ * What Vue hands a `:ref` callback: a DOM element for a native tag, or the
+ * component's public instance for a component. `$el` is typed loosely because
+ * a fragment-root component exposes a text anchor node there, not an element.
+ */
+export type MaskRefTarget = Element | { $el?: unknown } | null;
+
+export interface UseMaskInputReturn {
+  /** Bind with `:ref="maskRef"`. */
+  maskRef: (target: MaskRefTarget) => void;
+  /**
+   * Current unmasked value. Call this from event handlers and imperative code.
+   *
+   * NOT reactive: `{{ unmaskedValue() }}` in a template renders once and never
+   * updates, because reading the DOM registers no reactive dependency. For a
+   * value the template should track, bind `v-model` with `autoUnmask: true`.
+   */
+  unmaskedValue: () => string;
+}

package/src/vue/useMaskInput.ts

@@ -0,0 +1,56 @@
+import applyMask from './applyMask';
+import resolveVueElement from './resolveVueElement';
+import { getUnmaskedValue } from '../utils';
+import isServer from '../utils/isServer';
+
+import type {
+  MaskRefTarget, Mask, Options, UseMaskInputReturn,
+} from './types';
+
+/**
+ * Composable form, for imperative use and for reading the raw value when
+ * `autoUnmask` is off.
+ *
+ * Narrower than the directive on purpose: wrapper components (PrimeVue,
+ * Element Plus, Ant Design Vue) are already covered by `v-mask-input`, because
+ * Vue applies directives to a component's root element and the mask engine
+ * searches inside it. Reach for this when you need `unmaskedValue()` or a ref
+ * you can hold.
+ *
+ * @param mask - The mask pattern or alias
+ * @param options - Optional mask configuration options
+ * @returns A ref callback to bind, and an unmasked-value accessor
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useMaskInput } from 'use-mask-input/vue'
+ * const { maskRef, unmaskedValue } = useMaskInput('cpf')
+ * function submit() { console.log(unmaskedValue()) }
+ * </script>
+ *
+ * <template><input :ref="maskRef" /></template>
+ * ```
+ */
+export default function useMaskInput(mask: Mask, options?: Options): UseMaskInputReturn {
+  if (isServer) {
+    return {
+      maskRef: () => {
+        // server doesn't have dom, so just do nothing
+      },
+      unmaskedValue: () => '',
+    };
+  }
+
+  let element: HTMLElement | null = null;
+
+  const maskRef = (target: MaskRefTarget): void => {
+    element = resolveVueElement(target);
+    applyMask(element, { mask, options });
+  };
+
+  return {
+    maskRef,
+    unmaskedValue: () => getUnmaskedValue(element),
+  };
+}