vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
548 lines (547 loc) • 21.7 kB
JavaScript
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-CCivwZUq.js";
import z from "./img-Ctts6JQb.js";
import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ie = ["title"], se = ["data-open"], ae = {
__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
},
callbacks: {
type: Object,
default() {
return {};
}
},
printScale: {
type: Number,
default: 2
}
},
emits: ["generatePdf", "generateCsv", "generateImage", "toggleTable", "toggleLabels", "toggleSort", "toggleFullscreen", "toggleStack", "toggleTooltip", "toggleAnimation", "toggleAnnotator"],
setup(e, { emit: N }) {
const i = e, b = N;
async function D() {
if (i.callbacks.pdf) {
const { imageUri: n, base64: t } = await z({ domElement: i.chartElement, base64: !0, img: !0, scale: i.printScale });
i.callbacks.pdf({ domElement: i.chartElement, base64: t, imageUri: n });
} else
b("generatePdf");
}
function U() {
b("generateCsv", i.callbacks.csv);
}
async function j() {
if (i.callbacks.img) {
const { imageUri: n, base64: t } = await z({ domElement: i.chartElement, base64: !0, img: !0, scale: i.printScale });
i.callbacks.img({ domElement: i.chartElement, imageUri: n, base64: t });
} else
b("generateImage");
}
const A = m(!1);
function V() {
i.callbacks.table ? i.callbacks.table() : (A.value = !A.value, b("toggleTable"));
}
const y = m(!1), K = m(!0);
function I() {
g.value = window.innerWidth > 600, y.value = !y.value, y.value && (K.value = !1);
}
function W() {
i.isPrinting || i.isImaging || (y.value = !1);
}
function q() {
y.value && W();
}
const B = m(i.isLabelActive);
function x() {
i.callbacks.labels ? i.callbacks.labels() : (B.value = !B.value, b("toggleLabels"));
}
const h = m(i.isAnimation);
function E() {
i.callbacks.animation ? i.callbacks.animation() : (h.value = !h.value, b("toggleAnimation"));
}
const C = w({
get: () => i.isAnnotation,
set: (n) => n
});
function O() {
i.callbacks.annotator ? i.callbacks.annotator() : (C.value = !C.value, b("toggleAnnotator"));
}
function H() {
i.callbacks.sort ? i.callbacks.sort() : b("toggleSort");
}
const F = m(i.isStacked);
function R() {
i.callbacks.stack ? i.callbacks.stack() : (F.value = !F.value, b("toggleStack"));
}
const M = m(i.isTooltip);
function G() {
i.callbacks.tooltip ? i.callbacks.tooltip() : (M.value = !M.value, b("toggleTooltip"));
}
const J = w({
get: () => i.isFullscreen,
set: (n) => b("toggleFullscreen", n)
});
function L() {
if (!i.chartElement) return;
const n = !i.isFullscreen;
J.value = n, n ? i.chartElement.requestFullscreen() : document.exitFullscreen();
}
function P() {
const n = !!document.fullscreenElement;
b("toggleFullscreen", n);
}
Q(() => {
document.addEventListener("fullscreenchange", P);
}), Y(() => {
document.removeEventListener("fullscreenchange", P);
});
const g = m(window.innerWidth > 600), l = m({
tooltip: !1,
pdf: !1,
csv: !1,
img: !1,
table: !1,
labels: !1,
sort: !1,
stack: !1,
fullscreen: !1,
animation: !1,
annotator: !1
});
return (n, t) => Z((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;`)
}, [
X("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"])
}, [
d(n.$slots, "menuIcon", S(ee({ isOpen: y.value, color: e.color })), () => [
te(r, {
name: y.value ? "close" : "menu",
stroke: e.color,
"stroke-width": 2
}, null, 8, ["name", "stroke"])
], !0)
], 44, ie),
X("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`}`)
}, [
e.hasTooltip ? (o(), s("button", {
key: 0,
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: G,
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 }, [
M.value ? (o(), f(r, {
key: 0,
name: "tooltip",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (o(), f(r, {
key: 1,
name: "tooltipDisabled",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
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 })
}, 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,
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 }, [
e.isPrinting ? (o(), f(r, {
key: 0,
name: "spin",
isSpin: "",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (o(), f(r, {
key: 1,
name: "pdf",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
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 })
}, 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,
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, {
key: 1,
name: "excel",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])),
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 })
}, 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,
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 }, [
e.isImaging ? (o(), f(r, {
key: 0,
name: "spin",
isSpin: "",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (o(), f(r, {
key: 1,
name: "image",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
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 })
}, 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,
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"])),
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 })
}, 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,
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, {
key: 1,
name: B.value ? "labelClose" : "labelOpen",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["name", "stroke"])),
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 })
}, 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,
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, {
key: 1,
name: "sort",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])),
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 })
}, 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,
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 }, [
F.value ? (o(), f(r, {
key: 0,
name: "unstack",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : (o(), f(r, {
key: 1,
name: "stack",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
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 })
}, c(e.titles.stack), 7)) : a("", !0)
], 32)) : a("", !0),
e.hasFullscreen ? (o(), s("button", {
key: 8,
tabindex: "0",
class: "vue-ui-user-options-button",
onMouseenter: t[16] || (t[16] = (u) => l.value.fullscreen = !0),
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 }, [
e.isFullscreen ? (o(), f(r, {
key: 0,
name: "exitFullscreen",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : a("", !0),
e.isFullscreen ? a("", !0) : (o(), f(r, {
key: 1,
name: "fullscreen",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
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 })
}, c(e.titles.fullscreen), 7)) : a("", !0)
], 32)) : a("", !0),
e.hasAnimation ? (o(), s("button", {
key: 9,
tabindex: "0",
class: "vue-ui-user-options-button",
onMouseenter: t[19] || (t[19] = (u) => l.value.animation = !0),
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, {
key: 0,
name: "play",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : a("", !0),
h.value ? a("", !0) : (o(), f(r, {
key: 1,
name: "pause",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
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 })
}, c(e.titles.animation), 7)) : a("", !0)
], 32)) : a("", !0),
e.hasAnnotator ? (o(), s("button", {
key: 10,
tabindex: "0",
class: "vue-ui-user-options-button",
onMouseenter: t[21] || (t[21] = (u) => l.value.annotator = !0),
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, {
key: 0,
name: "annotatorDisabled",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"])) : a("", !0),
C.value ? a("", !0) : (o(), f(r, {
key: 1,
name: "annotator",
stroke: e.color,
style: { "pointer-events": "none" }
}, null, 8, ["stroke"]))
], 64)),
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 })
}, c(e.titles.annotator), 7)) : a("", !0)
], 32)) : a("", !0)
], 12, se)
], 4)), [
[oe(ne), q]
]);
}
}, ge = /* @__PURE__ */ le(ae, [["__scopeId", "data-v-1400581b"]]);
export {
ge as default
};