vue-data-ui 3.1.1 → 3.1.3

package/dist/{UserOptions-CsDlFB0L.js → UserOptions-ZmwlARCV.js}

@@ -1,9 +1,9 @@
-import { ref as m, computed as w, onMounted as Q, onBeforeUnmount as Y, withDirectives as Z, createElementBlock as s, openBlock as o, normalizeStyle as v, createElementVNode as X, withKeys as p, withModifiers as _, renderSlot as d, normalizeProps as S, guardReactiveProps as ee, createVNode as te, normalizeClass as k, createCommentVNode as a, Fragment as $, createBlock as f, toDisplayString as c, mergeProps as T, unref as oe } from "vue";
-import { v as ne } from "./vClickOutside-C6WiFswA.js";
-import r from "./BaseIcon-DLesaZpW.js";
-import z from "./img-gBDz7xQQ.js";
-import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ie = ["title"], se = ["data-open"], ae = {
+import { ref as m, computed as w, onMounted as Z, onBeforeUnmount as p, withDirectives as _, createElementBlock as s, openBlock as o, normalizeStyle as b, createElementVNode as D, withKeys as ee, withModifiers as te, renderSlot as k, normalizeProps as A, guardReactiveProps as oe, createVNode as ne, normalizeClass as d, createCommentVNode as a, Fragment as $, createBlock as f, toDisplayString as c, mergeProps as T, unref as le } from "vue";
+import { v as ie } from "./vClickOutside-C6WiFswA.js";
+import r from "./BaseIcon-BcOSijbz.js";
+import X from "./img-DSrvx9J6.js";
+import { _ as se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ae = ["title"], ue = ["data-open"], re = {
   __name: "UserOptions",
   props: {
     hasPdf: {
@@ -133,84 +133,94 @@ const ie = ["title"], se = ["data-open"], ae = {
     printScale: {
       type: Number,
       default: 2
+    },
+    tableDialog: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["generatePdf", "generateCsv", "generateImage", "toggleTable", "toggleLabels", "toggleSort", "toggleFullscreen", "toggleStack", "toggleTooltip", "toggleAnimation", "toggleAnnotator"],
-  setup(e, { emit: N }) {
-    const i = e, b = N;
-    async function D() {
+  setup(e, { expose: z, emit: N }) {
+    const i = e, v = N;
+    async function U() {
       if (i.callbacks.pdf) {
-        const { imageUri: n, base64: t } = await z({ domElement: i.chartElement, base64: !0, img: !0, scale: i.printScale });
+        const { imageUri: n, base64: t } = await X({ domElement: i.chartElement, base64: !0, img: !0, scale: i.printScale });
         i.callbacks.pdf({ domElement: i.chartElement, base64: t, imageUri: n });
       } else
-        b("generatePdf");
+        v("generatePdf");
     }
-    function U() {
-      b("generateCsv", i.callbacks.csv);
+    function j() {
+      v("generateCsv", i.callbacks.csv);
     }
-    async function j() {
+    async function V() {
       if (i.callbacks.img) {
-        const { imageUri: n, base64: t } = await z({ domElement: i.chartElement, base64: !0, img: !0, scale: i.printScale });
+        const { imageUri: n, base64: t } = await X({ domElement: i.chartElement, base64: !0, img: !0, scale: i.printScale });
         i.callbacks.img({ domElement: i.chartElement, imageUri: n, base64: t });
       } else
-        b("generateImage");
+        v("generateImage");
     }
-    const A = m(!1);
-    function V() {
-      i.callbacks.table ? i.callbacks.table() : (A.value = !A.value, b("toggleTable"));
+    const h = m(!1);
+    function x() {
+      i.callbacks.table ? i.callbacks.table() : (h.value = !h.value, v("toggleTable"));
+    }
+    function K(n) {
+      h.value = n;
     }
-    const y = m(!1), K = m(!0);
+    z({
+      setTableIconState: K
+    });
+    const y = m(!1), W = m(!0);
     function I() {
-      g.value = window.innerWidth > 600, y.value = !y.value, y.value && (K.value = !1);
+      g.value = window.innerWidth > 600, y.value = !y.value, y.value && (W.value = !1);
     }
-    function W() {
+    function q() {
       i.isPrinting || i.isImaging || (y.value = !1);
     }
-    function q() {
-      y.value && W();
+    function H() {
+      y.value && q();
     }
     const B = m(i.isLabelActive);
-    function x() {
-      i.callbacks.labels ? i.callbacks.labels() : (B.value = !B.value, b("toggleLabels"));
+    function R() {
+      i.callbacks.labels ? i.callbacks.labels() : (B.value = !B.value, v("toggleLabels"));
     }
-    const h = m(i.isAnimation);
+    const C = m(i.isAnimation);
     function E() {
-      i.callbacks.animation ? i.callbacks.animation() : (h.value = !h.value, b("toggleAnimation"));
+      i.callbacks.animation ? i.callbacks.animation() : (C.value = !C.value, v("toggleAnimation"));
     }
-    const C = w({
+    const S = w({
       get: () => i.isAnnotation,
       set: (n) => n
     });
     function O() {
-      i.callbacks.annotator ? i.callbacks.annotator() : (C.value = !C.value, b("toggleAnnotator"));
+      i.callbacks.annotator ? i.callbacks.annotator() : (S.value = !S.value, v("toggleAnnotator"));
     }
-    function H() {
-      i.callbacks.sort ? i.callbacks.sort() : b("toggleSort");
+    function G() {
+      i.callbacks.sort ? i.callbacks.sort() : v("toggleSort");
     }
     const F = m(i.isStacked);
-    function R() {
-      i.callbacks.stack ? i.callbacks.stack() : (F.value = !F.value, b("toggleStack"));
+    function J() {
+      i.callbacks.stack ? i.callbacks.stack() : (F.value = !F.value, v("toggleStack"));
     }
     const M = m(i.isTooltip);
-    function G() {
-      i.callbacks.tooltip ? i.callbacks.tooltip() : (M.value = !M.value, b("toggleTooltip"));
+    function Q() {
+      i.callbacks.tooltip ? i.callbacks.tooltip() : (M.value = !M.value, v("toggleTooltip"));
     }
-    const J = w({
+    const Y = w({
       get: () => i.isFullscreen,
-      set: (n) => b("toggleFullscreen", n)
+      set: (n) => v("toggleFullscreen", n)
     });
     function L() {
       if (!i.chartElement) return;
       const n = !i.isFullscreen;
-      J.value = n, n ? i.chartElement.requestFullscreen() : document.exitFullscreen();
+      Y.value = n, n ? i.chartElement.requestFullscreen() : document.exitFullscreen();
     }
     function P() {
       const n = !!document.fullscreenElement;
-      b("toggleFullscreen", n);
+      v("toggleFullscreen", n);
     }
-    Q(() => {
+    Z(() => {
       document.addEventListener("fullscreenchange", P);
-    }), Y(() => {
+    }), p(() => {
       document.removeEventListener("fullscreenchange", P);
     });
     const g = m(window.innerWidth > 600), l = m({
@@ -226,40 +236,40 @@ const ie = ["title"], se = ["data-open"], ae = {
       animation: !1,
       annotator: !1
     });
-    return (n, t) => Z((o(), s("div", {
+    return (n, t) => _((o(), s("div", {
       "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;`)
+      style: b(`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;`)
     }, [
-      X("div", {
+      D("div", {
         tabindex: "0",
         title: y.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: _(I, ["stop"]),
-        onKeypress: p(I, ["enter"])
+        style: b(`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: te(I, ["stop"]),
+        onKeypress: ee(I, ["enter"])
       }, [
-        d(n.$slots, "menuIcon", S(ee({ isOpen: y.value, color: e.color })), () => [
-          te(r, {
+        k(n.$slots, "menuIcon", A(oe({ isOpen: y.value, color: e.color })), () => [
+          ne(r, {
             name: y.value ? "close" : "menu",
             stroke: e.color,
             "stroke-width": 2
           }, null, 8, ["name", "stroke"])
         ], !0)
-      ], 44, ie),
-      X("div", {
+      ], 44, ae),
+      D("div", {
         "data-open": y.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`}`)
+        class: d({ "vue-ui-user-options-drawer": !0 }),
+        style: b(`background:${e.backgroundColor}; ${e.position === "right" ? `right: ${e.offsetX ? e.offsetX : e.noOffset ? 0 : 4}px` : `left: ${e.noOffset ? 0 : 4}px`}`)
       }, [
         e.hasTooltip ? (o(), s("button", {
           key: 0,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: G,
+          onClick: Q,
           onMouseenter: t[0] || (t[0] = (u) => l.value.tooltip = !0),
           onMouseout: t[1] || (t[1] = (u) => l.value.tooltip = !1)
         }, [
-          n.$slots.optionTooltip ? d(n.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
+          n.$slots.optionTooltip ? k(n.$slots, "optionTooltip", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
             M.value ? (o(), f(r, {
               key: 0,
               name: "tooltip",
@@ -275,19 +285,19 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.tooltip && !n.$slots.optionTooltip ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.tooltip), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasPdf ? (o(), s("button", {
           key: 1,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: D,
+          onClick: U,
           onMouseenter: t[2] || (t[2] = (u) => l.value.pdf = !0),
           onMouseout: t[3] || (t[3] = (u) => l.value.pdf = !1)
         }, [
-          n.$slots.optionPdf ? d(n.$slots, "optionPdf", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
+          n.$slots.optionPdf ? k(n.$slots, "optionPdf", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
             e.isPrinting ? (o(), f(r, {
               key: 0,
               name: "spin",
@@ -304,19 +314,19 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.pdf && !n.$slots.optionPdf ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.pdf), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasXls ? (o(), s("button", {
           key: 2,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: U,
+          onClick: j,
           onMouseenter: t[4] || (t[4] = (u) => l.value.csv = !0),
           onMouseout: t[5] || (t[5] = (u) => l.value.csv = !1)
         }, [
-          n.$slots.optionCsv ? d(n.$slots, "optionCsv", { key: 0 }, void 0, !0) : (o(), f(r, {
+          n.$slots.optionCsv ? k(n.$slots, "optionCsv", { key: 0 }, void 0, !0) : (o(), f(r, {
             key: 1,
             name: "excel",
             stroke: e.color,
@@ -325,19 +335,19 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.csv && !n.$slots.optionCsv ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.csv), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasImg ? (o(), s("button", {
           key: 3,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: j,
+          onClick: V,
           onMouseenter: t[6] || (t[6] = (u) => l.value.img = !0),
           onMouseout: t[7] || (t[7] = (u) => l.value.img = !1)
         }, [
-          n.$slots.optionImg ? d(n.$slots, "optionImg", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
+          n.$slots.optionImg ? k(n.$slots, "optionImg", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
             e.isImaging ? (o(), f(r, {
               key: 0,
               name: "spin",
@@ -354,40 +364,47 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.img && !n.$slots.optionImg ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.img), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasTable ? (o(), s("button", {
           key: 4,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: V,
+          onClick: x,
           onMouseenter: t[8] || (t[8] = (u) => l.value.table = !0),
           onMouseout: t[9] || (t[9] = (u) => l.value.table = !1)
         }, [
-          n.$slots.optionTable ? d(n.$slots, "optionTable", { key: 0 }, void 0, !0) : (o(), f(r, {
-            key: 1,
-            name: A.value ? "tableClose" : "tableOpen",
-            stroke: e.color,
-            style: { "pointer-events": "none" }
-          }, null, 8, ["name", "stroke"])),
+          n.$slots.optionTable ? k(n.$slots, "optionTable", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
+            e.tableDialog ? (o(), f(r, {
+              key: 0,
+              name: h.value ? "tableDialogClose" : "tableDialogOpen",
+              stroke: e.color,
+              style: { "pointer-events": "none" }
+            }, null, 8, ["name", "stroke"])) : (o(), f(r, {
+              key: 1,
+              name: h.value ? "tableClose" : "tableOpen",
+              stroke: e.color,
+              style: { "pointer-events": "none" }
+            }, null, 8, ["name", "stroke"]))
+          ], 64)),
           g.value && e.titles.table && !n.$slots.optionTable ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.table), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasLabel ? (o(), s("button", {
           key: 5,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: x,
+          onClick: R,
           onMouseenter: t[10] || (t[10] = (u) => l.value.labels = !0),
           onMouseout: t[11] || (t[11] = (u) => l.value.labels = !1)
         }, [
-          n.$slots.optionLabels ? d(n.$slots, "optionLabels", { key: 0 }, void 0, !0) : (o(), f(r, {
+          n.$slots.optionLabels ? k(n.$slots, "optionLabels", { key: 0 }, void 0, !0) : (o(), f(r, {
             key: 1,
             name: B.value ? "labelClose" : "labelOpen",
             stroke: e.color,
@@ -396,19 +413,19 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.labels && !n.$slots.optionLabels ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.labels), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasSort ? (o(), s("button", {
           key: 6,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: H,
+          onClick: G,
           onMouseenter: t[12] || (t[12] = (u) => l.value.sort = !0),
           onMouseout: t[13] || (t[13] = (u) => l.value.sort = !1)
         }, [
-          n.$slots.optionSort ? d(n.$slots, "optionSort", { key: 0 }, void 0, !0) : (o(), f(r, {
+          n.$slots.optionSort ? k(n.$slots, "optionSort", { key: 0 }, void 0, !0) : (o(), f(r, {
             key: 1,
             name: "sort",
             stroke: e.color,
@@ -417,19 +434,19 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.sort && !n.$slots.optionSort ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.sort), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasStack ? (o(), s("button", {
           key: 7,
           tabindex: "0",
           class: "vue-ui-user-options-button",
-          onClick: R,
+          onClick: J,
           onMouseenter: t[14] || (t[14] = (u) => l.value.stack = !0),
           onMouseout: t[15] || (t[15] = (u) => l.value.stack = !1)
         }, [
-          n.$slots.optionStack ? d(n.$slots, "optionStack", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
+          n.$slots.optionStack ? k(n.$slots, "optionStack", { key: 0 }, void 0, !0) : (o(), s($, { key: 1 }, [
             F.value ? (o(), f(r, {
               key: 0,
               name: "unstack",
@@ -445,8 +462,8 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.stack && !n.$slots.optionStack ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.stack), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasFullscreen ? (o(), s("button", {
@@ -457,7 +474,7 @@ const ie = ["title"], se = ["data-open"], ae = {
           onMouseout: t[17] || (t[17] = (u) => l.value.fullscreen = !1),
           onClick: t[18] || (t[18] = (u) => L(e.isFullscreen ? "out" : "in"))
         }, [
-          n.$slots.optionFullscreen ? d(n.$slots, "optionFullscreen", S(T({ key: 0 }, { toggleFullscreen: L, isFullscreen: e.isFullscreen })), void 0, !0) : (o(), s($, { key: 1 }, [
+          n.$slots.optionFullscreen ? k(n.$slots, "optionFullscreen", A(T({ key: 0 }, { toggleFullscreen: L, isFullscreen: e.isFullscreen })), void 0, !0) : (o(), s($, { key: 1 }, [
             e.isFullscreen ? (o(), f(r, {
               key: 0,
               name: "exitFullscreen",
@@ -474,8 +491,8 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.fullscreen && !n.$slots.optionFullscreen ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.fullscreen), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasAnimation ? (o(), s("button", {
@@ -486,14 +503,14 @@ const ie = ["title"], se = ["data-open"], ae = {
           onMouseout: t[20] || (t[20] = (u) => l.value.animation = !1),
           onClick: E
         }, [
-          n.$slots.optionAnimation ? d(n.$slots, "optionAnimation", S(T({ key: 0 }, { toggleAnimation: E, isAnimated: h.value })), void 0, !0) : (o(), s($, { key: 1 }, [
-            h.value ? (o(), f(r, {
+          n.$slots.optionAnimation ? k(n.$slots, "optionAnimation", A(T({ key: 0 }, { toggleAnimation: E, isAnimated: C.value })), void 0, !0) : (o(), s($, { key: 1 }, [
+            C.value ? (o(), f(r, {
               key: 0,
               name: "play",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"])) : a("", !0),
-            h.value ? a("", !0) : (o(), f(r, {
+            C.value ? a("", !0) : (o(), f(r, {
               key: 1,
               name: "pause",
               stroke: e.color,
@@ -503,8 +520,8 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.fullscreen && !n.$slots.optionAnimation ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.animation), 7)) : a("", !0)
         ], 32)) : a("", !0),
         e.hasAnnotator ? (o(), s("button", {
@@ -515,14 +532,14 @@ const ie = ["title"], se = ["data-open"], ae = {
           onMouseout: t[22] || (t[22] = (u) => l.value.annotator = !1),
           onClick: O
         }, [
-          n.$slots.optionAnnotator ? d(n.$slots, "optionAnnotator", S(T({ key: 0 }, { toggleAnnotator: O, isAnnotator: C.value })), void 0, !0) : (o(), s($, { key: 1 }, [
-            C.value ? (o(), f(r, {
+          n.$slots.optionAnnotator ? k(n.$slots, "optionAnnotator", A(T({ key: 0 }, { toggleAnnotator: O, isAnnotator: S.value })), void 0, !0) : (o(), s($, { key: 1 }, [
+            S.value ? (o(), f(r, {
               key: 0,
               name: "annotatorDisabled",
               stroke: e.color,
               style: { "pointer-events": "none" }
             }, null, 8, ["stroke"])) : a("", !0),
-            C.value ? a("", !0) : (o(), f(r, {
+            S.value ? a("", !0) : (o(), f(r, {
               key: 1,
               name: "annotator",
               stroke: e.color,
@@ -532,16 +549,16 @@ const ie = ["title"], se = ["data-open"], ae = {
           g.value && e.titles.annotator && !n.$slots.optionAnnotator ? (o(), s("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 })
+            class: d({ "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: b({ background: e.backgroundColor, color: e.color })
           }, c(e.titles.annotator), 7)) : a("", !0)
         ], 32)) : a("", !0)
-      ], 12, se)
+      ], 12, ue)
     ], 4)), [
-      [oe(ne), q]
+      [le(ie), H]
     ]);
   }
-}, ge = /* @__PURE__ */ le(ae, [["__scopeId", "data-v-1400581b"]]);
+}, de = /* @__PURE__ */ se(re, [["__scopeId", "data-v-13ca0ffa"]]);
 export {
-  ge as default
+  de as default
 };

package/dist/{dom-to-png-BOu5-Ohz.js → dom-to-png-DGA4a3xT.js}

@@ -1,4 +1,4 @@
-import { X as x } from "./index-BKQqb9lF.js";
+import { X as x } from "./index-CaxArMHL.js";
 async function F(n) {
   const i = n.querySelectorAll("img"), s = Array.from(i).map((t) => new Promise((o) => {
     if (!t.src || t.src.startsWith("data:")) return o();

package/dist/{img-gBDz7xQQ.js → img-DSrvx9J6.js}

@@ -1,4 +1,4 @@
-import { d as n } from "./dom-to-png-BOu5-Ohz.js";
+import { d as n } from "./dom-to-png-DGA4a3xT.js";
 async function u({ domElement: t, fileName: c, format: f = "png", scale: i = 2, base64: a = !1, img: g = !1 }) {
   if (!t) return Promise.reject("No element provided");
   const h = typeof navigator < "u" && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);