vue-data-ui/dist/usePrinter-DldU0tBx.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

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