@simplysm/solid 13.0.75 → 13.0.77

package/src/components/features/crud-sheet/CrudSheet.tsx

@@ -1,11 +1,8 @@
 import {
-  children,
   createEffect,
-  createMemo,
   createSignal,
   createUniqueId,
   For,
-  type JSX,
   onCleanup,
   Show,
   splitProps,
@@ -14,24 +11,27 @@ import {
 import { createStore, produce, reconcile } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
 import type { DateTime } from "@simplysm/core-common";
-import { objClone, objGetChainValue } from "@simplysm/core-common";
+import { obj } from "@simplysm/core-common";
 import "@simplysm/core-common"; // register extensions
-import type { SortingDef } from "../../data/sheet/types";
+import { openFileDialog } from "@simplysm/core-browser";
+import type { SortingDef } from "../../data/sheet/DataSheet.types";
 import { DataSheet } from "../../data/sheet/DataSheet";
 import { DataSheetColumn } from "../../data/sheet/DataSheetColumn";
+import { normalizeHeader } from "../../data/sheet/DataSheet.utils";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
-import { useNotification } from "../../feedback/notification/NotificationContext";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useNotification } from "../../feedback/notification/NotificationProvider";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
 import { FormGroup } from "../../layout/FormGroup";
-import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarContext";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import { useTopbarActions, TopbarContext } from "../../layout/topbar/Topbar";
 import { Dialog } from "../../disclosure/Dialog";
 import { Link } from "../../display/Link";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { useBeforeLeave } from "@solidjs/router";
 import clsx from "clsx";
+import { text } from "../../../styles/base.styles";
+import { gap, pad } from "../../../styles/control.styles";
 import {
   IconDeviceFloppy,
   IconExternalLink,
@@ -44,52 +44,42 @@ import {
   IconUpload,
 } from "@tabler/icons-solidjs";
 import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry";
-import { CrudSheetColumn, isCrudSheetColumnDef } from "./CrudSheetColumn";
-import { CrudSheetFilter, isCrudSheetFilterDef } from "./CrudSheetFilter";
-import { CrudSheetTools, isCrudSheetToolsDef } from "./CrudSheetTools";
-import { CrudSheetHeader, isCrudSheetHeaderDef } from "./CrudSheetHeader";
+import { CrudSheetColumn, createCrudSheetColumnSlotsAccessor } from "./CrudSheetColumn";
+import { CrudSheetFilter, createCrudSheetFilterSlotAccessor } from "./CrudSheetFilter";
+import { CrudSheetTools, createCrudSheetToolsSlotAccessor } from "./CrudSheetTools";
+import { CrudSheetHeader, createCrudSheetHeaderSlotAccessor } from "./CrudSheetHeader";
 import type {
-  CrudSheetColumnDef,
+  CrudSheetCellContext,
   CrudSheetContext,
-  CrudSheetFilterDef,
-  CrudSheetHeaderDef,
   CrudSheetProps,
-  CrudSheetToolsDef,
   SearchResult,
-} from "./types";
+} from "./CrudSheet.types";
 
-interface CrudSheetComponent {
-  <TItem, TFilter extends Record<string, any>>(props: CrudSheetProps<TItem, TFilter>): JSX.Element;
-  Column: typeof CrudSheetColumn;
-  Filter: typeof CrudSheetFilter;
-  Tools: typeof CrudSheetTools;
-  Header: typeof CrudSheetHeader;
-}
-
-const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
+const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
   props: CrudSheetProps<TItem, TFilter>,
 ) => {
   const [local] = splitProps(props, [
     "search",
     "getItemKey",
-    "persistKey",
+    "storageKey",
     "editable",
-    "itemEditable",
-    "itemDeletable",
-    "itemDeleted",
+    "isItemEditable",
+    "isItemDeletable",
+    "isItemDeleted",
     "isItemSelectable",
     "lastModifiedAtProp",
     "lastModifiedByProp",
-    "onSubmitted",
+    "onSubmitComplete",
     "filterInitial",
     "items",
     "onItemsChange",
     "inlineEdit",
     "dialogEdit",
     "excel",
-    "selectMode",
+    "selectionMode",
     "onSelect",
     "hideAutoTools",
+    "close",
     "class",
     "children",
   ]);
@@ -97,22 +87,15 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   const noti = useNotification();
   const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
-  const dialogInstance = useDialogInstance();
-  const isInDialog = dialogInstance !== undefined;
-  const isSelectMode = () => local.selectMode != null;
+  const isInDialog = local.close !== undefined;
+  const isSelectMode = () => local.selectionMode != null;
   const canEdit = () => (isInDialog && isSelectMode() ? false : (local.editable ?? true));
 
-  // -- Children Resolution --
-  const resolved = children(() => local.children);
-  const defs = createMemo(() => {
-    const arr = resolved.toArray();
-    return {
-      filter: arr.find(isCrudSheetFilterDef) as CrudSheetFilterDef<TFilter> | undefined,
-      columns: arr.filter(isCrudSheetColumnDef) as unknown as CrudSheetColumnDef<TItem>[],
-      tools: arr.find(isCrudSheetToolsDef) as CrudSheetToolsDef<TItem> | undefined,
-      header: arr.find(isCrudSheetHeaderDef) as CrudSheetHeaderDef | undefined,
-    };
-  });
+  // -- Slot Accessors --
+  const [headerSlot, HeaderProvider] = createCrudSheetHeaderSlotAccessor();
+  const [filterSlot, FilterProvider] = createCrudSheetFilterSlotAccessor();
+  const [toolsSlot, ToolsProvider] = createCrudSheetToolsSlotAccessor();
+  const [columnSlots, ColumnsProvider] = createCrudSheetColumnSlotsAccessor();
 
   // -- State --
   const [items, setItems] = createControllableStore<TItem[]>({
@@ -121,18 +104,30 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   });
   let originalItems: TItem[] = [];
 
-  // eslint-disable-next-line solid/reactivity -- filterInitial is used only for initial value
   const [filter, setFilter] = createStore<TFilter>((local.filterInitial ?? {}) as TFilter);
-  const [lastFilter, setLastFilter] = createSignal<TFilter>(objClone(filter));
+  const [lastFilter, setLastFilter] = createSignal<TFilter>(obj.clone(filter));
 
   const [page, setPage] = createSignal(1);
   const [totalPageCount, setTotalPageCount] = createSignal(0);
   const [sorts, setSorts] = createSignal<SortingDef[]>([]);
 
   const [busyCount, setBusyCount] = createSignal(0);
+
+  async function withBusy<T>(fn: () => Promise<T>, errorMessage?: string): Promise<T | undefined> {
+    setBusyCount((c) => c + 1);
+    try {
+      return await fn();
+    } catch (err) {
+      noti.error(err, errorMessage);
+      return undefined;
+    } finally {
+      setBusyCount((c) => c - 1);
+    }
+  }
+
   const [ready, setReady] = createSignal(false);
 
-  const [selectedItems, setSelectedItems] = createSignal<TItem[]>([]);
+  const [selection, setSelection] = createSignal<TItem[]>([]);
   const [selectedKeys, setSelectedKeys] = createSignal<Set<string | number>>(new Set());
 
   let formRef: HTMLFormElement | undefined;
@@ -142,17 +137,19 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   createEventListener(() => formRef, "pointerdown", () => activateCrud(crudId));
   createEventListener(() => formRef, "focusin", () => activateCrud(crudId));
 
+  let refreshVersion = 0;
+
   createEffect(() => {
     void doRefresh();
   });
 
-  // -- Key-based selection: restore selectedItems when items change --
+  // -- Key-based selection: restore selection when items change --
   createEffect(() => {
-    const currentItems = items as unknown as TItem[];
+    const currentItems = items;
     const keys = selectedKeys();
     if (keys.size === 0) {
-      if (selectedItems().length > 0) {
-        setSelectedItems([]);
+      if (selection().length > 0) {
+        setSelection([]);
       }
       return;
     }
@@ -160,34 +157,36 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       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: SearchResult<TItem> = await local.search(lastFilter(), page(), sorts());
     setItems(reconcile(result.items));
-    originalItems = objClone(result.items);
+    originalItems = obj.clone(result.items);
     setTotalPageCount(result.pageCount ?? 0);
   }
 
-  /* eslint-disable solid/reactivity -- called only in event handlers, immediate store read */
   function getItemDiffs() {
     return items.oneWayDiffs(originalItems, (item) => local.getItemKey(item), {
       excludes: local.inlineEdit?.diffsExcludes,
     });
   }
-  /* eslint-enable solid/reactivity */
 
   function checkIgnoreChanges(): boolean {
     if (!local.inlineEdit) return true;
@@ -200,7 +199,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     e.preventDefault();
     if (!checkIgnoreChanges()) return;
     setPage(1);
-    setLastFilter(() => objClone(filter));
+    setLastFilter(() => obj.clone(filter));
   }
 
   async function handleRefresh() {
@@ -219,7 +218,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   function handleToggleDelete(item: TItem, index: number) {
-    if (!(local.itemDeletable?.(item) ?? true)) return;
+    if (!(local.isItemDeletable?.(item) ?? true)) return;
     if (local.inlineEdit?.deleteProp == null) return;
     const dp = local.inlineEdit.deleteProp;
 
@@ -232,7 +231,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       return;
     }
 
-    setItems(index as any, dp as any, !(item[dp] as boolean) as any);
+    setItems(
+      produce((draft) => {
+        (draft[index] as Record<string, unknown>)[dp] = !(item[dp] as boolean);
+      }),
+    );
   }
 
   async function handleSave() {
@@ -247,16 +250,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       return;
     }
 
-    setBusyCount((c) => c + 1);
-    try {
-      await local.inlineEdit.submit(diffs);
+    await withBusy(async () => {
+      await local.inlineEdit!.submit(diffs);
       noti.success(i18n.t("crudSheet.saveCompleted"), i18n.t("crudSheet.saveSuccess"));
       await refresh();
-      local.onSubmitted?.();
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.saveFailed"));
-    }
-    setBusyCount((c) => c - 1);
+      local.onSubmitComplete?.();
+    }, i18n.t("crudSheet.saveFailed"));
   }
 
   async function handleFormSubmit(e: Event) {
@@ -270,86 +269,59 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     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() {
     if (!local.dialogEdit?.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() {
     if (!local.dialogEdit?.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"));
   }
 
   // -- Excel --
   async function handleExcelDownload() {
     if (!local.excel) return;
 
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
       const result = await local.search(lastFilter(), undefined, sorts());
-      await local.excel.download(result.items);
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.excelDownloadFailed"));
-    }
-    setBusyCount((c) => c - 1);
+      await local.excel!.download(result.items);
+    }, i18n.t("crudSheet.excelDownloadFailed"));
   }
 
-  function handleExcelUpload() {
+  async function handleExcelUpload() {
     if (!local.excel?.upload) return;
 
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".xlsx";
-    input.onchange = async () => {
-      const file = input.files?.[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?.[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"));
   }
 
   // -- Select Mode --
-  function handleSelectedItemsChange(newSelectedItems: TItem[]) {
+  function handleSelectionChange(newSelection: TItem[]) {
     // Current page items key Set
-    const currentItems = items as unknown as TItem[];
+    const currentItems = items;
     const currentKeys = new Set<string | number>();
     for (const item of currentItems) {
       const key = local.getItemKey(item);
@@ -358,7 +330,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
     // Newly selected items key
     const newSelectedKeys = new Set<string | number>();
-    for (const item of newSelectedItems) {
+    for (const item of newSelection) {
       const key = local.getItemKey(item);
       if (key != null) newSelectedKeys.add(key);
     }
@@ -375,17 +347,17 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     }
 
     setSelectedKeys(merged);
-    setSelectedItems(newSelectedItems);
+    setSelection(newSelection);
   }
 
   function clearSelection() {
     setSelectedKeys(new Set<string | number>());
-    setSelectedItems([]);
+    setSelection([]);
   }
 
   function handleSelectConfirm() {
     local.onSelect?.({
-      items: selectedItems(),
+      items: selection(),
       keys: [...selectedKeys()],
     });
   }
@@ -412,7 +384,6 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   });
 
   // -- Route Leave Guard --
-  // eslint-disable-next-line solid/reactivity -- inlineEdit is used only for initial value
   if (!isInDialog && local.inlineEdit) {
     try {
       useBeforeLeave((e) => {
@@ -427,7 +398,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Topbar Actions --
   if (topbarCtx) {
-    createTopbarActions(() => (
+    useTopbarActions(() => (
       <>
         <Show when={canEdit() && local.inlineEdit}>
           <Button
@@ -450,8 +421,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Context for Tools --
   const ctx: CrudSheetContext<TItem> = {
-    items: () => items as unknown as TItem[],
-    selectedItems,
+    items: () => items,
+    selection,
     page,
     sorts,
     busy: () => busyCount() > 0,
@@ -471,15 +442,23 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Render --
   const deleteProp = () => local.inlineEdit?.deleteProp;
-  const isItemDeleted = (item: TItem) => local.itemDeleted?.(item) ?? false;
+  const isItemDeleted = (item: TItem) => local.isItemDeleted?.(item) ?? false;
 
   return (
     <>
+      <ColumnsProvider>
+        <HeaderProvider>
+          <FilterProvider>
+            <ToolsProvider>{local.children}</ToolsProvider>
+          </FilterProvider>
+        </HeaderProvider>
+      </ColumnsProvider>
+
       {/* Dialog mode: Dialog.Action (refresh button in header) */}
       <Show when={isInDialog}>
         <Dialog.Action>
           <button
-            class="flex items-center px-2 text-base-400 hover:text-base-600"
+            class={clsx("flex items-center px-2 hover:text-base-600", text.muted)}
             onClick={handleRefresh}
           >
             <Icon icon={IconRefresh} />
@@ -514,11 +493,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         </Show>
 
         {/* Header (optional) */}
-        <Show when={defs().header}>{(headerDef) => headerDef().children}</Show>
+        <Show when={headerSlot()}>{(slot) => slot().children}</Show>
 
         {/* Filter */}
-        <Show when={defs().filter}>
-          {(filterDef) => (
+        <Show when={filterSlot()}>
+          {(slot) => (
             <form class="p-2" onSubmit={handleFilterSubmit}>
               <FormGroup inline>
                 <FormGroup.Item>
@@ -527,7 +506,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                     {i18n.t("crudSheet.search")}
                   </Button>
                 </FormGroup.Item>
-                {filterDef().children(filter, setFilter)}
+                {slot().children(filter, setFilter)}
               </FormGroup>
             </form>
           )}
@@ -563,11 +542,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   variant="ghost"
                   onClick={handleDeleteItems}
                   disabled={
-                    selectedItems().length === 0 ||
-                    !selectedItems().some(
+                    selection().length === 0 ||
+                    !selection().some(
                       (item) =>
-                        (local.itemDeletable?.(item) ?? true) &&
-                        !(local.itemDeleted?.(item) ?? false),
+                        (local.isItemDeletable?.(item) ?? true) &&
+                        !(local.isItemDeleted?.(item) ?? false),
                     )
                   }
                 >
@@ -582,8 +561,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   variant="ghost"
                   onClick={handleRestoreItems}
                   disabled={
-                    selectedItems().length === 0 ||
-                    !selectedItems().some((item) => local.itemDeleted?.(item) ?? false)
+                    selection().length === 0 ||
+                    !selection().some((item) => local.isItemDeleted?.(item) ?? false)
                   }
                 >
                   <Icon icon={IconTrashOff} class="mr-1" />
@@ -607,7 +586,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             </Show>
 
             {/* Custom tools */}
-            <Show when={defs().tools}>{(toolsDef) => toolsDef().children(ctx)}</Show>
+            <Show when={toolsSlot()}>{(slot) => slot().children(ctx)}</Show>
           </div>
         </Show>
 
@@ -616,23 +595,23 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
           <DataSheet
             class="h-full"
             items={items}
-            persistKey={local.persistKey != null ? `${local.persistKey}-sheet` : undefined}
+            storageKey={local.storageKey != null ? `${local.storageKey}-sheet` : undefined}
             page={totalPageCount() > 0 ? page() : undefined}
             onPageChange={setPage}
             totalPageCount={totalPageCount()}
             sorts={sorts()}
             onSortsChange={setSorts}
             isItemSelectable={local.isItemSelectable}
-            selectMode={
+            selectionMode={
               isSelectMode()
-                ? local.selectMode
+                ? local.selectionMode
                 : local.dialogEdit?.deleteItems != null || local.dialogEdit?.restoreItems != null
                   ? "multiple"
                   : undefined
             }
-            selectedItems={selectedItems()}
-            onSelectedItemsChange={handleSelectedItemsChange}
-            autoSelect={isSelectMode() && local.selectMode === "single" ? "click" : undefined}
+            selection={selection()}
+            onSelectionChange={handleSelectionChange}
+            autoSelect={isSelectMode() && local.selectionMode === "single" ? true : undefined}
             cellClass={(item) => {
               if (isItemDeleted(item)) {
                 return "line-through";
@@ -653,7 +632,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   <div class="flex items-center justify-center px-1 py-0.5">
                     <Link
                       theme="danger"
-                      disabled={!(local.itemDeletable?.(dsCtx.item) ?? true)}
+                      disabled={!(local.isItemDeletable?.(dsCtx.item) ?? true)}
                       onClick={() => handleToggleDelete(dsCtx.item, dsCtx.index)}
                     >
                       <Icon icon={isItemDeleted(dsCtx.item) ? IconTrashOff : IconTrash} />
@@ -664,41 +643,41 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             </Show>
 
             {/* User-defined columns -- map CrudSheetColumn to DataSheetColumn */}
-            <For each={defs().columns}>
+            <For each={columnSlots()}>
               {(col) => (
                 <DataSheetColumn<TItem>
                   key={col.key}
-                  header={col.header}
+                  header={normalizeHeader(col.header)}
                   headerContent={col.headerContent}
                   headerStyle={col.headerStyle}
                   summary={col.summary}
                   tooltip={col.tooltip}
-                  fixed={col.fixed}
-                  hidden={col.hidden}
-                  collapse={col.collapse}
+                  fixed={col.fixed ?? false}
+                  hidden={col.hidden ?? false}
+                  collapse={col.collapse ?? false}
                   width={col.width}
                   class={col.class}
-                  sortable={col.sortable}
-                  resizable={col.resizable}
+                  sortable={col.sortable ?? true}
+                  resizable={col.resizable ?? true}
                 >
                   {(dsCtx) => {
-                    const crudCtx = {
+                    const crudCtx: CrudSheetCellContext<any> = {
                       ...dsCtx,
-                      setItem: <TKey extends keyof TItem>(key: TKey, value: TItem[TKey]) => {
-                        setItems(dsCtx.index as any, key as any, value as any);
+                      setItem: (key, value) => {
+                        setItems(dsCtx.index as any, key as any, value);
                       },
                     };
 
                     // dialogEdit editable column -- wrap with edit link
                     if (
                       local.dialogEdit &&
-                      col.editTrigger &&
+                      (col.editTrigger ?? false) &&
                       canEdit() &&
-                      (local.itemEditable?.(dsCtx.item) ?? true)
+                      (local.isItemEditable?.(dsCtx.item) ?? true)
                     ) {
                       return (
                         <Link
-                          class={clsx("flex", "gap-1")}
+                          class={clsx("flex", gap.default)}
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -708,12 +687,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                           <div class={"p-1"}>
                             <Icon icon={IconExternalLink} />
                           </div>
-                          <div class={"flex-1"}>{col.cell(crudCtx)}</div>
+                          <div class={"flex-1"}>{col.children(crudCtx)}</div>
                         </Link>
                       );
                     }
 
-                    return col.cell(crudCtx);
+                    return col.children(crudCtx);
                   }}
                 </DataSheetColumn>
               )}
@@ -723,9 +702,9 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             <Show when={local.lastModifiedAtProp}>
               <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header={i18n.t("crudSheet.lastModified")} hidden>
                 {(dsCtx) => (
-                  <div class="px-2 py-1 text-center">
+                  <div class={clsx(pad.default, "text-center")}>
                     {(
-                      objGetChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
+                      obj.getChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
                         | DateTime
                         | undefined
                     )?.toFormatString("yyyy-MM-dd HH:mm")}
@@ -737,8 +716,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             <Show when={local.lastModifiedByProp}>
               <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header={i18n.t("crudSheet.modifiedBy")} hidden>
                 {(dsCtx) => (
-                  <div class="px-2 py-1 text-center">
-                    {objGetChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
+                  <div class={clsx(pad.default, "text-center")}>
+                    {obj.getChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
                   </div>
                 )}
               </DataSheetColumn>
@@ -750,14 +729,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         <Show when={isInDialog && isSelectMode()}>
           <div class="flex gap-2 border-t p-2">
             <div class="flex-1" />
-            <Show when={selectedItems().length > 0}>
+            <Show when={selection().length > 0}>
               <Button size="sm" theme="danger" onClick={handleSelectCancel}>
-                {local.selectMode === "multiple" ? i18n.t("crudSheet.deselectAll") : i18n.t("crudSheet.deselect")}
+                {local.selectionMode === "multiple" ? i18n.t("crudSheet.deselectAll") : i18n.t("crudSheet.deselect")}
               </Button>
             </Show>
-            <Show when={local.selectMode === "multiple"}>
+            <Show when={local.selectionMode === "multiple"}>
               <Button size="sm" theme="primary" onClick={handleSelectConfirm}>
-                {i18n.t("crudSheet.confirm")} ({selectedItems().length})
+                {i18n.t("crudSheet.confirm")} ({selection().length})
               </Button>
             </Show>
           </div>
@@ -767,8 +746,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   );
 };
 
-export const CrudSheet = CrudSheetBase as unknown as CrudSheetComponent;
-CrudSheet.Column = CrudSheetColumn;
-CrudSheet.Filter = CrudSheetFilter;
-CrudSheet.Tools = CrudSheetTools;
-CrudSheet.Header = CrudSheetHeader;
+//#region Export
+export const CrudSheet = Object.assign(CrudSheetBase, {
+  Column: CrudSheetColumn,
+  Filter: CrudSheetFilter,
+  Tools: CrudSheetTools,
+  Header: CrudSheetHeader,
+});
+//#endregion