vue-data-ui 3.20.3 → 3.20.5-beta.1

package/dist/vue-ui-carousel-table-D08jupGE.js

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