@ac-design/design-system 2.9.0 → 2.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,10 +3,10 @@ import { copyText as t } from "../composables/copyText.js";
|
|
|
3
3
|
import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, withCtx as x, withModifiers as S } from "vue";
|
|
4
4
|
import { Check as C, Copy as w } from "@lucide/vue";
|
|
5
5
|
//#region src/lib/components/AcCopyButton.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
-
var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono break-all" }, O = { class: "block text-on-tooltip/70" }, k = {
|
|
6
|
+
var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono break-all text-balance" }, O = { class: "block text-on-tooltip/70" }, k = {
|
|
7
7
|
class: "sr-only",
|
|
8
8
|
role: "status"
|
|
9
|
-
}, A = 1500, j = /*@__PURE__*/ u({
|
|
9
|
+
}, A = 1500, j = "calc(360px * var(--ac-scale, 1))", M = /*@__PURE__*/ u({
|
|
10
10
|
inheritAttrs: !1,
|
|
11
11
|
__name: "AcCopyButton",
|
|
12
12
|
props: {
|
|
@@ -25,68 +25,69 @@ var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono
|
|
|
25
25
|
variant: { default: "plain" }
|
|
26
26
|
},
|
|
27
27
|
emits: ["copy"],
|
|
28
|
-
setup(u, { expose:
|
|
29
|
-
let
|
|
30
|
-
class:
|
|
31
|
-
style:
|
|
32
|
-
})),
|
|
33
|
-
let { class: e, style: t, ...n } =
|
|
28
|
+
setup(u, { expose: M, emit: N }) {
|
|
29
|
+
let P = u, F = N, I = b(), L = g(null), R = g(null), z = g("idle"), B = g(!1), V, H = r(() => ({
|
|
30
|
+
class: I.class,
|
|
31
|
+
style: I.style
|
|
32
|
+
})), U = r(() => {
|
|
33
|
+
let { class: e, style: t, ...n } = I;
|
|
34
34
|
return n;
|
|
35
|
-
}),
|
|
36
|
-
function
|
|
37
|
-
let e =
|
|
38
|
-
|
|
35
|
+
}), W = r(() => P.display || P.value), G = r(() => P.label ? ` ${P.label}` : ""), K = r(() => P.label || "value"), q = r(() => !P.iconOnly && (B.value || !!P.display && P.display !== P.value)), J = r(() => P.iconOnly ? P.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : P.variant === "chip" ? P.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : P.size === "small" ? "gap-1 rounded-4 text-xs" : P.size === "normal" ? "gap-1.5 rounded-6 text-base" : "gap-1 rounded-4"), Y = r(() => P.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : P.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : P.size ? "text-heading" : ""), X = r(() => P.iconOnly && P.size !== "small" ? "size-4" : "size-3.5"), Z = r(() => P.iconOnly ? "" : P.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
|
|
36
|
+
function Q() {
|
|
37
|
+
let e = R.value;
|
|
38
|
+
B.value = !!e && e.scrollWidth > e.clientWidth + 1;
|
|
39
39
|
}
|
|
40
|
-
async function
|
|
41
|
-
clearTimeout(
|
|
40
|
+
async function $() {
|
|
41
|
+
clearTimeout(V);
|
|
42
42
|
try {
|
|
43
|
-
await t(
|
|
43
|
+
await t(P.value), z.value = "copied", F("copy", P.value);
|
|
44
44
|
} catch {
|
|
45
|
-
|
|
45
|
+
z.value = "failed";
|
|
46
46
|
}
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
function $() {
|
|
50
|
-
let e = I.value?.closest("[data-testid=\"ac-tooltip\"]");
|
|
51
|
-
e && I.value?.matches(":hover") && e.dispatchEvent(new PointerEvent("pointerenter", { pointerType: "mouse" }));
|
|
47
|
+
V = setTimeout(() => z.value = "idle", A), await f(), ee();
|
|
52
48
|
}
|
|
53
49
|
function ee() {
|
|
54
|
-
|
|
50
|
+
let e = L.value?.closest("[data-testid=\"ac-tooltip\"]");
|
|
51
|
+
e && L.value?.matches(":hover") && e.dispatchEvent(new PointerEvent("pointerenter", { pointerType: "mouse" }));
|
|
52
|
+
}
|
|
53
|
+
function te() {
|
|
54
|
+
L.value?.focus();
|
|
55
55
|
}
|
|
56
|
-
return m(() => clearTimeout(
|
|
56
|
+
return m(() => clearTimeout(V)), M({ focus: te }), (t, r) => (h(), o("span", d({ class: "inline-flex max-w-full min-w-0 align-middle" }, H.value, {
|
|
57
57
|
"data-ac-ds": "",
|
|
58
58
|
"data-testid": "ac-copy-button"
|
|
59
59
|
}), [l(e, {
|
|
60
60
|
class: "min-w-0 flex-auto",
|
|
61
|
-
delay:
|
|
61
|
+
delay: z.value === "idle" ? 300 : 0,
|
|
62
|
+
"max-width": z.value === "idle" && q.value ? j : void 0
|
|
62
63
|
}, {
|
|
63
|
-
content: x(() => [
|
|
64
|
+
content: x(() => [z.value === "copied" ? (h(), o(n, { key: 0 }, [c("Copied" + v(G.value), 1)], 64)) : z.value === "failed" ? (h(), o(n, { key: 1 }, [c("Couldn't copy" + v(G.value) + ". The browser blocked the clipboard.", 1)], 64)) : q.value ? (h(), o(n, { key: 2 }, [s("span", D, v(u.value), 1), s("span", O, "Click to copy" + v(G.value), 1)], 64)) : (h(), o(n, { key: 3 }, [c("Copy" + v(G.value), 1)], 64))]),
|
|
64
65
|
default: x(() => [s("button", d({
|
|
65
66
|
ref_key: "button",
|
|
66
|
-
ref:
|
|
67
|
+
ref: L,
|
|
67
68
|
type: "button",
|
|
68
|
-
class: ["group inline-flex max-w-full min-w-0 flex-auto cursor-pointer items-center text-left transition-[color,background-color,border-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", [
|
|
69
|
-
"aria-label": u.iconOnly ? `Copy ${
|
|
70
|
-
},
|
|
71
|
-
onClick: S(
|
|
72
|
-
onPointerenter:
|
|
73
|
-
onFocus:
|
|
74
|
-
}), [u.iconOnly ? a("", !0) : (h(), o(n, { key: 0 }, [s("span", E, v(`Copy ${
|
|
69
|
+
class: ["group inline-flex max-w-full min-w-0 flex-auto cursor-pointer items-center text-left transition-[color,background-color,border-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", [J.value, Y.value]],
|
|
70
|
+
"aria-label": u.iconOnly ? `Copy ${K.value}` : void 0
|
|
71
|
+
}, U.value, {
|
|
72
|
+
onClick: S($, ["stop"]),
|
|
73
|
+
onPointerenter: Q,
|
|
74
|
+
onFocus: Q
|
|
75
|
+
}), [u.iconOnly ? a("", !0) : (h(), o(n, { key: 0 }, [s("span", E, v(`Copy ${K.value}: `), 1), s("span", {
|
|
75
76
|
ref_key: "text",
|
|
76
|
-
ref:
|
|
77
|
+
ref: R,
|
|
77
78
|
class: p(["min-w-0 truncate", u.mono && "font-mono"])
|
|
78
|
-
}, [_(t.$slots, "default", {}, () => [c(v(
|
|
79
|
+
}, [_(t.$slots, "default", {}, () => [c(v(W.value), 1)])], 2)], 64)), z.value === "copied" ? (h(), i(y(C), {
|
|
79
80
|
key: 1,
|
|
80
|
-
class: p(["shrink-0 text-primary",
|
|
81
|
+
class: p(["shrink-0 text-primary", X.value]),
|
|
81
82
|
"aria-hidden": "true"
|
|
82
83
|
}, null, 8, ["class"])) : (h(), i(y(w), {
|
|
83
84
|
key: 2,
|
|
84
|
-
class: p(["shrink-0 transition-opacity duration-200", [
|
|
85
|
+
class: p(["shrink-0 transition-opacity duration-200", [X.value, Z.value]]),
|
|
85
86
|
"aria-hidden": "true"
|
|
86
87
|
}, null, 8, ["class"]))], 16, T)]),
|
|
87
88
|
_: 3
|
|
88
|
-
}, 8, ["delay"]), s("span", k, v(
|
|
89
|
+
}, 8, ["delay", "max-width"]), s("span", k, v(z.value === "copied" ? `Copied ${K.value}` : z.value === "failed" ? `Couldn't copy ${K.value}` : ""), 1)], 16));
|
|
89
90
|
}
|
|
90
91
|
});
|
|
91
92
|
//#endregion
|
|
92
|
-
export {
|
|
93
|
+
export { M as default };
|