vue-data-ui 3.27.0 → 3.27.1-beta.0

package/dist/BaseZoomControls-vNi8YykO.js

@@ -1,111 +0,0 @@
-import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t } from "./BaseIcon-Cx9FD751.js";
-import { r as n } from "./exposedLib-UNxZlnAS.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-hmC2bvwS.js

@@ -1,257 +0,0 @@
-import { r as e } from "./lib-D4wK6ljP.js";
-import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t as n } from "./BaseIcon-Cx9FD751.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 ee, useCssVars as te, watch as S, watchEffect as C, withDirectives as w, withKeys as T, withModifiers as E } from "vue";
-//#region src/atoms/ColorPicker.vue
-var D = ["aria-expanded", "aria-label"], O = [
-	"aria-label",
-	"aria-pressed",
-	"onClick"
-], k = { style: {
-	position: "absolute",
-	top: "50%",
-	left: "50%",
-	transform: "translate(-50%, -46%)"
-} }, A = ["value"], j = ["onClick"], ne = { style: {
-	position: "absolute",
-	top: "50%",
-	left: "50%",
-	transform: "translate(-50%, -46%)"
-} }, re = ["value"], M = /*#__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
-		},
-		palette: {
-			type: Array,
-			default: () => [
-				"#000000",
-				"#FFFFFF",
-				"#FF5733",
-				"#33FF57",
-				"#3357FF",
-				"#FFC300",
-				"#800080",
-				"#FF1493",
-				"#00CED1"
-			]
-		}
-	},
-	emits: ["update:value"],
-	setup(t, { emit: M }) {
-		te((e) => ({ v22adcab1: t.buttonBorderColor }));
-		let N = t, P = M, F = y(null), I = y(null), L = y(null), R = y(!1), z = y(!1), B = y({
-			top: 0,
-			left: 0
-		}), V = o(() => ({
-			backgroundColor: N.value,
-			width: "100%",
-			height: "100%",
-			cursor: N.isCursorPointer ? "pointer" : "default"
-		})), H = o(() => e(N.value));
-		function U(e) {
-			P("update:value", e), R.value = !1;
-		}
-		function W(e) {
-			P("update:value", e.target.value);
-		}
-		function G(e) {
-			e?.stopPropagation?.(), z.value = !0, L.value?.click();
-		}
-		function K() {
-			R.value = !1;
-		}
-		function q() {
-			!z.value && R.value && K();
-		}
-		async function J() {
-			R.value = !R.value, R.value && N.teleported && (await p(), Y());
-		}
-		function Y() {
-			if (!I.value) return;
-			let e = I.value.getBoundingClientRect();
-			B.value = {
-				top: e.top + 36,
-				left: e.right - 48
-			};
-		}
-		function X() {
-			R.value && N.teleported && Y();
-		}
-		function Z() {
-			setTimeout(() => z.value = !1, 0);
-		}
-		C((e) => {
-			let t = L.value;
-			if (!t) return;
-			let n = () => Z(), r = () => Z(), 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 Q() {
-			Z();
-		}
-		function $() {
-			document.visibilityState === "visible" && Z();
-		}
-		return _(() => {
-			window.addEventListener("scroll", X, { passive: !0 }), window.addEventListener("resize", X, { passive: !0 }), window.addEventListener("focus", Q), document.addEventListener("visibilitychange", $);
-		}), g(() => {
-			window.removeEventListener("scroll", X), window.removeEventListener("resize", X), window.removeEventListener("focus", Q), document.removeEventListener("visibilitychange", $);
-		}), S(() => N.value, (e) => {
-			L.value && (L.value.value = e);
-		}), (e, o) => w((v(), l("div", {
-			ref_key: "wrapperRef",
-			ref: F,
-			onKeydown: T(q, ["esc"]),
-			style: {
-				height: "100%",
-				width: "100%",
-				position: "relative"
-			},
-			"aria-expanded": R.value ? "true" : "false",
-			"aria-haspopup": "dialog",
-			"aria-label": `Choose color. Current color ${t.value}`
-		}, [
-			u("button", {
-				ref_key: "buttonRef",
-				ref: I,
-				class: "icon",
-				onClick: J,
-				style: h(V.value),
-				type: "button"
-			}, [x(e.$slots, "annotator-action-color", m(f({ color: H.value })), () => [d(n, {
-				name: "palette",
-				stroke: H.value,
-				size: 22
-			}, null, 8, ["stroke"])], !0)], 4),
-			R.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] ||= E(() => {}, ["stop"]),
-				onClick: o[3] ||= E(() => {}, ["stop"]),
-				onTouchstart: o[4] ||= E(() => {}, ["stop"]),
-				onKeydown: T(q, ["esc"])
-			}, [(v(!0), l(i, null, b(t.palette, (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: () => U(e)
-			}, null, 12, O))), 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: E(G, ["stop"]),
-				onMousedown: o[0] ||= E(() => {}, ["stop"]),
-				onTouchstart: o[1] ||= E(() => {}, ["stop"])
-			}, [u("div", k, [d(n, {
-				name: "colorPicker",
-				stroke: H.value,
-				size: 22
-			}, null, 8, ["stroke"])]), u("input", {
-				ref_key: "colorInput",
-				ref: L,
-				type: "color",
-				value: t.value,
-				class: "hidden-input",
-				onInput: W
-			}, null, 40, A)], 36)], 36)) : c("", !0),
-			R.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: B.value.top + "px",
-					left: B.value.left + "px",
-					zIndex: 2147483647
-				}),
-				onMousedown: o[7] ||= E(() => {}, ["stop"]),
-				onClick: o[8] ||= E(() => {}, ["stop"]),
-				onTouchstart: o[9] ||= E(() => {}, ["stop"])
-			}, [(v(!0), l(i, null, b(t.palette, (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: () => U(e)
-			}, null, 12, j))), 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: E(G, ["stop"]),
-				onMousedown: o[5] ||= E(() => {}, ["stop"]),
-				onTouchstart: o[6] ||= E(() => {}, ["stop"])
-			}, [u("div", ne, [d(n, {
-				name: "colorPicker",
-				stroke: H.value,
-				size: 22
-			}, null, 8, ["stroke"])]), u("input", {
-				ref_key: "colorInput",
-				ref: L,
-				type: "color",
-				value: t.value,
-				class: "hidden-input",
-				onInput: W
-			}, null, 40, re)], 36)], 36)])) : c("", !0)
-		], 40, D)), [[ee(r), q]]);
-	}
-}, [["__scopeId", "data-v-f18faf44"]]);
-//#endregion
-export { M as t };

package/dist/DataTable-CjF_An2h.js

@@ -1,150 +0,0 @@
-import { t as e } from "./Shape-DSwamtmO.js";
-import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t as n } from "./BaseIcon-Cx9FD751.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 };

package/dist/DefGrad-DVBqDjhO.js

@@ -1,48 +0,0 @@
-import { Fragment as e, createElementBlock as t, mergeProps as n, openBlock as r, renderList as i } from "vue";
-//#region src/atoms/DefGrad.vue
-var a = ["id"], o = [
-	"offset",
-	"stop-color",
-	"stop-opacity"
-], s = ["id"], c = [
-	"offset",
-	"stop-color",
-	"stop-opacity"
-], l = /*@__PURE__*/ Object.assign({ inheritAttrs: !1 }, {
-	__name: "DefGrad",
-	props: {
-		id: {
-			type: String,
-			required: !0
-		},
-		t: {
-			type: String,
-			required: !0,
-			validator: (e) => ["linear", "radial"].includes(e)
-		},
-		stops: {
-			type: Array,
-			required: !0,
-			validator: (e) => e.every((e) => Array.isArray(e) && e.length === 3 && [
-				"number",
-				"string",
-				"number"
-			].includes(typeof e[0]) && typeof e[1] == "string" && typeof e[2] == "number")
-		}
-	},
-	setup(l) {
-		return (u, d) => l.t === "linear" ? (r(), t("linearGradient", n({ key: 0 }, u.$attrs, { id: l.id }), [(r(!0), t(e, null, i(l.stops, ([e, n, i], a) => (r(), t("stop", {
-			key: a,
-			offset: e,
-			"stop-color": n,
-			"stop-opacity": i
-		}, null, 8, o))), 128))], 16, a)) : (r(), t("radialGradient", n({ key: 1 }, u.$attrs, { id: l.id }), [(r(!0), t(e, null, i(l.stops, ([e, n, i], a) => (r(), t("stop", {
-			key: a,
-			offset: e,
-			"stop-color": n,
-			"stop-opacity": i
-		}, null, 8, c))), 128))], 16, s));
-	}
-});
-//#endregion
-export { l as t };