npm - @alikhalilll/ui - Versions diffs - 1.1.1 → 1.2.0 - Mend

@alikhalilll/ui 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +1 -1
package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs +1485 -0
package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs.map +1 -0
package/dist/index.d.ts +96 -1
package/dist/index.mjs +34 -29
package/dist/tell-input.d.ts +96 -1
package/dist/tell-input.mjs +11 -6
package/entries/tell-input/README.md +17 -2
package/package.json +1 -1
package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Clc-B8SW.mjs +0 -1353
package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Clc-B8SW.mjs.map +0 -1

package/dist/tell-input.d.ts CHANGED Viewed

@@ -49,6 +49,8 @@ emptyText: string;
 loadingText: string;
 suggestedLabel: string;
 allCountriesLabel: string;
+countryLabel: string;
+selectCountryLabel: string;
 suggestedLimit: number;
 maxResults: number;
 kbdOpen: string | null;
@@ -96,6 +98,12 @@ declare type __VLS_Props_2 = {
     /** Override the right-side kbd hints. Pass `null` to hide. */
     kbdOpen?: string | null;
     kbdClose?: string | null;
+    /** BCP-47 locale — country names render localized via `Intl.DisplayNames`. */
+    locale?: string;
+    /** Prefix of the trigger's `aria-label` when a country is selected, e.g. `"Country"`. */
+    countryLabel?: string;
+    /** Trigger's `aria-label` when no country is selected. */
+    selectCountryLabel?: string;
 };
 declare type __VLS_Props_3 = {
@@ -391,12 +399,32 @@ export declare const ACountrySelect: __VLS_WithTemplateSlots_2<typeof __VLS_comp
 export declare const ATellInput: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+/** Text direction for the field. `'auto'` (or omitting the prop) inherits from the
+ *  nearest `[dir]` ancestor / `<html dir>`; `'ltr'` / `'rtl'` force it. */
+export declare type ATellInputDir = 'ltr' | 'rtl' | 'auto';
 export declare interface ATellInputProps {
     class?: HTMLAttributes['class'];
     placeholder?: string;
     disabled?: boolean;
     loading?: boolean;
     size?: ATellInputSize;
+    /**
+     * Text direction. Omit (or pass `'auto'`) to inherit from the page — RTL pages get an
+     * RTL field automatically. Pass `'ltr'` / `'rtl'` to force it.
+     */
+    dir?: ATellInputDir;
+    /**
+     * BCP-47 locale (e.g. `'ar'`, `'fr'`). When set, country names render localized via
+     * `Intl.DisplayNames` and the format hint uses the locale's numerals.
+     */
+    locale?: string;
+    /**
+     * Localized UI strings. A single bag covering the picker, validation errors, and a11y
+     * labels. Individual props (`searchPlaceholder`, `emptyText`, `loadingText`,
+     * `errorMessages`) take precedence over the matching `messages` key when both are set.
+     */
+    messages?: TellInputMessagesInput;
     /**
      * Whitelist of allowed dial-digit codes (no `+`), e.g. `['20', '966']`.
      * Countries outside this list are still shown in the picker but rendered as disabled.
@@ -467,6 +495,9 @@ export declare interface CountryOption<T = RestCountry> {
 export declare const DEFAULT_ERROR_MESSAGES: Record<PhoneValidationReason, string>;
+/** English defaults for every {@link TellInputMessages} key. */
+export declare const DEFAULT_MESSAGES: TellInputMessages;
 /**
  * Default flag URL builder — flagcdn.com hosts PNG flags at multiple widths and is
  * generous with caching + no API key required. Swap via the `flagUrl` prop on
@@ -528,6 +559,30 @@ declare interface ExtendedProps extends ATellInputProps {
 export declare type FlagUrlBuilder = (iso2: string, width: number) => string;
+/**
+ * Base code points of contiguous decimal-digit blocks. Each block runs `base`‥`base+9`
+ * for digit `0`‥`9`, so the ASCII digit is `codePoint - base`. Add a script by appending
+ * one entry here.
+ */
+export declare const LOCALE_DIGIT_RANGES: {
+    name: string;
+    base: number;
+}[];
+/**
+ * Return a copy of the country list with display names localized to `locale` via
+ * `Intl.DisplayNames`. `search_key` is rebuilt (keeping the English name too) so search
+ * still matches either spelling. Unknown locales / regions fall back to the English name.
+ */
+export declare function localizeCountries(list: CountryOption[], locale?: string): CountryOption[];
+/**
+ * Replace any supported non-ASCII decimal digit with its ASCII equivalent. Every other
+ * character (spaces, `+`, separators, letters) is left untouched — callers still run their
+ * own `\D` cleanup afterwards.
+ */
+export declare function normalizeDigits(input: string): string;
 export declare interface PhoneRequiredInfo {
     iso2: string;
     dial_code: string;
@@ -560,6 +615,12 @@ export declare interface PhoneValidationResult {
     details?: Record<string, unknown>;
 }
+/**
+ * Merge a partial `messages` override onto the English defaults. Used internally by
+ * `ATellInput` to resolve a complete {@link TellInputMessages} object.
+ */
+export declare function resolveMessages(input?: TellInputMessagesInput): TellInputMessages;
 export declare interface RestCountry {
     name?: {
         common?: string;
@@ -587,6 +648,36 @@ declare function selectCountry(option: CountryOption): void;
  */
 declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Every user-facing string in the tell-input UI, bundled so a consumer can localize the
+ * component in one prop. Each key has an English default in {@link DEFAULT_MESSAGES}.
+ */
+export declare interface TellInputMessages {
+    /** Placeholder of the country-picker search box. */
+    searchPlaceholder: string;
+    /** Shown when a search yields no countries. */
+    emptyText: string;
+    /** Shown while the country list is loading. */
+    loadingText: string;
+    /** Header of the "Suggested" group (current + recent picks). */
+    suggestedLabel: string;
+    /** Header of the full country list. */
+    allCountriesLabel: string;
+    /** Validation error text, keyed by reason. */
+    errorMessages: Record<PhoneValidationReason, string>;
+    /** Prefix of the country trigger's `aria-label`, e.g. `"Country: Egypt"`. */
+    countryLabel: string;
+    /** `aria-label` of the country trigger when no country is selected. */
+    selectCountryLabel: string;
+    /** `aria-label` of the phone input element. */
+    phoneInputLabel: string;
+}
+/** Partial override shape for the `messages` prop — every key (and every error reason) is optional. */
+export declare type TellInputMessagesInput = Partial<Omit<TellInputMessages, 'errorMessages'>> & {
+    errorMessages?: Partial<Record<PhoneValidationReason, string>>;
+};
 /**
  * Reactive wrapper. Kicks off detection in `onMounted` so SSR renders an empty value and the
  * client patches in the real country once resolved.
@@ -616,7 +707,7 @@ export declare interface UsePhoneValidationReturn {
     getRequiredInfo(country: {
         iso2: string;
         dial_code?: string;
-    }): PhoneRequiredInfo | null;
+    }, locale?: string): PhoneRequiredInfo | null;
     validate(input: ValidateArgs): PhoneValidationResult;
 }
@@ -626,12 +717,16 @@ export declare type ValidateArgs = {
         dial_code?: string;
     } | null | undefined;
     phone?: undefined;
+    /** BCP-47 locale — localizes the numerals in the returned `required.format_hint`. */
+    locale?: string;
 } | {
     country: {
         iso2: string;
         dial_code?: string;
     } | null | undefined;
     phone: string | null;
+    /** BCP-47 locale — localizes the numerals in the returned `required.format_hint`. */
+    locale?: string;
 };
 export { }

package/dist/tell-input.mjs CHANGED Viewed

@@ -1,13 +1,18 @@
-import { _ as e, a as s, b as l, D as n, c as u, d as o, e as r, u as A, f as c } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-Clc-B8SW.mjs";
+import { _ as e, a as t, b as l, D as n, c as o, L as r, d as u, e as i, f as A, l as E, n as S, r as C, u as D, g as _ } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs";
 export {
   e as ACountryFlag,
-  s as ACountrySelect,
+  t as ACountrySelect,
   l as ATellInput,
   n as DEFAULT_ERROR_MESSAGES,
+  o as DEFAULT_MESSAGES,
+  r as LOCALE_DIGIT_RANGES,
   u as aTellInputVariants,
-  o as defaultFlagUrl,
-  r as detectCountry,
-  A as useCountryDetection,
-  c as usePhoneValidation
+  i as defaultFlagUrl,
+  A as detectCountry,
+  E as localizeCountries,
+  S as normalizeDigits,
+  C as resolveMessages,
+  D as useCountryDetection,
+  _ as usePhoneValidation
 };
 //# sourceMappingURL=tell-input.mjs.map

package/entries/tell-input/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # `@alikhalilll/ui/tell-input`
-Vue 3 phone-number input with smart country detection (libphonenumber-js + IP/timezone/locale hint), a responsive popover/drawer country picker, and a structured `PhoneValidationResult` exposed via template ref.
+Vue 3 phone-number input with smart country detection (libphonenumber-js + IP/timezone/locale hint), a responsive popover/drawer country picker, and a structured `PhoneValidationResult` exposed via template ref. RTL-aware, localisable, and accepts alternative numeral systems.
 ## Install
@@ -31,7 +31,22 @@ const country = ref<number | null>(null);
 </template>
 ```
-The default shape is a plain phone input with the country picker hidden. As the user types or pastes, detection runs (debounced) against known dial codes; on first match the picker slides in pre-filled and `phone` is normalised to the national significant number — `01066105963` becomes `1066105963`, `+447911123456` becomes `7911123456`.
+The default shape is a plain phone input with the country picker hidden. As the user types or pastes, detection runs (debounced) against known dial codes; on first match a flag-only trigger reveals at the **end** of the field, the dial code shows as a static prefix inside the input, and `phone` is normalised to the national significant number — `01066105963` becomes `1066105963`, `+447911123456` becomes `7911123456`.
+## Internationalization
+- **RTL** — direction inherits from the page (`<div dir="rtl">` / `<html dir="rtl">`), or force it with `dir="ltr"` / `dir="rtl"`. The phone field row stays LTR (dial prefix → digits → flag); only the helper/error text and the country popover follow the page direction.
+- **`locale`** — localises country names (`Intl.DisplayNames`) and the format-hint numerals.
+- **`messages`** — one bag for every UI string (picker labels, validation errors, a11y labels).
+- **Alternative numerals** — digits typed as Arabic-Indic (`٠-٩`), Persian (`۰-۹`), Devanagari, or Bengali are normalised to ASCII. `normalizeDigits` is exported for standalone use.
+```vue
+<template>
+  <div dir="rtl">
+    <ATellInput v-model:phone="phone" v-model:country="country" locale="ar" :messages="ar" />
+  </div>
+</template>
+```
 ## Variants

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@alikhalilll/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Headless, shadcn-vue style Vue 3 component library — every component is its own importable subpath (`@alikhalilll/ui/tell-input`, `@alikhalilll/ui/popover`, …) so users pay only for what they actually use.",
   "license": "MIT",
   "author": "alikhalilll",