ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
335 lines (334 loc) • 10.3 kB
JavaScript
import { defineComponent as oe, useSlots as se, ref as p, computed as w, watch as I, nextTick as j, onMounted as re, onBeforeUnmount as ue, createVNode as i, mergeProps as ie, isVNode as ce } from "vue";
import { Segmented as de } from "ant-design-vue";
import { b as $, w as S, x as me, Z as ve, y as pe, z as fe, B as he, G as ye } from "../chunks/module-chunk.mjs";
import ge from "../_util/pick-attrs.mjs";
import "../_util/warning.mjs";
import we from "../_util/hooks/use-x-component-config.mjs";
import xe from "../actions/index.mjs";
import "../code-highlighter/index.mjs";
import Ce from "../locale/useLocale.mjs";
import "../x-provider/index.mjs";
import be from "./style/index.mjs";
import Me from "../x-provider/hooks/use-x-provider-context.mjs";
import Ne from "../code-highlighter/CodeHighlighter.mjs";
function ke(x) {
return typeof x == "function" || Object.prototype.toString.call(x) === "[object Object]" && !ce(x);
}
const _e = /* @__PURE__ */ oe({
name: "AXMermaid",
__name: "Mermaid",
props: {
children: null,
header: null,
prefixCls: null,
rootClassName: null,
className: null,
class: null,
style: null,
highlightProps: null,
config: null,
actions: {
default: () => ({})
},
classNames: {
default: () => ({})
},
styles: {
default: () => ({})
},
onRenderTypeChange: {
type: Function
}
},
emits: ["renderTypeChange"],
setup(x, {
expose: z,
emit: E
}) {
const [f] = Ce("Mermaid"), t = x, C = se(), P = E;
let X = 0;
const T = p(null), u = p(null), r = p("image"), c = p(1), d = p({
x: 0,
y: 0
}), h = p(!1), M = p({
x: 0,
y: 0
}), _ = `mermaid-${X++}`, Z = w(() => ge(t, {
attr: !0,
aria: !0,
data: !0
})), {
getPrefixCls: A,
direction: V
} = Me(), m = w(() => A("mermaid", t.prefixCls)), o = we("mermaid"), [Y, H, U] = be(m), N = w(() => {
var a;
if (typeof t.children == "string")
return t.children;
const e = (a = C.default) == null ? void 0 : a.call(C);
return e ? (Array.isArray(e) ? e : [e]).map((n) => {
if (typeof n == "string" || typeof n == "number")
return String(n);
if (n && typeof n == "object" && "children" in n) {
const s = n.children;
if (typeof s == "string" || typeof s == "number")
return String(s);
}
return "";
}).join("") : "";
}), B = w(() => {
var e;
return $(m.value, o.value.className, t.className, t.class, t.rootClassName, (e = o.value.classNames) == null ? void 0 : e.root, t.classNames.root, H.value, U, {
[`${m.value}-rtl`]: V.value === "rtl"
});
}), F = w(() => {
var e;
return {
...t.style,
...typeof o.value.style == "object" ? o.value.style : {},
...typeof ((e = o.value.styles) == null ? void 0 : e.root) == "object" ? o.value.styles.root : {},
...t.styles.root
};
});
I(() => t.config, (e) => {
S.initialize({
startOnLoad: !1,
securityLevel: "strict",
theme: "default",
fontFamily: "monospace",
...e || {}
});
}, {
immediate: !0,
deep: !0
});
const q = me(async () => {
const e = N.value;
if (!(!e || !u.value || r.value === "code"))
try {
if (!await S.parse(e, {
suppressErrors: !0
}))
throw new Error("Invalid Mermaid syntax");
const {
svg: a
} = await S.render(`${_}-${e.length}`, e);
u.value && (u.value.innerHTML = a, O());
} catch {
}
}, 100), O = () => {
var l;
const e = (l = u.value) == null ? void 0 : l.querySelector("svg");
!e || r.value !== "image" || (e.style.transform = `scale(${c.value}) translate(${d.value.x}px, ${d.value.y}px)`, e.style.transformOrigin = "center", e.style.transition = h.value ? "none" : "transform 0.1s ease-out", e.style.cursor = h.value ? "grabbing" : "grab");
};
I([N, r, () => t.config], async () => {
if (await j(), r.value === "code" && u.value) {
u.value.innerHTML = "";
return;
}
await q();
}, {
immediate: !0,
deep: !0
}), I([c, d, r, h], () => {
O();
});
let D = 0;
const k = (e) => {
const {
enableZoom: l = !0
} = t.actions || {};
if (!l || r.value !== "image")
return;
e.preventDefault(), e.stopPropagation();
const a = Date.now();
if (a - D < 16)
return;
D = a;
const n = e.deltaY > 0 ? -0.1 : 0.1;
c.value = Math.max(0.5, Math.min(3, c.value + n));
};
re(() => {
var e;
(e = u.value) == null || e.addEventListener("wheel", k, {
passive: !1
});
}), ue(() => {
var e;
(e = u.value) == null || e.removeEventListener("wheel", k);
}), I(r, async () => {
var e, l;
await j(), (e = u.value) == null || e.removeEventListener("wheel", k), (l = u.value) == null || l.addEventListener("wheel", k, {
passive: !1
});
});
const G = (e) => {
r.value === "image" && (e.preventDefault(), h.value = !0, M.value = {
x: e.clientX,
y: e.clientY
});
}, W = (e) => {
if (!h.value || r.value !== "image")
return;
e.preventDefault();
const l = e.clientX - M.value.x, a = e.clientY - M.value.y;
d.value = {
x: d.value.x + l / c.value,
y: d.value.y + a / c.value
}, M.value = {
x: e.clientX,
y: e.clientY
};
}, L = () => {
h.value = !1;
}, J = () => {
c.value = 1, d.value = {
x: 0,
y: 0
};
}, K = async () => {
var b;
const e = (b = u.value) == null ? void 0 : b.querySelector("svg");
if (!e)
return;
const l = new XMLSerializer().serializeToString(e), a = document.createElement("canvas"), n = a.getContext("2d");
if (!n)
return;
const {
width: s,
height: y
} = e.getBoundingClientRect(), v = window.devicePixelRatio || 1;
a.width = s * v, a.height = y * v, a.style.width = `${s}px`, a.style.height = `${y}px`, n.scale(v, v);
const g = new Image();
g.onload = () => {
n.drawImage(g, 0, 0, s, y);
const R = document.createElement("a");
R.download = `${Date.now()}.png`, R.href = a.toDataURL("image/png", 1), R.click();
}, g.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(l)}`;
}, Q = () => {
c.value = Math.min(c.value + 0.2, 3);
}, ee = () => {
c.value = Math.max(c.value - 0.2, 0.5);
}, te = async () => {
try {
await navigator.clipboard.writeText(N.value);
} catch {
}
}, ae = (e) => {
var a;
const l = e;
r.value = l, (a = t.onRenderTypeChange) == null || a.call(t, l), P("renderTypeChange", l);
}, le = () => {
if (C.header)
return C.header();
if (t.header !== void 0)
return typeof t.header == "function" ? t.header() : t.header;
}, ne = w(() => {
const {
enableZoom: e = !0,
enableDownload: l = !0,
enableCopy: a = !0,
customActions: n = []
} = t.actions || {}, s = [];
return r.value === "image" ? (e && s.push({
key: "zoomIn",
icon: i(ve, null, null),
label: f.value.zoomIn,
onItemClick: Q
}, {
key: "zoomOut",
icon: i(pe, null, null),
label: f.value.zoomOut,
onItemClick: ee
}, {
key: "zoomReset",
icon: i(fe, null, null),
label: f.value.zoomReset,
onItemClick: J
}), l && s.push({
key: "download",
icon: i(he, null, null),
label: f.value.download,
onItemClick: K
})) : a && s.push({
key: "copy",
icon: i(ye, null, null),
label: "Copy",
onItemClick: te
}), [...s, ...n];
});
return z({
get nativeElement() {
return T.value;
}
}), () => {
var n, s, y, v, g, b;
const e = N.value;
if (!e)
return null;
const l = le();
let a;
return l === null ? a = null : l === void 0 ? a = i("div", {
class: $(`${m.value}-header`, (n = o.value.classNames) == null ? void 0 : n.header, t.classNames.header),
style: {
...typeof ((s = o.value.styles) == null ? void 0 : s.header) == "object" ? o.value.styles.header : {},
...t.styles.header
}
}, [i(de, {
options: [{
label: f.value.image,
value: "image"
}, {
label: f.value.code,
value: "code"
}],
value: r.value,
onChange: ae
}, null), i(xe, {
items: ne.value
}, null)]) : a = l, Y(i("div", ie(Z.value, {
ref: T,
class: B.value,
style: F.value
}), [a, i("div", {
ref: u,
class: $(`${m.value}-graph`, (y = o.value.classNames) == null ? void 0 : y.graph, r.value === "code" && `${m.value}-graph-hidden`, t.classNames.graph),
style: {
...typeof ((v = o.value.styles) == null ? void 0 : v.graph) == "object" ? o.value.styles.graph : {},
...t.styles.graph
},
onMousedown: G,
onMousemove: W,
onMouseup: L,
onMouseleave: L
}, null), r.value === "code" ? i("div", {
class: $(`${m.value}-code`, (g = o.value.classNames) == null ? void 0 : g.code, t.classNames.code),
style: {
...typeof ((b = o.value.styles) == null ? void 0 : b.code) == "object" ? o.value.styles.code : {},
...t.styles.code
}
}, [i(Ne, {
lang: "mermaid",
header: null,
styles: {
code: {
background: "transparent",
border: "none",
borderRadius: 0
}
},
highlightProps: {
style: {
padding: 0,
background: "transparent"
},
...t.highlightProps
}
}, ke(e) ? e : {
default: () => [e]
})]) : null]));
};
}
});
export {
_e as default
};