@simplysm/solid 13.0.76 → 13.0.77

package/dist/components/data/sheet/DataSheet.js

@@ -1,25 +1,24 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { addEventListener as _$addEventListener } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<button title="Sheet Settings"type=button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div class=flex-1>`), _tmpl$3 = /* @__PURE__ */ _$template(`<col>`), _tmpl$4 = /* @__PURE__ */ _$template(`<tr>`), _tmpl$5 = /* @__PURE__ */ _$template(`<div><div data-sheet-scroll><table><colgroup></colgroup><thead></thead><tbody></tbody></table><div></div><div data-reorder-indicator style=display:none>`), _tmpl$6 = /* @__PURE__ */ _$template(`<th style=top:0;left:0><div><button type=button>`), _tmpl$7 = /* @__PURE__ */ _$template(`<div>`), _tmpl$8 = /* @__PURE__ */ _$template(`<th style=top:0>`), _tmpl$9 = /* @__PURE__ */ _$template(`<th><div><div class=flex-1>`), _tmpl$0 = /* @__PURE__ */ _$template(`<sub>`), _tmpl$1 = /* @__PURE__ */ _$template(`<th><div>`), _tmpl$10 = /* @__PURE__ */ _$template(`<button type=button>`), _tmpl$11 = /* @__PURE__ */ _$template(`<td style=left:0><div>`), _tmpl$12 = /* @__PURE__ */ _$template(`<td><div><div>`), _tmpl$13 = /* @__PURE__ */ _$template(`<div><div>`), _tmpl$14 = /* @__PURE__ */ _$template(`<td>`);
+var _tmpl$ = /* @__PURE__ */ _$template(`<button type=button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<td style=left:0><div>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div><div>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div>`), _tmpl$5 = /* @__PURE__ */ _$template(`<td>`), _tmpl$6 = /* @__PURE__ */ _$template(`<td><div><div>`), _tmpl$7 = /* @__PURE__ */ _$template(`<tr>`), _tmpl$8 = /* @__PURE__ */ _$template(`<th><div>`), _tmpl$9 = /* @__PURE__ */ _$template(`<button title="Sheet Settings"type=button>`), _tmpl$0 = /* @__PURE__ */ _$template(`<div><div class=flex-1>`), _tmpl$1 = /* @__PURE__ */ _$template(`<col>`), _tmpl$10 = /* @__PURE__ */ _$template(`<div><div data-sheet-scroll><table><colgroup></colgroup><thead></thead><tbody></tbody></table><div></div><div data-reorder-indicator style=display:none>`), _tmpl$11 = /* @__PURE__ */ _$template(`<th style=top:0;left:0><div><button type=button>`), _tmpl$12 = /* @__PURE__ */ _$template(`<th style=top:0>`);
 import { createMemo, createSignal, For, Show, splitProps, useContext } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { IconArrowsSort, IconChevronDown, IconChevronRight, IconGripVertical, IconSettings, IconSortAscending, IconSortDescending } from "@tabler/icons-solidjs";
+import { IconChevronDown, IconChevronRight, IconGripVertical, IconSettings } from "@tabler/icons-solidjs";
 import "@simplysm/core-browser";
 import { DataSheetColumn, createColumnSlotsAccessor } from "./DataSheetColumn.js";
-import { DataSheetConfigDialog } from "./DataSheetConfigDialog.js";
-import { buildHeaderTable, normalizeHeader } from "./sheetUtils.js";
+import { buildHeaderTable, normalizeHeader } from "./DataSheet.utils.js";
 import { startPointerDrag } from "../../../helpers/startPointerDrag.js";
 import { Icon } from "../../display/Icon.js";
 import { Checkbox } from "../../form-control/checkbox/Checkbox.js";
@@ -34,8 +33,9 @@ import { useDataSheetExpansion } from "./hooks/useDataSheetExpansion.js";
 import { useDataSheetSelection } from "./hooks/useDataSheetSelection.js";
 import { useDataSheetReorder } from "./hooks/useDataSheetReorder.js";
 import { useDataSheetFixedColumns } from "./hooks/useDataSheetFixedColumns.js";
+import { useDataSheetHeaderCell } from "./hooks/useDataSheetHeaderCell.js";
 const DataSheetInner = (props) => {
-  const [local] = splitProps(props, ["items", "storageKey", "hideConfigBar", "inset", "contentStyle", "sorts", "onSortsChange", "autoSort", "page", "onPageChange", "totalPageCount", "pageSize", "displayPageCount", "expandedItems", "onExpandedItemsChange", "itemChildren", "selectionMode", "selection", "onSelectionChange", "autoSelect", "itemSelectable", "cellClass", "cellStyle", "onItemsReorder", "class", "children"]);
+  const [local] = splitProps(props, ["items", "storageKey", "hideConfigBar", "inset", "contentStyle", "sorts", "onSortsChange", "autoSort", "page", "onPageChange", "totalPageCount", "pageSize", "displayPageCount", "expandedItems", "onExpandedItemsChange", "itemChildren", "selectionMode", "selection", "onSelectionChange", "autoSelect", "isItemSelectable", "cellClass", "cellStyle", "onItemsReorder", "class", "children"]);
   const dialog = useContext(DialogContext);
   const i18n = useI18n();
   const [rawColumns, ColumnsProvider] = createColumnSlotsAccessor();
@@ -285,8 +285,8 @@ const DataSheetInner = (props) => {
     get onSelectionChange() {
       return local.onSelectionChange;
     },
-    get itemSelectable() {
-      return local.itemSelectable;
+    get isItemSelectable() {
+      return local.isItemSelectable;
     }
   }, displayItems);
   function selectItem(item) {
@@ -341,18 +341,213 @@ const DataSheetInner = (props) => {
     return headerRows + summaryRow;
   });
   void dragState;
+  const {
+    renderHeaderCell
+  } = useDataSheetHeaderCell({
+    effectiveColumns,
+    headerRowTops,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef,
+    toggleSort,
+    getSortDef,
+    sortIndex,
+    onResizerPointerdown,
+    onResizerDoubleClick,
+    thClass,
+    fixedClass,
+    sortableThClass,
+    fixedLastClass,
+    thContentClass,
+    resizerClass,
+    sortIconClass
+  });
+  function renderExpandCell(flatItem) {
+    return (() => {
+      var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+      _$className(_el$2, featureCellBodyWrapperClass);
+      _$insert(_el$2, _$createComponent(For, {
+        get each() {
+          return Array.from({
+            length: flatItem.depth
+          });
+        },
+        children: () => (() => {
+          var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+          _$className(_el$4, expandIndentGuideClass);
+          _$className(_el$5, expandIndentGuideLineClass);
+          return _el$4;
+        })()
+      }), null);
+      _$insert(_el$2, _$createComponent(Show, {
+        get when() {
+          return flatItem.hasChildren;
+        },
+        get children() {
+          var _el$3 = _tmpl$();
+          _el$3.$$click = () => toggleExpand(flatItem.item);
+          _$className(_el$3, expandToggleClass);
+          _$insert(_el$3, _$createComponent(Icon, {
+            icon: IconChevronDown,
+            size: "1em",
+            get ["class"]() {
+              return clsx("transition-transform", expandedItems().includes(flatItem.item) ? "rotate-0" : "-rotate-90");
+            }
+          }));
+          return _el$3;
+        }
+      }), null);
+      _$effect(() => _$className(_el$, twMerge(featureTdClass, fixedClass, "z-[2]", isExpandColLastFixed() ? fixedLastClass : void 0)));
+      return _el$;
+    })();
+  }
+  function renderSelectCell(flatItem) {
+    const selectable = () => getItemSelectable(flatItem.item);
+    const isSelected = () => selection().includes(flatItem.item);
+    const rowIndex = () => flatItem.row;
+    return (() => {
+      var _el$6 = _tmpl$5();
+      _$insert(_el$6, _$createComponent(Show, {
+        get when() {
+          return local.selectionMode === "multiple";
+        },
+        get fallback() {
+          return (
+            /* single mode */
+            _$createComponent(Show, {
+              get when() {
+                return selectable() === true;
+              },
+              get children() {
+                var _el$8 = _tmpl$3(), _el$9 = _el$8.firstChild;
+                _el$8.$$click = () => toggleSelect(flatItem.item);
+                _$className(_el$8, featureCellBodyClickableClass);
+                _$insert(_el$9, _$createComponent(Icon, {
+                  icon: IconChevronRight,
+                  size: "1em"
+                }));
+                _$effect(() => _$className(_el$9, twMerge(selectSingleClass, isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass)));
+                return _el$8;
+              }
+            })
+          );
+        },
+        get children() {
+          var _el$7 = _tmpl$4();
+          _el$7.$$click = (e) => {
+            if (e.shiftKey) {
+              rangeSelect(rowIndex());
+            } else {
+              toggleSelect(flatItem.item);
+            }
+            setLastClickedRow(rowIndex());
+          };
+          _$className(_el$7, featureCellBodyClickableClass);
+          _$insert(_el$7, _$createComponent(Checkbox, {
+            get value() {
+              return isSelected();
+            },
+            get disabled() {
+              return selectable() !== true;
+            },
+            inset: true,
+            get ["class"]() {
+              return twMerge("pointer-events-none", lastClickedRow() === rowIndex() ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700" : void 0);
+            }
+          }));
+          _$effect(() => _$setAttribute(_el$7, "title", typeof selectable() === "string" ? selectable() : void 0));
+          return _el$7;
+        }
+      }));
+      _$effect((_p$) => {
+        var _v$ = twMerge(featureTdClass, fixedClass, "z-[2]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$2 = selectColLeft();
+        _v$ !== _p$.e && _$className(_el$6, _p$.e = _v$);
+        _v$2 !== _p$.t && _$setStyleProperty(_el$6, "left", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$6;
+    })();
+  }
+  function renderReorderCell(flatItem) {
+    return (() => {
+      var _el$0 = _tmpl$6(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild;
+      _el$1.$$pointerdown = (e) => onReorderPointerDown(e, flatItem.item);
+      _$className(_el$1, reorderCellWrapperClass);
+      _$className(_el$10, reorderHandleClass);
+      _$insert(_el$10, _$createComponent(Icon, {
+        icon: IconGripVertical,
+        size: "1em"
+      }));
+      _$effect((_p$) => {
+        var _v$3 = twMerge(featureTdClass, fixedClass, "z-[2]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$4 = reorderColLeft();
+        _v$3 !== _p$.e && _$className(_el$0, _p$.e = _v$3);
+        _v$4 !== _p$.t && _$setStyleProperty(_el$0, "left", _p$.t = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$0;
+    })();
+  }
+  function renderSummaryRow() {
+    return _$createComponent(Show, {
+      get when() {
+        return hasSummary();
+      },
+      get children() {
+        var _el$11 = _tmpl$7();
+        _$insert(_el$11, _$createComponent(For, {
+          get each() {
+            return effectiveColumns();
+          },
+          children: (col, colIndex) => {
+            const summaryStyle = () => {
+              const parts = [];
+              parts.push(`top: ${summaryRowTop()}px`);
+              const left = getFixedStyle(colIndex());
+              if (left != null) parts.push(left);
+              return parts.join("; ");
+            };
+            return (() => {
+              var _el$12 = _tmpl$8(), _el$13 = _el$12.firstChild;
+              _$className(_el$13, thContentClass);
+              _$insert(_el$13, () => {
+                var _a;
+                return (_a = col.summary) == null ? void 0 : _a.call(col);
+              });
+              _$effect((_p$) => {
+                var _v$5 = twMerge(thClass, summaryThClass, fixedClass, col.fixed ? "z-[5]" : "z-[3]", isLastFixed(colIndex()) ? fixedLastClass : void 0), _v$6 = summaryStyle();
+                _v$5 !== _p$.e && _$className(_el$12, _p$.e = _v$5);
+                _p$.t = _$style(_el$12, _v$6, _p$.t);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$12;
+            })();
+          }
+        }));
+        return _el$11;
+      }
+    });
+  }
   return _$createComponent(ColumnsProvider, {
     get children() {
       return [_$memo(() => local.children), (() => {
-        var _el$ = _tmpl$5(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$1 = _el$7.nextSibling, _el$11 = _el$1.nextSibling, _el$12 = _el$6.nextSibling, _el$13 = _el$12.nextSibling;
-        _$insert(_el$, _$createComponent(Show, {
+        var _el$14 = _tmpl$10(), _el$18 = _el$14.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$24 = _el$20.nextSibling, _el$25 = _el$24.nextSibling, _el$26 = _el$19.nextSibling, _el$27 = _el$26.nextSibling;
+        _$insert(_el$14, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!!local.hideConfigBar)() && (dialog != null || pageCount() > 1);
           },
           get children() {
-            var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
-            _$className(_el$2, toolbarClass);
-            _$insert(_el$2, _$createComponent(Show, {
+            var _el$15 = _tmpl$0(), _el$16 = _el$15.firstChild;
+            _$className(_el$15, toolbarClass);
+            _$insert(_el$15, _$createComponent(Show, {
               get when() {
                 return pageCount() > 1;
               },
@@ -371,83 +566,83 @@ const DataSheetInner = (props) => {
                   size: "sm"
                 });
               }
-            }), _el$3);
-            _$insert(_el$2, _$createComponent(Show, {
+            }), _el$16);
+            _$insert(_el$15, _$createComponent(Show, {
               when: dialog != null,
               get children() {
-                var _el$4 = _tmpl$();
-                _el$4.$$click = openConfigDialog;
-                _$className(_el$4, configButtonClass);
-                _$insert(_el$4, _$createComponent(Icon, {
+                var _el$17 = _tmpl$9();
+                _el$17.$$click = openConfigDialog;
+                _$className(_el$17, configButtonClass);
+                _$insert(_el$17, _$createComponent(Icon, {
                   icon: IconSettings,
                   size: "1em"
                 }));
-                return _el$4;
+                return _el$17;
               }
             }), null);
-            return _el$2;
+            return _el$15;
           }
-        }), _el$5);
-        _el$6.$$pointerdown = (e) => {
+        }), _el$18);
+        _el$19.$$pointerdown = (e) => {
           if (e.shiftKey && hasSelectFeature()) {
             e.preventDefault();
           }
         };
-        _el$6.$$keydown = onTableKeyDown;
-        _$insert(_el$7, _$createComponent(Show, {
+        _el$19.$$keydown = onTableKeyDown;
+        _$insert(_el$20, _$createComponent(Show, {
           get when() {
             return hasExpandFeature();
           },
           get children() {
-            return _tmpl$3();
+            return _tmpl$1();
           }
         }), null);
-        _$insert(_el$7, _$createComponent(Show, {
+        _$insert(_el$20, _$createComponent(Show, {
           get when() {
             return hasSelectFeature();
           },
           get children() {
-            return _tmpl$3();
+            return _tmpl$1();
           }
         }), null);
-        _$insert(_el$7, _$createComponent(Show, {
+        _$insert(_el$20, _$createComponent(Show, {
           get when() {
             return hasReorderFeature();
           },
           get children() {
-            return _tmpl$3();
+            return _tmpl$1();
           }
         }), null);
-        _$insert(_el$7, _$createComponent(For, {
+        _$insert(_el$20, _$createComponent(For, {
           get each() {
             return effectiveColumns();
           },
           children: (col) => (() => {
-            var _el$14 = _tmpl$3();
-            _$effect((_$p) => _$style(_el$14, col.width != null ? {
+            var _el$28 = _tmpl$1();
+            _$effect((_$p) => _$style(_el$28, col.width != null ? {
               width: col.width.replace(/;/g, "")
             } : void 0, _$p));
-            return _el$14;
+            return _el$28;
           })()
         }), null);
-        _$insert(_el$1, _$createComponent(For, {
+        _$insert(_el$24, _$createComponent(For, {
           get each() {
             return headerTable();
           },
           children: (row, rowIndex) => (() => {
-            var _el$15 = _tmpl$4();
-            _$use((el) => registerHeaderRow(rowIndex(), el), _el$15);
-            _$insert(_el$15, _$createComponent(Show, {
+            var _el$29 = _tmpl$7();
+            _$use((el) => registerHeaderRow(rowIndex(), el), _el$29);
+            _$insert(_el$29, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!hasExpandFeature())() && rowIndex() === 0;
               },
               get children() {
-                var _el$16 = _tmpl$6(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
-                _$use(registerExpandColRef, _el$16);
-                _$className(_el$17, featureCellWrapperClass);
-                _$addEventListener(_el$18, "click", toggleExpandAll, true);
-                _$className(_el$18, expandToggleClass);
-                _$insert(_el$18, _$createComponent(Icon, {
+                var _el$30 = _tmpl$11(), _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild;
+                _$use(registerExpandColRef, _el$30);
+                _$className(_el$31, featureCellWrapperClass);
+                _$addEventListener(_el$32, "click", toggleExpandAll, true);
+                _$className(_el$32, expandToggleClass);
+                _$insert(_el$32, _$createComponent(Icon, {
                   icon: IconChevronDown,
                   size: "1em",
                   get ["class"]() {
@@ -455,35 +650,35 @@ const DataSheetInner = (props) => {
                   }
                 }));
                 _$effect((_p$) => {
-                  var _v$7 = twMerge(featureThClass, fixedClass, "z-[5]", isExpandColLastFixed() ? fixedLastClass : void 0), _v$8 = featureHeaderRowspan(), _v$9 = isAllExpanded() ? i18n.t("dataSheet.collapseAll") : i18n.t("dataSheet.expandAll");
-                  _v$7 !== _p$.e && _$className(_el$16, _p$.e = _v$7);
-                  _v$8 !== _p$.t && _$setAttribute(_el$16, "rowspan", _p$.t = _v$8);
-                  _v$9 !== _p$.a && _$setAttribute(_el$18, "title", _p$.a = _v$9);
+                  var _v$11 = twMerge(featureThClass, fixedClass, "z-[5]", isExpandColLastFixed() ? fixedLastClass : void 0), _v$12 = featureHeaderRowspan(), _v$13 = isAllExpanded() ? i18n.t("dataSheet.collapseAll") : i18n.t("dataSheet.expandAll");
+                  _v$11 !== _p$.e && _$className(_el$30, _p$.e = _v$11);
+                  _v$12 !== _p$.t && _$setAttribute(_el$30, "rowspan", _p$.t = _v$12);
+                  _v$13 !== _p$.a && _$setAttribute(_el$32, "title", _p$.a = _v$13);
                   return _p$;
                 }, {
                   e: void 0,
                   t: void 0,
                   a: void 0
                 });
-                return _el$16;
+                return _el$30;
               }
             }), null);
-            _$insert(_el$15, _$createComponent(Show, {
+            _$insert(_el$29, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!hasSelectFeature())() && rowIndex() === 0;
               },
               get children() {
-                var _el$19 = _tmpl$8();
-                _$use(registerSelectColRef, _el$19);
-                _$insert(_el$19, _$createComponent(Show, {
+                var _el$33 = _tmpl$12();
+                _$use(registerSelectColRef, _el$33);
+                _$insert(_el$33, _$createComponent(Show, {
                   get when() {
                     return local.selectionMode === "multiple";
                   },
                   get children() {
-                    var _el$20 = _tmpl$7();
-                    _el$20.$$click = () => toggleSelectAll();
-                    _$className(_el$20, featureCellClickableClass);
-                    _$insert(_el$20, _$createComponent(Checkbox, {
+                    var _el$34 = _tmpl$4();
+                    _el$34.$$click = () => toggleSelectAll();
+                    _$className(_el$34, featureCellClickableClass);
+                    _$insert(_el$34, _$createComponent(Checkbox, {
                       get value() {
                         const selectableItems = displayItems().map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
                         return selectableItems.length > 0 && selectableItems.every((item) => selection().includes(item));
@@ -491,403 +686,97 @@ const DataSheetInner = (props) => {
                       inset: true,
                       "class": "pointer-events-none"
                     }));
-                    return _el$20;
+                    return _el$34;
                   }
                 }));
                 _$effect((_p$) => {
-                  var _v$0 = twMerge(featureThClass, fixedClass, "z-[5]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$1 = featureHeaderRowspan(), _v$10 = selectColLeft();
-                  _v$0 !== _p$.e && _$className(_el$19, _p$.e = _v$0);
-                  _v$1 !== _p$.t && _$setAttribute(_el$19, "rowspan", _p$.t = _v$1);
-                  _v$10 !== _p$.a && _$setStyleProperty(_el$19, "left", _p$.a = _v$10);
+                  var _v$14 = twMerge(featureThClass, fixedClass, "z-[5]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$15 = featureHeaderRowspan(), _v$16 = selectColLeft();
+                  _v$14 !== _p$.e && _$className(_el$33, _p$.e = _v$14);
+                  _v$15 !== _p$.t && _$setAttribute(_el$33, "rowspan", _p$.t = _v$15);
+                  _v$16 !== _p$.a && _$setStyleProperty(_el$33, "left", _p$.a = _v$16);
                   return _p$;
                 }, {
                   e: void 0,
                   t: void 0,
                   a: void 0
                 });
-                return _el$19;
+                return _el$33;
               }
             }), null);
-            _$insert(_el$15, _$createComponent(Show, {
+            _$insert(_el$29, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!hasReorderFeature())() && rowIndex() === 0;
               },
               get children() {
-                var _el$21 = _tmpl$8();
-                _$use(registerReorderColRef, _el$21);
+                var _el$35 = _tmpl$12();
+                _$use(registerReorderColRef, _el$35);
                 _$effect((_p$) => {
-                  var _v$11 = twMerge(featureThClass, fixedClass, "z-[5]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$12 = featureHeaderRowspan(), _v$13 = reorderColLeft();
-                  _v$11 !== _p$.e && _$className(_el$21, _p$.e = _v$11);
-                  _v$12 !== _p$.t && _$setAttribute(_el$21, "rowspan", _p$.t = _v$12);
-                  _v$13 !== _p$.a && _$setStyleProperty(_el$21, "left", _p$.a = _v$13);
+                  var _v$17 = twMerge(featureThClass, fixedClass, "z-[5]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$18 = featureHeaderRowspan(), _v$19 = reorderColLeft();
+                  _v$17 !== _p$.e && _$className(_el$35, _p$.e = _v$17);
+                  _v$18 !== _p$.t && _$setAttribute(_el$35, "rowspan", _p$.t = _v$18);
+                  _v$19 !== _p$.a && _$setStyleProperty(_el$35, "left", _p$.a = _v$19);
                   return _p$;
                 }, {
                   e: void 0,
                   t: void 0,
                   a: void 0
                 });
-                return _el$21;
+                return _el$35;
               }
             }), null);
-            _$insert(_el$15, _$createComponent(For, {
+            _$insert(_el$29, _$createComponent(For, {
               each: row,
               children: (cell, cellColIndex) => _$createComponent(Show, {
                 when: cell,
-                children: (c) => {
-                  const isSortable = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].sortable;
-                  const colKey = () => c().colIndex != null ? effectiveColumns()[c().colIndex].key : void 0;
-                  const isGroupFixed = () => {
-                    if (c().isLastRow) return false;
-                    const start = cellColIndex();
-                    const span = c().colspan;
-                    const cols = effectiveColumns();
-                    for (let i = start; i < start + span && i < cols.length; i++) {
-                      if (!cols[i].fixed) return false;
-                    }
-                    return true;
-                  };
-                  const isCellFixed = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed || isGroupFixed();
-                  const isCellLastFixed = () => {
-                    if (c().isLastRow && c().colIndex != null) return isLastFixed(c().colIndex);
-                    if (isGroupFixed()) {
-                      const lastCol = cellColIndex() + c().colspan - 1;
-                      return isLastFixed(lastCol);
-                    }
-                    return false;
-                  };
-                  const cellStyle = () => {
-                    const parts = [];
-                    const top = headerRowTops()[rowIndex()];
-                    parts.push(`top: ${top}px`);
-                    if (c().isLastRow && c().colIndex != null) {
-                      const left = getFixedStyle(c().colIndex);
-                      if (left != null) parts.push(left);
-                      const col = effectiveColumns()[c().colIndex];
-                      if (col.width != null) parts.push(`max-width: ${col.width.replace(/;/g, "")}`);
-                    } else if (isGroupFixed()) {
-                      const left = getFixedStyle(cellColIndex());
-                      if (left != null) parts.push(left);
-                    }
-                    return parts.length > 0 ? parts.join("; ") : void 0;
-                  };
-                  return (() => {
-                    var _el$22 = _tmpl$9(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild;
-                    _el$22.$$click = (e) => {
-                      if (!isSortable()) return;
-                      const key = colKey();
-                      if (key == null) return;
-                      toggleSort(key, e.shiftKey || e.ctrlKey);
-                    };
-                    _$use((el) => {
-                      if (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed) {
-                        registerColumnRef(c().colIndex, el);
-                      }
-                    }, _el$22);
-                    _$insert(_el$24, () => {
-                      var _a, _b;
-                      return ((_b = (_a = c()).headerContent) == null ? void 0 : _b.call(_a)) ?? c().text;
-                    });
-                    _$insert(_el$23, _$createComponent(Show, {
-                      get when() {
-                        return _$memo(() => !!isSortable())() && colKey();
-                      },
-                      children: (key) => {
-                        const sortDef = () => getSortDef(key());
-                        const sortIdx = () => sortIndex(key());
-                        return (() => {
-                          var _el$26 = _tmpl$7();
-                          _$className(_el$26, sortIconClass);
-                          _$insert(_el$26, _$createComponent(Show, {
-                            get when() {
-                              var _a;
-                              return ((_a = sortDef()) == null ? void 0 : _a.desc) === false;
-                            },
-                            get children() {
-                              return _$createComponent(Icon, {
-                                icon: IconSortAscending
-                              });
-                            }
-                          }), null);
-                          _$insert(_el$26, _$createComponent(Show, {
-                            get when() {
-                              var _a;
-                              return ((_a = sortDef()) == null ? void 0 : _a.desc) === true;
-                            },
-                            get children() {
-                              return _$createComponent(Icon, {
-                                icon: IconSortDescending
-                              });
-                            }
-                          }), null);
-                          _$insert(_el$26, _$createComponent(Show, {
-                            get when() {
-                              return sortDef() == null;
-                            },
-                            get children() {
-                              return _$createComponent(Icon, {
-                                icon: IconArrowsSort,
-                                "class": "opacity-30"
-                              });
-                            }
-                          }), null);
-                          _$insert(_el$26, _$createComponent(Show, {
-                            get when() {
-                              return sortIdx();
-                            },
-                            children: (idx) => (() => {
-                              var _el$27 = _tmpl$0();
-                              _$insert(_el$27, idx);
-                              return _el$27;
-                            })()
-                          }), null);
-                          return _el$26;
-                        })();
-                      }
-                    }), null);
-                    _$insert(_el$22, _$createComponent(Show, {
-                      get when() {
-                        return _$memo(() => !!(c().isLastRow && c().colIndex != null))() && effectiveColumns()[c().colIndex].resizable;
-                      },
-                      get children() {
-                        var _el$25 = _tmpl$7();
-                        _el$25.$$dblclick = (e) => {
-                          e.stopPropagation();
-                          onResizerDoubleClick(effectiveColumns()[c().colIndex].key);
-                        };
-                        _el$25.$$pointerdown = (e) => onResizerPointerdown(e, effectiveColumns()[c().colIndex].key);
-                        _el$25.$$click = (e) => e.stopPropagation();
-                        _$className(_el$25, resizerClass);
-                        return _el$25;
-                      }
-                    }), null);
-                    _$effect((_p$) => {
-                      var _v$14 = twMerge(thClass, fixedClass, isSortable() ? sortableThClass : void 0, isCellFixed() ? "z-[5]" : "z-[3]", isCellLastFixed() ? fixedLastClass : void 0), _v$15 = c().colspan > 1 ? c().colspan : void 0, _v$16 = c().rowspan > 1 ? c().rowspan : void 0, _v$17 = cellStyle(), _v$18 = c().isLastRow && c().colIndex != null ? effectiveColumns()[c().colIndex].tooltip ?? c().text : c().text, _v$19 = clsx("flex items-center gap-2", thContentClass);
-                      _v$14 !== _p$.e && _$className(_el$22, _p$.e = _v$14);
-                      _v$15 !== _p$.t && _$setAttribute(_el$22, "colspan", _p$.t = _v$15);
-                      _v$16 !== _p$.a && _$setAttribute(_el$22, "rowspan", _p$.a = _v$16);
-                      _p$.o = _$style(_el$22, _v$17, _p$.o);
-                      _v$18 !== _p$.i && _$setAttribute(_el$22, "title", _p$.i = _v$18);
-                      _v$19 !== _p$.n && _$className(_el$23, _p$.n = _v$19);
-                      return _p$;
-                    }, {
-                      e: void 0,
-                      t: void 0,
-                      a: void 0,
-                      o: void 0,
-                      i: void 0,
-                      n: void 0
-                    });
-                    return _el$22;
-                  })();
-                }
+                children: (c) => renderHeaderCell(c(), cellColIndex(), rowIndex())
               })
             }), null);
-            return _el$15;
+            return _el$29;
           })()
         }), null);
-        _$insert(_el$1, _$createComponent(Show, {
-          get when() {
-            return hasSummary();
-          },
-          get children() {
-            var _el$10 = _tmpl$4();
-            _$insert(_el$10, _$createComponent(For, {
-              get each() {
-                return effectiveColumns();
-              },
-              children: (col, colIndex) => {
-                const summaryStyle = () => {
-                  const parts = [];
-                  parts.push(`top: ${summaryRowTop()}px`);
-                  const left = getFixedStyle(colIndex());
-                  if (left != null) parts.push(left);
-                  return parts.join("; ");
-                };
-                return (() => {
-                  var _el$28 = _tmpl$1(), _el$29 = _el$28.firstChild;
-                  _$className(_el$29, thContentClass);
-                  _$insert(_el$29, () => {
-                    var _a;
-                    return (_a = col.summary) == null ? void 0 : _a.call(col);
-                  });
-                  _$effect((_p$) => {
-                    var _v$20 = twMerge(thClass, summaryThClass, fixedClass, col.fixed ? "z-[5]" : "z-[3]", isLastFixed(colIndex()) ? fixedLastClass : void 0), _v$21 = summaryStyle();
-                    _v$20 !== _p$.e && _$className(_el$28, _p$.e = _v$20);
-                    _p$.t = _$style(_el$28, _v$21, _p$.t);
-                    return _p$;
-                  }, {
-                    e: void 0,
-                    t: void 0
-                  });
-                  return _el$28;
-                })();
-              }
-            }));
-            return _el$10;
-          }
-        }), null);
-        _$insert(_el$11, _$createComponent(For, {
+        _$insert(_el$24, renderSummaryRow, null);
+        _$insert(_el$25, _$createComponent(For, {
           get each() {
             return displayItems();
           },
           children: (flat) => (() => {
-            var _el$30 = _tmpl$4();
-            _el$30.$$click = () => {
-              if (local.autoSelect === "click") {
+            var _el$36 = _tmpl$7();
+            _el$36.$$click = () => {
+              if (local.autoSelect) {
                 selectItem(flat.item);
               }
             };
-            _$insert(_el$30, _$createComponent(Show, {
+            _$insert(_el$36, _$createComponent(Show, {
               get when() {
                 return hasExpandFeature();
               },
               get children() {
-                var _el$31 = _tmpl$11(), _el$32 = _el$31.firstChild;
-                _$className(_el$32, featureCellBodyWrapperClass);
-                _$insert(_el$32, _$createComponent(For, {
-                  get each() {
-                    return Array.from({
-                      length: flat.depth
-                    });
-                  },
-                  children: () => (() => {
-                    var _el$37 = _tmpl$13(), _el$38 = _el$37.firstChild;
-                    _$className(_el$37, expandIndentGuideClass);
-                    _$className(_el$38, expandIndentGuideLineClass);
-                    return _el$37;
-                  })()
-                }), null);
-                _$insert(_el$32, _$createComponent(Show, {
-                  get when() {
-                    return flat.hasChildren;
-                  },
-                  get children() {
-                    var _el$33 = _tmpl$10();
-                    _el$33.$$click = () => toggleExpand(flat.item);
-                    _$className(_el$33, expandToggleClass);
-                    _$insert(_el$33, _$createComponent(Icon, {
-                      icon: IconChevronDown,
-                      size: "1em",
-                      get ["class"]() {
-                        return clsx("transition-transform", expandedItems().includes(flat.item) ? "rotate-0" : "-rotate-90");
-                      }
-                    }));
-                    return _el$33;
-                  }
-                }), null);
-                _$effect(() => _$className(_el$31, twMerge(featureTdClass, fixedClass, "z-[2]", isExpandColLastFixed() ? fixedLastClass : void 0)));
-                return _el$31;
+                return renderExpandCell(flat);
               }
             }), null);
-            _$insert(_el$30, _$createComponent(Show, {
+            _$insert(_el$36, _$createComponent(Show, {
               get when() {
                 return hasSelectFeature();
               },
               get children() {
-                return (() => {
-                  const selectable = () => getItemSelectable(flat.item);
-                  const isSelected = () => selection().includes(flat.item);
-                  const rowIndex = () => flat.row;
-                  return (() => {
-                    var _el$39 = _tmpl$14();
-                    _$insert(_el$39, _$createComponent(Show, {
-                      get when() {
-                        return local.selectionMode === "multiple";
-                      },
-                      get fallback() {
-                        return (
-                          /* single mode */
-                          _$createComponent(Show, {
-                            get when() {
-                              return selectable() === true;
-                            },
-                            get children() {
-                              var _el$41 = _tmpl$13(), _el$42 = _el$41.firstChild;
-                              _el$41.$$click = () => toggleSelect(flat.item);
-                              _$className(_el$41, featureCellBodyClickableClass);
-                              _$insert(_el$42, _$createComponent(Icon, {
-                                icon: IconChevronRight,
-                                size: "1em"
-                              }));
-                              _$effect(() => _$className(_el$42, twMerge(selectSingleClass, isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass)));
-                              return _el$41;
-                            }
-                          })
-                        );
-                      },
-                      get children() {
-                        var _el$40 = _tmpl$7();
-                        _el$40.$$click = (e) => {
-                          if (e.shiftKey) {
-                            rangeSelect(rowIndex());
-                          } else {
-                            toggleSelect(flat.item);
-                          }
-                          setLastClickedRow(rowIndex());
-                        };
-                        _$className(_el$40, featureCellBodyClickableClass);
-                        _$insert(_el$40, _$createComponent(Checkbox, {
-                          get value() {
-                            return isSelected();
-                          },
-                          get disabled() {
-                            return selectable() !== true;
-                          },
-                          inset: true,
-                          get ["class"]() {
-                            return twMerge("pointer-events-none", lastClickedRow() === rowIndex() ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700" : void 0);
-                          }
-                        }));
-                        _$effect(() => _$setAttribute(_el$40, "title", typeof selectable() === "string" ? selectable() : void 0));
-                        return _el$40;
-                      }
-                    }));
-                    _$effect((_p$) => {
-                      var _v$26 = twMerge(featureTdClass, fixedClass, "z-[2]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$27 = selectColLeft();
-                      _v$26 !== _p$.e && _$className(_el$39, _p$.e = _v$26);
-                      _v$27 !== _p$.t && _$setStyleProperty(_el$39, "left", _p$.t = _v$27);
-                      return _p$;
-                    }, {
-                      e: void 0,
-                      t: void 0
-                    });
-                    return _el$39;
-                  })();
-                })();
+                return renderSelectCell(flat);
               }
             }), null);
-            _$insert(_el$30, _$createComponent(Show, {
+            _$insert(_el$36, _$createComponent(Show, {
               get when() {
                 return hasReorderFeature();
               },
               get children() {
-                var _el$34 = _tmpl$12(), _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild;
-                _el$35.$$pointerdown = (e) => onReorderPointerDown(e, flat.item);
-                _$className(_el$35, reorderCellWrapperClass);
-                _$className(_el$36, reorderHandleClass);
-                _$insert(_el$36, _$createComponent(Icon, {
-                  icon: IconGripVertical,
-                  size: "1em"
-                }));
-                _$effect((_p$) => {
-                  var _v$22 = twMerge(featureTdClass, fixedClass, "z-[2]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$23 = reorderColLeft();
-                  _v$22 !== _p$.e && _$className(_el$34, _p$.e = _v$22);
-                  _v$23 !== _p$.t && _$setStyleProperty(_el$34, "left", _p$.t = _v$23);
-                  return _p$;
-                }, {
-                  e: void 0,
-                  t: void 0
-                });
-                return _el$34;
+                return renderReorderCell(flat);
               }
             }), null);
-            _$insert(_el$30, _$createComponent(For, {
+            _$insert(_el$36, _$createComponent(For, {
               get each() {
                 return effectiveColumns();
               },
               children: (col, colIndex) => (() => {
-                var _el$43 = _tmpl$14();
-                _$insert(_el$43, () => col.cell({
+                var _el$37 = _tmpl$5();
+                _$insert(_el$37, () => col.cell({
                   item: flat.item,
                   index: flat.index,
                   row: flat.row,
@@ -895,39 +784,39 @@ const DataSheetInner = (props) => {
                 }));
                 _$effect((_p$) => {
                   var _a, _b;
-                  var _v$28 = twMerge(tdClass, col.fixed ? clsx(fixedClass, "z-[2]") : void 0, isLastFixed(colIndex()) ? fixedLastClass : void 0, col.class, (_a = local.cellClass) == null ? void 0 : _a.call(local, flat.item, col.key)), _v$29 = [getFixedStyle(colIndex()), col.width != null ? `max-width: ${col.width.replace(/;/g, "")}` : void 0, (_b = local.cellStyle) == null ? void 0 : _b.call(local, flat.item, col.key)].filter(Boolean).join("; ") || void 0;
-                  _v$28 !== _p$.e && _$className(_el$43, _p$.e = _v$28);
-                  _p$.t = _$style(_el$43, _v$29, _p$.t);
+                  var _v$22 = twMerge(tdClass, col.fixed ? clsx(fixedClass, "z-[2]") : void 0, isLastFixed(colIndex()) ? fixedLastClass : void 0, col.class, (_a = local.cellClass) == null ? void 0 : _a.call(local, flat.item, col.key)), _v$23 = [getFixedStyle(colIndex()), col.width != null ? `max-width: ${col.width.replace(/;/g, "")}` : void 0, (_b = local.cellStyle) == null ? void 0 : _b.call(local, flat.item, col.key)].filter(Boolean).join("; ") || void 0;
+                  _v$22 !== _p$.e && _$className(_el$37, _p$.e = _v$22);
+                  _p$.t = _$style(_el$37, _v$23, _p$.t);
                   return _p$;
                 }, {
                   e: void 0,
                   t: void 0
                 });
-                return _el$43;
+                return _el$37;
               })()
             }), null);
             _$effect((_p$) => {
-              var _v$24 = selection().includes(flat.item) ? "" : void 0, _v$25 = clsx(trRowClass, local.autoSelect === "click" && "cursor-pointer");
-              _v$24 !== _p$.e && _$setAttribute(_el$30, "data-selected", _p$.e = _v$24);
-              _v$25 !== _p$.t && _$className(_el$30, _p$.t = _v$25);
+              var _v$20 = selection().includes(flat.item) ? "" : void 0, _v$21 = clsx(trRowClass, local.autoSelect && "cursor-pointer");
+              _v$20 !== _p$.e && _$setAttribute(_el$36, "data-selected", _p$.e = _v$20);
+              _v$21 !== _p$.t && _$className(_el$36, _p$.t = _v$21);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            return _el$30;
+            return _el$36;
           })()
         }));
-        _$className(_el$12, resizeIndicatorClass);
-        _$className(_el$13, reorderIndicatorClass);
+        _$className(_el$26, resizeIndicatorClass);
+        _$className(_el$27, reorderIndicatorClass);
         _$effect((_p$) => {
-          var _v$ = local.storageKey ?? "", _v$2 = twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class), _v$3 = twMerge(dataSheetContainerClass, "flex-1 min-h-0"), _v$4 = local.contentStyle, _v$5 = twMerge(tableClass, local.inset ? insetTableClass : void 0), _v$6 = resizeIndicatorStyle();
-          _v$ !== _p$.e && _$setAttribute(_el$, "data-sheet", _p$.e = _v$);
-          _v$2 !== _p$.t && _$className(_el$, _p$.t = _v$2);
-          _v$3 !== _p$.a && _$className(_el$5, _p$.a = _v$3);
-          _p$.o = _$style(_el$5, _v$4, _p$.o);
-          _v$5 !== _p$.i && _$className(_el$6, _p$.i = _v$5);
-          _p$.n = _$style(_el$12, _v$6, _p$.n);
+          var _v$7 = local.storageKey ?? "", _v$8 = twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class), _v$9 = twMerge(dataSheetContainerClass, "flex-1 min-h-0"), _v$0 = local.contentStyle, _v$1 = twMerge(tableClass, local.inset ? insetTableClass : void 0), _v$10 = resizeIndicatorStyle();
+          _v$7 !== _p$.e && _$setAttribute(_el$14, "data-sheet", _p$.e = _v$7);
+          _v$8 !== _p$.t && _$className(_el$14, _p$.t = _v$8);
+          _v$9 !== _p$.a && _$className(_el$18, _p$.a = _v$9);
+          _p$.o = _$style(_el$18, _v$0, _p$.o);
+          _v$1 !== _p$.i && _$className(_el$19, _p$.i = _v$1);
+          _p$.n = _$style(_el$26, _v$10, _p$.n);
           return _p$;
         }, {
           e: void 0,
@@ -937,18 +826,16 @@ const DataSheetInner = (props) => {
           i: void 0,
           n: void 0
         });
-        return _el$;
+        return _el$14;
       })()];
     }
   });
 };
 const DataSheet = Object.assign(DataSheetInner, {
-  Column: DataSheetColumn,
-  ConfigDialog: DataSheetConfigDialog
+  Column: DataSheetColumn
 });
-_$delegateEvents(["click", "keydown", "pointerdown", "dblclick"]);
+_$delegateEvents(["click", "pointerdown", "keydown"]);
 export {
-  DataSheet,
-  DataSheetConfigDialog
+  DataSheet
 };
 //# sourceMappingURL=DataSheet.js.map