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