vue-data-ui 3.9.21 → 3.10.0

package/dist/UserOptions-5pXc4J-c.js

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