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