vue-data-ui 2.12.8-beta.2 → 2.12.8-beta.4

package/dist/{UserOptions-CGn3YdRV.js → UserOptions-Cs7JW3dK.js}

@@ -1,8 +1,9 @@
-import { ref as c, computed as G, onMounted as J, onBeforeUnmount as Q, withDirectives as Y, createElementBlock as i, openBlock as t, normalizeStyle as f, createElementVNode as X, withKeys as Z, withModifiers as p, renderSlot as d, normalizeProps as A, guardReactiveProps as _, createVNode as ee, normalizeClass as b, createCommentVNode as s, Fragment as h, createBlock as r, toDisplayString as y, mergeProps as F, unref as te } from "vue";
+import { ref as m, computed as G, onMounted as J, onBeforeUnmount as Q, withDirectives as Y, createElementBlock as s, openBlock as t, normalizeStyle as v, createElementVNode as X, withKeys as Z, withModifiers as p, renderSlot as k, normalizeProps as A, guardReactiveProps as _, createVNode as ee, normalizeClass as d, createCommentVNode as a, Fragment as h, createBlock as f, toDisplayString as y, mergeProps as F, unref as te } from "vue";
 import { v as oe } from "./vClickOutside-C6WiFswA.js";
-import a from "./BaseIcon-j0c6lJUs.js";
-import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const le = ["title"], ie = ["data-open"], se = {
+import r from "./BaseIcon-d4dmqhkb.js";
+import ne from "./img-fdViJw1e.js";
+import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ie = ["title"], se = ["data-open"], ae = {
   __name: "UserOptions",
   props: {
     hasPdf: {
@@ -122,73 +123,88 @@ const le = ["title"], ie = ["data-open"], se = {
     isAnnotation: {
       type: Boolean,
       default: !1
+    },
+    callbacks: {
+      type: Object,
+      default() {
+        return {};
+      }
     }
   },
   emits: ["generatePdf", "generateCsv", "generateImage", "toggleTable", "toggleLabels", "toggleSort", "toggleFullscreen", "toggleStack", "toggleTooltip", "toggleAnimation", "toggleAnnotator"],
   setup(e, { emit: z }) {
-    const m = e, v = z;
+    const i = e, b = z;
     function D() {
-      v("generatePdf");
+      i.callbacks.pdf ? i.callbacks.pdf(i.chartElement) : b("generatePdf");
     }
     function N() {
-      v("generateCsv");
+      b("generateCsv", i.callbacks.csv);
     }
-    function U() {
-      v("generateImage");
+    async function j() {
+      if (i.callbacks.img) {
+        const l = await ne({ domElement: i.chartElement, base64: !0 });
+        i.callbacks.img(l);
+      } else
+        b("generateImage");
     }
-    const B = c(!1);
-    function V() {
-      B.value = !B.value, v("toggleTable");
+    const B = m(!1);
+    function U() {
+      i.callbacks.table ? i.callbacks.table() : (B.value = !B.value, b("toggleTable"));
     }
-    const $ = c(!1), j = c(!0);
+    const $ = m(!1), V = m(!0);
     function O() {
-      g.value = window.innerWidth > 600, $.value = !$.value, $.value && (j.value = !1);
+      g.value = window.innerWidth > 600, $.value = !$.value, $.value && (V.value = !1);
     }
     function K() {
-      m.isPrinting || m.isImaging || ($.value = !1);
+      i.isPrinting || i.isImaging || ($.value = !1);
     }
     function W() {
       $.value && K();
     }
-    const M = c(m.isLabelActive);
+    const M = m(i.isLabelActive);
     function q() {
-      M.value = !M.value, v("toggleLabels");
+      i.callbacks.labels ? i.callbacks.labels() : (M.value = !M.value, b("toggleLabels"));
     }
-    const C = c(m.isAnimation);
+    const C = m(i.isAnimation);
     function L() {
-      C.value = !C.value, v("toggleAnimation");
+      i.callbacks.animation ? i.callbacks.animation() : (C.value = !C.value, b("toggleAnimation"));
     }
     const S = G({
-      get: () => m.isAnnotation,
+      get: () => i.isAnnotation,
       set: (l) => l
     });
     function P() {
-      S.value = !S.value, v("toggleAnnotator");
+      i.callbacks.annotator ? i.callbacks.annotator() : (S.value = !S.value, b("toggleAnnotator"));
     }
     function H() {
-      v("toggleSort");
+      i.callbacks.sort ? i.callbacks.sort() : b("toggleSort");
     }
-    const T = c(m.isStacked);
+    const T = m(i.isStacked);
     function R() {
-      T.value = !T.value, v("toggleStack");
+      i.callbacks.stack ? i.callbacks.stack() : (T.value = !T.value, b("toggleStack"));
     }
-    const I = c(m.isTooltip);
+    const I = m(i.isTooltip);
     function x() {
-      I.value = !I.value, v("toggleTooltip");
+      i.callbacks.tooltip ? i.callbacks.tooltip() : (I.value = !I.value, b("toggleTooltip"));
     }
-    const k = c(!1);
+    const c = m(!1);
     function w(l) {
-      m.chartElement && (l === "in" ? (k.value = !0, m.chartElement.requestFullscreen(), v("toggleFullscreen", !0)) : (k.value = !1, document && document.exitFullscreen(), v("toggleFullscreen", !1)));
+      if (i.callbacks.fullscreen)
+        i.callbacks.fullscreen();
+      else {
+        if (!i.chartElement) return;
+        l === "in" ? (c.value = !0, i.chartElement.requestFullscreen(), b("toggleFullscreen", !0)) : (c.value = !1, document && document.exitFullscreen(), b("toggleFullscreen", !1));
+      }
     }
     function E(l) {
-      document.fullscreenElement ? k.value = !0 : k.value = !1;
+      document.fullscreenElement ? c.value = !0 : c.value = !1;
     }
     J(() => {
       document.addEventListener("fullscreenchange", E);
     }), Q(() => {
       document.removeEventListener("fullscreenchange", E);
     });
-    const g = c(window.innerWidth > 600), n = c({
+    const g = m(window.innerWidth > 600), n = m({
       tooltip: !1,
       pdf: !1,
       csv: !1,
@@ -201,32 +217,32 @@ const le = ["title"], ie = ["data-open"], se = {
       animation: !1,
       annotator: !1
     });
-    return (l, o) => Y((t(), i("div", {
+    return (l, o) => Y((t(), s("div", {
       "data-dom-to-png-ignore": "",
       class: "vue-ui-user-options",
-      style: f(`z-index: ${e.zIndex}; height: 34px; position: ${k.value ? "fixed" : "absolute"}; top: 0; ${e.position === "right" ? `right:${k.value ? "12px" : "0"}` : `left:${k.value ? "12px" : "0"}`}; padding: 4px; background:transparent;`)
+      style: v(`z-index: ${e.zIndex}; height: 34px; position: ${c.value ? "fixed" : "absolute"}; top: 0; ${e.position === "right" ? `right:${c.value ? "12px" : "0"}` : `left:${c.value ? "12px" : "0"}`}; padding: 4px; background:transparent;`)
     }, [
       X("div", {
         tabindex: "0",
         title: $.value ? e.titles.close || "" : e.titles.open || "",
-        style: f(`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`),
+        style: v(`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: p(O, ["stop"]),
         onKeypress: Z(O, ["enter"])
       }, [
-        d(l.$slots, "menuIcon", A(_({ isOpen: $.value, color: e.color })), () => [
-          ee(a, {
+        k(l.$slots, "menuIcon", A(_({ isOpen: $.value, color: e.color })), () => [
+          ee(r, {
             name: $.value ? "close" : "menu",
             stroke: e.color,
             "stroke-width": 2
           }, null, 8, ["name", "stroke"])
         ], !0)
-      ], 44, le),
+      ], 44, ie),
       X("div", {
         "data-open": $.value,
-        class: b({ "vue-ui-user-options-drawer": !0 }),
-        style: f(`background:${e.backgroundColor}; ${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}`)
+        class: d({ "vue-ui-user-options-drawer": !0 }),
+        style: v(`background:${e.backgroundColor}; ${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}`)
       }, [
-        e.hasTooltip ? (t(), i("button", {
+        e.hasTooltip ? (t(), s("button", {
           key: 0,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -234,27 +250,27 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseenter: o[0] || (o[0] = (u) => n.value.tooltip = !0),
           onMouseout: o[1] || (o[1] = (u) => n.value.tooltip = !1)
         }, [
-          l.$slots.optionTooltip ? d(l.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
-            I.value ? (t(), r(a, {
+          l.$slots.optionTooltip ? k(l.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (t(), s(h, { key: 1 }, [
+            I.value ? (t(), f(r, {
               key: 0,
               name: "tooltip",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), r(a, {
+            }, null, 8, ["stroke"])) : (t(), f(r, {
               key: 1,
               name: "tooltipDisabled",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          g.value && e.titles.tooltip && !l.$slots.optionTooltip ? (t(), i("div", {
+          g.value && e.titles.tooltip && !l.$slots.optionTooltip ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-left-visible": e.position === "left" && n.value.tooltip, "button-info-right-visible": e.position === "right" && n.value.tooltip }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.tooltip), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasPdf ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-left-visible": e.position === "left" && n.value.tooltip, "button-info-right-visible": e.position === "right" && n.value.tooltip }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.tooltip), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasPdf ? (t(), s("button", {
           key: 1,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -262,28 +278,28 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseenter: o[2] || (o[2] = (u) => n.value.pdf = !0),
           onMouseout: o[3] || (o[3] = (u) => n.value.pdf = !1)
         }, [
-          l.$slots.optionPdf ? d(l.$slots, "optionPdf", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
-            e.isPrinting ? (t(), r(a, {
+          l.$slots.optionPdf ? k(l.$slots, "optionPdf", { key: 0 }, void 0, !0) : (t(), s(h, { key: 1 }, [
+            e.isPrinting ? (t(), f(r, {
               key: 0,
               name: "spin",
               isSpin: "",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), r(a, {
+            }, null, 8, ["stroke"])) : (t(), f(r, {
               key: 1,
               name: "pdf",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          g.value && e.titles.pdf && !l.$slots.optionPdf ? (t(), i("div", {
+          g.value && e.titles.pdf && !l.$slots.optionPdf ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.pdf, "button-info-left-visible": e.position === "left" && n.value.pdf }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.pdf), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasXls ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.pdf, "button-info-left-visible": e.position === "left" && n.value.pdf }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.pdf), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasXls ? (t(), s("button", {
           key: 2,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -291,70 +307,70 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseenter: o[4] || (o[4] = (u) => n.value.csv = !0),
           onMouseout: o[5] || (o[5] = (u) => n.value.csv = !1)
         }, [
-          l.$slots.optionCsv ? d(l.$slots, "optionCsv", { key: 0 }, void 0, !0) : (t(), r(a, {
+          l.$slots.optionCsv ? k(l.$slots, "optionCsv", { key: 0 }, void 0, !0) : (t(), f(r, {
             key: 1,
             name: "excel",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["stroke"])),
-          g.value && e.titles.csv && !l.$slots.optionCsv ? (t(), i("div", {
+          g.value && e.titles.csv && !l.$slots.optionCsv ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.csv, "button-info-left-visible": e.position === "left" && n.value.csv }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.csv), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasImg ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.csv, "button-info-left-visible": e.position === "left" && n.value.csv }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.csv), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasImg ? (t(), s("button", {
           key: 3,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: U,
+          onClick: j,
           onMouseenter: o[6] || (o[6] = (u) => n.value.img = !0),
           onMouseout: o[7] || (o[7] = (u) => n.value.img = !1)
         }, [
-          l.$slots.optionImg ? d(l.$slots, "optionImg", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
-            e.isImaging ? (t(), r(a, {
+          l.$slots.optionImg ? k(l.$slots, "optionImg", { key: 0 }, void 0, !0) : (t(), s(h, { key: 1 }, [
+            e.isImaging ? (t(), f(r, {
               key: 0,
               name: "spin",
               isSpin: "",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), r(a, {
+            }, null, 8, ["stroke"])) : (t(), f(r, {
               key: 1,
               name: "image",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          g.value && e.titles.img && !l.$slots.optionImg ? (t(), i("div", {
+          g.value && e.titles.img && !l.$slots.optionImg ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.img, "button-info-left-visible": e.position === "left" && n.value.img }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.img), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasTable ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.img, "button-info-left-visible": e.position === "left" && n.value.img }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.img), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasTable ? (t(), s("button", {
           key: 4,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: V,
+          onClick: U,
           onMouseenter: o[8] || (o[8] = (u) => n.value.table = !0),
           onMouseout: o[9] || (o[9] = (u) => n.value.table = !1)
         }, [
-          l.$slots.optionTable ? d(l.$slots, "optionTable", { key: 0 }, void 0, !0) : (t(), r(a, {
+          l.$slots.optionTable ? k(l.$slots, "optionTable", { key: 0 }, void 0, !0) : (t(), f(r, {
             key: 1,
             name: B.value ? "tableClose" : "tableOpen",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["name", "stroke"])),
-          g.value && e.titles.table && !l.$slots.optionTable ? (t(), i("div", {
+          g.value && e.titles.table && !l.$slots.optionTable ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.table, "button-info-left-visible": e.position === "left" && n.value.table }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.table), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasLabel ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.table, "button-info-left-visible": e.position === "left" && n.value.table }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.table), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasLabel ? (t(), s("button", {
           key: 5,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -362,20 +378,20 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseenter: o[10] || (o[10] = (u) => n.value.labels = !0),
           onMouseout: o[11] || (o[11] = (u) => n.value.labels = !1)
         }, [
-          l.$slots.optionLabels ? d(l.$slots, "optionLabels", { key: 0 }, void 0, !0) : (t(), r(a, {
+          l.$slots.optionLabels ? k(l.$slots, "optionLabels", { key: 0 }, void 0, !0) : (t(), f(r, {
             key: 1,
             name: M.value ? "labelClose" : "labelOpen",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["name", "stroke"])),
-          g.value && e.titles.labels && !l.$slots.optionLabels ? (t(), i("div", {
+          g.value && e.titles.labels && !l.$slots.optionLabels ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.labels, "button-info-left-visible": e.position === "left" && n.value.labels }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.labels), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasSort ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.labels, "button-info-left-visible": e.position === "left" && n.value.labels }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.labels), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasSort ? (t(), s("button", {
           key: 6,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -383,20 +399,20 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseenter: o[12] || (o[12] = (u) => n.value.sort = !0),
           onMouseout: o[13] || (o[13] = (u) => n.value.sort = !1)
         }, [
-          l.$slots.optionSort ? d(l.$slots, "optionSort", { key: 0 }, void 0, !0) : (t(), r(a, {
+          l.$slots.optionSort ? k(l.$slots, "optionSort", { key: 0 }, void 0, !0) : (t(), f(r, {
             key: 1,
             name: "sort",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["stroke"])),
-          g.value && e.titles.sort && !l.$slots.optionSort ? (t(), i("div", {
+          g.value && e.titles.sort && !l.$slots.optionSort ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.sort, "button-info-left-visible": e.position === "left" && n.value.sort }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.sort), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasStack ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.sort, "button-info-left-visible": e.position === "left" && n.value.sort }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.sort), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasStack ? (t(), s("button", {
           key: 7,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -404,56 +420,56 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseenter: o[14] || (o[14] = (u) => n.value.stack = !0),
           onMouseout: o[15] || (o[15] = (u) => n.value.stack = !1)
         }, [
-          l.$slots.optionStack ? d(l.$slots, "optionStack", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
-            T.value ? (t(), r(a, {
+          l.$slots.optionStack ? k(l.$slots, "optionStack", { key: 0 }, void 0, !0) : (t(), s(h, { key: 1 }, [
+            T.value ? (t(), f(r, {
               key: 0,
               name: "unstack",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), r(a, {
+            }, null, 8, ["stroke"])) : (t(), f(r, {
               key: 1,
               name: "stack",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          g.value && e.titles.stack && !l.$slots.optionStack ? (t(), i("div", {
+          g.value && e.titles.stack && !l.$slots.optionStack ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.stack, "button-info-left-visible": e.position === "left" && n.value.stack }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.stack), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasFullscreen ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.stack, "button-info-left-visible": e.position === "left" && n.value.stack }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.stack), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasFullscreen ? (t(), s("button", {
           key: 8,
           tabindex: "0",
           class: "vue-ui-user-options-button",
           onMouseenter: o[16] || (o[16] = (u) => n.value.fullscreen = !0),
           onMouseout: o[17] || (o[17] = (u) => n.value.fullscreen = !1),
-          onClick: o[18] || (o[18] = (u) => w(k.value ? "out" : "in"))
+          onClick: o[18] || (o[18] = (u) => w(c.value ? "out" : "in"))
         }, [
-          l.$slots.optionFullscreen ? d(l.$slots, "optionFullscreen", A(F({ key: 0 }, { toggleFullscreen: w, isFullscreen: k.value })), void 0, !0) : (t(), i(h, { key: 1 }, [
-            k.value ? (t(), r(a, {
+          l.$slots.optionFullscreen ? k(l.$slots, "optionFullscreen", A(F({ key: 0 }, { toggleFullscreen: w, isFullscreen: c.value })), void 0, !0) : (t(), s(h, { key: 1 }, [
+            c.value ? (t(), f(r, {
               key: 0,
               name: "exitFullscreen",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : s("", !0),
-            k.value ? s("", !0) : (t(), r(a, {
+            }, null, 8, ["stroke"])) : a("", !0),
+            c.value ? a("", !0) : (t(), f(r, {
               key: 1,
               name: "fullscreen",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          g.value && e.titles.fullscreen && !l.$slots.optionFullscreen ? (t(), i("div", {
+          g.value && e.titles.fullscreen && !l.$slots.optionFullscreen ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.fullscreen, "button-info-left-visible": e.position === "left" && n.value.fullscreen }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.fullscreen), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasAnimation ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.fullscreen, "button-info-left-visible": e.position === "left" && n.value.fullscreen }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.fullscreen), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasAnimation ? (t(), s("button", {
           key: 9,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -461,28 +477,28 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseout: o[20] || (o[20] = (u) => n.value.animation = !1),
           onClick: L
         }, [
-          l.$slots.optionAnimation ? d(l.$slots, "optionAnimation", A(F({ key: 0 }, { toggleAnimation: L, isAnimated: C.value })), void 0, !0) : (t(), i(h, { key: 1 }, [
-            C.value ? (t(), r(a, {
+          l.$slots.optionAnimation ? k(l.$slots, "optionAnimation", A(F({ key: 0 }, { toggleAnimation: L, isAnimated: C.value })), void 0, !0) : (t(), s(h, { key: 1 }, [
+            C.value ? (t(), f(r, {
               key: 0,
               name: "play",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : s("", !0),
-            C.value ? s("", !0) : (t(), r(a, {
+            }, null, 8, ["stroke"])) : a("", !0),
+            C.value ? a("", !0) : (t(), f(r, {
               key: 1,
               name: "pause",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          g.value && e.titles.fullscreen && !l.$slots.optionAnimation ? (t(), i("div", {
+          g.value && e.titles.fullscreen && !l.$slots.optionAnimation ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.animation, "button-info-left-visible": e.position === "left" && n.value.animation }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.animation), 7)) : s("", !0)
-        ], 32)) : s("", !0),
-        e.hasAnnotator ? (t(), i("button", {
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.animation, "button-info-left-visible": e.position === "left" && n.value.animation }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.animation), 7)) : a("", !0)
+        ], 32)) : a("", !0),
+        e.hasAnnotator ? (t(), s("button", {
           key: 10,
           tabindex: "0",
           class: "vue-ui-user-options-button",
@@ -490,33 +506,33 @@ const le = ["title"], ie = ["data-open"], se = {
           onMouseout: o[22] || (o[22] = (u) => n.value.annotator = !1),
           onClick: P
         }, [
-          l.$slots.optionAnnotator ? d(l.$slots, "optionAnnotator", A(F({ key: 0 }, { toggleAnnotator: P, isAnnotator: S.value })), void 0, !0) : (t(), i(h, { key: 1 }, [
-            S.value ? (t(), r(a, {
+          l.$slots.optionAnnotator ? k(l.$slots, "optionAnnotator", A(F({ key: 0 }, { toggleAnnotator: P, isAnnotator: S.value })), void 0, !0) : (t(), s(h, { key: 1 }, [
+            S.value ? (t(), f(r, {
               key: 0,
               name: "annotatorDisabled",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : s("", !0),
-            S.value ? s("", !0) : (t(), r(a, {
+            }, null, 8, ["stroke"])) : a("", !0),
+            S.value ? a("", !0) : (t(), f(r, {
               key: 1,
               name: "annotator",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          g.value && e.titles.annotator && !l.$slots.optionAnnotator ? (t(), i("div", {
+          g.value && e.titles.annotator && !l.$slots.optionAnnotator ? (t(), s("div", {
             key: 2,
             dir: "auto",
-            class: b({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.annotator, "button-info-left-visible": e.position === "left" && n.value.annotator }),
-            style: f({ background: e.backgroundColor, color: e.color })
-          }, y(e.titles.annotator), 7)) : s("", !0)
-        ], 32)) : s("", !0)
-      ], 12, ie)
+            class: d({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.annotator, "button-info-left-visible": e.position === "left" && n.value.annotator }),
+            style: v({ background: e.backgroundColor, color: e.color })
+          }, y(e.titles.annotator), 7)) : a("", !0)
+        ], 32)) : a("", !0)
+      ], 12, se)
     ], 4)), [
       [te(oe), W]
     ]);
   }
-}, ve = /* @__PURE__ */ ne(se, [["__scopeId", "data-v-2b85c189"]]);
+}, ge = /* @__PURE__ */ le(ae, [["__scopeId", "data-v-a4e9fb31"]]);
 export {
-  ve as default
+  ge as default
 };