@pixerate/editor-svelte 0.9.0 → 0.10.1
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 +34 -1
- package/dist/index.js +306 -203
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- 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 +34 -1
- package/src/index.ts +9 -1
package/dist/index.js
CHANGED
|
@@ -337,36 +337,135 @@ function createNavigationGuard(options) {
|
|
|
337
337
|
};
|
|
338
338
|
}
|
|
339
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
|
+
|
|
340
437
|
// src/index.ts
|
|
341
438
|
import {
|
|
342
439
|
DirtyTracker,
|
|
343
440
|
createDirtyTracker,
|
|
344
|
-
defaultIsEqual
|
|
441
|
+
defaultIsEqual,
|
|
442
|
+
HistoryManager as HistoryManager2,
|
|
443
|
+
createHistoryManager as createHistoryManager2
|
|
345
444
|
} from "@pixerate/editor";
|
|
346
445
|
|
|
347
446
|
// src/spreadsheet/SpreadsheetEditor.svelte
|
|
348
447
|
import "svelte/internal/disclose-version";
|
|
349
|
-
import * as $
|
|
448
|
+
import * as $9 from "svelte/internal/client";
|
|
350
449
|
import { indexToColName as indexToColName2 } from "@pixerate/editor";
|
|
351
450
|
|
|
352
451
|
// src/spreadsheet/FormulaBar.svelte
|
|
353
452
|
import "svelte/internal/disclose-version";
|
|
354
|
-
import * as $
|
|
453
|
+
import * as $7 from "svelte/internal/client";
|
|
355
454
|
import { indexToColName } from "@pixerate/editor";
|
|
356
|
-
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>`);
|
|
357
456
|
function FormulaBar($$anchor, $$props) {
|
|
358
|
-
$
|
|
359
|
-
let sheetState = $
|
|
360
|
-
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(() => {
|
|
361
460
|
if (sheetState()) return sheetState().activeCell;
|
|
362
461
|
return activeCoord();
|
|
363
462
|
});
|
|
364
|
-
let coordLabel = $
|
|
365
|
-
if (!$
|
|
366
|
-
const colName = indexToColName($
|
|
367
|
-
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}`;
|
|
368
467
|
});
|
|
369
|
-
let effectiveValue = $
|
|
468
|
+
let effectiveValue = $7.derived(() => {
|
|
370
469
|
if (sheetState()) {
|
|
371
470
|
if (sheetState().editingCell) return sheetState().draftValue;
|
|
372
471
|
if (!sheetState().activeCell) return "";
|
|
@@ -384,11 +483,11 @@ function FormulaBar($$anchor, $$props) {
|
|
|
384
483
|
const row = sheetState().document.rows[sheetState().activeCell.row];
|
|
385
484
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
386
485
|
if (row && col) {
|
|
387
|
-
sheetState().setCellValue(row.id, col.id, $
|
|
486
|
+
sheetState().setCellValue(row.id, col.id, $7.get(effectiveValue));
|
|
388
487
|
}
|
|
389
488
|
sheetState().commitEditing();
|
|
390
489
|
}
|
|
391
|
-
$$props.onCommit?.($
|
|
490
|
+
$$props.onCommit?.($7.get(effectiveValue));
|
|
392
491
|
} else if (e.key === "Escape") {
|
|
393
492
|
e.preventDefault();
|
|
394
493
|
if (sheetState()) {
|
|
@@ -410,28 +509,28 @@ function FormulaBar($$anchor, $$props) {
|
|
|
410
509
|
$$props.onChange?.(target.value);
|
|
411
510
|
}
|
|
412
511
|
var div = root4();
|
|
413
|
-
var div_1 = $
|
|
414
|
-
var text = $
|
|
415
|
-
var input = $
|
|
416
|
-
$
|
|
417
|
-
$
|
|
418
|
-
$
|
|
419
|
-
$
|
|
420
|
-
$
|
|
421
|
-
$
|
|
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));
|
|
422
521
|
});
|
|
423
|
-
$
|
|
424
|
-
$
|
|
425
|
-
$
|
|
426
|
-
$
|
|
522
|
+
$7.delegated("input", input, handleInput);
|
|
523
|
+
$7.delegated("keydown", input, handleKeyDown);
|
|
524
|
+
$7.append($$anchor, div);
|
|
525
|
+
$7.pop();
|
|
427
526
|
}
|
|
428
|
-
$
|
|
527
|
+
$7.delegate(["input", "keydown"]);
|
|
429
528
|
|
|
430
529
|
// src/spreadsheet/spreadsheet.svelte.ts
|
|
431
|
-
import * as $
|
|
530
|
+
import * as $8 from "svelte/internal/client";
|
|
432
531
|
import { SpreadsheetController } from "@pixerate/editor";
|
|
433
532
|
function createReactiveSpreadsheet(options = {}) {
|
|
434
|
-
let doc = $
|
|
533
|
+
let doc = $8.state($8.proxy({
|
|
435
534
|
id: options.document?.id || `sheet_${Date.now()}`,
|
|
436
535
|
name: options.document?.name || "Sheet 1",
|
|
437
536
|
columns: options.document?.columns || [],
|
|
@@ -440,47 +539,47 @@ function createReactiveSpreadsheet(options = {}) {
|
|
|
440
539
|
createdAt: options.document?.createdAt || Date.now(),
|
|
441
540
|
updatedAt: options.document?.updatedAt || Date.now()
|
|
442
541
|
}));
|
|
443
|
-
let activeCell = $
|
|
444
|
-
let selectedRange = $
|
|
445
|
-
let editingCell = $
|
|
446
|
-
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("");
|
|
447
546
|
const controller = new SpreadsheetController({
|
|
448
547
|
...options,
|
|
449
548
|
document: options.document,
|
|
450
549
|
onDocumentChange: (updated) => {
|
|
451
|
-
$
|
|
550
|
+
$8.set(doc, { ...updated }, true);
|
|
452
551
|
options.onDocumentChange?.(updated);
|
|
453
552
|
},
|
|
454
553
|
onSelectionChange: (active, range) => {
|
|
455
|
-
$
|
|
456
|
-
$
|
|
554
|
+
$8.set(activeCell, active, true);
|
|
555
|
+
$8.set(selectedRange, range, true);
|
|
457
556
|
options.onSelectionChange?.(active, range);
|
|
458
557
|
},
|
|
459
558
|
onCellCommit: (rowId, colId, raw, value) => {
|
|
460
559
|
options.onCellCommit?.(rowId, colId, raw, value);
|
|
461
560
|
}
|
|
462
561
|
});
|
|
463
|
-
$
|
|
464
|
-
$
|
|
465
|
-
$
|
|
562
|
+
$8.set(doc, { ...controller.document }, true);
|
|
563
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
564
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
466
565
|
return {
|
|
467
566
|
get document() {
|
|
468
|
-
return $
|
|
567
|
+
return $8.get(doc);
|
|
469
568
|
},
|
|
470
569
|
get activeCell() {
|
|
471
|
-
return $
|
|
570
|
+
return $8.get(activeCell);
|
|
472
571
|
},
|
|
473
572
|
get selectedRange() {
|
|
474
|
-
return $
|
|
573
|
+
return $8.get(selectedRange);
|
|
475
574
|
},
|
|
476
575
|
get editingCell() {
|
|
477
|
-
return $
|
|
576
|
+
return $8.get(editingCell);
|
|
478
577
|
},
|
|
479
578
|
get draftValue() {
|
|
480
|
-
return $
|
|
579
|
+
return $8.get(draftValue);
|
|
481
580
|
},
|
|
482
581
|
set draftValue(val) {
|
|
483
|
-
$
|
|
582
|
+
$8.set(draftValue, val, true);
|
|
484
583
|
controller.draftValue = val;
|
|
485
584
|
},
|
|
486
585
|
controller,
|
|
@@ -489,124 +588,124 @@ function createReactiveSpreadsheet(options = {}) {
|
|
|
489
588
|
},
|
|
490
589
|
setCellValue(rowId, colId, raw) {
|
|
491
590
|
controller.setCellValue(rowId, colId, raw);
|
|
492
|
-
$
|
|
591
|
+
$8.set(doc, { ...controller.document }, true);
|
|
493
592
|
},
|
|
494
593
|
selectCell(row, col, extendSelection = false) {
|
|
495
594
|
controller.selectCell(row, col, extendSelection);
|
|
496
|
-
$
|
|
497
|
-
$
|
|
595
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
596
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
498
597
|
},
|
|
499
598
|
selectRange(range) {
|
|
500
599
|
controller.selectRange(range);
|
|
501
|
-
$
|
|
600
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
502
601
|
},
|
|
503
602
|
startEditing(row, col, initialVal) {
|
|
504
603
|
controller.startEditing(row, col, initialVal);
|
|
505
|
-
$
|
|
506
|
-
$
|
|
507
|
-
$
|
|
604
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
605
|
+
$8.set(editingCell, controller.editingCell, true);
|
|
606
|
+
$8.set(draftValue, controller.draftValue, true);
|
|
508
607
|
},
|
|
509
608
|
commitEditing(val) {
|
|
510
609
|
controller.commitEditing(val);
|
|
511
|
-
$
|
|
512
|
-
$
|
|
513
|
-
$
|
|
610
|
+
$8.set(editingCell, null);
|
|
611
|
+
$8.set(draftValue, "");
|
|
612
|
+
$8.set(doc, { ...controller.document }, true);
|
|
514
613
|
},
|
|
515
614
|
cancelEditing() {
|
|
516
615
|
controller.cancelEditing();
|
|
517
|
-
$
|
|
518
|
-
$
|
|
616
|
+
$8.set(editingCell, null);
|
|
617
|
+
$8.set(draftValue, "");
|
|
519
618
|
},
|
|
520
619
|
moveCursor(dir, extend = false) {
|
|
521
620
|
controller.moveCursor(dir, extend);
|
|
522
|
-
$
|
|
523
|
-
$
|
|
621
|
+
$8.set(activeCell, controller.activeCell, true);
|
|
622
|
+
$8.set(selectedRange, controller.selectedRange, true);
|
|
524
623
|
},
|
|
525
624
|
insertColumn(index2, config) {
|
|
526
625
|
controller.insertColumn(index2, config);
|
|
527
|
-
$
|
|
626
|
+
$8.set(doc, { ...controller.document }, true);
|
|
528
627
|
},
|
|
529
628
|
deleteColumn(colId) {
|
|
530
629
|
controller.deleteColumn(colId);
|
|
531
|
-
$
|
|
630
|
+
$8.set(doc, { ...controller.document }, true);
|
|
532
631
|
},
|
|
533
632
|
insertRow(index2, config) {
|
|
534
633
|
controller.insertRow(index2, config);
|
|
535
|
-
$
|
|
634
|
+
$8.set(doc, { ...controller.document }, true);
|
|
536
635
|
},
|
|
537
636
|
deleteRow(rowId) {
|
|
538
637
|
controller.deleteRow(rowId);
|
|
539
|
-
$
|
|
638
|
+
$8.set(doc, { ...controller.document }, true);
|
|
540
639
|
},
|
|
541
640
|
setColumnWidth(colId, width) {
|
|
542
641
|
controller.setColumnWidth(colId, width);
|
|
543
|
-
$
|
|
642
|
+
$8.set(doc, { ...controller.document }, true);
|
|
544
643
|
},
|
|
545
644
|
autoFitColumnWidth(colId, customWidth) {
|
|
546
645
|
controller.autoFitColumnWidth(colId, customWidth);
|
|
547
|
-
$
|
|
646
|
+
$8.set(doc, { ...controller.document }, true);
|
|
548
647
|
},
|
|
549
648
|
loadDocument(document2) {
|
|
550
649
|
controller.loadDocument(document2);
|
|
551
|
-
$
|
|
552
|
-
$
|
|
553
|
-
$
|
|
554
|
-
$
|
|
555
|
-
$
|
|
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);
|
|
556
655
|
},
|
|
557
656
|
syncWithDataSource() {
|
|
558
657
|
controller.syncWithDataSource();
|
|
559
658
|
controller.recalculateAll();
|
|
560
|
-
$
|
|
659
|
+
$8.set(doc, { ...controller.document }, true);
|
|
561
660
|
},
|
|
562
661
|
registerDataSource(ds) {
|
|
563
662
|
controller.registerDataSource(ds);
|
|
564
|
-
$
|
|
663
|
+
$8.set(doc, { ...controller.document }, true);
|
|
565
664
|
},
|
|
566
665
|
setPrimaryDataSource(id) {
|
|
567
666
|
controller.setPrimaryDataSource(id);
|
|
568
|
-
$
|
|
667
|
+
$8.set(doc, { ...controller.document }, true);
|
|
569
668
|
},
|
|
570
669
|
recalculateAll() {
|
|
571
670
|
controller.recalculateAll();
|
|
572
|
-
$
|
|
671
|
+
$8.set(doc, { ...controller.document }, true);
|
|
573
672
|
},
|
|
574
673
|
exportToTsv() {
|
|
575
674
|
return controller.exportToTsv();
|
|
576
675
|
},
|
|
577
676
|
importFromTsv(data) {
|
|
578
677
|
controller.importFromTsv(data);
|
|
579
|
-
$
|
|
678
|
+
$8.set(doc, { ...controller.document }, true);
|
|
580
679
|
},
|
|
581
680
|
undo() {
|
|
582
681
|
controller.undo();
|
|
583
|
-
$
|
|
682
|
+
$8.set(doc, { ...controller.document }, true);
|
|
584
683
|
},
|
|
585
684
|
redo() {
|
|
586
685
|
controller.redo();
|
|
587
|
-
$
|
|
686
|
+
$8.set(doc, { ...controller.document }, true);
|
|
588
687
|
}
|
|
589
688
|
};
|
|
590
689
|
}
|
|
591
690
|
|
|
592
691
|
// src/spreadsheet/SpreadsheetEditor.svelte
|
|
593
|
-
var root5 = $
|
|
594
|
-
var root_13 = $
|
|
595
|
-
var root_22 = $
|
|
596
|
-
var root_32 = $
|
|
597
|
-
var root_42 = $
|
|
598
|
-
var root_5 = $
|
|
599
|
-
var root_6 = $
|
|
600
|
-
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>`);
|
|
601
700
|
function SpreadsheetEditor($$anchor, $$props) {
|
|
602
|
-
$
|
|
603
|
-
let sheetState = $
|
|
604
|
-
let isReadOnly = $
|
|
605
|
-
let gridContainer = $
|
|
606
|
-
let resizingColId = $
|
|
607
|
-
let hoveredColId = $
|
|
608
|
-
let resizeStartX = $
|
|
609
|
-
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);
|
|
610
709
|
function handleCellClick(rIdx, cIdx, e) {
|
|
611
710
|
if (sheetState().editingCell && (sheetState().editingCell.row !== rIdx || sheetState().editingCell.col !== cIdx)) {
|
|
612
711
|
sheetState().commitEditing();
|
|
@@ -614,7 +713,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
614
713
|
sheetState().selectCell(rIdx, cIdx, e.shiftKey);
|
|
615
714
|
}
|
|
616
715
|
function handleCellDblClick(rIdx, cIdx) {
|
|
617
|
-
if ($
|
|
716
|
+
if ($9.get(isReadOnly)) return;
|
|
618
717
|
const col = sheetState().document.columns[cIdx];
|
|
619
718
|
if (col?.readOnly) return;
|
|
620
719
|
sheetState().startEditing(rIdx, cIdx);
|
|
@@ -652,11 +751,11 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
652
751
|
} else if (e.key === "Enter") {
|
|
653
752
|
e.preventDefault();
|
|
654
753
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
655
|
-
if (!$
|
|
754
|
+
if (!$9.get(isReadOnly) && !col?.readOnly) {
|
|
656
755
|
sheetState().startEditing();
|
|
657
756
|
}
|
|
658
757
|
} else if (e.key === "Backspace" || e.key === "Delete") {
|
|
659
|
-
if ($
|
|
758
|
+
if ($9.get(isReadOnly)) return;
|
|
660
759
|
const row = sheetState().document.rows[sheetState().activeCell.row];
|
|
661
760
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
662
761
|
if (row && col && !col.readOnly) {
|
|
@@ -674,7 +773,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
674
773
|
e.preventDefault();
|
|
675
774
|
const tsv = sheetState().exportToTsv();
|
|
676
775
|
navigator.clipboard?.writeText(tsv);
|
|
677
|
-
} else if (!$
|
|
776
|
+
} else if (!$9.get(isReadOnly) && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
|
|
678
777
|
const col = sheetState().document.columns[sheetState().activeCell.col];
|
|
679
778
|
if (!col?.readOnly) {
|
|
680
779
|
sheetState().startEditing(sheetState().activeCell.row, sheetState().activeCell.col, e.key);
|
|
@@ -684,9 +783,9 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
684
783
|
function handleResizeStart(colId, width, e) {
|
|
685
784
|
e.preventDefault();
|
|
686
785
|
e.stopPropagation();
|
|
687
|
-
$
|
|
688
|
-
$
|
|
689
|
-
$
|
|
786
|
+
$9.set(resizingColId, colId, true);
|
|
787
|
+
$9.set(resizeStartX, e.clientX, true);
|
|
788
|
+
$9.set(resizeStartWidth, width, true);
|
|
690
789
|
if (typeof document !== "undefined") {
|
|
691
790
|
document.body.style.cursor = "col-resize";
|
|
692
791
|
document.body.style.userSelect = "none";
|
|
@@ -695,17 +794,17 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
695
794
|
let pendingWidth = width;
|
|
696
795
|
let hasDragged = false;
|
|
697
796
|
const handleMouseMove = (moveEvent) => {
|
|
698
|
-
if (!$
|
|
699
|
-
const delta = moveEvent.clientX - $
|
|
797
|
+
if (!$9.get(resizingColId)) return;
|
|
798
|
+
const delta = moveEvent.clientX - $9.get(resizeStartX);
|
|
700
799
|
if (Math.abs(delta) > 2) {
|
|
701
800
|
hasDragged = true;
|
|
702
801
|
}
|
|
703
|
-
pendingWidth = Math.max(30, $
|
|
802
|
+
pendingWidth = Math.max(30, $9.get(resizeStartWidth) + delta);
|
|
704
803
|
if (rafId === null) {
|
|
705
804
|
rafId = requestAnimationFrame(() => {
|
|
706
805
|
rafId = null;
|
|
707
|
-
if ($
|
|
708
|
-
sheetState().setColumnWidth($
|
|
806
|
+
if ($9.get(resizingColId)) {
|
|
807
|
+
sheetState().setColumnWidth($9.get(resizingColId), pendingWidth);
|
|
709
808
|
}
|
|
710
809
|
});
|
|
711
810
|
}
|
|
@@ -715,14 +814,14 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
715
814
|
cancelAnimationFrame(rafId);
|
|
716
815
|
rafId = null;
|
|
717
816
|
}
|
|
718
|
-
if ($
|
|
719
|
-
sheetState().setColumnWidth($
|
|
720
|
-
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));
|
|
721
820
|
if (col && $$props.onColumnResize) {
|
|
722
821
|
$$props.onColumnResize(col.id, col.width || pendingWidth);
|
|
723
822
|
}
|
|
724
823
|
}
|
|
725
|
-
$
|
|
824
|
+
$9.set(resizingColId, null);
|
|
726
825
|
if (typeof document !== "undefined") {
|
|
727
826
|
document.body.style.cursor = "";
|
|
728
827
|
document.body.style.userSelect = "";
|
|
@@ -785,14 +884,14 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
785
884
|
const col = sheetState().document.columns.find((c) => c.id === colId);
|
|
786
885
|
if (!col) return;
|
|
787
886
|
let calculatedWidth = 0;
|
|
788
|
-
if ($
|
|
789
|
-
const table = $
|
|
887
|
+
if ($9.get(gridContainer) && typeof document !== "undefined") {
|
|
888
|
+
const table = $9.get(gridContainer).querySelector("table");
|
|
790
889
|
if (table) {
|
|
791
890
|
const thElements = table.querySelectorAll("thead th");
|
|
792
891
|
const th = thElements[colIndex + 1];
|
|
793
892
|
if (th) {
|
|
794
893
|
const headerInner = th.firstElementChild || th;
|
|
795
|
-
const headerW = measureElementContentWidth(headerInner, $
|
|
894
|
+
const headerW = measureElementContentWidth(headerInner, $9.get(gridContainer));
|
|
796
895
|
calculatedWidth = Math.max(calculatedWidth, headerW + 28);
|
|
797
896
|
}
|
|
798
897
|
const rows = table.querySelectorAll("tbody tr");
|
|
@@ -801,7 +900,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
801
900
|
const tr = rows[r];
|
|
802
901
|
const td = tr.children[colIndex + 1];
|
|
803
902
|
if (td) {
|
|
804
|
-
const cellW = measureElementContentWidth(td, $
|
|
903
|
+
const cellW = measureElementContentWidth(td, $9.get(gridContainer));
|
|
805
904
|
calculatedWidth = Math.max(calculatedWidth, cellW + 20);
|
|
806
905
|
}
|
|
807
906
|
}
|
|
@@ -846,7 +945,7 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
846
945
|
return sheetState().activeCell?.row === rIdx && sheetState().activeCell?.col === cIdx;
|
|
847
946
|
}
|
|
848
947
|
var div = root_7();
|
|
849
|
-
var node_1 = $
|
|
948
|
+
var node_1 = $9.child(div);
|
|
850
949
|
{
|
|
851
950
|
var consequent = ($$anchor2) => {
|
|
852
951
|
FormulaBar($$anchor2, {
|
|
@@ -855,137 +954,137 @@ function SpreadsheetEditor($$anchor, $$props) {
|
|
|
855
954
|
}
|
|
856
955
|
});
|
|
857
956
|
};
|
|
858
|
-
$
|
|
957
|
+
$9.if(node_1, ($$render) => {
|
|
859
958
|
if (showFormulaBar()) $$render(consequent);
|
|
860
959
|
});
|
|
861
960
|
}
|
|
862
|
-
var div_1 = $
|
|
863
|
-
var table_1 = $
|
|
864
|
-
var thead = $
|
|
865
|
-
var tr_1 = $
|
|
866
|
-
var node_2 = $
|
|
867
|
-
$
|
|
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) => {
|
|
868
967
|
var th_1 = root5();
|
|
869
|
-
var div_2 = $
|
|
870
|
-
var span = $
|
|
871
|
-
var text = $
|
|
872
|
-
var span_1 = $
|
|
873
|
-
var text_1 = $
|
|
874
|
-
$
|
|
875
|
-
var div_3 = $
|
|
876
|
-
var div_4 = $
|
|
877
|
-
$
|
|
878
|
-
$
|
|
879
|
-
$
|
|
880
|
-
$
|
|
881
|
-
$
|
|
882
|
-
$
|
|
883
|
-
$
|
|
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"};`);
|
|
884
983
|
});
|
|
885
|
-
$
|
|
886
|
-
$
|
|
887
|
-
$
|
|
888
|
-
$
|
|
889
|
-
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);
|
|
890
989
|
});
|
|
891
|
-
$
|
|
892
|
-
$
|
|
893
|
-
$
|
|
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);
|
|
894
993
|
});
|
|
895
|
-
var node_3 = $
|
|
994
|
+
var node_3 = $9.sibling(node_2);
|
|
896
995
|
{
|
|
897
996
|
var consequent_1 = ($$anchor2) => {
|
|
898
997
|
var th_2 = root_13();
|
|
899
|
-
$
|
|
998
|
+
$9.delegated("click", th_2, function(...$$args) {
|
|
900
999
|
$$props.onAddColumnClick?.apply(this, $$args);
|
|
901
1000
|
});
|
|
902
|
-
$
|
|
1001
|
+
$9.append($$anchor2, th_2);
|
|
903
1002
|
};
|
|
904
|
-
$
|
|
1003
|
+
$9.if(node_3, ($$render) => {
|
|
905
1004
|
if ($$props.onAddColumnClick) $$render(consequent_1);
|
|
906
1005
|
});
|
|
907
1006
|
}
|
|
908
|
-
$
|
|
909
|
-
$
|
|
910
|
-
$
|
|
911
|
-
var tbody = $
|
|
912
|
-
$
|
|
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) => {
|
|
913
1012
|
var tr_2 = root_6();
|
|
914
|
-
var td_1 = $
|
|
915
|
-
var text_2 = $
|
|
916
|
-
var node_4 = $
|
|
917
|
-
$
|
|
918
|
-
const cell = $
|
|
919
|
-
const selected = $
|
|
920
|
-
const active = $
|
|
921
|
-
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));
|
|
922
1021
|
var td_2 = root_42();
|
|
923
|
-
var node_5 = $
|
|
1022
|
+
var node_5 = $9.child(td_2);
|
|
924
1023
|
{
|
|
925
1024
|
var consequent_2 = ($$anchor4) => {
|
|
926
1025
|
var input = root_22();
|
|
927
|
-
$
|
|
928
|
-
$
|
|
929
|
-
$
|
|
930
|
-
$
|
|
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);
|
|
931
1030
|
};
|
|
932
1031
|
var consequent_3 = ($$anchor4) => {
|
|
933
|
-
const cellArg = $
|
|
934
|
-
var fragment_1 = $
|
|
935
|
-
var node_6 = $
|
|
936
|
-
$
|
|
937
|
-
$
|
|
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);
|
|
938
1037
|
};
|
|
939
1038
|
var alternate = ($$anchor4) => {
|
|
940
1039
|
var span_2 = root_32();
|
|
941
|
-
var text_3 = $
|
|
942
|
-
$
|
|
943
|
-
$
|
|
944
|
-
$
|
|
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 ?? ""));
|
|
945
1044
|
});
|
|
946
|
-
$
|
|
1045
|
+
$9.append($$anchor4, span_2);
|
|
947
1046
|
};
|
|
948
|
-
$
|
|
949
|
-
if ($
|
|
1047
|
+
$9.if(node_5, ($$render) => {
|
|
1048
|
+
if ($9.get(isEditing)) $$render(consequent_2);
|
|
950
1049
|
else if ($$props.customCellRenderer) $$render(consequent_3, 1);
|
|
951
1050
|
else $$render(alternate, -1);
|
|
952
1051
|
});
|
|
953
1052
|
}
|
|
954
|
-
$
|
|
955
|
-
$
|
|
956
|
-
$
|
|
957
|
-
$
|
|
958
|
-
$
|
|
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);
|
|
959
1058
|
});
|
|
960
|
-
var node_7 = $
|
|
1059
|
+
var node_7 = $9.sibling(node_4);
|
|
961
1060
|
{
|
|
962
1061
|
var consequent_4 = ($$anchor3) => {
|
|
963
1062
|
var td_3 = root_5();
|
|
964
|
-
$
|
|
1063
|
+
$9.append($$anchor3, td_3);
|
|
965
1064
|
};
|
|
966
|
-
$
|
|
1065
|
+
$9.if(node_7, ($$render) => {
|
|
967
1066
|
if ($$props.onAddColumnClick) $$render(consequent_4);
|
|
968
1067
|
});
|
|
969
1068
|
}
|
|
970
|
-
$
|
|
971
|
-
$
|
|
972
|
-
$
|
|
973
|
-
$
|
|
974
|
-
$
|
|
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);
|
|
975
1074
|
});
|
|
976
|
-
$
|
|
1075
|
+
$9.append($$anchor2, tr_2);
|
|
977
1076
|
});
|
|
978
|
-
$
|
|
979
|
-
$
|
|
980
|
-
$
|
|
981
|
-
$
|
|
982
|
-
$
|
|
983
|
-
$
|
|
984
|
-
$
|
|
985
|
-
$
|
|
986
|
-
$
|
|
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();
|
|
987
1086
|
}
|
|
988
|
-
$
|
|
1087
|
+
$9.delegate(["keydown", "click", "dblclick", "mousedown"]);
|
|
989
1088
|
|
|
990
1089
|
// src/index.ts
|
|
991
1090
|
var EditableTextNodeEditor2 = EditableTextNodeEditor;
|
|
@@ -996,9 +1095,13 @@ export {
|
|
|
996
1095
|
DirtyTracker,
|
|
997
1096
|
EditableTextNodeEditor2 as EditableTextNodeEditor,
|
|
998
1097
|
FormulaBar,
|
|
1098
|
+
HistoryManager2 as HistoryManager,
|
|
999
1099
|
SpreadsheetEditor,
|
|
1000
1100
|
TemplateRenderer2 as TemplateRenderer,
|
|
1001
1101
|
createDirtyTracker,
|
|
1102
|
+
createHistory,
|
|
1103
|
+
createHistoryManager2 as createHistoryManager,
|
|
1104
|
+
createHistoryShortcuts,
|
|
1002
1105
|
createNavigationGuard,
|
|
1003
1106
|
createReactiveEditor,
|
|
1004
1107
|
createReactiveSpreadsheet,
|