vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
407 lines (406 loc) • 16.4 kB
JavaScript
import { ref as n, useSlots as Fe, onMounted as A, computed as P, watch as E, onBeforeUnmount as ve, nextTick as pe, createElementBlock as v, openBlock as u, unref as r, createElementVNode as H, createBlock as ce, createCommentVNode as R, normalizeClass as Be, normalizeStyle as f, createTextVNode as L, renderSlot as p, toDisplayString as G, Fragment as D, renderList as X, mergeProps as fe, createSlots as Pe, withCtx as w, normalizeProps as he, guardReactiveProps as me } from "vue";
import { u as Re, c as ze, o as j, e as J, s as Se, q as Ee, r as He } from "./index-CHWA6Lnw.js";
import { u as Ne } from "./useNestedProp-ByBiJC9_.js";
import { u as Ue, U as Ve } from "./usePrinter-DibtVl2x.js";
import Me from "./vue-ui-skeleton-BSUFPx4a.js";
import { u as qe } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ge = ["id"], De = ["height"], Xe = ["data-cell", "height"], je = {
key: 2,
ref: "source",
dir: "auto"
}, Je = {
__name: "vue-ui-carousel-table",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(T, { expose: ge }) {
const { vue_ui_carousel_table: be } = Re(), i = T, N = n(ze()), K = n(!1), O = n(!!i.dataset), ye = Fe();
A(() => {
Q();
}), A(() => {
ye["chart-background"] && console.warn("VueUiCarouselTable does not support the #chart-background slot.");
});
function Q() {
j(i.dataset) ? J({
componentName: "VueUiCarouselTable",
type: "dataset"
}) : ((!i.dataset.head || j(i.dataset.head)) && (J({
componentName: "VueUiCarouselTable",
type: "datasetAttribute",
property: "head"
}), O.value = !1), (!i.dataset.body || j(i.dataset.body)) && (J({
componentName: "VueUiCarouselTable",
type: "datasetAttribute",
property: "body"
}), O.value = !1));
}
const e = P({
get: () => Z(),
set: (t) => t
}), { userOptionsVisible: U, setUserOptionsVisibility: W, keepUserOptionState: Y } = qe({ config: e.value });
function Z() {
return Ne({
userConfig: i.config,
defaultConfig: be
});
}
E(() => i.config, (t) => {
e.value = Z(), U.value = !e.value.userOptions.showOnChartHover, Q();
}, { deep: !0 }), E(() => i.dataset, (t) => {
V();
}, { deep: !0 });
const { isPrinting: _, isImaging: ee, generatePdf: Ce, generateImage: te } = Ue({
elementId: `carousel-table_${N.value}`,
fileName: e.value.caption.text || "vue-ui-carousel-table"
}), h = n({
showAnimation: e.value.animation.use
}), l = n(null), ae = n(null), x = n(null), I = n(null), F = n(0), z = n(0), S = n(!1), B = n(null), b = n(null), k = n(0);
function V() {
B.value && (b.value = {
elements: B.value.getElementsByTagName("tr"),
heights: Array.from(B.value.getElementsByTagName("tr")).map((t) => t.getBoundingClientRect().height)
});
}
A(V);
const $e = P(() => !b.value || !b.value.heights.length ? 0 : Math.max(...b.value.heights) + F.value + z.value), Te = P(() => i.dataset.body ? e.value.tbody.tr.visible <= i.dataset.body.length ? e.value.tbody.tr.visible : i.dataset.body.length : 0), ke = P(() => (e.value.tbody.tr.height + e.value.tbody.tr.td.padding.top + e.value.tbody.tr.td.padding.bottom + e.value.tbody.tr.border.size * 2) * Te.value + F.value + z.value), c = n(0), y = n(null), d = n(0), C = n(!1), oe = n(0);
A(() => {
x.value && (F.value = x.value.getBoundingClientRect().height), I.value && (z.value = I.value.getBoundingClientRect().height), h.value.showAnimation && b.value && ne();
}), A(() => {
if (l.value) {
let a = function() {
const s = t.getBoundingClientRect().bottom;
o.forEach((g) => {
g.getBoundingClientRect().top < s ? g.style.visibility = "hidden" : g.style.visibility = "visible";
});
};
const t = l.value.querySelector("thead"), o = Array.from(B.value.querySelectorAll("tr"));
l.value.addEventListener("scroll", a), a(), ve(() => {
l.value.removeEventListener("scroll", a);
});
}
});
function Ae(t) {
K.value = t, oe.value += 1;
}
function ne() {
!y.value && !C.value && (e.value.animation.type === "scroll" ? y.value = requestAnimationFrame(le) : y.value = requestAnimationFrame(ie));
}
function we() {
if (!l.value) return !1;
const { scrollTop: t, scrollHeight: o, clientHeight: a } = l.value;
return t + a >= o;
}
function le(t) {
if (C.value) return;
d.value || (d.value = t), t - d.value >= e.value.animation.speedMs && (c.value += b.value.heights[k.value], (we() || k.value >= b.value.heights.length) && (c.value = 0, k.value = -1), k.value += 1, l.value && l.value.scrollTo({
top: c.value,
behavior: "smooth"
}), d.value = t), y.value = requestAnimationFrame(le);
}
function ie(t) {
if (C.value) return;
d.value || (d.value = t);
const o = t - d.value, a = e.value.animation.speedMs / 4 / 1e3;
o >= a && (c.value += a, c.value >= l.value.scrollHeight - l.value.clientHeight && (c.value = 0), l.value && l.value.scrollTo({
top: c.value,
behavior: "auto"
}), d.value = t), y.value = requestAnimationFrame(ie);
}
function m() {
C.value = !0, cancelAnimationFrame(y.value), y.value = null;
}
ve(m);
function $() {
!C.value || !h.value.showAnimation || (C.value = !1, d.value = 0, ne());
}
function Oe() {
e.value.animation.pauseOnHover && m();
}
const M = n(null);
function xe() {
m(), clearTimeout(M.value);
}
function se() {
clearTimeout(M.value), M.value = setTimeout($, 1e3);
}
E(
() => e.value.animation.use,
(t) => {
t ? (h.value.showAnimation = !0, $()) : (h.value.showAnimation = !1, m());
}
), E(
() => e.value.animation.type,
(t) => {
m(), c.value = 0, k.value = 0, l.value.scrollTo({
top: 0,
behavior: "auto"
}), $();
}
);
const Ie = P(() => e.value.responsiveBreakpoint);
A(() => {
const t = new ResizeObserver((o) => {
o.forEach((a) => {
S.value = a.contentRect.width < Ie.value;
}), F.value = x.value ? x.value.getBoundingClientRect().height : 0, z.value = I.value ? I.value.getBoundingClientRect().height : 0, k.value = 0, pe(() => {
m(), d.value = 0, c.value = 0, V(), $();
});
});
l.value && t.observe(l.value);
});
function ue() {
Ce();
}
function re() {
h.value.showAnimation = !h.value.showAnimation, h.value.showAnimation ? $() : m();
}
function de() {
pe(() => {
const t = i.dataset.head.map((s, g) => [
[i.dataset.body[g]]
]), o = [
[e.value.caption.text],
[i.dataset.head.map((s) => [s])]
].concat(t), a = Ee(o);
He({
csvContent: a,
title: e.value.caption.text || "vue-ui-carousel-table"
});
});
}
return ge({
pauseAnimation: m,
resumeAnimation: $,
toggleAnimation: re,
generateCsv: de,
generatePdf: ue,
generateImage: te
}), (t, o) => (u(), v("div", {
class: "vue-ui-carousel-table",
style: { position: "relative", overflow: "visible" },
ref_key: "chartContainer",
ref: ae,
onMouseenter: o[5] || (o[5] = () => r(W)(!0)),
onMouseleave: o[6] || (o[6] = () => r(W)(!1))
}, [
H("div", {
ref_key: "tableContainer",
ref: l,
id: `carousel-table_${N.value}`,
style: f({
height: r(_) || r(ee) ? "auto" : `${Math.max(ke.value, $e.value)}px`,
containerType: "inline-size",
position: "relative",
overflow: "auto",
fontFamily: e.value.fontFamily
}),
class: Be({ "vue-ui-responsive": S.value, "is-playing": e.value.scrollbar.hide || !C.value && e.value.scrollbar.showOnlyOnHover }),
onMouseover: o[0] || (o[0] = (a) => Oe()),
onMouseleave: o[1] || (o[1] = (a) => $()),
onTouchstart: o[2] || (o[2] = (a) => xe()),
onTouchend: o[3] || (o[3] = (a) => se()),
onTouchcancel: o[4] || (o[4] = (a) => se())
}, [
O.value ? (u(), v("table", {
key: 0,
class: "vue-data-ui-carousel-table",
style: f({
...e.value.style,
border: `${e.value.border.size}px solid ${e.value.border.color}`,
width: "100%",
borderCollapse: "collapse",
backgroundColor: e.value.tbody.backgroundColor
})
}, [
H("caption", {
ref_key: "caption",
ref: x,
class: "vue-data-ui-carousel-table-caption",
style: f({
...e.value.caption.style,
fontFamily: "inherit",
position: "sticky",
top: 0,
zIndex: 2,
paddingTop: e.value.caption.padding.top + "px",
paddingRight: e.value.caption.padding.right + "px",
paddingBottom: e.value.caption.padding.bottom + "px",
paddingLeft: e.value.caption.padding.left + "px",
boxShadow: S.value ? e.value.thead.tr.style.boxShadow : "none",
minHeight: "36px",
display: t.$slots.caption || e.value.caption.text || e.value.userOptions.show ? "" : "none"
})
}, [
L(G(e.value.caption.text && !t.$slots.caption ? e.value.caption.text : "") + " ", 1),
p(t.$slots, "caption", {}, void 0, !0)
], 4),
H("thead", {
style: f({ ...e.value.thead.style, position: "sticky", top: `${t.$slots.caption || e.value.caption.text || e.value.userOptions.show ? F.value : 0}px`, zIndex: 1 })
}, [
H("tr", {
ref_key: "tableRow",
ref: I,
role: "row",
style: f({
...e.value.thead.tr.style,
border: e.value.thead.tr.border.size ? `${e.value.thead.tr.border.size}px solid ${e.value.thead.tr.border.color}` : "none",
boxShadow: S.value ? "none" : e.value.thead.tr.style.boxShadow
}),
height: `${e.value.thead.tr.height}px`
}, [
(u(!0), v(D, null, X(T.dataset.head, (a, s) => (u(), v("th", {
role: "cell",
key: `th_${s}`,
style: f({
...e.value.thead.tr.th.style,
border: e.value.thead.tr.th.border.size ? `${e.value.thead.tr.th.border.size}px solid ${e.value.thead.tr.th.border.color}` : "none",
paddingTop: e.value.thead.tr.th.padding.top + "px",
paddingRight: e.value.thead.tr.th.padding.right + "px",
paddingBottom: e.value.thead.tr.th.padding.bottom + "px",
paddingLeft: e.value.thead.tr.th.padding.left + "px"
})
}, [
L(G(t.$slots.th ? "" : a) + " ", 1),
p(t.$slots, "th", fe({ ref_for: !0 }, { th: a, colIndex: s }), void 0, !0)
], 4))), 128))
], 12, De)
], 4),
T.dataset.body && T.dataset.head ? (u(), v("tbody", {
key: 0,
ref_key: "tbody",
ref: B,
style: {
clipPath: "inset(0,0,0,0)"
}
}, [
(u(!0), v(D, null, X(T.dataset.body, (a, s) => (u(), v("tr", {
style: f({
...e.value.tbody.tr.style,
border: `${e.value.tbody.tr.border.size}px solid ${e.value.tbody.tr.border.color}`,
verticalAlign: "middle"
})
}, [
(u(!0), v(D, null, X(a, (g, q) => (u(), v("td", {
role: "cell",
"data-cell": T.dataset.head[q] || "",
style: f({
...e.value.tbody.tr.td.style,
border: `${e.value.tbody.tr.td.border.size}px solid ${e.value.tbody.tr.td.border.color}`,
backgroundColor: r(Se)(e.value.tbody.tr.td.style.backgroundColor, s % 2 === 0 && e.value.tbody.tr.td.alternateColor ? e.value.tbody.tr.td.alternateOpacity * 100 : 100),
paddingTop: e.value.tbody.tr.td.padding.top + "px",
paddingRight: e.value.tbody.tr.td.padding.right + "px",
paddingBottom: e.value.tbody.tr.td.padding.bottom + "px",
paddingLeft: e.value.tbody.tr.td.padding.left + "px",
verticalAlign: "middle"
}),
height: `${e.value.tbody.tr.height}px`
}, [
L(G(t.$slots.td ? "" : g) + " ", 1),
p(t.$slots, "td", fe({ ref_for: !0 }, { td: g, rowIndex: s, colIndex: q }), void 0, !0)
], 12, Xe))), 256))
], 4))), 256))
], 512)) : R("", !0)
], 4)) : R("", !0)
], 46, Ge),
O.value ? R("", !0) : (u(), ce(Me, {
key: 0,
config: {
type: "table"
}
})),
e.value.userOptions.show && O.value && (r(Y) || r(U)) ? (u(), ce(Ve, {
ref: "details",
key: `user_option_${oe.value}`,
backgroundColor: e.value.style.backgroundColor,
color: e.value.style.color,
isPrinting: r(_),
isImaging: r(ee),
uid: N.value,
hasTooltip: !1,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasXls: e.value.userOptions.buttons.csv,
hasTable: !1,
hasLabel: !1,
hasAnimation: e.value.userOptions.buttons.animation,
isAnimation: !h.value.showAnimation,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: K.value,
chartElement: ae.value,
position: e.value.userOptions.position,
titles: { ...e.value.userOptions.buttonTitles },
zIndex: 3,
offsetX: 12,
onGeneratePdf: ue,
onGenerateCsv: de,
onGenerateImage: r(te),
onToggleAnimation: re,
onToggleFullscreen: Ae,
style: f({
visibility: r(Y) ? r(U) ? "visible" : "hidden" : "visible"
})
}, Pe({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: w(({ isOpen: a, color: s }) => [
p(t.$slots, "menuIcon", he(me({ isOpen: a, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: w(() => [
p(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: w(() => [
p(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: w(() => [
p(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionAnimation ? {
name: "optionAnimation",
fn: w(() => [
p(t.$slots, "optionAnimation", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: w(({ toggleFullscreen: a, isFullscreen: s }) => [
p(t.$slots, "optionFullscreen", he(me({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasAnimation", "isAnimation", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "onGenerateImage", "style"])) : R("", !0),
t.$slots.source ? (u(), v("div", je, [
p(t.$slots, "source", {}, void 0, !0)
], 512)) : R("", !0)
], 544));
}
}, tt = /* @__PURE__ */ Le(Je, [["__scopeId", "data-v-3823c499"]]);
export {
tt as default
};