@desource/phone-mask-nuxt 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @desource/phone-mask-nuxt
 
+## 1.4.0
+
+### Minor Changes
+
+- Core Upgrades:
+  - Added `@desource/phone-mask/kit` subpath for formatter, handlers, services, utilities, and shared country selector helpers
+  - Root `@desource/phone-mask` now focuses on country mask entries/data. Helper, formatter, handler, service, and utility imports should use `@desource/phone-mask/kit`
+  - Added shared country selector DOM, positioning, keyboard, and focus helpers used by framework packages
+
+- Vue/React/Svelte Upgrades:
+  - Rebuilt the country selector dropdown with stable body-rendered fixed positioning using Portal/Teleport patterns
+  - Improved dropdown UX across desktop and mobile: viewport-aware above/below placement, body-level rendering, outside-click close, Escape close, focus restore, search keyboard navigation, and empty-results keyboard safety
+  - Improved dropdown accessibility semantics by exposing the selector popup as a searchable dialog with listbox options
+  - Aligned country selector behavior and tests across React, Vue, and Svelte through shared common/core helpers
+
+- React Upgrades:
+  - Simplified internal memoization and callback usage where it reduced bundle/runtime overhead without changing behavior
+
+- Svelte Upgrades:
+  - Cleaned up event listener and attachment typings for newer Svelte/TypeScript tooling
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @desource/phone-mask-vue@1.4.0
+
+## 1.3.1
+
+### Patch Changes
+
+- Core Upgrades:
+  - Sync country masks with google-libphonenumber (🇸🇰 Slovakia updates)
+
+- Updated dependencies []:
+  - @desource/phone-mask-vue@1.3.1
+
 ## 1.3.0
 
 ### Minor Changes

package/README.md

@@ -110,6 +110,91 @@ const handleChange = (nextPhone: PMaskPhoneNumber) => {
 </script>
 ```
 
+### SSR + Auto-imports in Practice
+
+`@desource/phone-mask-nuxt` is SSR-safe: the module config is evaluated on server, while the UI component is registered in client mode.
+
+```vue
+<script setup lang="ts">
+const phone = ref('');
+const valid = ref(false);
+</script>
+
+<template>
+  <!-- Auto-imported: no explicit component import required -->
+  <PhoneInput id="phone" name="phone" v-model="phone" country="US" @validation-change="valid = $event" />
+
+  <p v-if="valid">✓ Ready to submit</p>
+</template>
+```
+
+### Backend Payload (Raw Digits)
+
+```vue
+<script setup lang="ts">
+import type { PMaskPhoneNumber } from '#imports';
+
+const phoneDigits = ref('');
+
+const handlePhoneChange = async (phone: PMaskPhoneNumber) => {
+  await $fetch('/api/profile/phone', {
+    method: 'POST',
+    body: {
+      phoneDigits: phone.digits, // unformatted value for backend
+      phoneFull: phone.full // optional full number with country code
+    }
+  });
+};
+</script>
+
+<template>
+  <PhoneInput v-model="phoneDigits" country="US" @change="handlePhoneChange" />
+</template>
+```
+
+### Auto-importing Helpers + Composable
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@desource/phone-mask-nuxt'],
+  phoneMask: {
+    // Disable auto-imported styles, component, and directive if you don't need them
+    css: false,
+    component: false,
+    directive: false,
+    // And enable only needed auto-imports
+    helpers: true,
+    composable: true
+  }
+});
+```
+
+Then use them directly in SFCs without manual imports:
+
+```vue
+<script setup lang="ts">
+const value = ref('');
+const selectedCountry = ref('US');
+
+const { inputRef, setCountry } = usePhoneMask({
+  value,
+  onChange: (digits) => (value.value = digits),
+  country: selectedCountry
+});
+
+const setGermany = () => {
+  setCountry('DE');
+};
+</script>
+
+<template>
+  <input ref="inputRef" type="tel" />
+  <button @click="setGermany">Use Germany</button>
+  <p>Code for DE: {{ PMaskHelpers.MasksMap.DE.code }}</p>
+</template>
+```
+
 ## ⚙️ Configuration
 
 ### Module Options
@@ -365,7 +450,7 @@ By default (without extra options), Nuxt auto-imports:
 Enable `phoneMask.helpers: true` to auto-import:
 
 - `vPhoneMaskSetCountry` — Programmatically set country for directive
-- `PMaskHelpers` — Utility functions from `@desource/phone-mask-vue/core`
+- `PMaskHelpers` — Core kit utilities and mask data from `@desource/phone-mask-vue/core`
 
 Enable `phoneMask.composable: true` to auto-import:
 

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "phoneMask",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desource/phone-mask-nuxt",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "🎯 Zero-config Nuxt module for international phone masking. Powered by @desource/phone-mask with Google libphonenumber sync.",
   "type": "module",
   "exports": {
@@ -54,15 +54,14 @@
     "vue": "^3.4.33"
   },
   "dependencies": {
-    "@desource/phone-mask-vue": "1.3.0"
+    "@desource/phone-mask-vue": "1.4.0"
   },
   "devDependencies": {
-    "@nuxt/kit": "^4.4.2",
+    "@nuxt/kit": "^4.4.4",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/test-utils": "^4.0.0",
-    "nuxt": "^4.4.2",
-    "vite": "7.3.1",
-    "vue": "^3.5.31"
+    "@nuxt/test-utils": "^4.0.3",
+    "nuxt": "^4.4.4",
+    "vue": "^3.5.34"
   },
   "scripts": {
     "dev:prepare": "nuxt prepare",