ropav 0.3.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "🚀 Beautiful and modern Vue UI library built with Vapor Mode and Tailwind CSS 4.0.",
   "keywords": [
     "components",
@@ -285,6 +285,10 @@
       "import": "./dist/components/range-calendar/index.js",
       "types": "./dist/components/range-calendar/index.d.ts"
     },
+    "./router-provider": {
+      "import": "./dist/components/router-provider/index.js",
+      "types": "./dist/components/router-provider/index.d.ts"
+    },
     "./scroll-shadow": {
       "import": "./dist/components/scroll-shadow/index.js",
       "types": "./dist/components/scroll-shadow/index.d.ts"
@@ -293,6 +297,10 @@
       "import": "./dist/components/search-field/index.js",
       "types": "./dist/components/search-field/index.d.ts"
     },
+    "./segmented-control": {
+      "import": "./dist/components/segmented-control/index.js",
+      "types": "./dist/components/segmented-control/index.d.ts"
+    },
     "./select": {
       "import": "./dist/components/select/index.js",
       "types": "./dist/components/select/index.d.ts"
@@ -301,6 +309,10 @@
       "import": "./dist/components/separator/index.js",
       "types": "./dist/components/separator/index.d.ts"
     },
+    "./sidebar": {
+      "import": "./dist/components/sidebar/index.js",
+      "types": "./dist/components/sidebar/index.d.ts"
+    },
     "./skeleton": {
       "import": "./dist/components/skeleton/index.js",
       "types": "./dist/components/skeleton/index.d.ts"
@@ -313,6 +325,10 @@
       "import": "./dist/components/spinner/index.js",
       "types": "./dist/components/spinner/index.d.ts"
     },
+    "./splitter": {
+      "import": "./dist/components/splitter/index.js",
+      "types": "./dist/components/splitter/index.d.ts"
+    },
     "./surface": {
       "import": "./dist/components/surface/index.js",
       "types": "./dist/components/surface/index.d.ts"
@@ -390,10 +406,10 @@
     "@internationalized/number": "3.6.7",
     "@internationalized/string": "3.2.10",
     "tailwind-variants": "3.3.1",
-    "@ropav/styles": "0.3.0"
+    "@ropav/styles": "0.5.0"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0",
-    "vue": "^3.6.0-rc.5"
+    "vue": "^3.6.0-rc.6"
   }
 }

package/dist/composables/use-table-column-layout.js

@@ -1,214 +0,0 @@
-import { computed, shallowRef, toValue, watch } from "vue";
-//#region src/composables/use-table-column-layout.ts
-/** Pixels and percentages are fixed; `fr` units and anything unrecognised flex. */
-var isStaticWidth = (width) => width != null && (!isNaN(width) || /^(\d+)(?=%$)/.test(String(width)));
-/** The number in front of `fr`. Anything else counts as `1fr`, as React Aria has it. */
-var parseFractionalUnit = (width) => {
-	if (!width || typeof width === "number") return 1;
-	const match = /^(.+)(?=fr$)/.exec(width);
-	return match ? parseFloat(match[0]) : 1;
-};
-var parseStaticWidth = (width, tableWidth) => {
-	if (typeof width === "number") return width;
-	const match = /^(\d+)(?=%$)/.exec(width);
-	if (!match) throw new Error("Only percentages or numbers are supported for static column widths");
-	return tableWidth * (parseFloat(match[0]) / 100);
-};
-var getMaxWidth = (maxWidth, tableWidth) => maxWidth != null ? parseStaticWidth(maxWidth, tableWidth) : Number.MAX_SAFE_INTEGER;
-/**
-* A minimum cannot be given in `fr`: knowing what a fraction comes to would need every other
-* column's width, which is the very thing being solved for.
-*/
-var getMinWidth = (minWidth, tableWidth) => minWidth != null ? parseStaticWidth(minWidth, tableWidth) : 0;
-/**
-* Round an array of floats that sums to an integer, keeping the sum.
-*
-* Each column has to come out a whole number of pixels, and rounding them one by one would drift:
-* the remainder is carried forward instead, so the total is preserved.
-*/
-var cascadeRounding = (items) => {
-	let floatTotal = 0;
-	let intTotal = 0;
-	return items.map((item) => {
-		const rounded = Math.round(item.targetMainSize + floatTotal) - intTotal;
-		floatTotal += item.targetMainSize;
-		intTotal += rounded;
-		return rounded;
-	});
-};
-/**
-* Column widths for one table width, ported from react-stately's `calculateColumnSizes`.
-*
-* This is the CSS flexbox layout algorithm, cut down to the shape a table needs: one row, a flex
-* basis of zero unless the column asked for a static width, and grow and shrink both equal to the
-* column's `fr`. It is deliberately **not** plain pixel sizing — `1fr` columns have to share what
-* the static and percentage columns leave over, and a minimum or maximum on any one of them
-* redistributes the rest.
-*/
-var calculateColumnSizes = (availableWidth, columns, changedColumns, getDefaultWidth, getDefaultMinWidth) => {
-	const originalWidth = availableWidth;
-	const flooredWidth = Math.floor(availableWidth);
-	const hasFractionalWidth = availableWidth - flooredWidth > 0;
-	availableWidth = flooredWidth;
-	let hasNonFrozenItems = false;
-	const items = columns.map((column, index) => {
-		const width = changedColumns.get(column.key) ?? column.width ?? column.defaultWidth ?? getDefaultWidth?.(index) ?? "1fr";
-		let frozen = false;
-		let baseSize = 0;
-		let flex = 0;
-		let targetMainSize = 0;
-		if (isStaticWidth(width)) {
-			baseSize = parseStaticWidth(width, availableWidth);
-			frozen = true;
-		} else {
-			flex = parseFractionalUnit(width);
-			if (flex <= 0) frozen = true;
-		}
-		const min = getMinWidth(column.minWidth ?? getDefaultMinWidth?.(index) ?? 0, availableWidth);
-		const max = getMaxWidth(column.maxWidth, availableWidth);
-		const hypotheticalMainSize = Math.max(min, Math.min(baseSize, max));
-		if (frozen) targetMainSize = hypotheticalMainSize;
-		else if (baseSize > hypotheticalMainSize) {
-			frozen = true;
-			targetMainSize = hypotheticalMainSize;
-		}
-		if (!frozen) hasNonFrozenItems = true;
-		return {
-			baseSize,
-			flex,
-			frozen,
-			hypotheticalMainSize,
-			max,
-			min,
-			targetMainSize,
-			violation: 0
-		};
-	});
-	while (hasNonFrozenItems) {
-		let usedWidth = 0;
-		let flexFactors = 0;
-		for (const item of items) if (item.frozen) usedWidth += item.targetMainSize;
-		else {
-			usedWidth += item.baseSize;
-			flexFactors += item.flex;
-		}
-		const remainingFreeSpace = availableWidth - usedWidth;
-		if (remainingFreeSpace > 0) {
-			for (const item of items) if (!item.frozen) item.targetMainSize = item.baseSize + item.flex / flexFactors * remainingFreeSpace;
-		}
-		let totalViolation = 0;
-		for (const item of items) {
-			item.violation = 0;
-			if (item.frozen) continue;
-			const unclamped = item.targetMainSize;
-			item.targetMainSize = Math.max(item.min, Math.min(unclamped, item.max));
-			item.violation = item.targetMainSize - unclamped;
-			totalViolation += item.violation;
-		}
-		hasNonFrozenItems = false;
-		for (const item of items) if (totalViolation === 0 || Math.sign(totalViolation) === Math.sign(item.violation)) item.frozen = true;
-		else if (!item.frozen) hasNonFrozenItems = true;
-	}
-	const sizes = cascadeRounding(items);
-	if (hasFractionalWidth && sizes.length > 0) {
-		const fraction = originalWidth.toString().split(".")[1];
-		sizes[sizes.length - 1] = Number(`${sizes.at(-1)}.${fraction}`);
-	}
-	return sizes;
-};
-/**
-* Every column's width in pixels, keyed by column, ported from react-stately's
-* `TableColumnLayout.buildColumnWidths`.
-*
-* The sizing itself is `calculateColumnSizes` above; what this adds is the pair of defaults a
-* table falls back to — `1fr` for a width nobody declared, and a 75px floor — and the mapping back
-* onto keys. Both the resizable container and the virtualizer's table layout need exactly that,
-* and the two must agree: a column laid out at one width by the browser and at another by the
-* layout would put every cell in the wrong place.
-*
-* @param changedWidths Widths that override what the columns declare, as a resize in flight does.
-*/
-var buildColumnWidths = (availableWidth, columns, changedWidths = /* @__PURE__ */ new Map(), options = {}) => {
-	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
-	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
-	const sizes = calculateColumnSizes(availableWidth, columns, changedWidths, (index) => getDefaultWidth(columns[index]), (index) => getDefaultMinWidth(columns[index]));
-	return new Map(columns.map((column, index) => [column.key, sizes[index] ?? 0]));
-};
-/**
-* Column widths for a resizable table, ported from react-stately's `TableColumnLayout` and
-* `useTableColumnResizeState`.
-*
-* Two things are worth knowing before changing any of it. A column whose `width` the caller set is
-* **controlled**: a resize never writes to it. And dragging one column's edge freezes every column
-* to its **left** at the pixel width it currently has, which is what stops the whole table from
-* reflowing while the pointer moves — the columns to the right keep their declared sizes and
-* absorb the difference.
-*/
-var useTableColumnLayout = (options) => {
-	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
-	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
-	const resizingColumn = shallowRef(null);
-	const uncontrolledColumns = () => options.columns().filter((column) => column.width == null);
-	const initialUncontrolledWidths = () => new Map(uncontrolledColumns().map((column) => [column.key, column.defaultWidth ?? getDefaultWidth(column) ?? "1fr"]));
-	const uncontrolledWidths = shallowRef(initialUncontrolledWidths());
-	watch(() => options.columns().map((column) => column.key).join(" "), () => {
-		uncontrolledWidths.value = initialUncontrolledWidths();
-	});
-	/** The declared width of every column, with the uncontrolled ones taken from state. */
-	const combinedWidths = () => new Map(options.columns().map((column) => [column.key, uncontrolledWidths.value.get(column.key) ?? column.width ?? "1fr"]));
-	const layout = computed(() => {
-		const columns = options.columns();
-		const tableWidth = toValue(options.tableWidth);
-		const widths = buildColumnWidths(tableWidth, columns, combinedWidths(), {
-			getDefaultMinWidth,
-			getDefaultWidth
-		});
-		const minWidths = /* @__PURE__ */ new Map();
-		const maxWidths = /* @__PURE__ */ new Map();
-		for (const column of columns) {
-			minWidths.set(column.key, getMinWidth(column.minWidth ?? getDefaultMinWidth(column), tableWidth));
-			maxWidths.set(column.key, getMaxWidth(column.maxWidth, tableWidth));
-		}
-		return {
-			maxWidths,
-			minWidths,
-			widths
-		};
-	});
-	const getColumnWidth = (key) => layout.value.widths.get(key) ?? 0;
-	const getColumnMinWidth = (key) => layout.value.minWidths.get(key) ?? 0;
-	const getColumnMaxWidth = (key) => layout.value.maxWidths.get(key) ?? 0;
-	const updateResizedColumns = (key, width) => {
-		const previous = layout.value.widths;
-		const declared = combinedWidths();
-		const clamped = Math.max(getColumnMinWidth(key), Math.min(getColumnMaxWidth(key), Math.floor(width)));
-		const next = /* @__PURE__ */ new Map();
-		let freeze = true;
-		for (const column of options.columns()) if (column.key === key) {
-			next.set(column.key, clamped);
-			freeze = false;
-		} else if (freeze) next.set(column.key, previous.get(column.key) ?? 0);
-		else next.set(column.key, column.width ?? declared.get(column.key) ?? "1fr");
-		const committed = /* @__PURE__ */ new Map();
-		for (const column of uncontrolledColumns()) committed.set(column.key, next.get(column.key) ?? "1fr");
-		committed.set(key, clamped);
-		uncontrolledWidths.value = committed;
-		return next;
-	};
-	return {
-		columnWidths: computed(() => layout.value.widths),
-		endResize: () => {
-			resizingColumn.value = null;
-		},
-		getColumnMaxWidth,
-		getColumnMinWidth,
-		getColumnWidth,
-		resizingColumn: computed(() => resizingColumn.value),
-		startResize: (key) => {
-			resizingColumn.value = key;
-		},
-		updateResizedColumns
-	};
-};
-//#endregion
-export { buildColumnWidths, calculateColumnSizes, getMaxWidth, getMinWidth, isStaticWidth, parseFractionalUnit, parseStaticWidth, useTableColumnLayout };