@ac-design/design-system 2.1.1 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export interface Props {
|
|
2
|
-
/** Heading of the dialog. */
|
|
2
|
+
/** Heading of the dialog. With the `header` slot it is only the dialog's accessible name. */
|
|
3
3
|
title?: string;
|
|
4
4
|
/** Optional line under the title. */
|
|
5
5
|
description?: string;
|
|
@@ -13,6 +13,12 @@ export interface Props {
|
|
|
13
13
|
closeOnOutsideClick?: boolean;
|
|
14
14
|
/** Hides the footer bar. */
|
|
15
15
|
hideFooter?: boolean;
|
|
16
|
+
/** cloud-ui's BaseModal widths, which win over `size`: `xsm` 384px, `sm` 448px, `md` 576px, `lg` 672px, `xl` 896px, `xxl` 1152px. */
|
|
17
|
+
maxWidth?: "xsm" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
18
|
+
/** Shows the close button. Off keeps Escape and the backdrop working, as cloud-ui's `show-close-button`; use `closable` to block closing. */
|
|
19
|
+
showCloseButton?: boolean;
|
|
20
|
+
/** Classes added to the body, e.g. `space-y-4`, or `overflow-visible` for a popover that must spill out. cloud-ui's `body-class`. */
|
|
21
|
+
bodyClass?: string;
|
|
16
22
|
}
|
|
17
23
|
type __VLS_Props = Props;
|
|
18
24
|
type __VLS_Slots = {
|
|
@@ -43,9 +49,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
43
49
|
title: string;
|
|
44
50
|
description: string;
|
|
45
51
|
size: "xsmall" | "small" | "normal" | "medium" | "large" | "xlarge" | "full";
|
|
52
|
+
bodyClass: string;
|
|
46
53
|
closable: boolean;
|
|
47
54
|
closeOnOutsideClick: boolean;
|
|
48
55
|
hideFooter: boolean;
|
|
56
|
+
maxWidth: "xsm" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
57
|
+
showCloseButton: boolean;
|
|
49
58
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
50
59
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
51
60
|
declare const _default: typeof __VLS_export;
|
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import { Fragment as e, Teleport as t, Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, onBeforeUnmount as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, useModel as y, watch as b, withCtx as x, withModifiers as S } from "vue";
|
|
2
2
|
import { X as C } from "@lucide/vue";
|
|
3
3
|
//#region src/lib/components/AcModal.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
-
var w = [
|
|
4
|
+
var w = [
|
|
5
|
+
"aria-labelledby",
|
|
6
|
+
"aria-label",
|
|
7
|
+
"aria-describedby"
|
|
8
|
+
], T = {
|
|
5
9
|
key: 0,
|
|
6
10
|
class: "mb-4 shrink-0"
|
|
7
11
|
}, E = ["id"], D = ["id"], O = {
|
|
8
|
-
"data-modal-body": "",
|
|
9
|
-
class: "ac-scrollbar -m-1 min-h-0 flex-1 p-1"
|
|
10
|
-
}, k = {
|
|
11
12
|
key: 1,
|
|
12
13
|
class: "mt-6 flex shrink-0 flex-wrap items-center justify-between gap-3"
|
|
13
|
-
},
|
|
14
|
-
"data-modal-body": "",
|
|
15
|
-
class: "ac-scrollbar min-h-0 flex-1 p-6"
|
|
16
|
-
}, R = {
|
|
14
|
+
}, k = { class: "flex min-w-0 items-center gap-2" }, A = { class: "ml-auto flex items-center gap-3" }, j = { class: "flex shrink-0 items-start gap-4 border-b border-border p-6" }, M = { class: "min-w-0 flex-1" }, N = ["id"], P = ["id"], F = { class: "flex h-7 shrink-0 items-center gap-3" }, I = {
|
|
17
15
|
key: 0,
|
|
18
16
|
class: "flex shrink-0 flex-wrap items-center justify-between gap-3 rounded-b-16 border-t border-border p-6"
|
|
19
|
-
},
|
|
17
|
+
}, L = { class: "flex min-w-0 items-center gap-2" }, R = { class: "ml-auto flex items-center gap-3" }, z = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", B = /*@__PURE__*/ c({
|
|
20
18
|
__name: "AcModal",
|
|
21
19
|
props: /*@__PURE__*/ l({
|
|
22
20
|
title: { default: "" },
|
|
@@ -34,7 +32,13 @@ var w = ["aria-labelledby", "aria-describedby"], T = {
|
|
|
34
32
|
hideFooter: {
|
|
35
33
|
type: Boolean,
|
|
36
34
|
default: !1
|
|
37
|
-
}
|
|
35
|
+
},
|
|
36
|
+
maxWidth: { default: void 0 },
|
|
37
|
+
showCloseButton: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
default: !0
|
|
40
|
+
},
|
|
41
|
+
bodyClass: { default: "" }
|
|
38
42
|
}, {
|
|
39
43
|
open: {
|
|
40
44
|
type: Boolean,
|
|
@@ -44,7 +48,7 @@ var w = ["aria-labelledby", "aria-describedby"], T = {
|
|
|
44
48
|
}),
|
|
45
49
|
emits: /*@__PURE__*/ l(["close"], ["update:open"]),
|
|
46
50
|
setup(c, { emit: l }) {
|
|
47
|
-
let
|
|
51
|
+
let B = c, V = y(c, "open"), H = l, U = z.split(", ").map((e) => `[data-modal-body] ${e}`).join(", "), W = {
|
|
48
52
|
xsmall: "max-w-sm",
|
|
49
53
|
small: "max-w-md",
|
|
50
54
|
normal: "max-w-xl",
|
|
@@ -52,16 +56,23 @@ var w = ["aria-labelledby", "aria-describedby"], T = {
|
|
|
52
56
|
large: "max-w-250",
|
|
53
57
|
xlarge: "max-w-6xl",
|
|
54
58
|
full: "max-w-[calc(100vw-64px)]"
|
|
55
|
-
},
|
|
59
|
+
}, G = {
|
|
60
|
+
xsm: "max-w-sm",
|
|
61
|
+
sm: "max-w-md",
|
|
62
|
+
md: "max-w-xl",
|
|
63
|
+
lg: "max-w-2xl",
|
|
64
|
+
xl: "max-w-4xl",
|
|
65
|
+
xxl: "max-w-6xl"
|
|
66
|
+
}, K = v(), q = m(null), J = null, Y = !1;
|
|
56
67
|
function X() {
|
|
57
|
-
|
|
68
|
+
B.closable && (V.value = !1, H("close"));
|
|
58
69
|
}
|
|
59
70
|
function Z(e) {
|
|
60
71
|
if (e.key === "Escape") {
|
|
61
72
|
if (e.defaultPrevented) return;
|
|
62
73
|
e.stopPropagation(), X();
|
|
63
|
-
} else if (e.key === "Tab" &&
|
|
64
|
-
let t = [...
|
|
74
|
+
} else if (e.key === "Tab" && q.value) {
|
|
75
|
+
let t = [...q.value.querySelectorAll(z)].filter((e) => e.offsetParent !== null);
|
|
65
76
|
if (!t.length) return;
|
|
66
77
|
let n = t[0], r = t[t.length - 1];
|
|
67
78
|
e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
|
|
@@ -74,21 +85,21 @@ var w = ["aria-labelledby", "aria-describedby"], T = {
|
|
|
74
85
|
t.style.overflow = "hidden", e > 0 && (t.style.paddingRight = `${e}px`);
|
|
75
86
|
} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
|
|
76
87
|
}
|
|
77
|
-
return b(
|
|
88
|
+
return b(V, async (e, t) => {
|
|
78
89
|
if (e) {
|
|
79
|
-
|
|
80
|
-
let e =
|
|
81
|
-
((e && (e.matches(
|
|
82
|
-
} else t && (Q(!1),
|
|
90
|
+
J = document.activeElement, Y = !0, Q(!0), await u();
|
|
91
|
+
let e = q.value?.querySelector("[autofocus]");
|
|
92
|
+
((e && (e.matches(z) ? e : e.querySelector(z))) ?? q.value?.querySelector(U) ?? q.value)?.focus();
|
|
93
|
+
} else t && Y && (Y = !1, Q(!1), J?.focus?.());
|
|
83
94
|
}, { immediate: !0 }), f(() => {
|
|
84
|
-
|
|
95
|
+
Y && (Y = !1, Q(!1), J?.isConnected && J.focus());
|
|
85
96
|
}), (l, u) => (p(), r(t, { to: "body" }, [s(n, {
|
|
86
97
|
"enter-active-class": "transition-opacity duration-200 ease-out",
|
|
87
98
|
"enter-from-class": "opacity-0",
|
|
88
99
|
"leave-active-class": "transition-opacity duration-150 ease-in",
|
|
89
100
|
"leave-to-class": "opacity-0"
|
|
90
101
|
}, {
|
|
91
|
-
default: x(() => [
|
|
102
|
+
default: x(() => [V.value ? (p(), a("div", {
|
|
92
103
|
key: 0,
|
|
93
104
|
class: d(["fixed inset-0 z-[80] overflow-y-auto", c.variant === "plain" ? "bg-black/50" : "bg-black/80"]),
|
|
94
105
|
"data-ac-ds": "",
|
|
@@ -100,33 +111,37 @@ var w = ["aria-labelledby", "aria-describedby"], T = {
|
|
|
100
111
|
onMousedown: u[0] ||= S((e) => c.closeOnOutsideClick && X(), ["self"])
|
|
101
112
|
}, [o("div", {
|
|
102
113
|
ref_key: "panel",
|
|
103
|
-
ref:
|
|
114
|
+
ref: q,
|
|
104
115
|
role: "dialog",
|
|
105
116
|
"aria-modal": "true",
|
|
106
|
-
"aria-labelledby": c.title ? `${_(
|
|
107
|
-
"aria-
|
|
117
|
+
"aria-labelledby": c.title && !l.$slots.header ? `${_(K)}-title` : void 0,
|
|
118
|
+
"aria-label": c.title && l.$slots.header ? c.title : void 0,
|
|
119
|
+
"aria-describedby": c.description ? `${_(K)}-desc` : void 0,
|
|
108
120
|
tabindex: "-1",
|
|
109
|
-
class: d(["relative flex max-h-[calc(100dvh-32px)] w-full flex-col rounded-16 border border-border bg-surface shadow-xl outline-none sm:max-h-[calc(100dvh-64px)]", [
|
|
121
|
+
class: d(["relative flex max-h-[calc(100dvh-32px)] w-full flex-col rounded-16 border border-border bg-surface shadow-xl outline-none sm:max-h-[calc(100dvh-64px)]", [c.maxWidth ? G[c.maxWidth] : W[c.size], c.variant === "plain" && "p-6"]])
|
|
110
122
|
}, [c.variant === "plain" ? (p(), a(e, { key: 0 }, [
|
|
111
123
|
c.title || c.description || l.$slots.header ? (p(), a("header", T, [h(l.$slots, "header", {}, () => [o("h2", {
|
|
112
|
-
id: `${_(
|
|
124
|
+
id: `${_(K)}-title`,
|
|
113
125
|
class: "text-xl leading-7 font-semibold text-heading"
|
|
114
126
|
}, g(c.title), 9, E), c.description ? (p(), a("p", {
|
|
115
127
|
key: 0,
|
|
116
|
-
id: `${_(
|
|
128
|
+
id: `${_(K)}-desc`,
|
|
117
129
|
class: "mt-1 text-base text-muted"
|
|
118
130
|
}, g(c.description), 9, D)) : i("", !0)])])) : i("", !0),
|
|
119
|
-
o("div",
|
|
120
|
-
|
|
131
|
+
o("div", {
|
|
132
|
+
"data-modal-body": "",
|
|
133
|
+
class: d(["ac-scrollbar -m-1 min-h-0 flex-1 p-1", c.bodyClass])
|
|
134
|
+
}, [h(l.$slots, "default")], 2),
|
|
135
|
+
!c.hideFooter && (l.$slots.footer || l.$slots["footer-left"]) ? (p(), a("footer", O, [o("div", k, [h(l.$slots, "footer-left")]), o("div", A, [h(l.$slots, "footer")])])) : i("", !0)
|
|
121
136
|
], 64)) : (p(), a(e, { key: 1 }, [
|
|
122
|
-
o("header",
|
|
123
|
-
id: `${_(
|
|
137
|
+
o("header", j, [o("div", M, [h(l.$slots, "header", {}, () => [o("h2", {
|
|
138
|
+
id: `${_(K)}-title`,
|
|
124
139
|
class: "text-xl leading-7 font-semibold text-heading"
|
|
125
|
-
}, g(c.title), 9,
|
|
140
|
+
}, g(c.title), 9, N), c.description ? (p(), a("p", {
|
|
126
141
|
key: 0,
|
|
127
|
-
id: `${_(
|
|
142
|
+
id: `${_(K)}-desc`,
|
|
128
143
|
class: "mt-1 text-base text-muted"
|
|
129
|
-
}, g(c.description), 9,
|
|
144
|
+
}, g(c.description), 9, P)) : i("", !0)])]), o("div", F, [h(l.$slots, "header-actions"), c.closable && c.showCloseButton ? (p(), a("button", {
|
|
130
145
|
key: 0,
|
|
131
146
|
type: "button",
|
|
132
147
|
class: "-m-0.5 inline-flex cursor-pointer items-center justify-center rounded-6 p-0.5 text-muted transition-colors hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
|
|
@@ -138,12 +153,15 @@ var w = ["aria-labelledby", "aria-describedby"], T = {
|
|
|
138
153
|
class: "size-5",
|
|
139
154
|
"aria-hidden": "true"
|
|
140
155
|
})])) : i("", !0)])]),
|
|
141
|
-
o("div",
|
|
142
|
-
|
|
156
|
+
o("div", {
|
|
157
|
+
"data-modal-body": "",
|
|
158
|
+
class: d(["ac-scrollbar min-h-0 flex-1 p-6", c.bodyClass])
|
|
159
|
+
}, [h(l.$slots, "default")], 2),
|
|
160
|
+
!c.hideFooter && (l.$slots.footer || l.$slots["footer-left"]) ? (p(), a("footer", I, [o("div", L, [h(l.$slots, "footer-left")]), o("div", R, [h(l.$slots, "footer")])])) : i("", !0)
|
|
143
161
|
], 64))], 10, w)], 32)], 34)) : i("", !0)]),
|
|
144
162
|
_: 3
|
|
145
163
|
})]));
|
|
146
164
|
}
|
|
147
165
|
});
|
|
148
166
|
//#endregion
|
|
149
|
-
export {
|
|
167
|
+
export { B as default };
|
|
@@ -30,13 +30,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props,
|
|
|
30
30
|
disabled: boolean;
|
|
31
31
|
tone: "neutral" | "info" | "success" | "warning" | "danger";
|
|
32
32
|
align: "start" | "center" | "end";
|
|
33
|
+
maxWidth: string;
|
|
33
34
|
content: string;
|
|
34
35
|
placement: Side;
|
|
35
36
|
shortcut: string[];
|
|
36
37
|
delay: number;
|
|
37
38
|
interactive: boolean;
|
|
38
39
|
overflowOnly: boolean;
|
|
39
|
-
maxWidth: string;
|
|
40
40
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
41
41
|
/** The trigger: a button, icon button, link or any focusable element. It gets `aria-describedby`. */
|
|
42
42
|
default?: () => unknown;
|