` is
+ * only a *minimum* -- a `| `'s own `max-height` doesn't clip it either
+ * (browsers don't cap table-row growth that way); a plain block-level child
+ * with `max-height` + `overflow: hidden` does, so `.cell-content` (not the
+ * ` | ` itself) carries this. Without it a wrapped multi-line cell (see
+ * `.cell.multiline`) would grow its row past rowH(r), desyncing every pixel
+ * position computed from rowH()/rowTop() -- the clip/fill overlays, sticky
+ * frozen panes, the row-resize handle, ... */
+function cellContentStyle(r: number): Record {
+ return { maxHeight: rowH(r) + 'px' };
+}
function rowHeadStyle(r: number): Record {
if (!isFixed.value || r >= frozenRows.value) return {};
return { top: rowTop(r) + 'px', zIndex: '5' };
@@ -557,14 +577,53 @@ function selectAll() {
}
// ---- editing ---------------------------------------------------
+// The editor overlays the cell (positioned via colLeft/rowTop, like the
+// clip/fill overlays) rather than living inside the | , so it's free to
+// grow past the cell's own width/height -- clipped only by EDIT_MAX_W/H, not
+// by the grid's per-cell `overflow: hidden`.
const editing = ref<{ col: number; row: number } | null>(null);
const editValue = ref('');
-const editInput = ref(null);
+const editInput = ref(null);
+const editMirrorEl = ref(null);
const setEditRef = (el: unknown) => {
- editInput.value = (el as HTMLInputElement) ?? null;
+ editInput.value = (el as HTMLTextAreaElement) ?? null;
};
let committing = false;
+const editStyle = computed(() => {
+ const s = editing.value;
+ if (!s) return {};
+ return {
+ left: colLeft(s.col) + 'px',
+ top: rowTop(s.row) + 'px',
+ minWidth: colWidth(s.col) + 'px',
+ minHeight: rowH(s.row) + 'px',
+ };
+});
+const editMirrorStyle = computed(() => {
+ const s = editing.value;
+ if (!s) return {};
+ return {
+ minWidth: colWidth(s.col) + 'px',
+ minHeight: rowH(s.row) + 'px',
+ maxWidth: EDIT_MAX_W + 'px',
+ };
+});
+
+/** Grow the editor to fit its content (width first, then wrap and grow
+ * height), via a hidden mirror element -- a plain ` | |