vue-data-ui 3.25.11 → 3.25.13

package/dist/vue-ui-carousel-table-D-3KSWok.js

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