klun-ui 0.4.0 → 0.4.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.
@@ -1,6 +1,9 @@
1
1
  import { cx } from './chunk-T225J6LV.js';
2
2
  import { createContext, forwardRef, useState, useRef, useEffect, Children, useCallback, useMemo, useLayoutEffect, Fragment as Fragment$1, createElement, useContext, isValidElement, cloneElement, useSyncExternalStore } from 'react';
3
3
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
+ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, useDroppable, closestCenter } from '@dnd-kit/core';
5
+ import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
6
+ import { CSS } from '@dnd-kit/utilities';
4
7
  import { createPortal } from 'react-dom';
5
8
  import { createRoot } from 'react-dom/client';
6
9
 
@@ -3342,15 +3345,70 @@ var DiffViewer = forwardRef(function DiffViewer2({
3342
3345
  );
3343
3346
  });
3344
3347
  DiffViewer.displayName = "DiffViewer";
3345
- var Kanban = forwardRef(function Kanban2({ columns = [], onMove, onCardClick, renderCard, columnFooter, columnWidth = 280, className, style, ...props }, ref) {
3346
- const [drag, setDrag] = useState(null);
3347
- const [overColumn, setOverColumn] = useState(null);
3348
- const handleDrop = (column, index) => {
3349
- if (drag && (drag.fromColumn !== column.id || index !== index)) {
3350
- onMove?.(drag.cardId, drag.fromColumn, column.id, index);
3351
- }
3352
- setDrag(null);
3353
- setOverColumn(null);
3348
+ function draggedCenterY(active, delta) {
3349
+ const translated = active.rect.current.translated;
3350
+ if (translated) return translated.top + translated.height / 2;
3351
+ const initial = active.rect.current.initial;
3352
+ return initial ? initial.top + delta.y + initial.height / 2 : null;
3353
+ }
3354
+ function resolveMove(columns, activeId, overId, after) {
3355
+ if (activeId === overId) return null;
3356
+ const from = columns.find((c) => c.cards.some((k2) => k2.id === activeId));
3357
+ if (!from) return null;
3358
+ const overCard = columns.flatMap((c) => c.cards).find((k2) => k2.id === overId);
3359
+ const to = overCard ? columns.find((c) => c.cards.some((k2) => k2.id === overCard.id)) : columns.find((c) => c.id === overId);
3360
+ if (!to) return null;
3361
+ const rest = to.cards.filter((k2) => k2.id !== activeId);
3362
+ const toIndex = overCard ? rest.findIndex((k2) => k2.id === overCard.id) + (after ? 1 : 0) : rest.length;
3363
+ if (to.id === from.id && from.cards.findIndex((k2) => k2.id === activeId) === toIndex) {
3364
+ return null;
3365
+ }
3366
+ return { fromColumn: from.id, toColumn: to.id, toIndex };
3367
+ }
3368
+ var Kanban = forwardRef(function Kanban2({
3369
+ columns = [],
3370
+ onMove,
3371
+ onCardClick,
3372
+ renderCard,
3373
+ columnFooter,
3374
+ columnWidth = 280,
3375
+ className,
3376
+ style,
3377
+ ...props
3378
+ }, ref) {
3379
+ const [over, setOver] = useState(null);
3380
+ const sensors = useSensors(
3381
+ useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
3382
+ useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
3383
+ );
3384
+ const columnOf = (cardId) => columns.find((c) => c.cards.some((k2) => k2.id === cardId));
3385
+ const computeOver = ({
3386
+ active,
3387
+ delta,
3388
+ over: o
3389
+ }) => {
3390
+ if (!o) return null;
3391
+ const overId = String(o.id);
3392
+ const column = columnOf(overId);
3393
+ if (!column) return { columnId: overId };
3394
+ const centerY = draggedCenterY(active, delta);
3395
+ return {
3396
+ columnId: column.id,
3397
+ cardId: overId,
3398
+ after: centerY != null && centerY > o.rect.top + o.rect.height / 2
3399
+ };
3400
+ };
3401
+ const handleDragEnd = ({ active, delta, over: o }) => {
3402
+ setOver(null);
3403
+ if (!o) return;
3404
+ const overId = String(o.id);
3405
+ const column = columnOf(overId);
3406
+ const centerY = column ? draggedCenterY(active, delta) : null;
3407
+ const after = centerY != null && centerY > o.rect.top + o.rect.height / 2;
3408
+ const target = resolveMove(columns, String(active.id), overId, after);
3409
+ if (target) {
3410
+ onMove?.(String(active.id), target.fromColumn, target.toColumn, target.toIndex);
3411
+ }
3354
3412
  };
3355
3413
  return /* @__PURE__ */ jsx(
3356
3414
  "div",
@@ -3359,87 +3417,118 @@ var Kanban = forwardRef(function Kanban2({ columns = [], onMove, onCardClick, re
3359
3417
  className: cx("klun-kanban", className),
3360
3418
  style: { ...style, ["--klun-kanban-col"]: `${columnWidth}px` },
3361
3419
  ...props,
3362
- children: columns.map((column) => {
3363
- const over = overColumn === column.id && drag;
3364
- const full = column.limit !== void 0 && column.cards.length >= column.limit;
3365
- return /* @__PURE__ */ jsxs("section", { className: cx("klun-kanban__column", over && "klun-kanban__column--over"), children: [
3366
- /* @__PURE__ */ jsxs("header", { className: "klun-kanban__header", children: [
3367
- column.accent ? /* @__PURE__ */ jsx("span", { className: "klun-kanban__dot", style: { background: column.accent } }) : null,
3368
- /* @__PURE__ */ jsx("span", { className: "klun-kanban__title", children: column.title }),
3369
- /* @__PURE__ */ jsxs("span", { className: cx("klun-kanban__count", full && "klun-kanban__count--full"), children: [
3370
- column.cards.length,
3371
- column.limit !== void 0 ? ` / ${column.limit}` : ""
3372
- ] })
3373
- ] }),
3374
- /* @__PURE__ */ jsxs(
3375
- "div",
3420
+ children: /* @__PURE__ */ jsx(
3421
+ DndContext,
3422
+ {
3423
+ sensors,
3424
+ collisionDetection: closestCorners,
3425
+ onDragOver: (e) => setOver(computeOver(e)),
3426
+ onDragMove: (e) => setOver(computeOver(e)),
3427
+ onDragEnd: handleDragEnd,
3428
+ children: columns.map((column) => /* @__PURE__ */ jsx(
3429
+ KanbanColumnView,
3376
3430
  {
3377
- className: "klun-kanban__list",
3378
- onDragOver: (e) => {
3379
- if (!drag) return;
3380
- e.preventDefault();
3381
- setOverColumn(column.id);
3382
- },
3383
- onDrop: (e) => {
3384
- e.preventDefault();
3385
- handleDrop(column, column.cards.length);
3386
- },
3387
- children: [
3388
- column.cards.map((card, index) => /* @__PURE__ */ jsx(
3389
- "article",
3390
- {
3391
- draggable: true,
3392
- onDragStart: (e) => {
3393
- e.dataTransfer.effectAllowed = "move";
3394
- e.dataTransfer.setData("text/plain", card.id);
3395
- setDrag({ cardId: card.id, fromColumn: column.id });
3396
- },
3397
- onDragEnd: () => {
3398
- setDrag(null);
3399
- setOverColumn(null);
3400
- },
3401
- onDragOver: (e) => {
3402
- if (!drag) return;
3403
- e.preventDefault();
3404
- e.stopPropagation();
3405
- const rect = e.currentTarget.getBoundingClientRect();
3406
- const after = e.clientY - rect.top > rect.height / 2;
3407
- setOverColumn(column.id);
3408
- setDrag((d) => d ? { ...d, overColumn: column.id, overIndex: index + (after ? 1 : 0) } : d);
3409
- },
3410
- onDrop: (e) => {
3411
- e.preventDefault();
3412
- e.stopPropagation();
3413
- handleDrop(column, index);
3414
- },
3415
- onClick: () => onCardClick?.(card, column.id),
3416
- className: cx(
3417
- "klun-kanban__card",
3418
- drag?.cardId === card.id && "klun-kanban__card--dragging",
3419
- over && drag?.overIndex === index && "klun-kanban__card--dropbefore",
3420
- over && drag?.overIndex === index + 1 && "klun-kanban__card--dropafter"
3421
- ),
3422
- style: card.accent ? { boxShadow: `inset 3px 0 0 ${card.accent}` } : void 0,
3423
- children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
3424
- /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-title", children: card.title }),
3425
- card.description ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-desc", children: card.description }) : null,
3426
- card.tags?.length ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-tags", children: card.tags.map((t, i) => /* @__PURE__ */ jsx("span", { children: t }, i)) }) : null,
3427
- card.meta ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-meta", children: card.meta }) : null
3428
- ] })
3429
- },
3430
- card.id
3431
- )),
3432
- column.cards.length === 0 ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__empty", children: "Drop a card here" }) : null
3433
- ]
3434
- }
3435
- ),
3436
- columnFooter ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__footer", children: columnFooter(column) }) : null
3437
- ] }, column.id);
3438
- })
3431
+ column,
3432
+ over,
3433
+ onCardClick,
3434
+ renderCard,
3435
+ columnFooter
3436
+ },
3437
+ column.id
3438
+ ))
3439
+ }
3440
+ )
3439
3441
  }
3440
3442
  );
3441
3443
  });
3442
3444
  Kanban.displayName = "Kanban";
3445
+ function KanbanColumnView({
3446
+ column,
3447
+ over,
3448
+ onCardClick,
3449
+ renderCard,
3450
+ columnFooter
3451
+ }) {
3452
+ const { setNodeRef } = useDroppable({ id: column.id });
3453
+ const isOver = over?.columnId === column.id;
3454
+ const full = column.limit !== void 0 && column.cards.length >= column.limit;
3455
+ return /* @__PURE__ */ jsxs("section", { className: cx("klun-kanban__column", isOver && "klun-kanban__column--over"), children: [
3456
+ /* @__PURE__ */ jsxs("header", { className: "klun-kanban__header", children: [
3457
+ column.accent ? /* @__PURE__ */ jsx("span", { className: "klun-kanban__dot", style: { background: column.accent } }) : null,
3458
+ /* @__PURE__ */ jsx("span", { className: "klun-kanban__title", children: column.title }),
3459
+ /* @__PURE__ */ jsxs("span", { className: cx("klun-kanban__count", full && "klun-kanban__count--full"), children: [
3460
+ column.cards.length,
3461
+ column.limit !== void 0 ? ` / ${column.limit}` : ""
3462
+ ] })
3463
+ ] }),
3464
+ /* @__PURE__ */ jsxs("div", { ref: setNodeRef, className: "klun-kanban__list", children: [
3465
+ /* @__PURE__ */ jsx(
3466
+ SortableContext,
3467
+ {
3468
+ items: column.cards.map((c) => c.id),
3469
+ strategy: verticalListSortingStrategy,
3470
+ children: column.cards.map((card) => /* @__PURE__ */ jsx(
3471
+ KanbanCardView,
3472
+ {
3473
+ card,
3474
+ columnId: column.id,
3475
+ dropBefore: isOver && over?.cardId === card.id && over?.after === false,
3476
+ dropAfter: isOver && over?.cardId === card.id && over?.after === true,
3477
+ onCardClick,
3478
+ renderCard
3479
+ },
3480
+ card.id
3481
+ ))
3482
+ }
3483
+ ),
3484
+ column.cards.length === 0 ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__empty", children: "Drop a card here" }) : null
3485
+ ] }),
3486
+ columnFooter ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__footer", children: columnFooter(column) }) : null
3487
+ ] });
3488
+ }
3489
+ function KanbanCardView({
3490
+ card,
3491
+ columnId,
3492
+ dropBefore,
3493
+ dropAfter,
3494
+ onCardClick,
3495
+ renderCard
3496
+ }) {
3497
+ const {
3498
+ attributes,
3499
+ listeners: listeners2,
3500
+ setNodeRef,
3501
+ transform,
3502
+ transition,
3503
+ isDragging
3504
+ } = useSortable({ id: card.id });
3505
+ return /* @__PURE__ */ jsx(
3506
+ "article",
3507
+ {
3508
+ ref: setNodeRef,
3509
+ ...attributes,
3510
+ ...listeners2,
3511
+ onClick: () => onCardClick?.(card, columnId),
3512
+ className: cx(
3513
+ "klun-kanban__card",
3514
+ isDragging && "klun-kanban__card--dragging",
3515
+ dropBefore && "klun-kanban__card--dropbefore",
3516
+ dropAfter && "klun-kanban__card--dropafter"
3517
+ ),
3518
+ style: {
3519
+ transform: CSS.Transform.toString(transform),
3520
+ transition,
3521
+ ...card.accent ? { boxShadow: `inset 3px 0 0 ${card.accent}` } : null
3522
+ },
3523
+ children: renderCard ? renderCard(card, columnId) : /* @__PURE__ */ jsxs(Fragment, { children: [
3524
+ /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-title", children: card.title }),
3525
+ card.description ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-desc", children: card.description }) : null,
3526
+ card.tags?.length ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-tags", children: card.tags.map((t, i) => /* @__PURE__ */ jsx("span", { children: t }, i)) }) : null,
3527
+ card.meta ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-meta", children: card.meta }) : null
3528
+ ] })
3529
+ }
3530
+ );
3531
+ }
3443
3532
  function VirtualTable({
3444
3533
  rows = [],
3445
3534
  columns = [],
@@ -4034,6 +4123,16 @@ function rowsToCsv(columns, rows) {
4034
4123
  const body = rows.map((r) => cols.map((c) => csvCell(c.copyValue ? c.copyValue(r) : r[c.key])).join(",")).join("\n");
4035
4124
  return head + "\n" + body;
4036
4125
  }
4126
+ function reorderRows(rows, fromId, toId, getRowId) {
4127
+ const ids = rows.map(getRowId);
4128
+ const from = ids.indexOf(fromId);
4129
+ const to = ids.indexOf(toId);
4130
+ if (from < 0 || to < 0 || from === to) return null;
4131
+ const next = rows.slice();
4132
+ const [moved] = next.splice(from, 1);
4133
+ next.splice(to, 0, moved);
4134
+ return { next, from, to };
4135
+ }
4037
4136
  function downloadCsv(filename, csv) {
4038
4137
  const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8;" });
4039
4138
  const url = URL.createObjectURL(blob);
@@ -4596,351 +4695,387 @@ function TableHead({
4596
4695
  })
4597
4696
  ] }) });
4598
4697
  }
4599
- function TableBody({
4600
- loading,
4601
- loadingRows,
4698
+ function TableRow(props) {
4699
+ if (!props.dragCol) return /* @__PURE__ */ jsx(RowBase, { ...props });
4700
+ return /* @__PURE__ */ jsx(SortableRow, { ...props });
4701
+ }
4702
+ function SortableRow(props) {
4703
+ const {
4704
+ attributes,
4705
+ listeners: listeners2,
4706
+ setNodeRef,
4707
+ setActivatorNodeRef,
4708
+ transform,
4709
+ transition,
4710
+ isDragging
4711
+ } = useSortable({ id: props.node.id });
4712
+ return /* @__PURE__ */ jsx(
4713
+ RowBase,
4714
+ {
4715
+ ...props,
4716
+ sortable: {
4717
+ attributes,
4718
+ listeners: listeners2,
4719
+ setNodeRef,
4720
+ setActivatorNodeRef,
4721
+ isDragging,
4722
+ style: { transform: CSS.Transform.toString(transform), transition }
4723
+ }
4724
+ }
4725
+ );
4726
+ }
4727
+ function RowBase({
4728
+ sortable,
4729
+ node,
4730
+ index,
4602
4731
  dragCol,
4603
- expandCol,
4604
- selectable,
4605
- visibleColumns,
4606
- pageRows,
4607
- colCount,
4608
- empty,
4609
- displayRows,
4610
- treeOpen,
4611
- setTreeOpen,
4732
+ tree,
4733
+ indentSize,
4734
+ zebra,
4612
4735
  selected,
4736
+ rowStatus,
4613
4737
  onRowClick,
4614
4738
  rowHref,
4739
+ expandCol,
4740
+ expandable,
4615
4741
  expanded,
4616
4742
  setExpanded,
4617
- expandable,
4618
- rowStatus,
4619
- drag,
4620
- setDrag,
4621
- reorder,
4622
- zebra,
4623
- contextMenu,
4624
- copyable,
4625
- copyRow,
4626
- setMenu,
4627
- leftFixed,
4628
- vBorderClass,
4743
+ treeOpen,
4744
+ setTreeOpen,
4745
+ selectable,
4629
4746
  selectionType,
4630
4747
  onSelectRow,
4748
+ visibleColumns,
4749
+ leftFixed,
4750
+ vBorderClass,
4631
4751
  fixedCell,
4632
4752
  editing,
4633
4753
  setEditing,
4634
4754
  startEdit,
4635
4755
  commitEdit,
4636
4756
  cancelEdit,
4637
- tree,
4638
- indentSize,
4757
+ contextMenu,
4758
+ copyable,
4759
+ copyRow,
4760
+ setMenu,
4761
+ colCount,
4639
4762
  onCopy
4640
4763
  }) {
4641
4764
  const { table } = useLocale();
4642
- const skel = /* @__PURE__ */ jsx("span", { className: "klun-table__skel" });
4643
- return /* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsxs("tr", { className: i ? "klun-table__row--bordered" : void 0, children: [
4644
- dragCol ? /* @__PURE__ */ jsx("td", { className: "klun-table__td" }) : null,
4645
- expandCol ? /* @__PURE__ */ jsx("td", { className: "klun-table__td", children: skel }) : null,
4646
- selectable ? /* @__PURE__ */ jsx("td", { className: "klun-table__td", children: skel }) : null,
4647
- visibleColumns.map((c) => /* @__PURE__ */ jsx("td", { className: "klun-table__td", children: skel }, c.key))
4648
- ] }, "sk" + i)) : pageRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "klun-table__empty-cell", children: empty != null ? empty : /* @__PURE__ */ jsxs("span", { className: "klun-table__empty", children: [
4649
- /* @__PURE__ */ jsx("i", { className: "ri-inbox-line klun-table__empty-icon" }),
4650
- table.noData
4651
- ] }) }) }) : displayRows.map((node, i) => {
4652
- const row = node.row;
4653
- const id = node.id;
4654
- const depth = node.depth;
4655
- const treeHasKids = node.hasChildren;
4656
- const treeIsOpen = treeOpen.has(id);
4657
- const toggleTree = () => {
4658
- const n = new Set(treeOpen);
4659
- n.has(id) ? n.delete(id) : n.add(id);
4660
- setTreeOpen(n);
4661
- };
4662
- const on = selected.includes(id);
4663
- const clickable = !!(onRowClick || rowHref);
4664
- const isOpen = expanded.has(id);
4665
- const canExpand = expandCol && (!expandable.rowExpandable || expandable.rowExpandable(row));
4666
- const toggleRow = () => {
4667
- const next = new Set(expanded);
4668
- next.has(id) ? next.delete(id) : next.add(id);
4669
- setExpanded(next);
4670
- expandable?.onExpand?.(row, !isOpen);
4671
- };
4672
- const st = rowStatus ? rowStatus(row) : null;
4673
- const dragging = !!(drag && drag.id === id);
4674
- const dropOver = !!(drag && drag.overId === id && drag.id !== id);
4675
- const borderTop = i > 0;
4676
- const tdBorder = borderTop ? "klun-table__td--bordered" : "";
4677
- return /* @__PURE__ */ jsxs(Fragment$1, { children: [
4678
- /* @__PURE__ */ jsxs(
4679
- "tr",
4680
- {
4681
- className: cx(
4682
- "klun-table__row",
4683
- on && "klun-table__row--selected",
4684
- zebra && i % 2 === 1 && "klun-table__row--zebra",
4685
- st && `klun-table__row--status-${st}`,
4686
- clickable && "klun-table__row--clickable",
4687
- dragging && "klun-table__row--dragging",
4688
- dropOver && "klun-table__row--dropover",
4689
- dropOver && drag.after && "klun-table__row--dropover-after"
4690
- ),
4691
- onClick: clickable ? () => rowHref ? window.location.href = rowHref(row) : onRowClick(row) : void 0,
4692
- onDragOver: dragCol && drag ? (e) => {
4693
- e.preventDefault();
4694
- const r = e.currentTarget.getBoundingClientRect();
4695
- const after = e.clientY - r.top > r.height / 2;
4696
- if (drag.overId !== id || drag.after !== after)
4697
- setDrag((dd) => dd ? { ...dd, overId: id, after } : dd);
4698
- } : void 0,
4699
- onDrop: dragCol && drag ? (e) => {
4765
+ const row = node.row;
4766
+ const id = node.id;
4767
+ const depth = node.depth;
4768
+ const treeHasKids = node.hasChildren;
4769
+ const treeIsOpen = treeOpen.has(id);
4770
+ const toggleTree = () => {
4771
+ const n = new Set(treeOpen);
4772
+ n.has(id) ? n.delete(id) : n.add(id);
4773
+ setTreeOpen(n);
4774
+ };
4775
+ const on = selected.includes(id);
4776
+ const clickable = !!(onRowClick || rowHref);
4777
+ const isOpen = expanded.has(id);
4778
+ const canExpand = expandCol && (!expandable.rowExpandable || expandable.rowExpandable(row));
4779
+ const toggleRow = () => {
4780
+ const next = new Set(expanded);
4781
+ next.has(id) ? next.delete(id) : next.add(id);
4782
+ setExpanded(next);
4783
+ expandable?.onExpand?.(row, !isOpen);
4784
+ };
4785
+ const st = rowStatus ? rowStatus(row) : null;
4786
+ const tdBorder = index > 0 ? "klun-table__td--bordered" : "";
4787
+ return /* @__PURE__ */ jsxs(Fragment$1, { children: [
4788
+ /* @__PURE__ */ jsxs(
4789
+ "tr",
4790
+ {
4791
+ ref: sortable?.setNodeRef,
4792
+ style: sortable?.style,
4793
+ className: cx(
4794
+ "klun-table__row",
4795
+ on && "klun-table__row--selected",
4796
+ zebra && index % 2 === 1 && "klun-table__row--zebra",
4797
+ st && `klun-table__row--status-${st}`,
4798
+ clickable && "klun-table__row--clickable",
4799
+ sortable?.isDragging && "klun-table__row--dragging"
4800
+ ),
4801
+ onClick: clickable ? () => rowHref ? window.location.href = rowHref(row) : onRowClick(row) : void 0,
4802
+ onContextMenu: contextMenu || copyable ? (e) => {
4803
+ const custom = contextMenu ? contextMenu(row, { copyRow, copyText }) : null;
4804
+ const items2 = custom && custom.length ? custom : [
4805
+ {
4806
+ label: table.copyRow,
4807
+ icon: "ri-file-copy-line",
4808
+ onClick: () => copyRow(row)
4809
+ }
4810
+ ];
4811
+ if (items2 && items2.length) {
4700
4812
  e.preventDefault();
4701
- reorder(drag.id, id, drag.after);
4702
- setDrag(null);
4703
- } : void 0,
4704
- onContextMenu: contextMenu || copyable ? (e) => {
4705
- const custom = contextMenu ? contextMenu(row, { copyRow, copyText }) : null;
4706
- const items2 = custom && custom.length ? custom : [
4707
- {
4708
- label: table.copyRow,
4709
- icon: "ri-file-copy-line",
4710
- onClick: () => copyRow(row)
4711
- }
4712
- ];
4713
- if (items2 && items2.length) {
4714
- e.preventDefault();
4715
- setMenu({ x: e.clientX, y: e.clientY, items: items2 });
4813
+ setMenu({ x: e.clientX, y: e.clientY, items: items2 });
4814
+ }
4815
+ } : void 0,
4816
+ children: [
4817
+ dragCol ? /* @__PURE__ */ jsx(
4818
+ "td",
4819
+ {
4820
+ ref: sortable?.setActivatorNodeRef,
4821
+ ...sortable?.attributes,
4822
+ ...sortable?.listeners,
4823
+ onClick: (e) => e.stopPropagation(),
4824
+ "aria-label": table.dragToReorder,
4825
+ title: table.dragToReorder,
4826
+ className: cx("klun-table__td", "klun-table__td--util", tdBorder),
4827
+ children: /* @__PURE__ */ jsx("span", { className: "klun-table__draghandle", children: /* @__PURE__ */ jsx("i", { className: "ri-draggable" }) })
4716
4828
  }
4717
- } : void 0,
4718
- children: [
4719
- dragCol ? /* @__PURE__ */ jsx("td", { className: cx("klun-table__td", "klun-table__td--util", tdBorder), children: /* @__PURE__ */ jsx(
4829
+ ) : null,
4830
+ expandCol ? /* @__PURE__ */ jsx(
4831
+ "td",
4832
+ {
4833
+ className: cx(
4834
+ "klun-table__td",
4835
+ "klun-table__td--lead",
4836
+ tdBorder,
4837
+ (leftFixed.length || selectable) && "klun-table__cell--fixed klun-table__cell--fixed-body"
4838
+ ),
4839
+ style: leftFixed.length || selectable ? { left: 0 } : void 0,
4840
+ children: canExpand ? /* @__PURE__ */ jsx(
4841
+ "button",
4842
+ {
4843
+ type: "button",
4844
+ "aria-label": isOpen ? table.collapse : table.expand,
4845
+ "aria-expanded": isOpen,
4846
+ onClick: (e) => {
4847
+ e.stopPropagation();
4848
+ toggleRow();
4849
+ },
4850
+ className: "klun-table__expand-btn",
4851
+ children: /* @__PURE__ */ jsx(
4852
+ "i",
4853
+ {
4854
+ className: cx(
4855
+ "ri-arrow-right-s-line",
4856
+ "klun-table__chevron",
4857
+ isOpen && "klun-table__chevron--open"
4858
+ )
4859
+ }
4860
+ )
4861
+ }
4862
+ ) : null
4863
+ }
4864
+ ) : null,
4865
+ selectable ? /* @__PURE__ */ jsx(
4866
+ "td",
4867
+ {
4868
+ className: cx(
4869
+ "klun-table__td",
4870
+ tdBorder,
4871
+ vBorderClass,
4872
+ leftFixed.length && "klun-table__cell--fixed klun-table__cell--fixed-body"
4873
+ ),
4874
+ style: leftFixed.length ? { left: expandCol ? 44 : 0 } : void 0,
4875
+ children: selectionType === "radio" ? /* @__PURE__ */ jsx(
4876
+ "button",
4877
+ {
4878
+ type: "button",
4879
+ role: "radio",
4880
+ "aria-checked": on,
4881
+ onClick: (e) => {
4882
+ e.stopPropagation();
4883
+ onSelectRow?.(id);
4884
+ },
4885
+ className: cx("klun-table__radio", on && "klun-table__radio--on"),
4886
+ children: on ? /* @__PURE__ */ jsx("span", { className: "klun-table__radio-dot" }) : null
4887
+ }
4888
+ ) : /* @__PURE__ */ jsx(Check, { checked: on, onChange: () => onSelectRow?.(id) })
4889
+ }
4890
+ ) : null,
4891
+ visibleColumns.map((c, ci) => {
4892
+ const fx = fixedCell(c, false);
4893
+ const last = ci === visibleColumns.length - 1;
4894
+ const content = c.render ? c.render(row) : row[c.key];
4895
+ const inner = c.copyable ? /* @__PURE__ */ jsxs(
4720
4896
  "span",
4721
4897
  {
4722
- draggable: true,
4723
- onDragStart: (e) => {
4724
- e.stopPropagation();
4725
- setDrag({ id, overId: id, after: false });
4726
- try {
4727
- e.dataTransfer.effectAllowed = "move";
4728
- e.dataTransfer.setData("text/plain", String(id));
4729
- } catch (x) {
4730
- }
4898
+ className: "klun-table__copycell",
4899
+ onMouseEnter: (e) => {
4900
+ const b = e.currentTarget.querySelector(
4901
+ "[data-copy]"
4902
+ );
4903
+ if (b) b.style.opacity = "1";
4731
4904
  },
4732
- onDragEnd: () => setDrag(null),
4905
+ onMouseLeave: (e) => {
4906
+ const b = e.currentTarget.querySelector(
4907
+ "[data-copy]"
4908
+ );
4909
+ if (b) b.style.opacity = "0";
4910
+ },
4911
+ children: [
4912
+ /* @__PURE__ */ jsx("span", { className: c.ellipsis ? "klun-table__ellipsis" : void 0, children: content }),
4913
+ /* @__PURE__ */ jsx(
4914
+ "button",
4915
+ {
4916
+ type: "button",
4917
+ "data-copy": true,
4918
+ "aria-label": table.copy,
4919
+ onClick: (e) => {
4920
+ e.stopPropagation();
4921
+ copyText(c.copyValue ? c.copyValue(row) : row[c.key]);
4922
+ onCopy?.("cell", row, c.key);
4923
+ },
4924
+ className: "klun-table__copybtn",
4925
+ children: /* @__PURE__ */ jsx("i", { className: "ri-file-copy-line" })
4926
+ }
4927
+ )
4928
+ ]
4929
+ }
4930
+ ) : content;
4931
+ const isEditing = editing && editing.id === id && editing.key === c.key;
4932
+ const editor = isEditing ? c.editor === "select" ? /* @__PURE__ */ jsx(
4933
+ "select",
4934
+ {
4935
+ autoFocus: true,
4936
+ value: editing.value ?? "",
4733
4937
  onClick: (e) => e.stopPropagation(),
4734
- "aria-label": table.dragToReorder,
4735
- title: table.dragToReorder,
4736
- className: "klun-table__draghandle",
4737
- children: /* @__PURE__ */ jsx("i", { className: "ri-draggable" })
4938
+ onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
4939
+ onBlur: commitEdit,
4940
+ onKeyDown: (e) => {
4941
+ if (e.key === "Enter") commitEdit();
4942
+ if (e.key === "Escape") cancelEdit();
4943
+ },
4944
+ className: "klun-table__editor",
4945
+ children: (c.options || []).map((o) => {
4946
+ const ov = typeof o === "object" ? o.value : o;
4947
+ const ol = typeof o === "object" ? o.label : o;
4948
+ return /* @__PURE__ */ jsx("option", { value: ov, children: ol }, ov);
4949
+ })
4738
4950
  }
4739
- ) }) : null,
4740
- expandCol ? /* @__PURE__ */ jsx(
4741
- "td",
4951
+ ) : /* @__PURE__ */ jsx(
4952
+ "input",
4742
4953
  {
4743
- className: cx(
4744
- "klun-table__td",
4745
- "klun-table__td--lead",
4746
- tdBorder,
4747
- (leftFixed.length || selectable) && "klun-table__cell--fixed klun-table__cell--fixed-body"
4748
- ),
4749
- style: leftFixed.length || selectable ? { left: 0 } : void 0,
4750
- children: canExpand ? /* @__PURE__ */ jsx(
4751
- "button",
4752
- {
4753
- type: "button",
4754
- "aria-label": isOpen ? table.collapse : table.expand,
4755
- "aria-expanded": isOpen,
4756
- onClick: (e) => {
4757
- e.stopPropagation();
4758
- toggleRow();
4759
- },
4760
- className: "klun-table__expand-btn",
4761
- children: /* @__PURE__ */ jsx(
4762
- "i",
4763
- {
4764
- className: cx(
4765
- "ri-arrow-right-s-line",
4766
- "klun-table__chevron",
4767
- isOpen && "klun-table__chevron--open"
4768
- )
4769
- }
4770
- )
4771
- }
4772
- ) : null
4954
+ autoFocus: true,
4955
+ type: c.editor === "number" ? "number" : "text",
4956
+ value: editing.value ?? "",
4957
+ onClick: (e) => e.stopPropagation(),
4958
+ onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
4959
+ onBlur: commitEdit,
4960
+ onKeyDown: (e) => {
4961
+ if (e.key === "Enter") commitEdit();
4962
+ if (e.key === "Escape") cancelEdit();
4963
+ },
4964
+ className: "klun-table__editor",
4965
+ style: { textAlign: c.align || "left" }
4773
4966
  }
4774
- ) : null,
4775
- selectable ? /* @__PURE__ */ jsx(
4967
+ ) : null;
4968
+ return /* @__PURE__ */ jsx(
4776
4969
  "td",
4777
4970
  {
4971
+ onDoubleClick: c.editable && !isEditing ? (e) => {
4972
+ e.stopPropagation();
4973
+ startEdit(id, c, row);
4974
+ } : void 0,
4778
4975
  className: cx(
4779
4976
  "klun-table__td",
4780
4977
  tdBorder,
4781
- vBorderClass,
4782
- leftFixed.length && "klun-table__cell--fixed klun-table__cell--fixed-body"
4978
+ isEditing && "klun-table__td--editing",
4979
+ (c.nowrap || c.ellipsis) && "klun-table__td--nowrap",
4980
+ c.ellipsis && "klun-table__td--ellipsis",
4981
+ c.editable && !isEditing && "klun-table__td--editable",
4982
+ !last && vBorderClass,
4983
+ fx.cls
4783
4984
  ),
4784
- style: leftFixed.length ? { left: expandCol ? 44 : 0 } : void 0,
4785
- children: selectionType === "radio" ? /* @__PURE__ */ jsx(
4786
- "button",
4787
- {
4788
- type: "button",
4789
- role: "radio",
4790
- "aria-checked": on,
4791
- onClick: (e) => {
4792
- e.stopPropagation();
4793
- onSelectRow?.(id);
4794
- },
4795
- className: cx("klun-table__radio", on && "klun-table__radio--on"),
4796
- children: on ? /* @__PURE__ */ jsx("span", { className: "klun-table__radio-dot" }) : null
4797
- }
4798
- ) : /* @__PURE__ */ jsx(Check, { checked: on, onChange: () => onSelectRow?.(id) })
4799
- }
4800
- ) : null,
4801
- visibleColumns.map((c, ci) => {
4802
- const fx = fixedCell(c, false);
4803
- const last = ci === visibleColumns.length - 1;
4804
- const content = c.render ? c.render(row) : row[c.key];
4805
- const inner = c.copyable ? /* @__PURE__ */ jsxs(
4806
- "span",
4807
- {
4808
- className: "klun-table__copycell",
4809
- onMouseEnter: (e) => {
4810
- const b = e.currentTarget.querySelector(
4811
- "[data-copy]"
4812
- );
4813
- if (b) b.style.opacity = "1";
4814
- },
4815
- onMouseLeave: (e) => {
4816
- const b = e.currentTarget.querySelector(
4817
- "[data-copy]"
4818
- );
4819
- if (b) b.style.opacity = "0";
4820
- },
4821
- children: [
4822
- /* @__PURE__ */ jsx("span", { className: c.ellipsis ? "klun-table__ellipsis" : void 0, children: content }),
4823
- /* @__PURE__ */ jsx(
4824
- "button",
4825
- {
4826
- type: "button",
4827
- "data-copy": true,
4828
- "aria-label": table.copy,
4829
- onClick: (e) => {
4830
- e.stopPropagation();
4831
- copyText(c.copyValue ? c.copyValue(row) : row[c.key]);
4832
- onCopy?.("cell", row, c.key);
4833
- },
4834
- className: "klun-table__copybtn",
4835
- children: /* @__PURE__ */ jsx("i", { className: "ri-file-copy-line" })
4836
- }
4837
- )
4838
- ]
4839
- }
4840
- ) : content;
4841
- const isEditing = editing && editing.id === id && editing.key === c.key;
4842
- const editor = isEditing ? c.editor === "select" ? /* @__PURE__ */ jsx(
4843
- "select",
4844
- {
4845
- autoFocus: true,
4846
- value: editing.value ?? "",
4847
- onClick: (e) => e.stopPropagation(),
4848
- onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
4849
- onBlur: commitEdit,
4850
- onKeyDown: (e) => {
4851
- if (e.key === "Enter") commitEdit();
4852
- if (e.key === "Escape") cancelEdit();
4853
- },
4854
- className: "klun-table__editor",
4855
- children: (c.options || []).map((o) => {
4856
- const ov = typeof o === "object" ? o.value : o;
4857
- const ol = typeof o === "object" ? o.label : o;
4858
- return /* @__PURE__ */ jsx("option", { value: ov, children: ol }, ov);
4859
- })
4860
- }
4861
- ) : /* @__PURE__ */ jsx(
4862
- "input",
4863
- {
4864
- autoFocus: true,
4865
- type: c.editor === "number" ? "number" : "text",
4866
- value: editing.value ?? "",
4867
- onClick: (e) => e.stopPropagation(),
4868
- onChange: (e) => setEditing((ed) => ed ? { ...ed, value: e.target.value } : ed),
4869
- onBlur: commitEdit,
4870
- onKeyDown: (e) => {
4871
- if (e.key === "Enter") commitEdit();
4872
- if (e.key === "Escape") cancelEdit();
4873
- },
4874
- className: "klun-table__editor",
4875
- style: { textAlign: c.align || "left" }
4876
- }
4877
- ) : null;
4878
- return /* @__PURE__ */ jsx(
4879
- "td",
4880
- {
4881
- onDoubleClick: c.editable && !isEditing ? (e) => {
4882
- e.stopPropagation();
4883
- startEdit(id, c, row);
4884
- } : void 0,
4885
- className: cx(
4886
- "klun-table__td",
4887
- tdBorder,
4888
- isEditing && "klun-table__td--editing",
4889
- (c.nowrap || c.ellipsis) && "klun-table__td--nowrap",
4890
- c.ellipsis && "klun-table__td--ellipsis",
4891
- c.editable && !isEditing && "klun-table__td--editable",
4892
- !last && vBorderClass,
4893
- fx.cls
4894
- ),
4895
- style: {
4896
- textAlign: c.align || "left",
4897
- ...c.ellipsis ? { maxWidth: c.width || 200 } : null,
4898
- ...fx.style
4899
- },
4900
- title: c.editable && !isEditing ? table.editHint : c.ellipsis && typeof content === "string" ? content : void 0,
4901
- children: isEditing ? editor : tree && ci === 0 ? /* @__PURE__ */ jsxs("span", { className: "klun-table__tree-cell", children: [
4902
- /* @__PURE__ */ jsx(
4903
- "span",
4904
- {
4905
- className: "klun-table__tree-indent",
4906
- style: { width: depth * indentSize }
4907
- }
4908
- ),
4909
- treeHasKids ? /* @__PURE__ */ jsx(
4910
- "button",
4911
- {
4912
- type: "button",
4913
- "aria-label": treeIsOpen ? table.collapse : table.expand,
4914
- "aria-expanded": treeIsOpen,
4915
- onClick: (e) => {
4916
- e.stopPropagation();
4917
- toggleTree();
4918
- },
4919
- className: "klun-table__tree-toggle",
4920
- children: /* @__PURE__ */ jsx(
4921
- "i",
4922
- {
4923
- className: cx(
4924
- "ri-arrow-right-s-line",
4925
- "klun-table__chevron",
4926
- treeIsOpen && "klun-table__chevron--open"
4927
- )
4928
- }
4929
- )
4930
- }
4931
- ) : /* @__PURE__ */ jsx("span", { className: "klun-table__tree-spacer" }),
4932
- inner
4933
- ] }) : inner
4985
+ style: {
4986
+ textAlign: c.align || "left",
4987
+ ...c.ellipsis ? { maxWidth: c.width || 200 } : null,
4988
+ ...fx.style
4934
4989
  },
4935
- c.key
4936
- );
4937
- })
4938
- ]
4939
- }
4940
- ),
4941
- expandCol && isOpen ? /* @__PURE__ */ jsx("tr", { className: "klun-table__expand-row", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "klun-table__expand-cell", children: /* @__PURE__ */ jsx("div", { className: "klun-table__expand-panel", children: expandable.render(row) }) }) }) : null
4942
- ] }, id);
4943
- }) });
4990
+ title: c.editable && !isEditing ? table.editHint : c.ellipsis && typeof content === "string" ? content : void 0,
4991
+ children: isEditing ? editor : tree && ci === 0 ? /* @__PURE__ */ jsxs("span", { className: "klun-table__tree-cell", children: [
4992
+ /* @__PURE__ */ jsx(
4993
+ "span",
4994
+ {
4995
+ className: "klun-table__tree-indent",
4996
+ style: { width: depth * indentSize }
4997
+ }
4998
+ ),
4999
+ treeHasKids ? /* @__PURE__ */ jsx(
5000
+ "button",
5001
+ {
5002
+ type: "button",
5003
+ "aria-label": treeIsOpen ? table.collapse : table.expand,
5004
+ "aria-expanded": treeIsOpen,
5005
+ onClick: (e) => {
5006
+ e.stopPropagation();
5007
+ toggleTree();
5008
+ },
5009
+ className: "klun-table__tree-toggle",
5010
+ children: /* @__PURE__ */ jsx(
5011
+ "i",
5012
+ {
5013
+ className: cx(
5014
+ "ri-arrow-right-s-line",
5015
+ "klun-table__chevron",
5016
+ treeIsOpen && "klun-table__chevron--open"
5017
+ )
5018
+ }
5019
+ )
5020
+ }
5021
+ ) : /* @__PURE__ */ jsx("span", { className: "klun-table__tree-spacer" }),
5022
+ inner
5023
+ ] }) : inner
5024
+ },
5025
+ c.key
5026
+ );
5027
+ })
5028
+ ]
5029
+ }
5030
+ ),
5031
+ expandCol && isOpen ? /* @__PURE__ */ jsx("tr", { className: "klun-table__expand-row", children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "klun-table__expand-cell", children: /* @__PURE__ */ jsx("div", { className: "klun-table__expand-panel", children: expandable.render(row) }) }) }) : null
5032
+ ] });
5033
+ }
5034
+ function TableBody({
5035
+ loading,
5036
+ loadingRows,
5037
+ pageRows,
5038
+ empty,
5039
+ displayRows,
5040
+ dragCol,
5041
+ expandCol,
5042
+ selectable,
5043
+ visibleColumns,
5044
+ colCount,
5045
+ ...row
5046
+ }) {
5047
+ const { table } = useLocale();
5048
+ const skel = /* @__PURE__ */ jsx("span", { className: "klun-table__skel" });
5049
+ const bodyRows = displayRows.map((node, index) => /* @__PURE__ */ jsx(
5050
+ TableRow,
5051
+ {
5052
+ node,
5053
+ index,
5054
+ dragCol,
5055
+ expandCol,
5056
+ selectable,
5057
+ visibleColumns,
5058
+ colCount,
5059
+ ...row
5060
+ },
5061
+ node.id
5062
+ ));
5063
+ return /* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsxs("tr", { className: i ? "klun-table__row--bordered" : void 0, children: [
5064
+ dragCol ? /* @__PURE__ */ jsx("td", { className: "klun-table__td" }) : null,
5065
+ expandCol ? /* @__PURE__ */ jsx("td", { className: "klun-table__td", children: skel }) : null,
5066
+ selectable ? /* @__PURE__ */ jsx("td", { className: "klun-table__td", children: skel }) : null,
5067
+ visibleColumns.map((c) => /* @__PURE__ */ jsx("td", { className: "klun-table__td", children: skel }, c.key))
5068
+ ] }, "sk" + i)) : pageRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "klun-table__empty-cell", children: empty != null ? empty : /* @__PURE__ */ jsxs("span", { className: "klun-table__empty", children: [
5069
+ /* @__PURE__ */ jsx("i", { className: "ri-inbox-line klun-table__empty-icon" }),
5070
+ table.noData
5071
+ ] }) }) }) : dragCol ? /* @__PURE__ */ jsx(
5072
+ SortableContext,
5073
+ {
5074
+ items: displayRows.map((n) => n.id),
5075
+ strategy: verticalListSortingStrategy,
5076
+ children: bodyRows
5077
+ }
5078
+ ) : bodyRows });
4944
5079
  }
4945
5080
  function TableFooter({
4946
5081
  summary,
@@ -5143,28 +5278,6 @@ function useExpandedRows({
5143
5278
  }, [tree, pageRows, treeOpen, childrenKey, getRowId]);
5144
5279
  return { treeOpen, setTreeOpen, expanded, setExpanded, displayRows };
5145
5280
  }
5146
- function useRowReorder({
5147
- rows,
5148
- getRowId,
5149
- onReorder
5150
- }) {
5151
- const [drag, setDrag] = useState(null);
5152
- const reorder = (fromId, toId, after) => {
5153
- if (fromId === toId) return;
5154
- const ids = rows.map(getRowId);
5155
- const from = ids.indexOf(fromId);
5156
- const to = ids.indexOf(toId);
5157
- if (from < 0 || to < 0) return;
5158
- const next = rows.slice();
5159
- const [moved] = next.splice(from, 1);
5160
- let insert = rows.findIndex((r, i) => getRowId(r, i) === toId);
5161
- if (after) insert += 1;
5162
- if (from < insert) insert -= 1;
5163
- next.splice(insert, 0, moved);
5164
- onReorder?.(next, from, insert);
5165
- };
5166
- return { drag, setDrag, reorder };
5167
- }
5168
5281
  function useCellEdit({
5169
5282
  columns,
5170
5283
  rows,
@@ -5188,6 +5301,27 @@ function useCellEdit({
5188
5301
  const cancelEdit = () => setEditing(null);
5189
5302
  return { editing, setEditing, startEdit, commitEdit, cancelEdit };
5190
5303
  }
5304
+ var dragModifiers = [({ transform }) => ({ ...transform, x: 0 })];
5305
+ function RowsDnd({
5306
+ enabled,
5307
+ sensors,
5308
+ onDragEnd,
5309
+ instructions,
5310
+ children
5311
+ }) {
5312
+ if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children });
5313
+ return /* @__PURE__ */ jsx(
5314
+ DndContext,
5315
+ {
5316
+ sensors,
5317
+ collisionDetection: closestCenter,
5318
+ modifiers: dragModifiers,
5319
+ onDragEnd,
5320
+ accessibility: { screenReaderInstructions: { draggable: instructions } },
5321
+ children
5322
+ }
5323
+ );
5324
+ }
5191
5325
  var DENSITY = {
5192
5326
  compact: "klun-table--compact",
5193
5327
  comfortable: "klun-table--comfortable",
@@ -5334,7 +5468,16 @@ function Table({
5334
5468
  );
5335
5469
  const showToolbar = title != null || toolbar != null || !!exportable || columnSettings;
5336
5470
  const clearSelection = () => onSelectAll && onSelectAll([]);
5337
- const { drag, setDrag, reorder } = useRowReorder({ rows, getRowId, onReorder });
5471
+ const { table: t } = useLocale();
5472
+ const sensors = useSensors(
5473
+ useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
5474
+ useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
5475
+ );
5476
+ const handleDragEnd = ({ active, over }) => {
5477
+ if (!over) return;
5478
+ const moved = reorderRows(rows, active.id, over.id, getRowId);
5479
+ if (moved) onReorder?.(moved.next, moved.from, moved.to);
5480
+ };
5338
5481
  const { editing, setEditing, startEdit, commitEdit, cancelEdit } = useCellEdit({
5339
5482
  columns,
5340
5483
  rows,
@@ -5377,113 +5520,119 @@ function Table({
5377
5520
  }
5378
5521
  ),
5379
5522
  /* @__PURE__ */ jsx(
5380
- "div",
5523
+ RowsDnd,
5381
5524
  {
5382
- className: "klun-table__scroller",
5383
- style: stickyHeader ? {
5384
- ["--klun-table-max-height"]: `${style && style.maxHeight || 420}${typeof (style && style.maxHeight) === "number" ? "px" : ""}`
5385
- } : void 0,
5386
- children: /* @__PURE__ */ jsxs(
5387
- "table",
5525
+ enabled: dragCol,
5526
+ sensors,
5527
+ onDragEnd: handleDragEnd,
5528
+ instructions: t.dragToReorder,
5529
+ children: /* @__PURE__ */ jsx(
5530
+ "div",
5388
5531
  {
5389
- className: cx(
5390
- "klun-table__table",
5391
- Object.keys(colW).length && "klun-table__table--fixed-layout"
5392
- ),
5393
- children: [
5394
- /* @__PURE__ */ jsxs("colgroup", { children: [
5395
- dragCol ? /* @__PURE__ */ jsx("col", { className: "klun-table__col-util" }) : null,
5396
- expandCol ? /* @__PURE__ */ jsx("col", { className: "klun-table__col-lead" }) : null,
5397
- selectable ? /* @__PURE__ */ jsx("col", { className: "klun-table__col-lead" }) : null,
5398
- columns.map((c) => {
5399
- const w = widthOf(c);
5400
- return hiddenCols.has(c.key) ? null : /* @__PURE__ */ jsx("col", { style: w ? { width: w } : void 0 }, c.key);
5401
- })
5402
- ] }),
5403
- caption ? /* @__PURE__ */ jsx("caption", { className: "klun-table__caption", children: caption }) : null,
5404
- /* @__PURE__ */ jsx(
5405
- TableHead,
5406
- {
5407
- dragCol,
5408
- expandCol,
5409
- selectable,
5410
- leftFixed,
5411
- vBorderClass,
5412
- selectionType,
5413
- allOn,
5414
- someOn,
5415
- toggleAll,
5416
- visibleColumns,
5417
- sortable,
5418
- activeSort,
5419
- resizable,
5420
- widthOf,
5421
- fixedCell,
5422
- setSort,
5423
- activeFilters,
5424
- setFilter,
5425
- startResize
5426
- }
5427
- ),
5428
- /* @__PURE__ */ jsx(
5429
- TableBody,
5430
- {
5431
- loading,
5432
- loadingRows,
5433
- dragCol,
5434
- expandCol,
5435
- selectable,
5436
- visibleColumns,
5437
- pageRows,
5438
- colCount,
5439
- empty,
5440
- displayRows,
5441
- treeOpen,
5442
- setTreeOpen,
5443
- selected,
5444
- onRowClick,
5445
- rowHref,
5446
- expanded,
5447
- setExpanded,
5448
- expandable,
5449
- rowStatus,
5450
- drag,
5451
- setDrag,
5452
- reorder,
5453
- zebra,
5454
- contextMenu,
5455
- copyable,
5456
- copyRow,
5457
- setMenu,
5458
- leftFixed,
5459
- vBorderClass,
5460
- selectionType,
5461
- onSelectRow,
5462
- fixedCell,
5463
- editing,
5464
- setEditing,
5465
- startEdit,
5466
- commitEdit,
5467
- cancelEdit,
5468
- tree,
5469
- indentSize,
5470
- onCopy
5471
- }
5472
- ),
5473
- /* @__PURE__ */ jsx(
5474
- TableFooter,
5475
- {
5476
- summary,
5477
- expandCol,
5478
- selectable,
5479
- pageRows,
5480
- visibleColumns,
5481
- vBorderClass,
5482
- footer,
5483
- colCount
5484
- }
5485
- )
5486
- ]
5532
+ className: "klun-table__scroller",
5533
+ style: stickyHeader ? {
5534
+ ["--klun-table-max-height"]: `${style && style.maxHeight || 420}${typeof (style && style.maxHeight) === "number" ? "px" : ""}`
5535
+ } : void 0,
5536
+ children: /* @__PURE__ */ jsxs(
5537
+ "table",
5538
+ {
5539
+ className: cx(
5540
+ "klun-table__table",
5541
+ Object.keys(colW).length && "klun-table__table--fixed-layout"
5542
+ ),
5543
+ children: [
5544
+ /* @__PURE__ */ jsxs("colgroup", { children: [
5545
+ dragCol ? /* @__PURE__ */ jsx("col", { className: "klun-table__col-util" }) : null,
5546
+ expandCol ? /* @__PURE__ */ jsx("col", { className: "klun-table__col-lead" }) : null,
5547
+ selectable ? /* @__PURE__ */ jsx("col", { className: "klun-table__col-lead" }) : null,
5548
+ columns.map((c) => {
5549
+ const w = widthOf(c);
5550
+ return hiddenCols.has(c.key) ? null : /* @__PURE__ */ jsx("col", { style: w ? { width: w } : void 0 }, c.key);
5551
+ })
5552
+ ] }),
5553
+ caption ? /* @__PURE__ */ jsx("caption", { className: "klun-table__caption", children: caption }) : null,
5554
+ /* @__PURE__ */ jsx(
5555
+ TableHead,
5556
+ {
5557
+ dragCol,
5558
+ expandCol,
5559
+ selectable,
5560
+ leftFixed,
5561
+ vBorderClass,
5562
+ selectionType,
5563
+ allOn,
5564
+ someOn,
5565
+ toggleAll,
5566
+ visibleColumns,
5567
+ sortable,
5568
+ activeSort,
5569
+ resizable,
5570
+ widthOf,
5571
+ fixedCell,
5572
+ setSort,
5573
+ activeFilters,
5574
+ setFilter,
5575
+ startResize
5576
+ }
5577
+ ),
5578
+ /* @__PURE__ */ jsx(
5579
+ TableBody,
5580
+ {
5581
+ loading,
5582
+ loadingRows,
5583
+ dragCol,
5584
+ expandCol,
5585
+ selectable,
5586
+ visibleColumns,
5587
+ pageRows,
5588
+ colCount,
5589
+ empty,
5590
+ displayRows,
5591
+ treeOpen,
5592
+ setTreeOpen,
5593
+ selected,
5594
+ onRowClick,
5595
+ rowHref,
5596
+ expanded,
5597
+ setExpanded,
5598
+ expandable,
5599
+ rowStatus,
5600
+ zebra,
5601
+ contextMenu,
5602
+ copyable,
5603
+ copyRow,
5604
+ setMenu,
5605
+ leftFixed,
5606
+ vBorderClass,
5607
+ selectionType,
5608
+ onSelectRow,
5609
+ fixedCell,
5610
+ editing,
5611
+ setEditing,
5612
+ startEdit,
5613
+ commitEdit,
5614
+ cancelEdit,
5615
+ tree,
5616
+ indentSize,
5617
+ onCopy
5618
+ }
5619
+ ),
5620
+ /* @__PURE__ */ jsx(
5621
+ TableFooter,
5622
+ {
5623
+ summary,
5624
+ expandCol,
5625
+ selectable,
5626
+ pageRows,
5627
+ visibleColumns,
5628
+ vBorderClass,
5629
+ footer,
5630
+ colCount
5631
+ }
5632
+ )
5633
+ ]
5634
+ }
5635
+ )
5487
5636
  }
5488
5637
  )
5489
5638
  }
@@ -12092,5 +12241,5 @@ var Popconfirm = forwardRef(function Popconfirm2({
12092
12241
  Popconfirm.displayName = "Popconfirm";
12093
12242
 
12094
12243
  export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kanban, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, VirtualTable, Wizard, arSA, deDE, describeCron, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
12095
- //# sourceMappingURL=chunk-TREMQLWT.js.map
12096
- //# sourceMappingURL=chunk-TREMQLWT.js.map
12244
+ //# sourceMappingURL=chunk-MBL2CDDG.js.map
12245
+ //# sourceMappingURL=chunk-MBL2CDDG.js.map