@simplysm/solid 13.0.75 → 13.0.77

package/dist/components/features/crud-sheet/CrudSheet.js

@@ -1,74 +1,84 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
+import { className as _$className } 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 { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<button class="flex items-center px-2 text-base-400 hover:text-base-600">`), _tmpl$2 = /* @__PURE__ */ _$template(`<div class="flex gap-2 p-2 pb-0">`), _tmpl$3 = /* @__PURE__ */ _$template(`<form class="flex-1 overflow-hidden p-2 pt-1">`), _tmpl$4 = /* @__PURE__ */ _$template(`<div class="flex gap-2 border-t p-2"><div class=flex-1>`), _tmpl$5 = /* @__PURE__ */ _$template(`<form class=p-2>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div class="flex items-center justify-center px-1 py-0.5">`), _tmpl$7 = /* @__PURE__ */ _$template(`<div class=p-1>`), _tmpl$8 = /* @__PURE__ */ _$template(`<div class=flex-1>`), _tmpl$9 = /* @__PURE__ */ _$template(`<div class="px-2 py-1 text-center">`);
-import { children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, Show, splitProps, useContext } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ _$template(`<button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div class="flex gap-2 p-2 pb-0">`), _tmpl$3 = /* @__PURE__ */ _$template(`<form class="flex-1 overflow-hidden p-2 pt-1">`), _tmpl$4 = /* @__PURE__ */ _$template(`<div class="flex gap-2 border-t p-2"><div class=flex-1>`), _tmpl$5 = /* @__PURE__ */ _$template(`<form class=p-2>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div class="flex items-center justify-center px-1 py-0.5">`), _tmpl$7 = /* @__PURE__ */ _$template(`<div class=p-1>`), _tmpl$8 = /* @__PURE__ */ _$template(`<div class=flex-1>`), _tmpl$9 = /* @__PURE__ */ _$template(`<div>`);
+import { createEffect, createSignal, createUniqueId, For, onCleanup, Show, splitProps, useContext } from "solid-js";
 import { createStore, produce, reconcile } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore.js";
-import { objClone, objGetChainValue } from "@simplysm/core-common";
+import { obj } from "@simplysm/core-common";
 import "@simplysm/core-common";
+import { openFileDialog } from "@simplysm/core-browser";
 import { DataSheet } from "../../data/sheet/DataSheet.js";
 import { DataSheetColumn } from "../../data/sheet/DataSheetColumn.js";
+import { normalizeHeader } from "../../data/sheet/DataSheet.utils.js";
 import { BusyContainer } from "../../feedback/busy/BusyContainer.js";
-import { useNotification } from "../../feedback/notification/NotificationContext.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
+import { useNotification } from "../../feedback/notification/NotificationProvider.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
 import { Button } from "../../form-control/Button.js";
 import { Icon } from "../../display/Icon.js";
 import { FormGroup } from "../../layout/FormGroup.js";
-import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarContext.js";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext.js";
+import { useTopbarActions, TopbarContext } from "../../layout/topbar/Topbar.js";
 import { Dialog } from "../../disclosure/Dialog.js";
 import { Link } from "../../display/Link.js";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { useBeforeLeave } from "@solidjs/router";
 import clsx from "clsx";
+import { text } from "../../../styles/base.styles.js";
+import { gap, pad } from "../../../styles/control.styles.js";
 import { IconDeviceFloppy, IconExternalLink, IconFileExcel, IconPlus, IconRefresh, IconSearch, IconTrash, IconTrashOff, IconUpload } from "@tabler/icons-solidjs";
 import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry.js";
-import { CrudSheetColumn, isCrudSheetColumnDef } from "./CrudSheetColumn.js";
-import { CrudSheetFilter, isCrudSheetFilterDef } from "./CrudSheetFilter.js";
-import { CrudSheetTools, isCrudSheetToolsDef } from "./CrudSheetTools.js";
-import { CrudSheetHeader, isCrudSheetHeaderDef } from "./CrudSheetHeader.js";
+import { CrudSheetColumn, createCrudSheetColumnSlotsAccessor } from "./CrudSheetColumn.js";
+import { CrudSheetFilter, createCrudSheetFilterSlotAccessor } from "./CrudSheetFilter.js";
+import { CrudSheetTools, createCrudSheetToolsSlotAccessor } from "./CrudSheetTools.js";
+import { CrudSheetHeader, createCrudSheetHeaderSlotAccessor } from "./CrudSheetHeader.js";
 const CrudSheetBase = (props) => {
-  const [local] = splitProps(props, ["search", "getItemKey", "persistKey", "editable", "itemEditable", "itemDeletable", "itemDeleted", "isItemSelectable", "lastModifiedAtProp", "lastModifiedByProp", "onSubmitted", "filterInitial", "items", "onItemsChange", "inlineEdit", "dialogEdit", "excel", "selectMode", "onSelect", "hideAutoTools", "class", "children"]);
+  const [local] = splitProps(props, ["search", "getItemKey", "storageKey", "editable", "isItemEditable", "isItemDeletable", "isItemDeleted", "isItemSelectable", "lastModifiedAtProp", "lastModifiedByProp", "onSubmitComplete", "filterInitial", "items", "onItemsChange", "inlineEdit", "dialogEdit", "excel", "selectionMode", "onSelect", "hideAutoTools", "close", "class", "children"]);
   const noti = useNotification();
   const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
-  const dialogInstance = useDialogInstance();
-  const isInDialog = dialogInstance !== void 0;
-  const isSelectMode = () => local.selectMode != null;
+  const isInDialog = local.close !== void 0;
+  const isSelectMode = () => local.selectionMode != null;
   const canEdit = () => isInDialog && isSelectMode() ? false : local.editable ?? true;
-  const resolved = children(() => local.children);
-  const defs = createMemo(() => {
-    const arr = resolved.toArray();
-    return {
-      filter: arr.find(isCrudSheetFilterDef),
-      columns: arr.filter(isCrudSheetColumnDef),
-      tools: arr.find(isCrudSheetToolsDef),
-      header: arr.find(isCrudSheetHeaderDef)
-    };
-  });
+  const [headerSlot, HeaderProvider] = createCrudSheetHeaderSlotAccessor();
+  const [filterSlot, FilterProvider] = createCrudSheetFilterSlotAccessor();
+  const [toolsSlot, ToolsProvider] = createCrudSheetToolsSlotAccessor();
+  const [columnSlots, ColumnsProvider] = createCrudSheetColumnSlotsAccessor();
   const [items, setItems] = createControllableStore({
     value: () => local.items ?? [],
     onChange: () => local.onItemsChange
   });
   let originalItems = [];
   const [filter, setFilter] = createStore(local.filterInitial ?? {});
-  const [lastFilter, setLastFilter] = createSignal(objClone(filter));
+  const [lastFilter, setLastFilter] = createSignal(obj.clone(filter));
   const [page, setPage] = createSignal(1);
   const [totalPageCount, setTotalPageCount] = createSignal(0);
   const [sorts, setSorts] = createSignal([]);
   const [busyCount, setBusyCount] = createSignal(0);
+  async function withBusy(fn, errorMessage) {
+    setBusyCount((c) => c + 1);
+    try {
+      return await fn();
+    } catch (err) {
+      noti.error(err, errorMessage);
+      return void 0;
+    } finally {
+      setBusyCount((c) => c - 1);
+    }
+  }
   const [ready, setReady] = createSignal(false);
-  const [selectedItems, setSelectedItems] = createSignal([]);
+  const [selection, setSelection] = createSignal([]);
   const [selectedKeys, setSelectedKeys] = createSignal(/* @__PURE__ */ new Set());
   let formRef;
   const crudId = createUniqueId();
   onCleanup(() => unregisterCrud(crudId));
   createEventListener(() => formRef, "pointerdown", () => activateCrud(crudId));
   createEventListener(() => formRef, "focusin", () => activateCrud(crudId));
+  let refreshVersion = 0;
   createEffect(() => {
     void doRefresh();
   });
@@ -76,8 +86,8 @@ const CrudSheetBase = (props) => {
     const currentItems = items;
     const keys = selectedKeys();
     if (keys.size === 0) {
-      if (selectedItems().length > 0) {
-        setSelectedItems([]);
+      if (selection().length > 0) {
+        setSelection([]);
       }
       return;
     }
@@ -85,22 +95,26 @@ const CrudSheetBase = (props) => {
       const key = local.getItemKey(item);
       return key != null && keys.has(key);
     });
-    setSelectedItems(restored);
+    setSelection(restored);
   });
   async function doRefresh() {
+    const version = ++refreshVersion;
     setBusyCount((c) => c + 1);
     try {
       await refresh();
+      if (version !== refreshVersion) return;
+      setReady(true);
     } catch (err) {
+      if (version !== refreshVersion) return;
       noti.error(err, i18n.t("crudSheet.lookupFailed"));
+    } finally {
+      setBusyCount((c) => c - 1);
     }
-    setBusyCount((c) => c - 1);
-    setReady(true);
   }
   async function refresh() {
     const result = await local.search(lastFilter(), page(), sorts());
     setItems(reconcile(result.items));
-    originalItems = objClone(result.items);
+    originalItems = obj.clone(result.items);
     setTotalPageCount(result.pageCount ?? 0);
   }
   function getItemDiffs() {
@@ -118,7 +132,7 @@ const CrudSheetBase = (props) => {
     e.preventDefault();
     if (!checkIgnoreChanges()) return;
     setPage(1);
-    setLastFilter(() => objClone(filter));
+    setLastFilter(() => obj.clone(filter));
   }
   async function handleRefresh() {
     if (!checkIgnoreChanges()) return;
@@ -132,7 +146,7 @@ const CrudSheetBase = (props) => {
   }
   function handleToggleDelete(item, index) {
     var _a, _b;
-    if (!(((_a = local.itemDeletable) == null ? void 0 : _a.call(local, item)) ?? true)) return;
+    if (!(((_a = local.isItemDeletable) == null ? void 0 : _a.call(local, item)) ?? true)) return;
     if (((_b = local.inlineEdit) == null ? void 0 : _b.deleteProp) == null) return;
     const dp = local.inlineEdit.deleteProp;
     if (local.getItemKey(item) == null) {
@@ -141,10 +155,11 @@ const CrudSheetBase = (props) => {
       }));
       return;
     }
-    setItems(index, dp, !item[dp]);
+    setItems(produce((draft) => {
+      draft[index][dp] = !item[dp];
+    }));
   }
   async function handleSave() {
-    var _a;
     if (busyCount() > 0) return;
     if (!canEdit()) return;
     if (!local.inlineEdit) return;
@@ -153,16 +168,13 @@ const CrudSheetBase = (props) => {
       noti.info(i18n.t("crudSheet.notice"), i18n.t("crudSheet.noChanges"));
       return;
     }
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
+      var _a;
       await local.inlineEdit.submit(diffs);
       noti.success(i18n.t("crudSheet.saveCompleted"), i18n.t("crudSheet.saveSuccess"));
       await refresh();
-      (_a = local.onSubmitted) == null ? void 0 : _a.call(local);
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.saveFailed"));
-    }
-    setBusyCount((c) => c - 1);
+      (_a = local.onSubmitComplete) == null ? void 0 : _a.call(local);
+    }, i18n.t("crudSheet.saveFailed"));
   }
   async function handleFormSubmit(e) {
     e.preventDefault();
@@ -172,76 +184,50 @@ const CrudSheetBase = (props) => {
     if (!local.dialogEdit) return;
     const result = await local.dialogEdit.editItem(item);
     if (!result) return;
-    setBusyCount((c) => c + 1);
-    try {
-      await refresh();
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.lookupFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    await withBusy(() => refresh(), i18n.t("crudSheet.lookupFailed"));
   }
   async function handleDeleteItems() {
     var _a;
     if (!((_a = local.dialogEdit) == null ? void 0 : _a.deleteItems)) return;
-    const result = await local.dialogEdit.deleteItems(selectedItems());
+    const result = await local.dialogEdit.deleteItems(selection());
     if (!result) return;
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
       await refresh();
       noti.success(i18n.t("crudSheet.deleteCompleted"), i18n.t("crudSheet.deleteSuccess"));
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.deleteFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    }, i18n.t("crudSheet.deleteFailed"));
   }
   async function handleRestoreItems() {
     var _a;
     if (!((_a = local.dialogEdit) == null ? void 0 : _a.restoreItems)) return;
-    const result = await local.dialogEdit.restoreItems(selectedItems());
+    const result = await local.dialogEdit.restoreItems(selection());
     if (!result) return;
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
       await refresh();
       noti.success(i18n.t("crudSheet.restoreCompleted"), i18n.t("crudSheet.restoreSuccess"));
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.restoreFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    }, i18n.t("crudSheet.restoreFailed"));
   }
   async function handleExcelDownload() {
     if (!local.excel) return;
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
       const result = await local.search(lastFilter(), void 0, sorts());
       await local.excel.download(result.items);
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.excelDownloadFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    }, i18n.t("crudSheet.excelDownloadFailed"));
   }
-  function handleExcelUpload() {
+  async function handleExcelUpload() {
     var _a;
     if (!((_a = local.excel) == null ? void 0 : _a.upload)) return;
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".xlsx";
-    input.onchange = async () => {
-      var _a2;
-      const file = (_a2 = input.files) == null ? void 0 : _a2[0];
-      if (file == null) return;
-      setBusyCount((c) => c + 1);
-      try {
-        await local.excel.upload(file);
-        noti.success(i18n.t("crudSheet.excelCompleted"), i18n.t("crudSheet.excelUploadSuccess"));
-        await refresh();
-      } catch (err) {
-        noti.error(err, i18n.t("crudSheet.excelUploadFailed"));
-      }
-      setBusyCount((c) => c - 1);
-    };
-    input.click();
+    const files = await openFileDialog({
+      accept: ".xlsx"
+    });
+    const file = files == null ? void 0 : files[0];
+    if (file == null) return;
+    await withBusy(async () => {
+      await local.excel.upload(file);
+      noti.success(i18n.t("crudSheet.excelCompleted"), i18n.t("crudSheet.excelUploadSuccess"));
+      await refresh();
+    }, i18n.t("crudSheet.excelUploadFailed"));
   }
-  function handleSelectedItemsChange(newSelectedItems) {
+  function handleSelectionChange(newSelection) {
     const currentItems = items;
     const currentKeys = /* @__PURE__ */ new Set();
     for (const item of currentItems) {
@@ -249,7 +235,7 @@ const CrudSheetBase = (props) => {
       if (key != null) currentKeys.add(key);
     }
     const newSelectedKeys = /* @__PURE__ */ new Set();
-    for (const item of newSelectedItems) {
+    for (const item of newSelection) {
       const key = local.getItemKey(item);
       if (key != null) newSelectedKeys.add(key);
     }
@@ -263,16 +249,16 @@ const CrudSheetBase = (props) => {
       merged.add(key);
     }
     setSelectedKeys(merged);
-    setSelectedItems(newSelectedItems);
+    setSelection(newSelection);
   }
   function clearSelection() {
     setSelectedKeys(/* @__PURE__ */ new Set());
-    setSelectedItems([]);
+    setSelection([]);
   }
   function handleSelectConfirm() {
     var _a;
     (_a = local.onSelect) == null ? void 0 : _a.call(local, {
-      items: selectedItems(),
+      items: selection(),
       keys: [...selectedKeys()]
     });
   }
@@ -309,7 +295,7 @@ const CrudSheetBase = (props) => {
     }
   }
   if (topbarCtx) {
-    createTopbarActions(() => [_$createComponent(Show, {
+    useTopbarActions(() => [_$createComponent(Show, {
       get when() {
         return _$memo(() => !!canEdit())() && local.inlineEdit;
       },
@@ -342,7 +328,7 @@ const CrudSheetBase = (props) => {
   }
   const ctx = {
     items: () => items,
-    selectedItems,
+    selection,
     page,
     sorts,
     busy: () => busyCount() > 0,
@@ -365,9 +351,25 @@ const CrudSheetBase = (props) => {
   };
   const isItemDeleted = (item) => {
     var _a;
-    return ((_a = local.itemDeleted) == null ? void 0 : _a.call(local, item)) ?? false;
+    return ((_a = local.isItemDeleted) == null ? void 0 : _a.call(local, item)) ?? false;
   };
-  return [_$createComponent(Show, {
+  return [_$createComponent(ColumnsProvider, {
+    get children() {
+      return _$createComponent(HeaderProvider, {
+        get children() {
+          return _$createComponent(FilterProvider, {
+            get children() {
+              return _$createComponent(ToolsProvider, {
+                get children() {
+                  return local.children;
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  }), _$createComponent(Show, {
     when: isInDialog,
     get children() {
       return _$createComponent(Dialog.Action, {
@@ -377,6 +379,7 @@ const CrudSheetBase = (props) => {
           _$insert(_el$, _$createComponent(Icon, {
             icon: IconRefresh
           }));
+          _$effect(() => _$className(_el$, clsx("flex items-center px-2 hover:text-base-600", text.muted)));
           return _el$;
         }
       });
@@ -431,14 +434,14 @@ const CrudSheetBase = (props) => {
         }
       }), _$createComponent(Show, {
         get when() {
-          return defs().header;
+          return headerSlot();
         },
-        children: (headerDef) => headerDef().children
+        children: (slot) => slot().children
       }), _$createComponent(Show, {
         get when() {
-          return defs().filter;
+          return filterSlot();
         },
-        children: (filterDef) => (() => {
+        children: (slot) => (() => {
           var _el$7 = _tmpl$5();
           _el$7.addEventListener("submit", handleFilterSubmit);
           _$insert(_el$7, _$createComponent(FormGroup, {
@@ -458,7 +461,7 @@ const CrudSheetBase = (props) => {
                     }
                   });
                 }
-              }), _$memo(() => filterDef().children(filter, setFilter))];
+              }), _$memo(() => slot().children(filter, setFilter))];
             }
           }));
           return _el$7;
@@ -522,9 +525,9 @@ const CrudSheetBase = (props) => {
                     variant: "ghost",
                     onClick: handleDeleteItems,
                     get disabled() {
-                      return selectedItems().length === 0 || !selectedItems().some((item) => {
+                      return selection().length === 0 || !selection().some((item) => {
                         var _a, _b;
-                        return (((_a = local.itemDeletable) == null ? void 0 : _a.call(local, item)) ?? true) && !(((_b = local.itemDeleted) == null ? void 0 : _b.call(local, item)) ?? false);
+                        return (((_a = local.isItemDeletable) == null ? void 0 : _a.call(local, item)) ?? true) && !(((_b = local.isItemDeleted) == null ? void 0 : _b.call(local, item)) ?? false);
                       });
                     },
                     get children() {
@@ -547,9 +550,9 @@ const CrudSheetBase = (props) => {
                     variant: "ghost",
                     onClick: handleRestoreItems,
                     get disabled() {
-                      return selectedItems().length === 0 || !selectedItems().some((item) => {
+                      return selection().length === 0 || !selection().some((item) => {
                         var _a;
-                        return ((_a = local.itemDeleted) == null ? void 0 : _a.call(local, item)) ?? false;
+                        return ((_a = local.isItemDeleted) == null ? void 0 : _a.call(local, item)) ?? false;
                       });
                     },
                     get children() {
@@ -602,9 +605,9 @@ const CrudSheetBase = (props) => {
           }), null);
           _$insert(_el$3, _$createComponent(Show, {
             get when() {
-              return defs().tools;
+              return toolsSlot();
             },
-            children: (toolsDef) => toolsDef().children(ctx)
+            children: (slot) => slot().children(ctx)
           }), null);
           return _el$3;
         }
@@ -618,8 +621,8 @@ const CrudSheetBase = (props) => {
         _$insert(_el$4, _$createComponent(DataSheet, {
           "class": "h-full",
           items,
-          get persistKey() {
-            return _$memo(() => local.persistKey != null)() ? `${local.persistKey}-sheet` : void 0;
+          get storageKey() {
+            return _$memo(() => local.storageKey != null)() ? `${local.storageKey}-sheet` : void 0;
           },
           get page() {
             return _$memo(() => totalPageCount() > 0)() ? page() : void 0;
@@ -635,16 +638,16 @@ const CrudSheetBase = (props) => {
           get isItemSelectable() {
             return local.isItemSelectable;
           },
-          get selectMode() {
+          get selectionMode() {
             var _a, _b;
-            return _$memo(() => !!isSelectMode())() ? local.selectMode : ((_a = local.dialogEdit) == null ? void 0 : _a.deleteItems) != null || ((_b = local.dialogEdit) == null ? void 0 : _b.restoreItems) != null ? "multiple" : void 0;
+            return _$memo(() => !!isSelectMode())() ? local.selectionMode : ((_a = local.dialogEdit) == null ? void 0 : _a.deleteItems) != null || ((_b = local.dialogEdit) == null ? void 0 : _b.restoreItems) != null ? "multiple" : void 0;
           },
-          get selectedItems() {
-            return selectedItems();
+          get selection() {
+            return selection();
           },
-          onSelectedItemsChange: handleSelectedItemsChange,
+          onSelectionChange: handleSelectionChange,
           get autoSelect() {
-            return isSelectMode() && local.selectMode === "single" ? "click" : void 0;
+            return isSelectMode() && local.selectionMode === "single" ? true : void 0;
           },
           cellClass: (item) => {
             if (isItemDeleted(item)) {
@@ -670,7 +673,7 @@ const CrudSheetBase = (props) => {
                       theme: "danger",
                       get disabled() {
                         var _a;
-                        return !(((_a = local.itemDeletable) == null ? void 0 : _a.call(local, dsCtx.item)) ?? true);
+                        return !(((_a = local.isItemDeletable) == null ? void 0 : _a.call(local, dsCtx.item)) ?? true);
                       },
                       onClick: () => handleToggleDelete(dsCtx.item, dsCtx.index),
                       get children() {
@@ -687,14 +690,14 @@ const CrudSheetBase = (props) => {
               }
             }), _$createComponent(For, {
               get each() {
-                return defs().columns;
+                return columnSlots();
               },
               children: (col) => _$createComponent(DataSheetColumn, {
                 get key() {
                   return col.key;
                 },
                 get header() {
-                  return col.header;
+                  return normalizeHeader(col.header);
                 },
                 get headerContent() {
                   return col.headerContent;
@@ -709,13 +712,13 @@ const CrudSheetBase = (props) => {
                   return col.tooltip;
                 },
                 get fixed() {
-                  return col.fixed;
+                  return col.fixed ?? false;
                 },
                 get hidden() {
-                  return col.hidden;
+                  return col.hidden ?? false;
                 },
                 get collapse() {
-                  return col.collapse;
+                  return col.collapse ?? false;
                 },
                 get width() {
                   return col.width;
@@ -724,10 +727,10 @@ const CrudSheetBase = (props) => {
                   return col.class;
                 },
                 get sortable() {
-                  return col.sortable;
+                  return col.sortable ?? true;
                 },
                 get resizable() {
-                  return col.resizable;
+                  return col.resizable ?? true;
                 },
                 children: (dsCtx) => {
                   var _a;
@@ -737,10 +740,10 @@ const CrudSheetBase = (props) => {
                       setItems(dsCtx.index, key, value);
                     }
                   };
-                  if (local.dialogEdit && col.editTrigger && canEdit() && (((_a = local.itemEditable) == null ? void 0 : _a.call(local, dsCtx.item)) ?? true)) {
+                  if (local.dialogEdit && (col.editTrigger ?? false) && canEdit() && (((_a = local.isItemEditable) == null ? void 0 : _a.call(local, dsCtx.item)) ?? true)) {
                     return _$createComponent(Link, {
                       get ["class"]() {
-                        return clsx("flex", "gap-1");
+                        return clsx("flex", gap.default);
                       },
                       onClick: (e) => {
                         e.preventDefault();
@@ -756,13 +759,13 @@ const CrudSheetBase = (props) => {
                           return _el$9;
                         })(), (() => {
                           var _el$0 = _tmpl$8();
-                          _$insert(_el$0, () => col.cell(crudCtx));
+                          _$insert(_el$0, () => col.children(crudCtx));
                           return _el$0;
                         })()];
                       }
                     });
                   }
-                  return col.cell(crudCtx);
+                  return col.children(crudCtx);
                 }
               })
             }), _$createComponent(Show, {
@@ -782,8 +785,9 @@ const CrudSheetBase = (props) => {
                     var _el$1 = _tmpl$9();
                     _$insert(_el$1, () => {
                       var _a;
-                      return (_a = objGetChainValue(dsCtx.item, local.lastModifiedAtProp, true)) == null ? void 0 : _a.toFormatString("yyyy-MM-dd HH:mm");
+                      return (_a = obj.getChainValue(dsCtx.item, local.lastModifiedAtProp, true)) == null ? void 0 : _a.toFormatString("yyyy-MM-dd HH:mm");
                     });
+                    _$effect(() => _$className(_el$1, clsx(pad.default, "text-center")));
                     return _el$1;
                   })()
                 });
@@ -803,7 +807,8 @@ const CrudSheetBase = (props) => {
                   hidden: true,
                   children: (dsCtx) => (() => {
                     var _el$10 = _tmpl$9();
-                    _$insert(_el$10, () => objGetChainValue(dsCtx.item, local.lastModifiedByProp, true));
+                    _$insert(_el$10, () => obj.getChainValue(dsCtx.item, local.lastModifiedByProp, true));
+                    _$effect(() => _$className(_el$10, clsx(pad.default, "text-center")));
                     return _el$10;
                   })()
                 });
@@ -820,7 +825,7 @@ const CrudSheetBase = (props) => {
           var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
           _$insert(_el$5, _$createComponent(Show, {
             get when() {
-              return selectedItems().length > 0;
+              return selection().length > 0;
             },
             get children() {
               return _$createComponent(Button, {
@@ -828,14 +833,14 @@ const CrudSheetBase = (props) => {
                 theme: "danger",
                 onClick: handleSelectCancel,
                 get children() {
-                  return _$memo(() => local.selectMode === "multiple")() ? i18n.t("crudSheet.deselectAll") : i18n.t("crudSheet.deselect");
+                  return _$memo(() => local.selectionMode === "multiple")() ? i18n.t("crudSheet.deselectAll") : i18n.t("crudSheet.deselect");
                 }
               });
             }
           }), null);
           _$insert(_el$5, _$createComponent(Show, {
             get when() {
-              return local.selectMode === "multiple";
+              return local.selectionMode === "multiple";
             },
             get children() {
               return _$createComponent(Button, {
@@ -843,7 +848,7 @@ const CrudSheetBase = (props) => {
                 theme: "primary",
                 onClick: handleSelectConfirm,
                 get children() {
-                  return [_$memo(() => i18n.t("crudSheet.confirm")), " (", _$memo(() => selectedItems().length), ")"];
+                  return [_$memo(() => i18n.t("crudSheet.confirm")), " (", _$memo(() => selection().length), ")"];
                 }
               });
             }
@@ -854,11 +859,12 @@ const CrudSheetBase = (props) => {
     }
   })];
 };
-const CrudSheet = CrudSheetBase;
-CrudSheet.Column = CrudSheetColumn;
-CrudSheet.Filter = CrudSheetFilter;
-CrudSheet.Tools = CrudSheetTools;
-CrudSheet.Header = CrudSheetHeader;
+const CrudSheet = Object.assign(CrudSheetBase, {
+  Column: CrudSheetColumn,
+  Filter: CrudSheetFilter,
+  Tools: CrudSheetTools,
+  Header: CrudSheetHeader
+});
 _$delegateEvents(["click"]);
 export {
   CrudSheet