@alikhalilll/ui 1.1.1 → 1.2.0

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