@pixerate/editor-svelte 0.8.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +100 -7
- package/dist/index.js +426 -203
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/createNavigationGuard.svelte.ts +97 -0
- package/src/history/createHistoryShortcuts.ts +95 -0
- package/src/history/history.svelte.ts +68 -0
- package/src/history/index.ts +2 -0
- package/src/index.d.ts +100 -7
- package/src/index.ts +30 -4
- package/src/navigationGuard.ts +82 -0
package/dist/index.js
CHANGED
|
@@ -229,29 +229,243 @@ function TemplateRenderer($$anchor, $$props) {
|
|
|
229
229
|
}
|
|
230
230
|
$4.delegate(["click"]);
|
|
231
231
|
|
|
232
|
+
// src/navigationGuard.ts
|
|
233
|
+
function navigationGuard(node, options) {
|
|
234
|
+
let isDirty = options.isDirty;
|
|
235
|
+
let enabled = options.enabled ?? true;
|
|
236
|
+
let onBlocked = options.onBlocked;
|
|
237
|
+
function handleBeforeUnload(e) {
|
|
238
|
+
if (!enabled || !isDirty) return;
|
|
239
|
+
e.preventDefault();
|
|
240
|
+
e.returnValue = "";
|
|
241
|
+
}
|
|
242
|
+
function handleClick(e) {
|
|
243
|
+
if (!enabled || !isDirty) return;
|
|
244
|
+
const target = e.target;
|
|
245
|
+
const anchor = target?.closest?.("a");
|
|
246
|
+
if (!anchor) return;
|
|
247
|
+
if (anchor.target === "_blank") return;
|
|
248
|
+
if (typeof window !== "undefined") {
|
|
249
|
+
const isInternal = anchor.host === window.location.host;
|
|
250
|
+
if (!isInternal) return;
|
|
251
|
+
if (anchor.pathname === window.location.pathname && anchor.search === window.location.search) {
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
e.preventDefault();
|
|
256
|
+
e.stopPropagation();
|
|
257
|
+
const href = anchor.href;
|
|
258
|
+
onBlocked?.(href);
|
|
259
|
+
}
|
|
260
|
+
if (typeof window !== "undefined") {
|
|
261
|
+
window.addEventListener("beforeunload", handleBeforeUnload);
|
|
262
|
+
}
|
|
263
|
+
node.addEventListener("click", handleClick, { capture: true });
|
|
264
|
+
return {
|
|
265
|
+
update(newOptions) {
|
|
266
|
+
isDirty = newOptions.isDirty;
|
|
267
|
+
enabled = newOptions.enabled ?? true;
|
|
268
|
+
onBlocked = newOptions.onBlocked;
|
|
269
|
+
},
|
|
270
|
+
destroy() {
|
|
271
|
+
if (typeof window !== "undefined") {
|
|
272
|
+
window.removeEventListener("beforeunload", handleBeforeUnload);
|
|
273
|
+
}
|
|
274
|
+
node.removeEventListener("click", handleClick, { capture: true });
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// src/createNavigationGuard.svelte.ts
|
|
280
|
+
import * as $5 from "svelte/internal/client";
|
|
281
|
+
function createNavigationGuard(options) {
|
|
282
|
+
let showConfirm = $5.state(false);
|
|
283
|
+
let pendingUrl = $5.state(null);
|
|
284
|
+
const getIsDirty = () => typeof options.isDirty === "function" ? options.isDirty() : options.isDirty;
|
|
285
|
+
const getEnabled = () => typeof options.enabled === "function" ? options.enabled() : options.enabled ?? true;
|
|
286
|
+
function handleBeforeUnload(e) {
|
|
287
|
+
if (!getEnabled() || !getIsDirty()) return;
|
|
288
|
+
e.preventDefault();
|
|
289
|
+
e.returnValue = "";
|
|
290
|
+
}
|
|
291
|
+
if (typeof window !== "undefined") {
|
|
292
|
+
window.addEventListener("beforeunload", handleBeforeUnload);
|
|
293
|
+
}
|
|
294
|
+
function intercept(url) {
|
|
295
|
+
if (getEnabled() && getIsDirty()) {
|
|
296
|
+
$5.set(pendingUrl, url, true);
|
|
297
|
+
$5.set(showConfirm, true);
|
|
298
|
+
options.onBlocked?.(url);
|
|
299
|
+
return true;
|
|
300
|
+
}
|
|
301
|
+
return false;
|
|
302
|
+
}
|
|
303
|
+
function confirmLeave() {
|
|
304
|
+
$5.set(showConfirm, false);
|
|
305
|
+
const target = $5.get(pendingUrl);
|
|
306
|
+
if (target) {
|
|
307
|
+
if (options.onNavigate) {
|
|
308
|
+
options.onNavigate(target);
|
|
309
|
+
} else if (typeof window !== "undefined") {
|
|
310
|
+
window.location.href = target;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
function cancelLeave() {
|
|
315
|
+
$5.set(showConfirm, false);
|
|
316
|
+
$5.set(pendingUrl, null);
|
|
317
|
+
}
|
|
318
|
+
function destroy() {
|
|
319
|
+
if (typeof window !== "undefined") {
|
|
320
|
+
window.removeEventListener("beforeunload", handleBeforeUnload);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
return {
|
|
324
|
+
get showConfirm() {
|
|
325
|
+
return $5.get(showConfirm);
|
|
326
|
+
},
|
|
327
|
+
setShowConfirm(val) {
|
|
328
|
+
$5.set(showConfirm, val, true);
|
|
329
|
+
},
|
|
330
|
+
get pendingUrl() {
|
|
331
|
+
return $5.get(pendingUrl);
|
|
332
|
+
},
|
|
333
|
+
intercept,
|
|
334
|
+
confirmLeave,
|
|
335
|
+
cancelLeave,
|
|
336
|
+
destroy
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
// src/history/history.svelte.ts
|
|
341
|
+
import * as $6 from "svelte/internal/client";
|
|
342
|
+
import { HistoryManager, createHistoryManager } from "@pixerate/editor";
|
|
343
|
+
function createHistory(managerOrOptions) {
|
|
344
|
+
const manager = managerOrOptions instanceof HistoryManager ? managerOrOptions : createHistoryManager(managerOrOptions);
|
|
345
|
+
let state7 = $6.state($6.proxy(manager.getState()));
|
|
346
|
+
manager.subscribe((newState) => {
|
|
347
|
+
$6.set(state7, newState, true);
|
|
348
|
+
});
|
|
349
|
+
return {
|
|
350
|
+
get canUndo() {
|
|
351
|
+
return $6.get(state7).canUndo;
|
|
352
|
+
},
|
|
353
|
+
get canRedo() {
|
|
354
|
+
return $6.get(state7).canRedo;
|
|
355
|
+
},
|
|
356
|
+
get undoName() {
|
|
357
|
+
return $6.get(state7).undoName;
|
|
358
|
+
},
|
|
359
|
+
get redoName() {
|
|
360
|
+
return $6.get(state7).redoName;
|
|
361
|
+
},
|
|
362
|
+
get undoCount() {
|
|
363
|
+
return $6.get(state7).undoCount;
|
|
364
|
+
},
|
|
365
|
+
get redoCount() {
|
|
366
|
+
return $6.get(state7).redoCount;
|
|
367
|
+
},
|
|
368
|
+
get manager() {
|
|
369
|
+
return manager;
|
|
370
|
+
},
|
|
371
|
+
undo: () => manager.undo(),
|
|
372
|
+
redo: () => manager.redo(),
|
|
373
|
+
clear: () => manager.clear(),
|
|
374
|
+
execute: (cmd) => manager.execute(cmd),
|
|
375
|
+
executeMerged: (cmd, opts) => manager.executeMerged(cmd, opts),
|
|
376
|
+
batch: (name, fn) => manager.batch(name, fn),
|
|
377
|
+
subscribe: (run) => manager.subscribe(run)
|
|
378
|
+
};
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
// src/history/createHistoryShortcuts.ts
|
|
382
|
+
function createHistoryShortcuts(manager, options = {}) {
|
|
383
|
+
const {
|
|
384
|
+
enabled = true,
|
|
385
|
+
target,
|
|
386
|
+
ignoreEditableElements = true
|
|
387
|
+
} = options;
|
|
388
|
+
if (!enabled) {
|
|
389
|
+
return { destroy: () => {
|
|
390
|
+
} };
|
|
391
|
+
}
|
|
392
|
+
const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
|
|
393
|
+
if (!eventTarget) {
|
|
394
|
+
return { destroy: () => {
|
|
395
|
+
} };
|
|
396
|
+
}
|
|
397
|
+
const handleKeyDown = (event2) => {
|
|
398
|
+
const e = event2;
|
|
399
|
+
const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
|
|
400
|
+
const modifier = isMac ? e.metaKey : e.ctrlKey;
|
|
401
|
+
if (!modifier) return;
|
|
402
|
+
if (ignoreEditableElements && typeof document !== "undefined") {
|
|
403
|
+
const targetEl = e.target || document.activeElement;
|
|
404
|
+
if (targetEl && targetEl.tagName) {
|
|
405
|
+
const tagName = targetEl.tagName.toLowerCase();
|
|
406
|
+
const isInput = tagName === "input" || tagName === "textarea";
|
|
407
|
+
const isContentEditable = targetEl.isContentEditable || targetEl.getAttribute?.("contenteditable") === "true";
|
|
408
|
+
if (isInput || isContentEditable) {
|
|
409
|
+
return;
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
const key = e.key?.toLowerCase();
|
|
414
|
+
if (key === "z" && !e.shiftKey) {
|
|
415
|
+
if (manager.getState().canUndo) {
|
|
416
|
+
e.preventDefault();
|
|
417
|
+
manager.undo();
|
|
418
|
+
}
|
|
419
|
+
return;
|
|
420
|
+
}
|
|
421
|
+
const isRedoKey = key === "z" && e.shiftKey || !isMac && key === "y" && !e.shiftKey;
|
|
422
|
+
if (isRedoKey) {
|
|
423
|
+
if (manager.getState().canRedo) {
|
|
424
|
+
e.preventDefault();
|
|
425
|
+
manager.redo();
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
};
|
|
429
|
+
eventTarget.addEventListener("keydown", handleKeyDown);
|
|
430
|
+
return {
|
|
431
|
+
destroy: () => {
|
|
432
|
+
eventTarget.removeEventListener("keydown", handleKeyDown);
|
|
433
|
+
}
|
|
434
|
+
};
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
// src/index.ts
|
|
438
|
+
import {
|
|
439
|
+
DirtyTracker,
|
|
440
|
+
createDirtyTracker,
|
|
441
|
+
defaultIsEqual,
|
|
442
|
+
HistoryManager as HistoryManager2,
|
|
443
|
+
createHistoryManager as createHistoryManager2
|
|
444
|
+
} from "@pixerate/editor";
|
|
445
|
+
|
|
232
446
|
// src/spreadsheet/SpreadsheetEditor.svelte
|
|
233
447
|
import "svelte/internal/disclose-version";
|
|
234
|
-
import * as $
|
|
448
|
+
import * as $9 from "svelte/internal/client";
|
|
235
449
|
import { indexToColName as indexToColName2 } from "@pixerate/editor";
|
|
236
450
|
|
|
237
451
|
// src/spreadsheet/FormulaBar.svelte
|
|
238
452
|
import "svelte/internal/disclose-version";
|
|
239
|
-
import * as $
|
|
453
|
+
import * as $7 from "svelte/internal/client";
|
|
240
454
|
import { indexToColName } from "@pixerate/editor";
|
|
241
|
-
var root4 = $
|
|
455
|
+
var root4 = $7.from_html(`<div><div class="flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground"> </div> <div class="flex items-center text-muted-foreground select-none"><span class="italic font-serif font-bold text-sm text-primary">fx</span></div> <input type="text" class="flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded" placeholder="Enter a value or formula (e.g. =SUM(A1:A5))"/></div>`);
|
|
242
456
|
function FormulaBar($$anchor, $$props) {
|
|
243
|
-
$
|
|
244
|
-
let sheetState = $
|
|
245
|
-
let effectiveCoord = $
|
|
457
|
+
$7.push($$props, true);
|
|
458
|
+
let sheetState = $7.prop($$props, "sheetState", 7), activeCoord = $7.prop($$props, "activeCoord", 3, null), value = $7.prop($$props, "value", 15, ""), className = $7.prop($$props, "class", 3, "");
|
|
459
|
+
let effectiveCoord = $7.derived(() => {
|
|
246
460
|
if (sheetState()) return sheetState().activeCell;
|
|
247
461
|
return activeCoord();
|
|
248
462
|
});
|
|
249
|
-
let coordLabel = $
|
|
250
|
-
if (!$
|
|
251
|
-
const colName = indexToColName($
|
|
252
|
-
return `${colName}${$
|
|
463
|
+
let coordLabel = $7.derived(() => {
|
|
464
|
+
if (!$7.get(effectiveCoord)) return "--";
|
|
465
|
+
const colName = indexToColName($7.get(effectiveCoord).col);
|
|
466
|
+
return `${colName}${$7.get(effectiveCoord).row + 1}`;
|
|
253
467
|
});
|
|
254
|
-
let effectiveValue = $
|
|
468
|
+
let effectiveValue = $7.derived(() => {
|
|
255
469
|
if (sheetState()) {
|
|
256
470
|
if (sheetState().editingCell) return sheetState().draftValue;
|
|
257
471
|
if (!sheetState().activeCell) return "";
|
|
@@ -269,11 +483,11 @@ function FormulaBar($$anchor, $$props) {
|
|
|
269
483
|
const row = sheetState().document.rows[sheetState().activeCell.row];
|
|
270
484
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
271
485
|
if (row && col) {
|
|
272
|
-
sheetState().setCellValue(row.id, col.id, $
|
|
486
|
+
sheetState().setCellValue(row.id, col.id, $7.get(effectiveValue));
|
|
273
487
|
}
|
|
274
488
|
sheetState().commitEditing();
|
|
275
489
|
}
|
|
276
|
-
$$props.onCommit?.($
|
|
490
|
+
$$props.onCommit?.($7.get(effectiveValue));
|
|
277
491
|
} else if (e.key === "Escape") {
|
|
278
492
|
e.preventDefault();
|
|
279
493
|
if (sheetState()) {
|
|
@@ -295,28 +509,28 @@ function FormulaBar($$anchor, $$props) {
|
|
|
295
509
|
$$props.onChange?.(target.value);
|
|
296
510
|
}
|
|
297
511
|
var div = root4();
|
|
298
|
-
var div_1 = $
|
|
299
|
-
var text = $
|
|
300
|
-
var input = $
|
|
301
|
-
$
|
|
302
|
-
$
|
|
303
|
-
$
|
|
304
|
-
$
|
|
305
|
-
$
|
|
306
|
-
$
|
|
512
|
+
var div_1 = $7.child(div);
|
|
513
|
+
var text = $7.only_child(div_1, true);
|
|
514
|
+
var input = $7.sibling(div_1, 4);
|
|
515
|
+
$7.remove_input_defaults(input);
|
|
516
|
+
$7.reset(div);
|
|
517
|
+
$7.template_effect(() => {
|
|
518
|
+
$7.set_class(div, 1, `flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono ${className() ?? ""}`);
|
|
519
|
+
$7.set_text(text, $7.get(coordLabel));
|
|
520
|
+
$7.set_value(input, $7.get(effectiveValue));
|
|
307
521
|
});
|
|
308
|
-
$
|
|
309
|
-
$
|
|
310
|
-
$
|
|
311
|
-
$
|
|
522
|
+
$7.delegated("input", input, handleInput);
|
|
523
|
+
$7.delegated("keydown", input, handleKeyDown);
|
|
524
|
+
$7.append($$anchor, div);
|
|
525
|
+
$7.pop();
|
|
312
526
|
}
|
|
313
|
-
$
|
|
527
|
+
$7.delegate(["input", "keydown"]);
|
|
314
528
|
|
|
315
529
|
// src/spreadsheet/spreadsheet.svelte.ts
|
|
316
|
-
import * as $
|
|
530
|
+
import * as $8 from "svelte/internal/client";
|
|
317
531
|
import { SpreadsheetController } from "@pixerate/editor";
|
|
318
532
|
function createReactiveSpreadsheet(options = {}) {
|
|
319
|
-
let doc = $
|
|
533
|
+
let doc = $8.state($8.proxy({
|
|
320
534
|
id: options.document?.id || `sheet_${Date.now()}`,
|
|
321
535
|
name: options.document?.name || "Sheet 1",
|
|
322
536
|
columns: options.document?.columns || [],
|
|
@@ -325,47 +539,47 @@ function createReactiveSpreadsheet(options = {}) {
|
|
|
325
539
|
createdAt: options.document?.createdAt || Date.now(),
|
|
326
540
|
updatedAt: options.document?.updatedAt || Date.now()
|
|
327
541
|
}));
|
|
328
|
-
let activeCell = $
|
|
329
|
-
let selectedRange = $
|
|
330
|
-
let editingCell = $
|
|
331
|
-
let draftValue = $
|
|
542
|
+
let activeCell = $8.state(null);
|
|
543
|
+
let selectedRange = $8.state(null);
|
|
544
|
+
let editingCell = $8.state(null);
|
|
545
|
+
let draftValue = $8.state("");
|
|
332
546
|
const controller = new SpreadsheetController({
|
|
333
547
|
...options,
|
|
334
548
|
document: options.document,
|
|
335
549
|
onDocumentChange: (updated) => {
|
|
336
|
-
$
|
|
550
|
+
$8.set(doc, { ...updated }, true);
|
|
337
551
|
options.onDocumentChange?.(updated);
|
|
338
552
|
},
|
|
339
553
|
onSelectionChange: (active, range) => {
|
|
340
|
-
$
|
|
341
|
-
$
|
|
554
|
+
$8.set(activeCell, active, true);
|
|
555
|
+
$8.set(selectedRange, range, true);
|
|
342
556
|
options.onSelectionChange?.(active, range);
|
|
343
557
|
},
|
|
344
558
|
onCellCommit: (rowId, colId, raw, value) => {
|
|
345
559
|
options.onCellCommit?.(rowId, colId, raw, value);
|
|
346
560
|
}
|
|
347
561
|
});
|
|
348
|
-
$
|
|
349
|
-
$
|
|
350
|
-
$
|
|
562
|
+
$8.set(doc, { ...controller.document }, true);
|
|
563
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
564
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
351
565
|
return {
|
|
352
566
|
get document() {
|
|
353
|
-
return $
|
|
567
|
+
return $8.get(doc);
|
|
354
568
|
},
|
|
355
569
|
get activeCell() {
|
|
356
|
-
return $
|
|
570
|
+
return $8.get(activeCell);
|
|
357
571
|
},
|
|
358
572
|
get selectedRange() {
|
|
359
|
-
return $
|
|
573
|
+
return $8.get(selectedRange);
|
|
360
574
|
},
|
|
361
575
|
get editingCell() {
|
|
362
|
-
return $
|
|
576
|
+
return $8.get(editingCell);
|
|
363
577
|
},
|
|
364
578
|
get draftValue() {
|
|
365
|
-
return $
|
|
579
|
+
return $8.get(draftValue);
|
|
366
580
|
},
|
|
367
581
|
set draftValue(val) {
|
|
368
|
-
$
|
|
582
|
+
$8.set(draftValue, val, true);
|
|
369
583
|
controller.draftValue = val;
|
|
370
584
|
},
|
|
371
585
|
controller,
|
|
@@ -374,124 +588,124 @@ function createReactiveSpreadsheet(options = {}) {
|
|
|
374
588
|
},
|
|
375
589
|
setCellValue(rowId, colId, raw) {
|
|
376
590
|
controller.setCellValue(rowId, colId, raw);
|
|
377
|
-
$
|
|
591
|
+
$8.set(doc, { ...controller.document }, true);
|
|
378
592
|
},
|
|
379
593
|
selectCell(row, col, extendSelection = false) {
|
|
380
594
|
controller.selectCell(row, col, extendSelection);
|
|
381
|
-
$
|
|
382
|
-
$
|
|
595
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
596
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
383
597
|
},
|
|
384
598
|
selectRange(range) {
|
|
385
599
|
controller.selectRange(range);
|
|
386
|
-
$
|
|
600
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
387
601
|
},
|
|
388
602
|
startEditing(row, col, initialVal) {
|
|
389
603
|
controller.startEditing(row, col, initialVal);
|
|
390
|
-
$
|
|
391
|
-
$
|
|
392
|
-
$
|
|
604
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
605
|
+
$8.set(editingCell, controller.editingCell, true);
|
|
606
|
+
$8.set(draftValue, controller.draftValue, true);
|
|
393
607
|
},
|
|
394
608
|
commitEditing(val) {
|
|
395
609
|
controller.commitEditing(val);
|
|
396
|
-
$
|
|
397
|
-
$
|
|
398
|
-
$
|
|
610
|
+
$8.set(editingCell, null);
|
|
611
|
+
$8.set(draftValue, "");
|
|
612
|
+
$8.set(doc, { ...controller.document }, true);
|
|
399
613
|
},
|
|
400
614
|
cancelEditing() {
|
|
401
615
|
controller.cancelEditing();
|
|
402
|
-
$
|
|
403
|
-
$
|
|
616
|
+
$8.set(editingCell, null);
|
|
617
|
+
$8.set(draftValue, "");
|
|
404
618
|
},
|
|
405
619
|
moveCursor(dir, extend = false) {
|
|
406
620
|
controller.moveCursor(dir, extend);
|
|
407
|
-
$
|
|
408
|
-
$
|
|
621
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
622
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
409
623
|
},
|
|
410
624
|
insertColumn(index2, config) {
|
|
411
625
|
controller.insertColumn(index2, config);
|
|
412
|
-
$
|
|
626
|
+
$8.set(doc, { ...controller.document }, true);
|
|
413
627
|
},
|
|
414
628
|
deleteColumn(colId) {
|
|
415
629
|
controller.deleteColumn(colId);
|
|
416
|
-
$
|
|
630
|
+
$8.set(doc, { ...controller.document }, true);
|
|
417
631
|
},
|
|
418
632
|
insertRow(index2, config) {
|
|
419
633
|
controller.insertRow(index2, config);
|
|
420
|
-
$
|
|
634
|
+
$8.set(doc, { ...controller.document }, true);
|
|
421
635
|
},
|
|
422
636
|
deleteRow(rowId) {
|
|
423
637
|
controller.deleteRow(rowId);
|
|
424
|
-
$
|
|
638
|
+
$8.set(doc, { ...controller.document }, true);
|
|
425
639
|
},
|
|
426
640
|
setColumnWidth(colId, width) {
|
|
427
641
|
controller.setColumnWidth(colId, width);
|
|
428
|
-
$
|
|
642
|
+
$8.set(doc, { ...controller.document }, true);
|
|
429
643
|
},
|
|
430
644
|
autoFitColumnWidth(colId, customWidth) {
|
|
431
645
|
controller.autoFitColumnWidth(colId, customWidth);
|
|
432
|
-
$
|
|
646
|
+
$8.set(doc, { ...controller.document }, true);
|
|
433
647
|
},
|
|
434
648
|
loadDocument(document2) {
|
|
435
649
|
controller.loadDocument(document2);
|
|
436
|
-
$
|
|
437
|
-
$
|
|
438
|
-
$
|
|
439
|
-
$
|
|
440
|
-
$
|
|
650
|
+
$8.set(doc, { ...controller.document }, true);
|
|
651
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
652
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
653
|
+
$8.set(editingCell, controller.editingCell, true);
|
|
654
|
+
$8.set(draftValue, controller.draftValue, true);
|
|
441
655
|
},
|
|
442
656
|
syncWithDataSource() {
|
|
443
657
|
controller.syncWithDataSource();
|
|
444
658
|
controller.recalculateAll();
|
|
445
|
-
$
|
|
659
|
+
$8.set(doc, { ...controller.document }, true);
|
|
446
660
|
},
|
|
447
661
|
registerDataSource(ds) {
|
|
448
662
|
controller.registerDataSource(ds);
|
|
449
|
-
$
|
|
663
|
+
$8.set(doc, { ...controller.document }, true);
|
|
450
664
|
},
|
|
451
665
|
setPrimaryDataSource(id) {
|
|
452
666
|
controller.setPrimaryDataSource(id);
|
|
453
|
-
$
|
|
667
|
+
$8.set(doc, { ...controller.document }, true);
|
|
454
668
|
},
|
|
455
669
|
recalculateAll() {
|
|
456
670
|
controller.recalculateAll();
|
|
457
|
-
$
|
|
671
|
+
$8.set(doc, { ...controller.document }, true);
|
|
458
672
|
},
|
|
459
673
|
exportToTsv() {
|
|
460
674
|
return controller.exportToTsv();
|
|
461
675
|
},
|
|
462
676
|
importFromTsv(data) {
|
|
463
677
|
controller.importFromTsv(data);
|
|
464
|
-
$
|
|
678
|
+
$8.set(doc, { ...controller.document }, true);
|
|
465
679
|
},
|
|
466
680
|
undo() {
|
|
467
681
|
controller.undo();
|
|
468
|
-
$
|
|
682
|
+
$8.set(doc, { ...controller.document }, true);
|
|
469
683
|
},
|
|
470
684
|
redo() {
|
|
471
685
|
controller.redo();
|
|
472
|
-
$
|
|
686
|
+
$8.set(doc, { ...controller.document }, true);
|
|
473
687
|
}
|
|
474
688
|
};
|
|
475
689
|
}
|
|
476
690
|
|
|
477
691
|
// src/spreadsheet/SpreadsheetEditor.svelte
|
|
478
|
-
var root5 = $
|
|
479
|
-
var root_13 = $
|
|
480
|
-
var root_22 = $
|
|
481
|
-
var root_32 = $
|
|
482
|
-
var root_42 = $
|
|
483
|
-
var root_5 = $
|
|
484
|
-
var root_6 = $
|
|
485
|
-
var root_7 = $
|
|
692
|
+
var root5 = $9.from_html(`<th><div class="flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate"><span class="truncate font-semibold text-foreground text-xs min-w-0"> </span> <span class="text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0"> </span></div> <div class="col-resize-handle svelte-m799ch" style="position: absolute; top: 0; bottom: 0; width: 12px; right: -6px; cursor: col-resize !important; z-index: 20; display: flex; justify-content: center; touch-action: none;" role="separator" aria-orientation="vertical" tabindex="-1"><div class="col-resize-handle-line svelte-m799ch"></div></div></th>`);
|
|
693
|
+
var root_13 = $9.from_html(`<th class="w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors svelte-m799ch" title="Add Column"><span class="text-xs font-bold text-muted-foreground">+</span></th>`);
|
|
694
|
+
var root_22 = $9.from_html(`<input type="text" class="absolute inset-0 w-full h-full px-2 py-1 bg-background text-foreground outline-none font-sans text-xs border-2 border-primary z-20"/>`);
|
|
695
|
+
var root_32 = $9.from_html(`<span> </span>`);
|
|
696
|
+
var root_42 = $9.from_html(`<td style="max-width: 0; overflow: hidden;"><!></td>`);
|
|
697
|
+
var root_5 = $9.from_html(`<td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border svelte-m799ch"></td>`);
|
|
698
|
+
var root_6 = $9.from_html(`<tr class="border-b border-border hover:bg-muted/10 transition-colors"><td class="w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none svelte-m799ch"> </td><!><!><td class="border-b border-border bg-transparent p-0 svelte-m799ch"></td></tr>`);
|
|
699
|
+
var root_7 = $9.from_html(`<div tabindex="0" role="grid" aria-label="Spreadsheet"><!> <div class="relative flex-1 overflow-auto"><table class="border-collapse table-fixed w-max min-w-full svelte-m799ch"><thead><tr class="h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs"><th class="w-12 min-w-[3rem] sticky left-0 z-30 bg-muted/90 border-r border-border text-center text-[10px] text-muted-foreground font-medium svelte-m799ch">#</th><!><!><th class="border-b border-border bg-transparent p-0 font-normal svelte-m799ch"></th></tr></thead><tbody></tbody></table></div></div>`);
|
|
486
700
|
function SpreadsheetEditor($$anchor, $$props) {
|
|
487
|
-
$
|
|
488
|
-
let sheetState = $
|
|
489
|
-
let isReadOnly = $
|
|
490
|
-
let gridContainer = $
|
|
491
|
-
let resizingColId = $
|
|
492
|
-
let hoveredColId = $
|
|
493
|
-
let resizeStartX = $
|
|
494
|
-
let resizeStartWidth = $
|
|
701
|
+
$9.push($$props, true);
|
|
702
|
+
let sheetState = $9.prop($$props, "sheetState", 23, createReactiveSpreadsheet), readOnly = $9.prop($$props, "readOnly", 3, false), readonly = $9.prop($$props, "readonly", 3, false), showFormulaBar = $9.prop($$props, "showFormulaBar", 3, true), className = $9.prop($$props, "class", 3, "");
|
|
703
|
+
let isReadOnly = $9.derived(() => readOnly() || readonly());
|
|
704
|
+
let gridContainer = $9.state(null);
|
|
705
|
+
let resizingColId = $9.state(null);
|
|
706
|
+
let hoveredColId = $9.state(null);
|
|
707
|
+
let resizeStartX = $9.state(0);
|
|
708
|
+
let resizeStartWidth = $9.state(0);
|
|
495
709
|
function handleCellClick(rIdx, cIdx, e) {
|
|
496
710
|
if (sheetState().editingCell && (sheetState().editingCell.row !== rIdx || sheetState().editingCell.col !== cIdx)) {
|
|
497
711
|
sheetState().commitEditing();
|
|
@@ -499,7 +713,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
499
713
|
sheetState().selectCell(rIdx, cIdx, e.shiftKey);
|
|
500
714
|
}
|
|
501
715
|
function handleCellDblClick(rIdx, cIdx) {
|
|
502
|
-
if ($
|
|
716
|
+
if ($9.get(isReadOnly)) return;
|
|
503
717
|
const col = sheetState().document.columns[cIdx];
|
|
504
718
|
if (col?.readOnly) return;
|
|
505
719
|
sheetState().startEditing(rIdx, cIdx);
|
|
@@ -537,11 +751,11 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
537
751
|
} else if (e.key === "Enter") {
|
|
538
752
|
e.preventDefault();
|
|
539
753
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
540
|
-
if (!$
|
|
754
|
+
if (!$9.get(isReadOnly) && !col?.readOnly) {
|
|
541
755
|
sheetState().startEditing();
|
|
542
756
|
}
|
|
543
757
|
} else if (e.key === "Backspace" || e.key === "Delete") {
|
|
544
|
-
if ($
|
|
758
|
+
if ($9.get(isReadOnly)) return;
|
|
545
759
|
const row = sheetState().document.rows[sheetState().activeCell.row];
|
|
546
760
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
547
761
|
if (row && col && !col.readOnly) {
|
|
@@ -559,7 +773,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
559
773
|
e.preventDefault();
|
|
560
774
|
const tsv = sheetState().exportToTsv();
|
|
561
775
|
navigator.clipboard?.writeText(tsv);
|
|
562
|
-
} else if (!$
|
|
776
|
+
} else if (!$9.get(isReadOnly) && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
|
|
563
777
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
564
778
|
if (!col?.readOnly) {
|
|
565
779
|
sheetState().startEditing(sheetState().activeCell.row, sheetState().activeCell.col, e.key);
|
|
@@ -569,9 +783,9 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
569
783
|
function handleResizeStart(colId, width, e) {
|
|
570
784
|
e.preventDefault();
|
|
571
785
|
e.stopPropagation();
|
|
572
|
-
$
|
|
573
|
-
$
|
|
574
|
-
$
|
|
786
|
+
$9.set(resizingColId, colId, true);
|
|
787
|
+
$9.set(resizeStartX, e.clientX, true);
|
|
788
|
+
$9.set(resizeStartWidth, width, true);
|
|
575
789
|
if (typeof document !== "undefined") {
|
|
576
790
|
document.body.style.cursor = "col-resize";
|
|
577
791
|
document.body.style.userSelect = "none";
|
|
@@ -580,17 +794,17 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
580
794
|
let pendingWidth = width;
|
|
581
795
|
let hasDragged = false;
|
|
582
796
|
const handleMouseMove = (moveEvent) => {
|
|
583
|
-
if (!$
|
|
584
|
-
const delta = moveEvent.clientX - $
|
|
797
|
+
if (!$9.get(resizingColId)) return;
|
|
798
|
+
const delta = moveEvent.clientX - $9.get(resizeStartX);
|
|
585
799
|
if (Math.abs(delta) > 2) {
|
|
586
800
|
hasDragged = true;
|
|
587
801
|
}
|
|
588
|
-
pendingWidth = Math.max(30, $
|
|
802
|
+
pendingWidth = Math.max(30, $9.get(resizeStartWidth) + delta);
|
|
589
803
|
if (rafId === null) {
|
|
590
804
|
rafId = requestAnimationFrame(() => {
|
|
591
805
|
rafId = null;
|
|
592
|
-
if ($
|
|
593
|
-
sheetState().setColumnWidth($
|
|
806
|
+
if ($9.get(resizingColId)) {
|
|
807
|
+
sheetState().setColumnWidth($9.get(resizingColId), pendingWidth);
|
|
594
808
|
}
|
|
595
809
|
});
|
|
596
810
|
}
|
|
@@ -600,14 +814,14 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
600
814
|
cancelAnimationFrame(rafId);
|
|
601
815
|
rafId = null;
|
|
602
816
|
}
|
|
603
|
-
if ($
|
|
604
|
-
sheetState().setColumnWidth($
|
|
605
|
-
const col = sheetState().document.columns.find((c) => c.id === $
|
|
817
|
+
if ($9.get(resizingColId) && hasDragged) {
|
|
818
|
+
sheetState().setColumnWidth($9.get(resizingColId), pendingWidth);
|
|
819
|
+
const col = sheetState().document.columns.find((c) => c.id === $9.get(resizingColId));
|
|
606
820
|
if (col && $$props.onColumnResize) {
|
|
607
821
|
$$props.onColumnResize(col.id, col.width || pendingWidth);
|
|
608
822
|
}
|
|
609
823
|
}
|
|
610
|
-
$
|
|
824
|
+
$9.set(resizingColId, null);
|
|
611
825
|
if (typeof document !== "undefined") {
|
|
612
826
|
document.body.style.cursor = "";
|
|
613
827
|
document.body.style.userSelect = "";
|
|
@@ -670,14 +884,14 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
670
884
|
const col = sheetState().document.columns.find((c) => c.id === colId);
|
|
671
885
|
if (!col) return;
|
|
672
886
|
let calculatedWidth = 0;
|
|
673
|
-
if ($
|
|
674
|
-
const table = $
|
|
887
|
+
if ($9.get(gridContainer) && typeof document !== "undefined") {
|
|
888
|
+
const table = $9.get(gridContainer).querySelector("table");
|
|
675
889
|
if (table) {
|
|
676
890
|
const thElements = table.querySelectorAll("thead th");
|
|
677
891
|
const th = thElements[colIndex + 1];
|
|
678
892
|
if (th) {
|
|
679
893
|
const headerInner = th.firstElementChild || th;
|
|
680
|
-
const headerW = measureElementContentWidth(headerInner, $
|
|
894
|
+
const headerW = measureElementContentWidth(headerInner, $9.get(gridContainer));
|
|
681
895
|
calculatedWidth = Math.max(calculatedWidth, headerW + 28);
|
|
682
896
|
}
|
|
683
897
|
const rows = table.querySelectorAll("tbody tr");
|
|
@@ -686,7 +900,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
686
900
|
const tr = rows[r];
|
|
687
901
|
const td = tr.children[colIndex + 1];
|
|
688
902
|
if (td) {
|
|
689
|
-
const cellW = measureElementContentWidth(td, $
|
|
903
|
+
const cellW = measureElementContentWidth(td, $9.get(gridContainer));
|
|
690
904
|
calculatedWidth = Math.max(calculatedWidth, cellW + 20);
|
|
691
905
|
}
|
|
692
906
|
}
|
|
@@ -731,7 +945,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
731
945
|
return sheetState().activeCell?.row === rIdx && sheetState().activeCell?.col === cIdx;
|
|
732
946
|
}
|
|
733
947
|
var div = root_7();
|
|
734
|
-
var node_1 = $
|
|
948
|
+
var node_1 = $9.child(div);
|
|
735
949
|
{
|
|
736
950
|
var consequent = ($$anchor2) => {
|
|
737
951
|
FormulaBar($$anchor2, {
|
|
@@ -740,137 +954,137 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
740
954
|
}
|
|
741
955
|
});
|
|
742
956
|
};
|
|
743
|
-
$
|
|
957
|
+
$9.if(node_1, ($$render) => {
|
|
744
958
|
if (showFormulaBar()) $$render(consequent);
|
|
745
959
|
});
|
|
746
960
|
}
|
|
747
|
-
var div_1 = $
|
|
748
|
-
var table_1 = $
|
|
749
|
-
var thead = $
|
|
750
|
-
var tr_1 = $
|
|
751
|
-
var node_2 = $
|
|
752
|
-
$
|
|
961
|
+
var div_1 = $9.sibling(node_1, 2);
|
|
962
|
+
var table_1 = $9.child(div_1);
|
|
963
|
+
var thead = $9.child(table_1);
|
|
964
|
+
var tr_1 = $9.child(thead);
|
|
965
|
+
var node_2 = $9.sibling($9.child(tr_1));
|
|
966
|
+
$9.each(node_2, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor2, col, cIdx) => {
|
|
753
967
|
var th_1 = root5();
|
|
754
|
-
var div_2 = $
|
|
755
|
-
var span = $
|
|
756
|
-
var text = $
|
|
757
|
-
var span_1 = $
|
|
758
|
-
var text_1 = $
|
|
759
|
-
$
|
|
760
|
-
var div_3 = $
|
|
761
|
-
var div_4 = $
|
|
762
|
-
$
|
|
763
|
-
$
|
|
764
|
-
$
|
|
765
|
-
$
|
|
766
|
-
$
|
|
767
|
-
$
|
|
768
|
-
$
|
|
968
|
+
var div_2 = $9.child(th_1);
|
|
969
|
+
var span = $9.child(div_2);
|
|
970
|
+
var text = $9.only_child(span, true);
|
|
971
|
+
var span_1 = $9.sibling(span, 2);
|
|
972
|
+
var text_1 = $9.only_child(span_1);
|
|
973
|
+
$9.reset(div_2);
|
|
974
|
+
var div_3 = $9.sibling(div_2, 2);
|
|
975
|
+
var div_4 = $9.only_child(div_3);
|
|
976
|
+
$9.reset(th_1);
|
|
977
|
+
$9.template_effect(() => {
|
|
978
|
+
$9.set_class(th_1, 1, `relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group overflow-hidden max-w-0 ${$$props.onColumnHeaderClick ? "cursor-pointer" : "cursor-default"}`, "svelte-m799ch");
|
|
979
|
+
$9.set_style(th_1, `width: ${($9.get(col).width || 130) ?? ""}px; min-width: ${($9.get(col).width || 130) ?? ""}px; max-width: ${($9.get(col).width || 130) ?? ""}px; overflow: hidden;`);
|
|
980
|
+
$9.set_text(text, $9.get(col).title);
|
|
981
|
+
$9.set_text(text_1, `(${$9.get(col).key ?? ""})`);
|
|
982
|
+
$9.set_style(div_4, `width: 2px; height: 100%; pointer-events: none; transition: background-color 150ms ease; background-color: ${$9.get(resizingColId) === $9.get(col).id ? "var(--primary, #6366f1)" : $9.get(hoveredColId) === $9.get(col).id ? "color-mix(in srgb, var(--primary, #6366f1) 75%, transparent)" : "transparent"};`);
|
|
769
983
|
});
|
|
770
|
-
$
|
|
771
|
-
$
|
|
772
|
-
$
|
|
773
|
-
$
|
|
774
|
-
if ($
|
|
984
|
+
$9.delegated("click", th_1, () => $$props.onColumnHeaderClick?.($9.get(col)));
|
|
985
|
+
$9.delegated("dblclick", th_1, (e) => handleHeaderDblClick($9.get(col).id, $9.get(cIdx), e));
|
|
986
|
+
$9.event("mouseenter", div_3, () => $9.set(hoveredColId, $9.get(col).id, true));
|
|
987
|
+
$9.event("mouseleave", div_3, () => {
|
|
988
|
+
if ($9.get(hoveredColId) === $9.get(col).id) $9.set(hoveredColId, null);
|
|
775
989
|
});
|
|
776
|
-
$
|
|
777
|
-
$
|
|
778
|
-
$
|
|
990
|
+
$9.delegated("mousedown", div_3, (e) => handleResizeStart($9.get(col).id, $9.get(col).width || 130, e));
|
|
991
|
+
$9.delegated("dblclick", div_3, (e) => handleResizeDblClick($9.get(col).id, $9.get(cIdx), e));
|
|
992
|
+
$9.append($$anchor2, th_1);
|
|
779
993
|
});
|
|
780
|
-
var node_3 = $
|
|
994
|
+
var node_3 = $9.sibling(node_2);
|
|
781
995
|
{
|
|
782
996
|
var consequent_1 = ($$anchor2) => {
|
|
783
997
|
var th_2 = root_13();
|
|
784
|
-
$
|
|
998
|
+
$9.delegated("click", th_2, function(...$$args) {
|
|
785
999
|
$$props.onAddColumnClick?.apply(this, $$args);
|
|
786
1000
|
});
|
|
787
|
-
$
|
|
1001
|
+
$9.append($$anchor2, th_2);
|
|
788
1002
|
};
|
|
789
|
-
$
|
|
1003
|
+
$9.if(node_3, ($$render) => {
|
|
790
1004
|
if ($$props.onAddColumnClick) $$render(consequent_1);
|
|
791
1005
|
});
|
|
792
1006
|
}
|
|
793
|
-
$
|
|
794
|
-
$
|
|
795
|
-
$
|
|
796
|
-
var tbody = $
|
|
797
|
-
$
|
|
1007
|
+
$9.next();
|
|
1008
|
+
$9.reset(tr_1);
|
|
1009
|
+
$9.reset(thead);
|
|
1010
|
+
var tbody = $9.sibling(thead);
|
|
1011
|
+
$9.each(tbody, 23, () => sheetState().document.rows, (row) => row.id, ($$anchor2, row, rIdx) => {
|
|
798
1012
|
var tr_2 = root_6();
|
|
799
|
-
var td_1 = $
|
|
800
|
-
var text_2 = $
|
|
801
|
-
var node_4 = $
|
|
802
|
-
$
|
|
803
|
-
const cell = $
|
|
804
|
-
const selected = $
|
|
805
|
-
const active = $
|
|
806
|
-
const isEditing = $
|
|
1013
|
+
var td_1 = $9.child(tr_2);
|
|
1014
|
+
var text_2 = $9.only_child(td_1, true);
|
|
1015
|
+
var node_4 = $9.sibling(td_1);
|
|
1016
|
+
$9.each(node_4, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor3, col, cIdx) => {
|
|
1017
|
+
const cell = $9.derived(() => sheetState().getCell($9.get(row).id, $9.get(col).id));
|
|
1018
|
+
const selected = $9.derived(() => isCellSelected($9.get(rIdx), $9.get(cIdx)));
|
|
1019
|
+
const active = $9.derived(() => isActiveCell($9.get(rIdx), $9.get(cIdx)));
|
|
1020
|
+
const isEditing = $9.derived(() => sheetState().editingCell?.row === $9.get(rIdx) && sheetState().editingCell?.col === $9.get(cIdx));
|
|
807
1021
|
var td_2 = root_42();
|
|
808
|
-
var node_5 = $
|
|
1022
|
+
var node_5 = $9.child(td_2);
|
|
809
1023
|
{
|
|
810
1024
|
var consequent_2 = ($$anchor4) => {
|
|
811
1025
|
var input = root_22();
|
|
812
|
-
$
|
|
813
|
-
$
|
|
814
|
-
$
|
|
815
|
-
$
|
|
1026
|
+
$9.remove_input_defaults(input);
|
|
1027
|
+
$9.event("blur", input, () => sheetState().commitEditing());
|
|
1028
|
+
$9.bind_value(input, () => sheetState().draftValue, ($$value) => sheetState().draftValue = $$value);
|
|
1029
|
+
$9.append($$anchor4, input);
|
|
816
1030
|
};
|
|
817
1031
|
var consequent_3 = ($$anchor4) => {
|
|
818
|
-
const cellArg = $
|
|
819
|
-
var fragment_1 = $
|
|
820
|
-
var node_6 = $
|
|
821
|
-
$
|
|
822
|
-
$
|
|
1032
|
+
const cellArg = $9.derived(() => Object.assign({ row: $9.get(row), col: $9.get(col), cell: $9.get(cell) }, $9.get(cell)));
|
|
1033
|
+
var fragment_1 = $9.comment();
|
|
1034
|
+
var node_6 = $9.first_child(fragment_1);
|
|
1035
|
+
$9.snippet(node_6, () => $$props.customCellRenderer, () => $9.get(cellArg), () => $9.get(col), () => $9.get(row));
|
|
1036
|
+
$9.append($$anchor4, fragment_1);
|
|
823
1037
|
};
|
|
824
1038
|
var alternate = ($$anchor4) => {
|
|
825
1039
|
var span_2 = root_32();
|
|
826
|
-
var text_3 = $
|
|
827
|
-
$
|
|
828
|
-
$
|
|
829
|
-
$
|
|
1040
|
+
var text_3 = $9.only_child(span_2, true);
|
|
1041
|
+
$9.template_effect(() => {
|
|
1042
|
+
$9.set_class(span_2, 1, `truncate block max-w-full ${$9.get(cell).error ? "text-destructive font-semibold" : ""}`);
|
|
1043
|
+
$9.set_text(text_3, $9.get(cell).error || ($9.get(cell).value ?? ""));
|
|
830
1044
|
});
|
|
831
|
-
$
|
|
1045
|
+
$9.append($$anchor4, span_2);
|
|
832
1046
|
};
|
|
833
|
-
$
|
|
834
|
-
if ($
|
|
1047
|
+
$9.if(node_5, ($$render) => {
|
|
1048
|
+
if ($9.get(isEditing)) $$render(consequent_2);
|
|
835
1049
|
else if ($$props.customCellRenderer) $$render(consequent_3, 1);
|
|
836
1050
|
else $$render(alternate, -1);
|
|
837
1051
|
});
|
|
838
1052
|
}
|
|
839
|
-
$
|
|
840
|
-
$
|
|
841
|
-
$
|
|
842
|
-
$
|
|
843
|
-
$
|
|
1053
|
+
$9.reset(td_2);
|
|
1054
|
+
$9.template_effect(() => $9.set_class(td_2, 1, `relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors ${$9.get(selected) ? "bg-primary/10" : ""} ${$9.get(active) ? "ring-2 ring-primary ring-inset z-10" : ""}`, "svelte-m799ch"));
|
|
1055
|
+
$9.delegated("click", td_2, (e) => handleCellClick($9.get(rIdx), $9.get(cIdx), e));
|
|
1056
|
+
$9.delegated("dblclick", td_2, () => handleCellDblClick($9.get(rIdx), $9.get(cIdx)));
|
|
1057
|
+
$9.append($$anchor3, td_2);
|
|
844
1058
|
});
|
|
845
|
-
var node_7 = $
|
|
1059
|
+
var node_7 = $9.sibling(node_4);
|
|
846
1060
|
{
|
|
847
1061
|
var consequent_4 = ($$anchor3) => {
|
|
848
1062
|
var td_3 = root_5();
|
|
849
|
-
$
|
|
1063
|
+
$9.append($$anchor3, td_3);
|
|
850
1064
|
};
|
|
851
|
-
$
|
|
1065
|
+
$9.if(node_7, ($$render) => {
|
|
852
1066
|
if ($$props.onAddColumnClick) $$render(consequent_4);
|
|
853
1067
|
});
|
|
854
1068
|
}
|
|
855
|
-
$
|
|
856
|
-
$
|
|
857
|
-
$
|
|
858
|
-
$
|
|
859
|
-
$
|
|
1069
|
+
$9.next();
|
|
1070
|
+
$9.reset(tr_2);
|
|
1071
|
+
$9.template_effect(() => {
|
|
1072
|
+
$9.set_style(tr_2, `height: ${($9.get(row).height || 32) ?? ""}px;`);
|
|
1073
|
+
$9.set_text(text_2, $9.get(rIdx) + 1);
|
|
860
1074
|
});
|
|
861
|
-
$
|
|
1075
|
+
$9.append($$anchor2, tr_2);
|
|
862
1076
|
});
|
|
863
|
-
$
|
|
864
|
-
$
|
|
865
|
-
$
|
|
866
|
-
$
|
|
867
|
-
$
|
|
868
|
-
$
|
|
869
|
-
$
|
|
870
|
-
$
|
|
871
|
-
$
|
|
1077
|
+
$9.reset(tbody);
|
|
1078
|
+
$9.reset(table_1);
|
|
1079
|
+
$9.reset(div_1);
|
|
1080
|
+
$9.reset(div);
|
|
1081
|
+
$9.bind_this(div, ($$value) => $9.set(gridContainer, $$value), () => $9.get(gridContainer));
|
|
1082
|
+
$9.template_effect(() => $9.set_class(div, 1, `flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs ${className() ?? ""}`, "svelte-m799ch"));
|
|
1083
|
+
$9.delegated("keydown", div, handleKeyDown);
|
|
1084
|
+
$9.append($$anchor, div);
|
|
1085
|
+
$9.pop();
|
|
872
1086
|
}
|
|
873
|
-
$
|
|
1087
|
+
$9.delegate(["keydown", "click", "dblclick", "mousedown"]);
|
|
874
1088
|
|
|
875
1089
|
// src/index.ts
|
|
876
1090
|
var EditableTextNodeEditor2 = EditableTextNodeEditor;
|
|
@@ -878,12 +1092,21 @@ var BubbleMenu2 = BubbleMenu;
|
|
|
878
1092
|
var TemplateRenderer2 = TemplateRenderer;
|
|
879
1093
|
export {
|
|
880
1094
|
BubbleMenu2 as BubbleMenu,
|
|
1095
|
+
DirtyTracker,
|
|
881
1096
|
EditableTextNodeEditor2 as EditableTextNodeEditor,
|
|
882
1097
|
FormulaBar,
|
|
1098
|
+
HistoryManager2 as HistoryManager,
|
|
883
1099
|
SpreadsheetEditor,
|
|
884
1100
|
TemplateRenderer2 as TemplateRenderer,
|
|
1101
|
+
createDirtyTracker,
|
|
1102
|
+
createHistory,
|
|
1103
|
+
createHistoryManager2 as createHistoryManager,
|
|
1104
|
+
createHistoryShortcuts,
|
|
1105
|
+
createNavigationGuard,
|
|
885
1106
|
createReactiveEditor,
|
|
886
1107
|
createReactiveSpreadsheet,
|
|
887
|
-
|
|
1108
|
+
defaultIsEqual,
|
|
1109
|
+
initiateEditor,
|
|
1110
|
+
navigationGuard
|
|
888
1111
|
};
|
|
889
1112
|
//# sourceMappingURL=index.js.map
|