vue-data-ui 3.22.11 → 3.22.13

package/dist/{UserOptions-B69xBEVP.js → UserOptions-DzAFK9cY.js}

@@ -3,9 +3,9 @@ import { t } from "./img-Bikk1dGb.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./BaseIcon-CP5RWnqt.js";
 import { t as i } from "./vClickOutside-DUrZWttG.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";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, guardReactiveProps as f, nextTick as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as ee, openBlock as v, ref as y, renderSlot as b, toDisplayString as x, unref as S, watch as te, withDirectives as ne, withKeys as C, withModifiers as w } from "vue";
 //#region src/directives/vPopoverClickOutside.js
-var ae = {
+var re = {
 	beforeMount(e, t) {
 		let n = () => typeof t.value == "function" ? {
 			handler: t.value,
@@ -58,7 +58,7 @@ var ae = {
 		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({
+}, T = /* @__PURE__ */ e({ default: () => E }), ie = ["title", "onKeydown"], ae = ["popover", "data-open"], oe = ["title"], se = ["data-open"], E = /*#__PURE__*/ n({
 	__name: "UserOptions",
 	props: {
 		hasPdf: {
@@ -222,109 +222,109 @@ var ae = {
 		"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) {
+	setup(e, { expose: n, emit: T }) {
+		let E = e, D = T, O = y(null), k = y(null), A = y(null), j = y(!1), M = o(() => typeof window < "u" && typeof HTMLElement < "u" && "popover" in HTMLElement.prototype);
+		async function ce() {
+			if (E.callbacks.pdf) {
 				let { imageUri: e, base64: n } = await t({
-					domElement: T.chartElement,
+					domElement: E.chartElement,
 					base64: !0,
 					img: !0,
-					scale: T.printScale
+					scale: E.printScale
 				});
-				T.callbacks.pdf({
-					domElement: T.chartElement,
+				E.callbacks.pdf({
+					domElement: E.chartElement,
 					base64: n,
 					imageUri: e
 				});
-			} else E("generatePdf");
+			} else D("generatePdf");
 		}
-		function de() {
-			E("generateCsv", T.callbacks.csv);
+		function le() {
+			D("generateCsv", E.callbacks.csv);
 		}
-		async function M() {
-			if (T.callbacks.img) {
-				E("generateImage", { stage: "start" });
+		async function ue() {
+			if (E.callbacks.img) {
+				D("generateImage", { stage: "start" });
 				try {
 					let { imageUri: e, base64: n } = await t({
-						domElement: T.chartElement,
+						domElement: E.chartElement,
 						base64: !0,
 						img: !0,
-						scale: T.printScale
+						scale: E.printScale
 					});
-					await Promise.resolve(T.callbacks.img({
-						domElement: T.chartElement,
+					await Promise.resolve(E.callbacks.img({
+						domElement: E.chartElement,
 						imageUri: e,
 						base64: n
 					}));
 				} finally {
-					E("generateImage", { stage: "end" });
+					D("generateImage", { stage: "end" });
 				}
-			} else E("generateImage");
+			} else D("generateImage");
 		}
-		function fe() {
-			E("generateSvg", { isCb: !!T.callbacks.svg });
+		function de() {
+			D("generateSvg", { isCb: !!E.callbacks.svg });
 		}
-		let N = b(!1);
-		function P() {
-			T.callbacks.table ? T.callbacks.table() : (N.value = !N.value, E("toggleTable"));
+		let N = y(!1);
+		function fe() {
+			E.callbacks.table ? E.callbacks.table() : (N.value = !N.value, D("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 P = y(E.isLabelActive);
+		function F() {
+			E.callbacks.labels ? E.callbacks.labels() : (P.value = !P.value, D("toggleLabels"));
 		}
-		let L = b(T.isAnimation);
-		function R() {
-			T.callbacks.animation ? T.callbacks.animation() : (L.value = !L.value, E("toggleAnimation"));
+		let I = y(E.isAnimation);
+		function L() {
+			E.callbacks.animation ? E.callbacks.animation() : (I.value = !I.value, D("toggleAnimation"));
 		}
-		let z = b(T.isZoom);
-		function B() {
-			T.callbacks.zoom ? T.callbacks.zoom() : (z.value = !z.value, E("toggleZoom"));
+		let R = y(E.isZoom);
+		function z() {
+			E.callbacks.zoom ? E.callbacks.zoom() : (R.value = !R.value, D("toggleZoom"));
 		}
-		let V = o({
-			get: () => T.isAnnotation,
+		let B = o({
+			get: () => E.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");
+		function V() {
+			E.callbacks.annotator ? E.callbacks.annotator() : (B.value = !B.value, D("toggleAnnotator"));
 		}
-		let G = b(T.isStacked);
 		function me() {
-			T.callbacks.stack ? T.callbacks.stack() : (G.value = !G.value, E("toggleStack"));
+			E.callbacks.sort ? E.callbacks.sort() : D("toggleSort");
 		}
-		let K = b(T.isTooltip);
+		function H() {
+			D("copyAlt");
+		}
+		let U = y(E.isStacked);
 		function he() {
-			T.callbacks.tooltip ? T.callbacks.tooltip() : (K.value = !K.value, E("toggleTooltip"));
+			E.callbacks.stack ? E.callbacks.stack() : (U.value = !U.value, D("toggleStack"));
+		}
+		let W = y(E.isTooltip);
+		function G() {
+			E.callbacks.tooltip ? E.callbacks.tooltip() : (W.value = !W.value, D("toggleTooltip"));
 		}
 		let ge = o({
-			get: () => T.isFullscreen,
-			set: (e) => E("toggleFullscreen", e)
+			get: () => E.isFullscreen,
+			set: (e) => D("toggleFullscreen", e)
 		});
-		function q() {
-			if (!T.chartElement) return;
-			let e = !T.isFullscreen;
-			ge.value = e, e ? T.chartElement.requestFullscreen() : document.exitFullscreen();
+		function K() {
+			if (!E.chartElement) return;
+			let e = !E.isFullscreen;
+			ge.value = e, e ? E.chartElement.requestFullscreen() : document.exitFullscreen();
 		}
 		function _e() {
 			let e = !!document.fullscreenElement;
-			E("toggleFullscreen", e);
+			D("toggleFullscreen", e);
 		}
-		v(() => {
+		ee(() => {
 			document.addEventListener("fullscreenchange", _e);
 		}), _(() => {
 			document.removeEventListener("fullscreenchange", _e);
 		});
-		let J = b(window.innerWidth > 600), Y = b({
+		let q = y(window.innerWidth > 600), J = y({
 			tooltip: !1,
 			pdf: !1,
 			csv: !1,
@@ -339,37 +339,37 @@ var ae = {
 			svg: !1,
 			zoom: !1,
 			altCopy: !1
-		}), ve = b(!0);
+		}), ve = y(!0);
 		function ye() {
-			J.value = window.innerWidth > 600, A.value = !A.value, A.value && (ve.value = !1);
+			q.value = window.innerWidth > 600, j.value = !j.value, j.value && (ve.value = !1);
 		}
 		function be() {
-			T.isPrinting || T.isImaging || (A.value = !1);
+			E.isPrinting || E.isImaging || (j.value = !1);
 		}
 		function xe() {
-			A.value && be();
+			j.value && be();
 		}
-		let X = b(0);
+		let Y = y(0);
 		function Se() {
-			X.value = performance.now() + 50;
+			Y.value = performance.now() + 50;
 		}
-		function Z() {
-			T.isPrinting || T.isImaging || (j.value && $(), A.value = !1);
+		function X() {
+			E.isPrinting || E.isImaging || (M.value && Q(), j.value = !1);
 		}
 		function Ce() {
-			performance.now() < X.value || Z();
+			performance.now() < Y.value || X();
 		}
 		function we() {
-			if (J.value = window.innerWidth > 600, !j.value) {
-				A.value || Se(), A.value = !A.value;
+			if (q.value = window.innerWidth > 600, !M.value) {
+				j.value || Se(), j.value = !j.value;
 				return;
 			}
-			let e = k.value;
-			if (e && e.matches && e.matches(":popover-open") || A.value) {
-				A.value = !1, $();
+			let e = A.value;
+			if (e && e.matches && e.matches(":popover-open") || j.value) {
+				j.value = !1, Q();
 				return;
 			}
-			Se(), A.value = !0;
+			Se(), j.value = !0;
 		}
 		function Te() {
 			we();
@@ -379,24 +379,24 @@ var ae = {
 			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;
+			if (e.style.width = "", e.style.left = "", e.style.right = "", e.style.top = "", e.style.position = "absolute", e.style.top = "36px", E.position === "right") {
+				let t = E.offsetX ? E.offsetX : E.noOffset ? 0 : 4;
 				e.style.right = `${t}px`, e.style.left = "auto";
 			} else {
-				let t = T.noOffset ? 0 : 4;
+				let t = E.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);
+			if (!M.value || !j.value || !O.value || !A.value) return;
+			let e = O.value.getBoundingClientRect(), t = A.value.getBoundingClientRect(), n = e.top + 38;
+			if (E.position === "right") {
+				let r = E.offsetX ? E.offsetX : E.noOffset ? 0 : 4, i = e.right - r - t.width;
+				Ee(A.value, n, i, t.width);
 			} else {
-				let r = T.noOffset ? 0 : 4, i = e.left + r;
-				Ee(k.value, n, i, t.width);
+				let r = E.noOffset ? 0 : 4, i = e.left + r;
+				Ee(A.value, n, i, t.width);
 			}
 		}
 		let ke = 0;
@@ -405,16 +405,16 @@ var ae = {
 				Oe();
 			});
 		}
-		function Q() {
-			j.value && A.value && Ae();
+		function Z() {
+			M.value && j.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 (!M.value) return;
+			let t = A.value;
 			if (!t) return;
 			let n = t.getAttribute("style") || "", r = t.getAttribute("data-open");
 			t.setAttribute("popover", "manual");
@@ -428,9 +428,9 @@ var ae = {
 				} catch {}
 			}
 		}
-		function $() {
-			if (!j.value) return;
-			let e = k.value;
+		function Q() {
+			if (!M.value) return;
+			let e = A.value;
 			if (e) {
 				e.setAttribute("popover", "manual");
 				try {
@@ -442,9 +442,9 @@ var ae = {
 			}
 		}
 		function Ne() {
-			if (!j.value) return;
-			let e = k.value;
-			e && (A.value &&= typeof e.matches == "function" && (() => {
+			if (!M.value) return;
+			let e = A.value;
+			e && (j.value &&= typeof e.matches == "function" && (() => {
 				try {
 					return e.matches(":popover-open");
 				} catch {
@@ -453,960 +453,960 @@ var ae = {
 			})());
 		}
 		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();
+			if (!M.value || !j.value || performance.now() < Y.value) return;
+			let t = e.composedPath ? e.composedPath() : [], n = k.value ? t.includes(k.value) : !1, r = A.value ? t.includes(A.value) : !1;
+			!n && !r && X();
 		}
-		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()) : $());
+		te(() => E.isFullscreen, async () => {
+			M.value && (await p(), j.value && Me());
+		}), te(() => j.value, async (e) => {
+			M.value && (await p(), e ? (await Me(!1), Oe()) : Q());
 		});
-		function Fe(e) {
-			e.key === "Escape" && D.value && D.value.contains(document.activeElement) && (e.preventDefault(), e.stopPropagation(), Z(), O.value?.focus());
+		function $(e) {
+			e.key === "Escape" && O.value && O.value.contains(document.activeElement) && (e.preventDefault(), e.stopPropagation(), X(), k.value?.focus());
 		}
-		return v(() => {
-			window.addEventListener("pointerdown", Pe, !0), window.addEventListener("resize", Q, { passive: !0 }), window.addEventListener("scroll", Q, {
+		return ee(() => {
+			window.addEventListener("pointerdown", Pe, !0), window.addEventListener("resize", Z, { passive: !0 }), window.addEventListener("scroll", Z, {
 				passive: !0,
 				capture: !0
-			}), k.value && k.value.addEventListener("toggle", Ne);
+			}), A.value && A.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", {
+			window.removeEventListener("pointerdown", Pe, !0), window.removeEventListener("resize", Z), window.removeEventListener("scroll", Z, !0), A.value && A.value.removeEventListener("toggle", Ne);
+		}), (t, n) => M.value ? ne((v(), l("div", {
 			key: 0,
 			ref_key: "rootRef",
-			ref: D,
+			ref: O,
 			"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
+			onKeydown: $
 		}, [u("div", {
 			ref_key: "triggerRef",
-			ref: O,
+			ref: k,
 			tabindex: "0",
 			role: "button",
-			title: A.value ? e.titles.close || "" : e.titles.open || "",
+			title: j.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,
+			onPointerdown: w(we, ["stop", "prevent"]),
+			onKeydown: C(w(Te, ["stop", "prevent"]), ["enter"])
+		}, [b(t.$slots, "menuIcon", h(f({
+			isOpen: j.value,
 			color: e.color
 		})), () => [d(r, {
-			name: A.value ? "close" : "menu",
+			name: j.value ? "close" : "menu",
 			stroke: e.color,
 			"stroke-width": 2
-		}, null, 8, ["name", "stroke"])], !0)], 44, oe), u("div", {
+		}, null, 8, ["name", "stroke"])], !0)], 44, ie), u("div", {
 			ref_key: "drawerRef",
-			ref: k,
-			popover: j.value ? "manual" : null,
-			"data-open": j.value ? null : A.value,
+			ref: A,
+			popover: M.value ? "manual" : null,
+			"data-open": M.value ? null : j.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`}`)
+			style: g(M.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", {
+			b(t.$slots, "custom-menu-before", {}, void 0, !0),
+			e.hasPdf ? (v(), 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,
+				onClick: ce,
+				onMouseenter: n[0] ||= (e) => J.value.pdf = !0,
+				onMouseout: n[1] ||= (e) => J.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, {
+			}, [t.$slots.optionPdf ? b(t.$slots, "optionPdf", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isPrinting ? (v(), s(r, {
 				key: 0,
 				name: "hourglass",
 				isSpin: "",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.pdf ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.pdf,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.pdf), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasXls ? (v(), 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,
+				onClick: le,
+				onMouseenter: n[2] ||= (e) => J.value.csv = !0,
+				onMouseout: n[3] ||= (e) => J.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, {
+			}, [t.$slots.optionCsv ? b(t.$slots, "optionCsv", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "fileCsv",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.csv ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.csv ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.csv,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.csv), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasImg ? (v(), 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,
+				onClick: ue,
+				onMouseenter: n[4] ||= (e) => J.value.img = !0,
+				onMouseout: n[5] ||= (e) => J.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, {
+			}, [t.$slots.optionImg ? b(t.$slots, "optionImg", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isImaging ? (v(), s(r, {
 				key: 0,
 				name: "hourglass",
 				isSpin: "",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.img ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.img,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.img), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasSvg ? (v(), 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,
+				onClick: de,
+				onMouseenter: n[6] ||= (e) => J.value.svg = !0,
+				onMouseout: n[7] ||= (e) => J.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, {
+			}, [t.$slots.optionSvg ? b(t.$slots, "optionSvg", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "fileSvg",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.svg ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.svg ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.svg,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.svg), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasTooltip ? (v(), 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,
+				onClick: G,
+				onMouseenter: n[8] ||= (e) => J.value.tooltip = !0,
+				onMouseout: n[9] ||= (e) => J.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, {
+			}, [t.$slots.optionTooltip ? b(t.$slots, "optionTooltip", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [W.value ? (v(), s(r, {
 				key: 0,
 				name: "tooltip",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.tooltip ? (v(), 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
+					"button-info-left-visible": e.position === "left" && J.value.tooltip,
+					"button-info-right-visible": e.position === "right" && J.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", {
+			}, x(e.titles.tooltip), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasTable ? (v(), 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,
+				onClick: fe,
+				onMouseenter: n[10] ||= (e) => J.value.table = !0,
+				onMouseout: n[11] ||= (e) => J.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, {
+			}, [t.$slots.optionTable ? b(t.$slots, "optionTable", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.tableDialog ? (v(), s(r, {
 				key: 0,
 				name: N.value ? "tableDialogClose" : "tableDialogOpen",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])) : (y(), s(r, {
+			}, null, 8, ["name", "stroke"])) : (v(), 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", {
+			}, null, 8, ["name", "stroke"]))], 64)), q.value && e.titles.table ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.table,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.table), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasLabel ? (v(), 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,
+				onClick: F,
+				onMouseenter: n[12] ||= (e) => J.value.labels = !0,
+				onMouseout: n[13] ||= (e) => J.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, {
+			}, [t.$slots.optionLabels ? b(t.$slots, "optionLabels", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
-				name: F.value ? "labelClose" : "labelOpen",
+				name: P.value ? "labelClose" : "labelOpen",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])), J.value && e.titles.labels ? (y(), l("div", {
+			}, null, 8, ["name", "stroke"])), q.value && e.titles.labels ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.labels,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.labels), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasSort ? (v(), 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,
+				onClick: me,
+				onMouseenter: n[14] ||= (e) => J.value.sort = !0,
+				onMouseout: n[15] ||= (e) => J.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, {
+			}, [t.$slots.optionSort ? b(t.$slots, "optionSort", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "sort",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.sort ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.sort ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.sort,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.sort), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasStack ? (v(), 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,
+				onClick: he,
+				onMouseenter: n[16] ||= (e) => J.value.stack = !0,
+				onMouseout: n[17] ||= (e) => J.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, {
+			}, [t.$slots.optionStack ? b(t.$slots, "optionStack", h(f({ isStack: U.value })), void 0, !0, 0) : (v(), l(a, { key: 1 }, [U.value ? (v(), s(r, {
 				key: 0,
 				name: "unstack",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.stack ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.stack,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.stack), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasFullscreen ? (v(), 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"),
+				onMouseenter: n[18] ||= (e) => J.value.fullscreen = !0,
+				onMouseout: n[19] ||= (e) => J.value.fullscreen = !1,
+				onClick: n[20] ||= (t) => K(e.isFullscreen ? "out" : "in"),
 				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionFullscreen ? x(t.$slots, "optionFullscreen", h(f({ key: 0 }, {
-				toggleFullscreen: q,
+			}, [t.$slots.optionFullscreen ? b(t.$slots, "optionFullscreen", h(f({
+				toggleFullscreen: K,
 				isFullscreen: e.isFullscreen
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isFullscreen ? (y(), s(r, {
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isFullscreen ? (v(), s(r, {
 				key: 0,
 				name: "exitFullscreen",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.fullscreen ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.fullscreen,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.fullscreen), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasZoom ? (v(), 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(),
+				onMouseenter: n[21] ||= (e) => J.value.zoom = !0,
+				onMouseout: n[22] ||= (e) => J.value.zoom = !1,
+				onClick: n[23] ||= (e) => z(),
 				style: g({ cursor: e.isCursorPointer ? "pointer" : "default" })
-			}, [t.$slots.optionZoom ? x(t.$slots, "optionZoom", h(f({ key: 0 }, {
-				toggleZoom: B,
+			}, [t.$slots.optionZoom ? b(t.$slots, "optionZoom", h(f({
+				toggleZoom: z,
 				isZoomLocked: !e.isZoom
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isZoom ? (y(), s(r, {
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isZoom ? (v(), s(r, {
 				key: 0,
 				name: "zoomUnlock",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.zoom ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.zoom,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.zoom), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasAnimation ? (v(), 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,
+				onMouseenter: n[24] ||= (e) => J.value.animation = !0,
+				onMouseout: n[25] ||= (e) => J.value.animation = !1,
+				onClick: L,
 				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, {
+			}, [t.$slots.optionAnimation ? b(t.$slots, "optionAnimation", h(f({
+				toggleAnimation: L,
+				isAnimated: I.value
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [I.value ? (v(), s(r, {
 				key: 0,
 				name: "play",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.fullscreen ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.animation,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.animation), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasAnnotator ? (v(), 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,
+				onMouseenter: n[26] ||= (e) => J.value.annotator = !0,
+				onMouseout: n[27] ||= (e) => J.value.annotator = !1,
+				onClick: V,
 				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, {
+			}, [t.$slots.optionAnnotator ? b(t.$slots, "optionAnnotator", h(f({
+				toggleAnnotator: V,
+				isAnnotator: B.value
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [B.value ? (v(), s(r, {
 				key: 0,
 				name: "annotatorDisabled",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.annotator ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.annotator,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.annotator), 7)) : c("", !0)], 36)) : c("", !0),
+			e.hasAltCopy ? (v(), 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,
+				onMouseenter: n[28] ||= (e) => J.value.altCopy = !0,
+				onMouseout: n[29] ||= (e) => J.value.altCopy = !1,
+				onClick: H,
 				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, {
+			}, [t.$slots.optionAltCopy ? b(t.$slots, "optionAltCopy", h(f({ copyAlt: H })), void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "accessibility",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.altCopy ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.altCopy ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.altCopy,
+					"button-info-left-visible": e.position === "left" && J.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 : {
+			}, x(e.titles.altCopy), 7)) : c("", !0)], 36)) : c("", !0),
+			b(t.$slots, "custom-menu-after", {}, void 0, !0)
+		], 12, ae)], 36)), [[S(re), M.value ? null : {
 			targets: [
-				D.value,
-				k.value,
-				O.value
+				O.value,
+				A.value,
+				k.value
 			],
 			handler: Ce
-		}]]) : re((y(), l("div", {
+		}]]) : ne((v(), l("div", {
 			key: 1,
 			ref_key: "rootRef",
-			ref: D,
+			ref: O,
 			"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
+			onKeydown: $
 		}, [u("div", {
 			ref_key: "triggerRef",
-			ref: O,
+			ref: k,
 			tabindex: "0",
-			title: A.value ? e.titles.close || "" : e.titles.open || "",
+			title: j.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,
+			onClick: w(ye, ["stop"]),
+			onKeypress: C(ye, ["enter"])
+		}, [b(t.$slots, "menuIcon", h(f({
+			isOpen: j.value,
 			color: e.color
 		})), () => [d(r, {
-			name: A.value ? "close" : "menu",
+			name: j.value ? "close" : "menu",
 			stroke: e.color,
 			"stroke-width": 2
-		}, null, 8, ["name", "stroke"])], !0)], 44, ce), u("div", {
+		}, null, 8, ["name", "stroke"])], !0)], 44, oe), u("div", {
 			ref_key: "drawerRef",
-			ref: k,
-			"data-open": A.value,
+			ref: A,
+			"data-open": j.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", {
+			b(t.$slots, "custom-menu-before", {}, void 0, !0),
+			e.hasPdf ? (v(), 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, {
+				onClick: ce,
+				onMouseenter: n[30] ||= (e) => J.value.pdf = !0,
+				onMouseout: n[31] ||= (e) => J.value.pdf = !1
+			}, [t.$slots.optionPdf ? b(t.$slots, "optionPdf", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isPrinting ? (v(), s(r, {
 				key: 0,
 				name: "hourglass",
 				isSpin: "",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.pdf ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.pdf,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.pdf), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasXls ? (v(), 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, {
+				onClick: le,
+				onMouseenter: n[32] ||= (e) => J.value.csv = !0,
+				onMouseout: n[33] ||= (e) => J.value.csv = !1
+			}, [t.$slots.optionCsv ? b(t.$slots, "optionCsv", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "fileCsv",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.csv ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.csv ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.csv,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.csv), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasImg ? (v(), 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, {
+				onClick: ue,
+				onMouseenter: n[34] ||= (e) => J.value.img = !0,
+				onMouseout: n[35] ||= (e) => J.value.img = !1
+			}, [t.$slots.optionImg ? b(t.$slots, "optionImg", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isImaging ? (v(), s(r, {
 				key: 0,
 				name: "hourglass",
 				isSpin: "",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.img ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.img,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.img), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasSvg ? (v(), 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, {
+				onClick: de,
+				onMouseenter: n[36] ||= (e) => J.value.svg = !0,
+				onMouseout: n[37] ||= (e) => J.value.svg = !1
+			}, [t.$slots.optionSvg ? b(t.$slots, "optionSvg", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "fileSvg",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.svg ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.svg ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.svg,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.svg), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasTooltip ? (v(), 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, {
+				onClick: G,
+				onMouseenter: n[38] ||= (e) => J.value.tooltip = !0,
+				onMouseout: n[39] ||= (e) => J.value.tooltip = !1
+			}, [t.$slots.optionTooltip ? b(t.$slots, "optionTooltip", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [W.value ? (v(), s(r, {
 				key: 0,
 				name: "tooltip",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.tooltip ? (v(), 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
+					"button-info-left-visible": e.position === "left" && J.value.tooltip,
+					"button-info-right-visible": e.position === "right" && J.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", {
+			}, x(e.titles.tooltip), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasTable ? (v(), 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, {
+				onClick: fe,
+				onMouseenter: n[40] ||= (e) => J.value.table = !0,
+				onMouseout: n[41] ||= (e) => J.value.table = !1
+			}, [t.$slots.optionTable ? b(t.$slots, "optionTable", {}, void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.tableDialog ? (v(), s(r, {
 				key: 0,
 				name: N.value ? "tableDialogClose" : "tableDialogOpen",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])) : (y(), s(r, {
+			}, null, 8, ["name", "stroke"])) : (v(), 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", {
+			}, null, 8, ["name", "stroke"]))], 64)), q.value && e.titles.table ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.table,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.table), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasLabel ? (v(), 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, {
+				onClick: F,
+				onMouseenter: n[42] ||= (e) => J.value.labels = !0,
+				onMouseout: n[43] ||= (e) => J.value.labels = !1
+			}, [t.$slots.optionLabels ? b(t.$slots, "optionLabels", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
-				name: F.value ? "labelClose" : "labelOpen",
+				name: P.value ? "labelClose" : "labelOpen",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["name", "stroke"])), J.value && e.titles.labels ? (y(), l("div", {
+			}, null, 8, ["name", "stroke"])), q.value && e.titles.labels ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.labels,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.labels), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasSort ? (v(), 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, {
+				onClick: me,
+				onMouseenter: n[44] ||= (e) => J.value.sort = !0,
+				onMouseout: n[45] ||= (e) => J.value.sort = !1
+			}, [t.$slots.optionSort ? b(t.$slots, "optionSort", {}, void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "sort",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.sort ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.sort ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.sort,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.sort), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasStack ? (v(), 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, {
+				onClick: he,
+				onMouseenter: n[46] ||= (e) => J.value.stack = !0,
+				onMouseout: n[47] ||= (e) => J.value.stack = !1
+			}, [t.$slots.optionStack ? b(t.$slots, "optionStack", h(f({ isStack: U.value })), void 0, !0, 0) : (v(), l(a, { key: 1 }, [U.value ? (v(), s(r, {
 				key: 0,
 				name: "unstack",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.stack ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.stack,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.stack), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasFullscreen ? (v(), 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,
+				onMouseenter: n[48] ||= (e) => J.value.fullscreen = !0,
+				onMouseout: n[49] ||= (e) => J.value.fullscreen = !1,
+				onClick: n[50] ||= (t) => K(e.isFullscreen ? "out" : "in")
+			}, [t.$slots.optionFullscreen ? b(t.$slots, "optionFullscreen", h(f({
+				toggleFullscreen: K,
 				isFullscreen: e.isFullscreen
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isFullscreen ? (y(), s(r, {
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isFullscreen ? (v(), s(r, {
 				key: 0,
 				name: "exitFullscreen",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.fullscreen ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.fullscreen,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.fullscreen), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasZoom ? (v(), 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,
+				onMouseenter: n[51] ||= (e) => J.value.zoom = !0,
+				onMouseout: n[52] ||= (e) => J.value.zoom = !1,
+				onClick: n[53] ||= (e) => z()
+			}, [t.$slots.optionZoom ? b(t.$slots, "optionZoom", h(f({
+				toggleZoom: z,
 				isZoomLocked: !e.isZoom
-			})), void 0, !0) : (y(), l(a, { key: 1 }, [e.isZoom ? (y(), s(r, {
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [e.isZoom ? (v(), s(r, {
 				key: 0,
 				name: "zoomUnlock",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.zoom ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.zoom,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.zoom), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasAnimation ? (v(), 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, {
+				onMouseenter: n[54] ||= (e) => J.value.animation = !0,
+				onMouseout: n[55] ||= (e) => J.value.animation = !1,
+				onClick: L
+			}, [t.$slots.optionAnimation ? b(t.$slots, "optionAnimation", h(f({
+				toggleAnimation: L,
+				isAnimated: I.value
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [I.value ? (v(), s(r, {
 				key: 0,
 				name: "play",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.fullscreen ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.animation,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.animation), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasAnnotator ? (v(), 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, {
+				onMouseenter: n[56] ||= (e) => J.value.annotator = !0,
+				onMouseout: n[57] ||= (e) => J.value.annotator = !1,
+				onClick: V
+			}, [t.$slots.optionAnnotator ? b(t.$slots, "optionAnnotator", h(f({
+				toggleAnnotator: V,
+				isAnnotator: B.value
+			})), void 0, !0, 0) : (v(), l(a, { key: 1 }, [B.value ? (v(), s(r, {
 				key: 0,
 				name: "annotatorDisabled",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])) : (y(), s(r, {
+			}, null, 8, ["stroke"])) : (v(), 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", {
+			}, null, 8, ["stroke"]))], 64)), q.value && e.titles.annotator ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.annotator,
+					"button-info-left-visible": e.position === "left" && J.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", {
+			}, x(e.titles.annotator), 7)) : c("", !0)], 32)) : c("", !0),
+			e.hasAltCopy ? (v(), 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, {
+				onMouseenter: n[58] ||= (e) => J.value.altCopy = !0,
+				onMouseout: n[59] ||= (e) => J.value.altCopy = !1,
+				onClick: V
+			}, [t.$slots.optionAltCopy ? b(t.$slots, "optionAltCopy", h(f({ copyAlt: H })), void 0, !0, 0) : (v(), s(r, {
 				key: 1,
 				name: "accessibility",
 				stroke: e.color,
 				style: { "pointer-events": "none" }
-			}, null, 8, ["stroke"])), J.value && e.titles.altCopy ? (y(), l("div", {
+			}, null, 8, ["stroke"])), q.value && e.titles.altCopy ? (v(), 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
+					"button-info-right-visible": e.position === "right" && J.value.altCopy,
+					"button-info-left-visible": e.position === "left" && J.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]]);
+			}, x(e.titles.altCopy), 7)) : c("", !0)], 32)) : c("", !0),
+			b(t.$slots, "custom-menu-actions", {}, void 0, !0)
+		], 12, se)], 36)), [[S(i), xe]]);
 	}
 }, [["__scopeId", "data-v-4fbb340e"]]);
 //#endregion
-export { w as n, T as t };
+export { T as n, E as t };