vue-data-ui 3.17.13 → 3.18.1

package/dist/UserOptions-DVduN6X7.js

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