@alikhalilll/ui 1.2.0 → 1.2.2

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 (97) hide show
  1. package/README.md +68 -45
  2. package/dist/assets/styles.css +2 -74
  3. package/dist/chunks/{ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs → ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs} +15 -15
  4. package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs.map +1 -0
  5. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs +113 -0
  6. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs.map +1 -0
  7. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs +1606 -0
  8. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs.map +1 -0
  9. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs +241 -0
  10. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs.map +1 -0
  11. package/dist/drawer.mjs +1 -1
  12. package/dist/entries/drawer/components/ADrawer.vue.d.ts +31 -0
  13. package/dist/entries/drawer/components/ADrawer.vue.d.ts.map +1 -0
  14. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts +33 -0
  15. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts.map +1 -0
  16. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts +9 -0
  17. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts.map +1 -0
  18. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts +15 -0
  19. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts.map +1 -0
  20. package/dist/entries/drawer/index.d.ts +5 -0
  21. package/dist/entries/drawer/index.d.ts.map +1 -0
  22. package/dist/entries/input/components/AInput.vue.d.ts +36 -0
  23. package/dist/entries/input/components/AInput.vue.d.ts.map +1 -0
  24. package/dist/entries/input/index.d.ts +2 -0
  25. package/dist/entries/input/index.d.ts.map +1 -0
  26. package/dist/entries/popover/components/APopover.vue.d.ts +24 -0
  27. package/dist/entries/popover/components/APopover.vue.d.ts.map +1 -0
  28. package/dist/entries/popover/components/APopoverContent.vue.d.ts +48 -0
  29. package/dist/entries/popover/components/APopoverContent.vue.d.ts.map +1 -0
  30. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts +17 -0
  31. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts.map +1 -0
  32. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts +15 -0
  33. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts.map +1 -0
  34. package/dist/entries/popover/composables/useEventScrollLock.d.ts +21 -0
  35. package/dist/entries/popover/composables/useEventScrollLock.d.ts.map +1 -0
  36. package/dist/entries/popover/index.d.ts +6 -0
  37. package/dist/entries/popover/index.d.ts.map +1 -0
  38. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts +50 -0
  39. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts.map +1 -0
  40. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts +39 -0
  41. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts.map +1 -0
  42. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts +20 -0
  43. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts.map +1 -0
  44. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts +10 -0
  45. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts.map +1 -0
  46. package/dist/entries/responsive-popover/index.d.ts +4 -0
  47. package/dist/entries/responsive-popover/index.d.ts.map +1 -0
  48. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts +30 -0
  49. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts.map +1 -0
  50. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts +140 -0
  51. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts.map +1 -0
  52. package/dist/entries/tell-input/components/ATellInput.vue.d.ts +145 -0
  53. package/dist/entries/tell-input/components/ATellInput.vue.d.ts.map +1 -0
  54. package/dist/entries/tell-input/composables/useCountryDetection.d.ts +44 -0
  55. package/dist/entries/tell-input/composables/useCountryDetection.d.ts.map +1 -0
  56. package/dist/entries/tell-input/composables/useCountryMatching.d.ts +44 -0
  57. package/dist/entries/tell-input/composables/useCountryMatching.d.ts.map +1 -0
  58. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts +110 -0
  59. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts.map +1 -0
  60. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts +67 -0
  61. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts.map +1 -0
  62. package/dist/entries/tell-input/composables/useTypingPhase.d.ts +50 -0
  63. package/dist/entries/tell-input/composables/useTypingPhase.d.ts.map +1 -0
  64. package/dist/entries/tell-input/index.d.ts +12 -0
  65. package/dist/entries/tell-input/index.d.ts.map +1 -0
  66. package/dist/entries/tell-input/utils/digits.d.ts +22 -0
  67. package/dist/entries/tell-input/utils/digits.d.ts.map +1 -0
  68. package/dist/entries/tell-input/utils/flag-url.d.ts +8 -0
  69. package/dist/entries/tell-input/utils/flag-url.d.ts.map +1 -0
  70. package/dist/entries/tell-input/utils/types.d.ts +120 -0
  71. package/dist/entries/tell-input/utils/types.d.ts.map +1 -0
  72. package/dist/index.d.ts +7 -1131
  73. package/dist/index.d.ts.map +1 -0
  74. package/dist/index.mjs +39 -33
  75. package/dist/popover.mjs +5 -4
  76. package/dist/responsive-popover.mjs +1 -1
  77. package/dist/tell-input.mjs +14 -9
  78. package/dist/utils/cn.d.ts +3 -0
  79. package/dist/utils/cn.d.ts.map +1 -0
  80. package/dist/utils/index.d.ts +3 -0
  81. package/dist/utils/index.d.ts.map +1 -0
  82. package/dist/{utils.d.ts → utils/sizes.d.ts} +18 -29
  83. package/dist/utils/sizes.d.ts.map +1 -0
  84. package/entries/tell-input/README.md +1 -0
  85. package/package.json +14 -10
  86. package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs.map +0 -1
  87. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs +0 -132
  88. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs.map +0 -1
  89. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs +0 -92
  90. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs.map +0 -1
  91. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs +0 -1485
  92. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs.map +0 -1
  93. package/dist/drawer.d.ts +0 -116
  94. package/dist/input.d.ts +0 -65
  95. package/dist/popover.d.ts +0 -117
  96. package/dist/responsive-popover.d.ts +0 -124
  97. package/dist/tell-input.d.ts +0 -732
@@ -1,1485 +0,0 @@
1
- import { ref as B, onMounted as ye, defineComponent as be, computed as C, watch as le, openBlock as M, createElementBlock as K, normalizeClass as G, unref as w, toDisplayString as D, renderSlot as h, createElementVNode as _, useModel as me, createBlock as Te, withCtx as U, createVNode as R, createCommentVNode as Z, withDirectives as He, vModelText as Ze, Fragment as pe, renderList as Se, mergeModels as De, useId as je, Transition as ke, 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 $e, 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 z } 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 rt } from "class-variance-authority";
9
- import { _ as lt, b as nt, a as ot } from "./AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.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: l } of st)
22
- for (let e = 0; e <= 9; e++) t.set(l + e, String(e));
23
- return t;
24
- })();
25
- function ce(t) {
26
- const l = String(t ?? "");
27
- let e = "";
28
- for (const o of l) {
29
- const p = o.codePointAt(0);
30
- e += p != null && it.get(p) || o;
31
- }
32
- return e;
33
- }
34
- const xe = "ali_ui_phone_countries_v1", ut = "https://restcountries.com/v3.1/all?fields=name,cca2,idd,flags", ct = at, Ee = () => typeof window < "u";
35
- function Q(t) {
36
- return ce(String(t ?? "")).replace(/\D/g, "");
37
- }
38
- function dt(t, l) {
39
- if (!l) return t;
40
- try {
41
- const e = new Intl.NumberFormat(l, { useGrouping: !1 });
42
- return t.replace(/[0-9]/g, (o) => e.format(Number(o)));
43
- } catch {
44
- return t;
45
- }
46
- }
47
- function he(t) {
48
- const l = Q(t);
49
- return l ? `+${l}` : "";
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 re(t, l) {
58
- const e = he(t), o = Ue(Q(l));
59
- return e && o ? `${e}${o}` : null;
60
- }
61
- function ft(t) {
62
- const l = Q(t);
63
- if (!l) return { min: null, max: null };
64
- const e = l.length;
65
- return { min: Math.max(4, e - 2), max: e + 2 };
66
- }
67
- function gt(t) {
68
- const l = t?.root?.trim();
69
- if (!l || !l.startsWith("+")) return null;
70
- const e = t?.suffixes?.[0]?.trim() ?? "", o = `${l}${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, l) {
77
- if (!l) return t;
78
- let e;
79
- try {
80
- e = new Intl.DisplayNames([l], { 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, l, e) {
103
- const o = Q(e);
104
- return {
105
- label: `${l} (+${o})`,
106
- value: t,
107
- search_key: fe(`${l} +${o} ${t}`),
108
- raw_data: {
109
- iso2: t,
110
- dial_code: `+${o}`,
111
- dial_digits: o,
112
- name: l,
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 = B([]), l = B(!1), e = B(/* @__PURE__ */ new Map()), o = B(/* @__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 O(v) {
161
- const y = [];
162
- for (const a of v) {
163
- const c = a?.name?.common?.trim(), f = ue(a?.cca2), $ = gt(a?.idd), I = 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: I,
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 && Ee())
197
- try {
198
- const g = localStorage.getItem(xe);
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
- l.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 = O(a);
211
- if (u(c.length ? c : Le), Ee())
212
- try {
213
- localStorage.setItem(xe, JSON.stringify(t.value));
214
- } catch {
215
- }
216
- return t.value;
217
- } catch {
218
- return u(Le), t.value;
219
- } finally {
220
- l.value = !1;
221
- }
222
- }
223
- function F(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 L(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), I = v.dial_code ? he(v.dial_code) : f ? `+${a?.countryCallingCode}` : "", E = Q(c);
243
- return {
244
- iso2: g,
245
- dial_code: I,
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: he(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: re(a.dial_code, f),
303
- required: a
304
- };
305
- const $ = Ue(f), { min: I, max: E } = a.national_number_length;
306
- if (I !== null && $.length < I)
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: re(a.dial_code, f),
313
- required: a,
314
- details: { min: I, 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: re(a.dial_code, f),
323
- required: a,
324
- details: { max: E, actual: $.length }
325
- };
326
- const P = re(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 V = 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: V?.number ?? P,
351
- required: a
352
- };
353
- } catch (N) {
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: re(a.dial_code, f),
360
- required: a,
361
- details: { error: N?.message ?? String(N) }
362
- };
363
- }
364
- }
365
- return {
366
- countries: t,
367
- isCountriesLoading: l,
368
- getCountries: j,
369
- searchCountries: F,
370
- getCountryByValue: Y,
371
- getCountriesByDial: L,
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 l = (navigator.language ?? "").match(/^[a-z]{2,3}-([A-Z]{2})/);
475
- return l ? l[1] : null;
476
- } catch {
477
- return null;
478
- }
479
- }
480
- async function yt(t, l) {
481
- if (!ne() || typeof fetch != "function") return null;
482
- const e = new AbortController(), o = setTimeout(() => e.abort(), l);
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(), O = (u.country_code ?? u.country ?? "").toString().toUpperCase();
487
- return /^[A-Z]{2}$/.test(O) ? O : 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 Ie(t) {
504
- if (ne())
505
- try {
506
- sessionStorage.setItem(ze, t);
507
- } catch {
508
- }
509
- }
510
- async function Oe(t = {}) {
511
- const {
512
- strategy: l = "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 F = bt();
520
- if (F) return F;
521
- }
522
- if (l === "none")
523
- return o.toUpperCase();
524
- if (l === "auto") {
525
- const F = await yt(e, p);
526
- if (F)
527
- return u && Ie(F), F;
528
- }
529
- const j = (mt() ?? ht() ?? o).toUpperCase();
530
- return u && Ie(j), j;
531
- }
532
- function da(t = {}) {
533
- const l = B(null), e = B(!1);
534
- async function o() {
535
- e.value = !0;
536
- try {
537
- l.value = await Oe(t);
538
- } finally {
539
- e.value = !1;
540
- }
541
- return l.value;
542
- }
543
- return ye(() => {
544
- o();
545
- }), { country: l, isLoading: e, refresh: o };
546
- }
547
- const _t = rt(
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
- }, Be = {
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
- ...Be,
586
- ...t,
587
- errorMessages: { ...Fe, ...t.errorMessages }
588
- } : Be;
589
- }
590
- function Ct(t, l = 40) {
591
- return `https://flagcdn.com/w${l}/${t.toLowerCase()}.png`;
592
- }
593
- const At = ["src", "alt"], St = ["aria-label"], ve = /* @__PURE__ */ be({
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 l = t, e = C(() => l.src ? l.src : l.iso2 ? (l.flagUrl ?? Ct)(l.iso2, l.width) : null), o = B(!1);
605
- le(e, () => {
606
- o.value = !1;
607
- });
608
- const p = C(() => (l.iso2 ?? "").slice(0, 2).toUpperCase());
609
- return (u, O) => e.value && !o.value ? (M(), K("img", {
610
- key: 0,
611
- src: e.value,
612
- alt: l.alt ?? `${l.iso2} flag`,
613
- loading: "lazy",
614
- "data-slot": "country-flag",
615
- class: G(w(z)("ring-border/40 inline-block h-4 w-6 rounded-sm object-cover ring-1", l.class)),
616
- onError: O[0] || (O[0] = (j) => o.value = !0)
617
- }, null, 42, At)) : p.value ? (M(), K("span", {
618
- key: 1,
619
- "data-slot": "country-flag-fallback",
620
- "aria-label": l.alt ?? `${l.iso2} flag`,
621
- class: G(
622
- w(z)(
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
- l.class
625
- )
626
- )
627
- }, D(p.value), 11, St)) : h(u.$slots, "empty", { key: 2 }, () => [
628
- _("span", {
629
- "data-slot": "country-flag-empty",
630
- class: G(w(z)("bg-muted inline-block h-4 w-6 rounded-sm", l.class))
631
- }, null, 2)
632
- ]);
633
- }
634
- }), kt = ["disabled", "data-state", "aria-label"], $t = { class: "border-b p-1.5" }, xt = { class: "bg-muted/40 ring-border focus-within:ring-ring relative flex items-center rounded-md ring-1 transition-shadow focus-within:ring-2" }, Et = ["placeholder"], Lt = {
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
- }, It = {
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" }, Gt = ["aria-label"], Vt = ["aria-selected", "aria-disabled"], Ht = ["disabled", "data-selected", "onClick"], Zt = { class: "flex-1 truncate" }, jt = { class: "text-muted-foreground tabular-nums" }, Ne = "ali_ui_country_recents_v1", Jt = /* @__PURE__ */ be({
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: l }) {
679
- const e = t, o = C(
680
- () => `${Me[e.size]} ${W[e.size]}`
681
- ), p = me(t, "selected"), {
682
- countries: u,
683
- isCountriesLoading: O,
684
- getCountries: j,
685
- searchCountries: F,
686
- getCountryByValue: Y
687
- } = Re(), L = B(!1), k = B("");
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 = B([]);
698
- function a() {
699
- if (!(typeof window > "u"))
700
- try {
701
- const s = localStorage.getItem(Ne);
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(Ne, JSON.stringify(m));
715
- } catch {
716
- }
717
- }
718
- ye(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 I = C(() => {
724
- if (!f.value) return [];
725
- if (!e.countries && !e.searcher && !e.locale)
726
- return F(k.value, e.maxResults);
727
- const s = k.value.trim(), m = e.searcher ?? $, n = [];
728
- for (const H of x.value)
729
- if (m(s, H) && (n.push(H), 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 = (T) => {
735
- if (!T || s.has(T)) return;
736
- const se = y(T);
737
- se && (s.add(T), m.push(se));
738
- };
739
- n(p.value);
740
- const H = e.allowedDialCodes;
741
- if (Array.isArray(H) && H.length > 0) {
742
- for (const T of x.value)
743
- H.includes(T.raw_data.dial_digits) && n(T.value);
744
- return m;
745
- }
746
- for (const T of g.value)
747
- if (n(T), m.length >= e.suggestedLimit) break;
748
- return m.slice(0, e.suggestedLimit);
749
- }), P = C(() => f.value ? [] : x.value), N = C(() => y(p.value));
750
- function V(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
- V(s) && (p.value = s.value, c(s.value), L.value = !1);
756
- }
757
- return le(L, (s) => {
758
- s || (k.value = "");
759
- }), l({
760
- open: L,
761
- setOpen: (s) => L.value = s,
762
- search: k,
763
- setSearch: (s) => k.value = s,
764
- selectedCountry: N,
765
- selectCountry: S,
766
- countries: x,
767
- recents: g
768
- }), (s, m) => (M(), Te(w(lt), {
769
- open: L.value,
770
- "onUpdate:open": m[1] || (m[1] = (n) => L.value = n)
771
- }, {
772
- default: U(() => [
773
- R(w(nt), { "as-child": "" }, {
774
- default: U(() => [
775
- h(s.$slots, "trigger", {
776
- selectedCountry: N.value,
777
- open: L.value,
778
- sizeClasses: o.value
779
- }, () => [
780
- _("button", {
781
- type: "button",
782
- disabled: e.disabled,
783
- "data-slot": "country-select-trigger",
784
- "data-state": L.value ? "open" : "closed",
785
- class: G(
786
- w(z)(
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": N.value ? `${e.countryLabel}: ${N.value.raw_data.name}` : e.selectCountryLabel
793
- }, [
794
- N.value ? h(s.$slots, "flag", {
795
- key: 0,
796
- country: N.value,
797
- context: "trigger"
798
- }, () => [
799
- R(ve, {
800
- iso2: N.value.raw_data.iso2,
801
- src: N.value.raw_data.flag,
802
- "flag-url": e.flagUrl
803
- }, null, 8, ["iso2", "src", "flag-url"])
804
- ]) : Z("", !0),
805
- h(s.$slots, "chevron", { open: L.value }, () => [
806
- R(w(qe), {
807
- class: G(["text-muted-foreground size-3.5 shrink-0 transition-transform duration-200", L.value && "rotate-180"])
808
- }, null, 8, ["class"])
809
- ])
810
- ], 10, kt)
811
- ])
812
- ]),
813
- _: 3
814
- }),
815
- R(w(ot), {
816
- align: "end",
817
- "side-offset": 6,
818
- class: G(w(z)("flex flex-col overflow-hidden p-0", e.contentClass)),
819
- "popover-class": w(z)(
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(z)("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
- R(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-8 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 ? (M(), K("kbd", Lt, D(e.kbdOpen), 1)) : f.value && e.kbdClose ? (M(), K("kbd", It, D(e.kbdClose), 1)) : Z("", !0)
846
- ])
847
- ])
848
- ]),
849
- _("div", Bt, [
850
- w(O) && x.value.length === 0 ? h(s.$slots, "loading", { key: 0 }, () => [
851
- _("div", Nt, D(e.loadingText), 1)
852
- ]) : f.value && I.value.length === 0 ? h(s.$slots, "empty", {
853
- key: 1,
854
- query: k.value
855
- }, () => [
856
- _("div", Tt, D(e.emptyText), 1)
857
- ]) : (M(), K(pe, { key: 2 }, [
858
- E.value.length > 0 ? (M(), K("section", Dt, [
859
- h(s.$slots, "group-header", {
860
- label: e.suggestedLabel,
861
- group: "suggested"
862
- }, () => [
863
- _("header", Mt, D(e.suggestedLabel), 1)
864
- ]),
865
- _("ul", {
866
- role: "listbox",
867
- "aria-label": e.suggestedLabel,
868
- class: "pb-1"
869
- }, [
870
- (M(!0), K(pe, null, Se(E.value, (n) => (M(), K("li", {
871
- key: `s-${n.value}`,
872
- role: "option",
873
- "aria-selected": n.value === p.value,
874
- "aria-disabled": !V(n)
875
- }, [
876
- h(s.$slots, "item", {
877
- country: n,
878
- selected: n.value === p.value,
879
- disabled: !V(n),
880
- select: () => S(n)
881
- }, () => [
882
- _("button", {
883
- type: "button",
884
- disabled: !V(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: (H) => S(n)
889
- }, [
890
- h(s.$slots, "flag", {
891
- country: n,
892
- context: "item"
893
- }, () => [
894
- R(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, D(n.raw_data.name), 1),
901
- _("span", Ot, D(n.raw_data.dial_code), 1),
902
- n.value === p.value ? h(s.$slots, "item-check", {
903
- key: 0,
904
- country: n
905
- }, () => [
906
- R(w($e), { class: "text-foreground size-3.5 shrink-0" })
907
- ]) : Z("", !0)
908
- ], 8, Rt)
909
- ])
910
- ], 8, Ut))), 128))
911
- ], 8, Pt)
912
- ])) : Z("", !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, D(e.allCountriesLabel), 1)
920
- ]) : Z("", !0),
921
- _("ul", {
922
- role: "listbox",
923
- "aria-label": f.value ? e.searchPlaceholder : e.allCountriesLabel,
924
- class: "pb-1"
925
- }, [
926
- (M(!0), K(pe, null, Se(f.value ? I.value : P.value, (n) => (M(), K("li", {
927
- key: n.value,
928
- role: "option",
929
- "aria-selected": n.value === p.value,
930
- "aria-disabled": !V(n)
931
- }, [
932
- h(s.$slots, "item", {
933
- country: n,
934
- selected: n.value === p.value,
935
- disabled: !V(n),
936
- select: () => S(n)
937
- }, () => [
938
- _("button", {
939
- type: "button",
940
- disabled: !V(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: (H) => S(n)
945
- }, [
946
- h(s.$slots, "flag", {
947
- country: n,
948
- context: "item"
949
- }, () => [
950
- R(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, D(n.raw_data.name), 1),
957
- _("span", jt, D(n.raw_data.dial_code), 1),
958
- n.value === p.value ? h(s.$slots, "item-check", {
959
- key: 0,
960
- country: n
961
- }, () => [
962
- R(w($e), { class: "text-foreground size-3.5 shrink-0" })
963
- ]) : Z("", !0)
964
- ], 8, Ht)
965
- ])
966
- ], 8, Vt))), 128))
967
- ], 8, Gt)
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__ */ be({
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
- detectCountry: { default: "auto" },
1006
- defaultCountry: { default: "" },
1007
- ipEndpoint: { default: "https://ipapi.co/json/" },
1008
- searchPlaceholder: {},
1009
- emptyText: {},
1010
- loadingText: {},
1011
- errorMessages: {},
1012
- detectFromInput: { type: Boolean, default: !0 },
1013
- detectDebounceMs: { default: 150 }
1014
- }, {
1015
- phone: { default: "" },
1016
- phoneModifiers: {},
1017
- country: { default: null },
1018
- countryModifiers: {}
1019
- }),
1020
- emits: ["update:phone", "update:country"],
1021
- setup(t, { expose: l }) {
1022
- const e = t, o = me(t, "phone"), p = me(t, "country"), u = B(""), { getCountries: O, validate: j, getRequiredInfo: F, getCountryByValue: Y, getCountriesByDial: L } = Re();
1023
- O();
1024
- const k = B(!1), x = B(!1), v = {
1025
- 1: "US",
1026
- 7: "RU",
1027
- 20: "EG",
1028
- 27: "ZA",
1029
- 30: "GR",
1030
- 31: "NL",
1031
- 32: "BE",
1032
- 33: "FR",
1033
- 34: "ES",
1034
- 39: "IT",
1035
- 44: "GB",
1036
- 46: "SE",
1037
- 47: "NO",
1038
- 48: "PL",
1039
- 49: "DE",
1040
- 52: "MX",
1041
- 54: "AR",
1042
- 55: "BR",
1043
- 60: "MY",
1044
- 61: "AU",
1045
- 62: "ID",
1046
- 63: "PH",
1047
- 64: "NZ",
1048
- 65: "SG",
1049
- 66: "TH",
1050
- 81: "JP",
1051
- 82: "KR",
1052
- 84: "VN",
1053
- 86: "CN",
1054
- 90: "TR",
1055
- 91: "IN",
1056
- 92: "PK",
1057
- 95: "MM",
1058
- 212: "MA",
1059
- 213: "DZ",
1060
- 216: "TN",
1061
- 218: "LY",
1062
- 234: "NG",
1063
- 254: "KE",
1064
- 352: "LU",
1065
- 353: "IE",
1066
- 358: "FI",
1067
- 359: "BG",
1068
- 380: "UA",
1069
- 420: "CZ",
1070
- 421: "SK",
1071
- 961: "LB",
1072
- 962: "JO",
1073
- 963: "SY",
1074
- 964: "IQ",
1075
- 965: "KW",
1076
- 966: "SA",
1077
- 967: "YE",
1078
- 968: "OM",
1079
- 970: "PS",
1080
- 971: "AE",
1081
- 972: "IL",
1082
- 973: "BH",
1083
- 974: "QA"
1084
- };
1085
- function y(r) {
1086
- const d = String(r ?? "").trim();
1087
- if (!d) return "";
1088
- if (/^[A-Za-z]{2}$/.test(d)) return d.toUpperCase();
1089
- const i = d.replace(/^\+/, "");
1090
- if (!/^\d+$/.test(i)) return "";
1091
- const b = L(i)[0];
1092
- return b ? b.value : v[i] ?? "";
1093
- }
1094
- const g = B(y(e.defaultCountry));
1095
- function a() {
1096
- if (typeof window > "u") return [];
1097
- try {
1098
- const r = localStorage.getItem(ea);
1099
- if (!r) return [];
1100
- const d = JSON.parse(r);
1101
- return Array.isArray(d) ? d.filter((i) => typeof i == "string") : [];
1102
- } catch {
1103
- return [];
1104
- }
1105
- }
1106
- function c(r) {
1107
- if (!r) return null;
1108
- try {
1109
- const i = de(`+${r}`);
1110
- if (i?.country && i.countryCallingCode) {
1111
- const b = Y(i.country);
1112
- if (b)
1113
- return { country: b, nationalNumber: String(i.nationalNumber ?? "") };
1114
- }
1115
- } catch {
1116
- }
1117
- const d = g.value;
1118
- if (d && r.length >= 4)
1119
- try {
1120
- const i = de(r, d);
1121
- if (i?.isValid()) {
1122
- const b = Y(i.country || d);
1123
- if (b)
1124
- return { country: b, nationalNumber: String(i.nationalNumber ?? "") };
1125
- }
1126
- } catch {
1127
- }
1128
- for (let i = Math.min(3, r.length); i >= 1; i--) {
1129
- const b = r.slice(0, i), q = L(b);
1130
- if (!q.length) continue;
1131
- const ie = r.slice(b.length);
1132
- if (q.length === 1) return { country: q[0], nationalNumber: ie };
1133
- const Ce = u.value ? q.find((te) => te.value === u.value.toUpperCase()) : null;
1134
- if (Ce) return { country: Ce, nationalNumber: ie };
1135
- const Ae = a().map((te) => q.find((Ve) => Ve.value === te)).find((te) => !!te);
1136
- return Ae ? { country: Ae, nationalNumber: ie } : { country: q[0], nationalNumber: ie };
1137
- }
1138
- return null;
1139
- }
1140
- ye(async () => {
1141
- if (u.value) return;
1142
- if (e.defaultCountry) {
1143
- const b = y(e.defaultCountry);
1144
- if (b) {
1145
- g.value = b, x.value = !0, u.value = b;
1146
- return;
1147
- }
1148
- }
1149
- const r = {
1150
- strategy: e.detectCountry,
1151
- ipEndpoint: e.ipEndpoint,
1152
- defaultCountry: ""
1153
- };
1154
- let d;
1155
- if (e.detector)
1156
- try {
1157
- d = await e.detector(r);
1158
- } catch {
1159
- d = null;
1160
- }
1161
- d || (d = await Oe(r));
1162
- const i = d ? d.toUpperCase() : "";
1163
- if (e.detectFromInput) {
1164
- if (g.value = i, o.value && !k.value && !u.value) {
1165
- const b = c(o.value);
1166
- b && (x.value = !0, u.value = b.country.value, o.value = b.nationalNumber);
1167
- }
1168
- return;
1169
- }
1170
- !u.value && i && (x.value = !0, u.value = i);
1171
- });
1172
- function f(r) {
1173
- if (!r) return null;
1174
- const i = Y(r)?.raw_data?.dial_digits ?? Object.entries(v).find(([, q]) => q === r)?.[0];
1175
- if (!i) return null;
1176
- const b = Number(i);
1177
- return Number.isFinite(b) ? b : null;
1178
- }
1179
- le(
1180
- p,
1181
- (r) => {
1182
- if (r == null) {
1183
- u.value && (u.value = "");
1184
- return;
1185
- }
1186
- if (f(u.value) === r) return;
1187
- const d = y(String(r));
1188
- d && (u.value = d);
1189
- },
1190
- { immediate: !0 }
1191
- ), le(
1192
- u,
1193
- (r, d) => {
1194
- const i = x.value;
1195
- x.value = !1;
1196
- const b = f(r);
1197
- p.value !== b && (p.value = b), !i && e.detectFromInput && r && d !== r && (k.value = !0);
1198
- },
1199
- { flush: "sync" }
1200
- );
1201
- const $ = Ye(
1202
- () => {
1203
- if (!e.detectFromInput || k.value || u.value) return;
1204
- const r = o.value;
1205
- if (!r) return;
1206
- const d = c(r);
1207
- d && (x.value = !0, u.value = d.country.value, o.value = d.nationalNumber);
1208
- },
1209
- C(() => Math.max(0, e.detectDebounceMs))
1210
- ), I = B(String(o.value ?? ""));
1211
- let E = !1;
1212
- function P(r) {
1213
- E = !0, o.value = r;
1214
- }
1215
- function N(r) {
1216
- const d = r.target;
1217
- I.value = d.value;
1218
- const i = ce(d.value).replace(/\D/g, "");
1219
- if (e.detectFromInput) {
1220
- if (!i) {
1221
- x.value = !0, u.value = "", P(""), k.value = !1;
1222
- return;
1223
- }
1224
- P(i), !k.value && !u.value && $();
1225
- return;
1226
- }
1227
- P(i);
1228
- }
1229
- function V(r) {
1230
- const d = r.target;
1231
- I.value = ce(d.value).replace(/\D/g, "");
1232
- }
1233
- le(
1234
- () => o.value,
1235
- (r) => {
1236
- const d = ce(String(r ?? "")).replace(/\D/g, "");
1237
- if (d !== r) {
1238
- o.value = d;
1239
- return;
1240
- }
1241
- if (E) {
1242
- E = !1;
1243
- return;
1244
- }
1245
- I.value = d;
1246
- },
1247
- { flush: "post" }
1248
- );
1249
- const S = C(() => wt(e.messages)), s = C(
1250
- () => e.dir === "ltr" || e.dir === "rtl" ? e.dir : void 0
1251
- ), m = C(
1252
- () => u.value ? F({ iso2: u.value }, e.locale) : null
1253
- ), n = C(
1254
- () => j({
1255
- country: u.value ? { iso2: u.value } : null,
1256
- phone: o.value ?? "",
1257
- locale: e.locale
1258
- })
1259
- ), H = C(
1260
- () => e.placeholder || m.value?.format_hint || S.value.phoneInputLabel
1261
- ), oe = C(() => {
1262
- const r = n.value;
1263
- return r.ok || !r.reason || !o.value ? null : e.errorMessages?.[r.reason] ?? S.value.errorMessages[r.reason];
1264
- }), T = C(() => u.value ? Y(u.value)?.raw_data.dial_code ?? null : null), se = C(
1265
- () => `${Me[e.size]} ${W[e.size]}`
1266
- ), Ke = C(() => `px-2 ${W[e.size]}`), J = C(() => o.value ? n.value.ok ? "valid" : "error" : "idle"), _e = je(), ge = C(() => !!(e.showValidation && oe.value)), we = C(() => !ge.value && !o.value && !!m.value?.format_hint), Ge = C(() => ge.value || we.value ? _e : void 0);
1267
- return l({ validation: n, required: m, selectedDialCode: T, validationState: J }), (r, d) => (M(), K("div", {
1268
- class: G(w(z)("flex w-full flex-col gap-1.5", r.$attrs.class)),
1269
- "data-slot": "tell-input",
1270
- dir: s.value
1271
- }, [
1272
- _("div", qt, [
1273
- _("div", {
1274
- class: G(
1275
- w(z)(
1276
- w(_t)({ size: e.size }),
1277
- "focus-within:ring-2 focus-within:ring-offset-0",
1278
- J.value === "idle" && "focus-within:ring-ring/40",
1279
- J.value === "valid" && "border-emerald-500/60 ring-1 ring-emerald-500/20 focus-within:ring-emerald-500/40",
1280
- J.value === "error" && "border-destructive/80 ring-1 ring-destructive/20 focus-within:ring-destructive/40",
1281
- e.class,
1282
- e.fieldClass
1283
- )
1284
- ),
1285
- "data-state": J.value
1286
- }, [
1287
- h(r.$slots, "prefix"),
1288
- T.value ? (M(), K("span", {
1289
- key: 0,
1290
- "data-slot": "tell-input-dial",
1291
- dir: "ltr",
1292
- "aria-hidden": "true",
1293
- class: G(w(z)("text-muted-foreground shrink-0 tabular-nums select-none", Ke.value))
1294
- }, D(T.value), 3)) : Z("", !0),
1295
- _("input", {
1296
- value: I.value,
1297
- type: "tel",
1298
- inputmode: "numeric",
1299
- autocomplete: "tel",
1300
- dir: "ltr",
1301
- "data-slot": "tell-input-field",
1302
- disabled: e.disabled || e.loading,
1303
- placeholder: H.value,
1304
- "aria-label": S.value.phoneInputLabel,
1305
- "aria-invalid": J.value === "error" || void 0,
1306
- "aria-describedby": Ge.value,
1307
- class: G(
1308
- w(z)(
1309
- "placeholder:text-muted-foreground h-full w-full min-w-0 flex-1 bg-transparent tabular-nums outline-none disabled:cursor-not-allowed",
1310
- se.value,
1311
- T.value && "ps-1",
1312
- e.inputClass
1313
- )
1314
- ),
1315
- onInput: N,
1316
- onChange: V
1317
- }, null, 42, Qt),
1318
- R(ke, {
1319
- "enter-active-class": "transition-all duration-200 ease-out overflow-hidden",
1320
- "leave-active-class": "transition-all duration-150 ease-in overflow-hidden",
1321
- "enter-from-class": "opacity-0 max-w-0",
1322
- "leave-to-class": "opacity-0 max-w-0",
1323
- "enter-to-class": "max-w-[12rem]",
1324
- "leave-from-class": "max-w-[12rem]"
1325
- }, {
1326
- default: U(() => [
1327
- !e.detectFromInput || u.value ? (M(), Te(Jt, {
1328
- key: 0,
1329
- selected: u.value,
1330
- "onUpdate:selected": d[0] || (d[0] = (i) => u.value = i),
1331
- "allowed-dial-codes": e.allowedDialCodes,
1332
- disabled: e.disabled || e.loading,
1333
- size: e.size,
1334
- locale: e.locale,
1335
- "search-placeholder": e.searchPlaceholder ?? S.value.searchPlaceholder,
1336
- "empty-text": e.emptyText ?? S.value.emptyText,
1337
- "loading-text": e.loadingText ?? S.value.loadingText,
1338
- "suggested-label": S.value.suggestedLabel,
1339
- "all-countries-label": S.value.allCountriesLabel,
1340
- "country-label": S.value.countryLabel,
1341
- "select-country-label": S.value.selectCountryLabel,
1342
- "flag-url": e.flagUrl,
1343
- searcher: e.searcher,
1344
- countries: e.countries,
1345
- "content-class": e.contentClass,
1346
- "popover-class": e.popoverClass,
1347
- "drawer-class": e.drawerClass
1348
- }, Je({ _: 2 }, [
1349
- r.$slots.trigger ? {
1350
- name: "trigger",
1351
- fn: U((i) => [
1352
- h(r.$slots, "trigger", X(ee(i)))
1353
- ]),
1354
- key: "0"
1355
- } : void 0,
1356
- r.$slots.chevron ? {
1357
- name: "chevron",
1358
- fn: U((i) => [
1359
- h(r.$slots, "chevron", X(ee(i)))
1360
- ]),
1361
- key: "1"
1362
- } : void 0,
1363
- r.$slots.flag ? {
1364
- name: "flag",
1365
- fn: U((i) => [
1366
- h(r.$slots, "flag", X(ee(i)))
1367
- ]),
1368
- key: "2"
1369
- } : void 0,
1370
- r.$slots.item ? {
1371
- name: "item",
1372
- fn: U((i) => [
1373
- h(r.$slots, "item", X(ee(i)))
1374
- ]),
1375
- key: "3"
1376
- } : void 0,
1377
- r.$slots["group-header"] ? {
1378
- name: "group-header",
1379
- fn: U((i) => [
1380
- h(r.$slots, "group-header", X(ee(i)))
1381
- ]),
1382
- key: "4"
1383
- } : void 0,
1384
- r.$slots.search ? {
1385
- name: "search",
1386
- fn: U((i) => [
1387
- h(r.$slots, "search", X(ee(i)))
1388
- ]),
1389
- key: "5"
1390
- } : void 0,
1391
- r.$slots.loading ? {
1392
- name: "loading",
1393
- fn: U(() => [
1394
- h(r.$slots, "loading")
1395
- ]),
1396
- key: "6"
1397
- } : void 0,
1398
- r.$slots.empty ? {
1399
- name: "empty",
1400
- fn: U((i) => [
1401
- h(r.$slots, "empty", X(ee(i)))
1402
- ]),
1403
- key: "7"
1404
- } : void 0
1405
- ]), 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"])) : Z("", !0)
1406
- ]),
1407
- _: 3
1408
- }),
1409
- h(r.$slots, "suffix", {
1410
- validationState: J.value,
1411
- validation: n.value
1412
- })
1413
- ], 10, Wt),
1414
- R(ke, {
1415
- "enter-active-class": "transition duration-150 ease-out",
1416
- "leave-active-class": "transition duration-100 ease-in",
1417
- "enter-from-class": "opacity-0 scale-90",
1418
- "leave-to-class": "opacity-0 scale-90"
1419
- }, {
1420
- default: U(() => [
1421
- J.value === "valid" ? h(r.$slots, "valid-icon", { key: 0 }, () => [
1422
- R(w(Qe), {
1423
- class: "size-5 shrink-0 text-emerald-500",
1424
- "aria-hidden": "true"
1425
- })
1426
- ]) : J.value === "error" ? h(r.$slots, "error-icon", {
1427
- key: 1,
1428
- reason: n.value.reason ?? ""
1429
- }, () => [
1430
- R(w(Xe), {
1431
- class: "text-destructive size-5 shrink-0",
1432
- "aria-hidden": "true"
1433
- })
1434
- ]) : Z("", !0)
1435
- ]),
1436
- _: 3
1437
- })
1438
- ]),
1439
- _("div", {
1440
- id: w(_e),
1441
- "aria-live": "polite"
1442
- }, [
1443
- ge.value ? h(r.$slots, "error", {
1444
- key: 0,
1445
- message: oe.value,
1446
- reason: n.value.reason ?? "",
1447
- validation: n.value
1448
- }, () => [
1449
- _("p", {
1450
- "data-slot": "tell-input-error",
1451
- class: G(w(z)("text-destructive text-xs", e.errorClass)),
1452
- role: "alert"
1453
- }, D(oe.value), 3)
1454
- ]) : we.value ? h(r.$slots, "hint", {
1455
- key: 1,
1456
- country: u.value,
1457
- formatHint: m.value.format_hint,
1458
- example: m.value.example_e164
1459
- }, () => [
1460
- _("p", {
1461
- "data-slot": "tell-input-hint",
1462
- class: G(w(z)("text-muted-foreground text-xs tabular-nums", e.hintClass))
1463
- }, D(m.value.format_hint), 3)
1464
- ]) : Z("", !0)
1465
- ], 8, Xt)
1466
- ], 10, Yt));
1467
- }
1468
- });
1469
- export {
1470
- Fe as D,
1471
- st as L,
1472
- ve as _,
1473
- Jt as a,
1474
- fa as b,
1475
- Be as c,
1476
- _t as d,
1477
- Ct as e,
1478
- Oe as f,
1479
- Re as g,
1480
- pt as l,
1481
- ce as n,
1482
- wt as r,
1483
- da as u
1484
- };
1485
- //# sourceMappingURL=ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs.map