@alikhalilll/ui 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/README.md +68 -45
  2. package/dist/assets/styles.css +2 -74
  3. package/dist/chunks/{ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs → ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs} +15 -15
  4. package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs.map +1 -0
  5. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs +113 -0
  6. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs.map +1 -0
  7. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs +1606 -0
  8. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs.map +1 -0
  9. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs +241 -0
  10. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs.map +1 -0
  11. package/dist/drawer.mjs +1 -1
  12. package/dist/entries/drawer/components/ADrawer.vue.d.ts +31 -0
  13. package/dist/entries/drawer/components/ADrawer.vue.d.ts.map +1 -0
  14. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts +33 -0
  15. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts.map +1 -0
  16. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts +9 -0
  17. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts.map +1 -0
  18. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts +15 -0
  19. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts.map +1 -0
  20. package/dist/entries/drawer/index.d.ts +5 -0
  21. package/dist/entries/drawer/index.d.ts.map +1 -0
  22. package/dist/entries/input/components/AInput.vue.d.ts +36 -0
  23. package/dist/entries/input/components/AInput.vue.d.ts.map +1 -0
  24. package/dist/entries/input/index.d.ts +2 -0
  25. package/dist/entries/input/index.d.ts.map +1 -0
  26. package/dist/entries/popover/components/APopover.vue.d.ts +24 -0
  27. package/dist/entries/popover/components/APopover.vue.d.ts.map +1 -0
  28. package/dist/entries/popover/components/APopoverContent.vue.d.ts +48 -0
  29. package/dist/entries/popover/components/APopoverContent.vue.d.ts.map +1 -0
  30. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts +17 -0
  31. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts.map +1 -0
  32. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts +15 -0
  33. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts.map +1 -0
  34. package/dist/entries/popover/composables/useEventScrollLock.d.ts +21 -0
  35. package/dist/entries/popover/composables/useEventScrollLock.d.ts.map +1 -0
  36. package/dist/entries/popover/index.d.ts +6 -0
  37. package/dist/entries/popover/index.d.ts.map +1 -0
  38. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts +50 -0
  39. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts.map +1 -0
  40. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts +39 -0
  41. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts.map +1 -0
  42. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts +20 -0
  43. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts.map +1 -0
  44. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts +10 -0
  45. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts.map +1 -0
  46. package/dist/entries/responsive-popover/index.d.ts +4 -0
  47. package/dist/entries/responsive-popover/index.d.ts.map +1 -0
  48. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts +30 -0
  49. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts.map +1 -0
  50. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts +140 -0
  51. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts.map +1 -0
  52. package/dist/entries/tell-input/components/ATellInput.vue.d.ts +145 -0
  53. package/dist/entries/tell-input/components/ATellInput.vue.d.ts.map +1 -0
  54. package/dist/entries/tell-input/composables/useCountryDetection.d.ts +44 -0
  55. package/dist/entries/tell-input/composables/useCountryDetection.d.ts.map +1 -0
  56. package/dist/entries/tell-input/composables/useCountryMatching.d.ts +44 -0
  57. package/dist/entries/tell-input/composables/useCountryMatching.d.ts.map +1 -0
  58. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts +110 -0
  59. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts.map +1 -0
  60. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts +67 -0
  61. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts.map +1 -0
  62. package/dist/entries/tell-input/composables/useTypingPhase.d.ts +50 -0
  63. package/dist/entries/tell-input/composables/useTypingPhase.d.ts.map +1 -0
  64. package/dist/entries/tell-input/index.d.ts +12 -0
  65. package/dist/entries/tell-input/index.d.ts.map +1 -0
  66. package/dist/entries/tell-input/utils/digits.d.ts +22 -0
  67. package/dist/entries/tell-input/utils/digits.d.ts.map +1 -0
  68. package/dist/entries/tell-input/utils/flag-url.d.ts +8 -0
  69. package/dist/entries/tell-input/utils/flag-url.d.ts.map +1 -0
  70. package/dist/entries/tell-input/utils/types.d.ts +120 -0
  71. package/dist/entries/tell-input/utils/types.d.ts.map +1 -0
  72. package/dist/index.d.ts +7 -1131
  73. package/dist/index.d.ts.map +1 -0
  74. package/dist/index.mjs +39 -33
  75. package/dist/popover.mjs +5 -4
  76. package/dist/responsive-popover.mjs +1 -1
  77. package/dist/tell-input.mjs +14 -9
  78. package/dist/utils/cn.d.ts +3 -0
  79. package/dist/utils/cn.d.ts.map +1 -0
  80. package/dist/utils/index.d.ts +3 -0
  81. package/dist/utils/index.d.ts.map +1 -0
  82. package/dist/{utils.d.ts → utils/sizes.d.ts} +18 -29
  83. package/dist/utils/sizes.d.ts.map +1 -0
  84. package/entries/tell-input/README.md +1 -0
  85. package/package.json +14 -10
  86. package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs.map +0 -1
  87. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs +0 -132
  88. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs.map +0 -1
  89. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs +0 -92
  90. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs.map +0 -1
  91. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs +0 -1485
  92. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs.map +0 -1
  93. package/dist/drawer.d.ts +0 -116
  94. package/dist/input.d.ts +0 -65
  95. package/dist/popover.d.ts +0 -117
  96. package/dist/responsive-popover.d.ts +0 -124
  97. package/dist/tell-input.d.ts +0 -732
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC"}
package/dist/index.mjs CHANGED
@@ -1,43 +1,49 @@
1
- import { _ as o } from "./chunks/AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs";
2
- import { _ as s, a as t, b as n, c as A } from "./chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs";
3
- import { _ as p, a as i, b as c, c as g } from "./chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs";
4
- import { _ as S, a as u, b as D } from "./chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs";
5
- import { _, a as P, b as T, D as f, c as x, L as C, d as m, e as d, f as I, l as R, n as y, r as L, u as b, g as F } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs";
6
- import { c as G } from "./chunks/cn-B6yFEsav.mjs";
7
- import { D as U, S as h, c as z, a as M, b as H, d as V } from "./chunks/sizes-B_9MfLkz.mjs";
1
+ import { _ as s } from "./chunks/AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs";
2
+ import { _ as r, a as t, b as n, c as l, u as A } from "./chunks/useEventScrollLock-BcP8fg-L.mjs";
3
+ import { _ as p, a as u, b as c, c as g } from "./chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs";
4
+ import { _ as S, a as _, b as T } from "./chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs";
5
+ import { _ as C, a as D, b as P, C as I, D as L, c as f, d as x, L as R, e as d, f as m, g as y, l as O, n as h, r as F, u as b, h as U, i as w, j as G, k as M } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs";
6
+ import { c as N } from "./chunks/cn-B6yFEsav.mjs";
7
+ import { D as k, S as H, c as K, a as Y, b as Z, d as j } from "./chunks/sizes-B_9MfLkz.mjs";
8
8
  export {
9
- _ as ACountryFlag,
10
- P as ACountrySelect,
9
+ C as ACountryFlag,
10
+ D as ACountrySelect,
11
11
  p as ADrawer,
12
- i as ADrawerContent,
12
+ u as ADrawerContent,
13
13
  c as ADrawerOverlay,
14
14
  g as ADrawerTrigger,
15
- o as AInput,
16
- s as APopover,
15
+ s as AInput,
16
+ r as APopover,
17
17
  t as APopoverContent,
18
18
  n as APopoverOverlay,
19
- A as APopoverTrigger,
19
+ l as APopoverTrigger,
20
20
  S as AResponsivePopover,
21
- u as AResponsivePopoverContent,
22
- D as AResponsivePopoverTrigger,
23
- T as ATellInput,
24
- f as DEFAULT_ERROR_MESSAGES,
25
- x as DEFAULT_MESSAGES,
26
- U as DEFAULT_SIZE,
27
- C as LOCALE_DIGIT_RANGES,
28
- h as SIZES,
29
- m as aTellInputVariants,
30
- G as cn,
31
- z as controlHeight,
32
- M as controlHeightPx,
33
- H as controlPaddingX,
34
- V as controlTextSize,
35
- d as defaultFlagUrl,
36
- I as detectCountry,
37
- R as localizeCountries,
38
- y as normalizeDigits,
39
- L as resolveMessages,
21
+ _ as AResponsivePopoverContent,
22
+ T as AResponsivePopoverTrigger,
23
+ P as ATellInput,
24
+ I as COUNTRY_RECENTS_KEY,
25
+ L as DEFAULT_ERROR_MESSAGES,
26
+ f as DEFAULT_MESSAGES,
27
+ k as DEFAULT_SIZE,
28
+ x as DIAL_TO_ISO2_FALLBACK,
29
+ R as LOCALE_DIGIT_RANGES,
30
+ H as SIZES,
31
+ d as aTellInputVariants,
32
+ N as cn,
33
+ K as controlHeight,
34
+ Y as controlHeightPx,
35
+ Z as controlPaddingX,
36
+ j as controlTextSize,
37
+ m as defaultFlagUrl,
38
+ y as detectCountry,
39
+ O as localizeCountries,
40
+ h as normalizeDigits,
41
+ F as resolveMessages,
40
42
  b as useCountryDetection,
41
- F as usePhoneValidation
43
+ U as useCountryMatching,
44
+ A as useEventScrollLock,
45
+ w as usePhoneValidation,
46
+ G as useTellInputValidation,
47
+ M as useTypingPhase
42
48
  };
43
49
  //# sourceMappingURL=index.mjs.map
package/dist/popover.mjs CHANGED
@@ -1,8 +1,9 @@
1
- import { _ as e, a, b as p, c as v } from "./chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs";
1
+ import { _ as r, a, b as s, c as v, u as p } from "./chunks/useEventScrollLock-BcP8fg-L.mjs";
2
2
  export {
3
- e as APopover,
3
+ r as APopover,
4
4
  a as APopoverContent,
5
- p as APopoverOverlay,
6
- v as APopoverTrigger
5
+ s as APopoverOverlay,
6
+ v as APopoverTrigger,
7
+ p as useEventScrollLock
7
8
  };
8
9
  //# sourceMappingURL=popover.mjs.map
@@ -1,4 +1,4 @@
1
- import { _ as s, a as p, b as r } from "./chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs";
1
+ import { _ as s, a as p, b as r } from "./chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs";
2
2
  export {
3
3
  s as AResponsivePopover,
4
4
  p as AResponsivePopoverContent,
@@ -1,18 +1,23 @@
1
- import { _ as e, a as t, b as l, D as n, c as o, L as r, d as u, e as i, f as A, l as E, n as S, r as C, u as D, g as _ } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-Bv_lLV_l.mjs";
1
+ import { _ as e, a as t, b as l, C as n, D as u, c as o, d as i, L as r, e as A, f as E, g as C, l as _, n as S, r as T, u as L, h as g, i as D, j as I, k as c } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs";
2
2
  export {
3
3
  e as ACountryFlag,
4
4
  t as ACountrySelect,
5
5
  l as ATellInput,
6
- n as DEFAULT_ERROR_MESSAGES,
6
+ n as COUNTRY_RECENTS_KEY,
7
+ u as DEFAULT_ERROR_MESSAGES,
7
8
  o as DEFAULT_MESSAGES,
9
+ i as DIAL_TO_ISO2_FALLBACK,
8
10
  r as LOCALE_DIGIT_RANGES,
9
- u as aTellInputVariants,
10
- i as defaultFlagUrl,
11
- A as detectCountry,
12
- E as localizeCountries,
11
+ A as aTellInputVariants,
12
+ E as defaultFlagUrl,
13
+ C as detectCountry,
14
+ _ as localizeCountries,
13
15
  S as normalizeDigits,
14
- C as resolveMessages,
15
- D as useCountryDetection,
16
- _ as usePhoneValidation
16
+ T as resolveMessages,
17
+ L as useCountryDetection,
18
+ g as useCountryMatching,
19
+ D as usePhoneValidation,
20
+ I as useTellInputValidation,
21
+ c as useTypingPhase
17
22
  };
18
23
  //# sourceMappingURL=tell-input.mjs.map
@@ -0,0 +1,3 @@
1
+ import { type ClassValue } from 'clsx';
2
+ export declare function cn(...inputs: ClassValue[]): string;
3
+ //# sourceMappingURL=cn.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
@@ -0,0 +1,3 @@
1
+ export { cn } from './cn';
2
+ export { SIZES, DEFAULT_SIZE, controlHeight, controlPaddingX, controlTextSize, controlHeightPx, type Size, } from './sizes';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EACL,KAAK,EACL,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,eAAe,EACf,KAAK,IAAI,GACV,MAAM,SAAS,CAAC"}
@@ -1,29 +1,18 @@
1
- import { ClassValue } from 'clsx';
2
-
3
- export declare function cn(...inputs: ClassValue[]): string;
4
-
5
- /** Tailwind height utility per size. md uses an arbitrary value because 43px isn't on the spacing scale. */
6
- export declare const controlHeight: Record<Size, string>;
7
-
8
- /** Pixel values exposed so non-template code (icons, ResizeObserver, etc.) can read the height. */
9
- export declare const controlHeightPx: Record<Size, number>;
10
-
11
- export declare const controlPaddingX: Record<Size, string>;
12
-
13
- export declare const controlTextSize: Record<Size, string>;
14
-
15
- export declare const DEFAULT_SIZE: Size;
16
-
17
- /**
18
- * Shared size scale for every interactive UI component in @alikhalilll/ui.
19
- *
20
- * xs = 28px · sm = 36px · md = 43px (default) · lg = 52px · xl = 60px
21
- *
22
- * Use the {@link controlHeight}, {@link controlPaddingX}, {@link controlTextSize}
23
- * maps when building a CVA variant so every component stays in lockstep.
24
- */
25
- export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
26
-
27
- export declare const SIZES: readonly Size[];
28
-
29
- export { }
1
+ /**
2
+ * Shared size scale for every interactive UI component in @alikhalilll/ui.
3
+ *
4
+ * xs = 28px · sm = 36px · md = 43px (default) · lg = 52px · xl = 60px
5
+ *
6
+ * Use the {@link controlHeight}, {@link controlPaddingX}, {@link controlTextSize}
7
+ * maps when building a CVA variant so every component stays in lockstep.
8
+ */
9
+ export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
10
+ export declare const SIZES: readonly Size[];
11
+ export declare const DEFAULT_SIZE: Size;
12
+ /** Tailwind height utility per size. md uses an arbitrary value because 43px isn't on the spacing scale. */
13
+ export declare const controlHeight: Record<Size, string>;
14
+ export declare const controlPaddingX: Record<Size, string>;
15
+ export declare const controlTextSize: Record<Size, string>;
16
+ /** Pixel values exposed so non-template code (icons, ResizeObserver, etc.) can read the height. */
17
+ export declare const controlHeightPx: Record<Size, number>;
18
+ //# sourceMappingURL=sizes.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../utils/sizes.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,eAAO,MAAM,KAAK,EAAE,SAAS,IAAI,EAA4C,CAAC;AAE9E,eAAO,MAAM,YAAY,EAAE,IAAW,CAAC;AAEvC,4GAA4G;AAC5G,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAM9C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAMhD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAMhD,CAAC;AAEF,mGAAmG;AACnG,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAMhD,CAAC"}
@@ -53,6 +53,7 @@ The default shape is a plain phone input with the country picker hidden. As the
53
53
  - **Picker pre-filled** — pass `default-country="…"` or seed `v-model:country` so the picker renders visible at mount.
54
54
  - **Restricted countries** — pass `allowed-dial-codes` (array of dial-digit strings, no `+`). Whitelisted countries surface in the Suggested group at the top; disallowed countries render below as disabled.
55
55
  - **Always-visible picker (legacy)** — `:detect-from-input="false"` reverts to the IP/timezone/locale chain auto-filling the picker on mount.
56
+ - **Validation visuals** — both off by default. `:show-validation="true"` lights up the field (coloured border + ring + error text); `:show-validation-icon="true"` adds the trailing green check / red alert icon. They're independent — combine as needed.
56
57
 
57
58
  ## Exposed via template ref
58
59
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alikhalilll/ui",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "Headless, shadcn-vue style Vue 3 component library — every component is its own importable subpath (`@alikhalilll/ui/tell-input`, `@alikhalilll/ui/popover`, …) so users pay only for what they actually use.",
5
5
  "license": "MIT",
6
6
  "author": "alikhalilll",
@@ -39,27 +39,27 @@
39
39
  "import": "./dist/index.mjs"
40
40
  },
41
41
  "./tell-input": {
42
- "types": "./dist/tell-input.d.ts",
42
+ "types": "./dist/entries/tell-input/index.d.ts",
43
43
  "import": "./dist/tell-input.mjs"
44
44
  },
45
45
  "./input": {
46
- "types": "./dist/input.d.ts",
46
+ "types": "./dist/entries/input/index.d.ts",
47
47
  "import": "./dist/input.mjs"
48
48
  },
49
49
  "./popover": {
50
- "types": "./dist/popover.d.ts",
50
+ "types": "./dist/entries/popover/index.d.ts",
51
51
  "import": "./dist/popover.mjs"
52
52
  },
53
53
  "./drawer": {
54
- "types": "./dist/drawer.d.ts",
54
+ "types": "./dist/entries/drawer/index.d.ts",
55
55
  "import": "./dist/drawer.mjs"
56
56
  },
57
57
  "./responsive-popover": {
58
- "types": "./dist/responsive-popover.d.ts",
58
+ "types": "./dist/entries/responsive-popover/index.d.ts",
59
59
  "import": "./dist/responsive-popover.mjs"
60
60
  },
61
61
  "./utils": {
62
- "types": "./dist/utils.d.ts",
62
+ "types": "./dist/utils/index.d.ts",
63
63
  "import": "./dist/utils.mjs"
64
64
  },
65
65
  "./assets/styles.css": "./dist/assets/styles.css",
@@ -90,18 +90,22 @@
90
90
  "vaul-vue": "^0.4.0"
91
91
  },
92
92
  "devDependencies": {
93
+ "@tailwindcss/cli": "^4.0.0",
93
94
  "@types/node": "^22.13.0",
94
95
  "@vitejs/plugin-vue": "^5.2.0",
95
96
  "rimraf": "^6.0.1",
97
+ "tailwindcss": "^4.0.0",
96
98
  "typescript": "^5.9.2",
97
99
  "vite": "^5.4.0",
98
- "vite-plugin-dts": "^4.5.0",
99
100
  "vue": "^3.5.0",
100
- "vue-tsc": "^2.2.0"
101
+ "vue-tsc": "^3.2.4"
101
102
  },
102
103
  "scripts": {
103
104
  "clean": "rimraf dist",
104
- "build": "pnpm clean && vite build && node -e \"const fs=require('node:fs'); fs.mkdirSync('dist/assets',{recursive:true}); fs.copyFileSync('assets/styles.css','dist/assets/styles.css');\"",
105
+ "build:css": "tailwindcss -i assets/styles.src.css -o dist/assets/styles.css --minify",
106
+ "build:js": "vite build",
107
+ "build:types": "vue-tsc -p tsconfig.dist.json --declaration --emitDeclarationOnly --outDir dist && node scripts/build/fix-dts-imports.mjs && node scripts/build/validate-dts.mjs",
108
+ "build": "pnpm clean && pnpm build:js && pnpm build:types && pnpm build:css",
105
109
  "typecheck": "vue-tsc --noEmit -p tsconfig.json"
106
110
  }
107
111
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs","sources":["../../entries/drawer/components/ADrawer.vue","../../entries/drawer/components/ADrawerTrigger.vue","../../entries/drawer/components/ADrawerOverlay.vue","../../entries/drawer/components/ADrawerContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DrawerRoot, type DrawerRootEmits, type DrawerRootProps } from 'vaul-vue';\nimport { useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n shouldScaleBackground: true,\n});\nconst emits = defineEmits<DrawerRootEmits>();\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <DrawerRoot data-slot=\"drawer\" v-bind=\"forwarded\">\n <slot />\n </DrawerRoot>\n</template>\n","<script setup lang=\"ts\">\nimport { DrawerTrigger, type DrawerTriggerProps } from 'vaul-vue';\nimport { useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DrawerTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <DrawerTrigger data-slot=\"drawer-trigger\" v-bind=\"forwarded\">\n <slot />\n </DrawerTrigger>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { DrawerOverlay } from 'vaul-vue';\nimport type { DialogOverlayProps } from 'reka-ui';\nimport { reactiveOmit } from '@vueuse/core';\nimport { useForwardProps } from 'reka-ui';\nimport { cn } from '@/utils';\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();\nconst delegated = reactiveOmit(props, 'class');\nconst forwarded = useForwardProps(delegated);\n</script>\n\n<template>\n <DrawerOverlay\n data-slot=\"drawer-overlay\"\n v-bind=\"forwarded\"\n :class=\"\n cn(\n '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',\n props.class\n )\n \"\n />\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { DrawerContent, DrawerPortal } from 'vaul-vue';\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui';\nimport { reactiveOmit } from '@vueuse/core';\nimport { useForwardPropsEmits } from 'reka-ui';\nimport { cn } from '@/utils';\nimport ADrawerOverlay from './ADrawerOverlay.vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();\nconst emits = defineEmits<DialogContentEmits>();\nconst delegated = reactiveOmit(props, 'class');\nconst forwarded = useForwardPropsEmits(delegated, emits);\n</script>\n\n<template>\n <DrawerPortal>\n <ADrawerOverlay />\n <DrawerContent\n data-slot=\"drawer-content\"\n v-bind=\"{ ...$attrs, ...forwarded }\"\n :class=\"\n cn(\n 'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border outline-none',\n props.class\n )\n \"\n >\n <div class=\"bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full\" />\n <slot />\n </DrawerContent>\n </DrawerPortal>\n</template>\n"],"names":["forwarded","useForwardPropsEmits","__props","__emit","_openBlock","_createBlock","_unref","_mergeProps","_renderSlot","_ctx","useForwardProps","props","delegated","reactiveOmit","cn","emits","DrawerPortal","_createVNode","ADrawerOverlay","DrawerContent","$attrs","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAYC,EAJJC,GAGAC,CACqC;sBAIjDC,EAAA,GAAAC,EAEaC,MAFbC,EAEa,EAFD,aAAU,SAAA,GAAiBD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBAC9C,MAAQ;AAAA,QAARQ,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;ACRZ,UAAMT,IAAYU,EADJR,CACyB;sBAIrCE,EAAA,GAAAC,EAEgBC,MAFhBC,EAEgB,EAFD,aAAU,iBAAA,GAAyBD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBACzD,MAAQ;AAAA,QAARQ,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;;ACFZ,UAAME,IAAQT,GACRU,IAAYC,EAAaF,GAAO,OAAO,GACvCX,IAAYU,EAAgBE,CAAS;sBAIzCR,EAAA,GAAAC,EASEC,MATFC,EASE,EARA,aAAU,iBAAA,GACFD,EAAAN,CAAA,GAAS;AAAA,MAChB,OAAcM,EAAAQ,CAAA;AAAA;QAA+LH,EAAM;AAAA,MAAA;AAAA;;;;;;;;;;;;;;ACNxN,UAAMA,IAAQT,GACRa,IAAQZ,GACRS,IAAYC,EAAaF,GAAO,OAAO,GACvCX,IAAYC,EAAqBW,GAAWG,CAAK;2BAIrDV,EAeeC,EAAAU,CAAA,GAAA,MAAA;AAAA,iBAdb,MAAkB;AAAA,QAAlBC,EAAkBC,CAAA;AAAA,QAClBD,EAYgBX,EAAAa,CAAA,GAZhBZ,EAYgB,EAXd,aAAU,iBAAA,GAAgB,EAAA,GACba,EAAAA,QAAM,GAAKd,EAAAN,CAAA,KAAS;AAAA,UAChC,OAAgBM,EAAAQ,CAAA;AAAA;YAAuIH,EAAM;AAAA,UAAA;AAAA;qBAO9J,MAAgE;AAAA,4BAAhEU,EAAgE,OAAA,EAA3D,OAAM,mDAAA,GAAkD,MAAA,EAAA;AAAA,YAC7Db,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}
@@ -1,132 +0,0 @@
1
- import { defineComponent as u, openBlock as i, createBlock as p, unref as o, mergeProps as f, withCtx as c, renderSlot as m, normalizeProps as h, guardReactiveProps as B, onMounted as _, onBeforeUnmount as w, createElementBlock as b, normalizeClass as y, createCommentVNode as P, createVNode as A } from "vue";
2
- import { useForwardPropsEmits as v, PopoverRoot as O, useForwardProps as C, PopoverTrigger as S, PopoverPortal as $, PopoverContent as k } from "reka-ui";
3
- import { reactiveOmit as z } from "@vueuse/core";
4
- import { c as g } from "./cn-B6yFEsav.mjs";
5
- const j = /* @__PURE__ */ u({
6
- __name: "APopover",
7
- props: {
8
- defaultOpen: { type: Boolean },
9
- open: { type: Boolean },
10
- modal: { type: Boolean, default: !0 }
11
- },
12
- emits: ["update:open"],
13
- setup(a, { emit: r }) {
14
- const s = v(a, r);
15
- return (d, e) => (i(), p(o(O), f({ "data-slot": "popover" }, o(s)), {
16
- default: c((l) => [
17
- m(d.$slots, "default", h(B(l)))
18
- ]),
19
- _: 3
20
- }, 16));
21
- }
22
- }), D = /* @__PURE__ */ u({
23
- __name: "APopoverTrigger",
24
- props: {
25
- asChild: { type: Boolean },
26
- as: {}
27
- },
28
- setup(a) {
29
- const t = C(a);
30
- return (n, s) => (i(), p(o(S), f({ "data-slot": "popover-trigger" }, o(t)), {
31
- default: c(() => [
32
- m(n.$slots, "default")
33
- ]),
34
- _: 3
35
- }, 16));
36
- }
37
- }), F = /* @__PURE__ */ u({
38
- inheritAttrs: !1,
39
- __name: "APopoverOverlay",
40
- props: {
41
- class: { type: [Boolean, null, String, Object, Array] }
42
- },
43
- setup(a) {
44
- const r = a;
45
- let t = "", n = "", s = "";
46
- function d() {
47
- return typeof window > "u" ? 0 : window.innerWidth - document.documentElement.clientWidth;
48
- }
49
- return _(() => {
50
- if (typeof document > "u") return;
51
- const e = document.body, l = d();
52
- t = e.style.overflow, n = e.style.touchAction, s = e.style.paddingRight, e.style.overflow = "hidden", e.style.touchAction = "none", l > 0 && (e.style.paddingRight = `${l}px`);
53
- }), w(() => {
54
- if (typeof document > "u") return;
55
- const e = document.body;
56
- e.style.overflow = t, e.style.touchAction = n, e.style.paddingRight = s;
57
- }), (e, l) => (i(), b("div", {
58
- "data-slot": "popover-overlay",
59
- "aria-hidden": "true",
60
- class: y(
61
- o(g)(
62
- // `fixed inset-0` covers the entire viewport; `pointer-events-auto` captures every
63
- // click so it can never reach the page underneath. `z-50` keeps us above any normal
64
- // page chrome; the popover content sits at `z-[60]`.
65
- "fixed inset-0 z-50 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",
66
- r.class
67
- )
68
- )
69
- }, null, 2));
70
- }
71
- }), T = /* @__PURE__ */ u({
72
- inheritAttrs: !1,
73
- __name: "APopoverContent",
74
- props: {
75
- forceMount: { type: Boolean },
76
- side: {},
77
- sideOffset: { default: 4 },
78
- sideFlip: { type: Boolean },
79
- align: { default: "center" },
80
- alignOffset: {},
81
- alignFlip: { type: Boolean },
82
- avoidCollisions: { type: Boolean },
83
- collisionBoundary: {},
84
- collisionPadding: {},
85
- arrowPadding: {},
86
- hideShiftedArrow: { type: Boolean },
87
- sticky: {},
88
- hideWhenDetached: { type: Boolean },
89
- positionStrategy: {},
90
- updatePositionStrategy: {},
91
- disableUpdateOnLayoutShift: { type: Boolean },
92
- prioritizePosition: { type: Boolean },
93
- reference: {},
94
- asChild: { type: Boolean },
95
- as: {},
96
- disableOutsidePointerEvents: { type: Boolean },
97
- class: { type: [Boolean, null, String, Object, Array] },
98
- overlay: { type: Boolean, default: !1 },
99
- overlayClass: { type: [Boolean, null, String, Object, Array] }
100
- },
101
- emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
102
- setup(a, { emit: r }) {
103
- const t = a, n = r, s = z(t, "class", "overlay", "overlayClass"), d = v(s, n);
104
- return (e, l) => (i(), p(o($), null, {
105
- default: c(() => [
106
- t.overlay ? (i(), p(F, {
107
- key: 0,
108
- class: y(t.overlayClass)
109
- }, null, 8, ["class"])) : P("", !0),
110
- A(o(k), f({ "data-slot": "popover-content" }, { ...e.$attrs, ...o(d) }, {
111
- class: o(g)(
112
- "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-[60] w-72 rounded-md border p-4 shadow-md outline-none",
113
- t.class
114
- )
115
- }), {
116
- default: c(() => [
117
- m(e.$slots, "default")
118
- ]),
119
- _: 3
120
- }, 16, ["class"])
121
- ]),
122
- _: 3
123
- }));
124
- }
125
- });
126
- export {
127
- j as _,
128
- T as a,
129
- F as b,
130
- D as c
131
- };
132
- //# sourceMappingURL=APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs","sources":["../../entries/popover/components/APopover.vue","../../entries/popover/components/APopoverTrigger.vue","../../entries/popover/components/APopoverOverlay.vue","../../entries/popover/components/APopoverContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui';\n\n/**\n * Defaults `modal` to `true` so the popover locks page scroll, traps focus, and an overlay\n * (rendered by APopoverContent when `overlay` is set) actually dims the page.\n * Pass `:modal=\"false\"` for tooltip-style non-modal popovers.\n */\nconst props = withDefaults(defineProps<PopoverRootProps>(), { modal: true });\nconst emits = defineEmits<PopoverRootEmits>();\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <PopoverRoot v-slot=\"slotProps\" data-slot=\"popover\" v-bind=\"forwarded\">\n <slot v-bind=\"slotProps\" />\n </PopoverRoot>\n</template>\n","<script setup lang=\"ts\">\nimport type { PopoverTriggerProps } from 'reka-ui';\nimport { PopoverTrigger, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PopoverTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <PopoverTrigger data-slot=\"popover-trigger\" v-bind=\"forwarded\">\n <slot />\n </PopoverTrigger>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { onBeforeUnmount, onMounted } from 'vue';\nimport { cn } from '@/utils';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>();\n\n// Body-scroll-lock for the lifetime of the overlay. Mounted = lock; unmounted = restore.\n// Because this component is only rendered when `<APopoverContent :overlay=\"true\">` is\n// inside the open popover portal, mount/unmount tracks visibility 1:1.\nlet prevBodyOverflow = '';\nlet prevBodyTouchAction = '';\nlet prevPaddingRight = '';\n\nfunction getScrollbarWidth() {\n if (typeof window === 'undefined') return 0;\n return window.innerWidth - document.documentElement.clientWidth;\n}\n\nonMounted(() => {\n if (typeof document === 'undefined') return;\n const body = document.body;\n const sbw = getScrollbarWidth();\n prevBodyOverflow = body.style.overflow;\n prevBodyTouchAction = body.style.touchAction;\n prevPaddingRight = body.style.paddingRight;\n body.style.overflow = 'hidden';\n body.style.touchAction = 'none';\n // Compensate for the missing scrollbar so the layout doesn't jump.\n if (sbw > 0) body.style.paddingRight = `${sbw}px`;\n});\n\nonBeforeUnmount(() => {\n if (typeof document === 'undefined') return;\n const body = document.body;\n body.style.overflow = prevBodyOverflow;\n body.style.touchAction = prevBodyTouchAction;\n body.style.paddingRight = prevPaddingRight;\n});\n</script>\n\n<template>\n <div\n data-slot=\"popover-overlay\"\n aria-hidden=\"true\"\n :class=\"\n cn(\n // `fixed inset-0` covers the entire viewport; `pointer-events-auto` captures every\n // click so it can never reach the page underneath. `z-50` keeps us above any normal\n // page chrome; the popover content sits at `z-[60]`.\n 'fixed inset-0 z-50 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',\n props.class\n )\n \"\n />\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { reactiveOmit } from '@vueuse/core';\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { cn } from '@/utils';\nimport APopoverOverlay from './APopoverOverlay.vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n defineProps<\n PopoverContentProps & {\n class?: HTMLAttributes['class'];\n /** Dim the entire viewport behind the popover and block all interaction with the\n * page (clicks are captured by the overlay; body scroll is locked while open).\n * Pair with `<APopover :modal=\"true\">` (the default) for the full modal behaviour. */\n overlay?: boolean;\n overlayClass?: HTMLAttributes['class'];\n }\n >(),\n { align: 'center', sideOffset: 4, overlay: false }\n);\nconst emits = defineEmits<PopoverContentEmits>();\nconst delegated = reactiveOmit(props, 'class', 'overlay', 'overlayClass');\nconst forwarded = useForwardPropsEmits(delegated, emits);\n</script>\n\n<template>\n <PopoverPortal>\n <!--\n Overlay is a sibling of PopoverContent inside the same portal. Reka-ui's\n DismissableLayer treats any pointer-down outside the content as a dismiss,\n so clicking the overlay closes the popover for free. The overlay component\n locks body scroll on mount and restores it on unmount.\n -->\n <APopoverOverlay v-if=\"props.overlay\" :class=\"props.overlayClass\" />\n <PopoverContent\n data-slot=\"popover-content\"\n v-bind=\"{ ...$attrs, ...forwarded }\"\n :class=\"\n cn(\n '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-[60] w-72 rounded-md border p-4 shadow-md outline-none',\n props.class\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"],"names":["forwarded","useForwardPropsEmits","__props","__emit","_openBlock","_createBlock","_unref","_mergeProps","_withCtx","slotProps","_renderSlot","_ctx","useForwardProps","props","prevBodyOverflow","prevBodyTouchAction","prevPaddingRight","getScrollbarWidth","onMounted","body","sbw","onBeforeUnmount","_createElementBlock","_normalizeClass","cn","emits","delegated","reactiveOmit","PopoverPortal","APopoverOverlay","_createVNode","PopoverContent","$attrs"],"mappings":";;;;;;;;;;;;;AAWA,UAAMA,IAAYC,EAFJC,GACAC,CACqC;sBAIjDC,EAAA,GAAAC,EAEcC,MAFdC,EAEc,EAFkB,aAAU,UAAA,GAAkBD,EAAAN,CAAA,CAAS,GAAA;AAAA,MACnE,SAAAQ,EAAA,CADmBC,MAAS;AAAA,QAC5BC,EAA2BC,yBAAbF,CAAS,CAAA,CAAA;AAAA,MAAA;;;;;;;;;;;ACX3B,UAAMT,IAAYY,EADJV,CACyB;sBAIrCE,EAAA,GAAAC,EAEiBC,MAFjBC,EAEiB,EAFD,aAAU,kBAAA,GAA0BD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBAC3D,MAAQ;AAAA,QAARU,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;ACHZ,UAAME,IAAQX;AAKd,QAAIY,IAAmB,IACnBC,IAAsB,IACtBC,IAAmB;AAEvB,aAASC,IAAoB;AAC3B,aAAI,OAAO,SAAW,MAAoB,IACnC,OAAO,aAAa,SAAS,gBAAgB;AAAA,IACtD;AAEA,WAAAC,EAAU,MAAM;AACd,UAAI,OAAO,WAAa,IAAa;AACrC,YAAMC,IAAO,SAAS,MAChBC,IAAMH,EAAA;AACZ,MAAAH,IAAmBK,EAAK,MAAM,UAC9BJ,IAAsBI,EAAK,MAAM,aACjCH,IAAmBG,EAAK,MAAM,cAC9BA,EAAK,MAAM,WAAW,UACtBA,EAAK,MAAM,cAAc,QAErBC,IAAM,MAAGD,EAAK,MAAM,eAAe,GAAGC,CAAG;AAAA,IAC/C,CAAC,GAEDC,EAAgB,MAAM;AACpB,UAAI,OAAO,WAAa,IAAa;AACrC,YAAMF,IAAO,SAAS;AACtB,MAAAA,EAAK,MAAM,WAAWL,GACtBK,EAAK,MAAM,cAAcJ,GACzBI,EAAK,MAAM,eAAeH;AAAA,IAC5B,CAAC,mBAICM,EAYE,OAAA;AAAA,MAXA,aAAU;AAAA,MACV,eAAY;AAAA,MACX,OAAKC;AAAAA,QAASjB,EAAAkB,CAAA;AAAA;AAAA;AAAA;AAAA;UAA0cX,EAAM;AAAA,QAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChCne,UAAMA,IAAQX,GAaRuB,IAAQtB,GACRuB,IAAYC,EAAad,GAAO,SAAS,WAAW,cAAc,GAClEb,IAAYC,EAAqByB,GAAWD,CAAK;2BAIrDpB,EAoBgBC,EAAAsB,CAAA,GAAA,MAAA;AAAA,iBAbd,MAAoE;AAAA,QAA7Cf,EAAM,gBAA7BR,EAAoEwB,GAAA;AAAA;UAA7B,OAAKN,EAAEV,EAAM,YAAY;AAAA,QAAA;QAChEiB,EAWiBxB,EAAAyB,CAAA,GAXjBxB,EAWiB,EAVf,aAAU,kBAAA,GAAiB,EAAA,GACdyB,EAAAA,QAAM,GAAK1B,EAAAN,CAAA,KAAS;AAAA,UAChC,OAAgBM,EAAAkB,CAAA;AAAA;YAAwcX,EAAM;AAAA,UAAA;AAAA;qBAO/d,MAAQ;AAAA,YAARH,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}
@@ -1,92 +0,0 @@
1
- import { defineComponent as c, useModel as g, computed as u, openBlock as l, createBlock as r, resolveDynamicComponent as _, withCtx as p, renderSlot as i, unref as n, mergeModels as k, normalizeClass as v } from "vue";
2
- import { useMediaQuery as f } from "@vueuse/core";
3
- import { _ as C, c as $, a as b } from "./APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs";
4
- import { _ as h, c as B, a as w } from "./ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs";
5
- const M = /* @__PURE__ */ c({
6
- __name: "AResponsivePopover",
7
- props: /* @__PURE__ */ k({
8
- breakpoint: { default: "(min-width: 768px)" },
9
- modal: { type: Boolean, default: !0 }
10
- }, {
11
- open: { type: Boolean },
12
- openModifiers: {}
13
- }),
14
- emits: ["update:open"],
15
- setup(a) {
16
- const e = a, o = g(a, "open"), s = f(() => e.breakpoint), t = u(() => s.value ? C : h);
17
- return (d, m) => (l(), r(_(t.value), {
18
- open: o.value,
19
- "onUpdate:open": m[0] || (m[0] = (y) => o.value = y),
20
- modal: e.modal,
21
- "data-slot": "responsive-popover"
22
- }, {
23
- default: p(() => [
24
- i(d.$slots, "default", { isDesktop: n(s) })
25
- ]),
26
- _: 3
27
- }, 40, ["open", "modal"]));
28
- }
29
- }), R = /* @__PURE__ */ c({
30
- __name: "AResponsivePopoverTrigger",
31
- props: {
32
- breakpoint: { default: "(min-width: 768px)" },
33
- asChild: { type: Boolean }
34
- },
35
- setup(a) {
36
- const e = a, o = f(() => e.breakpoint), s = u(() => o.value ? $ : B);
37
- return (t, d) => (l(), r(_(s.value), {
38
- "as-child": e.asChild,
39
- "data-slot": "responsive-popover-trigger"
40
- }, {
41
- default: p(() => [
42
- i(t.$slots, "default")
43
- ]),
44
- _: 3
45
- }, 8, ["as-child"]));
46
- }
47
- }), S = /* @__PURE__ */ c({
48
- __name: "AResponsivePopoverContent",
49
- props: {
50
- breakpoint: { default: "(min-width: 768px)" },
51
- class: { type: [Boolean, null, String, Object, Array] },
52
- popoverClass: { type: [Boolean, null, String, Object, Array] },
53
- drawerClass: { type: [Boolean, null, String, Object, Array] },
54
- overlay: { type: Boolean, default: !1 },
55
- align: { default: "start" },
56
- sideOffset: { default: 4 }
57
- },
58
- setup(a) {
59
- const e = a, o = f(() => e.breakpoint), s = u(() => [
60
- e.class,
61
- o.value ? e.popoverClass : e.drawerClass
62
- ]);
63
- return (t, d) => n(o) ? (l(), r(n(b), {
64
- key: 0,
65
- overlay: e.overlay,
66
- align: e.align,
67
- "side-offset": e.sideOffset,
68
- class: v(s.value),
69
- "data-slot": "responsive-popover-content"
70
- }, {
71
- default: p(() => [
72
- i(t.$slots, "default")
73
- ]),
74
- _: 3
75
- }, 8, ["overlay", "align", "side-offset", "class"])) : (l(), r(n(w), {
76
- key: 1,
77
- class: v(s.value),
78
- "data-slot": "responsive-popover-content"
79
- }, {
80
- default: p(() => [
81
- i(t.$slots, "default")
82
- ]),
83
- _: 3
84
- }, 8, ["class"]));
85
- }
86
- });
87
- export {
88
- M as _,
89
- S as a,
90
- R as b
91
- };
92
- //# sourceMappingURL=AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs","sources":["../../entries/responsive-popover/components/AResponsivePopover.vue","../../entries/responsive-popover/components/AResponsivePopoverTrigger.vue","../../entries/responsive-popover/components/AResponsivePopoverContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useMediaQuery } from '@vueuse/core';\nimport { APopover } from '@/entries/popover';\nimport { ADrawer } from '@/entries/drawer';\n\nconst props = withDefaults(\n defineProps<{\n /** CSS media query for the desktop break. Below this width we render a vaul drawer. */\n breakpoint?: string;\n /**\n * When true, the popover (desktop) locks page scroll, traps focus, and renders an overlay.\n * The drawer (mobile) is always modal-like (vaul-vue ships its own overlay + scroll-lock).\n */\n modal?: boolean;\n }>(),\n { breakpoint: '(min-width: 768px)', modal: true }\n);\n\nconst open = defineModel<boolean>('open');\n\nconst isDesktop = useMediaQuery(() => props.breakpoint);\n\n/**\n * Pre-imported on both branches — do NOT lazy-load. Switching the component identity at runtime\n * means we still hydrate the right tree client-side.\n */\nconst Root = computed(() => (isDesktop.value ? APopover : ADrawer));\n</script>\n\n<template>\n <component :is=\"Root\" v-model:open=\"open\" :modal=\"props.modal\" data-slot=\"responsive-popover\">\n <slot :is-desktop=\"isDesktop\" />\n </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useMediaQuery } from '@vueuse/core';\nimport { APopoverTrigger } from '@/entries/popover';\nimport { ADrawerTrigger } from '@/entries/drawer';\n\nconst props = withDefaults(\n defineProps<{\n breakpoint?: string;\n asChild?: boolean;\n }>(),\n { breakpoint: '(min-width: 768px)' }\n);\n\nconst isDesktop = useMediaQuery(() => props.breakpoint);\nconst Trigger = computed(() => (isDesktop.value ? APopoverTrigger : ADrawerTrigger));\n</script>\n\n<template>\n <component :is=\"Trigger\" :as-child=\"props.asChild\" data-slot=\"responsive-popover-trigger\">\n <slot />\n </component>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { computed } from 'vue';\nimport { useMediaQuery } from '@vueuse/core';\nimport { APopoverContent } from '@/entries/popover';\nimport { ADrawerContent } from '@/entries/drawer';\n\nconst props = withDefaults(\n defineProps<{\n breakpoint?: string;\n /** Classes applied on both branches. Avoid width / inset classes here. */\n class?: HTMLAttributes['class'];\n /** Classes applied only when the popover (desktop) branch is rendered. */\n popoverClass?: HTMLAttributes['class'];\n /** Classes applied only when the drawer (mobile) branch is rendered. */\n drawerClass?: HTMLAttributes['class'];\n /**\n * Render the dimmed overlay on the desktop popover branch. Defaults to `false` — popovers\n * on desktop are non-modal-looking by convention. The mobile drawer always has its own\n * overlay (vaul-vue's `DrawerOverlay`) regardless of this prop.\n */\n overlay?: boolean;\n align?: 'start' | 'center' | 'end';\n sideOffset?: number;\n }>(),\n {\n breakpoint: '(min-width: 768px)',\n align: 'start',\n sideOffset: 4,\n overlay: false,\n }\n);\n\nconst isDesktop = useMediaQuery(() => props.breakpoint);\n\nconst mergedClass = computed(() => [\n props.class,\n isDesktop.value ? props.popoverClass : props.drawerClass,\n]);\n</script>\n\n<template>\n <APopoverContent\n v-if=\"isDesktop\"\n :overlay=\"props.overlay\"\n :align=\"props.align\"\n :side-offset=\"props.sideOffset\"\n :class=\"mergedClass\"\n data-slot=\"responsive-popover-content\"\n >\n <slot />\n </APopoverContent>\n <ADrawerContent v-else :class=\"mergedClass\" data-slot=\"responsive-popover-content\">\n <slot />\n </ADrawerContent>\n</template>\n"],"names":["props","__props","open","_useModel","isDesktop","useMediaQuery","Root","computed","APopover","ADrawer","_openBlock","_createBlock","_resolveDynamicComponent","$event","_renderSlot","_ctx","_unref","Trigger","APopoverTrigger","ADrawerTrigger","mergedClass","APopoverContent","ADrawerContent"],"mappings":";;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAaRC,IAAOC,EAAoBF,GAAC,MAAM,GAElCG,IAAYC,EAAc,MAAML,EAAM,UAAU,GAMhDM,IAAOC,EAAS,MAAOH,EAAU,QAAQI,IAAWC,CAAQ;sBAIhEC,KAAAC,EAEYC,EAFIN,EAAA,KAAI,GAAA;AAAA,MAAU,MAAMJ,EAAA;AAAA,8CAAAA,EAAI,QAAAW;AAAA,MAAG,OAAOb,EAAM;AAAA,MAAO,aAAU;AAAA,IAAA;iBACvE,MAAgC;AAAA,QAAhCc,EAAgCC,EAAA,QAAA,WAAA,EAAzB,WAAYC,EAAAZ,CAAA,EAAA,CAAS;AAAA,MAAA;;;;;;;;;;;AC1BhC,UAAMJ,IAAQC,GAQRG,IAAYC,EAAc,MAAML,EAAM,UAAU,GAChDiB,IAAUV,EAAS,MAAOH,EAAU,QAAQc,IAAkBC,CAAe;sBAIjFT,KAAAC,EAEYC,EAFIK,EAAA,KAAO,GAAA;AAAA,MAAG,YAAUjB,EAAM;AAAA,MAAS,aAAU;AAAA,IAAA;iBAC3D,MAAQ;AAAA,QAARc,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;;;;;ACbZ,UAAMf,IAAQC,GA0BRG,IAAYC,EAAc,MAAML,EAAM,UAAU,GAEhDoB,IAAcb,EAAS,MAAM;AAAA,MACjCP,EAAM;AAAA,MACNI,EAAU,QAAQJ,EAAM,eAAeA,EAAM;AAAA,IAAA,CAC9C;qBAKSgB,EAAAZ,CAAA,UADRO,EASkBK,EAAAK,CAAA,GAAA;AAAA;MAPf,SAASrB,EAAM;AAAA,MACf,OAAOA,EAAM;AAAA,MACb,eAAaA,EAAM;AAAA,MACnB,SAAOoB,EAAA,KAAW;AAAA,MACnB,aAAU;AAAA,IAAA;iBAEV,MAAQ;AAAA,QAARN,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;iEAEVJ,EAEiBK,EAAAM,CAAA,GAAA;AAAA;MAFO,SAAOF,EAAA,KAAW;AAAA,MAAE,aAAU;AAAA,IAAA;iBACpD,MAAQ;AAAA,QAARN,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}