@fluixi-ui/bulk-editor 0.3.0-alpha.11 → 0.3.0-alpha.13

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.
Files changed (5) hide show
  1. package/dist/bulk-editor.js +323 -778
  2. package/dist/formula.js +1 -7
  3. package/dist/state.js +38 -138
  4. package/dist/tsconfig.lib.tsbuildinfo +1 -1
  5. package/package.json +3 -3
package/dist/bulk-editor.js CHANGED
@@ -1,57 +1,43 @@
1
- import { createNativeElement, spread, insert, createComponent, delegateEvents } from "@fluixi/dom";
1
+ import { createNativeElement, spread, insert, createComponent, templateNode, holeEnd, holeScope, holeContent, delegateEvents } from "@fluixi/dom";
2
2
  import { For } from "@fluixi/core";
3
3
  import { createSignal, createMemo, createEffect, onCleanup, untrack } from "@fluixi/reactive/signal";
4
4
  import { Checkbox } from "@fluixi-ui/checkbox";
5
5
  import { createBulkEditorState } from "./state.js";
6
- delegateEvents(["click", "change", "input", "blur", "focus", "keydown", "mousedown", "dblclick"]);
6
+ const _fxTmpl$0 = '<div role="separator"></div>';
7
+ const _fxTmpl$1 = '<td class="flx-ui-be-foot-cell"></td>';
8
+ const _fxTmpl$2 = '<td class="flx-ui-be-group-cell"></td>';
9
+ const _fxTmpl$3 = '<th class="flx-ui-be-filter-cell"></th>';
10
+ const _fxTmpl$4 = '<th class="flx-ui-be-actions-head"></th>';
11
+ const _fxTmpl$5 = "<tbody><!--fx--><!--fx/--></tbody>";
12
+ const _fxTmpl$6 = '<div class="flx-ui-be-check-wrap"><!--fx--><!--fx/--></div>';
13
+ delegateEvents(["click", "mousedown", "dblclick", "input", "change", "focus", "blur", "keydown"]);
7
14
  const DEFAULT_COL_W = 130;
8
15
  const toggleAttr = (el, name, on) => on ? el.setAttribute(name, "") : el.removeAttribute(name);
9
16
  const Padlock = () => (() => {
10
17
  const _el$ = createNativeElement("svg", true);
11
- spread({
12
- element: _el$,
13
- props: {
14
- viewBox: "0 0 24 24",
15
- width: "12",
16
- height: "12",
17
- fill: "none",
18
- stroke: "currentColor",
19
- "stroke-width": "2",
20
- "stroke-linecap": "round",
21
- "stroke-linejoin": "round",
22
- "aria-hidden": "true"
23
- },
24
- isSVG: true
25
- });
18
+ spread({ element: _el$, props: { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, isSVG: true });
26
19
  insert(_el$, (() => {
27
20
  const _el$2 = createNativeElement("rect", true);
28
- spread({
29
- element: _el$2,
30
- props: {
31
- x: "5",
32
- y: "11",
33
- width: "14",
34
- height: "10",
35
- rx: "2"
36
- },
37
- isSVG: true
38
- });
21
+ spread({ element: _el$2, props: { x: "5", y: "11", width: "14", height: "10", rx: "2" }, isSVG: true });
39
22
  return _el$2;
40
23
  })());
41
24
  insert(_el$, (() => {
42
25
  const _el$2 = createNativeElement("path", true);
43
- spread({
44
- element: _el$2,
45
- props: {
46
- d: "M8 11V7a4 4 0 0 1 8 0v4"
47
- },
48
- isSVG: true
49
- });
26
+ spread({ element: _el$2, props: { d: "M8 11V7a4 4 0 0 1 8 0v4" }, isSVG: true });
50
27
  return _el$2;
51
28
  })());
52
29
  return _el$;
53
30
  })();
54
- const HINTS = [["↑↓←→", "navigate"], ["⇧+↑↓←→", "extend"], ["Click header", "column"], ["Ctrl+A", "all"], ["Enter/F2", "edit"], ["Del", "clear"], ["Ctrl+D", "fill down"], ["Ctrl+C/V", "copy/paste"]];
31
+ const HINTS = [
32
+ ["↑↓←→", "navigate"],
33
+ ["⇧+↑↓←→", "extend"],
34
+ ["Click header", "column"],
35
+ ["Ctrl+A", "all"],
36
+ ["Enter/F2", "edit"],
37
+ ["Del", "clear"],
38
+ ["Ctrl+D", "fill down"],
39
+ ["Ctrl+C/V", "copy/paste"]
40
+ ];
55
41
  function BulkEditor(props) {
56
42
  const state = createBulkEditorState(props);
57
43
  const labelWidth = props.labelWidth ?? 200;
@@ -139,10 +125,7 @@ function BulkEditor(props) {
139
125
  const tabMove = (back) => {
140
126
  const s = untrack(state.selection);
141
127
  if (!s) return;
142
- const {
143
- row: r,
144
- col: c
145
- } = s.anchor;
128
+ const { row: r, col: c } = s.anchor;
146
129
  const nc = state.colCount();
147
130
  if (back) state.selectCell(c > 0 ? r : r - 1, c > 0 ? c - 1 : nc - 1);
148
131
  else state.selectCell(c < nc - 1 ? r : r + 1, c < nc - 1 ? c + 1 : 0);
@@ -182,10 +165,7 @@ function BulkEditor(props) {
182
165
  }
183
166
  return;
184
167
  }
185
- const {
186
- row: r,
187
- col: c
188
- } = s.anchor;
168
+ const { row: r, col: c } = s.anchor;
189
169
  switch (e.key) {
190
170
  case "ArrowUp":
191
171
  e.preventDefault();
@@ -266,10 +246,7 @@ function BulkEditor(props) {
266
246
  const el = document.elementFromPoint(x, y)?.closest("[data-cell]");
267
247
  if (!el?.dataset.cell) return null;
268
248
  const [r, c] = el.dataset.cell.split(":").map(Number);
269
- return {
270
- r,
271
- c
272
- };
249
+ return { r, c };
273
250
  };
274
251
  const trackDrag = (onMove, onEnd) => {
275
252
  const move = (ev) => onMove(ev);
@@ -300,10 +277,13 @@ function BulkEditor(props) {
300
277
  const onFillHandleDown = (e) => {
301
278
  e.preventDefault();
302
279
  e.stopPropagation();
303
- trackDrag((ev) => {
304
- const pos = cellFromPoint(ev.clientX, ev.clientY);
305
- if (pos) state.selectCell(pos.r, pos.c, true);
306
- }, () => state.fillDown());
280
+ trackDrag(
281
+ (ev) => {
282
+ const pos = cellFromPoint(ev.clientX, ev.clientY);
283
+ if (pos) state.selectCell(pos.r, pos.c, true);
284
+ },
285
+ () => state.fillDown()
286
+ );
307
287
  };
308
288
  const [menu, setMenu] = createSignal(null);
309
289
  const closeMenu = () => setMenu(null);
@@ -312,24 +292,12 @@ function BulkEditor(props) {
312
292
  e.preventDefault();
313
293
  containerEl?.focus();
314
294
  if (!state.isSelected(r, c)) state.selectCell(r, c);
315
- setMenu({
316
- x: e.clientX,
317
- y: e.clientY,
318
- kind: "cell",
319
- r,
320
- c
321
- });
295
+ setMenu({ x: e.clientX, y: e.clientY, kind: "cell", r, c });
322
296
  };
323
297
  const openColumnMenu = (e, c) => {
324
298
  if (props.contextMenu === false) return;
325
299
  e.preventDefault();
326
- setMenu({
327
- x: e.clientX,
328
- y: e.clientY,
329
- kind: "column",
330
- r: -1,
331
- c
332
- });
300
+ setMenu({ x: e.clientX, y: e.clientY, kind: "column", r: -1, c });
333
301
  };
334
302
  const cellMenuItems = (r, c) => {
335
303
  const row = state.rowAt(r);
@@ -339,49 +307,20 @@ function BulkEditor(props) {
339
307
  const items = [];
340
308
  if (row && col && !state.isColumnReadOnly(col)) {
341
309
  const locked = state.isCellLockedAt(r, c);
342
- items.push({
343
- label: locked ? "Unlock cell" : "Lock cell",
344
- run: () => state.toggleCellLock(row.id, col.key)
345
- });
310
+ items.push({ label: locked ? "Unlock cell" : "Lock cell", run: () => state.toggleCellLock(row.id, col.key) });
346
311
  }
347
312
  if (multi) {
348
- items.push({
349
- label: "Lock selection",
350
- run: () => state.lockSelection(true)
351
- });
352
- items.push({
353
- label: "Unlock selection",
354
- run: () => state.lockSelection(false)
355
- });
313
+ items.push({ label: "Lock selection", run: () => state.lockSelection(true) });
314
+ items.push({ label: "Unlock selection", run: () => state.lockSelection(false) });
356
315
  }
357
316
  if (row) {
358
317
  const locked = state.getRowLockState(row.id) === "all";
359
- items.push({
360
- label: locked ? "Unlock row" : "Lock row",
361
- run: () => state.toggleRowLock(row.id)
362
- });
318
+ items.push({ label: locked ? "Unlock row" : "Lock row", run: () => state.toggleRowLock(row.id) });
363
319
  }
364
- items.push({
365
- label: "",
366
- separator: true
367
- }, {
368
- label: "Copy",
369
- run: copy
370
- }, {
371
- label: "Clear",
372
- run: () => state.clearRange()
373
- });
320
+ items.push({ label: "", separator: true }, { label: "Copy", run: copy }, { label: "Clear", run: () => state.clearRange() });
374
321
  if (props.contextMenuItems && row && col) {
375
- const custom = props.contextMenuItems({
376
- row,
377
- col,
378
- r,
379
- c
380
- });
381
- if (custom.length) items.push({
382
- label: "",
383
- separator: true
384
- }, ...custom);
322
+ const custom = props.contextMenuItems({ row, col, r, c });
323
+ if (custom.length) items.push({ label: "", separator: true }, ...custom);
385
324
  }
386
325
  return items;
387
326
  };
@@ -390,52 +329,19 @@ function BulkEditor(props) {
390
329
  if (!col) return [];
391
330
  const items = [];
392
331
  if (props.sortable ?? true) {
393
- items.push({
394
- label: "Sort ascending",
395
- run: () => state.setSort({
396
- colKey: col.key,
397
- dir: "asc"
398
- })
399
- });
400
- items.push({
401
- label: "Sort descending",
402
- run: () => state.setSort({
403
- colKey: col.key,
404
- dir: "desc"
405
- })
406
- });
407
- if (state.sort()?.colKey === col.key) items.push({
408
- label: "Clear sort",
409
- run: () => state.setSort(null)
410
- });
332
+ items.push({ label: "Sort ascending", run: () => state.setSort({ colKey: col.key, dir: "asc" }) });
333
+ items.push({ label: "Sort descending", run: () => state.setSort({ colKey: col.key, dir: "desc" }) });
334
+ if (state.sort()?.colKey === col.key) items.push({ label: "Clear sort", run: () => state.setSort(null) });
411
335
  }
412
336
  if (!state.isColumnReadOnly(col)) {
413
337
  const locked = state.getColumnLockState(col.key) === "all";
414
- items.push({
415
- label: "",
416
- separator: true
417
- }, {
418
- label: locked ? "Unlock column" : "Lock column",
419
- run: () => state.toggleColumnLock(col.key)
420
- });
338
+ items.push({ label: "", separator: true }, { label: locked ? "Unlock column" : "Lock column", run: () => state.toggleColumnLock(col.key) });
421
339
  }
422
- if (state.getColumnFilter(col.key)) items.push({
423
- label: "Clear filter",
424
- run: () => state.setColumnFilter(col.key, "")
425
- });
426
- if (state.columnWidths().has(col.key)) items.push({
427
- label: "Reset width",
428
- run: () => state.resetColumnWidth(col.key)
429
- });
340
+ if (state.getColumnFilter(col.key)) items.push({ label: "Clear filter", run: () => state.setColumnFilter(col.key, "") });
341
+ if (state.columnWidths().has(col.key)) items.push({ label: "Reset width", run: () => state.resetColumnWidth(col.key) });
430
342
  if (props.columnMenuItems) {
431
- const custom = props.columnMenuItems({
432
- col,
433
- c
434
- });
435
- if (custom.length) items.push({
436
- label: "",
437
- separator: true
438
- }, ...custom);
343
+ const custom = props.columnMenuItems({ col, c });
344
+ if (custom.length) items.push({ label: "", separator: true }, ...custom);
439
345
  }
440
346
  return items;
441
347
  };
@@ -469,726 +375,365 @@ function BulkEditor(props) {
469
375
  const cellContent = (row, col, r, c) => {
470
376
  if (col.type === "checkbox") {
471
377
  return (() => {
472
- const _el$ = createNativeElement("div");
473
- spread({
474
- element: _el$,
475
- props: {
476
- className: "flx-ui-be-check-wrap"
477
- }
478
- });
479
- insert(_el$, createMemo(() => createComponent(Checkbox, {
480
- get className() {
481
- return "flx-ui-be-check";
482
- },
483
- get checked() {
484
- return state.getRawAt(r, c) === "1";
485
- },
486
- get disabled() {
487
- return (col.disable?.({
488
- row,
489
- col
490
- }) ?? false) || state.isCellLockedAt(r, c);
491
- },
492
- get onClick() {
493
- return (e) => e.stopPropagation();
494
- },
495
- get onChange() {
496
- return (checked) => state.setCellAt(r, c, checked ? "1" : "0");
497
- }
498
- })), null);
378
+ const _el$ = templateNode(_fxTmpl$6, "div", true);
379
+ const _n$0 = _el$.firstChild;
380
+ const _n$1 = holeEnd(_n$0);
381
+ insert(_el$, holeScope(_n$0, () => createMemo(() => createComponent(Checkbox, { get className() {
382
+ return "flx-ui-be-check";
383
+ }, get checked() {
384
+ return state.getRawAt(r, c) === "1";
385
+ }, get disabled() {
386
+ return (col.disable?.({ row, col }) ?? false) || state.isCellLockedAt(r, c);
387
+ }, get onClick() {
388
+ return ((e) => e.stopPropagation());
389
+ }, get onChange() {
390
+ return ((checked) => state.setCellAt(r, c, checked ? "1" : "0"));
391
+ } }))), _n$1, holeContent(_n$0, _n$1));
499
392
  return _el$;
500
393
  })();
501
394
  }
502
395
  if (state.isEditing(r, c)) {
503
396
  return (() => {
504
397
  const _el$ = createNativeElement("input");
505
- spread({
506
- element: _el$,
507
- props: {
508
- className: "flx-ui-be-input",
509
- type: "text",
510
- inputmode: () => col.type === "number" ? "decimal" : void 0,
511
- style: () => `text-align:${align(col)}`,
512
- value: () => state.editBuffer(),
513
- onInput: (e) => state.setEditBuffer(e.target.value),
514
- onBlur: () => {
515
- state.commitEdit();
516
- containerEl?.focus();
517
- },
518
- onClick: (e) => e.stopPropagation()
519
- }
520
- });
398
+ spread({ element: _el$, props: { className: "flx-ui-be-input", type: "text", inputmode: () => col.type === "number" ? "decimal" : void 0, style: () => `text-align:${align(col)}`, value: (() => state.editBuffer()), onInput: ((e) => state.setEditBuffer(e.target.value)), onBlur: (() => {
399
+ state.commitEdit();
400
+ containerEl?.focus();
401
+ }), onClick: ((e) => e.stopPropagation()) } });
521
402
  return _el$;
522
403
  })();
523
404
  }
524
405
  return (() => {
525
406
  const _el$ = createNativeElement("div");
526
- spread({
527
- element: _el$,
528
- props: {
529
- className: "flx-ui-be-val",
530
- style: () => `justify-content:${align(col) === "left" ? "flex-start" : align(col) === "center" ? "center" : "flex-end"}`
531
- }
532
- });
533
- insert(_el$, () => {
407
+ spread({ element: _el$, props: { className: "flx-ui-be-val", style: () => `justify-content:${align(col) === "left" ? "flex-start" : align(col) === "center" ? "center" : "flex-end"}` } });
408
+ insert(_el$, (() => {
534
409
  const v = state.getDisplayAt(r, c);
535
410
  return v ? v : (() => {
536
411
  const _el$2 = createNativeElement("span");
537
- spread({
538
- element: _el$2,
539
- props: {
540
- className: "flx-ui-be-ph"
541
- }
542
- });
412
+ _el$2.setAttribute("class", "flx-ui-be-ph");
543
413
  insert(_el$2, () => col.placeholder ?? "", null);
544
414
  return _el$2;
545
415
  })();
546
- }, null);
416
+ }));
547
417
  return _el$;
548
418
  })();
549
419
  };
550
420
  return (() => {
551
421
  const _el$ = createNativeElement("div");
552
- spread({
553
- element: _el$,
554
- props: {
555
- className: () => props.class ? `flx-ui-bulk-editor ${props.class}` : "flx-ui-bulk-editor",
556
- role: "grid",
557
- tabindex: 0,
558
- "aria-colcount": () => state.colCount() + 1,
559
- ref: (el) => {
560
- containerEl = el;
561
- },
562
- onFocus: () => setFocused(true),
563
- onBlur: (e) => {
564
- if (!containerEl?.contains(e.relatedTarget)) setFocused(false);
565
- },
566
- onKeyDown
567
- }
568
- });
422
+ spread({ element: _el$, props: { className: () => props.class ? `flx-ui-bulk-editor ${props.class}` : "flx-ui-bulk-editor", role: "grid", tabindex: 0, "aria-colcount": (() => state.colCount() + 1), ref: ((el) => {
423
+ containerEl = el;
424
+ }), onFocus: (() => setFocused(true)), onBlur: ((e) => {
425
+ if (!containerEl?.contains(e.relatedTarget)) setFocused(false);
426
+ }), onKeyDown } });
569
427
  insert(_el$, (() => {
570
428
  const _el$2 = createNativeElement("div");
571
- spread({
572
- element: _el$2,
573
- props: {
574
- className: "flx-ui-be-scroll",
575
- ref: (el) => setScrollEl(el),
576
- style: () => props.maxHeight ? `max-height:${props.maxHeight}` : void 0
577
- }
578
- });
429
+ spread({ element: _el$2, props: { className: "flx-ui-be-scroll", ref: ((el) => setScrollEl(el)), style: () => props.maxHeight ? `max-height:${props.maxHeight}` : void 0 } });
579
430
  insert(_el$2, (() => {
580
431
  const _el$3 = createNativeElement("table");
581
- spread({
582
- element: _el$3,
583
- props: {
584
- className: "flx-ui-be-table"
585
- }
586
- });
432
+ _el$3.setAttribute("class", "flx-ui-be-table");
587
433
  insert(_el$3, (() => {
588
434
  const _el$4 = createNativeElement("thead");
589
435
  insert(_el$4, (() => {
590
436
  const _el$5 = createNativeElement("tr");
591
- spread({
592
- element: _el$5,
593
- props: {
594
- role: "row"
595
- }
596
- });
437
+ _el$5.setAttribute("role", "row");
597
438
  insert(_el$5, (() => {
598
439
  const _el$6 = createNativeElement("th");
599
- spread({
600
- element: _el$6,
601
- props: {
602
- className: "flx-ui-be-corner",
603
- style: () => `min-width:${labelWidth}px;width:${labelWidth}px`,
604
- onClick: () => state.selectAll(),
605
- title: "Select all (Ctrl+A)"
606
- }
607
- });
608
- insert(_el$6, createMemo(() => typeof props.labelHeader === "function" ? props.labelHeader() : props.labelHeader ?? ""), null);
440
+ spread({ element: _el$6, props: { className: "flx-ui-be-corner", style: `min-width:${labelWidth}px;width:${labelWidth}px`, onClick: (() => state.selectAll()), title: "Select all (Ctrl+A)" } });
441
+ insert(_el$6, (() => typeof props.labelHeader === "function" ? props.labelHeader() : props.labelHeader ?? ""));
609
442
  return _el$6;
610
443
  })());
611
- insert(_el$5, createMemo(() => createComponent(For, {
612
- get each() {
613
- return state.columns;
614
- },
615
- get children() {
616
- return (col, ci) => (() => {
617
- const _el$6 = createNativeElement("th");
618
- spread({
619
- element: _el$6,
620
- props: {
621
- className: "flx-ui-be-colh",
622
- role: "columnheader",
623
- "data-col-head": () => String(ci()),
624
- "data-drop-target": () => dropCol() === col.key ? "" : void 0,
625
- style: () => `${colBox(col)};text-align:${align(col)}`,
626
- draggable: () => props.reorderable !== false,
627
- onClick: () => state.selectColumn(ci()),
628
- onContextMenu: (e) => openColumnMenu(e, ci()),
629
- onDragStart: (e) => {
630
- setDragCol(col.key);
631
- e.dataTransfer?.setData("text/plain", col.key);
632
- },
633
- onDragEnter: () => {
634
- if (dragCol() && dragCol() !== col.key) setDropCol(col.key);
635
- },
636
- onDragOver: (e) => {
637
- if (dragCol() && dragCol() !== col.key) e.preventDefault();
638
- },
639
- onDrop: (e) => {
640
- e.preventDefault();
641
- const from = dragCol();
642
- if (from) state.moveColumn(from, col.key);
643
- endReorder();
644
- },
645
- onDragEnd: endReorder
646
- }
647
- });
648
- insert(_el$6, createMemo(() => props.resizable !== false && (() => {
649
- const _el$7 = createNativeElement("div");
650
- spread({
651
- element: _el$7,
652
- props: {
653
- className: "flx-ui-be-col-resize",
654
- onMouseDown: (e) => startResize(e, col)
655
- }
656
- });
657
- return _el$7;
658
- })()), null);
659
- insert(_el$6, (() => {
660
- const _el$7 = createNativeElement("div");
661
- spread({
662
- element: _el$7,
663
- props: {
664
- className: "flx-ui-be-colh-inner"
665
- }
666
- });
667
- insert(_el$7, createMemo(() => col.type === "checkbox" && createMemo(() => createComponent(Checkbox, {
668
- get className() {
669
- return "flx-ui-be-head-check";
670
- },
671
- get "aria-label"() {
672
- return "Toggle all";
673
- },
674
- get checked() {
675
- return state.getColumnCheckedState(col.key) === "all" ? true : state.getColumnCheckedState(col.key) === "some" ? "indeterminate" : false;
676
- },
677
- get onClick() {
678
- return (e) => e.stopPropagation();
679
- },
680
- get onChange() {
681
- return () => state.toggleColumnChecked(col.key);
682
- }
683
- }))), null);
684
- insert(_el$7, (() => {
685
- const _el$8 = createNativeElement("span");
686
- spread({
687
- element: _el$8,
688
- props: {
689
- className: "flx-ui-be-colh-label"
690
- }
691
- });
692
- insert(_el$8, createMemo(() => typeof col.header === "function" ? col.header() : col.header), null);
693
- return _el$8;
694
- })());
695
- insert(_el$7, () => col.headerExtra, null);
696
- insert(_el$7, createMemo(() => (props.sortable ?? true) && (() => {
697
- const _el$8 = createNativeElement("button");
698
- spread({
699
- element: _el$8,
700
- props: {
701
- type: "button",
702
- className: "flx-ui-be-sort",
703
- "aria-label": "Sort column",
704
- onClick: (e) => {
705
- e.stopPropagation();
706
- state.sortBy(col.key);
707
- }
708
- }
709
- });
710
- insert(_el$8, () => {
711
- const s = state.sort();
712
- return s && s.colKey === col.key ? s.dir === "asc" ? "▲" : "▼" : "↕";
713
- }, null);
714
- return _el$8;
715
- })()), null);
716
- return _el$7;
444
+ insert(_el$5, createMemo(() => createComponent(For, { get each() {
445
+ return state.columns;
446
+ }, get children() {
447
+ return ((col, ci) => (() => {
448
+ const _el$6 = createNativeElement("th");
449
+ spread({ element: _el$6, props: { className: "flx-ui-be-colh", role: "columnheader", "data-col-head": (() => String(ci())), "data-drop-target": (() => dropCol() === col.key ? "" : void 0), style: (() => `${colBox(col)};text-align:${align(col)}`), draggable: () => props.reorderable !== false, onClick: (() => state.selectColumn(ci())), onContextMenu: ((e) => openColumnMenu(e, ci())), onDragStart: ((e) => {
450
+ setDragCol(col.key);
451
+ e.dataTransfer?.setData("text/plain", col.key);
452
+ }), onDragEnter: (() => {
453
+ if (dragCol() && dragCol() !== col.key) setDropCol(col.key);
454
+ }), onDragOver: ((e) => {
455
+ if (dragCol() && dragCol() !== col.key) e.preventDefault();
456
+ }), onDrop: ((e) => {
457
+ e.preventDefault();
458
+ const from = dragCol();
459
+ if (from) state.moveColumn(from, col.key);
460
+ endReorder();
461
+ }), onDragEnd: endReorder } });
462
+ insert(_el$6, (() => props.resizable !== false && (() => {
463
+ const _el$7 = createNativeElement("div");
464
+ spread({ element: _el$7, props: { className: "flx-ui-be-col-resize", onMouseDown: ((e) => startResize(e, col)) } });
465
+ return _el$7;
466
+ })()));
467
+ insert(_el$6, (() => {
468
+ const _el$7 = createNativeElement("div");
469
+ _el$7.setAttribute("class", "flx-ui-be-colh-inner");
470
+ insert(_el$7, () => col.type === "checkbox" && createMemo(() => createComponent(Checkbox, { get className() {
471
+ return "flx-ui-be-head-check";
472
+ }, get "aria-label"() {
473
+ return "Toggle all";
474
+ }, get checked() {
475
+ return state.getColumnCheckedState(col.key) === "all" ? true : state.getColumnCheckedState(col.key) === "some" ? "indeterminate" : false;
476
+ }, get onClick() {
477
+ return ((e) => e.stopPropagation());
478
+ }, get onChange() {
479
+ return (() => state.toggleColumnChecked(col.key));
480
+ } })), null);
481
+ insert(_el$7, (() => {
482
+ const _el$8 = createNativeElement("span");
483
+ _el$8.setAttribute("class", "flx-ui-be-colh-label");
484
+ insert(_el$8, () => typeof col.header === "function" ? col.header() : col.header, null);
485
+ return _el$8;
717
486
  })());
718
- return _el$6;
719
- })();
720
- }
721
- })), null);
722
- insert(_el$5, createMemo(() => hasActions() && (() => {
723
- const _el$6 = createNativeElement("th");
724
- spread({
725
- element: _el$6,
726
- props: {
727
- className: "flx-ui-be-actions-head"
728
- }
729
- });
730
- return _el$6;
731
- })()), null);
487
+ insert(_el$7, () => col.headerExtra, null);
488
+ insert(_el$7, (() => (props.sortable ?? true) && (() => {
489
+ const _el$8 = createNativeElement("button");
490
+ spread({ element: _el$8, props: { type: "button", className: "flx-ui-be-sort", "aria-label": "Sort column", onClick: ((e) => {
491
+ e.stopPropagation();
492
+ state.sortBy(col.key);
493
+ }) } });
494
+ insert(_el$8, (() => {
495
+ const s = state.sort();
496
+ return s && s.colKey === col.key ? s.dir === "asc" ? "▲" : "▼" : "↕";
497
+ }));
498
+ return _el$8;
499
+ })()));
500
+ return _el$7;
501
+ })());
502
+ return _el$6;
503
+ })());
504
+ } })), null);
505
+ insert(_el$5, (() => hasActions() && templateNode(_fxTmpl$4, "th")));
732
506
  return _el$5;
733
507
  })());
734
- insert(_el$4, createMemo(() => props.filterRow && (() => {
508
+ insert(_el$4, (() => props.filterRow && (() => {
735
509
  const _el$5 = createNativeElement("tr");
736
- spread({
737
- element: _el$5,
738
- props: {
739
- role: "row",
740
- className: "flx-ui-be-filter-row"
741
- }
742
- });
510
+ _el$5.setAttribute("role", "row");
511
+ _el$5.setAttribute("class", "flx-ui-be-filter-row");
743
512
  insert(_el$5, (() => {
744
513
  const _el$6 = createNativeElement("th");
745
- spread({
746
- element: _el$6,
747
- props: {
748
- className: "flx-ui-be-filter-corner",
749
- style: () => `min-width:${labelWidth}px;width:${labelWidth}px`
750
- }
751
- });
514
+ spread({ element: _el$6, props: { className: "flx-ui-be-filter-corner", style: `min-width:${labelWidth}px;width:${labelWidth}px` } });
752
515
  return _el$6;
753
516
  })());
754
- insert(_el$5, createMemo(() => createComponent(For, {
755
- get each() {
756
- return state.columns;
757
- },
758
- get children() {
759
- return (col) => (() => {
760
- const _el$6 = createNativeElement("th");
761
- spread({
762
- element: _el$6,
763
- props: {
764
- className: "flx-ui-be-filter-cell",
765
- style: () => colBox(col)
766
- }
767
- });
768
- insert(_el$6, (() => {
769
- const _el$7 = createNativeElement("input");
770
- spread({
771
- element: _el$7,
772
- props: {
773
- className: "flx-ui-be-filter",
774
- type: "text",
775
- placeholder: () => col.type === "number" ? "e.g. >20" : "Filter…",
776
- value: () => state.getColumnFilter(col.key),
777
- onInput: (e) => state.setColumnFilter(col.key, e.target.value)
778
- }
779
- });
780
- return _el$7;
781
- })());
782
- return _el$6;
783
- })();
784
- }
785
- })), null);
786
- insert(_el$5, createMemo(() => hasActions() && (() => {
787
- const _el$6 = createNativeElement("th");
788
- spread({
789
- element: _el$6,
790
- props: {
791
- className: "flx-ui-be-filter-cell"
792
- }
793
- });
794
- return _el$6;
795
- })()), null);
517
+ insert(_el$5, createMemo(() => createComponent(For, { get each() {
518
+ return state.columns;
519
+ }, get children() {
520
+ return ((col) => (() => {
521
+ const _el$6 = createNativeElement("th");
522
+ spread({ element: _el$6, props: { className: "flx-ui-be-filter-cell", style: (() => colBox(col)) } });
523
+ insert(_el$6, (() => {
524
+ const _el$7 = createNativeElement("input");
525
+ spread({ element: _el$7, props: { className: "flx-ui-be-filter", type: "text", placeholder: () => col.type === "number" ? "e.g. >20" : "Filter…", value: (() => state.getColumnFilter(col.key)), onInput: ((e) => state.setColumnFilter(col.key, e.target.value)) } });
526
+ return _el$7;
527
+ })());
528
+ return _el$6;
529
+ })());
530
+ } })), null);
531
+ insert(_el$5, (() => hasActions() && templateNode(_fxTmpl$3, "th")));
796
532
  return _el$5;
797
- })()), null);
533
+ })()));
798
534
  return _el$4;
799
535
  })());
800
536
  insert(_el$3, (() => {
801
- const _el$4 = createNativeElement("tbody");
802
- insert(_el$4, createMemo(() => createComponent(For, {
803
- get each() {
804
- return state.viewRows;
805
- },
806
- get children() {
807
- return (row) => {
808
- if (row.isGroup) {
809
- return (() => {
810
- const _el$5 = createNativeElement("tr");
811
- spread({
812
- element: _el$5,
813
- props: {
814
- role: "row",
815
- className: "flx-ui-be-group"
816
- }
817
- });
818
- insert(_el$5, (() => {
819
- const _el$6 = createNativeElement("th");
820
- spread({
821
- element: _el$6,
822
- props: {
823
- className: "flx-ui-be-group-label",
824
- style: () => `min-width:${labelWidth}px;width:${labelWidth}px`
825
- }
826
- });
827
- insert(_el$6, (() => {
828
- const _el$7 = createNativeElement("div");
829
- spread({
830
- element: _el$7,
831
- props: {
832
- className: "flx-ui-be-group-head"
833
- }
834
- });
835
- insert(_el$7, createMemo(() => row.thumbnail && (() => {
836
- const _el$8 = createNativeElement("img");
837
- spread({
838
- element: _el$8,
839
- props: {
840
- className: "flx-ui-be-group-thumb",
841
- src: () => row.thumbnail,
842
- alt: ""
843
- }
844
- });
845
- return _el$8;
846
- })()), null);
847
- insert(_el$7, (() => {
848
- const _el$8 = createNativeElement("span");
849
- insert(_el$8, () => row.label, null);
850
- return _el$8;
851
- })());
852
- insert(_el$7, createMemo(() => row.subLabel && (() => {
853
- const _el$8 = createNativeElement("span");
854
- spread({
855
- element: _el$8,
856
- props: {
857
- className: "flx-ui-be-rowh-sub"
858
- }
859
- });
860
- insert(_el$8, () => row.subLabel, null);
861
- return _el$8;
862
- })()), null);
863
- return _el$7;
864
- })());
865
- return _el$6;
866
- })());
867
- insert(_el$5, createMemo(() => createComponent(For, {
868
- get each() {
869
- return state.columns;
870
- },
871
- get children() {
872
- return (col) => (() => {
873
- const _el$6 = createNativeElement("td");
874
- spread({
875
- element: _el$6,
876
- props: {
877
- className: "flx-ui-be-group-cell",
878
- style: () => colBox(col)
879
- }
880
- });
881
- insert(_el$6, createMemo(() => row.groupData ? row.groupData[col.key] : null), null);
882
- return _el$6;
883
- })();
884
- }
885
- })), null);
886
- insert(_el$5, createMemo(() => hasActions() && (() => {
887
- const _el$6 = createNativeElement("td");
888
- spread({
889
- element: _el$6,
890
- props: {
891
- className: "flx-ui-be-group-cell"
892
- }
893
- });
894
- return _el$6;
895
- })()), null);
896
- return _el$5;
897
- })();
898
- }
899
- const di = () => dataIndex().get(row.id) ?? 0;
537
+ const _el$4 = templateNode(_fxTmpl$5, "tbody", true);
538
+ const _n$0 = _el$4.firstChild;
539
+ const _n$1 = holeEnd(_n$0);
540
+ insert(_el$4, holeScope(_n$0, () => createMemo(() => createComponent(For, { get each() {
541
+ return state.viewRows;
542
+ }, get children() {
543
+ return ((row) => {
544
+ if (row.isGroup) {
900
545
  return (() => {
901
546
  const _el$5 = createNativeElement("tr");
902
- spread({
903
- element: _el$5,
904
- props: {
905
- role: "row"
906
- }
907
- });
547
+ _el$5.setAttribute("role", "row");
548
+ _el$5.setAttribute("class", "flx-ui-be-group");
908
549
  insert(_el$5, (() => {
909
550
  const _el$6 = createNativeElement("th");
910
- spread({
911
- element: _el$6,
912
- props: {
913
- className: "flx-ui-be-rowh",
914
- role: "rowheader",
915
- "data-row-lbl": () => String(di()),
916
- style: () => `min-width:${labelWidth}px;width:${labelWidth}px`,
917
- onClick: () => state.selectRow(di())
918
- }
919
- });
551
+ spread({ element: _el$6, props: { className: "flx-ui-be-group-label", style: `min-width:${labelWidth}px;width:${labelWidth}px` } });
920
552
  insert(_el$6, (() => {
921
553
  const _el$7 = createNativeElement("div");
922
- spread({
923
- element: _el$7,
924
- props: {
925
- className: "flx-ui-be-rowh-inner"
926
- }
927
- });
928
- insert(_el$7, (() => {
929
- const _el$8 = createNativeElement("button");
930
- spread({
931
- element: _el$8,
932
- props: {
933
- className: "flx-ui-be-row-lock",
934
- type: "button",
935
- tabindex: () => -1,
936
- "aria-label": "Lock row",
937
- onMouseDown: (e) => e.stopPropagation(),
938
- onClick: (e) => {
939
- e.stopPropagation();
940
- state.toggleRowLock(row.id);
941
- }
942
- }
943
- });
944
- insert(_el$8, createMemo(() => createComponent(Padlock, {})), null);
554
+ _el$7.setAttribute("class", "flx-ui-be-group-head");
555
+ insert(_el$7, () => row.thumbnail && (() => {
556
+ const _el$8 = createNativeElement("img");
557
+ spread({ element: _el$8, props: { className: "flx-ui-be-group-thumb", src: () => row.thumbnail, alt: "" } });
945
558
  return _el$8;
946
- })());
559
+ })(), null);
947
560
  insert(_el$7, (() => {
948
- const _el$8 = createNativeElement("div");
949
- spread({
950
- element: _el$8,
951
- props: {
952
- className: "flx-ui-be-rowh-text"
953
- }
954
- });
955
- insert(_el$8, (() => {
956
- const _el$9 = createNativeElement("div");
957
- spread({
958
- element: _el$9,
959
- props: {
960
- className: "flx-ui-be-rowh-label"
961
- }
962
- });
963
- insert(_el$9, () => row.label, null);
964
- return _el$9;
965
- })());
966
- insert(_el$8, createMemo(() => row.subLabel && (() => {
967
- const _el$9 = createNativeElement("div");
968
- spread({
969
- element: _el$9,
970
- props: {
971
- className: "flx-ui-be-rowh-sub"
972
- }
973
- });
974
- insert(_el$9, () => row.subLabel, null);
975
- return _el$9;
976
- })()), null);
561
+ const _el$8 = createNativeElement("span");
562
+ insert(_el$8, () => row.label, null);
977
563
  return _el$8;
978
564
  })());
565
+ insert(_el$7, () => row.subLabel && (() => {
566
+ const _el$8 = createNativeElement("span");
567
+ _el$8.setAttribute("class", "flx-ui-be-rowh-sub");
568
+ insert(_el$8, () => row.subLabel, null);
569
+ return _el$8;
570
+ })(), null);
979
571
  return _el$7;
980
572
  })());
981
573
  return _el$6;
982
574
  })());
983
- insert(_el$5, createMemo(() => createComponent(For, {
984
- get each() {
985
- return state.columns;
986
- },
987
- get children() {
988
- return (col, ci) => (() => {
989
- const _el$6 = createNativeElement("td");
990
- spread({
991
- element: _el$6,
992
- props: {
993
- className: "flx-ui-be-cell",
994
- role: "gridcell",
995
- "data-cell": () => `${di()}:${ci()}`,
996
- style: () => `${colBox(col)};text-align:${align(col)}`,
997
- onMouseDown: (e) => onCellMouseDown(e, di(), ci()),
998
- onDblClick: () => beginEdit(di(), ci()),
999
- onContextMenu: (e) => openMenu(e, di(), ci())
1000
- }
1001
- });
1002
- insert(_el$6, () => cellContent(row, col, di(), ci()), null);
1003
- insert(_el$6, createMemo(() => !state.isColumnReadOnly(col) && (() => {
1004
- const _el$7 = createNativeElement("button");
1005
- spread({
1006
- element: _el$7,
1007
- props: {
1008
- className: "flx-ui-be-lock",
1009
- type: "button",
1010
- tabindex: () => -1,
1011
- "aria-label": "Lock cell",
1012
- onMouseDown: (e) => e.stopPropagation(),
1013
- onClick: (e) => {
1014
- e.stopPropagation();
1015
- state.toggleCellLock(row.id, col.key);
1016
- }
1017
- }
1018
- });
1019
- insert(_el$7, createMemo(() => createComponent(Padlock, {})), null);
1020
- return _el$7;
1021
- })()), null);
1022
- insert(_el$6, createMemo(() => state.isAnchor(di(), ci()) && !state.isEditing(di(), ci()) && (() => {
1023
- const _el$7 = createNativeElement("div");
1024
- spread({
1025
- element: _el$7,
1026
- props: {
1027
- className: "flx-ui-be-fill-handle",
1028
- onMouseDown: onFillHandleDown
1029
- }
1030
- });
1031
- return _el$7;
1032
- })()), null);
1033
- return _el$6;
1034
- })();
1035
- }
1036
- })), null);
1037
- insert(_el$5, createMemo(() => hasActions() && (() => {
1038
- const _el$6 = createNativeElement("td");
1039
- spread({
1040
- element: _el$6,
1041
- props: {
1042
- className: "flx-ui-be-actions",
1043
- onMouseDown: (e) => e.stopPropagation()
1044
- }
1045
- });
1046
- insert(_el$6, () => row.rowActions, null);
1047
- return _el$6;
1048
- })()), null);
575
+ insert(_el$5, createMemo(() => createComponent(For, { get each() {
576
+ return state.columns;
577
+ }, get children() {
578
+ return ((col) => (() => {
579
+ const _el$6 = createNativeElement("td");
580
+ spread({ element: _el$6, props: { className: "flx-ui-be-group-cell", style: (() => colBox(col)) } });
581
+ insert(_el$6, () => row.groupData ? row.groupData[col.key] : null, null);
582
+ return _el$6;
583
+ })());
584
+ } })), null);
585
+ insert(_el$5, (() => hasActions() && templateNode(_fxTmpl$2, "td")));
1049
586
  return _el$5;
1050
587
  })();
1051
- };
1052
- }
1053
- })), null);
588
+ }
589
+ const di = () => dataIndex().get(row.id) ?? 0;
590
+ return (() => {
591
+ const _el$5 = createNativeElement("tr");
592
+ _el$5.setAttribute("role", "row");
593
+ insert(_el$5, (() => {
594
+ const _el$6 = createNativeElement("th");
595
+ spread({ element: _el$6, props: { className: "flx-ui-be-rowh", role: "rowheader", "data-row-lbl": (() => String(di())), style: `min-width:${labelWidth}px;width:${labelWidth}px`, onClick: (() => state.selectRow(di())) } });
596
+ insert(_el$6, (() => {
597
+ const _el$7 = createNativeElement("div");
598
+ _el$7.setAttribute("class", "flx-ui-be-rowh-inner");
599
+ insert(_el$7, (() => {
600
+ const _el$8 = createNativeElement("button");
601
+ spread({ element: _el$8, props: { className: "flx-ui-be-row-lock", type: "button", tabindex: -1, "aria-label": "Lock row", onMouseDown: ((e) => e.stopPropagation()), onClick: ((e) => {
602
+ e.stopPropagation();
603
+ state.toggleRowLock(row.id);
604
+ }) } });
605
+ insert(_el$8, createMemo(() => createComponent(Padlock, {})), null);
606
+ return _el$8;
607
+ })());
608
+ insert(_el$7, (() => {
609
+ const _el$8 = createNativeElement("div");
610
+ _el$8.setAttribute("class", "flx-ui-be-rowh-text");
611
+ insert(_el$8, (() => {
612
+ const _el$9 = createNativeElement("div");
613
+ _el$9.setAttribute("class", "flx-ui-be-rowh-label");
614
+ insert(_el$9, () => row.label, null);
615
+ return _el$9;
616
+ })());
617
+ insert(_el$8, () => row.subLabel && (() => {
618
+ const _el$9 = createNativeElement("div");
619
+ _el$9.setAttribute("class", "flx-ui-be-rowh-sub");
620
+ insert(_el$9, () => row.subLabel, null);
621
+ return _el$9;
622
+ })(), null);
623
+ return _el$8;
624
+ })());
625
+ return _el$7;
626
+ })());
627
+ return _el$6;
628
+ })());
629
+ insert(_el$5, createMemo(() => createComponent(For, { get each() {
630
+ return state.columns;
631
+ }, get children() {
632
+ return ((col, ci) => (() => {
633
+ const _el$6 = createNativeElement("td");
634
+ spread({ element: _el$6, props: { className: "flx-ui-be-cell", role: "gridcell", "data-cell": (() => `${di()}:${ci()}`), style: (() => `${colBox(col)};text-align:${align(col)}`), onMouseDown: ((e) => onCellMouseDown(e, di(), ci())), onDblClick: (() => beginEdit(di(), ci())), onContextMenu: ((e) => openMenu(e, di(), ci())) } });
635
+ insert(_el$6, (() => cellContent(row, col, di(), ci())));
636
+ insert(_el$6, !state.isColumnReadOnly(col) && (() => {
637
+ const _el$7 = createNativeElement("button");
638
+ spread({ element: _el$7, props: { className: "flx-ui-be-lock", type: "button", tabindex: -1, "aria-label": "Lock cell", onMouseDown: ((e) => e.stopPropagation()), onClick: ((e) => {
639
+ e.stopPropagation();
640
+ state.toggleCellLock(row.id, col.key);
641
+ }) } });
642
+ insert(_el$7, createMemo(() => createComponent(Padlock, {})), null);
643
+ return _el$7;
644
+ })());
645
+ insert(_el$6, (() => state.isAnchor(di(), ci()) && !state.isEditing(di(), ci()) && (() => {
646
+ const _el$7 = createNativeElement("div");
647
+ spread({ element: _el$7, props: { className: "flx-ui-be-fill-handle", onMouseDown: onFillHandleDown } });
648
+ return _el$7;
649
+ })()));
650
+ return _el$6;
651
+ })());
652
+ } })), null);
653
+ insert(_el$5, (() => hasActions() && (() => {
654
+ const _el$6 = createNativeElement("td");
655
+ spread({ element: _el$6, props: { className: "flx-ui-be-actions", onMouseDown: ((e) => e.stopPropagation()) } });
656
+ insert(_el$6, () => row.rowActions, null);
657
+ return _el$6;
658
+ })()));
659
+ return _el$5;
660
+ })();
661
+ });
662
+ } }))), _n$1, holeContent(_n$0, _n$1));
1054
663
  return _el$4;
1055
664
  })());
1056
- insert(_el$3, createMemo(() => showFooter() && (() => {
665
+ insert(_el$3, (() => showFooter() && (() => {
1057
666
  const _el$4 = createNativeElement("tfoot");
1058
667
  insert(_el$4, (() => {
1059
668
  const _el$5 = createNativeElement("tr");
1060
- spread({
1061
- element: _el$5,
1062
- props: {
1063
- role: "row",
1064
- className: "flx-ui-be-foot-row"
1065
- }
1066
- });
669
+ _el$5.setAttribute("role", "row");
670
+ _el$5.setAttribute("class", "flx-ui-be-foot-row");
1067
671
  insert(_el$5, (() => {
1068
672
  const _el$6 = createNativeElement("th");
1069
- spread({
1070
- element: _el$6,
1071
- props: {
1072
- className: "flx-ui-be-foot-corner",
1073
- style: () => `min-width:${labelWidth}px;width:${labelWidth}px`
1074
- }
1075
- });
1076
- insert(_el$6, createMemo(() => typeof props.footerLabel === "function" ? props.footerLabel() : props.footerLabel ?? ""), null);
673
+ spread({ element: _el$6, props: { className: "flx-ui-be-foot-corner", style: `min-width:${labelWidth}px;width:${labelWidth}px` } });
674
+ insert(_el$6, (() => typeof props.footerLabel === "function" ? props.footerLabel() : props.footerLabel ?? ""));
1077
675
  return _el$6;
1078
676
  })());
1079
- insert(_el$5, createMemo(() => createComponent(For, {
1080
- get each() {
1081
- return state.columns;
1082
- },
1083
- get children() {
1084
- return (col) => (() => {
1085
- const _el$6 = createNativeElement("td");
1086
- spread({
1087
- element: _el$6,
1088
- props: {
1089
- className: "flx-ui-be-foot-cell",
1090
- style: () => `${colBox(col)};text-align:${align(col)}`
1091
- }
1092
- });
1093
- insert(_el$6, () => state.getColumnAggregate(col.key), null);
1094
- return _el$6;
1095
- })();
1096
- }
1097
- })), null);
1098
- insert(_el$5, createMemo(() => hasActions() && (() => {
1099
- const _el$6 = createNativeElement("td");
1100
- spread({
1101
- element: _el$6,
1102
- props: {
1103
- className: "flx-ui-be-foot-cell"
1104
- }
1105
- });
1106
- return _el$6;
1107
- })()), null);
677
+ insert(_el$5, createMemo(() => createComponent(For, { get each() {
678
+ return state.columns;
679
+ }, get children() {
680
+ return ((col) => (() => {
681
+ const _el$6 = createNativeElement("td");
682
+ spread({ element: _el$6, props: { className: "flx-ui-be-foot-cell", style: (() => `${colBox(col)};text-align:${align(col)}`) } });
683
+ insert(_el$6, (() => state.getColumnAggregate(col.key)));
684
+ return _el$6;
685
+ })());
686
+ } })), null);
687
+ insert(_el$5, (() => hasActions() && templateNode(_fxTmpl$1, "td")));
1108
688
  return _el$5;
1109
689
  })());
1110
690
  return _el$4;
1111
- })()), null);
691
+ })()));
1112
692
  return _el$3;
1113
693
  })());
1114
694
  return _el$2;
1115
695
  })());
1116
- insert(_el$, createMemo(() => focused() && state.hasSelection() && (() => {
696
+ insert(_el$, (() => focused() && state.hasSelection() && (() => {
1117
697
  const _el$2 = createNativeElement("div");
1118
- spread({
1119
- element: _el$2,
1120
- props: {
1121
- className: "flx-ui-be-hints"
1122
- }
1123
- });
1124
- insert(_el$2, createMemo(() => createComponent(For, {
1125
- get each() {
1126
- return () => HINTS;
1127
- },
1128
- get children() {
1129
- return ([k, label]) => (() => {
1130
- const _el$3 = createNativeElement("span");
1131
- insert(_el$3, (() => {
1132
- const _el$4 = createNativeElement("kbd");
1133
- insert(_el$4, k);
1134
- return _el$4;
1135
- })());
1136
- insert(_el$3, " ");
1137
- insert(_el$3, label);
1138
- return _el$3;
1139
- })();
1140
- }
1141
- })), null);
698
+ _el$2.setAttribute("class", "flx-ui-be-hints");
699
+ insert(_el$2, createMemo(() => createComponent(For, { get each() {
700
+ return (() => HINTS);
701
+ }, get children() {
702
+ return (([k, label]) => (() => {
703
+ const _el$3 = createNativeElement("span");
704
+ insert(_el$3, (() => {
705
+ const _el$4 = createNativeElement("kbd");
706
+ insert(_el$4, k);
707
+ return _el$4;
708
+ })());
709
+ insert(_el$3, " ");
710
+ insert(_el$3, label);
711
+ return _el$3;
712
+ })());
713
+ } })), null);
1142
714
  return _el$2;
1143
- })()), null);
1144
- insert(_el$, () => {
715
+ })()));
716
+ insert(_el$, (() => {
1145
717
  const m = menu();
1146
718
  return m ? (() => {
1147
719
  const _el$2 = createNativeElement("div");
1148
- spread({
1149
- element: _el$2,
1150
- props: {
1151
- className: "flx-ui-be-menu",
1152
- role: "menu",
1153
- style: () => `left:${m.x}px;top:${m.y}px`
1154
- }
1155
- });
1156
- insert(_el$2, createMemo(() => createComponent(For, {
1157
- get each() {
1158
- return menuItems;
1159
- },
1160
- get children() {
1161
- return (item) => item.separator ? (() => {
1162
- const _el$3 = createNativeElement("div");
1163
- spread({
1164
- element: _el$3,
1165
- props: {
1166
- role: "separator"
1167
- }
1168
- });
1169
- return _el$3;
1170
- })() : (() => {
1171
- const _el$3 = createNativeElement("button");
1172
- spread({
1173
- element: _el$3,
1174
- props: {
1175
- type: "button",
1176
- role: "menuitem",
1177
- disabled: () => item.disabled,
1178
- onClick: () => {
1179
- item.run?.();
1180
- closeMenu();
1181
- }
1182
- }
1183
- });
1184
- insert(_el$3, () => item.label, null);
1185
- return _el$3;
1186
- })();
1187
- }
1188
- })), null);
720
+ spread({ element: _el$2, props: { className: "flx-ui-be-menu", role: "menu", style: () => `left:${m.x}px;top:${m.y}px` } });
721
+ insert(_el$2, createMemo(() => createComponent(For, { get each() {
722
+ return menuItems;
723
+ }, get children() {
724
+ return ((item) => item.separator ? templateNode(_fxTmpl$0, "div") : (() => {
725
+ const _el$3 = createNativeElement("button");
726
+ spread({ element: _el$3, props: { type: "button", role: "menuitem", disabled: () => item.disabled, onClick: (() => {
727
+ item.run?.();
728
+ closeMenu();
729
+ }) } });
730
+ insert(_el$3, () => item.label, null);
731
+ return _el$3;
732
+ })());
733
+ } })), null);
1189
734
  return _el$2;
1190
735
  })() : null;
1191
- }, null);
736
+ }));
1192
737
  return _el$;
1193
738
  })();
1194
739
  }