vue-data-ui 3.17.13 → 3.18.1

package/dist/UserOptions-DMw8EZEo.js

@@ -0,0 +1,1407 @@
+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-CEmt3Ifx.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`}`)
+		}, [
+			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)
+		], 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`}`)
+		}, [
+			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)
+		], 12, le)], 36)), [[te(i), xe]]);
+	}
+}, [["__scopeId", "data-v-87f859f9"]]);
+//#endregion
+export { w as n, T as t };