@veltra/sheet 2.2.0 → 2.3.1

package/dist/components/report/report-designer.js

@@ -1,8 +1,8 @@
 import _sfc_main$1 from "../sheet/sheet.js";
-import { resolveGridDropAddress } from "./designer/cell-coords.js";
-import { applyGridColWidths, readGridColWidths } from "./designer/col-widths.js";
+import { applyGridColWidths, applySheetColWidths, readGridColWidths } from "./designer/col-widths.js";
 import _sfc_main$2 from "./report-viewer.js";
 import _sfc_main$3 from "./designer-hub.js";
+import { resolveGridDropAddress } from "./designer/cell-coords.js";
 import _sfc_main$4 from "./designer/drop-highlight-overlay.js";
 import _sfc_main$5 from "./designer/float-panel.js";
 import _sfc_main$6 from "./designer/rules-dialog.js";
@@ -10,7 +10,7 @@ import _sfc_main$7 from "./designer/topology-overlay.js";
 import { FIELD_DRAG_MIME, parseFieldDragPayload } from "./field-panel-helpers.js";
 import _sfc_main$8 from "./field-panel.js";
 import { useReportDesigner } from "./use-report-designer.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, shallowRef, unref, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onScopeDispose, openBlock, ref, renderList, shallowRef, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
 import { UButton, UDrawer } from "@veltra/desktop";
 import { bem } from "@veltra/utils";
 import { Workbook } from "@veltra/sheet-core";
@@ -26,12 +26,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		template: {},
 		workbook: {}
 	},
-	emits: ["update:connections"],
+	emits: ["update:connections", "datasets-change"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const cls = bem("report-designer");
-		/** 设计态网格尺寸（列宽捕获范围与之一致） */
+		/** 设计态网格默认尺寸（新建模板；已声明尺寸后以模型为准，避免删行后被 props 撑回） */
 		const EMPTY_CONDITIONAL_RULES = [];
 		/** `v-model:connections` 可写代理（连接为纯序列化对象，仅驻留内存） */
 		const connections = computed({
@@ -43,8 +43,28 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			connections
 		});
 		const { workbook, catalog, boundKeys, activeCell, selectionLabel, activeBinding, activeFieldType, activeDatasetFields, resolvedRowParentLabel, resolvedColParentLabel, parentPick, rowParentCandidates, colParentCandidates, bindingEntries, metaTick, getBindingAt, resolveFieldLabel, bindField, patchActiveBinding, startParentPick, cancelParentPick, pickParentAt, clearParent, removeActiveBinding, resolveCellStyle, resolveCellRenderer, getTemplate } = designer;
+		/** 渲染行列数跟随模型（删行后不再被固定 props 经 ensureTableSize 撑回） */
+		const gridRows = computed(() => {
+			const rows = workbook.value.activeSheet.rows;
+			return rows > 0 ? rows : DESIGN_ROWS;
+		});
+		const gridCols = computed(() => {
+			const cols = workbook.value.activeSheet.cols;
+			return cols > 0 ? cols : DESIGN_COLS;
+		});
 		const hubVisible = ref(false);
 		const rulesDialogVisible = ref(false);
+		const pickCandidateCells = computed(() => {
+			if (!parentPick.value) return [];
+			return parentPick.value.mode === "row" ? rowParentCandidates.value : colParentCandidates.value;
+		});
+		function onHubClose() {
+			hubVisible.value = false;
+		}
+		watch(hubVisible, (open) => {
+			if (!open) emit("datasets-change");
+		});
+		watch(() => designer.datasets.value, () => emit("datasets-change"), { deep: true });
 		const sheetRef = useTemplateRef("sheetRef");
 		const previewViewerRef = useTemplateRef("previewViewerRef");
 		const gridHostRef = useTemplateRef("gridHostRef");
@@ -61,13 +81,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const previewTemplate = shallowRef(null);
 		/** 预览工作簿自持（XLSX 导出需要拿到填充后的 sheet，05 票 workbook? prop 先例） */
 		const previewWorkbook = new Workbook();
-		/** 当前设计态列宽（sheet-core 列宽未进快照，经 VTable 运行时捕获；导出随快照写宽） */
+		/** 当前设计态列宽（与 Sheet 模型同步；getTemplate 经 snapshot.colWidths 吐出） */
 		const designColWidths = ref([]);
 		const exporting = ref(false);
-		/** 从当前设计网格捕获列宽（网格未就绪则保留旧值） */
+		/** 从当前设计网格捕获列宽并写回 Sheet 模型（网格未就绪则保留旧值） */
 		function captureDesignColWidths() {
-			const widths = readGridColWidths(getDesignGrid(), Array.from({ length: DESIGN_COLS }, (_, col) => col));
-			if (widths) designColWidths.value = widths;
+			const widths = readGridColWidths(getDesignGrid(), Array.from({ length: gridCols.value }, (_, col) => col));
+			if (!widths) return;
+			const custom = widths.filter(([, width]) => width > 0);
+			designColWidths.value = custom;
+			applySheetColWidths(workbook.value.activeSheet, custom);
 		}
 		/** 设计网格重建后补刷新与列宽（restore 不发 content-reset 的场景由 grid 自行订阅，这里只管列宽） */
 		function syncDesignGridView() {
@@ -85,8 +108,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			viewMode.value = mode;
 			if (mode === "design") nextTick(syncDesignGridView);
 		}
-		watch(() => props.template, () => {
+		watch(() => props.template, (template) => {
 			viewMode.value = "design";
+			designColWidths.value = template?.colWidths?.length ? template.colWidths.map(([col, width]) => [col, width]) : [];
+			if (designColWidths.value.length) applySheetColWidths(workbook.value.activeSheet, designColWidths.value);
+			nextTick(syncDesignGridView);
 		});
 		watch(activeCell, (cell) => {
 			if (cell && parentPick.value) pickParentAt(cell);
@@ -94,6 +120,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		watch(catalog, () => {
 			nextTick(() => getDesignGrid()?.refresh());
 		});
+		const offStructureChange = workbook.value.activeSheet.on("structure-change", () => {
+			nextTick(syncDesignGridView);
+		});
+		onScopeDispose(offStructureChange);
 		async function exportPreviewXlsx() {
 			if (!isPreview.value || exporting.value) return;
 			const viewer = previewViewerRef.value;
@@ -146,7 +176,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				sheetRef.value?.getContext().selectCell(dropAddr);
 			} else bindField(payload.datasetId, payload.fieldName);
 		}
-		__expose({ getTemplate });
+		__expose({ getTemplate: () => {
+			captureDesignColWidths();
+			return getTemplate();
+		} });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).b) }, [
 				createElementVNode("div", { class: normalizeClass(unref(cls).e("toolbar")) }, [
@@ -155,7 +188,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						plain: "",
 						onClick: _cache[0] || (_cache[0] = ($event) => hubVisible.value = true)
 					}, {
-						default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("数据中枢", -1)])]),
+						default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("数据中枢", -1)])]),
 						_: 1
 					}),
 					createElementVNode("div", {
@@ -168,7 +201,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						plain: isPreview.value,
 						onClick: _cache[1] || (_cache[1] = ($event) => setViewMode("design"))
 					}, {
-						default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode(" 设计模式 ", -1)])]),
+						default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" 设计模式 ", -1)])]),
 						_: 1
 					}, 8, ["type", "plain"]), createVNode(unref(UButton), {
 						size: "small",
@@ -176,7 +209,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						plain: !isPreview.value,
 						onClick: _cache[2] || (_cache[2] = ($event) => setViewMode("preview"))
 					}, {
-						default: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode(" 预览模式 ", -1)])]),
+						default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode(" 预览模式 ", -1)])]),
 						_: 1
 					}, 8, ["type", "plain"])], 2),
 					isPreview.value ? (openBlock(), createBlock(unref(UButton), {
@@ -187,10 +220,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						loading: exporting.value,
 						onClick: exportPreviewXlsx
 					}, {
-						default: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode(" 导出 XLSX ", -1)])]),
+						default: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode(" 导出 XLSX ", -1)])]),
 						_: 1
 					}, 8, ["loading"])) : createCommentVNode("v-if", true),
-					createElementVNode("span", { class: normalizeClass(unref(cls).e("hint")) }, " 在数据中枢配置连接与 SQL 数据集，再将左侧字段点击或拖拽到单元格完成绑定；选中已绑定格可通过悬浮卡片调整角色、聚合与条件样式。 ", 2)
+					createElementVNode("span", { class: normalizeClass(unref(cls).e("hint")) }, " 在数据中枢配置连接与 SQL 数据集，再将左侧字段点击或拖拽到单元格完成绑定；选中已绑定格可通过悬浮卡片调整预设与条件样式。 ", 2)
 				], 2),
 				!isPreview.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
@@ -220,14 +253,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						ref: sheetRef,
 						class: normalizeClass(unref(cls).e("sheet")),
 						workbook: unref(workbook),
-						rows: DESIGN_ROWS,
-						cols: DESIGN_COLS,
+						rows: gridRows.value,
+						cols: gridCols.value,
 						"show-tabs": false,
 						"resolve-cell-style": unref(resolveCellStyle),
 						"resolve-cell-renderer": unref(resolveCellRenderer)
 					}, null, 8, [
 						"class",
 						"workbook",
+						"rows",
+						"cols",
 						"resolve-cell-style",
 						"resolve-cell-renderer"
 					]),
@@ -259,6 +294,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"dragging",
 						"fallback-label"
 					]),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(pickCandidateCells.value, (addr) => {
+						return openBlock(), createBlock(_sfc_main$4, {
+							key: `pick-${addr.row}-${addr.col}`,
+							cell: addr,
+							"host-el": gridHostEl.value,
+							"get-grid": getDesignGrid,
+							dragging: false,
+							"fallback-label": ""
+						}, null, 8, ["cell", "host-el"]);
+					}), 128)),
+					unref(parentPick) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("pick-hint")),
+						role: "status"
+					}, toDisplayString(unref(parentPick).mode === "row" ? "点击分组头作为行方向父格" : "点击分组头作为列方向父格"), 3)) : createCommentVNode("v-if", true),
 					createVNode(_sfc_main$5, {
 						cell: unref(activeCell),
 						binding: unref(activeBinding) ?? null,
@@ -268,6 +318,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"row-parent-candidates": unref(rowParentCandidates),
 						"col-parent-candidates": unref(colParentCandidates),
 						"resolve-field-label": unref(resolveFieldLabel),
+						"get-binding-at": unref(getBindingAt),
 						"host-el": gridHostEl.value,
 						"get-grid": getDesignGrid,
 						onPatch: unref(patchActiveBinding),
@@ -285,6 +336,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"row-parent-candidates",
 						"col-parent-candidates",
 						"resolve-field-label",
+						"get-binding-at",
 						"host-el",
 						"onPatch",
 						"onRemove",
@@ -300,29 +352,27 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					ref: previewViewerRef,
 					connector: props.connector,
 					template: previewTemplate.value,
-					workbook: unref(previewWorkbook),
-					"col-widths": designColWidths.value
+					workbook: unref(previewWorkbook)
 				}, null, 8, [
 					"connector",
 					"template",
-					"workbook",
-					"col-widths"
+					"workbook"
 				])], 2)) : createCommentVNode("v-if", true),
 				createVNode(unref(UDrawer), {
 					modelValue: hubVisible.value,
-					"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => hubVisible.value = $event),
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => hubVisible.value = $event),
 					class: normalizeClass(unref(cls).e("hub-drawer")),
 					"show-close": ""
 				}, {
 					default: withCtx(() => [createVNode(_sfc_main$3, {
 						hub: unref(designer),
-						onClose: _cache[4] || (_cache[4] = ($event) => hubVisible.value = false)
+						onClose: onHubClose
 					}, null, 8, ["hub"])]),
 					_: 1
 				}, 8, ["modelValue", "class"]),
 				createVNode(_sfc_main$6, {
 					modelValue: rulesDialogVisible.value,
-					"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => rulesDialogVisible.value = $event),
+					"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => rulesDialogVisible.value = $event),
 					rules: unref(activeBinding)?.conditionalRules ?? EMPTY_CONDITIONAL_RULES,
 					"binding-field": unref(activeBinding)?.field ?? "",
 					"dataset-fields": unref(activeDatasetFields),

package/dist/components/report/report-viewer.js

@@ -1,16 +1,14 @@
 import _sfc_main$1 from "../sheet/sheet.js";
 import { exportFilledReportXlsx } from "../../report/export-xlsx.js";
-import { applyGridColWidths, readGridColWidths } from "./designer/col-widths.js";
+import { applyGridColWidths, applySheetColWidths } from "./designer/col-widths.js";
 import _sfc_main$2 from "./filter-bar.js";
+import { previewGridSize } from "./preview-grid-size.js";
 import { useReportViewer } from "./use-report-viewer.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, toDisplayString, unref, useTemplateRef, watch } from "vue";
 import { bem } from "@veltra/utils";
 import { saveBlob } from "@cat-kit/fe";
 import { Workbook } from "@veltra/sheet-core";
 //#region src/components/report/report-viewer.vue
-const MIN_RENDER_ROWS = 50;
-const MIN_RENDER_COLS = 10;
-/** 取数未完成时拒绝导出的可读错误 */
 const EXPORT_NOT_READY_MESSAGE = "报表数据尚未就绪，请等待取数完成后再导出";
 const EXPORT_LOADING_MESSAGE = "报表数据加载中，请稍后再导出";
 /** 查看器工作簿：宿主可注入（同 USheet `workbook?` 先例），缺省内部自建；模板 / 填充结果都 restore 进活动 sheet 只读展示 */
@@ -26,43 +24,56 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const cls = bem("report-viewer");
-		/** 网格最小渲染尺寸（与 playground 预览态一致）；Filled Report 超出时按快照尺寸放大 */
+		/** 取数未完成时拒绝导出的可读错误 */
 		const internalWorkbook = new Workbook();
 		const workbook = computed(() => props.workbook ?? internalWorkbook);
 		const sheetRef = useTemplateRef("sheetRef");
-		const { params, values, loading, error, filledSnapshot, refresh, setValues } = useReportViewer(props);
-		const renderRows = computed(() => Math.max(MIN_RENDER_ROWS, filledSnapshot.value?.rows ?? 0, props.template.rows));
-		const renderCols = computed(() => Math.max(MIN_RENDER_COLS, filledSnapshot.value?.cols ?? 0, props.template.cols));
-		function exportColIndexes() {
-			return Array.from({ length: renderCols.value }, (_, col) => col);
-		}
-		/** 将宿主传入的列宽写入 VTable 运行时（sheet-core 列宽未进快照） */
+		const { params, values, loading, error, filledSnapshot, filledColWidths, refresh, setValues } = useReportViewer(props);
+		const renderSize = computed(() => {
+			const filled = filledSnapshot.value;
+			if (filled) return previewGridSize(filled, "filled");
+			return previewGridSize(props.template, "template");
+		});
+		/** 宿主显式传入优先；否则取数完成后用展开映射列宽；再回落模板设计态列宽 */
+		const effectiveColWidths = computed(() => {
+			if (props.colWidths?.length) return props.colWidths;
+			if (filledColWidths.value?.length) return filledColWidths.value;
+			return props.template.colWidths;
+		});
+		/** 将运行时列宽写入模型与 VTable（模型为单一事实源；grid 构造/content-reset 也会回放） */
 		function applyRuntimeColWidths() {
-			if (!props.colWidths?.length) return;
-			applyGridColWidths(sheetRef.value?.getGrid(), props.colWidths);
+			if (!effectiveColWidths.value?.length) return;
+			const sheet = workbook.value.activeSheet;
+			applySheetColWidths(sheet, effectiveColWidths.value);
+			applyGridColWidths(sheetRef.value?.getGrid(), effectiveColWidths.value);
 		}
 		/**
-		* restore 负责尺寸/冻结/行高/选区（静默），restoreContent 发 content-reset
+		* restore 负责尺寸/冻结/行高/列宽/选区（静默），restoreContent 发 content-reset
 		* 触发网格全量刷新（grid 层订阅直刷，无需手动 flush）；history.clear 使填充不进 undo
 		*/
-		function applySnapshot(snapshot) {
+		function applySnapshot(snapshot, mode) {
+			const size = previewGridSize(snapshot, mode);
+			const trimmed = {
+				...snapshot,
+				rows: size.rows,
+				cols: size.cols
+			};
 			const sheet = workbook.value.activeSheet;
-			sheet.restore(snapshot);
-			sheet.restoreContent(snapshot);
+			sheet.restore(trimmed);
+			sheet.restoreContent(trimmed);
 			sheet.history.clear();
 			nextTick(applyRuntimeColWidths);
 		}
-		watch(() => props.template, applySnapshot, { immediate: true });
+		watch(() => props.template, (template) => applySnapshot(template, "template"), { immediate: true });
 		watch(filledSnapshot, (filled) => {
-			if (filled) applySnapshot(filled);
+			if (filled) applySnapshot(filled, "filled");
 		});
-		watch(() => props.colWidths, applyRuntimeColWidths);
+		watch(effectiveColWidths, applyRuntimeColWidths);
 		async function exportXlsx() {
 			if (loading.value) throw new Error(EXPORT_LOADING_MESSAGE);
 			if (!filledSnapshot.value) throw new Error(EXPORT_NOT_READY_MESSAGE);
 			const sheet = workbook.value.activeSheet;
-			const colWidths = readGridColWidths(sheetRef.value?.getGrid(), exportColIndexes()) ?? [];
-			const buffer = await exportFilledReportXlsx(sheet, colWidths);
+			const buffer = await exportFilledReportXlsx(sheet);
 			saveBlob(new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), `${sheet.name || "报表"}.xlsx`);
 		}
 		__expose({
@@ -92,11 +103,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				ref: sheetRef,
 				class: normalizeClass(unref(cls).e("sheet")),
 				workbook: workbook.value,
-				rows: renderRows.value,
-				cols: renderCols.value,
+				rows: renderSize.value.rows,
+				cols: renderSize.value.cols,
 				"show-toolbar": false,
 				"show-formula-bar": false,
 				"show-tabs": false,
+				"show-row-header": false,
+				"show-col-header": false,
 				readonly: ""
 			}, null, 8, [
 				"class",

package/dist/components/report/style2.css

@@ -166,6 +166,21 @@
   min-height: 0;
   min-width: 0;
 }
+.u-report-designer__pick-hint {
+  position: absolute;
+  left: 50%;
+  bottom: var(--u-gap-small);
+  z-index: 17;
+  transform: translateX(-50%);
+  padding: 4px var(--u-gap-small);
+  border-radius: var(--u-radius-default);
+  background: color-mix(in srgb, var(--u-bg-color-top) 92%, transparent);
+  border: 1px dashed var(--u-color-primary);
+  font-size: var(--u-font-size-main-small);
+  color: var(--u-text-color-second);
+  pointer-events: none;
+  white-space: nowrap;
+}
 .u-report-designer {
   /* 数据中枢 drawer 面板宽度（class 经 $attrs 落到 .u-drawer 面板；须压过 .u-drawer.is-right 的 320px） */
 }
@@ -222,7 +237,7 @@
   white-space: nowrap;
 }
 
-/* Action Pill：选中绑定格上方的悬浮编辑卡（角色 / 聚合 / 条件样式 / 排序 / 清除绑定） */
+/* Action Pill：选中绑定格上方的悬浮编辑卡（预设 + 互补的展开/聚合 / 条件样式 / 排序 / 清除绑定） */
 .u-report-float-panel {
   position: absolute;
   z-index: 18;
@@ -308,7 +323,7 @@
   flex-wrap: wrap;
 }
 .u-report-float-panel__parent-select {
-  width: 88px;
+  width: 180px;
   flex: none;
 }
 .u-report-float-panel__select--expand {
@@ -326,11 +341,12 @@
 .u-report-rules-dialog {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 .u-report-rules-dialog__hint {
   margin: 0;
   font-size: 12px;
+  line-height: 1.5;
   color: var(--u-text-color-second);
 }
 .u-report-rules-dialog__list {
@@ -356,17 +372,18 @@
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  padding: 10px;
+  padding: 10px 10px 10px 6px;
   border: var(--u-border-muted);
   border-radius: 8px;
-  background: var(--u-bg-color-top);
+  background: var(--u-bg-color-middle);
 }
 .u-report-rule-row__handle {
   flex: none;
-  width: 20px;
-  margin-top: 4px;
-  color: var(--u-text-color-second);
-  font-size: 16px;
+  width: 16px;
+  margin-top: 6px;
+  color: var(--u-text-color-placeholder);
+  font-size: 12px;
+  letter-spacing: -1px;
   line-height: 1;
   cursor: grab;
   user-select: none;
@@ -382,28 +399,29 @@
   flex-direction: column;
   gap: 8px;
 }
-.u-report-rule-row__meta {
+.u-report-rule-row__when {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   flex-wrap: wrap;
 }
-.u-report-rule-row__field-select {
-  width: 120px;
-  flex: none;
+.u-report-rule-row__then {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
 }
-.u-report-rule-row__scope-select {
-  width: 72px;
+.u-report-rule-row__lead {
   flex: none;
+  font-size: 12px;
+  color: var(--u-text-color-second);
 }
-.u-report-rule-row__condition {
-  display: grid;
-  grid-template-columns: 72px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
+.u-report-rule-row__field-select {
+  width: 128px;
+  flex: none;
 }
 .u-report-rule-row__operator {
-  width: 72px;
+  width: 96px;
   flex: none;
 }
 .u-report-rule-row__value {
@@ -414,40 +432,27 @@
   min-width: 0;
 }
 .u-report-rule-row__scalar-input {
-  width: 112px;
+  width: 120px;
   flex: none;
 }
 .u-report-rule-row__between-input {
-  width: 96px;
+  width: 88px;
   flex: none;
 }
 .u-report-rule-row__between-sep {
   font-size: 12px;
   color: var(--u-text-color-second);
 }
-.u-report-rule-row__style {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.u-report-rule-row__style-label {
-  font-size: 12px;
-  color: var(--u-text-color-second);
-}
 .u-report-rule-row__toggle {
   min-width: 28px;
   padding-inline: 6px;
 }
 .u-report-rule-row__preview {
   flex: none;
-  margin-top: 2px;
 }
-.u-report-rule-row__actions {
+.u-report-rule-row__remove {
   flex: none;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  margin-top: 2px;
 }
 
 .u-report-rule-preview {

package/dist/components/report/use-report-designer.js

@@ -1,4 +1,4 @@
-import { REPORT_META_NAMESPACE, applyReportPreset, createReportBinding, formatCellAddress, inferColParentCandidate, inferDropPreset, inferRowParentCandidate, isHorizontalExpandBinding, isVerticalExpandBinding, listColParentCandidates, listRowParentCandidates } from "../../report/binding.js";
+import { REPORT_META_NAMESPACE, applyReportPreset, createReportBinding, formatCellAddress, inferDropPreset, inferParentsForPreset, isColGroupBinding, isHorizontalExpandBinding, isRowGroupBinding, isVerticalExpandBinding, listColParentCandidates, listRowParentCandidates, prefersGroupParent, presetStillApplies } from "../../report/binding.js";
 import { buildParamDefs } from "../../report/params.js";
 import { assertCompatibleTemplateVersion, createReportTemplate, getTemplateDatasets, resolveParamDefaults } from "../../report/template.js";
 import { createBindingBadgeRenderer, createBindingBadgeStyleResolver } from "./binding-badge.js";
@@ -80,10 +80,9 @@ function useReportDesigner(options) {
 		const preset = inferDropPreset(target, field?.type ?? "string", getBindingAt);
 		let binding = createReportBinding(dataset, fieldName);
 		binding = applyReportPreset(binding, preset);
-		const rowParent = inferRowParentCandidate(target, getBindingAt);
-		if (rowParent) binding.rowParent = rowParent;
-		const colParent = inferColParentCandidate(target, getBindingAt);
-		if (colParent) binding.colParent = colParent;
+		const parents = inferParentsForPreset(target, preset, getBindingAt);
+		if (parents.rowParent) binding.rowParent = parents.rowParent;
+		if (parents.colParent) binding.colParent = parents.colParent;
 		workbook.value.activeSheet.setCellMeta(target, REPORT_META_NAMESPACE, binding);
 	}
 	const activeBinding = computed(() => {
@@ -118,13 +117,13 @@ function useReportDesigner(options) {
 		metaTick.value;
 		const binding = activeBinding.value;
 		if (!binding) return [];
-		return listRowParentCandidates(binding, bindingEntries.value);
+		return listRowParentCandidates(binding, bindingEntries.value, { preferGroup: prefersGroupParent(binding) });
 	});
 	const colParentCandidates = computed(() => {
 		metaTick.value;
 		const binding = activeBinding.value;
 		if (!binding) return [];
-		return listColParentCandidates(binding, bindingEntries.value);
+		return listColParentCandidates(binding, bindingEntries.value, { preferGroup: prefersGroupParent(binding) });
 	});
 	const bindingEntries = computed(() => {
 		metaTick.value;
@@ -138,6 +137,11 @@ function useReportDesigner(options) {
 		}
 		return entries;
 	});
+	function parentNeedsCorrection(addr) {
+		if (!addr) return true;
+		const parent = getBindingAt(addr);
+		return !parent || parent.aggregate === "list";
+	}
 	function patchActiveBinding(patch) {
 		const cell = activeCell.value;
 		const binding = activeBinding.value;
@@ -148,7 +152,14 @@ function useReportDesigner(options) {
 		};
 		if ("rowParent" in patch && patch.rowParent === void 0) delete next.rowParent;
 		if ("colParent" in patch && patch.colParent === void 0) delete next.colParent;
-		if (("aggregate" in patch || "expand" in patch) && !("preset" in patch)) delete next.preset;
+		if (("aggregate" in patch || "expand" in patch) && !("preset" in patch) && !presetStillApplies(next)) delete next.preset;
+		if (patch.preset === "subtotal") {
+			const inferred = inferParentsForPreset(cell, "subtotal", getBindingAt);
+			if (parentNeedsCorrection(next.rowParent)) if (inferred.rowParent) next.rowParent = inferred.rowParent;
+			else delete next.rowParent;
+			if (parentNeedsCorrection(next.colParent)) if (inferred.colParent) next.colParent = inferred.colParent;
+			else delete next.colParent;
+		}
 		workbook.value.activeSheet.setCellMeta(cell, REPORT_META_NAMESPACE, next);
 	}
 	function startParentPick(mode) {
@@ -165,16 +176,27 @@ function useReportDesigner(options) {
 	function cancelParentPick() {
 		parentPick.value = null;
 	}
+	function isValidParentTarget(mode, source, target) {
+		if (!target) return false;
+		if (target.dataset !== source.dataset) return false;
+		const groupOnly = prefersGroupParent(source);
+		if (mode === "row") return groupOnly ? isRowGroupBinding(target) : isVerticalExpandBinding(target);
+		return groupOnly ? isColGroupBinding(target) : isHorizontalExpandBinding(target);
+	}
 	function pickParentAt(target) {
 		const pick = parentPick.value;
 		if (!pick) return;
 		if (target.row === pick.source.row && target.col === pick.source.col) return;
 		const sourceBinding = getBindingAt(pick.source);
+		if (!sourceBinding) {
+			parentPick.value = null;
+			return;
+		}
 		const targetBinding = getBindingAt(target);
-		if (!sourceBinding || !targetBinding) return;
-		if (targetBinding.dataset !== sourceBinding.dataset) return;
-		if (pick.mode === "row" && !isVerticalExpandBinding(targetBinding)) return;
-		if (pick.mode === "col" && !isHorizontalExpandBinding(targetBinding)) return;
+		if (!isValidParentTarget(pick.mode, sourceBinding, targetBinding)) {
+			workbook.value.activeSheet.selectCell(pick.source);
+			return;
+		}
 		const patch = pick.mode === "row" ? { rowParent: { ...target } } : { colParent: { ...target } };
 		const next = {
 			...sourceBinding,

package/dist/components/report/use-report-viewer.js

@@ -1,4 +1,4 @@
-import { renderReport } from "../../report/render/index.js";
+import { renderReport, resolveFilledColWidths } from "../../report/render/index.js";
 import { fetchTemplateRecords, resolveParamDefaults, resolveTemplateParams } from "../../report/template.js";
 import { computed, ref, shallowRef, watch } from "vue";
 //#region src/components/report/use-report-viewer.ts
@@ -10,6 +10,7 @@ function useReportViewer(props) {
 	const loading = ref(false);
 	const error = shallowRef(null);
 	const filledSnapshot = shallowRef(null);
+	const filledColWidths = shallowRef(void 0);
 	const params = computed(() => resolveTemplateParams(props.template));
 	const values = shallowRef({});
 	let fetchSeq = 0;
@@ -23,9 +24,11 @@ function useReportViewer(props) {
 		loading.value = false;
 		if (!result.ok) {
 			error.value = result.error;
+			filledColWidths.value = void 0;
 			return;
 		}
 		filledSnapshot.value = renderReport(template, result.data);
+		filledColWidths.value = template.colWidths?.length ? resolveFilledColWidths(template, result.data, template.colWidths) : void 0;
 	}
 	function setValues(next) {
 		values.value = next;
@@ -33,6 +36,7 @@ function useReportViewer(props) {
 	}
 	watch(() => props.template, () => {
 		filledSnapshot.value = null;
+		filledColWidths.value = void 0;
 		values.value = resolveParamDefaults(params.value);
 		refresh();
 	}, { immediate: true });
@@ -42,6 +46,7 @@ function useReportViewer(props) {
 		loading,
 		error,
 		filledSnapshot,
+		filledColWidths,
 		refresh,
 		setValues
 	};