@vunset/vue 1.0.0-rc.1 → 1.0.0-rc.2

package/README.md

@@ -79,7 +79,7 @@ import { DataTable } from '@vunset/vue/data-table';
 
 ## Documentation
 
-[github.com/vunset/vunset/tree/main/docs](https://github.com/vunset/vunset/tree/main/docs)
+[vunset.com/get-started](https://vunset.com/get-started)
 
 ## License
 

package/dist/components/chart/chart-curve.d.ts

@@ -0,0 +1,9 @@
+type Point = readonly [x: number, y: number];
+/** An SVG path bending smoothly through `points`, in `x` order, without overshooting any of them. */
+export declare function monotonePath(points: readonly Point[]): string;
+/**
+ * The closed SVG path between two such curves: along `top`, then back along
+ * `bottom`. Both run through the same `x` positions, in order.
+ */
+export declare function monotoneAreaPath(top: readonly Point[], bottom: readonly Point[]): string;
+export {};

package/dist/components/chart/chart-curve.js

@@ -0,0 +1,57 @@
+//#region src/components/chart/chart-curve.ts
+var round = (value) => Math.round(value * 1e3) / 1e3;
+/**
+* Each tangent of a monotone cubic through `points` (Steffen's limiter): the
+* curve bends through every point but never past one, so a peak is drawn at
+* its value. The ends take the tangent that leaves the curve straight there.
+*/
+function monotoneTangents(points) {
+	const last = points.length - 1;
+	const widths = [];
+	const slopes = [];
+	for (let index = 0; index < last; index++) {
+		const width = points[index + 1][0] - points[index][0];
+		widths.push(width);
+		const rise = points[index + 1][1] - points[index][1];
+		slopes.push(width ? rise / width : rise ? Math.sign(rise) * Infinity : 0);
+	}
+	const tangents = new Array(points.length).fill(0);
+	for (let index = 1; index < last; index++) {
+		const [before, after] = [slopes[index - 1], slopes[index]];
+		const span = widths[index - 1] + widths[index];
+		const weighted = span ? (before * widths[index] + after * widths[index - 1]) / span : 0;
+		tangents[index] = (Math.sign(before) + Math.sign(after)) * Math.min(Math.abs(before), Math.abs(after), .5 * Math.abs(weighted));
+	}
+	tangents[0] = widths[0] ? (3 * slopes[0] - tangents[1]) / 2 : tangents[1];
+	tangents[last] = widths[last - 1] ? (3 * slopes[last - 1] - tangents[last - 1]) / 2 : tangents[last - 1];
+	return tangents.map((tangent) => Number.isFinite(tangent) ? tangent : 0);
+}
+/** The path commands after the first point: cubic segments, or a straight one between two points. */
+function monotoneSegments(points) {
+	if (points.length < 3) return points.slice(1).map(([x, y]) => `L${round(x)},${round(y)}`);
+	const tangents = monotoneTangents(points);
+	return points.slice(1).map(([x, y], offset) => {
+		const [startX, startY] = points[offset];
+		const third = (x - startX) / 3;
+		return `C${round(startX + third)},${round(startY + tangents[offset] * third)},${round(x - third)},${round(y - tangents[offset + 1] * third)},${round(x)},${round(y)}`;
+	});
+}
+/** An SVG path bending smoothly through `points`, in `x` order, without overshooting any of them. */
+function monotonePath(points) {
+	if (points.length === 0) return "";
+	const start = `M${round(points[0][0])},${round(points[0][1])}`;
+	return points.length === 1 ? `${start}Z` : start + monotoneSegments(points).join("");
+}
+/**
+* The closed SVG path between two such curves: along `top`, then back along
+* `bottom`. Both run through the same `x` positions, in order.
+*/
+function monotoneAreaPath(top, bottom) {
+	if (top.length === 0 || bottom.length === 0) return "";
+	const back = [...bottom].reverse();
+	const along = monotoneSegments(top).join("");
+	const returning = monotoneSegments(back).join("");
+	return `M${round(top[0][0])},${round(top[0][1])}${along}L${round(back[0][0])},${round(back[0][1])}${returning}Z`;
+}
+//#endregion
+export { monotoneAreaPath, monotonePath };

package/dist/components/chart/chart-scales.d.ts

@@ -1,3 +1,4 @@
+import type { ChartCurve } from '@tanstack/charts';
 /**
  * An evenly spaced few of a row axis' positions, for `numTicks`. The axis
  * labels every row otherwise, leaving out the ones that would collide.
@@ -30,4 +31,4 @@ export declare const rowFocus: (horizontal?: boolean) => {
 /** A chart's accessible name: what it plots, in the reader's words. */
 export declare const chartName: (categories: string[], labelFormat: ((category: string) => string) | undefined, fallback: string) => string;
 /** A line's run between its points: bending through them, or straight. TanStack draws straight by default. */
-export declare const curveOf: (curve: "smooth" | "linear") => import("@tanstack/charts").ChartCurve | undefined;
+export declare const curveOf: (curve: "smooth" | "linear") => ChartCurve | undefined;

package/dist/components/chart/chart-scales.js

@@ -1,6 +1,5 @@
+import { monotoneAreaPath, monotonePath } from "./chart-curve.js";
 import { formatNumber } from "@vunset/utils";
-import { d3Curve } from "@tanstack/charts";
-import { curveMonotoneX } from "d3-shape";
 //#region src/components/chart/chart-scales.ts
 /**
 * An evenly spaced few of a row axis' positions, for `numTicks`. The axis
@@ -32,7 +31,10 @@ var rowFocus = (horizontal = false) => ({
 });
 /** A chart's accessible name: what it plots, in the reader's words. */
 var chartName = (categories, labelFormat, fallback) => categories.map((category) => labelFormat ? labelFormat(category) : category).join(", ") || fallback;
-var SMOOTH = d3Curve(curveMonotoneX);
+var SMOOTH = {
+	line: monotonePath,
+	area: monotoneAreaPath
+};
 /** A line's run between its points: bending through them, or straight. TanStack draws straight by default. */
 var curveOf = (curve) => curve === "smooth" ? SMOOTH : void 0;
 //#endregion

package/dist/components/checkbox/CheckboxIndicator.vue.d.ts

@@ -11,7 +11,7 @@ declare var __VLS_8: {
     readOnly: boolean;
     required: boolean;
     invalid: boolean;
-    transitionStatus: import("../..").TransitionStatus;
+    transitionStatus: import("../../index.ts").TransitionStatus;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;

package/dist/components/datepicker/DatepickerClear.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
 };
 declare var __VLS_8: {
     open: boolean;
-    mode: import("../..").CalendarSelectionMode;
-    view: import("../..").CalendarView;
+    mode: import("../calendar/use-calendar.ts").CalendarSelectionMode;
+    view: import("../calendar/use-calendar.ts").CalendarView;
     month: number;
     year: number;
     monthLabel: string;

package/dist/components/datepicker/DatepickerTrigger.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
 };
 declare var __VLS_8: {
     open: boolean;
-    mode: import("../..").CalendarSelectionMode;
-    view: import("../..").CalendarView;
+    mode: import("../calendar/use-calendar.ts").CalendarSelectionMode;
+    view: import("../calendar/use-calendar.ts").CalendarView;
     month: number;
     year: number;
     monthLabel: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunset/vue",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "Headless, unstyled Vue 3 components: keyboard, focus and ARIA handled, the look left to you.",
   "keywords": [
     "vue",
@@ -20,7 +20,7 @@
     "url": "git+https://github.com/vunset/vunset.git",
     "directory": "packages/vue"
   },
-  "homepage": "https://github.com/vunset/vunset#readme",
+  "homepage": "https://vunset.com/get-started",
   "bugs": "https://github.com/vunset/vunset/issues",
   "type": "module",
   "sideEffects": false,
@@ -47,8 +47,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^2.0.1",
-    "@vunset/utils": "1.0.0-rc.1",
-    "d3-shape": "^3.2.0"
+    "@vunset/utils": "1.0.0-rc.2"
   },
   "peerDependencies": {
     "@tanstack/charts": "^1.1.0",