@alikhalilll/ui 1.0.0 → 1.1.1

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