iryx-ui 0.22.0 → 0.24.0

package/dist/components/LineChart.vue_vue_type_script_setup_true_lang.js

@@ -4,34 +4,34 @@ import { cartesianLayout as n, clampTooltip as r, seriesColor as i, slotOf as a,
 import { useChartAnimation as s, useChartReveal as c } from "../composables/chart-reveal.js";
 import l from "./ChartLegend.js";
 import { lineChartTheme as u } from "../theme/line-chart.js";
-import { Fragment as d, computed as f, createBlock as ee, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as D } from "vue";
+import { Fragment as d, computed as f, createBlock as ee, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as te } from "vue";
 //#region src/components/LineChart.vue?vue&type=script&setup=true&lang.ts
-var te = ["role", "aria-label"], ne = [
+var ne = ["role", "aria-label"], re = [
 	"width",
 	"height",
 	"viewBox"
-], O = [
+], ie = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], re = ["x", "y"], ie = { key: 1 }, ae = [
+], ae = ["x", "y"], oe = [
 	"x",
 	"y",
 	"width",
 	"height"
-], oe = [
+], se = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], se = ["clip-path"], ce = ["d", "fill"], le = ["d"], ue = ["cx", "cy"], de = ["cx", "cy"], fe = ["x", "y"], pe = [
+], ce = ["clip-path"], le = ["d", "fill"], ue = ["d"], de = ["d"], fe = ["cx", "cy"], pe = ["cx", "cy"], me = ["x", "y"], he = [
 	"x",
 	"y",
 	"width",
 	"height",
 	"onPointerenter"
-], me = { scope: "row" }, k = /*@__PURE__*/ g({
+], ge = { scope: "row" }, D = /*@__PURE__*/ g({
 	__name: "LineChart",
 	props: {
 		data: { default: () => [] },
@@ -76,52 +76,68 @@ var te = ["role", "aria-label"], ne = [
 		ui: {}
 	},
 	setup(g) {
-		let k = g, he = e(), A = f(() => k.unstyled ?? he.unstyled), j = S(), { width: M } = t(j), ge = f(() => new Intl.NumberFormat(k.locale, k.format));
-		function N(e) {
-			return ge.value.format(e);
+		let D = g, _e = e(), O = f(() => D.unstyled ?? _e.unstyled), k = S(), { width: A } = t(k), ve = f(() => new Intl.NumberFormat(D.locale, D.format));
+		function j(e) {
+			return ve.value.format(e);
 		}
-		let P = f(() => {
-			let e = k.series?.length ? [...k.series] : [{ key: "value" }];
+		let M = f(() => {
+			let e = D.series?.length ? [...D.series] : [{ key: "value" }];
 			return o(e.length), e;
-		}), F = f(() => P.value.length > 1), _e = f(() => F.value || k.legend && P.value[0].name != null);
-		function I(e, t) {
+		}), N = f(() => M.value.length > 1), ye = f(() => N.value || D.legend && M.value[0].name != null);
+		function P(e, t) {
 			let n = e[t];
 			return typeof n == "number" && Number.isFinite(n) ? n : null;
 		}
-		let L = f(() => n({
-			values: k.data.flatMap((e) => P.value.map((t) => I(e, t.key))),
-			categories: k.data.length,
-			longestLabel: Math.max(...k.data.map((e) => e.label.length), 1),
-			width: M.value,
-			height: k.height,
-			tickCount: k.ticks,
-			showAxis: k.axis,
-			formatTick: N,
-			includeZero: k.zero
+		let F = f(() => D.variant === "stacked" && N.value), I = f(() => D.data.map((e) => M.value.reduce((t, n) => {
+			let r = t[t.length - 1] ?? 0;
+			return t.push(r + (P(e, n.key) ?? 0)), t;
+		}, []))), L = f(() => n({
+			values: F.value ? I.value.map((e) => e[e.length - 1]) : D.data.flatMap((e) => M.value.map((t) => P(e, t.key))),
+			categories: D.data.length,
+			longestLabel: Math.max(...D.data.map((e) => e.label.length), 1),
+			width: A.value,
+			height: D.height,
+			tickCount: D.ticks,
+			showAxis: D.axis,
+			formatTick: j,
+			includeZero: D.zero || F.value
 		}));
 		function R(e) {
 			return Math.round(e * 100) / 100;
 		}
-		let z = f(() => M.value ? P.value.map((e, t) => {
+		let z = f(() => A.value ? M.value.map((e, t) => {
 			let n = [], r = [];
-			return k.data.forEach((t, i) => {
-				let a = I(t, e.key);
-				if (a == null) {
+			return D.data.forEach((i, a) => {
+				let o = F.value ? I.value[a][t] : P(i, e.key);
+				if (o == null) {
 					r.length && n.push(r), r = [];
 					return;
 				}
 				r.push({
-					x: R(L.value.pointAt(i)),
-					y: R(L.value.y(a)),
-					index: i
+					x: R(L.value.pointAt(a)),
+					y: R(L.value.y(o)),
+					index: a
 				});
 			}), r.length && n.push(r), {
 				runs: n,
 				color: i(a(e, t)),
 				seriesIndex: t
 			};
-		}) : []), B = f(() => k.variant === "area" && !F.value && z.value.length > 0), V = f(() => {
-			let e = k.data?.length ?? 0;
+		}) : []), B = f(() => (D.variant === "area" || D.variant === "stacked") && !N.value && z.value.length > 0), be = f(() => !F.value || !A.value ? [] : M.value.map((e, t) => ({
+			top: D.data.map((e, n) => ({
+				x: R(L.value.pointAt(n)),
+				y: R(L.value.y(I.value[n][t])),
+				index: n
+			})),
+			base: D.data.map((e, n) => ({
+				x: R(L.value.pointAt(n)),
+				y: R(L.value.y(t === 0 ? 0 : I.value[n][t - 1])),
+				index: n
+			})),
+			color: i(a(e, t)),
+			seriesIndex: t
+		}))), V = f(() => {
+			let e = D.data?.length ?? 0;
 			return {
 				first: e ? R(L.value.pointAt(0)) : 0,
 				last: e ? R(L.value.pointAt(e - 1)) : 0,
@@ -130,11 +146,11 @@ var te = ["role", "aria-label"], ne = [
 			};
 		});
 		function H(e) {
-			return k.flush && e.x === V.value.last ? `L${V.value.right} ${e.y}` : "";
+			return D.flush && e.x === V.value.last ? `L${V.value.right} ${e.y}` : "";
 		}
-		let U = f(() => Math.min(Math.max(k.tension, 0), 1) / 6);
+		let U = f(() => Math.min(Math.max(D.tension, 0), 1) / 6);
 		function W(e) {
-			let t = e[0], n = e[e.length - 1], r = k.flush && t.x === V.value.first ? `M${V.value.left} ${t.y} L${t.x} ${t.y}` : `M${t.x} ${t.y}`;
+			let t = e[0], n = e[e.length - 1], r = D.flush && t.x === V.value.first ? `M${V.value.left} ${t.y} L${t.x} ${t.y}` : `M${t.x} ${t.y}`;
 			if (U.value === 0 || e.length < 2) return [
 				r,
 				...e.slice(1).map((e) => `L${e.x} ${e.y}`),
@@ -150,11 +166,14 @@ var te = ["role", "aria-label"], ne = [
 				H(n)
 			].filter(Boolean).join(" ");
 		}
-		function ve(e) {
-			let t = L.value.plot.top + L.value.plot.height, n = e[0], r = e[e.length - 1], i = k.flush && n.x === V.value.first ? V.value.left : n.x, a = k.flush && r.x === V.value.last ? V.value.right : r.x;
+		function xe(e) {
+			let t = L.value.plot.top + L.value.plot.height, n = e[0], r = e[e.length - 1], i = D.flush && n.x === V.value.first ? V.value.left : n.x, a = D.flush && r.x === V.value.last ? V.value.right : r.x;
 			return `${W(e)} L${a} ${t} L${i} ${t} Z`;
 		}
-		let G = `iryx-area-${D()}`, K = `iryx-plot-clip-${D()}`, q = S(), J = f(() => q.value == null ? [] : z.value.flatMap((e) => {
+		function Se(e, t) {
+			return `${W(e)} ${W([...t].reverse()).replace("M", "L")} Z`;
+		}
+		let G = `iryx-area-${te()}`, K = `iryx-plot-clip-${te()}`, q = S(), J = f(() => q.value == null ? [] : z.value.flatMap((e) => {
 			for (let t of e.runs) {
 				let n = t.find((e) => e.index === q.value);
 				if (n) return [{
@@ -165,69 +184,70 @@ var te = ["role", "aria-label"], ne = [
 			return [];
 		})), Y = f(() => q.value == null ? void 0 : R(L.value.pointAt(q.value))), X = f(() => {
 			if (q.value == null) return;
-			let e = k.data[q.value];
+			let e = D.data[q.value];
 			if (!e) return;
-			let t = P.value.map((t, n) => ({
+			let t = M.value.map((t, n) => ({
 				name: t.name ?? t.key,
 				color: i(a(t, n)),
-				value: I(e, t.key)
+				value: P(e, t.key)
 			})).filter((e) => e.value != null).map((e) => ({
 				...e,
-				value: N(e.value)
+				value: j(e.value)
 			}));
 			if (!t.length) return;
-			let n = F.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
+			let n = N.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
 			return {
 				label: e.label,
 				rows: t,
-				multi: F.value,
-				x: r(L.value.pointAt(q.value), "x".repeat(n), M.value),
+				multi: N.value,
+				x: r(L.value.pointAt(q.value), "x".repeat(n), A.value),
 				y: Math.min(...J.value.map((e) => e.y), L.value.plot.top + L.value.plot.height)
 			};
-		}), Z = s(f(() => k.animate)), { revealed: ye } = c(f(() => !!(M.value && z.value.length)), Z), be = f(() => ({
-			transform: `scaleX(${+!!ye.value})`,
+		}), Z = s(f(() => D.animate)), { revealed: Ce } = c(f(() => !!(A.value && z.value.length)), Z), we = f(() => ({
+			transform: `scaleX(${+!!Ce.value})`,
 			transformOrigin: `${L.value.plot.left}px 0px`,
 			transition: `transform ${Z.value.duration}ms ${Z.value.css}`
 		})), Q = f(() => u());
 		function $(e, t) {
-			let n = k.ui?.[e];
-			return A.value ? [n, t] : Q.value[e]({ class: [n, t] });
+			let n = D.ui?.[e];
+			return O.value ? [n, t] : Q.value[e]({ class: [n, t] });
 		}
 		return (e, t) => (x(), m("div", {
 			ref_key: "root",
-			ref: j,
-			role: k.label ? "figure" : void 0,
-			"aria-label": k.label,
-			class: v($("root", k.class))
+			ref: k,
+			role: D.label ? "figure" : void 0,
+			"aria-label": D.label,
+			class: v($("root", D.class))
 		}, [
-			_e.value ? (x(), ee(l, {
+			ye.value ? (x(), ee(l, {
 				key: 0,
-				series: P.value,
-				unstyled: k.unstyled
+				series: M.value,
+				unstyled: D.unstyled
 			}, null, 8, ["series", "unstyled"])) : p("", !0),
-			h("div", { class: v(A.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
-				width: E(M),
-				height: k.height,
-				viewBox: `0 0 ${E(M)} ${k.height}`,
+			h("div", { class: v(O.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
+				width: E(A),
+				height: D.height,
+				viewBox: `0 0 ${E(A)} ${D.height}`,
 				"aria-hidden": "true",
 				class: v($("svg"))
 			}, [
-				k.axis ? (x(!0), m(d, { key: 0 }, C(L.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
+				D.axis ? (x(!0), m(d, { key: 0 }, C(L.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
 					x1: L.value.plot.left,
 					y1: L.value.y(e),
 					x2: L.value.plot.left + L.value.plot.width,
 					y2: L.value.y(e),
 					"stroke-width": "1",
 					class: v($("grid"))
-				}, null, 10, O), h("text", {
+				}, null, 10, ie), h("text", {
 					x: L.value.plot.left - E(8),
 					y: L.value.y(e),
 					"text-anchor": "end",
 					"dominant-baseline": "middle",
 					class: v($("tick"))
-				}, T(N(e)), 11, re)]))), 128)) : p("", !0),
+				}, T(j(e)), 11, ae)]))), 128)) : p("", !0),
 				w(e.$slots, "underlay", y(_(L.value))),
-				B.value ? (x(), m("defs", ie, [h("linearGradient", {
+				h("defs", null, [B.value ? (x(), m("linearGradient", {
+					key: 0,
 					id: G,
 					x1: "0",
 					y1: "0",
@@ -241,65 +261,74 @@ var te = ["role", "aria-label"], ne = [
 					offset: "100%",
 					"stop-color": "currentColor",
 					"stop-opacity": "0"
-				}, null, -1)]]), h("clipPath", { id: K }, [h("rect", {
+				}, null, -1)]])) : p("", !0), h("clipPath", { id: K }, [h("rect", {
 					x: L.value.plot.left,
 					y: L.value.plot.top,
 					width: L.value.plot.width,
 					height: L.value.plot.height,
-					style: b(be.value)
-				}, null, 12, ae)])])) : p("", !0),
+					style: b(we.value)
+				}, null, 12, oe)])]),
 				Y.value == null ? p("", !0) : (x(), m("line", {
-					key: 2,
+					key: 1,
 					x1: Y.value,
 					y1: L.value.plot.top,
 					x2: Y.value,
 					y2: L.value.plot.top + L.value.plot.height,
 					"stroke-width": "1",
 					class: v($("crosshair"))
-				}, null, 10, oe)),
-				h("g", { "clip-path": `url(#${K})` }, [(x(!0), m(d, null, C(B.value ? z.value[0].runs : [], (e, t) => (x(), m("path", {
-					key: `area-${t}`,
-					d: ve(e),
-					fill: `url(#${G})`,
-					style: b({ color: z.value[0].color }),
-					class: v($("area"))
-				}, null, 14, ce))), 128)), (x(!0), m(d, null, C(z.value, (e) => (x(), m(d, { key: `series-${e.seriesIndex}` }, [(x(!0), m(d, null, C(e.runs, (t, n) => (x(), m("path", {
-					key: `line-${e.seriesIndex}-${n}`,
-					d: W(t),
-					style: b({ stroke: e.color }),
-					class: v($("line"))
-				}, null, 14, le))), 128))], 64))), 128))], 8, se),
+				}, null, 10, se)),
+				h("g", { "clip-path": `url(#${K})` }, [
+					(x(!0), m(d, null, C(B.value ? z.value[0].runs : [], (e, t) => (x(), m("path", {
+						key: `area-${t}`,
+						d: xe(e),
+						fill: `url(#${G})`,
+						style: b({ color: z.value[0].color }),
+						class: v($("area"))
+					}, null, 14, le))), 128)),
+					(x(!0), m(d, null, C(be.value, (e) => (x(), m("path", {
+						key: `band-${e.seriesIndex}`,
+						d: Se(e.top, e.base),
+						style: b({ fill: e.color }),
+						class: v($("band"))
+					}, null, 14, ue))), 128)),
+					(x(!0), m(d, null, C(z.value, (e) => (x(), m(d, { key: `series-${e.seriesIndex}` }, [(x(!0), m(d, null, C(e.runs, (t, n) => (x(), m("path", {
+						key: `line-${e.seriesIndex}-${n}`,
+						d: W(t),
+						style: b({ stroke: e.color }),
+						class: v($("line"))
+					}, null, 14, de))), 128))], 64))), 128))
+				], 8, ce),
 				(x(!0), m(d, null, C(J.value, (e, t) => (x(), m(d, { key: `marker-${t}` }, [h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "6",
 					class: v($("markerRing"))
-				}, null, 10, ue), h("circle", {
+				}, null, 10, fe), h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "4",
 					style: b({ fill: e.color }),
 					class: v($("marker"))
-				}, null, 14, de)], 64))), 128)),
-				(x(!0), m(d, null, C(k.data, (e, t) => (x(), m(d, { key: `label-${e.label}-${t}` }, [t % L.value.labelStep === 0 ? (x(), m("text", {
+				}, null, 14, pe)], 64))), 128)),
+				(x(!0), m(d, null, C(D.data, (e, t) => (x(), m(d, { key: `label-${e.label}-${t}` }, [t % L.value.labelStep === 0 ? (x(), m("text", {
 					key: 0,
 					x: L.value.pointAt(t),
 					y: L.value.plot.top + L.value.plot.height + 14,
 					"text-anchor": "middle",
 					class: v($("category"))
-				}, T(e.label), 11, fe)) : p("", !0)], 64))), 128)),
+				}, T(e.label), 11, me)) : p("", !0)], 64))), 128)),
 				w(e.$slots, "overlay", y(_(L.value))),
-				(x(!0), m(d, null, C(k.data, (e, n) => (x(), m("rect", {
+				(x(!0), m(d, null, C(D.data, (e, n) => (x(), m("rect", {
 					key: `hit-${e.label}-${n}`,
 					x: L.value.plot.left + L.value.bandWidth * n,
 					y: L.value.plot.top,
 					width: L.value.bandWidth,
 					height: L.value.plot.height,
-					class: v(A.value ? void 0 : Q.value.hit()),
+					class: v(O.value ? void 0 : Q.value.hit()),
 					onPointerenter: (e) => q.value = n,
 					onPointerleave: t[0] ||= (e) => q.value = void 0
-				}, null, 42, pe))), 128))
-			], 10, ne)), X.value ? (x(), m("div", {
+				}, null, 42, he))), 128))
+			], 10, re)), X.value ? (x(), m("div", {
 				key: 0,
 				class: v($("tooltip", X.value.multi ? "flex-col items-start gap-1" : void 0)),
 				style: b({
@@ -322,15 +351,15 @@ var te = ["role", "aria-label"], ne = [
 				class: v($("tooltipValue"))
 			}, T(X.value.rows[0].value), 3))], 6)) : p("", !0)], 2),
 			h("div", { class: v($("table")) }, [h("table", null, [
-				h("caption", null, T(k.label), 1),
-				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(d, null, C(P.value, (e) => (x(), m("th", {
+				h("caption", null, T(D.label), 1),
+				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(d, null, C(M.value, (e) => (x(), m("th", {
 					key: e.key,
 					scope: "col"
 				}, T(e.name ?? "Value"), 1))), 128))])]),
-				h("tbody", null, [(x(!0), m(d, null, C(k.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", me, T(e.label), 1), (x(!0), m(d, null, C(P.value, (t) => (x(), m("td", { key: t.key }, T(I(e, t.key) == null ? "—" : N(I(e, t.key))), 1))), 128))]))), 128))])
+				h("tbody", null, [(x(!0), m(d, null, C(D.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", ge, T(e.label), 1), (x(!0), m(d, null, C(M.value, (t) => (x(), m("td", { key: t.key }, T(P(e, t.key) == null ? "—" : j(P(e, t.key))), 1))), 128))]))), 128))])
 			])], 2)
-		], 10, te));
+		], 10, ne));
 	}
 });
 //#endregion
-export { k as default };
+export { D as default };

package/dist/components/index.d.ts

@@ -17,16 +17,19 @@ export { default as Card } from './Card.vue';
 export { default as Carousel } from './Carousel.vue';
 export { default as ChartLegend } from './ChartLegend.vue';
 export { default as Checkbox } from './Checkbox.vue';
+export { default as Code } from './Code.vue';
 export { default as Collapsible } from './Collapsible.vue';
 export { default as ColorPicker } from './ColorPicker.vue';
 export { default as Combobox } from './Combobox.vue';
 export { default as CommandPalette } from './CommandPalette.vue';
 export { default as ConfirmDialog } from './ConfirmDialog.vue';
+export { default as ConfirmPopover } from './ConfirmPopover.vue';
 export { default as Container } from './Container.vue';
 export { default as ContextMenu } from './ContextMenu.vue';
 export { default as DateField } from './DateField.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as DateRangePicker } from './DateRangePicker.vue';
+export { default as DescriptionList } from './DescriptionList.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as DonutChart } from './DonutChart.vue';
 export { default as Drawer } from './Drawer.vue';