vue-data-ui 3.19.9 → 3.20.1

package/dist/UserOptions-D7zR0tnR.js

@@ -1,1411 +0,0 @@
-import { t as e } from "./rolldown-runtime-CAFD8bLK.js";
-import { t } from "./img-BjOr008R.js";
-import { t as n } from "./_plugin-vue_export-helper-Dq1MygBL.js";
-import { t as r } from "./BaseIcon-DM1x8hQF.js";
-import { t as i } from "./vClickOutside-CbX_bC9A.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, guardReactiveProps as ee, mergeProps as f, nextTick as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, openBlock as y, ref as b, renderSlot as x, toDisplayString as S, unref as te, watch as ne, withDirectives as re, withKeys as ie, withModifiers as C } from "vue";
-//#region src/directives/vPopoverClickOutside.js
-var ae = {
-	beforeMount(e, t) {
-		let n = () => typeof t.value == "function" ? {
-			handler: t.value,
-			targets: [e],
-			disabled: !1,
-			scrollGuardMs: 250,
-			moveThreshold: 10
-		} : {
-			handler: t.value?.handler,
-			targets: t.value?.targets ?? [e],
-			disabled: !!t.value?.disabled,
-			scrollGuardMs: t.value?.scrollGuardMs ?? 250,
-			moveThreshold: t.value?.moveThreshold ?? 10
-		}, r = {
-			lastScrollTs: 0,
-			pointerId: null,
-			startX: 0,
-			startY: 0,
-			moved: !1
-		}, i = () => {
-			r.lastScrollTs = performance.now();
-		}, a = (e) => {
-			r.pointerId = e.pointerId ?? null, r.startX = e.clientX ?? 0, r.startY = e.clientY ?? 0, r.moved = !1;
-		}, o = (e) => {
-			if (r.pointerId === null || (e.pointerId ?? null) !== r.pointerId) return;
-			let t = (e.clientX ?? 0) - r.startX, i = (e.clientY ?? 0) - r.startY, { moveThreshold: a } = n();
-			t * t + i * i >= a * a && (r.moved = !0);
-		}, s = (e) => {
-			r.pointerId !== null && (e.pointerId ?? null) === r.pointerId && (r.pointerId = null);
-		}, c = (e, t) => {
-			let n = e.composedPath ? e.composedPath() : [];
-			for (let r of t) {
-				let t = r && typeof r == "object" && "value" in r ? r.value : r;
-				if (t && (t === e.target || t.contains && t.contains(e.target) || n.length && n.includes(t))) return !0;
-			}
-			return !1;
-		}, l = (e) => {
-			let { handler: t, targets: i, disabled: a, scrollGuardMs: o } = n();
-			a || typeof t == "function" && (performance.now() - r.lastScrollTs < o || r.moved || c(e, i) || t(e));
-		};
-		e.__vPopoverClickOutside__ = {
-			onScrollCapture: i,
-			onPointerDownCapture: a,
-			onPointerMoveCapture: o,
-			onPointerUpCapture: s,
-			onClickCapture: l
-		}, window.addEventListener("scroll", i, !0), document.addEventListener("pointerdown", a, !0), document.addEventListener("pointermove", o, !0), document.addEventListener("pointerup", s, !0), document.addEventListener("click", l, !0);
-	},
-	unmounted(e) {
-		let t = e.__vPopoverClickOutside__;
-		t && (window.removeEventListener("scroll", t.onScrollCapture, !0), document.removeEventListener("pointerdown", t.onPointerDownCapture, !0), document.removeEventListener("pointermove", t.onPointerMoveCapture, !0), document.removeEventListener("pointerup", t.onPointerUpCapture, !0), document.removeEventListener("click", t.onClickCapture, !0), delete e.__vPopoverClickOutside__);
-	}
-}, w = /* @__PURE__ */ e({ default: () => T }), oe = ["title", "onKeydown"], se = ["popover", "data-open"], ce = ["title"], le = ["data-open"], T = /* @__PURE__ */ n({
-	__name: "UserOptions",
-	props: {
-		hasPdf: {
-			type: Boolean,
-			default: !0
-		},
-		hasXls: {
-			type: Boolean,
-			default: !0
-		},
-		hasImg: {
-			type: Boolean,
-			default: !1
-		},
-		hasSvg: {
-			type: Boolean,
-			default: !1
-		},
-		hasLabel: {
-			type: Boolean,
-			default: !1
-		},
-		isLabelActive: {
-			type: Boolean,
-			default: !1
-		},
-		hasTable: {
-			type: Boolean,
-			default: !1
-		},
-		hasSort: {
-			type: Boolean,
-			default: !1
-		},
-		hasStack: {
-			type: Boolean,
-			default: !1
-		},
-		hasTooltip: {
-			type: Boolean,
-			default: !1
-		},
-		color: { type: String },
-		backgroundColor: { type: String },
-		isPrinting: {
-			type: Boolean,
-			default: !1
-		},
-		isImaging: {
-			type: Boolean,
-			default: !1
-		},
-		title: { type: String },
-		uid: { type: String },
-		hasFullscreen: {
-			type: Boolean,
-			default: !1
-		},
-		chartElement: {
-			type: HTMLElement,
-			default: null
-		},
-		isFullscreen: {
-			type: Boolean,
-			default: !1
-		},
-		isStacked: {
-			type: Boolean,
-			default: !1
-		},
-		isTooltip: {
-			type: Boolean,
-			default: !1
-		},
-		hasAnimation: {
-			type: Boolean,
-			default: !1
-		},
-		isAnimation: {
-			type: Boolean,
-			default: !1
-		},
-		titles: {
-			type: Object,
-			default() {
-				return {};
-			}
-		},
-		showTooltips: {
-			type: Boolean,
-			default: !0
-		},
-		zIndex: {
-			type: Number,
-			default: 1
-		},
-		noOffset: {
-			type: Boolean,
-			default: !0
-		},
-		position: {
-			type: String,
-			default: "right"
-		},
-		offsetX: {
-			type: Number,
-			default: 0
-		},
-		hasAnnotator: {
-			type: Boolean,
-			default: !1
-		},
-		isAnnotation: {
-			type: Boolean,
-			default: !1
-		},
-		callbacks: {
-			type: Object,
-			default() {
-				return {};
-			}
-		},
-		printScale: {
-			type: Number,
-			default: 2
-		},
-		tableDialog: {
-			type: Boolean,
-			default: !1
-		},
-		hasZoom: {
-			type: Boolean,
-			default: !1
-		},
-		isZoom: {
-			type: Boolean,
-			default: !1
-		},
-		isCursorPointer: {
-			type: Boolean,
-			default: !1
-		},
-		hasAltCopy: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: [
-		"generatePdf",
-		"generateCsv",
-		"generateImage",
-		"toggleTable",
-		"toggleLabels",
-		"toggleSort",
-		"toggleFullscreen",
-		"toggleStack",
-		"toggleTooltip",
-		"toggleAnimation",
-		"toggleAnnotator",
-		"generateSvg",
-		"toggleZoom",
-		"copyAlt"
-	],
-	setup(e, { expose: n, emit: w }) {
-		let T = e, E = w, D = b(null), O = b(null), k = b(null), A = b(!1), j = o(() => typeof window < "u" && typeof HTMLElement < "u" && "popover" in HTMLElement.prototype);
-		async function ue() {
-			if (T.callbacks.pdf) {
-				let { imageUri: e, base64: n } = await t({
-					domElement: T.chartElement,
-					base64: !0,
-					img: !0,
-					scale: T.printScale
-				});
-				T.callbacks.pdf({
-					domElement: T.chartElement,
-					base64: n,
-					imageUri: e
-				});
-			} else E("generatePdf");
-		}
-		function de() {
-			E("generateCsv", T.callbacks.csv);
-		}
-		async function M() {
-			if (T.callbacks.img) {
-				E("generateImage", { stage: "start" });
-				try {
-					let { imageUri: e, base64: n } = await t({
-						domElement: T.chartElement,
-						base64: !0,
-						img: !0,
-						scale: T.printScale
-					});
-					await Promise.resolve(T.callbacks.img({
-						domElement: T.chartElement,
-						imageUri: e,
-						base64: n
-					}));
-				} finally {
-					E("generateImage", { stage: "end" });
-				}
-			} else E("generateImage");
-		}
-		function fe() {
-			E("generateSvg", { isCb: !!T.callbacks.svg });
-		}
-		let N = b(!1);
-		function P() {
-			T.callbacks.table ? T.callbacks.table() : (N.value = !N.value, E("toggleTable"));
-		}
-		function pe(e) {
-			N.value = e;
-		}
-		n({ setTableIconState: pe });
-		let F = b(T.isLabelActive);
-		function I() {
-			T.callbacks.labels ? T.callbacks.labels() : (F.value = !F.value, E("toggleLabels"));
-		}
-		let L = b(T.isAnimation);
-		function R() {
-			T.callbacks.animation ? T.callbacks.animation() : (L.value = !L.value, E("toggleAnimation"));
-		}
-		let z = b(T.isZoom);
-		function B() {
-			T.callbacks.zoom ? T.callbacks.zoom() : (z.value = !z.value, E("toggleZoom"));
-		}
-		let V = o({
-			get: () => T.isAnnotation,
-			set: (e) => e
-		});
-		function H() {
-			T.callbacks.annotator ? T.callbacks.annotator() : (V.value = !V.value, E("toggleAnnotator"));
-		}
-		function U() {
-			T.callbacks.sort ? T.callbacks.sort() : E("toggleSort");
-		}
-		function W() {
-			E("copyAlt");
-		}
-		let G = b(T.isStacked);
-		function me() {
-			T.callbacks.stack ? T.callbacks.stack() : (G.value = !G.value, E("toggleStack"));
-		}
-		let K = b(T.isTooltip);
-		function he() {
-			T.callbacks.tooltip ? T.callbacks.tooltip() : (K.value = !K.value, E("toggleTooltip"));
-		}
-		let ge = o({
-			get: () => T.isFullscreen,
-			set: (e) => E("toggleFullscreen", e)
-		});
-		function q() {
-			if (!T.chartElement) return;
-			let e = !T.isFullscreen;
-			ge.value = e, e ? T.chartElement.requestFullscreen() : document.exitFullscreen();
-		}
-		function _e() {
-			E("toggleFullscreen", !!document.fullscreenElement);
-		}
-		v(() => {
-			document.addEventListener("fullscreenchange", _e);
-		}), _(() => {
-			document.removeEventListener("fullscreenchange", _e);
-		});
-		let J = b(window.innerWidth > 600), Y = b({
-			tooltip: !1,
-			pdf: !1,
-			csv: !1,
-			img: !1,
-			table: !1,
-			labels: !1,
-			sort: !1,
-			stack: !1,
-			fullscreen: !1,
-			animation: !1,
-			annotator: !1,
-			svg: !1,
-			zoom: !1,
-			altCopy: !1
-		}), ve = b(!0);
-		function ye() {
-			J.value = window.innerWidth > 600, A.value = !A.value, A.value && (ve.value = !1);
-		}
-		function be() {
-			T.isPrinting || T.isImaging || (A.value = !1);
-		}
-		function xe() {
-			A.value && be();
-		}
-		let X = b(0);
-		function Se() {
-			X.value = performance.now() + 50;
-		}
-		function Z() {
-			T.isPrinting || T.isImaging || (j.value && $(), A.value = !1);
-		}
-		function Ce() {
-			performance.now() < X.value || Z();
-		}
-		function we() {
-			if (J.value = window.innerWidth > 600, !j.value) {
-				A.value || Se(), A.value = !A.value;
-				return;
-			}
-			let e = k.value;
-			if (e && e.matches && e.matches(":popover-open") || A.value) {
-				A.value = !1, $();
-				return;
-			}
-			Se(), A.value = !0;
-		}
-		function Te() {
-			we();
-		}
-		function Ee(e, t, n, r) {
-			let i = window.devicePixelRatio || 1, a = (e) => Math.round(e * i) / i;
-			e.style.position = "fixed", e.style.top = `${a(t)}px`, e.style.left = `${a(n)}px`, e.style.right = "auto", e.style.width = `${a(r)}px`;
-		}
-		function De(e) {
-			if (e.style.width = "", e.style.left = "", e.style.right = "", e.style.top = "", e.style.position = "absolute", e.style.top = "36px", T.position === "right") {
-				let t = T.offsetX ? T.offsetX : T.noOffset ? 0 : 4;
-				e.style.right = `${t}px`, e.style.left = "auto";
-			} else {
-				let t = T.noOffset ? 0 : 4;
-				e.style.left = `${t}px`, e.style.right = "auto";
-			}
-			e.style.display = "flex", e.style.visibility = "hidden", e.style.pointerEvents = "none";
-		}
-		function Oe() {
-			if (!j.value || !A.value || !D.value || !k.value) return;
-			let e = D.value.getBoundingClientRect(), t = k.value.getBoundingClientRect(), n = e.top + 38;
-			if (T.position === "right") {
-				let r = T.offsetX ? T.offsetX : T.noOffset ? 0 : 4, i = e.right - r - t.width;
-				Ee(k.value, n, i, t.width);
-			} else {
-				let r = T.noOffset ? 0 : 4, i = e.left + r;
-				Ee(k.value, n, i, t.width);
-			}
-		}
-		let ke = 0;
-		function Ae() {
-			cancelAnimationFrame(ke), ke = requestAnimationFrame(() => {
-				Oe();
-			});
-		}
-		function Q() {
-			j.value && A.value && Ae();
-		}
-		function je(e, t) {
-			let n = window.devicePixelRatio || 1, r = (e) => Math.round(e * n) / n;
-			e.style.position = "fixed", e.style.top = `${r(t.top)}px`, e.style.left = `${r(t.left)}px`, e.style.right = "auto", e.style.width = `${r(t.width)}px`;
-		}
-		async function Me(e = !1) {
-			if (!j.value) return;
-			let t = k.value;
-			if (!t) return;
-			let n = t.getAttribute("style") || "", r = t.getAttribute("data-open");
-			t.setAttribute("popover", "manual");
-			try {
-				t.setAttribute("data-open", "true"), De(t), await p();
-				let i = t.getBoundingClientRect();
-				t.setAttribute("style", n), r === null ? t.removeAttribute("data-open") : t.setAttribute("data-open", r), je(t, i), e || (typeof t.showPopover == "function" ? t.showPopover() : t.style.display = "flex");
-			} catch {
-				if (!e) try {
-					typeof t.showPopover == "function" ? t.showPopover() : t.style.display = "flex";
-				} catch {}
-			}
-		}
-		function $() {
-			if (!j.value) return;
-			let e = k.value;
-			if (e) {
-				e.setAttribute("popover", "manual");
-				try {
-					typeof e.hidePopover == "function" ? e.hidePopover() : e.style.display = "none";
-				} catch {
-					e.style.display = "none";
-				}
-				e.style.position = "", e.style.top = "", e.style.left = "", e.style.right = "", e.style.width = "", e.style.inset = "";
-			}
-		}
-		function Ne() {
-			if (!j.value) return;
-			let e = k.value;
-			e && (A.value &&= typeof e.matches == "function" ? (() => {
-				try {
-					return e.matches(":popover-open");
-				} catch {
-					return !1;
-				}
-			})() : !1);
-		}
-		function Pe(e) {
-			if (!j.value || !A.value || performance.now() < X.value) return;
-			let t = e.composedPath ? e.composedPath() : [], n = O.value ? t.includes(O.value) : !1, r = k.value ? t.includes(k.value) : !1;
-			!n && !r && Z();
-		}
-		ne(() => T.isFullscreen, async () => {
-			j.value && (await p(), A.value && Me());
-		}), ne(() => A.value, async (e) => {
-			j.value && (await p(), e ? (await Me(!1), Oe()) : $());
-		});
-		function Fe(e) {
-			e.key === "Escape" && D.value && D.value.contains(document.activeElement) && (e.preventDefault(), e.stopPropagation(), Z(), O.value?.focus());
-		}
-		return v(() => {
-			window.addEventListener("pointerdown", Pe, !0), window.addEventListener("resize", Q, { passive: !0 }), window.addEventListener("scroll", Q, {
-				passive: !0,
-				capture: !0
-			}), k.value && k.value.addEventListener("toggle", Ne);
-		}), _(() => {
-			window.removeEventListener("pointerdown", Pe, !0), window.removeEventListener("resize", Q), window.removeEventListener("scroll", Q, !0), k.value && k.value.removeEventListener("toggle", Ne);
-		}), (t, n) => j.value ? re((y(), l("div", {
-			key: 0,
-			ref_key: "rootRef",
-			ref: D,
-			"data-dom-to-png-ignore": "",
-			class: "vue-ui-user-options",
-			style: g(`z-index: ${e.zIndex}; height: 34px; position: ${e.isFullscreen ? "fixed" : "absolute"}; top: 0; ${e.position === "right" ? `right:${e.isFullscreen ? "12px" : "0"}` : `left:${e.isFullscreen ? "12px" : "0"}`}; padding: 4px; background:transparent;`),
-			onKeydown: Fe
-		}, [u("div", {
-			ref_key: "triggerRef",
-			ref: O,
-			tabindex: "0",
-			role: "button",
-			title: A.value ? e.titles.close || "" : e.titles.open || "",
-			style: g(`width:32px; position: absolute; top: 0;${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px;  cursor:${e.isCursorPointer ? "pointer" : "default"}; background:transparent`),
-			onPointerdown: C(we, ["stop", "prevent"]),
-			onKeydown: ie(C(Te, ["stop", "prevent"]), ["enter"])
-		}, [x(t.$slots, "menuIcon", h(ee({
-			isOpen: A.value,
-			color: e.color
-		})), () => [d(r, {
-			name: A.value ? "close" : "menu",
-			stroke: e.color,
-			"stroke-width": 2
-		}, null, 8, ["name", "stroke"])], !0)], 44, oe), u("div", {
-			ref_key: "drawerRef",
-			ref: k,
-			popover: j.value ? "manual" : null,
-			"data-open": j.value ? null : A.value,
-			class: m({ "vue-ui-user-options-drawer": !0 }),
-			style: g(j.value ? { background: e.backgroundColor } : `background:${e.backgroundColor}; ${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}`)
-		}, [
-			x(t.$slots, "custom-menu-before", {}, void 0, !0),
-			e.hasPdf ? (y(), l("button", {
-				key: 0,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: ue,
-				onMouseenter: n[0] ||= (e) => Y.value.pdf = !0,
-				onMouseout: n[1] ||= (e) => Y.value.pdf = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionPdf ? x(t.$slots, "optionPdf", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [e.isPrinting ? (y(), s(r, {
-				key: 0,
-				name: "hourglass",
-				isSpin: "",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "filePdf",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.pdf ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.pdf,
-					"button-info-left-visible": e.position === "left" && Y.value.pdf
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.pdf), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasXls ? (y(), l("button", {
-				key: 1,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: de,
-				onMouseenter: n[2] ||= (e) => Y.value.csv = !0,
-				onMouseout: n[3] ||= (e) => Y.value.csv = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionCsv ? x(t.$slots, "optionCsv", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "fileCsv",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.csv ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.csv,
-					"button-info-left-visible": e.position === "left" && Y.value.csv
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.csv), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasImg ? (y(), l("button", {
-				key: 2,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: M,
-				onMouseenter: n[4] ||= (e) => Y.value.img = !0,
-				onMouseout: n[5] ||= (e) => Y.value.img = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionImg ? x(t.$slots, "optionImg", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [e.isImaging ? (y(), s(r, {
-				key: 0,
-				name: "hourglass",
-				isSpin: "",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "filePng",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.img ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.img,
-					"button-info-left-visible": e.position === "left" && Y.value.img
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.img), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasSvg ? (y(), l("button", {
-				key: 3,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: fe,
-				onMouseenter: n[6] ||= (e) => Y.value.svg = !0,
-				onMouseout: n[7] ||= (e) => Y.value.svg = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionSvg ? x(t.$slots, "optionSvg", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "fileSvg",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.svg ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.svg,
-					"button-info-left-visible": e.position === "left" && Y.value.svg
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.svg), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasTooltip ? (y(), l("button", {
-				key: 4,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: he,
-				onMouseenter: n[8] ||= (e) => Y.value.tooltip = !0,
-				onMouseout: n[9] ||= (e) => Y.value.tooltip = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionTooltip ? x(t.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [K.value ? (y(), s(r, {
-				key: 0,
-				name: "tooltip",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "tooltipDisabled",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.tooltip ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-left-visible": e.position === "left" && Y.value.tooltip,
-					"button-info-right-visible": e.position === "right" && Y.value.tooltip
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.tooltip), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasTable ? (y(), l("button", {
-				key: 5,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: P,
-				onMouseenter: n[10] ||= (e) => Y.value.table = !0,
-				onMouseout: n[11] ||= (e) => Y.value.table = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionTable ? x(t.$slots, "optionTable", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [e.tableDialog ? (y(), s(r, {
-				key: 0,
-				name: N.value ? "tableDialogClose" : "tableDialogOpen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])) : (y(), s(r, {
-				key: 1,
-				name: N.value ? "tableClose" : "tableOpen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"]))], 64)), J.value && e.titles.table ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.table,
-					"button-info-left-visible": e.position === "left" && Y.value.table
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.table), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasLabel ? (y(), l("button", {
-				key: 6,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: I,
-				onMouseenter: n[12] ||= (e) => Y.value.labels = !0,
-				onMouseout: n[13] ||= (e) => Y.value.labels = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionLabels ? x(t.$slots, "optionLabels", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: F.value ? "labelClose" : "labelOpen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])), J.value && e.titles.labels ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.labels,
-					"button-info-left-visible": e.position === "left" && Y.value.labels
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.labels), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasSort ? (y(), l("button", {
-				key: 7,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: U,
-				onMouseenter: n[14] ||= (e) => Y.value.sort = !0,
-				onMouseout: n[15] ||= (e) => Y.value.sort = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionSort ? x(t.$slots, "optionSort", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "sort",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.sort ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.sort,
-					"button-info-left-visible": e.position === "left" && Y.value.sort
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.sort), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasStack ? (y(), l("button", {
-				key: 8,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: me,
-				onMouseenter: n[16] ||= (e) => Y.value.stack = !0,
-				onMouseout: n[17] ||= (e) => Y.value.stack = !1,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionStack ? x(t.$slots, "optionStack", h(f({ key: 0 }, { isStack: G.value })), void 0, !0) : (y(), l(a, { key: 1 }, [G.value ? (y(), s(r, {
-				key: 0,
-				name: "unstack",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "stack",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.stack ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.stack,
-					"button-info-left-visible": e.position === "left" && Y.value.stack
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.stack), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasFullscreen ? (y(), l("button", {
-				key: 9,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[18] ||= (e) => Y.value.fullscreen = !0,
-				onMouseout: n[19] ||= (e) => Y.value.fullscreen = !1,
-				onClick: n[20] ||= (t) => q(e.isFullscreen ? "out" : "in"),
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionFullscreen ? x(t.$slots, "optionFullscreen", h(f({ key: 0 }, {
-				toggleFullscreen: q,
-				isFullscreen: e.isFullscreen
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isFullscreen ? (y(), s(r, {
-				key: 0,
-				name: "exitFullscreen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "fullscreen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.fullscreen ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.fullscreen,
-					"button-info-left-visible": e.position === "left" && Y.value.fullscreen
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.fullscreen), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasZoom ? (y(), l("button", {
-				key: 10,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[21] ||= (e) => Y.value.zoom = !0,
-				onMouseout: n[22] ||= (e) => Y.value.zoom = !1,
-				onClick: n[23] ||= (e) => B(),
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionZoom ? x(t.$slots, "optionZoom", h(f({ key: 0 }, {
-				toggleZoom: B,
-				isZoomLocked: !e.isZoom
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isZoom ? (y(), s(r, {
-				key: 0,
-				name: "zoomUnlock",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "zoomLock",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.zoom ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.zoom,
-					"button-info-left-visible": e.position === "left" && Y.value.zoom
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.zoom), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasAnimation ? (y(), l("button", {
-				key: 11,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[24] ||= (e) => Y.value.animation = !0,
-				onMouseout: n[25] ||= (e) => Y.value.animation = !1,
-				onClick: R,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionAnimation ? x(t.$slots, "optionAnimation", h(f({ key: 0 }, {
-				toggleAnimation: R,
-				isAnimated: L.value
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [L.value ? (y(), s(r, {
-				key: 0,
-				name: "play",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "pause",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.fullscreen ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.animation,
-					"button-info-left-visible": e.position === "left" && Y.value.animation
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.animation), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasAnnotator ? (y(), l("button", {
-				key: 12,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[26] ||= (e) => Y.value.annotator = !0,
-				onMouseout: n[27] ||= (e) => Y.value.annotator = !1,
-				onClick: H,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionAnnotator ? x(t.$slots, "optionAnnotator", h(f({ key: 0 }, {
-				toggleAnnotator: H,
-				isAnnotator: V.value
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [V.value ? (y(), s(r, {
-				key: 0,
-				name: "annotatorDisabled",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "annotator",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.annotator ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.annotator,
-					"button-info-left-visible": e.position === "left" && Y.value.annotator
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.annotator), 7)) : c("", !0)], 36)) : c("", !0),
-			e.hasAltCopy ? (y(), l("button", {
-				key: 13,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[28] ||= (e) => Y.value.altCopy = !0,
-				onMouseout: n[29] ||= (e) => Y.value.altCopy = !1,
-				onClick: W,
-				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionAltCopy ? x(t.$slots, "optionAltCopy", h(f({ key: 0 }, { copyAlt: W })), void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "accessibility",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.altCopy ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.altCopy,
-					"button-info-left-visible": e.position === "left" && Y.value.altCopy
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.altCopy), 7)) : c("", !0)], 36)) : c("", !0),
-			x(t.$slots, "custom-menu-after", {}, void 0, !0)
-		], 12, se)], 36)), [[te(ae), j.value ? null : {
-			targets: [
-				D.value,
-				k.value,
-				O.value
-			],
-			handler: Ce
-		}]]) : re((y(), l("div", {
-			key: 1,
-			ref_key: "rootRef",
-			ref: D,
-			"data-dom-to-png-ignore": "",
-			class: "vue-ui-user-options",
-			style: g(`z-index: ${e.zIndex}; height: 34px; position: ${e.isFullscreen ? "fixed" : "absolute"}; top: 0; ${e.position === "right" ? `right:${e.isFullscreen ? "12px" : "0"}` : `left:${e.isFullscreen ? "12px" : "0"}`}; padding: 4px; background:transparent;`),
-			onKeydown: Fe
-		}, [u("div", {
-			ref_key: "triggerRef",
-			ref: O,
-			tabindex: "0",
-			title: A.value ? e.titles.close || "" : e.titles.open || "",
-			style: g(`width:32px; position: absolute; top: 0;${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px;  cursor:pointer; background:transparent`),
-			onClick: C(ye, ["stop"]),
-			onKeypress: ie(ye, ["enter"])
-		}, [x(t.$slots, "menuIcon", h(ee({
-			isOpen: A.value,
-			color: e.color
-		})), () => [d(r, {
-			name: A.value ? "close" : "menu",
-			stroke: e.color,
-			"stroke-width": 2
-		}, null, 8, ["name", "stroke"])], !0)], 44, ce), u("div", {
-			ref_key: "drawerRef",
-			ref: k,
-			"data-open": A.value,
-			class: m({ "vue-ui-user-options-drawer": !0 }),
-			style: g(`background:${e.backgroundColor}; ${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}`)
-		}, [
-			x(t.$slots, "custom-menu-before", {}, void 0, !0),
-			e.hasPdf ? (y(), l("button", {
-				key: 0,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: ue,
-				onMouseenter: n[30] ||= (e) => Y.value.pdf = !0,
-				onMouseout: n[31] ||= (e) => Y.value.pdf = !1
-			}, [t.$slots.optionPdf ? x(t.$slots, "optionPdf", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [e.isPrinting ? (y(), s(r, {
-				key: 0,
-				name: "hourglass",
-				isSpin: "",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "filePdf",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.pdf ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.pdf,
-					"button-info-left-visible": e.position === "left" && Y.value.pdf
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.pdf), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasXls ? (y(), l("button", {
-				key: 1,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: de,
-				onMouseenter: n[32] ||= (e) => Y.value.csv = !0,
-				onMouseout: n[33] ||= (e) => Y.value.csv = !1
-			}, [t.$slots.optionCsv ? x(t.$slots, "optionCsv", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "fileCsv",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.csv ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.csv,
-					"button-info-left-visible": e.position === "left" && Y.value.csv
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.csv), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasImg ? (y(), l("button", {
-				key: 2,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: M,
-				onMouseenter: n[34] ||= (e) => Y.value.img = !0,
-				onMouseout: n[35] ||= (e) => Y.value.img = !1
-			}, [t.$slots.optionImg ? x(t.$slots, "optionImg", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [e.isImaging ? (y(), s(r, {
-				key: 0,
-				name: "hourglass",
-				isSpin: "",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "filePng",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.img ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.img,
-					"button-info-left-visible": e.position === "left" && Y.value.img
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.img), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasSvg ? (y(), l("button", {
-				key: 3,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: fe,
-				onMouseenter: n[36] ||= (e) => Y.value.svg = !0,
-				onMouseout: n[37] ||= (e) => Y.value.svg = !1
-			}, [t.$slots.optionSvg ? x(t.$slots, "optionSvg", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "fileSvg",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.svg ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.svg,
-					"button-info-left-visible": e.position === "left" && Y.value.svg
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.svg), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasTooltip ? (y(), l("button", {
-				key: 4,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: he,
-				onMouseenter: n[38] ||= (e) => Y.value.tooltip = !0,
-				onMouseout: n[39] ||= (e) => Y.value.tooltip = !1
-			}, [t.$slots.optionTooltip ? x(t.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [K.value ? (y(), s(r, {
-				key: 0,
-				name: "tooltip",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "tooltipDisabled",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.tooltip ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-left-visible": e.position === "left" && Y.value.tooltip,
-					"button-info-right-visible": e.position === "right" && Y.value.tooltip
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.tooltip), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasTable ? (y(), l("button", {
-				key: 5,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: P,
-				onMouseenter: n[40] ||= (e) => Y.value.table = !0,
-				onMouseout: n[41] ||= (e) => Y.value.table = !1
-			}, [t.$slots.optionTable ? x(t.$slots, "optionTable", { key: 0 }, void 0, !0) : (y(), l(a, { key: 1 }, [e.tableDialog ? (y(), s(r, {
-				key: 0,
-				name: N.value ? "tableDialogClose" : "tableDialogOpen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])) : (y(), s(r, {
-				key: 1,
-				name: N.value ? "tableClose" : "tableOpen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"]))], 64)), J.value && e.titles.table ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.table,
-					"button-info-left-visible": e.position === "left" && Y.value.table
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.table), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasLabel ? (y(), l("button", {
-				key: 6,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: I,
-				onMouseenter: n[42] ||= (e) => Y.value.labels = !0,
-				onMouseout: n[43] ||= (e) => Y.value.labels = !1
-			}, [t.$slots.optionLabels ? x(t.$slots, "optionLabels", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: F.value ? "labelClose" : "labelOpen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])), J.value && e.titles.labels ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.labels,
-					"button-info-left-visible": e.position === "left" && Y.value.labels
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.labels), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasSort ? (y(), l("button", {
-				key: 7,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: U,
-				onMouseenter: n[44] ||= (e) => Y.value.sort = !0,
-				onMouseout: n[45] ||= (e) => Y.value.sort = !1
-			}, [t.$slots.optionSort ? x(t.$slots, "optionSort", { key: 0 }, void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "sort",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.sort ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.sort,
-					"button-info-left-visible": e.position === "left" && Y.value.sort
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.sort), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasStack ? (y(), l("button", {
-				key: 8,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onClick: me,
-				onMouseenter: n[46] ||= (e) => Y.value.stack = !0,
-				onMouseout: n[47] ||= (e) => Y.value.stack = !1
-			}, [t.$slots.optionStack ? x(t.$slots, "optionStack", h(f({ key: 0 }, { isStack: G.value })), void 0, !0) : (y(), l(a, { key: 1 }, [G.value ? (y(), s(r, {
-				key: 0,
-				name: "unstack",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "stack",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.stack ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.stack,
-					"button-info-left-visible": e.position === "left" && Y.value.stack
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.stack), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasFullscreen ? (y(), l("button", {
-				key: 9,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[48] ||= (e) => Y.value.fullscreen = !0,
-				onMouseout: n[49] ||= (e) => Y.value.fullscreen = !1,
-				onClick: n[50] ||= (t) => q(e.isFullscreen ? "out" : "in")
-			}, [t.$slots.optionFullscreen ? x(t.$slots, "optionFullscreen", h(f({ key: 0 }, {
-				toggleFullscreen: q,
-				isFullscreen: e.isFullscreen
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isFullscreen ? (y(), s(r, {
-				key: 0,
-				name: "exitFullscreen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "fullscreen",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.fullscreen ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.fullscreen,
-					"button-info-left-visible": e.position === "left" && Y.value.fullscreen
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.fullscreen), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasZoom ? (y(), l("button", {
-				key: 10,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[51] ||= (e) => Y.value.zoom = !0,
-				onMouseout: n[52] ||= (e) => Y.value.zoom = !1,
-				onClick: n[53] ||= (e) => B()
-			}, [t.$slots.optionZoom ? x(t.$slots, "optionZoom", h(f({ key: 0 }, {
-				toggleZoom: B,
-				isZoomLocked: !e.isZoom
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isZoom ? (y(), s(r, {
-				key: 0,
-				name: "zoomUnlock",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "zoomLock",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.zoom ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.zoom,
-					"button-info-left-visible": e.position === "left" && Y.value.zoom
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.zoom), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasAnimation ? (y(), l("button", {
-				key: 11,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[54] ||= (e) => Y.value.animation = !0,
-				onMouseout: n[55] ||= (e) => Y.value.animation = !1,
-				onClick: R
-			}, [t.$slots.optionAnimation ? x(t.$slots, "optionAnimation", h(f({ key: 0 }, {
-				toggleAnimation: R,
-				isAnimated: L.value
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [L.value ? (y(), s(r, {
-				key: 0,
-				name: "play",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "pause",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.fullscreen ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.animation,
-					"button-info-left-visible": e.position === "left" && Y.value.animation
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.animation), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasAnnotator ? (y(), l("button", {
-				key: 12,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[56] ||= (e) => Y.value.annotator = !0,
-				onMouseout: n[57] ||= (e) => Y.value.annotator = !1,
-				onClick: H
-			}, [t.$slots.optionAnnotator ? x(t.$slots, "optionAnnotator", h(f({ key: 0 }, {
-				toggleAnnotator: H,
-				isAnnotator: V.value
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [V.value ? (y(), s(r, {
-				key: 0,
-				name: "annotatorDisabled",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
-				key: 1,
-				name: "annotator",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"]))], 64)), J.value && e.titles.annotator ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.annotator,
-					"button-info-left-visible": e.position === "left" && Y.value.annotator
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.annotator), 7)) : c("", !0)], 32)) : c("", !0),
-			e.hasAltCopy ? (y(), l("button", {
-				key: 13,
-				tabindex: "0",
-				class: "vue-ui-user-options-button",
-				onMouseenter: n[58] ||= (e) => Y.value.altCopy = !0,
-				onMouseout: n[59] ||= (e) => Y.value.altCopy = !1,
-				onClick: H
-			}, [t.$slots.optionAltCopy ? x(t.$slots, "optionAltCopy", h(f({ key: 0 }, { copyAlt: W })), void 0, !0) : (y(), s(r, {
-				key: 1,
-				name: "accessibility",
-				stroke: e.color,
-				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.altCopy ? (y(), l("div", {
-				key: 2,
-				dir: "auto",
-				class: m({
-					"button-info-left": e.position === "left",
-					"button-info-right": e.position === "right",
-					"button-info-right-visible": e.position === "right" && Y.value.altCopy,
-					"button-info-left-visible": e.position === "left" && Y.value.altCopy
-				}),
-				style: g({
-					background: e.backgroundColor,
-					color: e.color
-				})
-			}, S(e.titles.altCopy), 7)) : c("", !0)], 32)) : c("", !0),
-			x(t.$slots, "custom-menu-actions", {}, void 0, !0)
-		], 12, le)], 36)), [[te(i), xe]]);
-	}
-}, [["__scopeId", "data-v-4fbb340e"]]);
-//#endregion
-export { w as n, T as t };