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