@hina-ui/vue 1.7.1 → 1.7.2

package/dist/index.js

@@ -7660,7 +7660,6 @@ var tableWrapper = tv({
 	base: [
 		"max-w-full rounded-lg",
 		"[&_th]:h-(--hn-row-h) [&_td]:h-(--hn-row-h)",
-		"[&_th]:py-0 [&_td]:py-0",
 		"[&_caption>span]:sticky [&_caption>span]:start-[0.75em] [&_caption>span]:inline-block",
 		"[&_tbody_tr:last-child_td]:border-b-0"
 	],
@@ -7685,7 +7684,7 @@ var tableWrapper = tv({
 	}
 });
 var tableCell = tv({
-	base: "",
+	base: "py-0",
 	variants: {
 		align: {
 			start: "",
@@ -20178,7 +20177,7 @@ var Section_default = /* @__PURE__ */ defineComponent({
 function useScrollSpy(entries) {
 	const visible = shallowRef(/* @__PURE__ */ new Set());
 	const targets = shallowRef([]);
-	const seen = /* @__PURE__ */ new Set();
+	const intersecting = /* @__PURE__ */ new Set();
 	const covered = computed(() => entries().filter((entry) => visible.value.has(entry.id)));
 	const current = computed(() => covered.value[0]?.id);
 	const span = computed(() => {
@@ -20186,18 +20185,18 @@ function useScrollSpy(entries) {
 		return rows.length ? `${rows[0] + 1} / ${rows.at(-1) + 2}` : void 0;
 	});
 	useIntersectionObserver(targets, (observed) => {
-		const next = new Set(visible.value);
-		for (const entry of observed) if (entry.isIntersecting) {
-			seen.add(entry.target.id);
-			next.add(entry.target.id);
-		} else if (seen.has(entry.target.id)) next.delete(entry.target.id);
-		if (next.size) visible.value = next;
-	}, { rootMargin: "0px 0px -15% 0px" });
+		for (const entry of observed) if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id);
+		else intersecting.delete(entry.target.id);
+		visible.value = intersecting.size ? new Set(intersecting) : new Set(current.value ? [current.value] : []);
+	}, {
+		rootMargin: "0px 0px -15% 0px",
+		threshold: [0, Number.EPSILON]
+	});
 	function targetOf(id) {
 		return document.getElementById(id);
 	}
 	function locate() {
-		seen.clear();
+		intersecting.clear();
 		targets.value = entries().map(({ id }) => targetOf(id));
 	}
 	onMounted(() => {
@@ -22236,7 +22235,7 @@ var DataTableHead_default = /* @__PURE__ */ defineComponent({
 							align: header.column.align,
 							"aria-sort": header.ariaSort,
 							style: normalizeStyle(header.style),
-							class: normalizeClass(unref(cn)("hn-table-header relative", header.column.headerClass, __props.drag.kind.value === "column" && __props.drag.key.value === header.column.key && "opacity-40")),
+							class: normalizeClass(unref(cn)("hn-table-header relative p-0", header.column.headerClass, __props.drag.kind.value === "column" && __props.drag.key.value === header.column.key && "opacity-40")),
 							"data-reorderable": header.leaf && __props.config.reorderColumns && header.column.reorderable !== false && !__props.ctl.blocked.value ? "" : void 0,
 							"data-align": header.column.align,
 							onPointerdown: ($event) => header.leaf && __props.drag.start("column", header.column.key, header.column.label, $event)
@@ -23338,6 +23337,26 @@ function resizeWidths(column, neighbor, widths, value, minimumTotalWidth = 0, ma
 	};
 }
 //#endregion
+//#region src/components/data-table/column-sizing-styles.ts
+function columnSizingStyles(columns, overrides, controls) {
+	const initial = allocateWidths(columns, overrides, 0);
+	const total = Object.values(initial).reduce((sum, width) => sum + width, controls);
+	const flexible = columns.filter((column) => !column.pin && overrides[column.key] === void 0 && initial[column.key] < columnBounds(column).max);
+	const capacities = flexible.map((column) => columnBounds(column).max - initial[column.key]).sort((a, b) => a - b);
+	let consumed = 0;
+	const shares = capacities.map((capacity, index) => {
+		const share = `calc((100cqi - ${total + consumed}px) / ${capacities.length - index})`;
+		consumed += capacity;
+		return share;
+	});
+	const keys = new Set(flexible.map((column) => column.key));
+	return {
+		width: shares.length ? `clamp(${total}px, 100%, ${total + consumed}px)` : `${total}px`,
+		"--hn-table-column-grow": shares.length ? `max(0px, ${shares.join(", ")})` : "0px",
+		...Object.fromEntries(columns.map((column, index) => [`--hn-table-column-${index}`, keys.has(column.key) ? `min(${columnBounds(column).max}px, calc(${initial[column.key]}px + var(--hn-table-column-grow)))` : `${initial[column.key]}px`]))
+	};
+}
+//#endregion
 //#region src/components/data-table/composables/useTableResize.ts
 function useTableResize(props, models, ctl, element, viewport, widths, active, available) {
 	const resizing = shallowRef();
@@ -23753,10 +23772,7 @@ function useTableColumns(props, models, ctl, element, viewport, leading, trailin
 	const tableStyle = computed(() => ({
 		"--hn-table-viewport-width": available.value ? `${available.value}px` : void 0,
 		tableLayout: constrained.value ? "fixed" : "auto",
-		...constrained.value ? {
-			...Object.fromEntries(ctl.visibleColumns.value.map((column, index) => [`--hn-table-column-${index}`, `${widths.value[column.key]}px`])),
-			width: `${ctl.visibleColumns.value.reduce((sum, column) => sum + width(column), leading.value * 48 + trailing.value * 72)}px`
-		} : {}
+		...constrained.value ? columnSizingStyles(ctl.visibleColumns.value, active.value ?? models.columnWidths.value, leading.value * 48 + trailing.value * 72) : {}
 	}));
 	function moveColumn(key, target) {
 		if (ctl.blocked.value || key === target) return;
@@ -23779,6 +23795,7 @@ function useTableColumns(props, models, ctl, element, viewport, leading, trailin
 		observer?.disconnect();
 	});
 	return {
+		constrained,
 		headerRows,
 		tableStyle,
 		cellStyle,
@@ -24509,7 +24526,7 @@ var DataTable_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(cn)(unref(tableWrapper)({
 						variant: props.variant,
 						hover: false
-					}), (props.fill || props.height) && "h-full", props.stickyHeader && "[&_thead_th]:sticky [&_thead_th]:z-[3]", props.stickyFooter && "[&_tfoot_td]:sticky [&_tfoot_td]:bottom-0 [&_tfoot_td]:z-[2] [&_tfoot_td]:bg-(--hn-table-head-bg)", props.tableClass))
+					}), unref(layout).constrained.value && "@container", (props.fill || props.height) && "h-full", props.stickyHeader && "[&_thead_th]:sticky [&_thead_th]:z-[3]", props.stickyFooter && "[&_tfoot_td]:sticky [&_tfoot_td]:bottom-0 [&_tfoot_td]:z-[2] [&_tfoot_td]:bg-(--hn-table-head-bg)", props.tableClass))
 				}, {
 					default: withCtx(() => [createElementVNode("table", {
 						ref_key: "element",