vue-data-ui 3.17.12 → 3.18.0

package/README.md

@@ -11,7 +11,7 @@
 [![License](https://npmx.dev/api/registry/badge/license/vue-data-ui)](https://npmx.dev/package/vue-data-ui)
 [![Types](https://npmx.dev/api/registry/badge/types/vue-data-ui)](https://npmx.dev/package/vue-data-ui)
 [![npm downloads](https://npmx.dev/api/registry/badge/downloads/vue-data-ui)](https://npmx.dev/package/vue-data-ui?modal=chart)
-[![Static Badge](https://img.shields.io/badge/components-67-blue)](https://github.com/graphieros/vue-data-ui)
+[![Static Badge](https://npmx.dev/api/registry/badge/version/nuxt?color=22c55e&value=67&label=components)](https://vue-data-ui.graphieros.com)
 [![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui/issues)
 [![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4526-shield.svg)](https://madewithvuejs.com/p/vue-data-ui/shield-link)
 [![GitHub Repo stars](https://img.shields.io/github/stars/graphieros/vue-data-ui)](https://github.com/graphieros/vue-data-ui)

package/dist/A11yDataTable-q2-8fSlJ.js

@@ -0,0 +1,45 @@
+import { t as e } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { Fragment as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, openBlock as a, renderList as o, renderSlot as s, toDisplayString as c } from "vue";
+//#region src/atoms/A11yDataTable.vue
+var l = ["id"], u = { scope: "row" }, d = /* @__PURE__ */ e({
+	__name: "A11yDataTable",
+	props: {
+		uid: {
+			String,
+			required: !0
+		},
+		head: {
+			Array,
+			default: () => []
+		},
+		body: {
+			Array,
+			default: () => []
+		},
+		caption: {
+			String,
+			default: "Data table"
+		},
+		notice: {
+			String,
+			default: "A data table is available below."
+		}
+	},
+	setup(e) {
+		return (d, f) => (a(), n("div", {
+			id: `chart-data-table-${e.uid}`,
+			class: "sr-only",
+			"data-dom-to-png-ignore": ""
+		}, [r("p", null, c(e.notice), 1), r("table", null, [
+			r("caption", null, c(e.caption), 1),
+			r("thead", null, [r("tr", null, [(a(!0), n(t, null, o(e.head, (t, r) => (a(), n("th", {
+				role: "cell",
+				key: `a11y-head-${r}-${e.uid}`,
+				scope: "col"
+			}, [s(d.$slots, "th", { th: t }, () => [i(c(t), 1)], !0)]))), 128))])]),
+			r("tbody", null, [(a(!0), n(t, null, o(e.body, (l, f) => (a(), n("tr", { key: `a11y-body-${f}-${e.uid}` }, [r("th", u, c(l[0]), 1), (a(!0), n(t, null, o(l.slice(1), (t, r) => (a(), n("td", { key: `a11y-cell-${f}-${r}-${e.uid}` }, [s(d.$slots, "td", { td: t }, () => [i(c(t), 1)], !0)]))), 128))]))), 128))])
+		])], 8, l));
+	}
+}, [["__scopeId", "data-v-1090a7c5"]]);
+//#endregion
+export { d as t };

package/dist/Arrow-BU2Z7mfz.js

@@ -0,0 +1,116 @@
+import { H as e } from "./lib-B83ZCydz.js";
+import { computed as t, createElementBlock as n, createElementVNode as r, openBlock as i, unref as a } from "vue";
+//#region src/atoms/Arrow.vue
+var o = { class: "vue-ui-element-arrow" }, s = [
+	"id",
+	"viewBox",
+	"refX",
+	"refY",
+	"markerWidth",
+	"markerHeight"
+], c = ["d", "fill"], l = [
+	"id",
+	"viewBox",
+	"refX",
+	"refY",
+	"markerWidth",
+	"markerHeight"
+], u = ["d", "fill"], d = [
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"stroke",
+	"stroke-width",
+	"stroke-linecap",
+	"stroke-dasharray",
+	"marker-end",
+	"marker-start"
+], f = {
+	__name: "Arrow",
+	props: {
+		markerEnd: {
+			type: Boolean,
+			default: !0
+		},
+		markerSize: {
+			type: Number,
+			default: 10
+		},
+		markerStart: {
+			type: Boolean,
+			default: !1
+		},
+		stroke: {
+			type: String,
+			default: "#2D353C"
+		},
+		strokeDasharray: {
+			type: Number,
+			default: 0
+		},
+		strokeLinecap: {
+			type: String,
+			default: "round"
+		},
+		strokeWidth: {
+			type: Number,
+			default: 1
+		},
+		x1: {
+			type: Number,
+			default: 0
+		},
+		x2: {
+			type: Number,
+			default: 0
+		},
+		y1: {
+			type: Number,
+			default: 0
+		},
+		y2: {
+			type: Number,
+			default: 0
+		}
+	},
+	setup(f) {
+		let p = f, m = e(), h = t(() => `0 0 ${p.markerSize} ${p.markerSize}`), g = t(() => p.markerSize / 2), _ = t(() => g.value + p.markerSize / 10);
+		return (e, t) => (i(), n("g", o, [r("defs", null, [r("marker", {
+			id: `arrow_end_${a(m)}`,
+			orient: "auto",
+			viewBox: h.value,
+			refX: g.value,
+			refY: g.value,
+			markerWidth: _.value,
+			markerHeight: _.value
+		}, [r("path", {
+			d: `M 0 0 L ${f.markerSize} ${g.value} L 0 ${f.markerSize} z`,
+			fill: f.stroke
+		}, null, 8, c)], 8, s), r("marker", {
+			id: `arrow_start_${a(m)}`,
+			orient: "auto-start-reverse",
+			viewBox: h.value,
+			refX: g.value,
+			refY: g.value,
+			markerWidth: _.value,
+			markerHeight: _.value
+		}, [r("path", {
+			d: `M 0 0 L ${f.markerSize} ${g.value} L 0 ${f.markerSize} z`,
+			fill: f.stroke
+		}, null, 8, u)], 8, l)]), r("line", {
+			x1: f.x1,
+			y1: f.y1,
+			x2: f.x2,
+			y2: f.y2,
+			stroke: f.stroke,
+			"stroke-width": f.strokeWidth,
+			"stroke-linecap": f.strokeLinecap,
+			"stroke-dasharray": f.strokeDasharray,
+			"marker-end": f.markerEnd ? `url(#arrow_end_${a(m)})` : "",
+			"marker-start": f.markerStart ? `url(#arrow_start_${a(m)})` : ""
+		}, null, 8, d)]));
+	}
+};
+//#endregion
+export { f as t };

package/dist/BaseDraggableDialog-LE75fWYz.js

@@ -0,0 +1,272 @@
+import { t as e } from "./rolldown-runtime-CAFD8bLK.js";
+import { H as t, t as n } from "./lib-B83ZCydz.js";
+import { t as r } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { t as i } from "./BaseIcon-CL6Y7alf.js";
+import { Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onMounted as h, onUnmounted as g, openBlock as _, reactive as v, ref as y, renderSlot as b, unref as x, withModifiers as S } from "vue";
+//#region src/atoms/BaseDraggableDialog.vue
+var C = /* @__PURE__ */ e({ default: () => E }), w = ["xmlns"], T = { class: "draggable-dialog-actions" }, E = /* @__PURE__ */ r({
+	__name: "BaseDraggableDialog",
+	props: {
+		backgroundColor: { type: String },
+		color: { type: String },
+		headerBg: { type: String },
+		headerColor: { type: String },
+		fullscreenParent: { type: HTMLElement },
+		isFullscreen: {
+			type: Boolean,
+			default: !1
+		},
+		withPadding: {
+			type: Boolean,
+			default: !1
+		},
+		forcedWidth: {
+			type: Number,
+			default: 400
+		},
+		forcedHeight: {
+			type: Number,
+			default: 400
+		},
+		isCursorPointer: {
+			type: Boolean,
+			default: !1
+		},
+		forceAspectRatio: {
+			type: Boolean,
+			default: !1
+		},
+		withFullWidth: {
+			type: Boolean,
+			default: !1
+		},
+		noLayerUpdate: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["close", "size"],
+	setup(e, { expose: r, emit: C }) {
+		let E = e, D = C, O = y(!1), k = y(!1), A = y(0), j = y(null), M = y(null), N = y(null), P = `vue-ui-draggable-dialog-${t()}`, F = `${P}-title`, I = `${P}-body`;
+		function L() {
+			E.noLayerUpdate || (A.value += 1);
+		}
+		let R = v({
+			left: window.innerWidth / 2 - 200,
+			top: window.innerHeight / 2 - 120,
+			width: E.forcedWidth,
+			height: E.forcedHeight,
+			dragging: !1,
+			resizing: !1,
+			dragOffsetX: 0,
+			dragOffsetY: 0,
+			pointerStartX: 0,
+			pointerStartY: 0,
+			resizeStartW: 0,
+			resizeStartH: 0
+		});
+		function z() {
+			N.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, O.value = !0, f(() => {
+				k.value ||= (R.left = Math.max(0, window.innerWidth / 2 - R.width / 2), R.top = Math.max(0, window.innerHeight / 2 - R.height / 2), !0);
+				let e = M.value || j.value;
+				e && typeof e.focus == "function" && e.focus();
+			});
+		}
+		function B() {
+			O.value = !1, D("close"), N.value && typeof N.value.focus == "function" && N.value.focus();
+		}
+		r({
+			open: z,
+			close: B
+		});
+		let V = o(() => ({
+			position: "fixed",
+			left: `${R.left}px`,
+			top: `${R.top}px`,
+			width: `${R.width}px`,
+			height: `${R.height}px`,
+			padding: 0,
+			border: "none",
+			background: E.backgroundColor,
+			boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
+			zIndex: 9999,
+			overflow: "visible",
+			borderRadius: "2px",
+			"--dlg-color": E.color
+		}));
+		function H(e) {
+			return e.touches && e.touches.length ? {
+				x: e.touches[0].clientX,
+				y: e.touches[0].clientY
+			} : {
+				x: e.clientX,
+				y: e.clientY
+			};
+		}
+		function U(e) {
+			e.preventDefault?.(), L(), R.dragging = !0;
+			let t = H(e);
+			R.dragOffsetX = t.x - R.left, R.dragOffsetY = t.y - R.top, document.addEventListener("mousemove", W), document.addEventListener("mouseup", G), document.addEventListener("touchmove", W, { passive: !1 }), document.addEventListener("touchend", G);
+		}
+		function W(e) {
+			if (!R.dragging) return;
+			e.preventDefault?.();
+			let t = H(e), n = t.x - R.dragOffsetX, r = t.y - R.dragOffsetY;
+			n = Math.max(0, Math.min(n, window.innerWidth - R.width)), r = Math.max(0, Math.min(r, window.innerHeight - R.height)), R.left = n, R.top = r;
+		}
+		function G() {
+			R.dragging = !1, document.removeEventListener("mousemove", W), document.removeEventListener("mouseup", G), document.removeEventListener("touchmove", W), document.removeEventListener("touchend", G);
+		}
+		function K(e) {
+			e.preventDefault?.(), L(), R.resizing = !0;
+			let t = H(e);
+			R.pointerStartX = t.x, R.pointerStartY = t.y, R.resizeStartW = R.width, R.resizeStartH = R.height, document.addEventListener("mousemove", q), document.addEventListener("mouseup", J), document.addEventListener("touchmove", q, { passive: !1 }), document.addEventListener("touchend", J);
+		}
+		function q(e) {
+			if (!R.resizing) return;
+			e.preventDefault?.();
+			let t = H(e), n = t.x - R.pointerStartX, r = t.y - R.pointerStartY;
+			R.width = Math.max(240, R.resizeStartW + n), R.height = Math.max(400, R.resizeStartH + r), D("size", {
+				width: R.width,
+				height: R.height
+			});
+		}
+		function J() {
+			R.resizing = !1, document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", q), document.removeEventListener("touchend", J), D("size", {
+				width: R.width,
+				height: R.height
+			});
+		}
+		h(() => {
+			D("size", {
+				width: R.width,
+				height: R.height
+			});
+		});
+		function Y(e) {
+			e.preventDefault?.(), L(), R.resizing = !0;
+			let t = H(e);
+			R.pointerStartX = t.x, R.pointerStartY = t.y, R.resizeStartW = R.width, R.resizeStartH = R.height, R.resizeStartLeft = R.left, R.resizeStartTop = R.top, document.addEventListener("mousemove", X), document.addEventListener("mouseup", Z), document.addEventListener("touchmove", X, { passive: !1 }), document.addEventListener("touchend", Z);
+		}
+		function X(e) {
+			if (!R.resizing) return;
+			e.preventDefault?.();
+			let t = H(e), n = t.x - R.pointerStartX, r = Math.min(Math.max(0, R.resizeStartLeft + n), R.resizeStartLeft + R.resizeStartW - 240), i = R.resizeStartW - (r - R.resizeStartLeft), a = t.y - R.pointerStartY, o = Math.max(400, R.resizeStartH + a);
+			R.left = r, R.width = i, R.height = o;
+		}
+		function Z() {
+			R.resizing = !1, document.removeEventListener("mousemove", X), document.removeEventListener("mouseup", Z), document.removeEventListener("touchmove", X), document.removeEventListener("touchend", Z);
+		}
+		h(() => {
+			document.addEventListener("keydown", Q);
+		});
+		function Q(e) {
+			e.key && e.key === "Escape" && B();
+		}
+		g(() => {
+			G(), J(), Z(), document.removeEventListener("keydown", Q);
+		});
+		function $(e) {
+			e.key === "Tab" && ee(e);
+		}
+		function ee(e) {
+			if (!j.value) return;
+			let t = j.value.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]");
+			if (!t.length) return;
+			let n = t[0], r = t[t.length - 1];
+			e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
+		}
+		return (t, r) => (_(), s(a, {
+			to: e.isFullscreen ? e.fullscreenParent : "body",
+			key: A.value
+		}, [O.value ? (_(), l("div", {
+			key: 0,
+			ref_key: "draggableDialog",
+			ref: j,
+			class: "vue-ui-draggable-dialog",
+			style: m(V.value),
+			role: "dialog",
+			"aria-modal": !0,
+			"aria-labelledby": F,
+			"aria-describedby": I,
+			tabindex: "-1",
+			onClick: r[0] ||= S(() => {}, ["stop"]),
+			onKeydown: $
+		}, [
+			u("div", {
+				class: "vue-ui-draggable-dialog-header",
+				style: m({
+					backgroundColor: e.headerBg,
+					color: e.headerColor
+				})
+			}, [
+				u("span", {
+					class: "drag-handle",
+					"aria-hidden": "true",
+					onMousedown: S(U, ["stop", "prevent"]),
+					onTouchstart: S(U, ["stop", "prevent"])
+				}, [(_(), l("svg", {
+					xmlns: x(n),
+					width: "20",
+					height: "20",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "1",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, [...r[1] ||= [
+					u("path", { d: "M5 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+					u("path", { d: "M5 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+					u("path", { d: "M12 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+					u("path", { d: "M12 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+					u("path", { d: "M19 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+					u("path", { d: "M19 15m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
+				]], 8, w))], 32),
+				u("span", {
+					class: "vue-ui-draggable-dialog-title",
+					id: F
+				}, [b(t.$slots, "title", {}, void 0, !0)]),
+				u("div", T, [b(t.$slots, "actions", {}, void 0, !0), u("button", {
+					ref_key: "closeButtonElement",
+					ref: M,
+					class: "close",
+					type: "button",
+					"aria-label": "Close dialog",
+					onClick: B,
+					style: m({ cursor: e.isCursorPointer ? "pointer" : "default" })
+				}, [d(i, {
+					name: "close",
+					stroke: e.headerColor
+				}, null, 8, ["stroke"])], 4)])
+			], 4),
+			u("div", {
+				id: I,
+				role: "document",
+				class: p({
+					"vue-ui-draggable-dialog-body": !e.withPadding,
+					"vue-ui-draggable-dialog-body-pad": e.withPadding,
+					"vue-ui-draggable-dialog-body-full-width": e.withFullWidth
+				})
+			}, [
+				b(t.$slots, "before", {}, void 0, !0),
+				b(t.$slots, "content", {}, void 0, !0),
+				b(t.$slots, "after", {}, void 0, !0)
+			], 2),
+			u("div", {
+				class: "resize-handle",
+				"aria-hidden": "true",
+				onMousedown: S(K, ["stop", "prevent"]),
+				onTouchstart: S(K, ["stop", "prevent"])
+			}, null, 32),
+			u("div", {
+				class: "resize-handle resize-handle-left",
+				"aria-hidden": "true",
+				onMousedown: S(Y, ["stop", "prevent"]),
+				onTouchstart: S(Y, ["stop", "prevent"])
+			}, null, 32)
+		], 36)) : c("", !0)], 8, ["to"]));
+	}
+}, [["__scopeId", "data-v-41359ac7"]]);
+//#endregion
+export { C as n, E as t };