@desource/phone-mask-nuxt 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @desource/phone-mask-nuxt
 
+## 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

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "phoneMask",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "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.3.1",
   "description": "🎯 Zero-config Nuxt module for international phone masking. Powered by @desource/phone-mask with Google libphonenumber sync.",
   "type": "module",
   "exports": {
@@ -54,15 +54,15 @@
     "vue": "^3.4.33"
   },
   "dependencies": {
-    "@desource/phone-mask-vue": "1.3.0"
+    "@desource/phone-mask-vue": "1.3.1"
   },
   "devDependencies": {
     "@nuxt/kit": "^4.4.2",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/test-utils": "^4.0.0",
+    "@nuxt/test-utils": "^4.0.2",
     "nuxt": "^4.4.2",
     "vite": "7.3.1",
-    "vue": "^3.5.31"
+    "vue": "^3.5.33"
   },
   "scripts": {
     "dev:prepare": "nuxt prepare",