@desource/phone-mask-nuxt 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @desource/phone-mask-nuxt
+
+## 0.2.0
+
+### Minor Changes
+
+- Initial release of phone-mask monorepo packages
+  - Core phone masking library with Google libphonenumber integration
+  - Vue 3 component and directive for phone input
+  - Nuxt 3 module with zero-config setup
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @desource/phone-mask-vue@0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 DeSource Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,398 @@
+# @desource/phone-mask-nuxt
+
+> Nuxt 3 module for phone input with Google's libphonenumber data
+
+[![npm version](https://img.shields.io/npm/v/@desource/phone-mask-nuxt?color=blue&logo=nuxt.js)](https://www.npmjs.com/package/@desource/phone-mask-nuxt)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/DeSource-Labs/phone-mask/blob/main/LICENSE)
+
+Drop-in Nuxt 3 module with auto-imports, SSR support, and zero configuration.
+
+## ✨ Features
+
+- 🎯 **Zero Config** — Works out of the box
+- 🔄 **Auto-imports** — Components and composables
+- 🌐 **SSR Compatible** — Server-side rendering ready
+- 🎨 **Styleable** — Bring your own styles or use defaults
+- 🔧 **TypeScript** — Fully typed
+- ⚡ **Optimized** — Tree-shaking and code splitting
+
+## 📦 Installation
+
+```bash
+npm install @desource/phone-mask-nuxt
+# or
+yarn add @desource/phone-mask-nuxt
+# or
+pnpm add @desource/phone-mask-nuxt
+```
+
+## 🚀 Setup
+
+Add the module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@desource/phone-mask-nuxt']
+});
+```
+
+That's it! The component and directive are now auto-imported.
+
+## 📖 Usage
+
+### Basic Component
+
+```vue
+<template>
+  <div>
+    <PhoneInput v-model="phone" country="US" />
+    <p>Phone: {{ phone }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const phone = ref('');
+</script>
+```
+
+### With Auto-detection
+
+```vue
+<template>
+  <PhoneInput v-model="phone" detect @country-change="onCountryChange" />
+</template>
+
+<script setup>
+const phone = ref('');
+
+const onCountryChange = (country) => {
+  console.log('Detected country:', country.name);
+};
+</script>
+```
+
+### Using the Directive
+
+```vue
+<template>
+  <div class="phone-wrapper">
+    <select v-model="selectedCountry">
+      <option value="US">🇺🇸 +1</option>
+      <option value="GB">🇬🇧 +44</option>
+      <option value="DE">🇩🇪 +49</option>
+    </select>
+
+    <input
+      v-phone-mask="{
+        country: selectedCountry,
+        onChange: handleChange
+      }"
+      class="phone-input"
+    />
+  </div>
+</template>
+
+<script setup>
+const selectedCountry = ref('US');
+const phone = ref('');
+
+const handleChange = (fullNumber, digits) => {
+  phone.value = fullNumber;
+};
+</script>
+```
+
+## ⚙️ Configuration
+
+### Module Options
+
+Configure the module in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@desource/phone-mask-nuxt'],
+
+  phoneMask: {
+    // Import styles automatically
+    css: true, // Default: true
+
+    // Register PhoneInput component
+    component: true, // Default: true
+
+    // Register v-phone-mask directive
+    directive: true, // Default: true
+
+    // Register shared helpers and types
+    helpers: true // Default: true
+  }
+});
+```
+
+### Custom Styling
+
+#### Option 1: Disable auto CSS import
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@desource/phone-mask-nuxt'],
+
+  phoneMask: {
+    css: false // Don't auto-import styles
+  }
+});
+```
+
+Then import manually where needed:
+
+```vue
+<style>
+@import '@desource/phone-mask-vue/assets/lib.css';
+
+/* Your custom overrides */
+.phone-input {
+  --pi-border: #your-color;
+}
+</style>
+```
+
+#### Option 2: Override CSS variables
+
+```vue
+<style>
+:root {
+  --pi-bg: #f9fafb;
+  --pi-border: #e5e7eb;
+  --pi-border-focus: #3b82f6;
+  --pi-text: #111827;
+}
+</style>
+```
+
+## 🔧 TypeScript
+
+The module provides automatic TypeScript support. Types are available globally:
+
+```ts
+// Auto-imported types
+import type {
+  PCountryKey,
+  PMaskBase,
+  PMaskBaseMap,
+  PMask,
+  PMaskMap,
+  PMaskWithFlag,
+  PMaskWithFlagMap,
+  PMaskFull,
+  PMaskFullMap,
+  PMaskPhoneNumber
+} from '#phone-mask';
+```
+
+## 📚 Examples
+
+### Form Integration
+
+```vue
+<template>
+  <form @submit.prevent="handleSubmit">
+    <div>
+      <label for="name">Name</label>
+      <input id="name" v-model="form.name" type="text" />
+    </div>
+
+    <div>
+      <label for="phone">Phone</label>
+      <PhoneInput id="phone" v-model="form.phone" country="US" @validation-change="phoneValid = $event" />
+    </div>
+
+    <button type="submit" :disabled="!phoneValid">Submit</button>
+  </form>
+</template>
+
+<script setup>
+const form = reactive({
+  name: '',
+  phone: ''
+});
+
+const phoneValid = ref(false);
+
+const handleSubmit = () => {
+  console.log('Form data:', form);
+};
+</script>
+```
+
+### With Pinia Store
+
+```ts
+// stores/user.ts
+import { defineStore } from 'pinia';
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    phoneDigits: '',
+    country: 'US'
+  }),
+
+  actions: {
+    setPhoneDigits(phone: string) {
+      this.phone = phone;
+    },
+
+    setCountry(id: string) {
+      this.country = id;
+    }
+  }
+});
+```
+
+```vue
+<template>
+  <PhoneInput
+    :model-value="userStore.phoneDigits"
+    :country="userStore.country"
+    @update:model-value="userStore.setPhoneDigits"
+    @country-change="userStore.setCountry($event.id)"
+  />
+</template>
+
+<script setup>
+const userStore = useUserStore();
+</script>
+```
+
+### Multi-step Form
+
+```vue
+<template>
+  <div>
+    <div v-if="step === 1">
+      <h2>Step 1: Contact Info</h2>
+      <PhoneInput v-model="formData.phone" country="US" @validation-change="phoneValid = $event" />
+      <button @click="nextStep" :disabled="!phoneValid">Next</button>
+    </div>
+
+    <div v-if="step === 2">
+      <h2>Step 2: Verification</h2>
+      <p>We'll send a code to: {{ formData.phone }}</p>
+      <button @click="prevStep">Back</button>
+      <button @click="submit">Send Code</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const step = ref(1);
+const phoneValid = ref(false);
+const formData = reactive({
+  phone: ''
+});
+
+const nextStep = () => {
+  if (phoneValid.value) step.value++;
+};
+
+const prevStep = () => {
+  step.value--;
+};
+
+const submit = async () => {
+  // Send verification code
+};
+</script>
+```
+
+### i18n Integration
+
+```vue
+<template>
+  <PhoneInput v-model="phone" :locale="$i18n.locale" :placeholder="$t('phone.placeholder')" />
+</template>
+
+<script setup>
+const { locale, t } = useI18n();
+const phone = ref('');
+</script>
+```
+
+## 🎯 Auto-imports
+
+The following are automatically imported (until disabled in nuxt.config.ts):
+
+### Components
+
+- `PhoneInput` — Main phone input component
+
+### Directives
+
+- `vPhoneMask` — Phone mask directive
+
+### Helpers
+
+- `vPhoneMaskSetCountry` — Programmatically set country for directive
+- `PMaskHelpers` — Utility functions for phone masks like:
+  - `getFlagEmoji`
+  - `countPlaceholders`
+  - `formatDigitsWithMap`
+  - `pickMaskVariant`
+  - `removeCountryCodePrefix`
+  - And more...
+
+Read more about helpers in the [Utility Functions of @desource/phone-mask README](../phone-mask/README.md#utility-functions).
+
+### Types
+
+All TypeScript types from `@desource/phone-mask-vue`
+
+## 🔄 Migration from Vue Plugin
+
+If you're migrating from the Vue plugin:
+
+**Before:**
+
+```ts
+// main.ts
+import PhoneMaskPlugin from '@desource/phone-mask-vue';
+import '@desource/phone-mask-vue/style.css';
+
+app.use(PhoneMaskPlugin);
+```
+
+**After:**
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@desource/phone-mask-nuxt']
+});
+```
+
+No changes needed in your components!
+
+## 📦 What's Included
+
+- `PhoneInput` component (auto-imported)
+- `vPhoneMask` directive (auto-imported)
+- Default styles (auto-imported, can be disabled)
+- TypeScript definitions (auto-imported)
+- Utility functions (auto-imported)
+
+## 🔗 Related
+
+- [@desource/phone-mask](../phone-mask) — Core library
+- [@desource/phone-mask-vue](../phone-mask-vue) — Vue 3 component
+
+## 📄 License
+
+[MIT](../../LICENSE) © 2025 DeSource Labs
+
+## 🤝 Contributing
+
+See [Contributing Guide](../../CONTRIBUTING.md)
+
+---
+
+<div align="center">
+  <sub>Made with ❤️ by <a href="https://github.com/DeSource-Labs">DeSource Labs</a></sub>
+</div>

package/dist/module.d.mts

@@ -0,0 +1,12 @@
+import { NuxtModule } from '@nuxt/schema';
+
+interface ModuleOptions {
+    css?: boolean;
+    component?: boolean;
+    directive?: boolean;
+    helpers?: boolean;
+}
+declare const module: NuxtModule<ModuleOptions>;
+
+export { module as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "phoneMask",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "configKey": "phoneMask",
+  "version": "0.2.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,61 @@
+import { defineNuxtModule, createResolver, isNuxtMajorVersion, addPlugin, addImports, addComponent } from '@nuxt/kit';
+import { fileURLToPath } from 'url';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "phoneMask",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
+  },
+  defaults: {
+    css: true,
+    component: true,
+    directive: true,
+    helpers: true
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ types: "@desource/phone-mask-nuxt" });
+    });
+    nuxt.hook("modules:done", () => {
+      if (!isNuxtMajorVersion(2, nuxt) && options.directive) {
+        addPlugin(resolve(runtimeDir, "plugin.phone-mask"));
+      }
+    });
+    if (options.helpers) {
+      const shared = resolve(runtimeDir, "shared");
+      addImports([
+        { name: "vPhoneMaskSetCountry", from: shared },
+        { name: "PMaskHelpers", from: shared },
+        { name: "vPhoneMask", from: shared },
+        { name: "PCountryKey", from: shared, type: true },
+        { name: "PMaskBase", from: shared, type: true },
+        { name: "PMaskBaseMap", from: shared, type: true },
+        { name: "PMask", from: shared, type: true },
+        { name: "PMaskMap", from: shared, type: true },
+        { name: "PMaskWithFlag", from: shared, type: true },
+        { name: "PMaskWithFlagMap", from: shared, type: true },
+        { name: "PMaskFull", from: shared, type: true },
+        { name: "PMaskFullMap", from: shared, type: true },
+        { name: "PMaskPhoneNumber", from: shared, type: true }
+      ]);
+    }
+    if (options.component) {
+      const componentDir = resolve(runtimeDir, "component");
+      addComponent({
+        name: "PhoneInput",
+        filePath: componentDir,
+        mode: "client"
+      });
+    }
+    if (options.css) {
+      nuxt.options.css.unshift("@desource/phone-mask-vue/assets/lib.css");
+    }
+  }
+});
+
+export { module as default };

package/dist/runtime/component.d.ts

@@ -0,0 +1,2 @@
+import { PhoneInput } from '@desource/phone-mask-vue';
+export default PhoneInput;

package/dist/runtime/component.js

@@ -0,0 +1,2 @@
+import { PhoneInput } from "@desource/phone-mask-vue";
+export default PhoneInput;

package/dist/runtime/plugin.phone-mask.d.ts

@@ -0,0 +1,3 @@
+import { type Plugin } from '#app';
+declare const plugin: Plugin;
+export default plugin;

package/dist/runtime/plugin.phone-mask.js

@@ -0,0 +1,9 @@
+import { vPhoneMask } from "@desource/phone-mask-vue";
+import { defineNuxtPlugin } from "#app";
+const plugin = defineNuxtPlugin({
+  name: "phone-mask",
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive("phone-mask", vPhoneMask);
+  }
+});
+export default plugin;

package/dist/runtime/shared.d.ts

@@ -0,0 +1 @@
+export { vPhoneMaskSetCountry, vPhoneMask, PMaskHelpers, type PCountryKey, type PMaskBase, type PMaskBaseMap, type PMask, type PMaskMap, type PMaskWithFlag, type PMaskWithFlagMap, type PMaskFull, type PMaskFullMap, type PMaskPhoneNumber } from '@desource/phone-mask-vue';

package/dist/runtime/shared.js

@@ -0,0 +1,5 @@
+export {
+  vPhoneMaskSetCountry,
+  vPhoneMask,
+  PMaskHelpers
+} from "@desource/phone-mask-vue";

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@desource/phone-mask-nuxt",
+  "version": "0.2.0",
+  "description": "🎯 Zero-config Nuxt 3 module for international phone masking. Powered by @desource/phone-mask with Google libphonenumber sync.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "nuxt3",
+    "vue",
+    "vue3",
+    "phone",
+    "mask",
+    "input",
+    "international",
+    "libphonenumber",
+    "country-code",
+    "phone-number",
+    "ssr",
+    "formatting",
+    "validation",
+    "typescript"
+  ],
+  "author": "Stefan Popov <stefan@desource-labs.org>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DeSource-Labs/phone-mask.git",
+    "directory": "packages/phone-mask-nuxt"
+  },
+  "bugs": {
+    "url": "https://github.com/DeSource-Labs/phone-mask/issues"
+  },
+  "homepage": "https://github.com/DeSource-Labs/phone-mask/tree/main/packages/phone-mask-nuxt#readme",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.33"
+  },
+  "dependencies": {
+    "@desource/phone-mask-vue": "0.2.0"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^4.2.0",
+    "@nuxt/module-builder": "^1.0.2",
+    "nuxt": "^4.1.3",
+    "vue": "^3.5.22"
+  },
+  "scripts": {
+    "postinstall": "nuxt prepare",
+    "clean": "rimraf dist",
+    "build": "nuxt-module-build build"
+  }
+}