@alikhalilll/ui 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -4
- package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs +108 -0
- package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs.map +1 -0
- package/dist/chunks/AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs +81 -0
- package/dist/chunks/AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs.map +1 -0
- package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-BRqULKIg.mjs +103 -0
- package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-BRqULKIg.mjs.map +1 -0
- package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-CCGyy9Lp.mjs +92 -0
- package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-CCGyy9Lp.mjs.map +1 -0
- package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-B4lyNu_f.mjs +1353 -0
- package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-B4lyNu_f.mjs.map +1 -0
- package/dist/chunks/cn-B6yFEsav.mjs +9 -0
- package/dist/chunks/cn-B6yFEsav.mjs.map +1 -0
- package/dist/chunks/sizes-B_9MfLkz.mjs +34 -0
- package/dist/chunks/sizes-B_9MfLkz.mjs.map +1 -0
- package/dist/drawer.d.ts +116 -0
- package/dist/drawer.mjs +8 -0
- package/dist/drawer.mjs.map +1 -0
- package/dist/index.d.ts +23 -4
- package/dist/index.mjs +34 -1516
- package/dist/index.mjs.map +1 -1
- package/dist/input.d.ts +65 -0
- package/dist/input.mjs +5 -0
- package/dist/input.mjs.map +1 -0
- package/dist/popover.d.ts +109 -0
- package/dist/popover.mjs +7 -0
- package/dist/popover.mjs.map +1 -0
- package/dist/responsive-popover.d.ts +124 -0
- package/dist/responsive-popover.mjs +7 -0
- package/dist/responsive-popover.mjs.map +1 -0
- package/dist/tell-input.d.ts +637 -0
- package/dist/tell-input.mjs +13 -0
- package/dist/tell-input.mjs.map +1 -0
- package/dist/utils.d.ts +29 -0
- package/dist/utils.mjs +12 -0
- package/dist/utils.mjs.map +1 -0
- package/entries/drawer/README.md +39 -0
- package/entries/input/README.md +42 -0
- package/entries/popover/README.md +37 -0
- package/entries/responsive-popover/README.md +47 -0
- package/entries/tell-input/README.md +52 -0
- package/package.json +30 -4
- /package/dist/{styles.css → assets/styles.css} +0 -0
package/README.md
CHANGED
|
@@ -17,6 +17,20 @@ pnpm add @alikhalilll/ui
|
|
|
17
17
|
|
|
18
18
|
Peer dependency: `vue ^3.5.0`. The library bundles `reka-ui`, `vaul-vue`, `libphonenumber-js`, `lucide-vue-next`, `@vueuse/core`, `class-variance-authority`, `clsx`, and `tailwind-merge`.
|
|
19
19
|
|
|
20
|
+
### Per-component subpath imports
|
|
21
|
+
|
|
22
|
+
Each component lives behind its own subpath so consumers can pull a single component without dragging the rest of the library into their bundle:
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
// Minimal — only the tell-input chunk gets included.
|
|
26
|
+
import { ATellInput } from '@alikhalilll/ui/tell-input';
|
|
27
|
+
|
|
28
|
+
// Or the main entry (modern bundlers tree-shake unused exports via `sideEffects`).
|
|
29
|
+
import { ATellInput } from '@alikhalilll/ui';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Available subpaths: `/tell-input`, `/input`, `/popover`, `/drawer`, `/responsive-popover`, `/utils`.
|
|
33
|
+
|
|
20
34
|
## Setup
|
|
21
35
|
|
|
22
36
|
The components are styled with Tailwind utility classes (`bg-popover`, `text-destructive`, etc.) that resolve to CSS variables shipped in `@alikhalilll/ui/styles.css`. You need to:
|
|
@@ -76,14 +90,14 @@ import { ref } from 'vue';
|
|
|
76
90
|
import { ATellInput } from '@alikhalilll/ui';
|
|
77
91
|
|
|
78
92
|
const phone = ref('');
|
|
79
|
-
const country = ref(
|
|
93
|
+
const country = ref<number | null>(null);
|
|
80
94
|
</script>
|
|
81
95
|
|
|
82
96
|
<template>
|
|
83
97
|
<ATellInput
|
|
84
98
|
v-model:phone="phone"
|
|
85
99
|
v-model:country="country"
|
|
86
|
-
default-country="
|
|
100
|
+
default-country="20"
|
|
87
101
|
show-validation
|
|
88
102
|
/>
|
|
89
103
|
</template>
|
|
@@ -101,8 +115,10 @@ const country = ref('');
|
|
|
101
115
|
| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | Controls input height (32 / 36 / 40 px). |
|
|
102
116
|
| `allowedDialCodes` | `string[]` | _all_ | Whitelist of dial-digit codes (no `+`). Countries outside the list are shown but disabled. |
|
|
103
117
|
| `showValidation` | `boolean` | `false` | Renders an error message below the input when invalid. |
|
|
104
|
-
| `detectCountry` | `'auto' \| 'locale' \| 'none'` | `'auto'` |
|
|
105
|
-
| `defaultCountry` | `string` | `'
|
|
118
|
+
| `detectCountry` | `'auto' \| 'locale' \| 'none'` | `'auto'` | Strategy for the silent environment lookup (hint source for input detection). |
|
|
119
|
+
| `defaultCountry` | `string` | `''` | Explicit initial country. When set, the picker is visible at mount. |
|
|
120
|
+
| `detectFromInput` | `boolean` | `true` | Default mode: picker hidden until input matches a dial code. Set `false` for legacy. |
|
|
121
|
+
| `detectDebounceMs` | `number` | `150` | Debounce window (ms) for input-driven detection. |
|
|
106
122
|
| `ipEndpoint` | `string` | `'https://ipapi.co/json/'` | Override the geolocation endpoint. Must return JSON with `country_code` or `country`. |
|
|
107
123
|
| `searchPlaceholder` | `string` | `'Search by country or code…'` | Country picker search input placeholder. |
|
|
108
124
|
| `emptyText` | `string` | `'No countries found.'` | Shown when the search yields no results. |
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { defineComponent as d, openBlock as c, createBlock as p, unref as e, mergeProps as i, withCtx as l, renderSlot as m, createVNode as y, createElementVNode as b } from "vue";
|
|
2
|
+
import { DrawerRoot as h, DrawerTrigger as x, DrawerOverlay as O, DrawerPortal as D, DrawerContent as v } from "vaul-vue";
|
|
3
|
+
import { useForwardPropsEmits as B, useForwardProps as w } from "reka-ui";
|
|
4
|
+
import { reactiveOmit as _ } from "@vueuse/core";
|
|
5
|
+
import { c as g } from "./cn-B6yFEsav.mjs";
|
|
6
|
+
const F = /* @__PURE__ */ d({
|
|
7
|
+
__name: "ADrawer",
|
|
8
|
+
props: {
|
|
9
|
+
activeSnapPoint: {},
|
|
10
|
+
closeThreshold: {},
|
|
11
|
+
shouldScaleBackground: { type: Boolean, default: !0 },
|
|
12
|
+
setBackgroundColorOnScale: { type: Boolean },
|
|
13
|
+
scrollLockTimeout: {},
|
|
14
|
+
fixed: { type: Boolean },
|
|
15
|
+
dismissible: { type: Boolean },
|
|
16
|
+
modal: { type: Boolean },
|
|
17
|
+
open: { type: Boolean },
|
|
18
|
+
defaultOpen: { type: Boolean },
|
|
19
|
+
nested: { type: Boolean },
|
|
20
|
+
direction: {},
|
|
21
|
+
noBodyStyles: { type: Boolean },
|
|
22
|
+
handleOnly: { type: Boolean },
|
|
23
|
+
preventScrollRestoration: { type: Boolean },
|
|
24
|
+
snapPoints: {},
|
|
25
|
+
fadeFromIndex: {}
|
|
26
|
+
},
|
|
27
|
+
emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"],
|
|
28
|
+
setup(t, { emit: o }) {
|
|
29
|
+
const s = B(t, o);
|
|
30
|
+
return (n, u) => (c(), p(e(h), i({ "data-slot": "drawer" }, e(s)), {
|
|
31
|
+
default: l(() => [
|
|
32
|
+
m(n.$slots, "default")
|
|
33
|
+
]),
|
|
34
|
+
_: 3
|
|
35
|
+
}, 16));
|
|
36
|
+
}
|
|
37
|
+
}), E = /* @__PURE__ */ d({
|
|
38
|
+
__name: "ADrawerTrigger",
|
|
39
|
+
props: {
|
|
40
|
+
asChild: { type: Boolean },
|
|
41
|
+
as: {}
|
|
42
|
+
},
|
|
43
|
+
setup(t) {
|
|
44
|
+
const a = w(t);
|
|
45
|
+
return (r, s) => (c(), p(e(x), i({ "data-slot": "drawer-trigger" }, e(a)), {
|
|
46
|
+
default: l(() => [
|
|
47
|
+
m(r.$slots, "default")
|
|
48
|
+
]),
|
|
49
|
+
_: 3
|
|
50
|
+
}, 16));
|
|
51
|
+
}
|
|
52
|
+
}), A = /* @__PURE__ */ d({
|
|
53
|
+
__name: "ADrawerOverlay",
|
|
54
|
+
props: {
|
|
55
|
+
forceMount: { type: Boolean },
|
|
56
|
+
asChild: { type: Boolean },
|
|
57
|
+
as: {},
|
|
58
|
+
class: { type: [Boolean, null, String, Object, Array] }
|
|
59
|
+
},
|
|
60
|
+
setup(t) {
|
|
61
|
+
const o = t, a = _(o, "class"), r = w(a);
|
|
62
|
+
return (s, n) => (c(), p(e(O), i({ "data-slot": "drawer-overlay" }, e(r), {
|
|
63
|
+
class: e(g)(
|
|
64
|
+
"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",
|
|
65
|
+
o.class
|
|
66
|
+
)
|
|
67
|
+
}), null, 16, ["class"]));
|
|
68
|
+
}
|
|
69
|
+
}), T = /* @__PURE__ */ d({
|
|
70
|
+
inheritAttrs: !1,
|
|
71
|
+
__name: "ADrawerContent",
|
|
72
|
+
props: {
|
|
73
|
+
forceMount: { type: Boolean },
|
|
74
|
+
disableOutsidePointerEvents: { type: Boolean },
|
|
75
|
+
asChild: { type: Boolean },
|
|
76
|
+
as: {},
|
|
77
|
+
class: { type: [Boolean, null, String, Object, Array] }
|
|
78
|
+
},
|
|
79
|
+
emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
|
|
80
|
+
setup(t, { emit: o }) {
|
|
81
|
+
const a = t, r = o, s = _(a, "class"), n = B(s, r);
|
|
82
|
+
return (u, f) => (c(), p(e(D), null, {
|
|
83
|
+
default: l(() => [
|
|
84
|
+
y(A),
|
|
85
|
+
y(e(v), i({ "data-slot": "drawer-content" }, { ...u.$attrs, ...e(n) }, {
|
|
86
|
+
class: e(g)(
|
|
87
|
+
"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border outline-none",
|
|
88
|
+
a.class
|
|
89
|
+
)
|
|
90
|
+
}), {
|
|
91
|
+
default: l(() => [
|
|
92
|
+
f[0] || (f[0] = b("div", { class: "bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" }, null, -1)),
|
|
93
|
+
m(u.$slots, "default")
|
|
94
|
+
]),
|
|
95
|
+
_: 3
|
|
96
|
+
}, 16, ["class"])
|
|
97
|
+
]),
|
|
98
|
+
_: 3
|
|
99
|
+
}));
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
export {
|
|
103
|
+
F as _,
|
|
104
|
+
T as a,
|
|
105
|
+
A as b,
|
|
106
|
+
E as c
|
|
107
|
+
};
|
|
108
|
+
//# sourceMappingURL=ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;;;;;"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { defineComponent as S, useSlots as A, computed as l, openBlock as i, createElementBlock as r, normalizeClass as o, unref as t, renderSlot as x, createCommentVNode as v, withDirectives as y, createElementVNode as B, isRef as z, vModelText as h } from "vue";
|
|
2
|
+
import { useVModel as _ } from "@vueuse/core";
|
|
3
|
+
import { c as n } from "./cn-B6yFEsav.mjs";
|
|
4
|
+
import { D as j, c as E, b as O, d as T } from "./sizes-B_9MfLkz.mjs";
|
|
5
|
+
const D = ["data-size"], P = ["data-size"], N = /* @__PURE__ */ S({
|
|
6
|
+
__name: "AInput",
|
|
7
|
+
props: {
|
|
8
|
+
defaultValue: {},
|
|
9
|
+
modelValue: {},
|
|
10
|
+
class: { type: [Boolean, null, String, Object, Array] },
|
|
11
|
+
inputClass: { type: [Boolean, null, String, Object, Array] },
|
|
12
|
+
prefixClass: { type: [Boolean, null, String, Object, Array] },
|
|
13
|
+
suffixClass: { type: [Boolean, null, String, Object, Array] },
|
|
14
|
+
size: { default: j }
|
|
15
|
+
},
|
|
16
|
+
emits: ["update:modelValue"],
|
|
17
|
+
setup(k, { emit: V }) {
|
|
18
|
+
const e = k, w = V, d = A(), f = l(() => !!d.prefix), c = l(() => !!d.suffix), C = l(() => f.value || c.value), s = _(e, "modelValue", w, {
|
|
19
|
+
passive: !0,
|
|
20
|
+
defaultValue: e.defaultValue
|
|
21
|
+
}), p = l(() => E[e.size]), m = l(() => O[e.size]), g = l(() => T[e.size]);
|
|
22
|
+
return (b, a) => C.value ? (i(), r("div", {
|
|
23
|
+
key: 0,
|
|
24
|
+
"data-size": e.size,
|
|
25
|
+
class: o(
|
|
26
|
+
t(n)(
|
|
27
|
+
"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",
|
|
28
|
+
p.value,
|
|
29
|
+
m.value,
|
|
30
|
+
g.value,
|
|
31
|
+
e.class
|
|
32
|
+
)
|
|
33
|
+
)
|
|
34
|
+
}, [
|
|
35
|
+
f.value ? (i(), r("span", {
|
|
36
|
+
key: 0,
|
|
37
|
+
class: o(t(n)("text-muted-foreground flex shrink-0 items-center pr-2", e.prefixClass))
|
|
38
|
+
}, [
|
|
39
|
+
x(b.$slots, "prefix")
|
|
40
|
+
], 2)) : v("", !0),
|
|
41
|
+
y(B("input", {
|
|
42
|
+
"onUpdate:modelValue": a[0] || (a[0] = (u) => z(s) ? s.value = u : null),
|
|
43
|
+
"data-slot": "input",
|
|
44
|
+
class: o(
|
|
45
|
+
t(n)(
|
|
46
|
+
"placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
47
|
+
e.inputClass
|
|
48
|
+
)
|
|
49
|
+
)
|
|
50
|
+
}, null, 2), [
|
|
51
|
+
[h, t(s)]
|
|
52
|
+
]),
|
|
53
|
+
c.value ? (i(), r("span", {
|
|
54
|
+
key: 1,
|
|
55
|
+
class: o(t(n)("text-muted-foreground flex shrink-0 items-center pl-2", e.suffixClass))
|
|
56
|
+
}, [
|
|
57
|
+
x(b.$slots, "suffix")
|
|
58
|
+
], 2)) : v("", !0)
|
|
59
|
+
], 10, D)) : y((i(), r("input", {
|
|
60
|
+
key: 1,
|
|
61
|
+
"onUpdate:modelValue": a[1] || (a[1] = (u) => z(s) ? s.value = u : null),
|
|
62
|
+
"data-slot": "input",
|
|
63
|
+
"data-size": e.size,
|
|
64
|
+
class: o(
|
|
65
|
+
t(n)(
|
|
66
|
+
"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",
|
|
67
|
+
p.value,
|
|
68
|
+
m.value,
|
|
69
|
+
g.value,
|
|
70
|
+
e.class
|
|
71
|
+
)
|
|
72
|
+
)
|
|
73
|
+
}, null, 10, P)), [
|
|
74
|
+
[h, t(s)]
|
|
75
|
+
]);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
export {
|
|
79
|
+
N as _
|
|
80
|
+
};
|
|
81
|
+
//# sourceMappingURL=AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs","sources":["../../entries/input/components/AInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { computed, useSlots } from 'vue';\nimport { useVModel } from '@vueuse/core';\nimport { cn } from '@/utils';\nimport { controlHeight, controlPaddingX, controlTextSize, DEFAULT_SIZE, type Size } from '@/utils';\n\nconst props = withDefaults(\n defineProps<{\n defaultValue?: string | number;\n modelValue?: string | number;\n class?: HTMLAttributes['class'];\n /** Classes for the inner <input> element (useful when prefix/suffix are present). */\n inputClass?: HTMLAttributes['class'];\n /** Classes for the prefix wrapper. */\n prefixClass?: HTMLAttributes['class'];\n /** Classes for the suffix wrapper. */\n suffixClass?: HTMLAttributes['class'];\n size?: Size;\n }>(),\n { size: DEFAULT_SIZE }\n);\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void;\n}>();\n\ndefineSlots<{\n /** Content rendered inside the input's border, left of the field. */\n prefix?: () => unknown;\n /** Content rendered inside the input's border, right of the field. */\n suffix?: () => unknown;\n}>();\n\nconst slots = useSlots();\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\nconst hasAdornment = computed(() => hasPrefix.value || hasSuffix.value);\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n});\n\nconst sizeHeight = computed(() => controlHeight[props.size]);\nconst sizePaddingX = computed(() => controlPaddingX[props.size]);\nconst sizeText = computed(() => controlTextSize[props.size]);\n</script>\n\n<template>\n <!--\n When prefix or suffix slots are filled we render a wrapper that owns the border,\n background and focus ring — so the visible \"input\" is the whole bar, not just the\n native element. Otherwise we render the plain native input directly so consumers\n can use AInput as a drop-in for <input>.\n -->\n <div\n v-if=\"hasAdornment\"\n :data-size=\"props.size\"\n :class=\"\n cn(\n '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',\n sizeHeight,\n sizePaddingX,\n sizeText,\n props.class\n )\n \"\n >\n <span\n v-if=\"hasPrefix\"\n :class=\"cn('text-muted-foreground flex shrink-0 items-center pr-2', props.prefixClass)\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <input\n v-model=\"modelValue\"\n data-slot=\"input\"\n :class=\"\n cn(\n 'placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50',\n props.inputClass\n )\n \"\n />\n\n <span\n v-if=\"hasSuffix\"\n :class=\"cn('text-muted-foreground flex shrink-0 items-center pl-2', props.suffixClass)\"\n >\n <slot name=\"suffix\" />\n </span>\n </div>\n\n <input\n v-else\n v-model=\"modelValue\"\n data-slot=\"input\"\n :data-size=\"props.size\"\n :class=\"\n cn(\n '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',\n sizeHeight,\n sizePaddingX,\n sizeText,\n props.class\n )\n \"\n />\n</template>\n"],"names":["props","__props","emits","__emit","slots","useSlots","hasPrefix","computed","hasSuffix","hasAdornment","modelValue","useVModel","sizeHeight","controlHeight","sizePaddingX","controlPaddingX","sizeText","controlTextSize","_createElementBlock","_normalizeClass","_unref","cn","_renderSlot","_ctx","_createElementVNode","$event"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAgBRC,IAAQC,GAWRC,IAAQC,EAAA,GACRC,IAAYC,EAAS,MAAM,CAAC,CAACH,EAAM,MAAM,GACzCI,IAAYD,EAAS,MAAM,CAAC,CAACH,EAAM,MAAM,GACzCK,IAAeF,EAAS,MAAMD,EAAU,SAASE,EAAU,KAAK,GAEhEE,IAAaC,EAAUX,GAAO,cAAcE,GAAO;AAAA,MACvD,SAAS;AAAA,MACT,cAAcF,EAAM;AAAA,IAAA,CACrB,GAEKY,IAAaL,EAAS,MAAMM,EAAcb,EAAM,IAAI,CAAC,GACrDc,IAAeP,EAAS,MAAMQ,EAAgBf,EAAM,IAAI,CAAC,GACzDgB,IAAWT,EAAS,MAAMU,EAAgBjB,EAAM,IAAI,CAAC;qBAWjDS,EAAA,cADRS,EAqCM,OAAA;AAAA;MAnCH,aAAWlB,EAAM;AAAA,MACjB,OAAKmB;AAAAA,QAASC,EAAAC,CAAA;AAAA;UAAkMT,EAAA;AAAA,UAAoBE,EAAA;AAAA,UAAsBE,EAAA;AAAA,UAAkBhB,EAAM;AAAA,QAAA;AAAA;;MAW3QM,EAAA,cADRY,EAKO,QAAA;AAAA;QAHJ,OAAKC,EAAEC,EAAAC,CAAA,EAAE,yDAA0DrB,EAAM,WAAW,CAAA;AAAA,MAAA;QAErFsB,EAAsBC,EAAA,QAAA,QAAA;AAAA,MAAA;QAGxBC,EASE,SAAA;AAAA,6DARSd,EAAU,QAAAe,IAAA;AAAA,QACnB,aAAU;AAAA,QACT,OAAKN;AAAAA,UAAWC,EAAAC,CAAA;AAAA;YAA+JrB,EAAM;AAAA,UAAA;AAAA;;YAF7KoB,EAAAV,CAAA,CAAU;AAAA,MAAA;MAWbF,EAAA,cADRU,EAKO,QAAA;AAAA;QAHJ,OAAKC,EAAEC,EAAAC,CAAA,EAAE,yDAA0DrB,EAAM,WAAW,CAAA;AAAA,MAAA;QAErFsB,EAAsBC,EAAA,QAAA,QAAA;AAAA,MAAA;yBAI1BL,EAcE,SAAA;AAAA;2DAZSR,EAAU,QAAAe,IAAA;AAAA,MACnB,aAAU;AAAA,MACT,aAAWzB,EAAM;AAAA,MACjB,OAAKmB;AAAAA,QAASC,EAAAC,CAAA;AAAA;UAAkWT,EAAA;AAAA,UAAoBE,EAAA;AAAA,UAAsBE,EAAA;AAAA,UAAkBhB,EAAM;AAAA,QAAA;AAAA;;UAH1aoB,EAAAV,CAAA,CAAU;AAAA,IAAA;;;"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { defineComponent as p, openBlock as n, createBlock as c, unref as e, mergeProps as u, withCtx as l, renderSlot as f, normalizeProps as g, guardReactiveProps as B, createElementBlock as _, normalizeClass as P, createCommentVNode as h, createVNode as b } from "vue";
|
|
2
|
+
import { useForwardPropsEmits as v, PopoverRoot as w, useForwardProps as C, PopoverTrigger as O, PopoverPortal as A, PopoverContent as k } from "reka-ui";
|
|
3
|
+
import { reactiveOmit as z } from "@vueuse/core";
|
|
4
|
+
import { c as y } from "./cn-B6yFEsav.mjs";
|
|
5
|
+
const D = /* @__PURE__ */ p({
|
|
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(t, { emit: a }) {
|
|
14
|
+
const r = v(t, a);
|
|
15
|
+
return (i, d) => (n(), c(e(w), u({ "data-slot": "popover" }, e(r)), {
|
|
16
|
+
default: l((m) => [
|
|
17
|
+
f(i.$slots, "default", g(B(m)))
|
|
18
|
+
]),
|
|
19
|
+
_: 3
|
|
20
|
+
}, 16));
|
|
21
|
+
}
|
|
22
|
+
}), E = /* @__PURE__ */ p({
|
|
23
|
+
__name: "APopoverTrigger",
|
|
24
|
+
props: {
|
|
25
|
+
asChild: { type: Boolean },
|
|
26
|
+
as: {}
|
|
27
|
+
},
|
|
28
|
+
setup(t) {
|
|
29
|
+
const o = C(t);
|
|
30
|
+
return (s, r) => (n(), c(e(O), u({ "data-slot": "popover-trigger" }, e(o)), {
|
|
31
|
+
default: l(() => [
|
|
32
|
+
f(s.$slots, "default")
|
|
33
|
+
]),
|
|
34
|
+
_: 3
|
|
35
|
+
}, 16));
|
|
36
|
+
}
|
|
37
|
+
}), j = /* @__PURE__ */ p({
|
|
38
|
+
inheritAttrs: !1,
|
|
39
|
+
__name: "APopoverContent",
|
|
40
|
+
props: {
|
|
41
|
+
forceMount: { type: Boolean },
|
|
42
|
+
side: {},
|
|
43
|
+
sideOffset: { default: 4 },
|
|
44
|
+
sideFlip: { type: Boolean },
|
|
45
|
+
align: { default: "center" },
|
|
46
|
+
alignOffset: {},
|
|
47
|
+
alignFlip: { type: Boolean },
|
|
48
|
+
avoidCollisions: { type: Boolean },
|
|
49
|
+
collisionBoundary: {},
|
|
50
|
+
collisionPadding: {},
|
|
51
|
+
arrowPadding: {},
|
|
52
|
+
hideShiftedArrow: { type: Boolean },
|
|
53
|
+
sticky: {},
|
|
54
|
+
hideWhenDetached: { type: Boolean },
|
|
55
|
+
positionStrategy: {},
|
|
56
|
+
updatePositionStrategy: {},
|
|
57
|
+
disableUpdateOnLayoutShift: { type: Boolean },
|
|
58
|
+
prioritizePosition: { type: Boolean },
|
|
59
|
+
reference: {},
|
|
60
|
+
asChild: { type: Boolean },
|
|
61
|
+
as: {},
|
|
62
|
+
disableOutsidePointerEvents: { type: Boolean },
|
|
63
|
+
class: { type: [Boolean, null, String, Object, Array] },
|
|
64
|
+
overlay: { type: Boolean, default: !1 },
|
|
65
|
+
overlayClass: { type: [Boolean, null, String, Object, Array] }
|
|
66
|
+
},
|
|
67
|
+
emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
|
|
68
|
+
setup(t, { emit: a }) {
|
|
69
|
+
const o = t, s = a, r = z(o, "class", "overlay", "overlayClass"), i = v(r, s);
|
|
70
|
+
return (d, m) => (n(), c(e(A), null, {
|
|
71
|
+
default: l(() => [
|
|
72
|
+
o.overlay ? (n(), _("div", {
|
|
73
|
+
key: 0,
|
|
74
|
+
"data-slot": "popover-overlay",
|
|
75
|
+
class: P(
|
|
76
|
+
e(y)(
|
|
77
|
+
"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",
|
|
78
|
+
o.overlayClass
|
|
79
|
+
)
|
|
80
|
+
)
|
|
81
|
+
}, null, 2)) : h("", !0),
|
|
82
|
+
b(e(k), u({ "data-slot": "popover-content" }, { ...d.$attrs, ...e(i) }, {
|
|
83
|
+
class: e(y)(
|
|
84
|
+
"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",
|
|
85
|
+
o.class
|
|
86
|
+
)
|
|
87
|
+
}), {
|
|
88
|
+
default: l(() => [
|
|
89
|
+
f(d.$slots, "default")
|
|
90
|
+
]),
|
|
91
|
+
_: 3
|
|
92
|
+
}, 16, ["class"])
|
|
93
|
+
]),
|
|
94
|
+
_: 3
|
|
95
|
+
}));
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
export {
|
|
99
|
+
D as _,
|
|
100
|
+
j as a,
|
|
101
|
+
E as b
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=APopoverContent.vue_vue_type_script_setup_true_lang-BRqULKIg.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"APopoverContent.vue_vue_type_script_setup_true_lang-BRqULKIg.mjs","sources":["../../entries/popover/components/APopover.vue","../../entries/popover/components/APopoverTrigger.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 { 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';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n defineProps<\n PopoverContentProps & {\n class?: HTMLAttributes['class'];\n /** Render a dimmed, clickable backdrop behind the popover. Pair with `<APopover modal>`. */\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. We still mark it\n pointer-events:auto explicitly to be safe.\n -->\n <div\n v-if=\"props.overlay\"\n data-slot=\"popover-overlay\"\n :class=\"\n cn(\n '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',\n props.overlayClass\n )\n \"\n />\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-50 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","emits","delegated","reactiveOmit","PopoverPortal","_createElementBlock","_normalizeClass","cn","_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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACIZ,UAAME,IAAQX,GAWRY,IAAQX,GACRY,IAAYC,EAAaH,GAAO,SAAS,WAAW,cAAc,GAClEb,IAAYC,EAAqBc,GAAWD,CAAK;2BAIrDT,EA6BgBC,EAAAW,CAAA,GAAA,MAAA;AAAA,iBAtBd,MASE;AAAA,QARMJ,EAAM,gBADdK,EASE,OAAA;AAAA;UAPA,aAAU;AAAA,UACT,OAAKC;AAAAA,YAAWb,EAAAc,CAAA;AAAA;cAAuNP,EAAM;AAAA,YAAA;AAAA;;QAOhPQ,EAWiBf,EAAAgB,CAAA,GAXjBf,EAWiB,EAVf,aAAU,kBAAA,GAAiB,EAAA,GACdgB,EAAAA,QAAM,GAAKjB,EAAAN,CAAA,KAAS;AAAA,UAChC,OAAgBM,EAAAc,CAAA;AAAA;YAAscP,EAAM;AAAA,UAAA;AAAA;qBAO7d,MAAQ;AAAA,YAARH,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}
|
package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-CCGyy9Lp.mjs
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { defineComponent as u, useModel as g, computed as c, 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, b as $, a as b } from "./APopoverContent.vue_vue_type_script_setup_true_lang-BRqULKIg.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__ */ u({
|
|
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 = c(() => 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__ */ u({
|
|
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 = c(() => 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__ */ u({
|
|
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 = c(() => [
|
|
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-CCGyy9Lp.mjs.map
|
package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-CCGyy9Lp.mjs.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-CCGyy9Lp.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;;;;;"}
|