@desource/phone-mask-vue 0.2.0

package/dist/types/types.d.ts

@@ -0,0 +1,184 @@
+import type { MaskFull, CountryKey } from '@desource/phone-mask';
+export type Size = 'compact' | 'normal' | 'large';
+export type Theme = 'auto' | 'light' | 'dark';
+export type PhoneNumber = {
+    full: string;
+    fullFormatted: string;
+    digits: string;
+};
+export interface PhoneInputProps {
+    /** Whether to preselect a country by its ISO 3166-1 alpha-2 code */
+    country?: CountryKey;
+    /**
+     * Whether to auto-detect country via geo IP lookup.
+     * Note: This requires an external geo IP service and may not work in all environments.
+     * @default true
+     */
+    detect?: boolean;
+    /** Locale for country names (defaults to browser language) */
+    locale?: string;
+    /**
+     * Size preset for the component ("compact" | "normal" | "large").
+     * @default 'normal'
+     */
+    size?: Size;
+    /**
+     * Theme preset for the component ("auto" | "light" | "dark").
+     * @default 'auto'
+     */
+    theme?: Theme;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Whether to show the copy button.
+     * @default true
+     */
+    showCopy?: boolean;
+    /**
+     * Whether to show the clear button.
+     * @default false
+     */
+    showClear?: boolean;
+    /**
+     * Whether to show validation related styles (border & outline).
+     * @default true
+     */
+    withValidity?: boolean;
+    /**
+     * Custom search placeholder.
+     * @default 'Search country or code...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Custom no results text.
+     * @default 'No countries found'
+     */
+    noResultsText?: string;
+    /**
+     * Custom clear button label.
+     * @default 'Clear phone number'
+     */
+    clearButtonLabel?: string;
+    /** Dropdown menu custom class */
+    dropdownClass?: string;
+    /**
+     * Whether to disable default internal styles.
+     * @default false
+     */
+    disableDefaultStyles?: boolean;
+}
+export interface PhoneInputEmits {
+    /**
+     * Emitted when the value changes.
+     * Provides an object with:
+     * - full: Full phone number with country code (e.g. +1234567890)
+     * - fullFormatted: Full phone number formatted according to country rules (e.g. +1 234-567-890)
+     * - digits: Only the digits of the phone number without country code (e.g. 234567890)
+     */
+    (e: 'change', value: PhoneNumber): void;
+    /** Emitted when the country changes */
+    (e: 'country-change', country: MaskFull): void;
+    /** Emitted when validation state changes */
+    (e: 'validation-change', isValid: boolean): void;
+    /** Emitted on focus */
+    (e: 'focus', event: FocusEvent): void;
+    /** Emitted on blur */
+    (e: 'blur', event: FocusEvent): void;
+    /** Emitted when phone number is copied */
+    (e: 'copy', value: string): void;
+    /** Emitted when input is cleared */
+    (e: 'clear'): void;
+}
+export interface PhoneInputSlots {
+    /** Slot for custom action buttons before default ones */
+    'actions-before': {};
+    /** Slots for flag icons in the country list and country selector */
+    flag: {
+        country: MaskFull;
+    };
+    /** Slot for custom copy buttons */
+    'copy-svg': {
+        copied: boolean;
+    };
+    /** Slot for custom clear button */
+    'clear-svg': {};
+}
+export interface PhoneInputExposed {
+    /** Focus the phone input */
+    focus: () => void;
+    /** Blur the phone input */
+    blur: () => void;
+    /** Clear the phone input */
+    clear: () => void;
+    /** Select a country by its ISO 3166-1 alpha-2 code */
+    selectCountry: (country: CountryKey) => void;
+    /** Get the full phone number with country code (e.g. +1234567890) */
+    getFullNumber: () => string;
+    /** Get the full phone number formatted according to country rules (e.g. +1 234-567-890) */
+    getFullFormattedNumber: () => string;
+    /** Get only the digits of the phone number without country code (e.g. 234567890) */
+    getDigits: () => string;
+    /** Check if the current phone number is valid */
+    isValid: () => boolean;
+    /** Check if the current phone number is complete */
+    isComplete: () => boolean;
+}
+export interface FormatterHelpers {
+    formatDisplay: (digits: string) => string;
+    getMaxDigits: () => number;
+    getPlaceholder: () => string;
+    getCaretPosition: (digitIndex: number) => number;
+    getDigitRange: (digits: string, selStart: number, selEnd: number) => [number, number] | null;
+    isComplete: (digits: string) => boolean;
+}
+export interface PMaskGeoCache {
+    country_code: string;
+    ts: number;
+}
+/** Configuration options for the phone mask directive */
+export interface PMaskDirectiveOptions {
+    /** Country ISO code (e.g., 'US', 'DE', 'GB') */
+    country?: string;
+    /** Locale for country names (default: navigator.language) */
+    locale?: string;
+    /** Auto-detect country from IP/locale (default: false) */
+    detect?: boolean;
+    /**
+     * Callback when formatted value changes.
+     * Provides full number, formatted phone number, and raw digits.
+     * @example
+     * onChange: (phone) => {
+     *   console.log(phone.full); // +1234567890
+     *   console.log(phone.fullFormatted); // +1 234-567-890
+     *   console.log(phone.digits); // 234567890
+     * }
+     */
+    onChange?: (phone: PhoneNumber) => void;
+    /** Callback when country changes */
+    onCountryChange?: (country: MaskFull) => void;
+}
+/** Internal state stored on the input element of the directive */
+export interface PMaskDirectiveState {
+    country: MaskFull;
+    formatter: FormatterHelpers;
+    digits: string;
+    locale: string;
+    options: PMaskDirectiveOptions;
+    beforeInputHandler?: (e: InputEvent) => void;
+    inputHandler?: (e: Event) => void;
+    keydownHandler?: (e: KeyboardEvent) => void;
+    pasteHandler?: (e: ClipboardEvent) => void;
+}
+/** Extended HTMLInputElement with directive state */
+export interface DirectiveHTMLInputElement extends HTMLInputElement {
+    __phoneMaskState?: PMaskDirectiveState;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@desource/phone-mask-vue",
+  "version": "0.2.0",
+  "description": "🔌 Vue 3 component & directive for international phone number masking. Powered by @desource/phone-mask with Google libphonenumber sync.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "phone",
+    "mask",
+    "input",
+    "component",
+    "directive",
+    "international",
+    "libphonenumber",
+    "country-code",
+    "phone-number",
+    "formatting",
+    "validation",
+    "composition-api",
+    "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-vue"
+  },
+  "bugs": {
+    "url": "https://github.com/DeSource-Labs/phone-mask/issues"
+  },
+  "homepage": "https://github.com/DeSource-Labs/phone-mask/tree/main/packages/phone-mask-vue#readme",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./assets/lib.css": "./dist/phone-mask-vue.css"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "dependencies": {
+    "@desource/phone-mask": "0.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vue-tsc": "^3.1.3",
+    "vue": "^3.5.22"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.33"
+  },
+  "scripts": {
+    "clean": "rimraf dist tsconfig.tsbuildinfo",
+    "build": "pnpm build-lib && pnpm build-types",
+    "build-lib": "vite build",
+    "build-types": "vue-tsc --emitDeclarationOnly --declaration -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}