@alikhalilll/ui 1.2.1 → 1.2.3

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 (92) hide show
  1. package/README.md +68 -45
  2. package/dist/assets/styles.css +2 -74
  3. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs +113 -0
  4. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs.map +1 -0
  5. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs +1606 -0
  6. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs.map +1 -0
  7. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs +241 -0
  8. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs.map +1 -0
  9. package/dist/entries/drawer/components/ADrawer.vue.d.ts +27 -0
  10. package/dist/entries/drawer/components/ADrawer.vue.d.ts.map +1 -0
  11. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts +29 -0
  12. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts.map +1 -0
  13. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts +9 -0
  14. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts.map +1 -0
  15. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts +11 -0
  16. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts.map +1 -0
  17. package/dist/entries/drawer/index.d.ts +5 -0
  18. package/dist/entries/drawer/index.d.ts.map +1 -0
  19. package/dist/entries/input/components/AInput.vue.d.ts +32 -0
  20. package/dist/entries/input/components/AInput.vue.d.ts.map +1 -0
  21. package/dist/entries/input/index.d.ts +2 -0
  22. package/dist/entries/input/index.d.ts.map +1 -0
  23. package/dist/entries/popover/components/APopover.vue.d.ts +20 -0
  24. package/dist/entries/popover/components/APopover.vue.d.ts.map +1 -0
  25. package/dist/entries/popover/components/APopoverContent.vue.d.ts +44 -0
  26. package/dist/entries/popover/components/APopoverContent.vue.d.ts.map +1 -0
  27. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts +17 -0
  28. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts.map +1 -0
  29. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts +11 -0
  30. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts.map +1 -0
  31. package/dist/entries/popover/composables/useEventScrollLock.d.ts +21 -0
  32. package/dist/entries/popover/composables/useEventScrollLock.d.ts.map +1 -0
  33. package/dist/entries/popover/index.d.ts +6 -0
  34. package/dist/entries/popover/index.d.ts.map +1 -0
  35. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts +46 -0
  36. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts.map +1 -0
  37. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts +35 -0
  38. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts.map +1 -0
  39. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts +16 -0
  40. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts.map +1 -0
  41. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts +10 -0
  42. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts.map +1 -0
  43. package/dist/entries/responsive-popover/index.d.ts +4 -0
  44. package/dist/entries/responsive-popover/index.d.ts.map +1 -0
  45. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts +26 -0
  46. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts.map +1 -0
  47. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts +136 -0
  48. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts.map +1 -0
  49. package/dist/entries/tell-input/components/ATellInput.vue.d.ts +141 -0
  50. package/dist/entries/tell-input/components/ATellInput.vue.d.ts.map +1 -0
  51. package/dist/entries/tell-input/composables/useCountryDetection.d.ts +44 -0
  52. package/dist/entries/tell-input/composables/useCountryDetection.d.ts.map +1 -0
  53. package/dist/entries/tell-input/composables/useCountryMatching.d.ts +44 -0
  54. package/dist/entries/tell-input/composables/useCountryMatching.d.ts.map +1 -0
  55. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts +110 -0
  56. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts.map +1 -0
  57. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts +67 -0
  58. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts.map +1 -0
  59. package/dist/entries/tell-input/composables/useTypingPhase.d.ts +50 -0
  60. package/dist/entries/tell-input/composables/useTypingPhase.d.ts.map +1 -0
  61. package/dist/entries/tell-input/index.d.ts +12 -0
  62. package/dist/entries/tell-input/index.d.ts.map +1 -0
  63. package/dist/entries/tell-input/utils/digits.d.ts +22 -0
  64. package/dist/entries/tell-input/utils/digits.d.ts.map +1 -0
  65. package/dist/entries/tell-input/utils/flag-url.d.ts +8 -0
  66. package/dist/entries/tell-input/utils/flag-url.d.ts.map +1 -0
  67. package/dist/entries/tell-input/utils/types.d.ts +120 -0
  68. package/dist/entries/tell-input/utils/types.d.ts.map +1 -0
  69. package/dist/index.d.ts +7 -1139
  70. package/dist/index.d.ts.map +1 -0
  71. package/dist/index.mjs +39 -33
  72. package/dist/popover.mjs +5 -4
  73. package/dist/responsive-popover.mjs +1 -1
  74. package/dist/tell-input.mjs +14 -9
  75. package/dist/utils/cn.d.ts +3 -0
  76. package/dist/utils/cn.d.ts.map +1 -0
  77. package/dist/utils/index.d.ts +3 -0
  78. package/dist/utils/index.d.ts.map +1 -0
  79. package/dist/{utils.d.ts → utils/sizes.d.ts} +18 -29
  80. package/dist/utils/sizes.d.ts.map +1 -0
  81. package/package.json +14 -10
  82. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-CjiJ12DR.mjs +0 -132
  83. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-CjiJ12DR.mjs.map +0 -1
  84. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-5YbO6FdM.mjs +0 -92
  85. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-5YbO6FdM.mjs.map +0 -1
  86. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs +0 -1489
  87. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs.map +0 -1
  88. package/dist/drawer.d.ts +0 -116
  89. package/dist/input.d.ts +0 -65
  90. package/dist/popover.d.ts +0 -117
  91. package/dist/responsive-popover.d.ts +0 -124
  92. package/dist/tell-input.d.ts +0 -740
@@ -1,1489 +0,0 @@
1
- import { ref as N, onMounted as be, defineComponent as _e, computed as C, watch as re, openBlock as B, createElementBlock as K, normalizeClass as V, unref as w, toDisplayString as M, renderSlot as h, createElementVNode as _, useModel as me, createBlock as he, withCtx as U, createVNode as F, createCommentVNode as H, withDirectives as He, vModelText as Ze, Fragment as pe, renderList as ke, mergeModels as De, useId as je, Transition as $e, createSlots as Je, normalizeProps as X, guardReactiveProps as ee } from "vue";
2
- import { useDebounceFn as Ye } from "@vueuse/core";
3
- import { ChevronDown as qe, Search as We, Check as xe, CheckCircle2 as Qe, AlertCircle as Xe } from "lucide-vue-next";
4
- import { isValidPhoneNumber as et, parsePhoneNumberFromString as de, getExampleNumber as tt } from "libphonenumber-js";
5
- import { c as R } from "./cn-B6yFEsav.mjs";
6
- import { c as ae, d as W, b as Me, D as Pe } from "./sizes-B_9MfLkz.mjs";
7
- import at from "libphonenumber-js/examples.mobile.json";
8
- import { cva as lt } from "class-variance-authority";
9
- import { _ as rt, b as nt, a as ot } from "./AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-5YbO6FdM.mjs";
10
- const st = [
11
- { name: "arabic-indic", base: 1632 },
12
- // ٠١٢٣٤٥٦٧٨٩
13
- { name: "extended-arabic", base: 1776 },
14
- // ۰۱۲۳۴۵۶۷۸۹ — Persian / Urdu
15
- { name: "devanagari", base: 2406 },
16
- // ०१२३४५६७८९
17
- { name: "bengali", base: 2534 }
18
- // ০১২৩৪৫৬৭৮৯
19
- ], it = (() => {
20
- const t = /* @__PURE__ */ new Map();
21
- for (const { base: r } of st)
22
- for (let e = 0; e <= 9; e++) t.set(r + e, String(e));
23
- return t;
24
- })();
25
- function ce(t) {
26
- const r = String(t ?? "");
27
- let e = "";
28
- for (const o of r) {
29
- const p = o.codePointAt(0);
30
- e += p != null && it.get(p) || o;
31
- }
32
- return e;
33
- }
34
- const Ee = "ali_ui_phone_countries_v1", ut = "https://restcountries.com/v3.1/all?fields=name,cca2,idd,flags", ct = at, Ie = () => typeof window < "u";
35
- function Q(t) {
36
- return ce(String(t ?? "")).replace(/\D/g, "");
37
- }
38
- function dt(t, r) {
39
- if (!r) return t;
40
- try {
41
- const e = new Intl.NumberFormat(r, { useGrouping: !1 });
42
- return t.replace(/[0-9]/g, (o) => e.format(Number(o)));
43
- } catch {
44
- return t;
45
- }
46
- }
47
- function ye(t) {
48
- const r = Q(t);
49
- return r ? `+${r}` : "";
50
- }
51
- function ue(t) {
52
- return String(t ?? "").trim().toUpperCase();
53
- }
54
- function Ue(t) {
55
- return String(t ?? "").replace(/^0+/, "");
56
- }
57
- function le(t, r) {
58
- const e = ye(t), o = Ue(Q(r));
59
- return e && o ? `${e}${o}` : null;
60
- }
61
- function ft(t) {
62
- const r = Q(t);
63
- if (!r) return { min: null, max: null };
64
- const e = r.length;
65
- return { min: Math.max(4, e - 2), max: e + 2 };
66
- }
67
- function gt(t) {
68
- const r = t?.root?.trim();
69
- if (!r || !r.startsWith("+")) return null;
70
- const e = t?.suffixes?.[0]?.trim() ?? "", o = `${r}${e}`;
71
- return o.startsWith("+") ? o : null;
72
- }
73
- function fe(t) {
74
- return String(t ?? "").toLowerCase().replace(/\s+/g, " ").trim().replace(/[^\p{L}\p{N}+ ]/gu, "");
75
- }
76
- function pt(t, r) {
77
- if (!r) return t;
78
- let e;
79
- try {
80
- e = new Intl.DisplayNames([r], { type: "region" });
81
- } catch {
82
- return t;
83
- }
84
- return t.map((o) => {
85
- let p = o.raw_data.name;
86
- try {
87
- p = e.of(o.raw_data.iso2) || o.raw_data.name;
88
- } catch {
89
- }
90
- if (p === o.raw_data.name) return o;
91
- const u = o.raw_data.dial_code;
92
- return {
93
- ...o,
94
- label: `${p} (${u})`,
95
- search_key: fe(
96
- `${p} ${o.raw_data.name} ${u} ${o.raw_data.iso2} ${o.raw_data.dial_digits}`
97
- ),
98
- raw_data: { ...o.raw_data, name: p }
99
- };
100
- });
101
- }
102
- function A(t, r, e) {
103
- const o = Q(e);
104
- return {
105
- label: `${r} (+${o})`,
106
- value: t,
107
- search_key: fe(`${r} +${o} ${t}`),
108
- raw_data: {
109
- iso2: t,
110
- dial_code: `+${o}`,
111
- dial_digits: o,
112
- name: r,
113
- flag: `https://flagcdn.com/w40/${t.toLowerCase()}.png`,
114
- source: "fallback",
115
- original: {}
116
- }
117
- };
118
- }
119
- const Le = [
120
- A("SA", "Saudi Arabia", "+966"),
121
- A("EG", "Egypt", "+20"),
122
- A("AE", "United Arab Emirates", "+971"),
123
- A("US", "United States", "+1"),
124
- A("GB", "United Kingdom", "+44"),
125
- A("DE", "Germany", "+49"),
126
- A("FR", "France", "+33"),
127
- A("ES", "Spain", "+34"),
128
- A("IT", "Italy", "+39"),
129
- A("TR", "Turkey", "+90"),
130
- A("RU", "Russia", "+7"),
131
- A("CN", "China", "+86"),
132
- A("IN", "India", "+91"),
133
- A("JP", "Japan", "+81"),
134
- A("KR", "South Korea", "+82"),
135
- A("BR", "Brazil", "+55"),
136
- A("MX", "Mexico", "+52"),
137
- A("CA", "Canada", "+1"),
138
- A("AU", "Australia", "+61"),
139
- A("NG", "Nigeria", "+234"),
140
- A("PK", "Pakistan", "+92"),
141
- A("ID", "Indonesia", "+62")
142
- ];
143
- function Re() {
144
- const t = N([]), r = N(!1), e = N(/* @__PURE__ */ new Map()), o = N(/* @__PURE__ */ new Map());
145
- function p(v) {
146
- const y = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map();
147
- for (const a of v) {
148
- y.set(a.value, a);
149
- const c = a.raw_data.dial_digits;
150
- if (c) {
151
- const f = g.get(c) ?? [];
152
- f.push(a), g.set(c, f);
153
- }
154
- }
155
- e.value = y, o.value = g;
156
- }
157
- function u(v) {
158
- t.value = v, p(v);
159
- }
160
- function z(v) {
161
- const y = [];
162
- for (const a of v) {
163
- const c = a?.name?.common?.trim(), f = ue(a?.cca2), $ = gt(a?.idd), L = a?.flags?.png?.trim() || a?.flags?.svg?.trim() || null;
164
- if (!c || !f || !$) continue;
165
- const E = Q($), P = fe(`${c} ${$} ${f} ${E}`);
166
- y.push({
167
- label: `${c} (${$})`,
168
- value: f,
169
- search_key: P,
170
- raw_data: {
171
- iso2: f,
172
- dial_code: $,
173
- dial_digits: E,
174
- name: c,
175
- flag: L,
176
- source: "restcountries",
177
- original: a
178
- }
179
- });
180
- }
181
- const g = /* @__PURE__ */ new Map();
182
- for (const a of y) {
183
- const c = g.get(a.value);
184
- if (!c) {
185
- g.set(a.value, a);
186
- continue;
187
- }
188
- const f = (c.raw_data.flag ? 1 : 0) + (c.raw_data.dial_code ? 1 : 0);
189
- (a.raw_data.flag ? 1 : 0) + (a.raw_data.dial_code ? 1 : 0) > f && g.set(a.value, a);
190
- }
191
- return Array.from(g.values()).sort((a, c) => a.raw_data.name.localeCompare(c.raw_data.name));
192
- }
193
- async function j(v) {
194
- const y = !!v?.force;
195
- if (!y && t.value.length) return t.value;
196
- if (!y && Ie())
197
- try {
198
- const g = localStorage.getItem(Ee);
199
- if (g) {
200
- const a = JSON.parse(g);
201
- if (Array.isArray(a) && a.length)
202
- return u(a), t.value;
203
- }
204
- } catch {
205
- }
206
- r.value = !0;
207
- try {
208
- const g = await fetch(ut);
209
- if (!g.ok) throw new Error(`Failed to fetch countries: ${g.status}`);
210
- const a = await g.json(), c = z(a);
211
- if (u(c.length ? c : Le), Ie())
212
- try {
213
- localStorage.setItem(Ee, JSON.stringify(t.value));
214
- } catch {
215
- }
216
- return t.value;
217
- } catch {
218
- return u(Le), t.value;
219
- } finally {
220
- r.value = !1;
221
- }
222
- }
223
- function O(v, y = 50) {
224
- const g = fe(v);
225
- if (!g) return t.value.slice(0, y);
226
- const a = [];
227
- for (const c of t.value)
228
- if (c.search_key.includes(g) && (a.push(c), a.length >= y))
229
- break;
230
- return a;
231
- }
232
- function Y(v) {
233
- return e.value.get(ue(v)) ?? null;
234
- }
235
- function I(v) {
236
- return o.value.get(Q(v)) ?? [];
237
- }
238
- function k(v, y) {
239
- const g = ue(v.iso2);
240
- if (!g) return null;
241
- try {
242
- const a = tt(g, ct), c = a?.formatNational?.() ?? "", f = a?.format?.("E.164") ?? "", $ = ft(c), L = v.dial_code ? ye(v.dial_code) : f ? `+${a?.countryCallingCode}` : "", E = Q(c);
243
- return {
244
- iso2: g,
245
- dial_code: L,
246
- placeholder: "",
247
- example_national: c,
248
- example_e164: f,
249
- national_number_length: $,
250
- format_hint: E ? `e.g. ${dt(E, y)}` : ""
251
- };
252
- } catch {
253
- return null;
254
- }
255
- }
256
- function x(v) {
257
- const y = v.country ?? null;
258
- if (!y?.iso2)
259
- return {
260
- ok: !1,
261
- reason: "missing_country",
262
- country: null,
263
- phone: { raw: ("phone" in v ? v.phone : null) ?? null, digits: "" },
264
- full_phone: null,
265
- required: null
266
- };
267
- const g = ue(y.iso2), a = k({ iso2: g, dial_code: y.dial_code }, v.locale);
268
- if (!a)
269
- return {
270
- ok: !1,
271
- reason: "country_not_supported",
272
- country: { iso2: g, dial_code: ye(y.dial_code) },
273
- phone: { raw: ("phone" in v ? v.phone : null) ?? null, digits: "" },
274
- full_phone: null,
275
- required: null
276
- };
277
- if (!("phone" in v))
278
- return {
279
- ok: !0,
280
- reason: null,
281
- country: { iso2: a.iso2, dial_code: a.dial_code },
282
- phone: { raw: null, digits: "" },
283
- full_phone: null,
284
- required: a
285
- };
286
- const c = v.phone, f = Q(c);
287
- if (!c || !String(c).trim())
288
- return {
289
- ok: !0,
290
- reason: null,
291
- country: { iso2: a.iso2, dial_code: a.dial_code },
292
- phone: { raw: c ?? null, digits: "" },
293
- full_phone: null,
294
- required: a
295
- };
296
- if (String(c).replace(/\s+/g, "").match(/[^\d+]/))
297
- return {
298
- ok: !1,
299
- reason: "phone_has_non_digits",
300
- country: { iso2: a.iso2, dial_code: a.dial_code },
301
- phone: { raw: c, digits: f },
302
- full_phone: le(a.dial_code, f),
303
- required: a
304
- };
305
- const $ = Ue(f), { min: L, max: E } = a.national_number_length;
306
- if (L !== null && $.length < L)
307
- return {
308
- ok: !1,
309
- reason: "too_short",
310
- country: { iso2: a.iso2, dial_code: a.dial_code },
311
- phone: { raw: c, digits: f },
312
- full_phone: le(a.dial_code, f),
313
- required: a,
314
- details: { min: L, actual: $.length }
315
- };
316
- if (E !== null && $.length > E)
317
- return {
318
- ok: !1,
319
- reason: "too_long",
320
- country: { iso2: a.iso2, dial_code: a.dial_code },
321
- phone: { raw: c, digits: f },
322
- full_phone: le(a.dial_code, f),
323
- required: a,
324
- details: { max: E, actual: $.length }
325
- };
326
- const P = le(a.dial_code, f) ?? String(c);
327
- try {
328
- if (!et(P, g)) {
329
- const S = de(P, g);
330
- return {
331
- ok: !1,
332
- reason: "invalid_phone",
333
- country: { iso2: a.iso2, dial_code: a.dial_code },
334
- phone: { raw: c, digits: f },
335
- full_phone: S?.number ?? null,
336
- required: a,
337
- details: {
338
- type: S?.getType?.() ?? null,
339
- possible: S?.isPossible?.() ?? null,
340
- country: S?.country ?? null
341
- }
342
- };
343
- }
344
- const G = de(P, g);
345
- return {
346
- ok: !0,
347
- reason: null,
348
- country: { iso2: a.iso2, dial_code: a.dial_code },
349
- phone: { raw: c, digits: f },
350
- full_phone: G?.number ?? P,
351
- required: a
352
- };
353
- } catch (T) {
354
- return {
355
- ok: !1,
356
- reason: "parse_failed",
357
- country: { iso2: a.iso2, dial_code: a.dial_code },
358
- phone: { raw: c, digits: f },
359
- full_phone: le(a.dial_code, f),
360
- required: a,
361
- details: { error: T?.message ?? String(T) }
362
- };
363
- }
364
- }
365
- return {
366
- countries: t,
367
- isCountriesLoading: r,
368
- getCountries: j,
369
- searchCountries: O,
370
- getCountryByValue: Y,
371
- getCountriesByDial: I,
372
- getRequiredInfo: k,
373
- validate: x
374
- };
375
- }
376
- const ze = "ali_ui_country_detected", ne = () => typeof window < "u" && typeof document < "u", vt = {
377
- // Africa
378
- "Africa/Cairo": "EG",
379
- "Africa/Johannesburg": "ZA",
380
- "Africa/Lagos": "NG",
381
- "Africa/Casablanca": "MA",
382
- "Africa/Algiers": "DZ",
383
- "Africa/Nairobi": "KE",
384
- "Africa/Accra": "GH",
385
- "Africa/Tunis": "TN",
386
- // Americas
387
- "America/Argentina/Buenos_Aires": "AR",
388
- "America/Bogota": "CO",
389
- "America/Caracas": "VE",
390
- "America/Chicago": "US",
391
- "America/Denver": "US",
392
- "America/Halifax": "CA",
393
- "America/Lima": "PE",
394
- "America/Los_Angeles": "US",
395
- "America/Mexico_City": "MX",
396
- "America/New_York": "US",
397
- "America/Phoenix": "US",
398
- "America/Sao_Paulo": "BR",
399
- "America/Santiago": "CL",
400
- "America/Toronto": "CA",
401
- "America/Vancouver": "CA",
402
- // Asia
403
- "Asia/Baghdad": "IQ",
404
- "Asia/Bahrain": "BH",
405
- "Asia/Bangkok": "TH",
406
- "Asia/Beirut": "LB",
407
- "Asia/Damascus": "SY",
408
- "Asia/Dhaka": "BD",
409
- "Asia/Dubai": "AE",
410
- "Asia/Hong_Kong": "HK",
411
- "Asia/Jakarta": "ID",
412
- "Asia/Jerusalem": "IL",
413
- "Asia/Karachi": "PK",
414
- "Asia/Kolkata": "IN",
415
- "Asia/Kuala_Lumpur": "MY",
416
- "Asia/Kuwait": "KW",
417
- "Asia/Manila": "PH",
418
- "Asia/Muscat": "OM",
419
- "Asia/Qatar": "QA",
420
- "Asia/Riyadh": "SA",
421
- "Asia/Seoul": "KR",
422
- "Asia/Shanghai": "CN",
423
- "Asia/Singapore": "SG",
424
- "Asia/Taipei": "TW",
425
- "Asia/Tehran": "IR",
426
- "Asia/Tokyo": "JP",
427
- "Asia/Yangon": "MM",
428
- // Europe
429
- "Europe/Amsterdam": "NL",
430
- "Europe/Athens": "GR",
431
- "Europe/Belgrade": "RS",
432
- "Europe/Berlin": "DE",
433
- "Europe/Brussels": "BE",
434
- "Europe/Bucharest": "RO",
435
- "Europe/Budapest": "HU",
436
- "Europe/Copenhagen": "DK",
437
- "Europe/Dublin": "IE",
438
- "Europe/Helsinki": "FI",
439
- "Europe/Istanbul": "TR",
440
- "Europe/Kyiv": "UA",
441
- "Europe/Lisbon": "PT",
442
- "Europe/London": "GB",
443
- "Europe/Madrid": "ES",
444
- "Europe/Moscow": "RU",
445
- "Europe/Oslo": "NO",
446
- "Europe/Paris": "FR",
447
- "Europe/Prague": "CZ",
448
- "Europe/Rome": "IT",
449
- "Europe/Sofia": "BG",
450
- "Europe/Stockholm": "SE",
451
- "Europe/Vienna": "AT",
452
- "Europe/Warsaw": "PL",
453
- "Europe/Zurich": "CH",
454
- // Oceania
455
- "Australia/Brisbane": "AU",
456
- "Australia/Melbourne": "AU",
457
- "Australia/Perth": "AU",
458
- "Australia/Sydney": "AU",
459
- "Pacific/Auckland": "NZ",
460
- "Pacific/Honolulu": "US"
461
- };
462
- function mt() {
463
- if (!ne()) return null;
464
- try {
465
- const t = Intl.DateTimeFormat().resolvedOptions().timeZone;
466
- return vt[t] ?? null;
467
- } catch {
468
- return null;
469
- }
470
- }
471
- function ht() {
472
- if (!ne()) return null;
473
- try {
474
- const r = (navigator.language ?? "").match(/^[a-z]{2,3}-([A-Z]{2})/);
475
- return r ? r[1] : null;
476
- } catch {
477
- return null;
478
- }
479
- }
480
- async function yt(t, r) {
481
- if (!ne() || typeof fetch != "function") return null;
482
- const e = new AbortController(), o = setTimeout(() => e.abort(), r);
483
- try {
484
- const p = await fetch(t, { signal: e.signal, credentials: "omit" });
485
- if (!p.ok) return null;
486
- const u = await p.json(), z = (u.country_code ?? u.country ?? "").toString().toUpperCase();
487
- return /^[A-Z]{2}$/.test(z) ? z : null;
488
- } catch {
489
- return null;
490
- } finally {
491
- clearTimeout(o);
492
- }
493
- }
494
- function bt() {
495
- if (!ne()) return null;
496
- try {
497
- const t = sessionStorage.getItem(ze);
498
- return t && /^[A-Z]{2}$/.test(t) ? t : null;
499
- } catch {
500
- return null;
501
- }
502
- }
503
- function Be(t) {
504
- if (ne())
505
- try {
506
- sessionStorage.setItem(ze, t);
507
- } catch {
508
- }
509
- }
510
- async function Oe(t = {}) {
511
- const {
512
- strategy: r = "auto",
513
- ipEndpoint: e = "https://ipapi.co/json/",
514
- defaultCountry: o = "US",
515
- timeoutMs: p = 2e3,
516
- cache: u = !0
517
- } = t;
518
- if (u) {
519
- const O = bt();
520
- if (O) return O;
521
- }
522
- if (r === "none")
523
- return o.toUpperCase();
524
- if (r === "auto") {
525
- const O = await yt(e, p);
526
- if (O)
527
- return u && Be(O), O;
528
- }
529
- const j = (mt() ?? ht() ?? o).toUpperCase();
530
- return u && Be(j), j;
531
- }
532
- function da(t = {}) {
533
- const r = N(null), e = N(!1);
534
- async function o() {
535
- e.value = !0;
536
- try {
537
- r.value = await Oe(t);
538
- } finally {
539
- e.value = !1;
540
- }
541
- return r.value;
542
- }
543
- return be(() => {
544
- o();
545
- }), { country: r, isLoading: e, refresh: o };
546
- }
547
- const _t = lt(
548
- // items-center (not items-stretch) so #prefix/#suffix icons centre vertically without distortion.
549
- // The country trigger button and the input element both carry `h-full`, so they still fill the
550
- // field height regardless of this setting.
551
- "border-input bg-background ring-offset-background focus-within:ring-ring flex w-full items-center overflow-hidden rounded-md border shadow-sm transition-colors focus-within:ring-1 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
552
- {
553
- variants: {
554
- size: {
555
- xs: `${ae.xs} ${W.xs}`,
556
- sm: `${ae.sm} ${W.sm}`,
557
- md: `${ae.md} ${W.md}`,
558
- lg: `${ae.lg} ${W.lg}`,
559
- xl: `${ae.xl} ${W.xl}`
560
- }
561
- },
562
- defaultVariants: { size: "md" }
563
- }
564
- ), Fe = {
565
- missing_country: "Please select a country.",
566
- country_not_supported: "This country is not supported.",
567
- phone_has_non_digits: "Phone number can only contain digits.",
568
- too_short: "Phone number is too short.",
569
- too_long: "Phone number is too long.",
570
- invalid_phone: "Phone number is invalid.",
571
- parse_failed: "Could not parse phone number."
572
- }, Ne = {
573
- searchPlaceholder: "Search country or +code…",
574
- emptyText: "No countries found.",
575
- loadingText: "Loading countries…",
576
- suggestedLabel: "Suggested",
577
- allCountriesLabel: "All countries",
578
- errorMessages: Fe,
579
- countryLabel: "Country",
580
- selectCountryLabel: "Select country",
581
- phoneInputLabel: "Phone number"
582
- };
583
- function wt(t) {
584
- return t ? {
585
- ...Ne,
586
- ...t,
587
- errorMessages: { ...Fe, ...t.errorMessages }
588
- } : Ne;
589
- }
590
- function Ct(t, r = 40) {
591
- return `https://flagcdn.com/w${r}/${t.toLowerCase()}.png`;
592
- }
593
- const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ _e({
594
- __name: "ACountryFlag",
595
- props: {
596
- iso2: {},
597
- width: { default: 40 },
598
- src: {},
599
- flagUrl: {},
600
- alt: {},
601
- class: { type: [Boolean, null, String, Object, Array] }
602
- },
603
- setup(t) {
604
- const r = t, e = C(() => r.src ? r.src : r.iso2 ? (r.flagUrl ?? Ct)(r.iso2, r.width) : null), o = N(!1);
605
- re(e, () => {
606
- o.value = !1;
607
- });
608
- const p = C(() => (r.iso2 ?? "").slice(0, 2).toUpperCase());
609
- return (u, z) => e.value && !o.value ? (B(), K("img", {
610
- key: 0,
611
- src: e.value,
612
- alt: r.alt ?? `${r.iso2} flag`,
613
- loading: "lazy",
614
- "data-slot": "country-flag",
615
- class: V(w(R)("ring-border/40 inline-block h-4 w-6 rounded-sm object-cover ring-1", r.class)),
616
- onError: z[0] || (z[0] = (j) => o.value = !0)
617
- }, null, 42, At)) : p.value ? (B(), K("span", {
618
- key: 1,
619
- "data-slot": "country-flag-fallback",
620
- "aria-label": r.alt ?? `${r.iso2} flag`,
621
- class: V(
622
- w(R)(
623
- "ring-border/40 bg-muted text-muted-foreground inline-flex h-4 w-6 items-center justify-center rounded-sm text-[8px] font-semibold leading-none tracking-tight ring-1",
624
- r.class
625
- )
626
- )
627
- }, M(p.value), 11, St)) : h(u.$slots, "empty", { key: 2 }, () => [
628
- _("span", {
629
- "data-slot": "country-flag-empty",
630
- class: V(w(R)("bg-muted inline-block h-4 w-6 rounded-sm", r.class))
631
- }, null, 2)
632
- ]);
633
- }
634
- }), kt = ["disabled", "data-state", "aria-label"], $t = { class: "border-border/70 border-b p-1.5" }, xt = { class: "bg-muted/40 ring-border/70 focus-within:ring-ring/50 relative flex items-center rounded-md ring-1 transition-shadow" }, Et = ["placeholder"], It = {
635
- key: 0,
636
- class: "bg-background text-muted-foreground border-border absolute top-1/2 end-2 hidden -translate-y-1/2 items-center gap-0.5 rounded border px-1.5 py-0.5 font-mono text-[10px] tracking-tight md:inline-flex"
637
- }, Lt = {
638
- key: 1,
639
- class: "bg-background text-muted-foreground border-border absolute top-1/2 end-2 hidden -translate-y-1/2 rounded border px-1.5 py-0.5 font-mono text-[10px] tracking-tight md:inline-block"
640
- }, Bt = { class: "flex-1 overflow-y-auto" }, Nt = { class: "text-muted-foreground p-4 text-center text-sm" }, Tt = { class: "text-muted-foreground p-4 text-center text-sm" }, Dt = {
641
- key: 0,
642
- "data-slot": "country-select-group",
643
- "data-group": "suggested"
644
- }, Mt = { class: "text-muted-foreground bg-popover sticky top-0 z-10 px-3 py-1.5 text-[10px] font-medium tracking-wider uppercase" }, Pt = ["aria-label"], Ut = ["aria-selected", "aria-disabled"], Rt = ["disabled", "data-selected", "onClick"], zt = { class: "flex-1 truncate" }, Ot = { class: "text-muted-foreground tabular-nums" }, Ft = {
645
- "data-slot": "country-select-group",
646
- "data-group": "all"
647
- }, Kt = { class: "text-muted-foreground bg-popover sticky top-0 z-10 px-3 py-1.5 text-[10px] font-medium tracking-wider uppercase" }, Vt = ["aria-label"], Gt = ["aria-selected", "aria-disabled"], Ht = ["disabled", "data-selected", "onClick"], Zt = { class: "flex-1 truncate" }, jt = { class: "text-muted-foreground tabular-nums" }, Te = "ali_ui_country_recents_v1", Jt = /* @__PURE__ */ _e({
648
- __name: "ACountrySelect",
649
- props: /* @__PURE__ */ De({
650
- class: { type: [Boolean, null, String, Object, Array] },
651
- triggerClass: { type: [Boolean, null, String, Object, Array] },
652
- contentClass: { type: [Boolean, null, String, Object, Array] },
653
- popoverClass: { type: [Boolean, null, String, Object, Array] },
654
- drawerClass: { type: [Boolean, null, String, Object, Array] },
655
- searchPlaceholder: { default: "Search country or +code…" },
656
- emptyText: { default: "No countries found." },
657
- loadingText: { default: "Loading countries…" },
658
- suggestedLabel: { default: "Suggested" },
659
- allCountriesLabel: { default: "All countries" },
660
- allowedDialCodes: {},
661
- disabled: { type: Boolean },
662
- size: { default: Pe },
663
- suggestedLimit: { default: 4 },
664
- maxResults: { default: 80 },
665
- flagUrl: {},
666
- searcher: {},
667
- countries: {},
668
- kbdOpen: { default: "⌘K" },
669
- kbdClose: { default: "Esc" },
670
- locale: {},
671
- countryLabel: { default: "Country" },
672
- selectCountryLabel: { default: "Select country" }
673
- }, {
674
- selected: { default: "" },
675
- selectedModifiers: {}
676
- }),
677
- emits: ["update:selected"],
678
- setup(t, { expose: r }) {
679
- const e = t, o = C(
680
- () => `${Me[e.size]} ${W[e.size]}`
681
- ), p = me(t, "selected"), {
682
- countries: u,
683
- isCountriesLoading: z,
684
- getCountries: j,
685
- searchCountries: O,
686
- getCountryByValue: Y
687
- } = Re(), I = N(!1), k = N("");
688
- j();
689
- const x = C(
690
- () => e.countries && e.countries.length ? e.countries : pt(u.value, e.locale)
691
- ), v = C(
692
- () => new Map(x.value.map((s) => [s.value, s]))
693
- );
694
- function y(s) {
695
- return s ? v.value.get(s) ?? Y(s) : null;
696
- }
697
- const g = N([]);
698
- function a() {
699
- if (!(typeof window > "u"))
700
- try {
701
- const s = localStorage.getItem(Te);
702
- if (!s) return;
703
- const m = JSON.parse(s);
704
- if (!Array.isArray(m)) return;
705
- g.value = m.filter((n) => typeof n == "string").slice(0, 8);
706
- } catch {
707
- }
708
- }
709
- function c(s) {
710
- if (typeof window > "u" || !s) return;
711
- const m = [s, ...g.value.filter((n) => n !== s)].slice(0, 8);
712
- g.value = m;
713
- try {
714
- localStorage.setItem(Te, JSON.stringify(m));
715
- } catch {
716
- }
717
- }
718
- be(a);
719
- const f = C(() => k.value.trim().length > 0);
720
- function $(s, m) {
721
- return m.search_key.includes(s.toLowerCase());
722
- }
723
- const L = C(() => {
724
- if (!f.value) return [];
725
- if (!e.countries && !e.searcher && !e.locale)
726
- return O(k.value, e.maxResults);
727
- const s = k.value.trim(), m = e.searcher ?? $, n = [];
728
- for (const Z of x.value)
729
- if (m(s, Z) && (n.push(Z), n.length >= e.maxResults))
730
- break;
731
- return n;
732
- }), E = C(() => {
733
- if (f.value) return [];
734
- const s = /* @__PURE__ */ new Set(), m = [], n = (D) => {
735
- if (!D || s.has(D)) return;
736
- const se = y(D);
737
- se && (s.add(D), m.push(se));
738
- };
739
- n(p.value);
740
- const Z = e.allowedDialCodes;
741
- if (Array.isArray(Z) && Z.length > 0) {
742
- for (const D of x.value)
743
- Z.includes(D.raw_data.dial_digits) && n(D.value);
744
- return m;
745
- }
746
- for (const D of g.value)
747
- if (n(D), m.length >= e.suggestedLimit) break;
748
- return m.slice(0, e.suggestedLimit);
749
- }), P = C(() => f.value ? [] : x.value), T = C(() => y(p.value));
750
- function G(s) {
751
- const m = e.allowedDialCodes;
752
- return !m || m.length === 0 ? !0 : m.includes(s.raw_data.dial_digits);
753
- }
754
- function S(s) {
755
- G(s) && (p.value = s.value, c(s.value), I.value = !1);
756
- }
757
- return re(I, (s) => {
758
- s || (k.value = "");
759
- }), r({
760
- open: I,
761
- setOpen: (s) => I.value = s,
762
- search: k,
763
- setSearch: (s) => k.value = s,
764
- selectedCountry: T,
765
- selectCountry: S,
766
- countries: x,
767
- recents: g
768
- }), (s, m) => (B(), he(w(rt), {
769
- open: I.value,
770
- "onUpdate:open": m[1] || (m[1] = (n) => I.value = n)
771
- }, {
772
- default: U(() => [
773
- F(w(nt), { "as-child": "" }, {
774
- default: U(() => [
775
- h(s.$slots, "trigger", {
776
- selectedCountry: T.value,
777
- open: I.value,
778
- sizeClasses: o.value
779
- }, () => [
780
- _("button", {
781
- type: "button",
782
- disabled: e.disabled,
783
- "data-slot": "country-select-trigger",
784
- "data-state": I.value ? "open" : "closed",
785
- class: V(
786
- w(R)(
787
- "bg-transparent hover:bg-muted focus-visible:bg-muted data-[state=open]:bg-muted focus-visible:ring-ring inline-flex h-full shrink-0 items-center gap-1.5 transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
788
- o.value,
789
- e.triggerClass
790
- )
791
- ),
792
- "aria-label": T.value ? `${e.countryLabel}: ${T.value.raw_data.name}` : e.selectCountryLabel
793
- }, [
794
- T.value ? h(s.$slots, "flag", {
795
- key: 0,
796
- country: T.value,
797
- context: "trigger"
798
- }, () => [
799
- F(ve, {
800
- iso2: T.value.raw_data.iso2,
801
- src: T.value.raw_data.flag,
802
- "flag-url": e.flagUrl
803
- }, null, 8, ["iso2", "src", "flag-url"])
804
- ]) : H("", !0),
805
- h(s.$slots, "chevron", { open: I.value }, () => [
806
- F(w(qe), {
807
- class: V(["text-muted-foreground size-3.5 shrink-0 transition-transform duration-200", I.value && "rotate-180"])
808
- }, null, 8, ["class"])
809
- ])
810
- ], 10, kt)
811
- ])
812
- ]),
813
- _: 3
814
- }),
815
- F(w(ot), {
816
- align: "end",
817
- "side-offset": 6,
818
- class: V(w(R)("flex flex-col overflow-hidden p-0", e.contentClass)),
819
- "popover-class": w(R)(
820
- "w-[min(20rem,calc(100vw-2rem))] max-h-[min(22rem,var(--reka-popover-content-available-height))]",
821
- e.popoverClass
822
- ),
823
- "drawer-class": w(R)("max-h-[80vh] pb-4", e.drawerClass)
824
- }, {
825
- default: U(() => [
826
- h(s.$slots, "search", {
827
- value: k.value,
828
- setValue: (n) => k.value = n,
829
- isSearching: f.value
830
- }, () => [
831
- _("div", $t, [
832
- _("div", xt, [
833
- h(s.$slots, "search-icon", {}, () => [
834
- F(w(We), { class: "text-muted-foreground absolute top-1/2 start-2.5 size-3.5 -translate-y-1/2" })
835
- ]),
836
- He(_("input", {
837
- "onUpdate:modelValue": m[0] || (m[0] = (n) => k.value = n),
838
- type: "text",
839
- "data-slot": "country-select-search",
840
- placeholder: e.searchPlaceholder,
841
- class: "placeholder:text-muted-foreground h-10 w-full bg-transparent pe-14 ps-8 text-sm outline-none"
842
- }, null, 8, Et), [
843
- [Ze, k.value]
844
- ]),
845
- !f.value && e.kbdOpen ? (B(), K("kbd", It, M(e.kbdOpen), 1)) : f.value && e.kbdClose ? (B(), K("kbd", Lt, M(e.kbdClose), 1)) : H("", !0)
846
- ])
847
- ])
848
- ]),
849
- _("div", Bt, [
850
- w(z) && x.value.length === 0 ? h(s.$slots, "loading", { key: 0 }, () => [
851
- _("div", Nt, M(e.loadingText), 1)
852
- ]) : f.value && L.value.length === 0 ? h(s.$slots, "empty", {
853
- key: 1,
854
- query: k.value
855
- }, () => [
856
- _("div", Tt, M(e.emptyText), 1)
857
- ]) : (B(), K(pe, { key: 2 }, [
858
- E.value.length > 0 ? (B(), K("section", Dt, [
859
- h(s.$slots, "group-header", {
860
- label: e.suggestedLabel,
861
- group: "suggested"
862
- }, () => [
863
- _("header", Mt, M(e.suggestedLabel), 1)
864
- ]),
865
- _("ul", {
866
- role: "listbox",
867
- "aria-label": e.suggestedLabel,
868
- class: "pb-1"
869
- }, [
870
- (B(!0), K(pe, null, ke(E.value, (n) => (B(), K("li", {
871
- key: `s-${n.value}`,
872
- role: "option",
873
- "aria-selected": n.value === p.value,
874
- "aria-disabled": !G(n)
875
- }, [
876
- h(s.$slots, "item", {
877
- country: n,
878
- selected: n.value === p.value,
879
- disabled: !G(n),
880
- select: () => S(n)
881
- }, () => [
882
- _("button", {
883
- type: "button",
884
- disabled: !G(n),
885
- "data-slot": "country-select-item",
886
- "data-selected": n.value === p.value ? "" : void 0,
887
- class: "hover:bg-muted/60 focus-visible:bg-muted/60 data-[selected]:bg-muted flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
888
- onClick: (Z) => S(n)
889
- }, [
890
- h(s.$slots, "flag", {
891
- country: n,
892
- context: "item"
893
- }, () => [
894
- F(ve, {
895
- iso2: n.raw_data.iso2,
896
- src: n.raw_data.flag,
897
- "flag-url": e.flagUrl
898
- }, null, 8, ["iso2", "src", "flag-url"])
899
- ]),
900
- _("span", zt, M(n.raw_data.name), 1),
901
- _("span", Ot, M(n.raw_data.dial_code), 1),
902
- n.value === p.value ? h(s.$slots, "item-check", {
903
- key: 0,
904
- country: n
905
- }, () => [
906
- F(w(xe), { class: "text-foreground size-3.5 shrink-0" })
907
- ]) : H("", !0)
908
- ], 8, Rt)
909
- ])
910
- ], 8, Ut))), 128))
911
- ], 8, Pt)
912
- ])) : H("", !0),
913
- _("section", Ft, [
914
- !f.value && P.value.length > 0 ? h(s.$slots, "group-header", {
915
- key: 0,
916
- label: e.allCountriesLabel,
917
- group: "all"
918
- }, () => [
919
- _("header", Kt, M(e.allCountriesLabel), 1)
920
- ]) : H("", !0),
921
- _("ul", {
922
- role: "listbox",
923
- "aria-label": f.value ? e.searchPlaceholder : e.allCountriesLabel,
924
- class: "pb-1"
925
- }, [
926
- (B(!0), K(pe, null, ke(f.value ? L.value : P.value, (n) => (B(), K("li", {
927
- key: n.value,
928
- role: "option",
929
- "aria-selected": n.value === p.value,
930
- "aria-disabled": !G(n)
931
- }, [
932
- h(s.$slots, "item", {
933
- country: n,
934
- selected: n.value === p.value,
935
- disabled: !G(n),
936
- select: () => S(n)
937
- }, () => [
938
- _("button", {
939
- type: "button",
940
- disabled: !G(n),
941
- "data-slot": "country-select-item",
942
- "data-selected": n.value === p.value ? "" : void 0,
943
- class: "hover:bg-muted/60 focus-visible:bg-muted/60 data-[selected]:bg-muted flex w-full items-center gap-3 px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
944
- onClick: (Z) => S(n)
945
- }, [
946
- h(s.$slots, "flag", {
947
- country: n,
948
- context: "item"
949
- }, () => [
950
- F(ve, {
951
- iso2: n.raw_data.iso2,
952
- src: n.raw_data.flag,
953
- "flag-url": e.flagUrl
954
- }, null, 8, ["iso2", "src", "flag-url"])
955
- ]),
956
- _("span", Zt, M(n.raw_data.name), 1),
957
- _("span", jt, M(n.raw_data.dial_code), 1),
958
- n.value === p.value ? h(s.$slots, "item-check", {
959
- key: 0,
960
- country: n
961
- }, () => [
962
- F(w(xe), { class: "text-foreground size-3.5 shrink-0" })
963
- ]) : H("", !0)
964
- ], 8, Ht)
965
- ])
966
- ], 8, Gt))), 128))
967
- ], 8, Vt)
968
- ])
969
- ], 64))
970
- ])
971
- ]),
972
- _: 3
973
- }, 8, ["class", "popover-class", "drawer-class"])
974
- ]),
975
- _: 3
976
- }, 8, ["open"]));
977
- }
978
- }), Yt = ["dir"], qt = {
979
- class: "flex items-center gap-2",
980
- dir: "ltr"
981
- }, Wt = ["data-state"], Qt = ["value", "disabled", "placeholder", "aria-label", "aria-invalid", "aria-describedby"], Xt = ["id"], ea = "ali_ui_country_recents_v1", fa = /* @__PURE__ */ _e({
982
- __name: "ATellInput",
983
- props: /* @__PURE__ */ De({
984
- flagUrl: {},
985
- searcher: {},
986
- countries: {},
987
- detector: {},
988
- contentClass: {},
989
- popoverClass: {},
990
- drawerClass: {},
991
- inputClass: {},
992
- fieldClass: {},
993
- hintClass: {},
994
- errorClass: {},
995
- class: { type: [Boolean, null, String, Object, Array] },
996
- placeholder: { default: "Phone number" },
997
- disabled: { type: Boolean },
998
- loading: { type: Boolean },
999
- size: { default: Pe },
1000
- dir: {},
1001
- locale: {},
1002
- messages: {},
1003
- allowedDialCodes: {},
1004
- showValidation: { type: Boolean },
1005
- showValidationIcon: { type: Boolean, default: !1 },
1006
- detectCountry: { default: "auto" },
1007
- defaultCountry: { default: "" },
1008
- ipEndpoint: { default: "https://ipapi.co/json/" },
1009
- searchPlaceholder: {},
1010
- emptyText: {},
1011
- loadingText: {},
1012
- errorMessages: {},
1013
- detectFromInput: { type: Boolean, default: !0 },
1014
- detectDebounceMs: { default: 150 }
1015
- }, {
1016
- phone: { default: "" },
1017
- phoneModifiers: {},
1018
- country: { default: null },
1019
- countryModifiers: {}
1020
- }),
1021
- emits: ["update:phone", "update:country"],
1022
- setup(t, { expose: r }) {
1023
- const e = t, o = me(t, "phone"), p = me(t, "country"), u = N(""), { getCountries: z, validate: j, getRequiredInfo: O, getCountryByValue: Y, getCountriesByDial: I } = Re();
1024
- z();
1025
- const k = N(!1), x = N(!1), v = {
1026
- 1: "US",
1027
- 7: "RU",
1028
- 20: "EG",
1029
- 27: "ZA",
1030
- 30: "GR",
1031
- 31: "NL",
1032
- 32: "BE",
1033
- 33: "FR",
1034
- 34: "ES",
1035
- 39: "IT",
1036
- 44: "GB",
1037
- 46: "SE",
1038
- 47: "NO",
1039
- 48: "PL",
1040
- 49: "DE",
1041
- 52: "MX",
1042
- 54: "AR",
1043
- 55: "BR",
1044
- 60: "MY",
1045
- 61: "AU",
1046
- 62: "ID",
1047
- 63: "PH",
1048
- 64: "NZ",
1049
- 65: "SG",
1050
- 66: "TH",
1051
- 81: "JP",
1052
- 82: "KR",
1053
- 84: "VN",
1054
- 86: "CN",
1055
- 90: "TR",
1056
- 91: "IN",
1057
- 92: "PK",
1058
- 95: "MM",
1059
- 212: "MA",
1060
- 213: "DZ",
1061
- 216: "TN",
1062
- 218: "LY",
1063
- 234: "NG",
1064
- 254: "KE",
1065
- 352: "LU",
1066
- 353: "IE",
1067
- 358: "FI",
1068
- 359: "BG",
1069
- 380: "UA",
1070
- 420: "CZ",
1071
- 421: "SK",
1072
- 961: "LB",
1073
- 962: "JO",
1074
- 963: "SY",
1075
- 964: "IQ",
1076
- 965: "KW",
1077
- 966: "SA",
1078
- 967: "YE",
1079
- 968: "OM",
1080
- 970: "PS",
1081
- 971: "AE",
1082
- 972: "IL",
1083
- 973: "BH",
1084
- 974: "QA"
1085
- };
1086
- function y(l) {
1087
- const d = String(l ?? "").trim();
1088
- if (!d) return "";
1089
- if (/^[A-Za-z]{2}$/.test(d)) return d.toUpperCase();
1090
- const i = d.replace(/^\+/, "");
1091
- if (!/^\d+$/.test(i)) return "";
1092
- const b = I(i)[0];
1093
- return b ? b.value : v[i] ?? "";
1094
- }
1095
- const g = N(y(e.defaultCountry));
1096
- function a() {
1097
- if (typeof window > "u") return [];
1098
- try {
1099
- const l = localStorage.getItem(ea);
1100
- if (!l) return [];
1101
- const d = JSON.parse(l);
1102
- return Array.isArray(d) ? d.filter((i) => typeof i == "string") : [];
1103
- } catch {
1104
- return [];
1105
- }
1106
- }
1107
- function c(l) {
1108
- if (!l) return null;
1109
- try {
1110
- const i = de(`+${l}`);
1111
- if (i?.country && i.countryCallingCode) {
1112
- const b = Y(i.country);
1113
- if (b)
1114
- return { country: b, nationalNumber: String(i.nationalNumber ?? "") };
1115
- }
1116
- } catch {
1117
- }
1118
- const d = g.value;
1119
- if (d && l.length >= 4)
1120
- try {
1121
- const i = de(l, d);
1122
- if (i?.isValid()) {
1123
- const b = Y(i.country || d);
1124
- if (b)
1125
- return { country: b, nationalNumber: String(i.nationalNumber ?? "") };
1126
- }
1127
- } catch {
1128
- }
1129
- for (let i = Math.min(3, l.length); i >= 1; i--) {
1130
- const b = l.slice(0, i), q = I(b);
1131
- if (!q.length) continue;
1132
- const ie = l.slice(b.length);
1133
- if (q.length === 1) return { country: q[0], nationalNumber: ie };
1134
- const Ae = u.value ? q.find((te) => te.value === u.value.toUpperCase()) : null;
1135
- if (Ae) return { country: Ae, nationalNumber: ie };
1136
- const Se = a().map((te) => q.find((Ge) => Ge.value === te)).find((te) => !!te);
1137
- return Se ? { country: Se, nationalNumber: ie } : { country: q[0], nationalNumber: ie };
1138
- }
1139
- return null;
1140
- }
1141
- be(async () => {
1142
- if (u.value) return;
1143
- if (e.defaultCountry) {
1144
- const b = y(e.defaultCountry);
1145
- if (b) {
1146
- g.value = b, x.value = !0, u.value = b;
1147
- return;
1148
- }
1149
- }
1150
- const l = {
1151
- strategy: e.detectCountry,
1152
- ipEndpoint: e.ipEndpoint,
1153
- defaultCountry: ""
1154
- };
1155
- let d;
1156
- if (e.detector)
1157
- try {
1158
- d = await e.detector(l);
1159
- } catch {
1160
- d = null;
1161
- }
1162
- d || (d = await Oe(l));
1163
- const i = d ? d.toUpperCase() : "";
1164
- if (e.detectFromInput) {
1165
- if (g.value = i, o.value && !k.value && !u.value) {
1166
- const b = c(o.value);
1167
- b && (x.value = !0, u.value = b.country.value, o.value = b.nationalNumber);
1168
- }
1169
- return;
1170
- }
1171
- !u.value && i && (x.value = !0, u.value = i);
1172
- });
1173
- function f(l) {
1174
- if (!l) return null;
1175
- const i = Y(l)?.raw_data?.dial_digits ?? Object.entries(v).find(([, q]) => q === l)?.[0];
1176
- if (!i) return null;
1177
- const b = Number(i);
1178
- return Number.isFinite(b) ? b : null;
1179
- }
1180
- re(
1181
- p,
1182
- (l) => {
1183
- if (l == null) {
1184
- u.value && (u.value = "");
1185
- return;
1186
- }
1187
- if (f(u.value) === l) return;
1188
- const d = y(String(l));
1189
- d && (u.value = d);
1190
- },
1191
- { immediate: !0 }
1192
- ), re(
1193
- u,
1194
- (l, d) => {
1195
- const i = x.value;
1196
- x.value = !1;
1197
- const b = f(l);
1198
- p.value !== b && (p.value = b), !i && e.detectFromInput && l && d !== l && (k.value = !0);
1199
- },
1200
- { flush: "sync" }
1201
- );
1202
- const $ = Ye(
1203
- () => {
1204
- if (!e.detectFromInput || k.value || u.value) return;
1205
- const l = o.value;
1206
- if (!l) return;
1207
- const d = c(l);
1208
- d && (x.value = !0, u.value = d.country.value, o.value = d.nationalNumber);
1209
- },
1210
- C(() => Math.max(0, e.detectDebounceMs))
1211
- ), L = N(String(o.value ?? ""));
1212
- let E = !1;
1213
- function P(l) {
1214
- E = !0, o.value = l;
1215
- }
1216
- function T(l) {
1217
- const d = l.target;
1218
- L.value = d.value;
1219
- const i = ce(d.value).replace(/\D/g, "");
1220
- if (e.detectFromInput) {
1221
- if (!i) {
1222
- x.value = !0, u.value = "", P(""), k.value = !1;
1223
- return;
1224
- }
1225
- P(i), !k.value && !u.value && $();
1226
- return;
1227
- }
1228
- P(i);
1229
- }
1230
- function G(l) {
1231
- const d = l.target;
1232
- L.value = ce(d.value).replace(/\D/g, "");
1233
- }
1234
- re(
1235
- () => o.value,
1236
- (l) => {
1237
- const d = ce(String(l ?? "")).replace(/\D/g, "");
1238
- if (d !== l) {
1239
- o.value = d;
1240
- return;
1241
- }
1242
- if (E) {
1243
- E = !1;
1244
- return;
1245
- }
1246
- L.value = d;
1247
- },
1248
- { flush: "post" }
1249
- );
1250
- const S = C(() => wt(e.messages)), s = C(
1251
- () => e.dir === "ltr" || e.dir === "rtl" ? e.dir : void 0
1252
- ), m = C(
1253
- () => u.value ? O({ iso2: u.value }, e.locale) : null
1254
- ), n = C(
1255
- () => j({
1256
- country: u.value ? { iso2: u.value } : null,
1257
- phone: o.value ?? "",
1258
- locale: e.locale
1259
- })
1260
- ), Z = C(
1261
- () => e.placeholder || m.value?.format_hint || S.value.phoneInputLabel
1262
- ), oe = C(() => {
1263
- const l = n.value;
1264
- return l.ok || !l.reason || !o.value ? null : e.errorMessages?.[l.reason] ?? S.value.errorMessages[l.reason];
1265
- }), D = C(() => u.value ? Y(u.value)?.raw_data.dial_code ?? null : null), se = C(
1266
- () => `${Me[e.size]} ${W[e.size]}`
1267
- ), Ke = C(() => `px-2 ${W[e.size]}`), J = C(() => o.value ? n.value.ok ? "valid" : "error" : "idle"), we = je(), ge = C(() => !!(e.showValidation && oe.value)), Ce = C(() => !ge.value && !o.value && !!m.value?.format_hint), Ve = C(() => ge.value || Ce.value ? we : void 0);
1268
- return r({ validation: n, required: m, selectedDialCode: D, validationState: J }), (l, d) => (B(), K("div", {
1269
- class: V(w(R)("flex w-full flex-col gap-1.5", l.$attrs.class)),
1270
- "data-slot": "tell-input",
1271
- dir: s.value
1272
- }, [
1273
- _("div", qt, [
1274
- _("div", {
1275
- class: V(
1276
- w(R)(
1277
- w(_t)({ size: e.size }),
1278
- "focus-within:ring-2 focus-within:ring-offset-0",
1279
- // Validation field colors are an opt-in via `showValidation` — by default the
1280
- // field stays neutral and the consumer drives error rendering from `validation`.
1281
- (!e.showValidation || J.value === "idle") && "focus-within:ring-ring/40",
1282
- e.showValidation && J.value === "valid" && "border-emerald-500/60 ring-1 ring-emerald-500/20 focus-within:ring-emerald-500/40",
1283
- e.showValidation && J.value === "error" && "border-destructive/80 ring-1 ring-destructive/20 focus-within:ring-destructive/40",
1284
- e.class,
1285
- e.fieldClass
1286
- )
1287
- ),
1288
- "data-state": J.value
1289
- }, [
1290
- h(l.$slots, "prefix"),
1291
- D.value ? (B(), K("span", {
1292
- key: 0,
1293
- "data-slot": "tell-input-dial",
1294
- dir: "ltr",
1295
- "aria-hidden": "true",
1296
- class: V(w(R)("text-muted-foreground shrink-0 tabular-nums select-none", Ke.value))
1297
- }, M(D.value), 3)) : H("", !0),
1298
- _("input", {
1299
- value: L.value,
1300
- type: "tel",
1301
- inputmode: "numeric",
1302
- autocomplete: "tel",
1303
- dir: "ltr",
1304
- "data-slot": "tell-input-field",
1305
- disabled: e.disabled || e.loading,
1306
- placeholder: Z.value,
1307
- "aria-label": S.value.phoneInputLabel,
1308
- "aria-invalid": J.value === "error" || void 0,
1309
- "aria-describedby": Ve.value,
1310
- class: V(
1311
- w(R)(
1312
- "placeholder:text-muted-foreground h-full w-full min-w-0 flex-1 bg-transparent tabular-nums outline-none disabled:cursor-not-allowed",
1313
- se.value,
1314
- D.value && "ps-1",
1315
- e.inputClass
1316
- )
1317
- ),
1318
- onInput: T,
1319
- onChange: G
1320
- }, null, 42, Qt),
1321
- F($e, {
1322
- "enter-active-class": "transition-all duration-200 ease-out overflow-hidden",
1323
- "leave-active-class": "transition-all duration-150 ease-in overflow-hidden",
1324
- "enter-from-class": "opacity-0 max-w-0",
1325
- "leave-to-class": "opacity-0 max-w-0",
1326
- "enter-to-class": "max-w-[12rem]",
1327
- "leave-from-class": "max-w-[12rem]"
1328
- }, {
1329
- default: U(() => [
1330
- !e.detectFromInput || u.value ? (B(), he(Jt, {
1331
- key: 0,
1332
- selected: u.value,
1333
- "onUpdate:selected": d[0] || (d[0] = (i) => u.value = i),
1334
- "allowed-dial-codes": e.allowedDialCodes,
1335
- disabled: e.disabled || e.loading,
1336
- size: e.size,
1337
- locale: e.locale,
1338
- "search-placeholder": e.searchPlaceholder ?? S.value.searchPlaceholder,
1339
- "empty-text": e.emptyText ?? S.value.emptyText,
1340
- "loading-text": e.loadingText ?? S.value.loadingText,
1341
- "suggested-label": S.value.suggestedLabel,
1342
- "all-countries-label": S.value.allCountriesLabel,
1343
- "country-label": S.value.countryLabel,
1344
- "select-country-label": S.value.selectCountryLabel,
1345
- "flag-url": e.flagUrl,
1346
- searcher: e.searcher,
1347
- countries: e.countries,
1348
- "content-class": e.contentClass,
1349
- "popover-class": e.popoverClass,
1350
- "drawer-class": e.drawerClass
1351
- }, Je({ _: 2 }, [
1352
- l.$slots.trigger ? {
1353
- name: "trigger",
1354
- fn: U((i) => [
1355
- h(l.$slots, "trigger", X(ee(i)))
1356
- ]),
1357
- key: "0"
1358
- } : void 0,
1359
- l.$slots.chevron ? {
1360
- name: "chevron",
1361
- fn: U((i) => [
1362
- h(l.$slots, "chevron", X(ee(i)))
1363
- ]),
1364
- key: "1"
1365
- } : void 0,
1366
- l.$slots.flag ? {
1367
- name: "flag",
1368
- fn: U((i) => [
1369
- h(l.$slots, "flag", X(ee(i)))
1370
- ]),
1371
- key: "2"
1372
- } : void 0,
1373
- l.$slots.item ? {
1374
- name: "item",
1375
- fn: U((i) => [
1376
- h(l.$slots, "item", X(ee(i)))
1377
- ]),
1378
- key: "3"
1379
- } : void 0,
1380
- l.$slots["group-header"] ? {
1381
- name: "group-header",
1382
- fn: U((i) => [
1383
- h(l.$slots, "group-header", X(ee(i)))
1384
- ]),
1385
- key: "4"
1386
- } : void 0,
1387
- l.$slots.search ? {
1388
- name: "search",
1389
- fn: U((i) => [
1390
- h(l.$slots, "search", X(ee(i)))
1391
- ]),
1392
- key: "5"
1393
- } : void 0,
1394
- l.$slots.loading ? {
1395
- name: "loading",
1396
- fn: U(() => [
1397
- h(l.$slots, "loading")
1398
- ]),
1399
- key: "6"
1400
- } : void 0,
1401
- l.$slots.empty ? {
1402
- name: "empty",
1403
- fn: U((i) => [
1404
- h(l.$slots, "empty", X(ee(i)))
1405
- ]),
1406
- key: "7"
1407
- } : void 0
1408
- ]), 1032, ["selected", "allowed-dial-codes", "disabled", "size", "locale", "search-placeholder", "empty-text", "loading-text", "suggested-label", "all-countries-label", "country-label", "select-country-label", "flag-url", "searcher", "countries", "content-class", "popover-class", "drawer-class"])) : H("", !0)
1409
- ]),
1410
- _: 3
1411
- }),
1412
- h(l.$slots, "suffix", {
1413
- validationState: J.value,
1414
- validation: n.value
1415
- })
1416
- ], 10, Wt),
1417
- e.showValidationIcon ? (B(), he($e, {
1418
- key: 0,
1419
- "enter-active-class": "transition duration-150 ease-out",
1420
- "leave-active-class": "transition duration-100 ease-in",
1421
- "enter-from-class": "opacity-0 scale-90",
1422
- "leave-to-class": "opacity-0 scale-90"
1423
- }, {
1424
- default: U(() => [
1425
- J.value === "valid" ? h(l.$slots, "valid-icon", { key: 0 }, () => [
1426
- F(w(Qe), {
1427
- class: "size-5 shrink-0 text-emerald-500",
1428
- "aria-hidden": "true"
1429
- })
1430
- ]) : J.value === "error" ? h(l.$slots, "error-icon", {
1431
- key: 1,
1432
- reason: n.value.reason ?? ""
1433
- }, () => [
1434
- F(w(Xe), {
1435
- class: "text-destructive size-5 shrink-0",
1436
- "aria-hidden": "true"
1437
- })
1438
- ]) : H("", !0)
1439
- ]),
1440
- _: 3
1441
- })) : H("", !0)
1442
- ]),
1443
- _("div", {
1444
- id: w(we),
1445
- "aria-live": "polite"
1446
- }, [
1447
- ge.value ? h(l.$slots, "error", {
1448
- key: 0,
1449
- message: oe.value,
1450
- reason: n.value.reason ?? "",
1451
- validation: n.value
1452
- }, () => [
1453
- _("p", {
1454
- "data-slot": "tell-input-error",
1455
- class: V(w(R)("text-destructive text-xs", e.errorClass)),
1456
- role: "alert"
1457
- }, M(oe.value), 3)
1458
- ]) : Ce.value ? h(l.$slots, "hint", {
1459
- key: 1,
1460
- country: u.value,
1461
- formatHint: m.value.format_hint,
1462
- example: m.value.example_e164
1463
- }, () => [
1464
- _("p", {
1465
- "data-slot": "tell-input-hint",
1466
- class: V(w(R)("text-muted-foreground text-xs tabular-nums", e.hintClass))
1467
- }, M(m.value.format_hint), 3)
1468
- ]) : H("", !0)
1469
- ], 8, Xt)
1470
- ], 10, Yt));
1471
- }
1472
- });
1473
- export {
1474
- Fe as D,
1475
- st as L,
1476
- ve as _,
1477
- Jt as a,
1478
- fa as b,
1479
- Ne as c,
1480
- _t as d,
1481
- Ct as e,
1482
- Oe as f,
1483
- Re as g,
1484
- pt as l,
1485
- ce as n,
1486
- wt as r,
1487
- da as u
1488
- };
1489
- //# sourceMappingURL=ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs.map