@profitliga/ui 2.0.5 → 2.0.6
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/dist/components/v2/AlertDialog/AlertDialog.css +1 -1
- package/dist/components/v2/AlertDialog/AlertDialog.vue.js +2 -2
- package/dist/components/v2/AlertDialog/AlertDialog.vue2.js +52 -51
- package/dist/components/v2/BottomSheet/BottomSheet.css +1 -1
- package/dist/components/v2/BottomSheet/BottomSheet.vue.js +2 -2
- package/dist/components/v2/BottomSheet/BottomSheet.vue2.js +31 -29
- package/dist/components/v2/Dialog/Dialog.css +1 -1
- package/dist/components/v2/Dialog/Dialog.vue.js +1 -1
- package/dist/components/v2/Dialog/Dialog.vue2.js +74 -72
- package/dist/components/v2/Drawer/Drawer.css +1 -1
- package/dist/components/v2/Drawer/Drawer.vue.js +1 -1
- package/dist/components/v2/Drawer/Drawer.vue2.js +44 -42
- package/dist/components/v2/shared/useLayerZIndex.util.d.ts +10 -0
- package/dist/components/v2/shared/useLayerZIndex.util.js +25 -13
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.alert-dialog-trigger[data-v-
|
|
1
|
+
.alert-dialog-trigger[data-v-6c5794b1]{display:contents}.alert-dialog-layer[data-v-6c5794b1]{position:relative}.alert-dialog-icon[data-v-6c5794b1]{--icon-bg:var(--color-primary-600);--icon-shadow:#008925b2;box-sizing:border-box;width:44px;height:44px;color:var(--color-neutral-0);background-color:var(--icon-bg);box-shadow:-1px 1px 10px 0px var(--icon-shadow);filter:opacity(.7);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;padding:8px;display:flex}.alert-dialog-icon--success[data-v-6c5794b1]{--icon-bg:var(--color-primary-600);--icon-shadow:#008925b2}.alert-dialog-icon--warning[data-v-6c5794b1]{--icon-bg:var(--color-warn-600);--icon-shadow:#d47d16b2}.alert-dialog-icon--error[data-v-6c5794b1]{--icon-bg:var(--color-error-600);--icon-shadow:#bd2429b2}.alert-dialog-content[data-v-6c5794b1]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);width:90vw;max-height:85vh;overflow-y:auto}.alert-dialog-content[data-v-6c5794b1]::-webkit-scrollbar{width:8px;height:0}.alert-dialog-content[data-v-6c5794b1]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.alert-dialog-content[data-v-6c5794b1]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.alert-dialog-content[data-v-6c5794b1]::-webkit-scrollbar-corner{background:0 0}.alert-dialog-content[data-v-6c5794b1]{box-sizing:border-box;z-index:1001;background-color:#fff;border-radius:12px;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.alert-dialog-content[data-state=open][data-v-6c5794b1]{animation:fadeIn var(--animation-duration) ease-in-out}.alert-dialog-content[data-state=closed][data-v-6c5794b1]{animation:fadeOut var(--animation-duration) ease-in-out}.alert-dialog-content__header[data-v-6c5794b1]{justify-content:flex-start;align-items:center;gap:12px;width:100%;margin-bottom:20px;display:flex}.alert-dialog-content__header--divided[data-v-6c5794b1]{border-bottom:1px solid var(--color-secondary-250);margin-bottom:12px;padding-bottom:12px}.alert-dialog-content__title[data-v-6c5794b1]{width:100%;color:var(--theme-neutral-text-title);margin:0;font-size:1.25rem;font-weight:500;line-height:120%}.alert-dialog-content__title--with-icon[data-v-6c5794b1]{font-weight:700}.alert-dialog-content__description[data-v-6c5794b1]{width:100%;color:var(--theme-neutral-text-body);margin:0 0 12px;font-size:1rem;font-weight:400;line-height:160%}.alert-dialog-content__actions[data-v-6c5794b1]{justify-content:flex-end;align-items:center;gap:12px;width:100%;margin-top:20px;display:flex}.alert-dialog-mobile[data-v-6c5794b1]{box-sizing:border-box;flex-direction:column;gap:16px;width:100%;padding:16px;display:flex}.alert-dialog-mobile__header[data-v-6c5794b1]{justify-content:flex-start;align-items:center;gap:12px;display:flex}.alert-dialog-mobile__header--divided[data-v-6c5794b1]{border-bottom:1px solid var(--color-secondary-250);padding-bottom:12px}.alert-dialog-mobile__title[data-v-6c5794b1]{color:var(--theme-neutral-text-title);margin:0;font-size:1.125rem;font-weight:500;line-height:1.5}.alert-dialog-mobile__title--with-icon[data-v-6c5794b1]{font-weight:700}.alert-dialog-mobile__description[data-v-6c5794b1]{color:var(--theme-neutral-text-body);font-size:1rem;font-weight:400;line-height:160%}.alert-dialog-mobile__actions[data-v-6c5794b1]{flex-direction:column-reverse;gap:8px;width:100%;display:flex}.alert-dialog-mobile__actions[data-v-6c5794b1] button{width:100%}
|
|
@@ -2,7 +2,7 @@ import './AlertDialog.css';
|
|
|
2
2
|
import o from "./AlertDialog.vue2.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import t from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const
|
|
5
|
+
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6c5794b1"]]);
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
p as default
|
|
8
8
|
};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { defineComponent as W, useModel as Z, useId as j, computed as m, useTemplateRef as R,
|
|
2
|
-
import { CircleCheck as
|
|
3
|
-
import { useBodyScroll as
|
|
4
|
-
import { useFocusTrap as
|
|
5
|
-
import
|
|
1
|
+
import { defineComponent as W, useModel as Z, useId as j, computed as m, useTemplateRef as R, watch as G, onBeforeUnmount as H, openBlock as o, createElementBlock as n, Fragment as J, mergeProps as i, unref as t, renderSlot as s, createCommentVNode as d, createBlock as y, withCtx as A, createElementVNode as c, normalizeClass as T, resolveDynamicComponent as z, normalizeStyle as Q, mergeModels as O } from "vue";
|
|
2
|
+
import { CircleCheck as X, CircleAlert as Y } from "@lucide/vue";
|
|
3
|
+
import { useBodyScroll as x } from "../../../utils/useBodyScroll.util.js";
|
|
4
|
+
import { useFocusTrap as ee } from "../../../utils/useFocusTrap.util.js";
|
|
5
|
+
import te from "../BottomSheet/BottomSheet.vue.js";
|
|
6
6
|
import { ANIMATION_DURATION_MS as _ } from "../shared/animation.const.js";
|
|
7
|
-
import
|
|
8
|
-
import { useDelayedVisibility as
|
|
9
|
-
import { useIsMobile as
|
|
10
|
-
import { useLayerZIndex as
|
|
11
|
-
import { useTestId as
|
|
12
|
-
import { useTriggerAria as
|
|
13
|
-
const
|
|
7
|
+
import oe from "../shared/Portal.vue.js";
|
|
8
|
+
import { useDelayedVisibility as ae } from "../shared/useDelayedVisibility.util.js";
|
|
9
|
+
import { useIsMobile as ie } from "../shared/useIsMobile.util.js";
|
|
10
|
+
import { useLayerZIndex as le } from "../shared/useLayerZIndex.util.js";
|
|
11
|
+
import { useTestId as se } from "../shared/useTestId.util.js";
|
|
12
|
+
import { useTriggerAria as re } from "../shared/useTriggerAria.util.js";
|
|
13
|
+
const ne = { class: "alert-dialog-mobile" }, de = ["data-state"], ce = ["aria-describedby", "data-state"], we = /* @__PURE__ */ W({
|
|
14
14
|
inheritAttrs: !1,
|
|
15
15
|
__name: "AlertDialog",
|
|
16
16
|
props: /* @__PURE__ */ O({
|
|
@@ -25,69 +25,70 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
|
|
|
25
25
|
}),
|
|
26
26
|
emits: /* @__PURE__ */ O(["escapeKeyDown"], ["update:open"]),
|
|
27
27
|
setup(l, { emit: N }) {
|
|
28
|
-
const u = l,
|
|
28
|
+
const u = l, w = ie(u.breakpointMobile), C = N, r = Z(l, "open"), b = j(), p = `alert-dialog-title-${b}`, S = `alert-dialog-description-${b}`, k = `alert-dialog-content-${b}`, K = m(() => `${u.width}px`), a = se(() => u.testId), L = m(() => ({
|
|
29
29
|
"aria-haspopup": "dialog",
|
|
30
30
|
"aria-expanded": r.value,
|
|
31
|
-
"aria-controls": r.value ?
|
|
32
|
-
})),
|
|
33
|
-
() => u.variant === "success" ?
|
|
34
|
-
),
|
|
35
|
-
|
|
36
|
-
host: () =>
|
|
31
|
+
"aria-controls": r.value ? k : void 0
|
|
32
|
+
})), B = m(
|
|
33
|
+
() => u.variant === "success" ? X : Y
|
|
34
|
+
), D = m(() => u.divider ?? !!u.variant), E = R("triggerRef"), $ = R("contentRef");
|
|
35
|
+
re({
|
|
36
|
+
host: () => E.value,
|
|
37
37
|
isOpen: () => r.value,
|
|
38
|
-
contentId: () =>
|
|
38
|
+
contentId: () => k,
|
|
39
39
|
hasPopup: () => "dialog"
|
|
40
40
|
});
|
|
41
|
-
const { lockScroll: P, unlockScroll: U } =
|
|
41
|
+
const { lockScroll: P, unlockScroll: U } = x(), h = ee(() => $.value), f = le();
|
|
42
|
+
G($, (e) => f.registerElement(e));
|
|
42
43
|
function V() {
|
|
43
44
|
r.value = !1;
|
|
44
45
|
}
|
|
45
|
-
function
|
|
46
|
-
e.key === "Escape" && (
|
|
46
|
+
function I(e) {
|
|
47
|
+
e.key === "Escape" && (C("escapeKeyDown", e), e.defaultPrevented || V());
|
|
47
48
|
}
|
|
48
|
-
const F = m(() => r.value && !
|
|
49
|
+
const F = m(() => r.value && !w.value), { visible: q, dataState: M } = ae(
|
|
49
50
|
F,
|
|
50
51
|
_,
|
|
51
52
|
{
|
|
52
53
|
onOpen: () => {
|
|
53
|
-
|
|
54
|
+
f.acquire(), P(), h.activate({ focusDelayMs: _ }), document.addEventListener("keydown", I);
|
|
54
55
|
},
|
|
55
56
|
onCloseStart: () => {
|
|
56
|
-
|
|
57
|
+
h.deactivate(), document.removeEventListener("keydown", I);
|
|
57
58
|
},
|
|
58
59
|
onCloseEnd: () => {
|
|
59
|
-
U(),
|
|
60
|
+
U(), f.release();
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
63
|
);
|
|
63
|
-
return
|
|
64
|
-
document.removeEventListener("keydown",
|
|
65
|
-
}), (e, v) => (o(), n(
|
|
64
|
+
return H(() => {
|
|
65
|
+
document.removeEventListener("keydown", I), h.deactivate();
|
|
66
|
+
}), (e, v) => (o(), n(J, null, [
|
|
66
67
|
e.$slots.trigger ? (o(), n("span", i({
|
|
67
68
|
key: 0,
|
|
68
69
|
ref_key: "triggerRef",
|
|
69
|
-
ref:
|
|
70
|
+
ref: E,
|
|
70
71
|
class: "alert-dialog-trigger"
|
|
71
72
|
}, t(a)("trigger"), {
|
|
72
|
-
onClick: v[0] || (v[0] = (
|
|
73
|
+
onClick: v[0] || (v[0] = (g) => r.value = !0)
|
|
73
74
|
}), [
|
|
74
75
|
s(e.$slots, "trigger", { props: L.value }, void 0, !0)
|
|
75
76
|
], 16)) : d("", !0),
|
|
76
|
-
t(
|
|
77
|
+
t(w) ? (o(), y(t(te), {
|
|
77
78
|
key: 1,
|
|
78
79
|
open: r.value,
|
|
79
|
-
"onUpdate:open": v[1] || (v[1] = (
|
|
80
|
+
"onUpdate:open": v[1] || (v[1] = (g) => r.value = g),
|
|
80
81
|
"disable-outside-pointer-events": "",
|
|
81
82
|
"disable-swipe-to-close": "",
|
|
82
83
|
"labelled-by": p,
|
|
83
84
|
"test-id": l.testId,
|
|
84
|
-
onEscapeKeyDown: v[2] || (v[2] = (
|
|
85
|
+
onEscapeKeyDown: v[2] || (v[2] = (g) => C("escapeKeyDown", g))
|
|
85
86
|
}, {
|
|
86
87
|
default: A(() => [
|
|
87
|
-
c("div",
|
|
88
|
+
c("div", ne, [
|
|
88
89
|
c("div", {
|
|
89
90
|
class: T(["alert-dialog-mobile__header", {
|
|
90
|
-
"alert-dialog-mobile__header--divided":
|
|
91
|
+
"alert-dialog-mobile__header--divided": D.value
|
|
91
92
|
}])
|
|
92
93
|
}, [
|
|
93
94
|
l.variant ? (o(), n("span", i({
|
|
@@ -95,7 +96,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
|
|
|
95
96
|
class: ["alert-dialog-icon", `alert-dialog-icon--${l.variant}`]
|
|
96
97
|
}, t(a)("icon")), [
|
|
97
98
|
s(e.$slots, "icon", {}, () => [
|
|
98
|
-
(o(),
|
|
99
|
+
(o(), y(z(B.value), { size: 28 }))
|
|
99
100
|
], !0)
|
|
100
101
|
], 16)) : d("", !0),
|
|
101
102
|
c("h2", i({
|
|
@@ -122,31 +123,31 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
|
|
|
122
123
|
])
|
|
123
124
|
]),
|
|
124
125
|
_: 3
|
|
125
|
-
}, 8, ["open", "test-id"])) : t(q) ? (o(),
|
|
126
|
+
}, 8, ["open", "test-id"])) : t(q) ? (o(), y(oe, { key: 2 }, {
|
|
126
127
|
default: A(() => [
|
|
127
128
|
c("div", {
|
|
128
129
|
class: "alert-dialog-layer",
|
|
129
|
-
style:
|
|
130
|
+
style: Q({ zIndex: t(f).zIndex.value })
|
|
130
131
|
}, [
|
|
131
132
|
c("div", i({
|
|
132
133
|
class: "overlay alert-dialog-overlay",
|
|
133
|
-
"data-state": t(
|
|
134
|
-
}, t(a)("overlay")), null, 16,
|
|
134
|
+
"data-state": t(M)
|
|
135
|
+
}, t(a)("overlay")), null, 16, de),
|
|
135
136
|
c("div", i({
|
|
136
|
-
id:
|
|
137
|
+
id: k,
|
|
137
138
|
ref_key: "contentRef",
|
|
138
|
-
ref:
|
|
139
|
+
ref: $,
|
|
139
140
|
role: "alertdialog",
|
|
140
141
|
"aria-modal": "true",
|
|
141
142
|
"aria-labelledby": p,
|
|
142
|
-
"aria-describedby": e.$slots.default ?
|
|
143
|
-
"data-state": t(
|
|
143
|
+
"aria-describedby": e.$slots.default ? S : void 0,
|
|
144
|
+
"data-state": t(M),
|
|
144
145
|
class: "alert-dialog-content",
|
|
145
146
|
style: { maxWidth: K.value }
|
|
146
147
|
}, { ...e.$attrs, ...t(a)("content") }), [
|
|
147
148
|
c("div", {
|
|
148
149
|
class: T(["alert-dialog-content__header", {
|
|
149
|
-
"alert-dialog-content__header--divided":
|
|
150
|
+
"alert-dialog-content__header--divided": D.value
|
|
150
151
|
}])
|
|
151
152
|
}, [
|
|
152
153
|
l.variant ? (o(), n("span", i({
|
|
@@ -154,7 +155,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
|
|
|
154
155
|
class: ["alert-dialog-icon", `alert-dialog-icon--${l.variant}`]
|
|
155
156
|
}, t(a)("icon")), [
|
|
156
157
|
s(e.$slots, "icon", {}, () => [
|
|
157
|
-
(o(),
|
|
158
|
+
(o(), y(z(B.value), { size: 28 }))
|
|
158
159
|
], !0)
|
|
159
160
|
], 16)) : d("", !0),
|
|
160
161
|
c("h2", i({
|
|
@@ -168,7 +169,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
|
|
|
168
169
|
], 2),
|
|
169
170
|
e.$slots.default ? (o(), n("div", i({
|
|
170
171
|
key: 0,
|
|
171
|
-
id:
|
|
172
|
+
id: S,
|
|
172
173
|
class: "alert-dialog-content__description"
|
|
173
174
|
}, t(a)("description")), [
|
|
174
175
|
s(e.$slots, "default", {}, void 0, !0)
|
|
@@ -179,7 +180,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
|
|
|
179
180
|
}, t(a)("actions")), [
|
|
180
181
|
s(e.$slots, "actions", {}, void 0, !0)
|
|
181
182
|
], 16)) : d("", !0)
|
|
182
|
-
], 16,
|
|
183
|
+
], 16, ce)
|
|
183
184
|
], 4)
|
|
184
185
|
]),
|
|
185
186
|
_: 3
|
|
@@ -188,5 +189,5 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
|
|
|
188
189
|
}
|
|
189
190
|
});
|
|
190
191
|
export {
|
|
191
|
-
|
|
192
|
+
we as default
|
|
192
193
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheet-trigger[data-v-
|
|
1
|
+
.sheet-trigger[data-v-0004fa4b]{display:contents}.sheet-layer[data-v-0004fa4b]{position:relative}.sheet-content[data-v-0004fa4b]{background-color:var(--theme-neutral-0);z-index:1002;border-radius:12px 12px 0 0;flex-direction:column;width:100%;max-height:calc(100vh - 40px);display:flex;position:fixed;bottom:0;left:0;right:0;overflow:visible;box-shadow:0 2px 5px #3a3a3a40}.sheet-content[data-state=open][data-v-0004fa4b]{animation:slideBottomIn var(--animation-duration) ease-in-out}.sheet-content[data-state=closed][data-v-0004fa4b]{animation:slideBottomOut var(--animation-duration) ease-in-out}.sheet-content__handle[data-v-0004fa4b]{cursor:grab;touch-action:none;flex-shrink:0;justify-content:center;align-items:flex-end;width:100%;height:24px;padding-bottom:12px;display:flex}.sheet-content__handle[data-v-0004fa4b]:active{cursor:grabbing}.sheet-content__handle-dot[data-v-0004fa4b]{background-color:var(--theme-neutral-icon-primary);border-radius:2px;width:48px;height:4px}.sheet-content__body[data-v-0004fa4b]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);flex:auto;width:100%;min-height:0;overflow-y:auto}.sheet-content__body[data-v-0004fa4b]::-webkit-scrollbar{width:8px;height:0}.sheet-content__body[data-v-0004fa4b]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.sheet-content__body[data-v-0004fa4b]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.sheet-content__body[data-v-0004fa4b]::-webkit-scrollbar-corner{background:0 0}.sheet-overlay--drag-closing[data-v-0004fa4b]{visibility:hidden}
|
|
@@ -2,7 +2,7 @@ import './BottomSheet.css';
|
|
|
2
2
|
import o from "./BottomSheet.vue2.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import t from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const
|
|
5
|
+
const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0004fa4b"]]);
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
e as default
|
|
8
8
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as L, useModel as V, useId as F, computed as k, ref as K, useTemplateRef as O, watch as U, onBeforeUnmount as Z, openBlock as
|
|
1
|
+
import { defineComponent as L, useModel as V, useId as F, computed as k, ref as K, useTemplateRef as O, watch as U, onBeforeUnmount as Z, openBlock as m, createElementBlock as w, Fragment as q, mergeProps as u, unref as e, renderSlot as T, createCommentVNode as D, createBlock as H, withCtx as Y, createElementVNode as f, normalizeStyle as j, withModifiers as G, mergeModels as E, nextTick as J } from "vue";
|
|
2
2
|
import { onClickOutside as Q } from "../../../utils/onClickOutside.util.js";
|
|
3
3
|
import { useBodyScroll as W } from "../../../utils/useBodyScroll.util.js";
|
|
4
4
|
import { useFocusTrap as X } from "../../../utils/useFocusTrap.util.js";
|
|
5
5
|
import { useSwipeToClose as _ } from "../../../utils/useSwipeToClose.util.js";
|
|
6
|
-
import { ANIMATION_DURATION_MS as
|
|
6
|
+
import { ANIMATION_DURATION_MS as B } from "../shared/animation.const.js";
|
|
7
7
|
import ee from "../shared/Portal.vue.js";
|
|
8
8
|
import { useDelayedVisibility as te } from "../shared/useDelayedVisibility.util.js";
|
|
9
9
|
import { useLayerZIndex as oe } from "../shared/useLayerZIndex.util.js";
|
|
@@ -12,7 +12,7 @@ import { useTriggerAria as ne } from "../shared/useTriggerAria.util.js";
|
|
|
12
12
|
const le = ["data-state"], se = ["aria-label", "aria-labelledby", "data-state"], be = /* @__PURE__ */ L({
|
|
13
13
|
inheritAttrs: !1,
|
|
14
14
|
__name: "BottomSheet",
|
|
15
|
-
props: /* @__PURE__ */
|
|
15
|
+
props: /* @__PURE__ */ E({
|
|
16
16
|
zIndex: { default: "auto" },
|
|
17
17
|
disableOutsidePointerEvents: { type: Boolean, default: !1 },
|
|
18
18
|
disableSwipeToClose: { type: Boolean, default: !1 },
|
|
@@ -23,21 +23,21 @@ const le = ["data-state"], se = ["aria-label", "aria-labelledby", "data-state"],
|
|
|
23
23
|
open: { type: Boolean, default: !1 },
|
|
24
24
|
openModifiers: {}
|
|
25
25
|
}),
|
|
26
|
-
emits: /* @__PURE__ */
|
|
26
|
+
emits: /* @__PURE__ */ E(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
|
|
27
27
|
setup(l, { emit: M }) {
|
|
28
|
-
const
|
|
28
|
+
const c = l, I = M, s = V(l, "open"), p = `sheet-content-${F()}`, r = ae(() => c.testId), x = k(() => ({
|
|
29
29
|
"aria-haspopup": "dialog",
|
|
30
30
|
"aria-expanded": s.value,
|
|
31
|
-
"aria-controls": s.value ?
|
|
32
|
-
})), i = K(!1), S = O("triggerRef"),
|
|
31
|
+
"aria-controls": s.value ? p : void 0
|
|
32
|
+
})), i = K(!1), S = O("triggerRef"), v = O("contentRef");
|
|
33
33
|
ne({
|
|
34
34
|
host: () => S.value,
|
|
35
35
|
isOpen: () => s.value,
|
|
36
|
-
contentId: () =>
|
|
36
|
+
contentId: () => p,
|
|
37
37
|
hasPopup: () => "dialog"
|
|
38
38
|
});
|
|
39
|
-
const { lockScroll: R, unlockScroll: $ } = W(),
|
|
40
|
-
() =>
|
|
39
|
+
const { lockScroll: R, unlockScroll: $ } = W(), g = X(() => v.value), d = oe(), P = k(
|
|
40
|
+
() => c.zIndex === "auto" ? d.zIndex.value : c.zIndex
|
|
41
41
|
);
|
|
42
42
|
function y() {
|
|
43
43
|
s.value = !1;
|
|
@@ -51,36 +51,38 @@ const le = ["data-state"], se = ["aria-label", "aria-labelledby", "data-state"],
|
|
|
51
51
|
t.key === "Escape" && (I("escapeKeyDown", t), t.defaultPrevented || y());
|
|
52
52
|
}
|
|
53
53
|
function z(t) {
|
|
54
|
-
I("pointerDownOutside", t), !
|
|
54
|
+
I("pointerDownOutside", t), !c.disableOutsidePointerEvents && !t.defaultPrevented && y();
|
|
55
55
|
}
|
|
56
56
|
const { visible: A, dataState: C } = te(
|
|
57
57
|
s,
|
|
58
|
-
() => i.value ? 0 :
|
|
58
|
+
() => i.value ? 0 : B,
|
|
59
59
|
{
|
|
60
60
|
onOpen: () => {
|
|
61
|
-
i.value = !1, o.reset(),
|
|
61
|
+
i.value = !1, o.reset(), d.acquire(), R(), g.activate({ focusDelayMs: B }), document.addEventListener("keydown", h), J(() => o.measureContentHeight(v.value));
|
|
62
62
|
},
|
|
63
63
|
onCloseStart: () => {
|
|
64
|
-
|
|
64
|
+
g.deactivate(), document.removeEventListener("keydown", h);
|
|
65
65
|
},
|
|
66
66
|
onCloseEnd: () => {
|
|
67
|
-
$(),
|
|
67
|
+
$(), d.release();
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
);
|
|
71
71
|
let b;
|
|
72
|
-
U(
|
|
73
|
-
b?.(), b = t ? Q(t, z
|
|
72
|
+
U(v, (t) => {
|
|
73
|
+
d.registerElement(t), b?.(), b = t ? Q(t, z, {
|
|
74
|
+
ignore: () => d.elementsAbove()
|
|
75
|
+
}) : void 0;
|
|
74
76
|
}), Z(() => {
|
|
75
|
-
b?.(), document.removeEventListener("keydown", h),
|
|
77
|
+
b?.(), document.removeEventListener("keydown", h), g.deactivate();
|
|
76
78
|
});
|
|
77
79
|
const N = k(() => ({
|
|
78
80
|
transform: o.dragOffset.value > 0 ? `translateY(${o.dragOffset.value}px)` : void 0,
|
|
79
81
|
transition: o.isDragging.value ? "none" : "transform 0.2s ease-out",
|
|
80
82
|
animation: i.value ? "none" : void 0
|
|
81
83
|
}));
|
|
82
|
-
return (t, a) => (
|
|
83
|
-
t.$slots.trigger ? (
|
|
84
|
+
return (t, a) => (m(), w(q, null, [
|
|
85
|
+
t.$slots.trigger ? (m(), w("span", u({
|
|
84
86
|
key: 0,
|
|
85
87
|
ref_key: "triggerRef",
|
|
86
88
|
ref: S,
|
|
@@ -90,20 +92,20 @@ const le = ["data-state"], se = ["aria-label", "aria-labelledby", "data-state"],
|
|
|
90
92
|
}), [
|
|
91
93
|
T(t.$slots, "trigger", { props: x.value }, void 0, !0)
|
|
92
94
|
], 16)) : D("", !0),
|
|
93
|
-
e(A) ? (
|
|
95
|
+
e(A) ? (m(), H(ee, { key: 1 }, {
|
|
94
96
|
default: Y(() => [
|
|
95
|
-
|
|
97
|
+
f("div", {
|
|
96
98
|
class: "sheet-layer",
|
|
97
99
|
style: j({ zIndex: P.value })
|
|
98
100
|
}, [
|
|
99
|
-
|
|
101
|
+
f("div", u({
|
|
100
102
|
class: ["overlay dialog-overlay", { "sheet-overlay--drag-closing": i.value }],
|
|
101
103
|
"data-state": e(C)
|
|
102
104
|
}, e(r)("overlay")), null, 16, le),
|
|
103
|
-
|
|
104
|
-
id:
|
|
105
|
+
f("div", u({
|
|
106
|
+
id: p,
|
|
105
107
|
ref_key: "contentRef",
|
|
106
|
-
ref:
|
|
108
|
+
ref: v,
|
|
107
109
|
role: "dialog",
|
|
108
110
|
"aria-modal": "true",
|
|
109
111
|
"aria-label": l.labelledBy ? void 0 : l.label,
|
|
@@ -112,7 +114,7 @@ const le = ["data-state"], se = ["aria-label", "aria-labelledby", "data-state"],
|
|
|
112
114
|
"data-state": e(C),
|
|
113
115
|
style: N.value
|
|
114
116
|
}, { ...t.$attrs, ...e(r)("content") }), [
|
|
115
|
-
l.disableSwipeToClose ? D("", !0) : (
|
|
117
|
+
l.disableSwipeToClose ? D("", !0) : (m(), w("div", u({
|
|
116
118
|
key: 0,
|
|
117
119
|
class: "sheet-content__handle",
|
|
118
120
|
"aria-hidden": "true",
|
|
@@ -130,9 +132,9 @@ const le = ["data-state"], se = ["aria-label", "aria-labelledby", "data-state"],
|
|
|
130
132
|
onMousedown: a[4] || (a[4] = //@ts-ignore
|
|
131
133
|
(...n) => e(o).handleMouseDown && e(o).handleMouseDown(...n))
|
|
132
134
|
}), [...a[5] || (a[5] = [
|
|
133
|
-
|
|
135
|
+
f("div", { class: "sheet-content__handle-dot" }, null, -1)
|
|
134
136
|
])], 16)),
|
|
135
|
-
|
|
137
|
+
f("div", u({ class: "sheet-content__body" }, e(r)("body")), [
|
|
136
138
|
T(t.$slots, "default", {}, void 0, !0)
|
|
137
139
|
], 16)
|
|
138
140
|
], 16, se)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dialog-trigger[data-v-
|
|
1
|
+
.dialog-trigger[data-v-a32e6353]{display:contents}.dialog-layer[data-v-a32e6353]{position:relative}.dialog-content[data-v-a32e6353]{background-color:var(--theme-neutral-0);z-index:1002;border-radius:12px;max-width:90vw;padding:24px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 5px #3a3a3a40}.dialog-content[data-state=open][data-v-a32e6353]{animation:fadeIn var(--animation-duration) ease-in-out}.dialog-content[data-state=closed][data-v-a32e6353]{animation:fadeOut var(--animation-duration) ease-in-out}.dialog-content__header[data-v-a32e6353]{justify-content:space-between;align-items:flex-start;gap:12px;width:100%;height:auto;margin-bottom:16px;display:flex}.dialog-content__header--divided[data-v-a32e6353]{margin-bottom:12px}.dialog-content__heading[data-v-a32e6353]{flex:1 1 0;align-items:center;gap:12px;min-width:0;display:flex}.dialog-content__icon[data-v-a32e6353]{flex-shrink:0;justify-content:center;align-items:center;display:flex}.dialog-content__divider[data-v-a32e6353]{background-color:var(--theme-secondary-250);flex:none;width:100%;height:1px;margin-bottom:12px}.dialog-content__close[data-v-a32e6353]{background:0 0;border:none;justify-content:center;align-items:center;width:20px;min-width:20px;height:20px;margin-left:auto;padding:0;display:flex}.dialog-content__close[data-v-a32e6353]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.dialog-content__close svg[data-v-a32e6353]{width:20px;height:20px;color:var(--color-secondary-400);transition:color .3s ease-in-out}.dialog-content__close[data-v-a32e6353]:hover{cursor:pointer}.dialog-content__close:hover svg[data-v-a32e6353]{color:var(--color-secondary-500);transition:color .3s ease-in-out}.dialog-content__wrapper[data-v-a32e6353]{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:12px;width:100%;height:auto;display:flex}.dialog-content__wrapper[data-v-a32e6353]:not(:last-child){margin-bottom:32px}.dialog-content__actions[data-v-a32e6353]{justify-content:flex-end;align-items:center;gap:8px;width:100%;height:auto;display:flex}@media (max-width:1010px){.dialog-content[data-v-a32e6353]{box-sizing:border-box;flex-direction:column;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);display:flex}.dialog-content__header[data-v-a32e6353]{flex:none}.dialog-content__wrapper[data-v-a32e6353]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);flex:1 1 0;min-height:0;overflow-y:auto}.dialog-content__wrapper[data-v-a32e6353]::-webkit-scrollbar{width:8px;height:0}.dialog-content__wrapper[data-v-a32e6353]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.dialog-content__wrapper[data-v-a32e6353]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.dialog-content__wrapper[data-v-a32e6353]::-webkit-scrollbar-corner{background:0 0}.dialog-content__actions[data-v-a32e6353]{flex:none}}.dialog-content__title[data-v-a32e6353]{width:100%;font-weight:500}.dialog-content__title--with-icon[data-v-a32e6353]{font-weight:700}.dialog-mobile[data-v-a32e6353]{width:100%;padding:0 16px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:16px;display:flex}.dialog-mobile__header[data-v-a32e6353]{align-items:center;gap:12px;display:flex}.dialog-mobile__icon[data-v-a32e6353]{flex-shrink:0;justify-content:center;align-items:center;display:flex}.dialog-mobile__divider[data-v-a32e6353]{background-color:var(--theme-secondary-250);width:100%;height:1px;margin-top:-4px}.dialog-mobile__title[data-v-a32e6353]{color:var(--theme-neutral-text-title);font-size:1.125rem;font-weight:500;line-height:1.5}.dialog-mobile__content[data-v-a32e6353]{flex-direction:column;gap:12px;display:flex}.dialog-mobile__actions[data-v-a32e6353]{flex-direction:column-reverse;gap:8px;width:100%;display:flex}.dialog-mobile__actions[data-v-a32e6353] button{width:100%}
|
|
@@ -2,7 +2,7 @@ import './Dialog.css';
|
|
|
2
2
|
import o from "./Dialog.vue2.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import t from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
5
|
+
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a32e6353"]]);
|
|
6
6
|
export {
|
|
7
7
|
p as default
|
|
8
8
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as G, useModel as J, useId as Q, computed as g, useSlots as W, useTemplateRef as M, watch as Y, onBeforeUnmount as x, unref as t, openBlock as o, createBlock as
|
|
1
|
+
import { defineComponent as G, useModel as J, useId as Q, computed as g, useSlots as W, useTemplateRef as M, watch as Y, onBeforeUnmount as x, unref as t, openBlock as o, createBlock as b, createSlots as ee, withCtx as y, createElementVNode as v, createElementBlock as n, mergeProps as l, renderSlot as r, createCommentVNode as a, toDisplayString as R, normalizeProps as te, guardReactiveProps as oe, Fragment as ie, normalizeStyle as se, normalizeClass as le, resolveDynamicComponent as T, createTextVNode as ne, createVNode as ae, mergeModels as A } from "vue";
|
|
2
2
|
import { X as de } from "@lucide/vue";
|
|
3
3
|
import { breakpoints as re } from "../../../utils/breakpoints.util.js";
|
|
4
4
|
import { onClickOutside as ue } from "../../../utils/onClickOutside.util.js";
|
|
5
5
|
import { useBodyScroll as ce } from "../../../utils/useBodyScroll.util.js";
|
|
6
6
|
import { useFocusTrap as ve } from "../../../utils/useFocusTrap.util.js";
|
|
7
7
|
import me from "../BottomSheet/BottomSheet.vue.js";
|
|
8
|
-
import { ANIMATION_DURATION_MS as
|
|
8
|
+
import { ANIMATION_DURATION_MS as N } from "../shared/animation.const.js";
|
|
9
9
|
import fe from "../shared/Portal.vue.js";
|
|
10
10
|
import { useDelayedVisibility as ge } from "../shared/useDelayedVisibility.util.js";
|
|
11
11
|
import { useLayerZIndex as ye } from "../shared/useLayerZIndex.util.js";
|
|
@@ -18,13 +18,13 @@ const $e = { class: "dialog-mobile" }, he = {
|
|
|
18
18
|
}, we = {
|
|
19
19
|
key: 1,
|
|
20
20
|
class: "dialog-mobile__divider"
|
|
21
|
-
}, Ie = ["data-state"], Oe = ["aria-describedby", "data-state"], De = { class: "dialog-content__heading" }, Be = ["aria-label"],
|
|
21
|
+
}, Ie = ["data-state"], Oe = ["aria-describedby", "data-state"], De = { class: "dialog-content__heading" }, Be = ["aria-label"], Ee = {
|
|
22
22
|
key: 0,
|
|
23
23
|
class: "dialog-content__divider"
|
|
24
24
|
}, Fe = /* @__PURE__ */ G({
|
|
25
25
|
inheritAttrs: !1,
|
|
26
26
|
__name: "Dialog",
|
|
27
|
-
props: /* @__PURE__ */
|
|
27
|
+
props: /* @__PURE__ */ A({
|
|
28
28
|
title: { default: void 0 },
|
|
29
29
|
closeButton: { default: () => ({ enabled: !0 }) },
|
|
30
30
|
width: { default: 500 },
|
|
@@ -37,52 +37,54 @@ const $e = { class: "dialog-mobile" }, he = {
|
|
|
37
37
|
open: { type: Boolean, default: !1 },
|
|
38
38
|
openModifiers: {}
|
|
39
39
|
}),
|
|
40
|
-
emits: /* @__PURE__ */
|
|
40
|
+
emits: /* @__PURE__ */ A(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
|
|
41
41
|
setup(i, { emit: V }) {
|
|
42
|
-
const m = i,
|
|
42
|
+
const m = i, k = V, u = J(i, "open"), E = re.smaller(m.breakpointMobile), $ = Q(), f = `dialog-title-${$}`, h = `dialog-content-${$}`, S = `dialog-body-${$}`, s = pe(() => m.testId), K = g(() => ({
|
|
43
43
|
"aria-haspopup": "dialog",
|
|
44
44
|
"aria-expanded": u.value,
|
|
45
|
-
"aria-controls": u.value ?
|
|
46
|
-
})),
|
|
45
|
+
"aria-controls": u.value ? h : void 0
|
|
46
|
+
})), z = g(() => m.title?.as ?? "h2"), L = g(() => `${m.width}px`), U = W(), w = g(() => m.divider ?? !!U.icon), C = M("triggerRef"), I = M("contentRef");
|
|
47
47
|
be({
|
|
48
48
|
host: () => C.value,
|
|
49
49
|
isOpen: () => u.value,
|
|
50
|
-
contentId: () =>
|
|
50
|
+
contentId: () => h,
|
|
51
51
|
hasPopup: () => "dialog"
|
|
52
52
|
});
|
|
53
|
-
const { lockScroll: F, unlockScroll: Z } = ce(),
|
|
54
|
-
() => m.zIndex === "auto" ?
|
|
53
|
+
const { lockScroll: F, unlockScroll: Z } = ce(), O = ve(() => I.value), p = ye(), q = g(
|
|
54
|
+
() => m.zIndex === "auto" ? p.zIndex.value : m.zIndex
|
|
55
55
|
);
|
|
56
56
|
function P() {
|
|
57
57
|
u.value = !1;
|
|
58
58
|
}
|
|
59
59
|
function D(e) {
|
|
60
|
-
e.key === "Escape" && (
|
|
60
|
+
e.key === "Escape" && (k("escapeKeyDown", e), e.defaultPrevented || P());
|
|
61
61
|
}
|
|
62
62
|
function H(e) {
|
|
63
|
-
|
|
63
|
+
k("pointerDownOutside", e), !m.disableOutsidePointerEvents && !e.defaultPrevented && P();
|
|
64
64
|
}
|
|
65
|
-
const X = g(() => u.value && !
|
|
65
|
+
const X = g(() => u.value && !E.value), { visible: j, dataState: _ } = ge(
|
|
66
66
|
X,
|
|
67
|
-
|
|
67
|
+
N,
|
|
68
68
|
{
|
|
69
69
|
onOpen: () => {
|
|
70
|
-
|
|
70
|
+
p.acquire(), F(), O.activate({ focusDelayMs: N }), document.addEventListener("keydown", D);
|
|
71
71
|
},
|
|
72
72
|
onCloseStart: () => {
|
|
73
|
-
|
|
73
|
+
O.deactivate(), document.removeEventListener("keydown", D);
|
|
74
74
|
},
|
|
75
75
|
onCloseEnd: () => {
|
|
76
|
-
Z(),
|
|
76
|
+
Z(), p.release();
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
);
|
|
80
80
|
let B;
|
|
81
|
-
return Y(
|
|
82
|
-
B?.(), B = e ? ue(e, H
|
|
81
|
+
return Y(I, (e) => {
|
|
82
|
+
p.registerElement(e), B?.(), B = e ? ue(e, H, {
|
|
83
|
+
ignore: () => p.elementsAbove()
|
|
84
|
+
}) : void 0;
|
|
83
85
|
}), x(() => {
|
|
84
|
-
B?.(), document.removeEventListener("keydown", D),
|
|
85
|
-
}), (e, d) => t(
|
|
86
|
+
B?.(), document.removeEventListener("keydown", D), O.deactivate();
|
|
87
|
+
}), (e, d) => t(E) ? (o(), b(t(me), {
|
|
86
88
|
key: 0,
|
|
87
89
|
open: u.value,
|
|
88
90
|
"onUpdate:open": d[0] || (d[0] = (c) => u.value = c),
|
|
@@ -90,35 +92,35 @@ const $e = { class: "dialog-mobile" }, he = {
|
|
|
90
92
|
"disable-outside-pointer-events": i.disableOutsidePointerEvents,
|
|
91
93
|
"labelled-by": i.title?.text && !e.$slots.title ? f : void 0,
|
|
92
94
|
"test-id": i.testId,
|
|
93
|
-
onEscapeKeyDown: d[1] || (d[1] = (c) =>
|
|
94
|
-
onPointerDownOutside: d[2] || (d[2] = (c) =>
|
|
95
|
+
onEscapeKeyDown: d[1] || (d[1] = (c) => k("escapeKeyDown", c)),
|
|
96
|
+
onPointerDownOutside: d[2] || (d[2] = (c) => k("pointerDownOutside", c))
|
|
95
97
|
}, ee({
|
|
96
98
|
default: y(() => [
|
|
97
99
|
v("div", $e, [
|
|
98
|
-
e.$slots.icon || i.title?.text && !e.$slots.title ? (o(),
|
|
99
|
-
e.$slots.icon ? (o(),
|
|
100
|
+
e.$slots.icon || i.title?.text && !e.$slots.title ? (o(), n("div", he, [
|
|
101
|
+
e.$slots.icon ? (o(), n("span", l({
|
|
100
102
|
key: 0,
|
|
101
103
|
class: "dialog-mobile__icon"
|
|
102
|
-
}, t(
|
|
104
|
+
}, t(s)("icon")), [
|
|
103
105
|
r(e.$slots, "icon", {}, void 0, !0)
|
|
104
|
-
], 16)) :
|
|
105
|
-
i.title?.text && !e.$slots.title ? (o(),
|
|
106
|
+
], 16)) : a("", !0),
|
|
107
|
+
i.title?.text && !e.$slots.title ? (o(), n("div", l({
|
|
106
108
|
key: 1,
|
|
107
109
|
id: f,
|
|
108
110
|
class: "dialog-mobile__title"
|
|
109
|
-
}, t(
|
|
110
|
-
])) :
|
|
111
|
-
|
|
112
|
-
v("div",
|
|
111
|
+
}, t(s)("title")), R(i.title.text), 17)) : a("", !0)
|
|
112
|
+
])) : a("", !0),
|
|
113
|
+
w.value ? (o(), n("div", we)) : a("", !0),
|
|
114
|
+
v("div", l({ class: "dialog-mobile__content" }, t(s)("body")), [
|
|
113
115
|
r(e.$slots, "title", {}, void 0, !0),
|
|
114
116
|
r(e.$slots, "default", {}, void 0, !0)
|
|
115
117
|
], 16),
|
|
116
|
-
e.$slots.actions ? (o(),
|
|
118
|
+
e.$slots.actions ? (o(), n("div", l({
|
|
117
119
|
key: 2,
|
|
118
120
|
class: "dialog-mobile__actions"
|
|
119
|
-
}, t(
|
|
121
|
+
}, t(s)("actions")), [
|
|
120
122
|
r(e.$slots, "actions", {}, void 0, !0)
|
|
121
|
-
], 16)) :
|
|
123
|
+
], 16)) : a("", !0)
|
|
122
124
|
])
|
|
123
125
|
]),
|
|
124
126
|
_: 2
|
|
@@ -130,109 +132,109 @@ const $e = { class: "dialog-mobile" }, he = {
|
|
|
130
132
|
]),
|
|
131
133
|
key: "0"
|
|
132
134
|
} : void 0
|
|
133
|
-
]), 1032, ["open", "z-index", "disable-outside-pointer-events", "labelled-by", "test-id"])) : (o(),
|
|
134
|
-
e.$slots.trigger ? (o(),
|
|
135
|
+
]), 1032, ["open", "z-index", "disable-outside-pointer-events", "labelled-by", "test-id"])) : (o(), n(ie, { key: 1 }, [
|
|
136
|
+
e.$slots.trigger ? (o(), n("span", l({
|
|
135
137
|
key: 0,
|
|
136
138
|
ref_key: "triggerRef",
|
|
137
139
|
ref: C,
|
|
138
140
|
class: "dialog-trigger"
|
|
139
|
-
}, t(
|
|
141
|
+
}, t(s)("trigger"), {
|
|
140
142
|
onClick: d[3] || (d[3] = (c) => u.value = !0)
|
|
141
143
|
}), [
|
|
142
144
|
r(e.$slots, "trigger", { props: K.value }, void 0, !0)
|
|
143
|
-
], 16)) :
|
|
144
|
-
t(j) ? (o(),
|
|
145
|
+
], 16)) : a("", !0),
|
|
146
|
+
t(j) ? (o(), b(fe, { key: 1 }, {
|
|
145
147
|
default: y(() => [
|
|
146
148
|
v("div", {
|
|
147
149
|
class: "dialog-layer",
|
|
148
|
-
style:
|
|
150
|
+
style: se({ zIndex: q.value })
|
|
149
151
|
}, [
|
|
150
|
-
v("div",
|
|
152
|
+
v("div", l({
|
|
151
153
|
class: "overlay dialog-overlay",
|
|
152
154
|
"data-state": t(_)
|
|
153
|
-
}, t(
|
|
154
|
-
v("div",
|
|
155
|
-
id:
|
|
155
|
+
}, t(s)("overlay")), null, 16, Ie),
|
|
156
|
+
v("div", l({
|
|
157
|
+
id: h,
|
|
156
158
|
ref_key: "contentRef",
|
|
157
|
-
ref:
|
|
159
|
+
ref: I,
|
|
158
160
|
role: "dialog",
|
|
159
161
|
"aria-modal": "true",
|
|
160
162
|
"aria-labelledby": f,
|
|
161
|
-
"aria-describedby": e.$slots.default ?
|
|
163
|
+
"aria-describedby": e.$slots.default ? S : void 0,
|
|
162
164
|
"data-state": t(_),
|
|
163
165
|
class: "dialog-content",
|
|
164
166
|
style: { width: L.value }
|
|
165
|
-
}, { ...e.$attrs, ...t(
|
|
167
|
+
}, { ...e.$attrs, ...t(s)("content") }), [
|
|
166
168
|
v("div", {
|
|
167
|
-
class:
|
|
168
|
-
"dialog-content__header--divided":
|
|
169
|
+
class: le(["dialog-content__header", {
|
|
170
|
+
"dialog-content__header--divided": w.value
|
|
169
171
|
}])
|
|
170
172
|
}, [
|
|
171
173
|
v("div", De, [
|
|
172
|
-
e.$slots.icon ? (o(),
|
|
174
|
+
e.$slots.icon ? (o(), n("span", l({
|
|
173
175
|
key: 0,
|
|
174
176
|
class: "dialog-content__icon"
|
|
175
|
-
}, t(
|
|
177
|
+
}, t(s)("icon")), [
|
|
176
178
|
r(e.$slots, "icon", {}, void 0, !0)
|
|
177
|
-
], 16)) :
|
|
178
|
-
i.title?.text ? (o(),
|
|
179
|
+
], 16)) : a("", !0),
|
|
180
|
+
i.title?.text ? (o(), b(T(z.value), l({
|
|
179
181
|
key: 1,
|
|
180
182
|
id: f,
|
|
181
183
|
class: ["dialog-content__title", {
|
|
182
184
|
"dialog-content__title--with-icon": e.$slots.icon
|
|
183
185
|
}]
|
|
184
|
-
}, t(
|
|
186
|
+
}, t(s)("title")), {
|
|
185
187
|
default: y(() => [
|
|
186
|
-
|
|
188
|
+
ne(R(i.title.text), 1)
|
|
187
189
|
]),
|
|
188
190
|
_: 1
|
|
189
|
-
}, 16, ["class"])) : e.$slots.title ? (o(),
|
|
191
|
+
}, 16, ["class"])) : e.$slots.title ? (o(), b(T(z.value), l({
|
|
190
192
|
key: 2,
|
|
191
193
|
id: f,
|
|
192
194
|
class: ["dialog-content__title", {
|
|
193
195
|
"dialog-content__title--with-icon": e.$slots.icon
|
|
194
196
|
}]
|
|
195
|
-
}, t(
|
|
197
|
+
}, t(s)("title")), {
|
|
196
198
|
default: y(() => [
|
|
197
199
|
r(e.$slots, "title", {}, void 0, !0)
|
|
198
200
|
]),
|
|
199
201
|
_: 3
|
|
200
|
-
}, 16, ["class"])) : (o(),
|
|
202
|
+
}, 16, ["class"])) : (o(), b(ke, { key: 3 }, {
|
|
201
203
|
default: y(() => [
|
|
202
204
|
v("h2", { id: f }, "Диалоговое окно")
|
|
203
205
|
]),
|
|
204
206
|
_: 1
|
|
205
207
|
}))
|
|
206
208
|
]),
|
|
207
|
-
i.closeButton?.enabled ? (o(),
|
|
209
|
+
i.closeButton?.enabled ? (o(), n("button", l({
|
|
208
210
|
key: 0,
|
|
209
211
|
type: "button",
|
|
210
212
|
class: "dialog-content__close",
|
|
211
213
|
"aria-label": i.closeButton.label ?? "Закрыть"
|
|
212
|
-
}, t(
|
|
214
|
+
}, t(s)("close"), {
|
|
213
215
|
onClick: d[4] || (d[4] = (c) => u.value = !1)
|
|
214
216
|
}), [
|
|
215
|
-
|
|
216
|
-
], 16, Be)) :
|
|
217
|
+
ae(t(de), { size: 20 })
|
|
218
|
+
], 16, Be)) : a("", !0)
|
|
217
219
|
], 2),
|
|
218
|
-
|
|
219
|
-
v("div",
|
|
220
|
-
id:
|
|
220
|
+
w.value ? (o(), n("div", Ee)) : a("", !0),
|
|
221
|
+
v("div", l({
|
|
222
|
+
id: S,
|
|
221
223
|
class: "dialog-content__wrapper"
|
|
222
|
-
}, t(
|
|
224
|
+
}, t(s)("body")), [
|
|
223
225
|
r(e.$slots, "default", {}, void 0, !0)
|
|
224
226
|
], 16),
|
|
225
|
-
e.$slots.actions ? (o(),
|
|
227
|
+
e.$slots.actions ? (o(), n("div", l({
|
|
226
228
|
key: 1,
|
|
227
229
|
class: "dialog-content__actions"
|
|
228
|
-
}, t(
|
|
230
|
+
}, t(s)("actions")), [
|
|
229
231
|
r(e.$slots, "actions", {}, void 0, !0)
|
|
230
|
-
], 16)) :
|
|
232
|
+
], 16)) : a("", !0)
|
|
231
233
|
], 16, Oe)
|
|
232
234
|
], 4)
|
|
233
235
|
]),
|
|
234
236
|
_: 3
|
|
235
|
-
})) :
|
|
237
|
+
})) : a("", !0)
|
|
236
238
|
], 64));
|
|
237
239
|
}
|
|
238
240
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.drawer-trigger[data-v-
|
|
1
|
+
.drawer-trigger[data-v-4d3b35ae]{display:contents}.drawer-layer[data-v-4d3b35ae]{position:relative}.drawer-content[data-v-4d3b35ae]{box-sizing:border-box;background-color:var(--theme-neutral-0);z-index:1002;flex-direction:column;padding:24px;display:flex;position:fixed;box-shadow:0 2px 5px #3a3a3a40}.drawer-content--left[data-v-4d3b35ae]{border-radius:0 12px 12px 0;max-width:90vw;height:100%;top:0;bottom:0;left:0}.drawer-content--left[data-state=open][data-v-4d3b35ae]{animation:slideLeftIn var(--animation-duration) ease-in-out}.drawer-content--left[data-state=closed][data-v-4d3b35ae]{animation:slideLeftOut var(--animation-duration) ease-in-out}.drawer-content--right[data-v-4d3b35ae]{border-radius:12px 0 0 12px;max-width:90vw;height:100%;top:0;bottom:0;right:0}.drawer-content--right[data-state=open][data-v-4d3b35ae]{animation:slideRightIn var(--animation-duration) ease-in-out}.drawer-content--right[data-state=closed][data-v-4d3b35ae]{animation:slideRightOut var(--animation-duration) ease-in-out}.drawer-content--top[data-v-4d3b35ae]{border-radius:0 0 12px 12px;width:100%;max-height:90dvh;top:0;left:0;right:0}.drawer-content--top[data-state=open][data-v-4d3b35ae]{animation:slideTopIn var(--animation-duration) ease-in-out}.drawer-content--top[data-state=closed][data-v-4d3b35ae]{animation:slideTopOut var(--animation-duration) ease-in-out}.drawer-content--bottom[data-v-4d3b35ae]{border-radius:12px 12px 0 0;width:100%;max-height:90dvh;bottom:0;left:0;right:0}.drawer-content--bottom[data-state=open][data-v-4d3b35ae]{animation:slideBottomIn var(--animation-duration) ease-in-out}.drawer-content--bottom[data-state=closed][data-v-4d3b35ae]{animation:slideBottomOut var(--animation-duration) ease-in-out}.drawer-content__header[data-v-4d3b35ae]{flex:none;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;margin-bottom:16px;display:flex}.drawer-content__title[data-v-4d3b35ae]{flex:1 1 0;min-width:0;font-weight:500}.drawer-content__close[data-v-4d3b35ae]{background:0 0;border:none;justify-content:center;align-items:center;width:20px;min-width:20px;height:20px;margin-left:auto;padding:0;display:flex}.drawer-content__close[data-v-4d3b35ae]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.drawer-content__close svg[data-v-4d3b35ae]{width:20px;height:20px;color:var(--color-secondary-400);transition:color .3s ease-in-out}.drawer-content__close[data-v-4d3b35ae]:hover{cursor:pointer}.drawer-content__close:hover svg[data-v-4d3b35ae]{color:var(--color-secondary-500);transition:color .3s ease-in-out}.drawer-content__divider[data-v-4d3b35ae]{background-color:var(--theme-secondary-250);flex:none;width:100%;height:1px;margin-top:-4px;margin-bottom:12px}.drawer-content__wrapper[data-v-4d3b35ae]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);flex-direction:column;flex:1 1 0;justify-content:flex-start;align-items:flex-start;gap:12px;width:100%;min-height:0;display:flex;overflow-y:auto}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar{width:8px;height:0}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar-corner{background:0 0}.drawer-content__actions[data-v-4d3b35ae]{flex:none;justify-content:flex-end;align-items:center;gap:8px;width:100%;margin-top:32px;display:flex}.drawer-mobile[data-v-4d3b35ae]{flex-direction:column;gap:16px;width:100%;display:flex}.drawer-mobile__title[data-v-4d3b35ae]{color:var(--theme-neutral-text-title);font-size:1.125rem;font-weight:500;line-height:1.5}.drawer-mobile__divider[data-v-4d3b35ae]{background-color:var(--theme-secondary-250);width:100%;height:1px;margin-top:-4px}.drawer-mobile__content[data-v-4d3b35ae]{flex-direction:column;gap:12px;display:flex}.drawer-mobile__actions[data-v-4d3b35ae]{flex-direction:column-reverse;gap:8px;width:100%;display:flex}.drawer-mobile__actions[data-v-4d3b35ae] button{width:100%}
|
|
@@ -2,7 +2,7 @@ import './Drawer.css';
|
|
|
2
2
|
import o from "./Drawer.vue2.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import r from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
5
|
+
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-4d3b35ae"]]);
|
|
6
6
|
export {
|
|
7
7
|
m as default
|
|
8
8
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as W, useModel as Y, useId as _, computed as
|
|
1
|
+
import { defineComponent as W, useModel as Y, useId as _, computed as g, useTemplateRef as T, ref as ee, watch as te, onBeforeUnmount as oe, unref as t, openBlock as s, createBlock as w, createSlots as ie, withCtx as m, createElementVNode as d, createElementBlock as u, mergeProps as n, toDisplayString as A, createCommentVNode as c, renderSlot as f, normalizeProps as se, guardReactiveProps as ae, Fragment as ne, normalizeStyle as re, resolveDynamicComponent as N, createTextVNode as le, createVNode as de, mergeModels as x } from "vue";
|
|
2
2
|
import { X as ue } from "@lucide/vue";
|
|
3
3
|
import { breakpoints as ce } from "../../../utils/breakpoints.util.js";
|
|
4
4
|
import { onClickOutside as fe } from "../../../utils/onClickOutside.util.js";
|
|
@@ -8,20 +8,20 @@ import pe from "../BottomSheet/BottomSheet.vue.js";
|
|
|
8
8
|
import { ANIMATION_DURATION_MS as K } from "../shared/animation.const.js";
|
|
9
9
|
import ye from "../shared/Portal.vue.js";
|
|
10
10
|
import { useDelayedVisibility as be } from "../shared/useDelayedVisibility.util.js";
|
|
11
|
-
import { useLayerZIndex as
|
|
12
|
-
import { useTestId as
|
|
11
|
+
import { useLayerZIndex as ge } from "../shared/useLayerZIndex.util.js";
|
|
12
|
+
import { useTestId as we } from "../shared/useTestId.util.js";
|
|
13
13
|
import { useTriggerAria as ke } from "../shared/useTriggerAria.util.js";
|
|
14
14
|
import he from "../shared/VisuallyHidden.vue.js";
|
|
15
15
|
const $e = { class: "drawer-mobile" }, Ie = {
|
|
16
16
|
key: 1,
|
|
17
17
|
class: "drawer-mobile__divider"
|
|
18
|
-
}, Ce = ["data-state"], Oe = ["aria-describedby", "data-state"], Pe = { class: "drawer-content__header" }, De = ["aria-label"],
|
|
18
|
+
}, Ce = ["data-state"], Oe = ["aria-describedby", "data-state"], Pe = { class: "drawer-content__header" }, De = ["aria-label"], Ee = {
|
|
19
19
|
key: 0,
|
|
20
20
|
class: "drawer-content__divider"
|
|
21
21
|
}, Ue = /* @__PURE__ */ W({
|
|
22
22
|
inheritAttrs: !1,
|
|
23
23
|
__name: "Drawer",
|
|
24
|
-
props: /* @__PURE__ */
|
|
24
|
+
props: /* @__PURE__ */ x({
|
|
25
25
|
position: { default: "right" },
|
|
26
26
|
title: { default: void 0 },
|
|
27
27
|
closeButton: { default: () => ({ enabled: !0 }) },
|
|
@@ -37,25 +37,25 @@ const $e = { class: "drawer-mobile" }, Ie = {
|
|
|
37
37
|
open: { type: Boolean, default: !1 },
|
|
38
38
|
openModifiers: {}
|
|
39
39
|
}),
|
|
40
|
-
emits: /* @__PURE__ */
|
|
40
|
+
emits: /* @__PURE__ */ x(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
|
|
41
41
|
setup(o, { expose: V, emit: q }) {
|
|
42
|
-
const i = o,
|
|
42
|
+
const i = o, k = q, r = Y(o, "open"), E = ce.smaller(i.breakpointMobile), h = _(), v = `drawer-title-${h}`, $ = `drawer-content-${h}`, S = `drawer-body-${h}`, a = we(() => i.testId), L = g(() => ({
|
|
43
43
|
"aria-haspopup": "dialog",
|
|
44
44
|
"aria-expanded": r.value,
|
|
45
|
-
"aria-controls": r.value ?
|
|
46
|
-
})),
|
|
45
|
+
"aria-controls": r.value ? $ : void 0
|
|
46
|
+
})), B = g(() => i.title?.as ?? "h2"), F = g(
|
|
47
47
|
() => i.position === "left" || i.position === "right" ? { width: `${i.width}px` } : { height: `${i.height}px` }
|
|
48
|
-
), z = T("triggerRef"),
|
|
48
|
+
), z = T("triggerRef"), I = T("contentRef");
|
|
49
49
|
ke({
|
|
50
50
|
host: () => z.value,
|
|
51
51
|
isOpen: () => r.value,
|
|
52
|
-
contentId: () =>
|
|
52
|
+
contentId: () => $,
|
|
53
53
|
hasPopup: () => "dialog"
|
|
54
54
|
});
|
|
55
|
-
const { lockScroll: U, unlockScroll: Z } = ve(),
|
|
56
|
-
() => i.zIndex === "auto" ?
|
|
55
|
+
const { lockScroll: U, unlockScroll: Z } = ve(), C = me(() => I.value), p = ge(), H = g(
|
|
56
|
+
() => i.zIndex === "auto" ? p.zIndex.value : i.zIndex
|
|
57
57
|
), O = ee(!1);
|
|
58
|
-
async function
|
|
58
|
+
async function y(e) {
|
|
59
59
|
if (!i.beforeClose) {
|
|
60
60
|
r.value = !1;
|
|
61
61
|
return;
|
|
@@ -70,46 +70,48 @@ const $e = { class: "drawer-mobile" }, Ie = {
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
function P(e) {
|
|
73
|
-
e.key === "Escape" && (
|
|
73
|
+
e.key === "Escape" && (k("escapeKeyDown", e), e.defaultPrevented || y("escapeKey"));
|
|
74
74
|
}
|
|
75
75
|
function X(e) {
|
|
76
|
-
|
|
76
|
+
k("pointerDownOutside", e), !i.disableOutsidePointerEvents && !e.defaultPrevented && y("outsidePointer");
|
|
77
77
|
}
|
|
78
78
|
function R(e, l) {
|
|
79
|
-
e.defaultPrevented || !i.beforeClose || (e.preventDefault(),
|
|
79
|
+
e.defaultPrevented || !i.beforeClose || (e.preventDefault(), y(l));
|
|
80
80
|
}
|
|
81
81
|
function j(e) {
|
|
82
|
-
|
|
82
|
+
k("escapeKeyDown", e), R(e, "escapeKey");
|
|
83
83
|
}
|
|
84
84
|
function G(e) {
|
|
85
|
-
|
|
85
|
+
k("pointerDownOutside", e), !i.disableOutsidePointerEvents && R(e, "outsidePointer");
|
|
86
86
|
}
|
|
87
|
-
const J =
|
|
87
|
+
const J = g(() => r.value && !E.value), { visible: Q, dataState: M } = be(
|
|
88
88
|
J,
|
|
89
89
|
K,
|
|
90
90
|
{
|
|
91
91
|
onOpen: () => {
|
|
92
|
-
|
|
92
|
+
p.acquire(), U(), C.activate({ focusDelayMs: K }), document.addEventListener("keydown", P);
|
|
93
93
|
},
|
|
94
94
|
onCloseStart: () => {
|
|
95
|
-
|
|
95
|
+
C.deactivate(), document.removeEventListener("keydown", P);
|
|
96
96
|
},
|
|
97
97
|
onCloseEnd: () => {
|
|
98
|
-
Z(),
|
|
98
|
+
Z(), p.release();
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
);
|
|
102
102
|
let D;
|
|
103
|
-
return te(
|
|
104
|
-
D?.(), D = e ? fe(e, X
|
|
103
|
+
return te(I, (e) => {
|
|
104
|
+
p.registerElement(e), D?.(), D = e ? fe(e, X, {
|
|
105
|
+
ignore: () => p.elementsAbove()
|
|
106
|
+
}) : void 0;
|
|
105
107
|
}), oe(() => {
|
|
106
|
-
D?.(), document.removeEventListener("keydown", P),
|
|
108
|
+
D?.(), document.removeEventListener("keydown", P), C.deactivate();
|
|
107
109
|
}), V({
|
|
108
|
-
requestClose: (e = "programmatic") =>
|
|
109
|
-
}), (e, l) => t(
|
|
110
|
+
requestClose: (e = "programmatic") => y(e)
|
|
111
|
+
}), (e, l) => t(E) ? (s(), w(t(pe), {
|
|
110
112
|
key: 0,
|
|
111
113
|
open: r.value,
|
|
112
|
-
"onUpdate:open": l[0] || (l[0] = (
|
|
114
|
+
"onUpdate:open": l[0] || (l[0] = (b) => r.value = b),
|
|
113
115
|
"z-index": o.zIndex,
|
|
114
116
|
"disable-outside-pointer-events": o.disableOutsidePointerEvents,
|
|
115
117
|
"disable-swipe-to-close": !!o.beforeClose,
|
|
@@ -124,7 +126,7 @@ const $e = { class: "drawer-mobile" }, Ie = {
|
|
|
124
126
|
key: 0,
|
|
125
127
|
id: v,
|
|
126
128
|
class: "drawer-mobile__title"
|
|
127
|
-
}, t(a)("title")),
|
|
129
|
+
}, t(a)("title")), A(o.title.text), 17)) : c("", !0),
|
|
128
130
|
o.divider ? (s(), u("div", Ie)) : c("", !0),
|
|
129
131
|
d("div", n({ class: "drawer-mobile__content" }, t(a)("body")), [
|
|
130
132
|
f(e.$slots, "title", {}, void 0, !0),
|
|
@@ -142,8 +144,8 @@ const $e = { class: "drawer-mobile" }, Ie = {
|
|
|
142
144
|
}, [
|
|
143
145
|
e.$slots.trigger ? {
|
|
144
146
|
name: "trigger",
|
|
145
|
-
fn: m((
|
|
146
|
-
f(e.$slots, "trigger", se(ae(
|
|
147
|
+
fn: m((b) => [
|
|
148
|
+
f(e.$slots, "trigger", se(ae(b)), void 0, !0)
|
|
147
149
|
]),
|
|
148
150
|
key: "0"
|
|
149
151
|
} : void 0
|
|
@@ -154,7 +156,7 @@ const $e = { class: "drawer-mobile" }, Ie = {
|
|
|
154
156
|
ref: z,
|
|
155
157
|
class: "drawer-trigger"
|
|
156
158
|
}, t(a)("trigger"), {
|
|
157
|
-
onClick: l[1] || (l[1] = (
|
|
159
|
+
onClick: l[1] || (l[1] = (b) => r.value = !0)
|
|
158
160
|
}), [
|
|
159
161
|
f(e.$slots, "trigger", { props: L.value }, void 0, !0)
|
|
160
162
|
], 16)) : c("", !0),
|
|
@@ -169,28 +171,28 @@ const $e = { class: "drawer-mobile" }, Ie = {
|
|
|
169
171
|
"data-state": t(M)
|
|
170
172
|
}, t(a)("overlay")), null, 16, Ce),
|
|
171
173
|
d("div", n({
|
|
172
|
-
id:
|
|
174
|
+
id: $,
|
|
173
175
|
ref_key: "contentRef",
|
|
174
|
-
ref:
|
|
176
|
+
ref: I,
|
|
175
177
|
role: "dialog",
|
|
176
178
|
"aria-modal": "true",
|
|
177
179
|
"aria-labelledby": v,
|
|
178
|
-
"aria-describedby": e.$slots.default ?
|
|
180
|
+
"aria-describedby": e.$slots.default ? S : void 0,
|
|
179
181
|
class: ["drawer-content", `drawer-content--${o.position}`],
|
|
180
182
|
"data-state": t(M),
|
|
181
183
|
style: F.value
|
|
182
184
|
}, { ...e.$attrs, ...t(a)("content") }), [
|
|
183
185
|
d("div", Pe, [
|
|
184
|
-
o.title?.text ? (s(), w(
|
|
186
|
+
o.title?.text ? (s(), w(N(B.value), n({
|
|
185
187
|
key: 0,
|
|
186
188
|
id: v,
|
|
187
189
|
class: "drawer-content__title"
|
|
188
190
|
}, t(a)("title")), {
|
|
189
191
|
default: m(() => [
|
|
190
|
-
le(
|
|
192
|
+
le(A(o.title.text), 1)
|
|
191
193
|
]),
|
|
192
194
|
_: 1
|
|
193
|
-
}, 16)) : e.$slots.title ? (s(), w(
|
|
195
|
+
}, 16)) : e.$slots.title ? (s(), w(N(B.value), n({
|
|
194
196
|
key: 1,
|
|
195
197
|
id: v,
|
|
196
198
|
class: "drawer-content__title"
|
|
@@ -211,14 +213,14 @@ const $e = { class: "drawer-mobile" }, Ie = {
|
|
|
211
213
|
class: "drawer-content__close",
|
|
212
214
|
"aria-label": o.closeButton.label ?? "Закрыть"
|
|
213
215
|
}, t(a)("close"), {
|
|
214
|
-
onClick: l[2] || (l[2] = (
|
|
216
|
+
onClick: l[2] || (l[2] = (b) => y("closeButton"))
|
|
215
217
|
}), [
|
|
216
218
|
de(t(ue), { size: 20 })
|
|
217
219
|
], 16, De)) : c("", !0)
|
|
218
220
|
]),
|
|
219
|
-
o.divider ? (s(), u("div",
|
|
221
|
+
o.divider ? (s(), u("div", Ee)) : c("", !0),
|
|
220
222
|
d("div", n({
|
|
221
|
-
id:
|
|
223
|
+
id: S,
|
|
222
224
|
class: "drawer-content__wrapper"
|
|
223
225
|
}, t(a)("body")), [
|
|
224
226
|
f(e.$slots, "default", {}, void 0, !0)
|
|
@@ -17,5 +17,15 @@ export interface UseLayerZIndexReturn {
|
|
|
17
17
|
zIndex: Ref<number | undefined>;
|
|
18
18
|
acquire: () => void;
|
|
19
19
|
release: () => void;
|
|
20
|
+
/** Элемент контента слоя — источник для чужого `elementsAbove()`. */
|
|
21
|
+
registerElement: (el: HTMLElement | null) => void;
|
|
22
|
+
/**
|
|
23
|
+
* DOM-элементы слоёв, открытых позже текущего (значит, лежащих выше по
|
|
24
|
+
* z-index) — например, ConfirmDialog поверх BottomSheet. Передавать в
|
|
25
|
+
* `onClickOutside` как `ignore`: клик по вложенному слою не должен
|
|
26
|
+
* считаться «кликом вне» текущего — иначе закрытие вложенного окна
|
|
27
|
+
* утаскивало бы за собой и родителя.
|
|
28
|
+
*/
|
|
29
|
+
elementsAbove: () => HTMLElement[];
|
|
20
30
|
}
|
|
21
31
|
export declare function useLayerZIndex(): UseLayerZIndexReturn;
|
|
@@ -1,18 +1,30 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
const
|
|
3
|
-
let
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { ref as a, onBeforeUnmount as d } from "vue";
|
|
2
|
+
const v = 1e3, x = 10;
|
|
3
|
+
let i = 0, u = 0;
|
|
4
|
+
const o = [];
|
|
5
|
+
function m() {
|
|
6
|
+
const t = a();
|
|
7
|
+
let e;
|
|
8
|
+
function f() {
|
|
9
|
+
t.value === void 0 && (i++, u++, t.value = v + u * x, e = { zIndex: t.value, el: null }, o.push(e));
|
|
8
10
|
}
|
|
9
|
-
function
|
|
10
|
-
|
|
11
|
+
function l() {
|
|
12
|
+
if (t.value !== void 0 && (t.value = void 0, i = Math.max(0, i - 1), i === 0 && (u = 0), e)) {
|
|
13
|
+
const n = o.indexOf(e);
|
|
14
|
+
n !== -1 && o.splice(n, 1), e = void 0;
|
|
15
|
+
}
|
|
11
16
|
}
|
|
12
|
-
|
|
17
|
+
function s(n) {
|
|
18
|
+
e && (e.el = n);
|
|
19
|
+
}
|
|
20
|
+
function c() {
|
|
21
|
+
const n = e;
|
|
22
|
+
return n ? o.filter((r) => r !== n && r.zIndex > n.zIndex).map((r) => r.el).filter((r) => r !== null) : [];
|
|
23
|
+
}
|
|
24
|
+
return d(l), { zIndex: t, acquire: f, release: l, registerElement: s, elementsAbove: c };
|
|
13
25
|
}
|
|
14
26
|
export {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
27
|
+
v as LAYER_BASE_Z_INDEX,
|
|
28
|
+
x as LAYER_Z_INDEX_STEP,
|
|
29
|
+
m as useLayerZIndex
|
|
18
30
|
};
|