vue-data-ui 2.4.1 → 2.4.3

package/dist/{usePrinter-8ofTb2MJ.js → usePrinter-CiHd1FwD.js}

@@ -1,16 +1,16 @@
-import { ref as b, onMounted as q, onBeforeUnmount as H, withDirectives as G, openBlock as t, createElementBlock as i, normalizeStyle as d, createElementVNode as X, withModifiers as J, withKeys as Q, createVNode as R, normalizeClass as y, renderSlot as m, Fragment as B, createBlock as g, toDisplayString as $, createCommentVNode as s, normalizeProps as z, mergeProps as D, unref as Y } from "vue";
-import r from "./BaseIcon-CXDdkPfN.js";
-import { _ as Z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const p = {
-  beforeMount(e, f) {
-    e.clickOutsideEvent = function(a) {
-      e === a.target || e.contains(a.target) || f.value(a);
+import { ref as b, computed as G, onMounted as J, onBeforeUnmount as Q, withDirectives as R, openBlock as t, createElementBlock as i, normalizeStyle as d, createElementVNode as U, withModifiers as Y, withKeys as Z, createVNode as p, normalizeClass as c, renderSlot as m, Fragment as h, createBlock as f, toDisplayString as $, createCommentVNode as u, normalizeProps as L, mergeProps as w, unref as _ } from "vue";
+import a from "./BaseIcon-BbvG1AlW.js";
+import { _ as ee } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const te = {
+  beforeMount(e, v) {
+    e.clickOutsideEvent = function(r) {
+      e === r.target || e.contains(r.target) || v.value(r);
     }, document.addEventListener("click", e.clickOutsideEvent);
   },
   unmounted(e) {
     document.removeEventListener("click", e.clickOutsideEvent);
   }
-}, _ = ["title", "onClick", "onKeypress"], ee = ["data-open"], te = {
+}, oe = ["title", "onClick", "onKeypress"], ne = ["data-open"], le = {
   __name: "UserOptions",
   props: {
     hasPdf: {
@@ -122,66 +122,81 @@ const p = {
     offsetX: {
       type: Number,
       default: 0
+    },
+    hasAnnotator: {
+      type: Boolean,
+      default: !1
+    },
+    isAnnotation: {
+      type: Boolean,
+      default: !1
     }
   },
-  emits: ["generatePdf", "generateCsv", "generateImage", "toggleTable", "toggleLabels", "toggleSort", "toggleFullscreen", "toggleStack", "toggleTooltip", "toggleAnimation"],
-  setup(e, { emit: f }) {
-    const a = e;
-    function h() {
-      f("generatePdf");
-    }
+  emits: ["generatePdf", "generateCsv", "generateImage", "toggleTable", "toggleLabels", "toggleSort", "toggleFullscreen", "toggleStack", "toggleTooltip", "toggleAnimation", "toggleAnnotator"],
+  setup(e, { emit: v }) {
+    const r = e;
     function C() {
-      f("generateCsv");
+      v("generatePdf");
     }
     function S() {
-      f("generateImage");
+      v("generateCsv");
+    }
+    function A() {
+      v("generateImage");
     }
-    const T = b(!1);
+    const B = b(!1);
     function I() {
-      T.value = !T.value, f("toggleTable");
+      B.value = !B.value, v("toggleTable");
     }
-    const v = b(!1), N = b(!0);
-    function L() {
-      c.value = window.innerWidth > 600, v.value = !v.value, v.value && (N.value = !1);
+    const g = b(!1), K = b(!0);
+    function P() {
+      k.value = window.innerWidth > 600, g.value = !g.value, g.value && (K.value = !1);
     }
-    function U() {
-      a.isPrinting || a.isImaging || (v.value = !1);
+    function V() {
+      r.isPrinting || r.isImaging || (g.value = !1);
     }
-    function x() {
-      v.value && U();
+    function j() {
+      g.value && V();
     }
-    const E = b(a.isLabelActive);
-    function K() {
-      E.value = !E.value, f("toggleLabels");
+    const E = b(r.isLabelActive);
+    function W() {
+      E.value = !E.value, v("toggleLabels");
     }
-    const M = b(a.isAnimation);
-    function w() {
-      M.value = !M.value, f("toggleAnimation");
+    const M = b(r.isAnimation);
+    function X() {
+      M.value = !M.value, v("toggleAnimation");
     }
-    function V() {
-      f("toggleSort");
+    const T = G({
+      get: () => r.isAnnotation,
+      set: (l) => l
+    });
+    function z() {
+      T.value = !T.value, v("toggleAnnotator");
     }
-    const F = b(a.isStacked);
-    function j() {
-      F.value = !F.value, f("toggleStack");
+    function q() {
+      v("toggleSort");
     }
-    const O = b(a.isTooltip);
-    function W() {
-      O.value = !O.value, f("toggleTooltip");
+    const F = b(r.isStacked);
+    function x() {
+      F.value = !F.value, v("toggleStack");
+    }
+    const O = b(r.isTooltip);
+    function H() {
+      O.value = !O.value, v("toggleTooltip");
     }
-    const k = b(!1);
-    function A(l) {
-      a.chartElement && (l === "in" ? (k.value = !0, a.chartElement.requestFullscreen(), f("toggleFullscreen", !0)) : (k.value = !1, document && document.exitFullscreen(), f("toggleFullscreen", !1)));
+    const y = b(!1);
+    function D(l) {
+      r.chartElement && (l === "in" ? (y.value = !0, r.chartElement.requestFullscreen(), v("toggleFullscreen", !0)) : (y.value = !1, document && document.exitFullscreen(), v("toggleFullscreen", !1)));
     }
-    function P(l) {
-      document.fullscreenElement ? k.value = !0 : k.value = !1;
+    function N(l) {
+      document.fullscreenElement ? y.value = !0 : y.value = !1;
     }
-    q(() => {
-      document.addEventListener("fullscreenchange", P);
-    }), H(() => {
-      document.removeEventListener("fullscreenchange", P);
+    J(() => {
+      document.addEventListener("fullscreenchange", N);
+    }), Q(() => {
+      document.removeEventListener("fullscreenchange", N);
     });
-    const c = b(window.innerWidth > 600), n = b({
+    const k = b(window.innerWidth > 600), n = b({
       tooltip: !1,
       pdf: !1,
       csv: !1,
@@ -191,340 +206,370 @@ const p = {
       sort: !1,
       stack: !1,
       fullscreen: !1,
-      animation: !1
+      animation: !1,
+      annotator: !1
     });
-    return (l, o) => G((t(), i("div", {
+    return (l, o) => R((t(), i("div", {
       "data-html2canvas-ignore": "",
       class: "vue-ui-user-options",
-      style: d(`z-index: ${e.zIndex}; height: 34px; position: ${k.value ? "fixed" : "absolute"}; top: 0; ${e.position === "right" ? `right:${k.value ? "12px" : "0"}` : `left:${k.value ? "12px" : "0"}`}; padding: 4px; background:transparent;`)
+      style: d(`z-index: ${e.zIndex}; height: 34px; position: ${y.value ? "fixed" : "absolute"}; top: 0; ${e.position === "right" ? `right:${y.value ? "12px" : "0"}` : `left:${y.value ? "12px" : "0"}`}; padding: 4px; background:transparent;`)
     }, [
-      X("div", {
+      U("div", {
         tabindex: "0",
-        title: v.value ? e.titles.close || "" : e.titles.open || "",
+        title: g.value ? e.titles.close || "" : e.titles.open || "",
         style: d(`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: J(L, ["stop"]),
-        onKeypress: Q(L, ["enter"])
+        onClick: Y(P, ["stop"]),
+        onKeypress: Z(P, ["enter"])
       }, [
-        R(r, {
-          name: v.value ? "close" : "menu",
+        p(a, {
+          name: g.value ? "close" : "menu",
           stroke: e.color,
           "stroke-width": 2
         }, null, 8, ["name", "stroke"])
-      ], 44, _),
-      X("div", {
-        "data-open": v.value,
-        class: y({ "vue-ui-user-options-drawer": !0 }),
+      ], 44, oe),
+      U("div", {
+        "data-open": g.value,
+        class: c({ "vue-ui-user-options-drawer": !0 }),
         style: d(`background:${e.backgroundColor}; ${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}`)
       }, [
         e.hasTooltip ? (t(), i("button", {
           key: 0,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: W,
-          onMouseenter: o[0] || (o[0] = (u) => n.value.tooltip = !0),
-          onMouseout: o[1] || (o[1] = (u) => n.value.tooltip = !1)
+          onClick: H,
+          onMouseenter: o[0] || (o[0] = (s) => n.value.tooltip = !0),
+          onMouseout: o[1] || (o[1] = (s) => n.value.tooltip = !1)
         }, [
-          l.$slots.optionTooltip ? m(l.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (t(), i(B, { key: 1 }, [
-            O.value ? (t(), g(r, {
+          l.$slots.optionTooltip ? m(l.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
+            O.value ? (t(), f(a, {
               key: 0,
               name: "tooltip",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), g(r, {
+            }, null, 8, ["stroke"])) : (t(), f(a, {
               key: 1,
               name: "tooltipDisabled",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          c.value && e.titles.tooltip && !l.$slots.optionTooltip ? (t(), i("div", {
+          k.value && e.titles.tooltip && !l.$slots.optionTooltip ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-left-visible": e.position === "left" && n.value.tooltip, "button-info-right-visible": e.position === "right" && n.value.tooltip }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-left-visible": e.position === "left" && n.value.tooltip, "button-info-right-visible": e.position === "right" && n.value.tooltip }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.tooltip), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.tooltip), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasPdf ? (t(), i("button", {
           key: 1,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: h,
-          onMouseenter: o[2] || (o[2] = (u) => n.value.pdf = !0),
-          onMouseout: o[3] || (o[3] = (u) => n.value.pdf = !1)
+          onClick: C,
+          onMouseenter: o[2] || (o[2] = (s) => n.value.pdf = !0),
+          onMouseout: o[3] || (o[3] = (s) => n.value.pdf = !1)
         }, [
-          l.$slots.optionPdf ? m(l.$slots, "optionPdf", { key: 0 }, void 0, !0) : (t(), i(B, { key: 1 }, [
-            e.isPrinting ? (t(), g(r, {
+          l.$slots.optionPdf ? m(l.$slots, "optionPdf", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
+            e.isPrinting ? (t(), f(a, {
               key: 0,
               name: "spin",
               isSpin: "",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), g(r, {
+            }, null, 8, ["stroke"])) : (t(), f(a, {
               key: 1,
               name: "pdf",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          c.value && e.titles.pdf && !l.$slots.optionPdf ? (t(), i("div", {
+          k.value && e.titles.pdf && !l.$slots.optionPdf ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.pdf, "button-info-left-visible": e.position === "left" && n.value.pdf }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.pdf, "button-info-left-visible": e.position === "left" && n.value.pdf }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.pdf), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.pdf), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasXls ? (t(), i("button", {
           key: 2,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: C,
-          onMouseenter: o[4] || (o[4] = (u) => n.value.csv = !0),
-          onMouseout: o[5] || (o[5] = (u) => n.value.csv = !1)
+          onClick: S,
+          onMouseenter: o[4] || (o[4] = (s) => n.value.csv = !0),
+          onMouseout: o[5] || (o[5] = (s) => n.value.csv = !1)
         }, [
-          l.$slots.optionCsv ? m(l.$slots, "optionCsv", { key: 0 }, void 0, !0) : (t(), g(r, {
+          l.$slots.optionCsv ? m(l.$slots, "optionCsv", { key: 0 }, void 0, !0) : (t(), f(a, {
             key: 1,
             name: "excel",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["stroke"])),
-          c.value && e.titles.csv && !l.$slots.optionCsv ? (t(), i("div", {
+          k.value && e.titles.csv && !l.$slots.optionCsv ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.csv, "button-info-left-visible": e.position === "left" && n.value.csv }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.csv, "button-info-left-visible": e.position === "left" && n.value.csv }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.csv), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.csv), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasImg ? (t(), i("button", {
           key: 3,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: S,
-          onMouseenter: o[6] || (o[6] = (u) => n.value.img = !0),
-          onMouseout: o[7] || (o[7] = (u) => n.value.img = !1)
+          onClick: A,
+          onMouseenter: o[6] || (o[6] = (s) => n.value.img = !0),
+          onMouseout: o[7] || (o[7] = (s) => n.value.img = !1)
         }, [
-          l.$slots.optionImg ? m(l.$slots, "optionImg", { key: 0 }, void 0, !0) : (t(), i(B, { key: 1 }, [
-            e.isImaging ? (t(), g(r, {
+          l.$slots.optionImg ? m(l.$slots, "optionImg", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
+            e.isImaging ? (t(), f(a, {
               key: 0,
               name: "spin",
               isSpin: "",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), g(r, {
+            }, null, 8, ["stroke"])) : (t(), f(a, {
               key: 1,
               name: "image",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          c.value && e.titles.img && !l.$slots.optionImg ? (t(), i("div", {
+          k.value && e.titles.img && !l.$slots.optionImg ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.img, "button-info-left-visible": e.position === "left" && n.value.img }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.img, "button-info-left-visible": e.position === "left" && n.value.img }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.img), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.img), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasTable ? (t(), i("button", {
           key: 4,
           tabindex: "0",
           class: "vue-ui-user-options-button",
           onClick: I,
-          onMouseenter: o[8] || (o[8] = (u) => n.value.table = !0),
-          onMouseout: o[9] || (o[9] = (u) => n.value.table = !1)
+          onMouseenter: o[8] || (o[8] = (s) => n.value.table = !0),
+          onMouseout: o[9] || (o[9] = (s) => n.value.table = !1)
         }, [
-          l.$slots.optionTable ? m(l.$slots, "optionTable", { key: 0 }, void 0, !0) : (t(), g(r, {
+          l.$slots.optionTable ? m(l.$slots, "optionTable", { key: 0 }, void 0, !0) : (t(), f(a, {
             key: 1,
-            name: T.value ? "tableClose" : "tableOpen",
+            name: B.value ? "tableClose" : "tableOpen",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["name", "stroke"])),
-          c.value && e.titles.table && !l.$slots.optionTable ? (t(), i("div", {
+          k.value && e.titles.table && !l.$slots.optionTable ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.table, "button-info-left-visible": e.position === "left" && n.value.table }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.table, "button-info-left-visible": e.position === "left" && n.value.table }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.table), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.table), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasLabel ? (t(), i("button", {
           key: 5,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: K,
-          onMouseenter: o[10] || (o[10] = (u) => n.value.labels = !0),
-          onMouseout: o[11] || (o[11] = (u) => n.value.labels = !1)
+          onClick: W,
+          onMouseenter: o[10] || (o[10] = (s) => n.value.labels = !0),
+          onMouseout: o[11] || (o[11] = (s) => n.value.labels = !1)
         }, [
-          l.$slots.optionLabels ? m(l.$slots, "optionLabels", { key: 0 }, void 0, !0) : (t(), g(r, {
+          l.$slots.optionLabels ? m(l.$slots, "optionLabels", { key: 0 }, void 0, !0) : (t(), f(a, {
             key: 1,
             name: E.value ? "labelClose" : "labelOpen",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["name", "stroke"])),
-          c.value && e.titles.labels && !l.$slots.optionLabels ? (t(), i("div", {
+          k.value && e.titles.labels && !l.$slots.optionLabels ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.labels, "button-info-left-visible": e.position === "left" && n.value.labels }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.labels, "button-info-left-visible": e.position === "left" && n.value.labels }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.labels), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.labels), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasSort ? (t(), i("button", {
           key: 6,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: V,
-          onMouseenter: o[12] || (o[12] = (u) => n.value.sort = !0),
-          onMouseout: o[13] || (o[13] = (u) => n.value.sort = !1)
+          onClick: q,
+          onMouseenter: o[12] || (o[12] = (s) => n.value.sort = !0),
+          onMouseout: o[13] || (o[13] = (s) => n.value.sort = !1)
         }, [
-          l.$slots.optionSort ? m(l.$slots, "optionSort", { key: 0 }, void 0, !0) : (t(), g(r, {
+          l.$slots.optionSort ? m(l.$slots, "optionSort", { key: 0 }, void 0, !0) : (t(), f(a, {
             key: 1,
             name: "sort",
             stroke: e.color,
             style: { "pointer-events": "none" }
           }, null, 8, ["stroke"])),
-          c.value && e.titles.sort && !l.$slots.optionSort ? (t(), i("div", {
+          k.value && e.titles.sort && !l.$slots.optionSort ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.sort, "button-info-left-visible": e.position === "left" && n.value.sort }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.sort, "button-info-left-visible": e.position === "left" && n.value.sort }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.sort), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.sort), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasStack ? (t(), i("button", {
           key: 7,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: j,
-          onMouseenter: o[14] || (o[14] = (u) => n.value.stack = !0),
-          onMouseout: o[15] || (o[15] = (u) => n.value.stack = !1)
+          onClick: x,
+          onMouseenter: o[14] || (o[14] = (s) => n.value.stack = !0),
+          onMouseout: o[15] || (o[15] = (s) => n.value.stack = !1)
         }, [
-          l.$slots.optionStack ? m(l.$slots, "optionStack", { key: 0 }, void 0, !0) : (t(), i(B, { key: 1 }, [
-            F.value ? (t(), g(r, {
+          l.$slots.optionStack ? m(l.$slots, "optionStack", { key: 0 }, void 0, !0) : (t(), i(h, { key: 1 }, [
+            F.value ? (t(), f(a, {
               key: 0,
               name: "unstack",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : (t(), g(r, {
+            }, null, 8, ["stroke"])) : (t(), f(a, {
               key: 1,
               name: "stack",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          c.value && e.titles.stack && !l.$slots.optionStack ? (t(), i("div", {
+          k.value && e.titles.stack && !l.$slots.optionStack ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.stack, "button-info-left-visible": e.position === "left" && n.value.stack }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.stack, "button-info-left-visible": e.position === "left" && n.value.stack }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.stack), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.stack), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasFullscreen ? (t(), i("button", {
           key: 8,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onMouseenter: o[16] || (o[16] = (u) => n.value.fullscreen = !0),
-          onMouseout: o[17] || (o[17] = (u) => n.value.fullscreen = !1),
-          onClick: o[18] || (o[18] = (u) => A(k.value ? "out" : "in"))
+          onMouseenter: o[16] || (o[16] = (s) => n.value.fullscreen = !0),
+          onMouseout: o[17] || (o[17] = (s) => n.value.fullscreen = !1),
+          onClick: o[18] || (o[18] = (s) => D(y.value ? "out" : "in"))
         }, [
-          l.$slots.optionFullscreen ? m(l.$slots, "optionFullscreen", z(D({ key: 0 }, { toggleFullscreen: A, isFullscreen: k.value })), void 0, !0) : (t(), i(B, { key: 1 }, [
-            k.value ? (t(), g(r, {
+          l.$slots.optionFullscreen ? m(l.$slots, "optionFullscreen", L(w({ key: 0 }, { toggleFullscreen: D, isFullscreen: y.value })), void 0, !0) : (t(), i(h, { key: 1 }, [
+            y.value ? (t(), f(a, {
               key: 0,
               name: "exitFullscreen",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : s("", !0),
-            k.value ? s("", !0) : (t(), g(r, {
+            }, null, 8, ["stroke"])) : u("", !0),
+            y.value ? u("", !0) : (t(), f(a, {
               key: 1,
               name: "fullscreen",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          c.value && e.titles.fullscreen && !l.$slots.optionFullscreen ? (t(), i("div", {
+          k.value && e.titles.fullscreen && !l.$slots.optionFullscreen ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.fullscreen, "button-info-left-visible": e.position === "left" && n.value.fullscreen }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.fullscreen, "button-info-left-visible": e.position === "left" && n.value.fullscreen }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.fullscreen), 7)) : s("", !0)
-        ], 32)) : s("", !0),
+          }, $(e.titles.fullscreen), 7)) : u("", !0)
+        ], 32)) : u("", !0),
         e.hasAnimation ? (t(), i("button", {
           key: 9,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onMouseenter: o[19] || (o[19] = (u) => n.value.animation = !0),
-          onMouseout: o[20] || (o[20] = (u) => n.value.animation = !1),
-          onClick: w
+          onMouseenter: o[19] || (o[19] = (s) => n.value.animation = !0),
+          onMouseout: o[20] || (o[20] = (s) => n.value.animation = !1),
+          onClick: X
         }, [
-          l.$slots.optionAnimation ? m(l.$slots, "optionAnimation", z(D({ key: 0 }, { toggleAnimation: w, isAnimated: M.value })), void 0, !0) : (t(), i(B, { key: 1 }, [
-            M.value ? (t(), g(r, {
+          l.$slots.optionAnimation ? m(l.$slots, "optionAnimation", L(w({ key: 0 }, { toggleAnimation: X, isAnimated: M.value })), void 0, !0) : (t(), i(h, { key: 1 }, [
+            M.value ? (t(), f(a, {
               key: 0,
               name: "play",
               stroke: e.color,
               style: { "pointer-events": "none" }
-            }, null, 8, ["stroke"])) : s("", !0),
-            M.value ? s("", !0) : (t(), g(r, {
+            }, null, 8, ["stroke"])) : u("", !0),
+            M.value ? u("", !0) : (t(), f(a, {
               key: 1,
               name: "pause",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"]))
           ], 64)),
-          c.value && e.titles.fullscreen && !l.$slots.optionAnimation ? (t(), i("div", {
+          k.value && e.titles.fullscreen && !l.$slots.optionAnimation ? (t(), i("div", {
+            key: 2,
+            dir: "auto",
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.animation, "button-info-left-visible": e.position === "left" && n.value.animation }),
+            style: d({ background: e.backgroundColor, color: e.color })
+          }, $(e.titles.animation), 7)) : u("", !0)
+        ], 32)) : u("", !0),
+        e.hasAnnotator ? (t(), i("button", {
+          key: 10,
+          tabindex: "0",
+          class: "vue-ui-user-options-button",
+          onMouseenter: o[21] || (o[21] = (s) => n.value.annotator = !0),
+          onMouseout: o[22] || (o[22] = (s) => n.value.annotator = !1),
+          onClick: z
+        }, [
+          l.$slots.optionAnnotator ? m(l.$slots, "optionAnnotator", L(w({ key: 0 }, { toggleAnnotator: z, isAnnotator: T.value })), void 0, !0) : (t(), i(h, { key: 1 }, [
+            T.value ? (t(), f(a, {
+              key: 0,
+              name: "annotatorDisabled",
+              stroke: e.color,
+              style: { "pointer-events": "none" }
+            }, null, 8, ["stroke"])) : u("", !0),
+            T.value ? u("", !0) : (t(), f(a, {
+              key: 1,
+              name: "annotator",
+              stroke: e.color,
+              style: { "pointer-events": "none" }
+            }, null, 8, ["stroke"]))
+          ], 64)),
+          k.value && e.titles.annotator && !l.$slots.optionAnnotator ? (t(), i("div", {
             key: 2,
             dir: "auto",
-            class: y({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.animation, "button-info-left-visible": e.position === "left" && n.value.animation }),
+            class: c({ "button-info-left": e.position === "left", "button-info-right": e.position === "right", "button-info-right-visible": e.position === "right" && n.value.annotator, "button-info-left-visible": e.position === "left" && n.value.annotator }),
             style: d({ background: e.backgroundColor, color: e.color })
-          }, $(e.titles.animation), 7)) : s("", !0)
-        ], 32)) : s("", !0)
-      ], 12, ee)
+          }, $(e.titles.annotator), 7)) : u("", !0)
+        ], 32)) : u("", !0)
+      ], 12, ne)
     ], 4)), [
-      [Y(p), x]
+      [_(te), j]
     ]);
   }
-}, ie = /* @__PURE__ */ Z(te, [["__scopeId", "data-v-88cd630d"]]);
-function se({
+}, ae = /* @__PURE__ */ ee(le, [["__scopeId", "data-v-7ea47518"]]);
+function re({
   elementId: e,
-  fileName: f,
-  canPrint: a = !0
+  fileName: v,
+  canPrint: r = !0
 }) {
-  const h = b(!1), C = b(!1), S = b(null);
-  async function T() {
-    !a || h.value || (h.value = !0, clearTimeout(S.value), S.value = setTimeout(async () => {
-      if (a)
+  const C = b(!1), S = b(!1), A = b(null);
+  async function B() {
+    !r || C.value || (C.value = !0, clearTimeout(A.value), A.value = setTimeout(async () => {
+      if (r)
         try {
-          const { default: v } = await import("./pdf-B7oVat64.js");
-          await v({
+          const { default: g } = await import("./pdf-B7oVat64.js");
+          await g({
             domElement: document.getElementById(e),
-            fileName: f
+            fileName: v
           });
-        } catch (v) {
-          console.error("Error generating PDF:", v);
+        } catch (g) {
+          console.error("Error generating PDF:", g);
         } finally {
-          h.value = !1;
+          C.value = !1;
         }
     }, 100));
   }
   async function I() {
-    !a || C.value || (C.value = !0, clearTimeout(S.value), S.value = setTimeout(async () => {
-      if (a)
+    !r || S.value || (S.value = !0, clearTimeout(A.value), A.value = setTimeout(async () => {
+      if (r)
         try {
-          const { default: v } = await import("./img-DGzWcJ4Y.js");
-          await v({
+          const { default: g } = await import("./img-DGzWcJ4Y.js");
+          await g({
             domElement: document.getElementById(e),
-            fileName: f,
+            fileName: v,
             format: "png"
           });
-        } catch (v) {
-          console.error("Error generating image:", v);
+        } catch (g) {
+          console.error("Error generating image:", g);
         } finally {
-          C.value = !1;
+          S.value = !1;
         }
     }, 100));
   }
   return {
-    generatePdf: T,
+    generatePdf: B,
     generateImage: I,
-    isPrinting: h,
-    isImaging: C
+    isPrinting: C,
+    isImaging: S
   };
 }
 export {
-  ie as U,
-  se as u
+  ae as U,
+  re as u
 };