iryx-ui 0.15.0 → 0.16.0

package/dist/components/Sparkline.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,16 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { extent as t, linearScale as n } from "../composables/scale.js";
-import { sparklineTheme as r } from "../theme/sparkline.js";
-import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p } from "vue";
+import { useChartAnimation as r, useChartReveal as i } from "../composables/chart-reveal.js";
+import { sparklineTheme as a } from "../theme/sparkline.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, useId as g } from "vue";
 //#region src/components/Sparkline.vue?vue&type=script&setup=true&lang.ts
-var m = [
+var _ = [
 	"viewBox",
 	"height",
 	"role",
 	"aria-label",
 	"aria-hidden"
-], h = ["d"], g = ["d"], _ = ["d"], v = ["d"], y = 100, b = /*@__PURE__*/ l({
+], v = ["clip-path"], y = ["d", "fill"], b = ["d"], x = ["d"], S = ["d"], C = 100, w = /*@__PURE__*/ d({
 	__name: "Sparkline",
 	props: {
 		data: { default: () => [] },
@@ -21,6 +22,10 @@ var m = [
 		muted: { type: Boolean },
 		label: {},
 		height: { default: 32 },
+		animate: {
+			type: [Boolean, Object],
+			default: !1
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -28,83 +33,115 @@ var m = [
 		class: {},
 		ui: {}
 	},
-	setup(l) {
-		let b = l, x = e(), S = a(() => b.unstyled ?? x.unstyled), C = a(() => b.endDot ? 6 : 1), w = a(() => Math.max(b.height - C.value * 2, 1)), T = a(() => {
-			let e = b.data, r = t(e);
+	setup(d) {
+		let w = d, T = e(), E = s(() => w.unstyled ?? T.unstyled), D = s(() => w.endDot ? 6 : 1), O = s(() => Math.max(w.height - D.value * 2, 1)), k = s(() => {
+			let e = w.data, r = t(e);
 			if (!r) return [];
-			let [i, a] = r, o = b.min ?? i, s = b.max ?? a, c = n([0, Math.max(e.length - 1, 0)], [0, y]), l = n([o, s], [y, 0]), u = [], d = [];
+			let [i, a] = r, o = w.min ?? i, s = w.max ?? a, c = n([0, Math.max(e.length - 1, 0)], [0, C]), l = n([o, s], [C, 0]), u = [], d = [];
 			return e.forEach((e, t) => {
 				if (typeof e != "number" || !Number.isFinite(e)) {
 					d.length && u.push(d), d = [];
 					return;
 				}
 				d.push({
-					x: E(c(t)),
-					y: E(l(e))
+					x: A(c(t)),
+					y: A(l(e))
 				});
 			}), d.length && u.push(d), u;
 		});
-		function E(e) {
+		function A(e) {
 			return Math.round(e * 100) / 100;
 		}
-		function D(e) {
+		function j(e) {
 			return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x} ${e.y}`).join(" ");
 		}
-		let O = a(() => {
-			let e = t(b.data);
-			if (!e) return y;
-			let r = b.min ?? e[0], i = b.max ?? e[1];
-			return b.baseline === "zero" && r <= 0 && i >= 0 ? E(n([r, i], [y, 0])(0)) : y;
+		let M = s(() => {
+			let e = t(w.data);
+			if (!e) return C;
+			let r = w.min ?? e[0], i = w.max ?? e[1];
+			return w.baseline === "zero" && r <= 0 && i >= 0 ? A(n([r, i], [C, 0])(0)) : C;
 		});
-		function k(e) {
+		function N(e) {
 			let t = e[0], n = e[e.length - 1];
-			return `${D(e)} L${n.x} ${O.value} L${t.x} ${O.value} Z`;
+			return `${j(e)} L${n.x} ${M.value} L${t.x} ${M.value} Z`;
 		}
-		let A = a(() => {
-			let e = T.value[T.value.length - 1];
+		let P = r(s(() => w.animate)), { revealed: F } = i(s(() => k.value.length > 0), P), I = s(() => ({
+			transform: `scaleX(${+!!F.value})`,
+			transformOrigin: "0px 0px",
+			transition: `transform ${P.value.duration}ms ${P.value.css}`
+		})), L = s(() => ({
+			opacity: +!!F.value,
+			transition: `opacity ${Math.round(P.value.duration * .3)}ms ${P.value.css}`,
+			transitionDelay: `${Math.round(P.value.duration * .8)}ms`
+		})), R = `iryx-spark-clip-${g()}`, z = `iryx-spark-area-${g()}`, B = s(() => {
+			let e = k.value[k.value.length - 1];
 			return e?.[e.length - 1];
-		}), j = a(() => r({ muted: b.muted }));
-		function M(e, t) {
-			let n = b.ui?.[e];
-			return S.value ? [n, t] : j.value[e]({ class: [n, t] });
+		}), V = s(() => a({ muted: w.muted }));
+		function H(e, t) {
+			let n = w.ui?.[e];
+			return E.value ? [n, t] : V.value[e]({ class: [n, t] });
 		}
-		return (e, t) => (f(), s("span", {
-			class: u(M("root", b.class)),
-			style: d({ padding: `${C.value}px` })
-		}, [(f(), s("svg", {
-			viewBox: `0 0 ${y} ${y}`,
+		return (e, t) => (m(), l("span", {
+			class: f(H("root", w.class)),
+			style: p({ padding: `${D.value}px` })
+		}, [(m(), l("svg", {
+			viewBox: `0 0 ${C} ${C}`,
 			preserveAspectRatio: "none",
-			height: w.value,
-			style: d({ height: `${w.value}px` }),
-			role: b.label ? "img" : void 0,
-			"aria-label": b.label,
-			"aria-hidden": b.label ? void 0 : !0,
-			class: u(M("plot"))
+			height: O.value,
+			style: p({ height: `${O.value}px` }),
+			role: w.label ? "img" : void 0,
+			"aria-label": w.label,
+			"aria-hidden": w.label ? void 0 : !0,
+			class: f(H("plot"))
 		}, [
-			b.variant === "area" ? (f(!0), s(i, { key: 0 }, p(T.value, (e, t) => (f(), s("path", {
+			u("defs", null, [u("linearGradient", {
+				id: z,
+				gradientUnits: "userSpaceOnUse",
+				x1: 0,
+				y1: 0,
+				x2: 0,
+				y2: C
+			}, [...t[0] ||= [u("stop", {
+				offset: "0%",
+				"stop-color": "currentColor",
+				"stop-opacity": "0.35"
+			}, null, -1), u("stop", {
+				offset: "100%",
+				"stop-color": "currentColor",
+				"stop-opacity": "0"
+			}, null, -1)]]), u("clipPath", { id: R }, [u("rect", {
+				x: "0",
+				y: "0",
+				width: C,
+				height: C,
+				style: p(I.value)
+			}, null, 4)])]),
+			u("g", { "clip-path": `url(#${R})` }, [(m(!0), l(o, null, h(w.variant === "area" ? k.value : [], (e, t) => (m(), l("path", {
 				key: `area-${t}`,
-				d: k(e),
-				class: u(M("area"))
-			}, null, 10, h))), 128)) : o("", !0),
-			(f(!0), s(i, null, p(T.value, (e, t) => (f(), s("path", {
+				d: N(e),
+				fill: `url(#${z})`,
+				class: f(H("area"))
+			}, null, 10, y))), 128)), (m(!0), l(o, null, h(k.value, (e, t) => (m(), l("path", {
 				key: `line-${t}`,
-				d: D(e),
+				d: j(e),
 				"vector-effect": "non-scaling-stroke",
-				class: u(M("line"))
-			}, null, 10, g))), 128)),
-			b.endDot && A.value ? (f(), s(i, { key: 1 }, [c("path", {
-				d: `M${A.value.x} ${A.value.y} L${A.value.x} ${A.value.y}`,
+				class: f(H("line"))
+			}, null, 10, b))), 128))], 8, v),
+			w.endDot && B.value ? (m(), l(o, { key: 0 }, [u("path", {
+				d: `M${B.value.x} ${B.value.y} L${B.value.x} ${B.value.y}`,
 				"stroke-width": "12",
 				"vector-effect": "non-scaling-stroke",
-				class: u(M("ring"))
-			}, null, 10, _), c("path", {
-				d: `M${A.value.x} ${A.value.y} L${A.value.x} ${A.value.y}`,
+				style: p(L.value),
+				class: f(H("ring"))
+			}, null, 14, x), u("path", {
+				d: `M${B.value.x} ${B.value.y} L${B.value.x} ${B.value.y}`,
 				"stroke-width": "8",
 				"vector-effect": "non-scaling-stroke",
-				class: u(M("dot"))
-			}, null, 10, v)], 64)) : o("", !0)
-		], 14, m))], 6));
+				style: p(L.value),
+				class: f(H("dot"))
+			}, null, 14, S)], 64)) : c("", !0)
+		], 14, _))], 6));
 	}
 });
 //#endregion
-export { b as default };
+export { w as default };

package/dist/components/index.d.ts

@@ -24,6 +24,7 @@ export { default as ContextMenu } from './ContextMenu.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as DateRangePicker } from './DateRangePicker.vue';
 export { default as Dialog } from './Dialog.vue';
+export { default as DonutChart } from './DonutChart.vue';
 export { default as Drawer } from './Drawer.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as EmptyState } from './EmptyState.vue';

package/dist/components/index.js

@@ -28,51 +28,52 @@ import E from "./Container.js";
 import D from "./ContextMenu.js";
 import O from "./DatePicker.js";
 import k from "./DateRangePicker.js";
-import A from "./DropdownMenu.js";
-import j from "./EmptyState.js";
-import M from "./FileUpload.js";
-import N from "./Form.js";
-import P from "./Label.js";
-import F from "./FormField.js";
-import I from "./Input.js";
-import L from "./LineChart.js";
-import R from "./Menubar.js";
-import z from "./NavigationMenu.js";
-import B from "./NumberInput.js";
-import V from "./PageHeader.js";
-import H from "./Pagination.js";
-import U from "./PasswordInput.js";
-import W from "./PinInput.js";
-import G from "./Popover.js";
-import K from "./Progress.js";
-import q from "./RadioGroup.js";
-import J from "./ScrollArea.js";
-import Y from "./ScrollFade.js";
-import X from "./Select.js";
-import Z from "./Separator.js";
-import Q from "./Sidebar.js";
-import $ from "./SignaturePad.js";
-import ee from "./Skeleton.js";
-import te from "./Slider.js";
-import ne from "./Sparkline.js";
-import re from "./Splitter.js";
-import ie from "./Stat.js";
-import ae from "./Stepper.js";
-import oe from "./Switch.js";
-import se from "./Table.js";
-import ce from "./Tabs.js";
-import le from "./TagsInput.js";
-import ue from "./Textarea.js";
-import de from "./TimeField.js";
-import fe from "./Timeline.js";
-import pe from "./Toaster.js";
-import me from "./Toggle.js";
-import he from "./ToggleGroup.js";
-import ge from "./Toolbar.js";
-import _e from "./Tooltip.js";
-import ve from "./Tree.js";
+import A from "./DonutChart.js";
+import j from "./DropdownMenu.js";
+import M from "./EmptyState.js";
+import N from "./FileUpload.js";
+import P from "./Form.js";
+import F from "./Label.js";
+import I from "./FormField.js";
+import L from "./Input.js";
+import R from "./LineChart.js";
+import z from "./Menubar.js";
+import B from "./NavigationMenu.js";
+import V from "./NumberInput.js";
+import H from "./PageHeader.js";
+import U from "./Pagination.js";
+import W from "./PasswordInput.js";
+import G from "./PinInput.js";
+import K from "./Popover.js";
+import q from "./Progress.js";
+import J from "./RadioGroup.js";
+import Y from "./ScrollArea.js";
+import X from "./ScrollFade.js";
+import Z from "./Select.js";
+import Q from "./Separator.js";
+import $ from "./Sidebar.js";
+import ee from "./SignaturePad.js";
+import te from "./Skeleton.js";
+import ne from "./Slider.js";
+import re from "./Sparkline.js";
+import ie from "./Splitter.js";
+import ae from "./Stat.js";
+import oe from "./Stepper.js";
+import se from "./Switch.js";
+import ce from "./Table.js";
+import le from "./Tabs.js";
+import ue from "./TagsInput.js";
+import de from "./Textarea.js";
+import fe from "./TimeField.js";
+import pe from "./Timeline.js";
+import me from "./Toaster.js";
+import he from "./Toggle.js";
+import ge from "./ToggleGroup.js";
+import _e from "./Toolbar.js";
+import ve from "./Tooltip.js";
+import ye from "./Tree.js";
 //#region src/components/index.ts
-var ye = /* @__PURE__ */ e({
+var be = /* @__PURE__ */ e({
 	Accordion: () => n,
 	Alert: () => r,
 	App: () => i,
@@ -99,52 +100,53 @@ var ye = /* @__PURE__ */ e({
 	DatePicker: () => O,
 	DateRangePicker: () => k,
 	Dialog: () => w,
+	DonutChart: () => A,
 	Drawer: () => a,
-	DropdownMenu: () => A,
-	EmptyState: () => j,
-	FileUpload: () => M,
-	Form: () => N,
-	FormField: () => F,
+	DropdownMenu: () => j,
+	EmptyState: () => M,
+	FileUpload: () => N,
+	Form: () => P,
+	FormField: () => I,
 	Icon: () => t,
-	Input: () => I,
+	Input: () => L,
 	Kbd: () => S,
-	Label: () => P,
-	LineChart: () => L,
-	Menubar: () => R,
-	NavigationMenu: () => z,
-	NumberInput: () => B,
-	PageHeader: () => V,
-	Pagination: () => H,
-	PasswordInput: () => U,
-	PinInput: () => W,
-	Popover: () => G,
-	Progress: () => K,
-	RadioGroup: () => q,
-	ScrollArea: () => J,
-	ScrollFade: () => Y,
-	Select: () => X,
-	Separator: () => Z,
-	Sidebar: () => Q,
-	SignaturePad: () => $,
-	Skeleton: () => ee,
-	Slider: () => te,
-	Sparkline: () => ne,
-	Splitter: () => re,
-	Stat: () => ie,
-	Stepper: () => ae,
-	Switch: () => oe,
-	Table: () => se,
-	Tabs: () => ce,
-	TagsInput: () => le,
-	Textarea: () => ue,
-	TimeField: () => de,
-	Timeline: () => fe,
-	Toaster: () => pe,
-	Toggle: () => me,
-	ToggleGroup: () => he,
-	Toolbar: () => ge,
-	Tooltip: () => _e,
-	Tree: () => ve
+	Label: () => F,
+	LineChart: () => R,
+	Menubar: () => z,
+	NavigationMenu: () => B,
+	NumberInput: () => V,
+	PageHeader: () => H,
+	Pagination: () => U,
+	PasswordInput: () => W,
+	PinInput: () => G,
+	Popover: () => K,
+	Progress: () => q,
+	RadioGroup: () => J,
+	ScrollArea: () => Y,
+	ScrollFade: () => X,
+	Select: () => Z,
+	Separator: () => Q,
+	Sidebar: () => $,
+	SignaturePad: () => ee,
+	Skeleton: () => te,
+	Slider: () => ne,
+	Sparkline: () => re,
+	Splitter: () => ie,
+	Stat: () => ae,
+	Stepper: () => oe,
+	Switch: () => se,
+	Table: () => ce,
+	Tabs: () => le,
+	TagsInput: () => ue,
+	Textarea: () => de,
+	TimeField: () => fe,
+	Timeline: () => pe,
+	Toaster: () => me,
+	Toggle: () => he,
+	ToggleGroup: () => ge,
+	Toolbar: () => _e,
+	Tooltip: () => ve,
+	Tree: () => ye
 });
 //#endregion
-export { ye as components_exports };
+export { be as components_exports };

package/dist/composables/cartesian.d.ts

@@ -100,8 +100,16 @@ export declare const SERIES_SLOTS = 8;
  * than saying so.
  */
 export declare function seriesColor(index: number): string;
-/** A series' palette slot: pinned if it has one, otherwise its position. */
-export declare function slotOf(entry: ChartSeries, index: number): number;
+/**
+ * A series' palette slot: pinned if it has one, otherwise its position.
+ *
+ * Typed on the pin alone rather than on `ChartSeries`, so the charts with no
+ * second axis — a donut's rows are their own identity — can share the rule
+ * without inventing a `key` they have no use for.
+ */
+export declare function slotOf(entry: {
+    slot?: number;
+}, index: number): number;
 /**
  * Dev-only warning.
  *

package/dist/composables/chart-reveal.d.ts

@@ -0,0 +1,45 @@
+import type { Ref } from 'vue';
+/**
+ * The reveal every chart plays on its first paint, once per instance — a
+ * dashboard that re-animated on every poll would read as a fault.
+ *
+ * A CSS transition where the marks can be transformed, a per-frame value
+ * where they cannot: `d` is not an animatable property, so a donut has to
+ * recompute its geometry.
+ */
+export declare const REVEAL_DURATION = 700;
+/**
+ * A closed set rather than any CSS timing function: the same curve is handed
+ * to CSS as a string and solved in JavaScript for the donut, so both come
+ * from one set of control points.
+ */
+export type ChartEasing = 'ease-out' | 'ease-in' | 'ease-in-out' | 'linear';
+export interface ChartAnimation {
+    /** How long the reveal runs, in ms. */
+    duration?: number;
+    easing?: ChartEasing;
+}
+/** `false` turns the reveal off; an object tunes it. */
+export type ChartAnimate = boolean | ChartAnimation;
+export interface ResolvedAnimation {
+    enabled: boolean;
+    duration: number;
+    /** The curve as a CSS timing function. */
+    css: string;
+    /** The same curve, solved: progress in, eased progress out. */
+    ease: (t: number) => number;
+}
+export declare function useChartAnimation(animate: Ref<ChartAnimate | undefined>): import("vue").ComputedRef<ResolvedAnimation>;
+/**
+ * `false` for the first painted frame, `true` from the next — which is what
+ * makes a transition run. Gated on `ready` rather than on mount: a chart with
+ * no measured width yet would animate an empty box and be finished before the
+ * `ResizeObserver` reported.
+ */
+export declare function useChartReveal(ready: Ref<boolean>, animation: Ref<ResolvedAnimation>): {
+    revealed: Ref<boolean, boolean>;
+};
+/** Eased 0 to 1, for marks that have to be recomputed to be revealed. */
+export declare function useChartProgress(ready: Ref<boolean>, animation: Ref<ResolvedAnimation>): {
+    progress: Ref<number, number>;
+};

package/dist/composables/chart-reveal.js

@@ -0,0 +1,93 @@
+import { computed as e, onBeforeUnmount as t, ref as n, watch as r } from "vue";
+//#region src/composables/chart-reveal.ts
+var i = 700, a = {
+	"ease-out": [
+		.16,
+		1,
+		.3,
+		1
+	],
+	"ease-in": [
+		.7,
+		0,
+		.84,
+		0
+	],
+	"ease-in-out": [
+		.65,
+		0,
+		.35,
+		1
+	],
+	linear: [
+		0,
+		0,
+		1,
+		1
+	]
+};
+function o([e, t, n, r]) {
+	let i = (e, t, n) => {
+		let r = 1 - n;
+		return 3 * r * r * n * e + 3 * r * n * n * t + n * n * n;
+	};
+	return (a) => {
+		if (a <= 0) return 0;
+		if (a >= 1) return 1;
+		let o = 0, s = 1, c = a;
+		for (let t = 0; t < 20; t++) i(e, n, c) < a ? o = c : s = c, c = (o + s) / 2;
+		return i(t, r, c);
+	};
+}
+function s(t) {
+	return e(() => {
+		let e = t.value ?? !0, n = typeof e == "object" ? e : {}, r = a[n.easing ?? "ease-out"] ?? a["ease-out"];
+		return {
+			enabled: e !== !1,
+			duration: Math.max(n.duration ?? 700, 0),
+			css: `cubic-bezier(${r.join(", ")})`,
+			ease: o(r)
+		};
+	});
+}
+function c() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function l(e) {
+	return e.enabled && e.duration > 0 && typeof requestAnimationFrame < "u" && !c();
+}
+function u(e, t) {
+	let i = n(!1), a = !1;
+	return r(e, (e) => {
+		if (!(!e || a)) {
+			if (a = !0, !l(t.value)) {
+				i.value = !0;
+				return;
+			}
+			requestAnimationFrame(() => requestAnimationFrame(() => {
+				i.value = !0;
+			}));
+		}
+	}, { immediate: !0 }), { revealed: i };
+}
+function d(e, i) {
+	let a = n(0), o = !1, s;
+	return r(e, (e) => {
+		if (!e || o) return;
+		if (o = !0, !l(i.value)) {
+			a.value = 1;
+			return;
+		}
+		let { duration: t, ease: n } = i.value, r;
+		function c(e) {
+			r ??= e;
+			let i = Math.min((e - r) / t, 1);
+			a.value = n(i), i < 1 && (s = requestAnimationFrame(c));
+		}
+		s = requestAnimationFrame(c);
+	}, { immediate: !0 }), t(() => {
+		s != null && cancelAnimationFrame(s);
+	}), { progress: a };
+}
+//#endregion
+export { i as REVEAL_DURATION, s as useChartAnimation, d as useChartProgress, u as useChartReveal };

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export type { ContextMenuProps } from './components/ContextMenu.vue';
 export type { DatePickerProps } from './components/DatePicker.vue';
 export type { DateRange, DateRangePickerProps } from './components/DateRangePicker.vue';
 export type { DialogProps } from './components/Dialog.vue';
+export type { DonutChartDatum, DonutChartProps } from './components/DonutChart.vue';
 export type { DrawerProps, DrawerSide, DrawerSnapPoint } from './components/Drawer.vue';
 export type { DropdownMenuProps } from './components/DropdownMenu.vue';
 export type { EmptyStateProps } from './components/EmptyState.vue';
@@ -76,6 +77,7 @@ export type { TreeItemOption, TreeProps } from './components/Tree.vue';
 export * from './composables/appearance';
 export * from './composables/button-group';
 export * from './composables/cartesian';
+export * from './composables/chart-reveal';
 export * from './composables/command-palette';
 export * from './composables/confirm';
 export * from './composables/data-table';