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

package/dist/BaseLegendToggle-C_Db-y7s.js

@@ -0,0 +1,56 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t } from "./BaseIcon-DfLoHNUj.js";
+import { createElementBlock as n, createElementVNode as r, createVNode as i, normalizeClass as a, normalizeStyle as o, openBlock as s, withKeys as c } from "vue";
+var l = /* @__PURE__ */ e({
+	__name: "BaseLegendToggle",
+	props: {
+		backgroundColor: {
+			type: String,
+			default: "#CCCCCC"
+		},
+		color: {
+			type: String,
+			default: "#2D353C"
+		},
+		fontSize: {
+			type: Number,
+			default: 14
+		},
+		checked: { type: Boolean },
+		isCursorPointer: { type: Boolean }
+	},
+	emits: ["toggle"],
+	setup(e, { emit: l }) {
+		let u = l;
+		return (l, d) => (s(), n("div", {
+			class: a({ "vue-ui-legend-toggle-wrapper": e.isCursorPointer }),
+			"data-dom-to-png-ignore": ""
+		}, [r("div", {
+			class: "vue-ui-legend-toggle",
+			role: "button",
+			tabindex: "0",
+			onClick: d[0] ||= (e) => u("toggle"),
+			onKeydown: d[1] ||= c((e) => u("toggle"), ["enter"]),
+			style: o({
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				backgroundColor: e.backgroundColor,
+				padding: e.fontSize / 4 + "px"
+			})
+		}, [i(t, {
+			name: e.checked ? "minus" : "check",
+			stroke: e.color,
+			size: e.fontSize * .6,
+			"stroke-width": e.fontSize / 4
+		}, null, 8, [
+			"name",
+			"stroke",
+			"size",
+			"stroke-width"
+		])], 36)], 2));
+	}
+}, [["__scopeId", "data-v-f05513e8"]]);
+//#endregion
+export { l as t };

package/dist/BaseScanner-Dr2a1Msy.js

@@ -0,0 +1,27 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { computed as t, createElementBlock as n, openBlock as r, ref as i, unref as a, watchEffect as o } from "vue";
+//#region src/useLoading.js
+function s({ config: e, dataset: n, skeletonDataset: r, skeletonConfig: s, FINAL_CONFIG: c, prepareConfig: l, callback: u = null, dsIsNumber: d = !1, allowEmptyDataset: f = !1 }) {
+	let p = i(!1), m = t(() => {
+		let t = a(e)?.loading ?? !1, r = a(n), i = f ? !1 : d ? [null, void 0].includes(r) : r == null || Array.isArray(r) && r.length === 0 || Object.keys(r).length === 0;
+		return p.value || t || i;
+	}), h = i(a(n));
+	return o(() => {
+		h.value = m.value ? r : a(n), c.value = m.value ? s : l(), u && u();
+	}), {
+		loading: m,
+		FINAL_DATASET: h,
+		manualLoading: p,
+		skeletonDataset: r,
+		skeletonConfig: s
+	};
+}
+//#endregion
+//#region src/atoms/BaseScanner.vue
+var c = {}, l = { class: "vue-data-ui-scanner" };
+function u(e, t) {
+	return r(), n("div", l);
+}
+var d = /* @__PURE__ */ e(c, [["render", u], ["__scopeId", "data-v-8c8b2e12"]]);
+//#endregion
+export { s as n, d as t };

package/dist/BaseZoomControls-CG7hI_1P.js

@@ -0,0 +1,111 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t } from "./BaseIcon-DfLoHNUj.js";
+import { n } from "./exposedLib-CI8ji8G-.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, normalizeClass as s, normalizeStyle as c, openBlock as l, toDisplayString as u, unref as d } from "vue";
+//#region src/atoms/BaseZoomControls.vue
+var f = ["disabled"], p = /* @__PURE__ */ e({
+	__name: "BaseZoomControls",
+	props: {
+		config: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		scale: {
+			type: Number,
+			default: 0
+		},
+		withDirection: {
+			type: Boolean,
+			default: !1
+		},
+		isFullscreen: {
+			type: Boolean,
+			default: !1
+		},
+		isCursorPointer: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"zoomIn",
+		"zoomOut",
+		"resetZoom",
+		"switchDirection"
+	],
+	setup(e, { emit: p }) {
+		let m = p;
+		return (p, h) => (l(), i("div", {
+			class: s({
+				"vue-data-ui-zoom-controls": !0,
+				"vue-data-ui-zoom-controls-fullscreen": e.isFullscreen
+			}),
+			"data-dom-to-png-ignore": "",
+			style: c({
+				border: e.config.style.chart.controls.border,
+				backgroundColor: e.config.style.chart.controls.backgroundColor,
+				padding: e.config.style.chart.controls.padding,
+				borderRadius: e.config.style.chart.controls.borderRadius,
+				"--vue-data-ui-zoom-control-button-color": e.config.style.chart.controls.buttonColor,
+				"--vue-data-ui-zoom-control-button-color-hover": d(n)(e.config.style.chart.controls.buttonColor, .2)
+			})
+		}, [
+			a("button", {
+				onClick: h[0] ||= (e) => m("zoomOut"),
+				class: "vue-data-ui-zoom-controls-button",
+				"data-cy-zoom-out": "",
+				style: c({ cursor: e.isCursorPointer ? "pointer" : "default" })
+			}, [o(t, {
+				name: "zoomMinus",
+				stroke: e.config.style.chart.controls.color,
+				size: e.config.style.chart.controls.fontSize * 1.2
+			}, null, 8, ["stroke", "size"])], 4),
+			a("button", {
+				class: "vue-data-ui-zoom-controls-button-zoom",
+				onClick: h[1] ||= (e) => m("resetZoom"),
+				"data-cy-zoom-reset": "",
+				style: c({
+					color: e.config.style.chart.controls.color,
+					width: e.config.style.chart.controls.fontSize * 4 + "px",
+					borderRadius: e.config.style.chart.controls.borderRadius,
+					fontSize: e.config.style.chart.controls.fontSize + "px",
+					cursor: e.isCursorPointer ? "pointer" : "default"
+				})
+			}, u(Math.round(e.scale * 100)) + "% ", 5),
+			a("button", {
+				onClick: h[2] ||= (e) => m("zoomIn"),
+				class: "vue-data-ui-zoom-controls-button",
+				"data-cy-zoom-in": "",
+				style: c({ cursor: e.isCursorPointer ? "pointer" : "default" })
+			}, [o(t, {
+				name: "zoomPlus",
+				stroke: e.config.style.chart.controls.color,
+				size: e.config.style.chart.controls.fontSize * 1.2
+			}, null, 8, ["stroke", "size"])], 4),
+			a("button", {
+				disabled: e.scale === 1,
+				onClick: h[3] ||= (e) => m("resetZoom"),
+				class: "vue-data-ui-zoom-controls-button",
+				style: c({ cursor: e.isCursorPointer ? "pointer" : "default" })
+			}, [o(t, {
+				name: "revert",
+				stroke: e.config.style.chart.controls.color,
+				size: e.config.style.chart.controls.fontSize * 1.2
+			}, null, 8, ["stroke", "size"])], 12, f),
+			e.withDirection ? (l(), i("button", {
+				key: 0,
+				onClick: h[4] ||= (e) => m("switchDirection"),
+				class: "vue-data-ui-zoom-controls-button",
+				style: c({ cursor: e.isCursorPointer ? "pointer" : "default" })
+			}, [o(t, {
+				name: "direction",
+				stroke: e.config.style.chart.controls.color,
+				size: e.config.style.chart.controls.fontSize * 1.2
+			}, null, 8, ["stroke", "size"])], 4)) : r("", !0)
+		], 6));
+	}
+}, [["__scopeId", "data-v-b5d92405"]]);
+//#endregion
+export { p as t };

package/dist/ColorPicker-Bjwxnvfh.js

@@ -0,0 +1,255 @@
+import { r as e } from "./lib-DUeYQsS0.js";
+import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as n } from "./BaseIcon-DfLoHNUj.js";
+import { t as r } from "./vClickOutside-DUrZWttG.js";
+import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, guardReactiveProps as f, nextTick as p, normalizeProps as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, unref as S, useCssVars as C, watch as w, watchEffect as T, withDirectives as E, withKeys as D, withModifiers as O } from "vue";
+//#region src/atoms/ColorPicker.vue
+var k = ["aria-expanded", "aria-label"], A = [
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], ee = { style: {
+	position: "absolute",
+	top: "50%",
+	left: "50%",
+	transform: "translate(-50%, -46%)"
+} }, te = ["value"], ne = ["onClick"], re = { style: {
+	position: "absolute",
+	top: "50%",
+	left: "50%",
+	transform: "translate(-50%, -46%)"
+} }, ie = ["value"], j = /* @__PURE__ */ t({
+	__name: "ColorPicker",
+	props: {
+		value: {
+			type: String,
+			default: "#ffffff"
+		},
+		size: {
+			type: String,
+			default: "50px"
+		},
+		backgroundColor: {
+			type: String,
+			default: "#FFFFFF"
+		},
+		buttonBorderColor: {
+			type: String,
+			default: "#FFFFFF"
+		},
+		teleported: {
+			type: Boolean,
+			default: !1
+		},
+		isCursorPointer: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:value"],
+	setup(t, { emit: j }) {
+		C((e) => ({ v6ca7d17c: t.buttonBorderColor }));
+		let M = t, N = j, P = y(null), F = y(null), I = y(null), L = y(!1), R = y(!1), z = y({
+			top: 0,
+			left: 0
+		}), B = o(() => ({
+			backgroundColor: M.value,
+			width: "100%",
+			height: "100%",
+			cursor: M.isCursorPointer ? "pointer" : "default"
+		})), V = o(() => e(M.value));
+		function H(e) {
+			N("update:value", e), L.value = !1;
+		}
+		function U(e) {
+			N("update:value", e.target.value);
+		}
+		function W(e) {
+			e?.stopPropagation?.(), R.value = !0, I.value?.click();
+		}
+		function G() {
+			L.value = !1;
+		}
+		function K() {
+			!R.value && L.value && G();
+		}
+		async function q() {
+			L.value = !L.value, L.value && M.teleported && (await p(), J());
+		}
+		function J() {
+			if (!F.value) return;
+			let e = F.value.getBoundingClientRect();
+			z.value = {
+				top: e.top + 36,
+				left: e.right - 48
+			};
+		}
+		function Y() {
+			L.value && M.teleported && J();
+		}
+		function X() {
+			setTimeout(() => R.value = !1, 0);
+		}
+		T((e) => {
+			let t = I.value;
+			if (!t) return;
+			let n = () => X(), r = () => X(), i = () => {};
+			t.addEventListener("blur", n), t.addEventListener("change", r), t.addEventListener("input", i), e(() => {
+				t.removeEventListener("blur", n), t.removeEventListener("change", r), t.removeEventListener("input", i);
+			});
+		});
+		function Z() {
+			X();
+		}
+		function Q() {
+			document.visibilityState === "visible" && X();
+		}
+		_(() => {
+			window.addEventListener("scroll", Y, { passive: !0 }), window.addEventListener("resize", Y, { passive: !0 }), window.addEventListener("focus", Z), document.addEventListener("visibilitychange", Q);
+		}), g(() => {
+			window.removeEventListener("scroll", Y), window.removeEventListener("resize", Y), window.removeEventListener("focus", Z), document.removeEventListener("visibilitychange", Q);
+		}), w(() => M.value, (e) => {
+			I.value && (I.value.value = e);
+		});
+		let $ = y([
+			"#000000",
+			"#FFFFFF",
+			"#FF5733",
+			"#33FF57",
+			"#3357FF",
+			"#FFC300",
+			"#800080",
+			"#FF1493",
+			"#00CED1"
+		]);
+		return (e, o) => E((v(), l("div", {
+			ref_key: "wrapperRef",
+			ref: P,
+			onKeydown: D(K, ["esc"]),
+			style: {
+				height: "100%",
+				width: "100%",
+				position: "relative"
+			},
+			"aria-expanded": L.value ? "true" : "false",
+			"aria-haspopup": "dialog",
+			"aria-label": `Choose color. Current color ${t.value}`
+		}, [
+			u("button", {
+				ref_key: "buttonRef",
+				ref: F,
+				class: "icon",
+				onClick: q,
+				style: h(B.value),
+				type: "button"
+			}, [x(e.$slots, "annotator-action-color", m(f({ color: V.value })), () => [d(n, {
+				name: "palette",
+				stroke: V.value,
+				size: 22
+			}, null, 8, ["stroke"])], !0)], 4),
+			L.value && !t.teleported ? (v(), l("div", {
+				key: 0,
+				class: "vue-ui-color-picker",
+				role: "dialog",
+				"aria-label": "Color picker",
+				style: h({
+					backgroundColor: t.backgroundColor,
+					position: "absolute",
+					left: "calc(100% + 30px)",
+					top: "50%",
+					transform: "translateY(-18%)"
+				}),
+				onMousedown: o[2] ||= O(() => {}, ["stop"]),
+				onClick: o[3] ||= O(() => {}, ["stop"]),
+				onTouchstart: o[4] ||= O(() => {}, ["stop"]),
+				onKeydown: D(K, ["esc"])
+			}, [(v(!0), l(i, null, b($.value, (e) => (v(), l("button", {
+				key: e,
+				"aria-label": `Select color ${e}`,
+				"aria-pressed": t.value === e ? "true" : "false",
+				class: "vue-ui-color-picker-option",
+				type: "button",
+				style: h({
+					backgroundColor: e,
+					outline: `1px solid ${t.buttonBorderColor}`,
+					cursor: t.isCursorPointer ? "pointer" : "default"
+				}),
+				onClick: () => H(e)
+			}, null, 12, A))), 128)), u("button", {
+				class: "vue-ui-color-picker-option",
+				type: "button",
+				style: h({
+					backgroundColor: t.value,
+					outline: `1px solid ${t.buttonBorderColor}`,
+					cursor: t.isCursorPointer ? "pointer" : "default"
+				}),
+				"aria-label": "Open native color picker",
+				onClick: O(W, ["stop"]),
+				onMousedown: o[0] ||= O(() => {}, ["stop"]),
+				onTouchstart: o[1] ||= O(() => {}, ["stop"])
+			}, [u("div", ee, [d(n, {
+				name: "colorPicker",
+				stroke: V.value,
+				size: 22
+			}, null, 8, ["stroke"])]), u("input", {
+				ref_key: "colorInput",
+				ref: I,
+				type: "color",
+				value: t.value,
+				class: "hidden-input",
+				onInput: U
+			}, null, 40, te)], 36)], 36)) : c("", !0),
+			L.value && t.teleported ? (v(), s(a, {
+				key: 1,
+				to: "body"
+			}, [u("div", {
+				tabindex: "0",
+				class: "vue-ui-color-picker",
+				style: h({
+					backgroundColor: t.backgroundColor,
+					position: "fixed",
+					top: z.value.top + "px",
+					left: z.value.left + "px",
+					zIndex: 2147483647
+				}),
+				onMousedown: o[7] ||= O(() => {}, ["stop"]),
+				onClick: o[8] ||= O(() => {}, ["stop"]),
+				onTouchstart: o[9] ||= O(() => {}, ["stop"])
+			}, [(v(!0), l(i, null, b($.value, (e) => (v(), l("button", {
+				key: e,
+				class: "vue-ui-color-picker-option",
+				type: "button",
+				style: h({
+					backgroundColor: e,
+					outline: `1px solid ${t.buttonBorderColor}`,
+					cursor: t.isCursorPointer ? "pointer" : "default"
+				}),
+				onClick: () => H(e)
+			}, null, 12, ne))), 128)), u("button", {
+				class: "vue-ui-color-picker-option",
+				type: "button",
+				style: h({
+					backgroundColor: t.value,
+					outline: `1px solid ${t.buttonBorderColor}`,
+					cursor: t.isCursorPointer ? "cursor" : "default"
+				}),
+				onClick: O(W, ["stop"]),
+				onMousedown: o[5] ||= O(() => {}, ["stop"]),
+				onTouchstart: o[6] ||= O(() => {}, ["stop"])
+			}, [u("div", re, [d(n, {
+				name: "colorPicker",
+				stroke: V.value,
+				size: 22
+			}, null, 8, ["stroke"])]), u("input", {
+				ref_key: "colorInput",
+				ref: I,
+				type: "color",
+				value: t.value,
+				class: "hidden-input",
+				onInput: U
+			}, null, 40, ie)], 36)], 36)])) : c("", !0)
+		], 40, k)), [[S(r), K]]);
+	}
+}, [["__scopeId", "data-v-2965a72c"]]);
+//#endregion
+export { j as t };

package/dist/DataTable-B--IN22e.js

@@ -0,0 +1,150 @@
+import { t as e } from "./Shape-BPCJfphn.js";
+import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as n } from "./BaseIcon-DfLoHNUj.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, normalizeClass as l, normalizeStyle as u, onMounted as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useCssVars as v, withKeys as y } from "vue";
+//#region src/atoms/DataTable.vue
+var b = { class: "vue-ui-data-table" }, x = { style: {
+	display: "flex",
+	"align-items": "center",
+	"justify-content": "flex-end",
+	"padding-right": "3px",
+	gap: "3px"
+} }, S = { style: {
+	width: "12px",
+	height: "12px"
+} }, C = {
+	key: 0,
+	height: "12",
+	width: "12",
+	viewBox: "0 0 20 20",
+	style: { background: "none" }
+}, w = ["fill"], T = ["data-cell"], E = {
+	dir: "auto",
+	style: {
+		display: "flex",
+		"align-items": "center",
+		gap: "5px",
+		"justify-content": "flex-end",
+		width: "100%",
+		"padding-right": "3px"
+	}
+}, D = {
+	key: 0,
+	height: "12",
+	width: "12",
+	viewBox: "0 0 20 20",
+	style: {
+		background: "none",
+		overflow: "visible"
+	}
+}, O = /* @__PURE__ */ t({
+	__name: "DataTable",
+	props: {
+		colNames: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		head: Array,
+		body: Array,
+		title: String,
+		config: Object,
+		withCloseButton: {
+			type: Boolean,
+			default: !0
+		},
+		isCursorPointer: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["close"],
+	setup(t, { emit: O }) {
+		v((e) => ({ v7ded12c6: _(F) }));
+		let k = t, { backgroundColor: A, color: j, outline: M } = k.config.th, { backgroundColor: N, color: P, outline: F } = k.config.td, I = i(() => k.config.breakpoint), L = p(null), R = p(!1);
+		d(() => {
+			let e = new ResizeObserver((e) => {
+				e.forEach((e) => {
+					R.value = e.contentRect.width < I.value;
+				});
+			});
+			L.value && e.observe(L.value);
+		});
+		let z = O;
+		return (i, d) => (f(), o("div", {
+			ref_key: "tableContainer",
+			ref: L,
+			style: u(`width: 100%; container-type: inline-size; position:relative;${t.withCloseButton ? "padding-top: 36px;" : ""}overflow:auto`),
+			class: l({
+				"atom-data-table": !0,
+				"vue-ui-responsive": R.value
+			})
+		}, [t.withCloseButton ? (f(), o("div", {
+			key: 0,
+			"data-dom-to-png-ignore": "",
+			role: "button",
+			tabindex: "0",
+			style: u(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:${t.isCursorPointer ? "pointer" : "default"}; background:${_(A)};`),
+			onClick: d[0] ||= (e) => z("close"),
+			onKeypress: d[1] ||= y((e) => z("close"), ["enter"])
+		}, [c(n, {
+			name: "close",
+			stroke: _(j),
+			"stroke-width": 2
+		}, null, 8, ["stroke"])], 36)) : a("", !0), s("table", b, [
+			s("caption", {
+				style: u({
+					backgroundColor: _(A),
+					color: _(j),
+					outline: _(M)
+				}),
+				class: "vue-ui-data-table__caption"
+			}, g(t.title), 5),
+			s("thead", null, [s("tr", {
+				role: "row",
+				style: u([{ "font-variant-numeric": "tabular-nums" }, {
+					backgroundColor: _(A),
+					color: _(j)
+				}]),
+				class: "vue-ui-data-table__thead-row"
+			}, [(f(!0), o(r, null, m(t.head, (e, t) => (f(), o("th", {
+				role: "cell",
+				style: u({ outline: _(M) }),
+				key: `th_${t}`
+			}, [s("div", x, [s("div", S, [e?.color ? (f(), o("svg", C, [s("circle", {
+				cx: "10",
+				cy: "10",
+				r: "10",
+				fill: e.color
+			}, null, 8, w)])) : a("", !0)]), h(i.$slots, "th", { th: e }, void 0, !0)])], 4))), 128))], 4)]),
+			s("tbody", null, [(f(!0), o(r, null, m(t.body, (n, d) => (f(), o("tr", {
+				role: "row",
+				style: u([{ "font-variant-numeric": "tabular-nums" }, {
+					backgroundColor: _(N),
+					color: _(P)
+				}]),
+				class: l({
+					"vue-ui-data-table__tbody__row": !0,
+					"vue-ui-data-table__tbody__row-even": d % 2 == 0,
+					"vue-ui-data-table__tbody__row-odd": d % 2 != 0
+				})
+			}, [(f(!0), o(r, null, m(n, (n, r) => (f(), o("td", {
+				role: "cell",
+				"data-cell": (t.colNames[r] && t.colNames[r].name ? t.colNames[r].name : "") || t.colNames[r] || "",
+				style: u({ outline: _(F) }),
+				class: "vue-ui-data-table__tbody__td"
+			}, [s("div", E, [n?.color ? (f(), o("svg", D, [c(e, {
+				plot: {
+					x: 10,
+					y: 10
+				},
+				color: n.color,
+				radius: 9,
+				shape: t.config.shape || n.shape || "circle"
+			}, null, 8, ["color", "shape"])])) : a("", !0), h(i.$slots, "td", { td: n }, void 0, !0)])], 12, T))), 256))], 6))), 256))])
+		])], 6));
+	}
+}, [["__scopeId", "data-v-c3927505"]]);
+//#endregion
+export { O as default };