@simplysm/solid 13.0.62 → 13.0.64

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

@@ -11,7 +11,8 @@ import {
 } from "solid-js";
 import { createStore, produce, reconcile } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
-import { objClone } from "@simplysm/core-common";
+import type { DateTime } from "@simplysm/core-common";
+import { objClone, objGetChainValue } from "@simplysm/core-common";
 import "@simplysm/core-common"; // register extensions
 import type { SortingDef } from "../sheet/types";
 import { DataSheet } from "../sheet/DataSheet";
@@ -26,6 +27,7 @@ import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 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 {
   IconDeviceFloppy,
@@ -67,11 +69,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     "search",
     "getItemKey",
     "persistKey",
-    "itemsPerPage",
     "editable",
     "itemEditable",
     "itemDeletable",
     "itemDeleted",
+    "isItemSelectable",
+    "lastModifiedAtProp",
+    "lastModifiedByProp",
+    "onSubmitted",
     "filterInitial",
     "items",
     "onItemsChange",
@@ -123,6 +128,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   const [ready, setReady] = createSignal(false);
 
   const [selectedItems, setSelectedItems] = createSignal<TItem[]>([]);
+  const [selectedKeys, setSelectedKeys] = createSignal<Set<string | number>>(new Set());
 
   let formRef: HTMLFormElement | undefined;
 
@@ -130,6 +136,23 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     void doRefresh();
   });
 
+  // -- Key-based selection: restore selectedItems when items change --
+  createEffect(() => {
+    const currentItems = items as unknown as TItem[];
+    const keys = selectedKeys();
+    if (keys.size === 0) {
+      if (selectedItems().length > 0) {
+        setSelectedItems([]);
+      }
+      return;
+    }
+    const restored = currentItems.filter((item) => {
+      const key = local.getItemKey(item);
+      return key != null && keys.has(key);
+    });
+    setSelectedItems(restored);
+  });
+
   async function doRefresh() {
     setBusyCount((c) => c + 1);
     try {
@@ -142,12 +165,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   async function refresh() {
-    const usePagination = local.itemsPerPage != null;
-    const result: SearchResult<TItem> = await local.search(
-      lastFilter(),
-      usePagination ? page() : 0,
-      sorts(),
-    );
+    const result: SearchResult<TItem> = await local.search(lastFilter(), page(), sorts());
     setItems(reconcile(result.items));
     originalItems = objClone(result.items);
     setTotalPageCount(result.pageCount ?? 0);
@@ -155,20 +173,28 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   /* eslint-disable solid/reactivity -- 이벤트 핸들러에서만 호출, store 즉시 읽기 */
   function getItemDiffs() {
-    return (items as unknown as TItem[]).oneWayDiffs(originalItems, ((item: TItem) => {
-      return local.getItemKey(item);
-    }) as (item: TItem) => keyof TItem);
+    return items.oneWayDiffs(originalItems, (item) => local.getItemKey(item), {
+      excludes: local.inlineEdit?.diffsExcludes,
+    });
   }
   /* eslint-enable solid/reactivity */
 
+  function checkIgnoreChanges(): boolean {
+    if (!local.inlineEdit) return true;
+    if (getItemDiffs().length === 0) return true;
+    return confirm("변경사항이 있습니다. 무시하시겠습니까?");
+  }
+
   // -- Filter --
   function handleFilterSubmit(e: Event) {
     e.preventDefault();
+    if (!checkIgnoreChanges()) return;
     setPage(1);
     setLastFilter(() => objClone(filter));
   }
 
   async function handleRefresh() {
+    if (!checkIgnoreChanges()) return;
     await doRefresh();
   }
 
@@ -216,6 +242,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       await local.inlineEdit.submit(diffs);
       noti.success("저장 완료", "저장되었습니다.");
       await refresh();
+      local.onSubmitted?.();
     } catch (err) {
       noti.error(err, "저장 실패");
     }
@@ -257,13 +284,28 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setBusyCount((c) => c - 1);
   }
 
+  async function handleRestoreItems() {
+    if (!local.modalEdit?.restoreItems) return;
+    const result = await local.modalEdit.restoreItems(selectedItems());
+    if (!result) return;
+
+    setBusyCount((c) => c + 1);
+    try {
+      await refresh();
+      noti.success("복구 완료", "복구되었습니다.");
+    } catch (err) {
+      noti.error(err, "복구 실패");
+    }
+    setBusyCount((c) => c - 1);
+  }
+
   // -- Excel --
   async function handleExcelDownload() {
     if (!local.excel) return;
 
     setBusyCount((c) => c + 1);
     try {
-      const result = await local.search(lastFilter(), 0, sorts());
+      const result = await local.search(lastFilter(), undefined, sorts());
       await local.excel.download(result.items);
     } catch (err) {
       noti.error(err, "엑셀 다운로드 실패");
@@ -295,16 +337,51 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   // -- Select Mode --
+  function handleSelectedItemsChange(newSelectedItems: TItem[]) {
+    // 현재 페이지 아이템들의 key Set
+    const currentItems = items as unknown as TItem[];
+    const currentKeys = new Set<string | number>();
+    for (const item of currentItems) {
+      const key = local.getItemKey(item);
+      if (key != null) currentKeys.add(key);
+    }
+
+    // 새로 선택된 아이템들의 key
+    const newSelectedKeys = new Set<string | number>();
+    for (const item of newSelectedItems) {
+      const key = local.getItemKey(item);
+      if (key != null) newSelectedKeys.add(key);
+    }
+
+    // 다른 페이지 key 보존 + 현재 페이지 key 갱신
+    const merged = new Set<string | number>();
+    for (const key of selectedKeys()) {
+      if (!currentKeys.has(key)) {
+        merged.add(key); // 다른 페이지 key 보존
+      }
+    }
+    for (const key of newSelectedKeys) {
+      merged.add(key); // 현재 페이지 선택 추가
+    }
+
+    setSelectedKeys(merged);
+    setSelectedItems(newSelectedItems);
+  }
+
+  function clearSelection() {
+    setSelectedKeys(new Set<string | number>());
+    setSelectedItems([]);
+  }
+
   function handleSelectConfirm() {
     local.onSelect?.({
       items: selectedItems(),
-      keys: selectedItems()
-        .map((item) => local.getItemKey(item))
-        .filter((k): k is string | number => k != null),
+      keys: [...selectedKeys()],
     });
   }
 
   function handleSelectCancel() {
+    clearSelection();
     local.onSelect?.({ items: [], keys: [] });
   }
 
@@ -316,10 +393,25 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
+      if (!checkIgnoreChanges()) return;
       await doRefresh();
     }
   });
 
+  // -- Route Leave Guard --
+  // eslint-disable-next-line solid/reactivity -- inlineEdit는 초기 설정값으로만 사용
+  if (!isModal && local.inlineEdit) {
+    try {
+      useBeforeLeave((e) => {
+        if (!checkIgnoreChanges()) {
+          e.preventDefault();
+        }
+      });
+    } catch {
+      // Router context 없으면 skip
+    }
+  }
+
   // -- Topbar Actions --
   if (topbarCtx) {
     createTopbarActions(() => (
@@ -361,6 +453,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     addItem: handleAddRow,
     setPage,
     setSorts,
+    clearSelection,
   };
 
   // -- Render --
@@ -458,13 +551,32 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   onClick={handleDeleteItems}
                   disabled={
                     selectedItems().length === 0 ||
-                    !selectedItems().some((item) => local.itemDeletable?.(item) ?? true)
+                    !selectedItems().some(
+                      (item) =>
+                        (local.itemDeletable?.(item) ?? true) &&
+                        !(local.itemDeleted?.(item) ?? false),
+                    )
                   }
                 >
                   <Icon icon={IconTrash} class="mr-1" />
                   선택 삭제
                 </Button>
               </Show>
+              <Show when={canEdit() && local.modalEdit?.restoreItems}>
+                <Button
+                  size="sm"
+                  theme="warning"
+                  variant="ghost"
+                  onClick={handleRestoreItems}
+                  disabled={
+                    selectedItems().length === 0 ||
+                    !selectedItems().some((item) => local.itemDeleted?.(item) ?? false)
+                  }
+                >
+                  <Icon icon={IconTrashOff} class="mr-1" />
+                  선택 복구
+                </Button>
+              </Show>
 
               {/* Excel buttons */}
               <Show when={canEdit() && local.excel?.upload}>
@@ -492,21 +604,21 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             class="h-full"
             items={items}
             persistKey={local.persistKey != null ? `${local.persistKey}-sheet` : undefined}
-            page={local.itemsPerPage != null ? page() : undefined}
+            page={totalPageCount() > 0 ? page() : undefined}
             onPageChange={setPage}
             totalPageCount={totalPageCount()}
-            itemsPerPage={local.itemsPerPage}
             sorts={sorts()}
             onSortsChange={setSorts}
+            isItemSelectable={local.isItemSelectable}
             selectMode={
               isSelectMode()
                 ? local.selectMode
-                : local.modalEdit?.deleteItems != null
+                : local.modalEdit?.deleteItems != null || local.modalEdit?.restoreItems != null
                   ? "multiple"
                   : undefined
             }
             selectedItems={selectedItems()}
-            onSelectedItemsChange={setSelectedItems}
+            onSelectedItemsChange={handleSelectedItemsChange}
             autoSelect={isSelectMode() && local.selectMode === "single" ? "click" : undefined}
             cellClass={(item) => {
               if (isItemDeleted(item)) {
@@ -593,6 +705,31 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                 </DataSheetColumn>
               )}
             </For>
+
+            {/* Auto lastModified columns */}
+            <Show when={local.lastModifiedAtProp}>
+              <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header="수정일시" hidden>
+                {(dsCtx) => (
+                  <div class="px-2 py-1 text-center">
+                    {(
+                      objGetChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
+                        | DateTime
+                        | undefined
+                    )?.toFormatString("yyyy-MM-dd HH:mm")}
+                  </div>
+                )}
+              </DataSheetColumn>
+            </Show>
+
+            <Show when={local.lastModifiedByProp}>
+              <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header="수정자" hidden>
+                {(dsCtx) => (
+                  <div class="px-2 py-1 text-center">
+                    {objGetChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
+                  </div>
+                )}
+              </DataSheetColumn>
+            </Show>
           </DataSheet>
         </form>
 

package/src/components/data/crud-sheet/types.ts

@@ -16,11 +16,13 @@ export interface InlineEditConfig<TItem> {
   submit: (diffs: ArrayDiffs2Result<TItem>[]) => Promise<void>;
   newItem: () => TItem;
   deleteProp?: keyof TItem & string;
+  diffsExcludes?: string[];
 }
 
 export interface ModalEditConfig<TItem> {
-  editItem: (item?: TItem) => Promise<boolean>;
+  editItem: (item?: TItem) => Promise<boolean | undefined>;
   deleteItems?: (items: TItem[]) => Promise<boolean>;
+  restoreItems?: (items: TItem[]) => Promise<boolean>;
 }
 
 export interface ExcelConfig<TItem> {
@@ -56,6 +58,7 @@ export interface CrudSheetContext<TItem> {
   save(): Promise<void>;
   refresh(): Promise<void>;
   addItem(): void;
+  clearSelection(): void;
   setPage(page: number): void;
   setSorts(sorts: SortingDef[]): void;
 }
@@ -73,20 +76,27 @@ export type CrudSheetProps<TItem, TFilter extends Record<string, any>> = CrudShe
   );
 
 interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
-  search: (filter: TFilter, page: number, sorts: SortingDef[]) => Promise<SearchResult<TItem>>;
+  search: (
+    filter: TFilter,
+    page: number | undefined,
+    sorts: SortingDef[],
+  ) => Promise<SearchResult<TItem>>;
   getItemKey: (item: TItem) => string | number | undefined;
   persistKey?: string;
-  itemsPerPage?: number;
   editable?: boolean;
   itemEditable?: (item: TItem) => boolean;
   itemDeletable?: (item: TItem) => boolean;
   itemDeleted?: (item: TItem) => boolean;
+  isItemSelectable?: (item: TItem) => boolean | string;
+  lastModifiedAtProp?: string;
+  lastModifiedByProp?: string;
   filterInitial?: TFilter;
   items?: TItem[];
   onItemsChange?: (items: TItem[]) => void;
   excel?: ExcelConfig<TItem>;
   selectMode?: "single" | "multiple";
   onSelect?: (result: SelectResult<TItem>) => void;
+  onSubmitted?: () => void;
   hideAutoTools?: boolean;
   class?: string;
   children: JSX.Element;

package/src/components/data/sheet/DataSheet.tsx

@@ -114,10 +114,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
   // #region Column Collection
   const resolved = children(() => local.children);
-  const columnDefs = createMemo(() =>
-    (resolved.toArray().filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[]).filter(
-      (col) => !col.hidden,
-    ),
+  const columnDefs = createMemo(
+    () => resolved.toArray().filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[],
   );
 
   // #region Config (useSyncConfig)
@@ -130,14 +128,15 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
   // 설정이 적용된 최종 컬럼 — config의 hidden/fixed/width/displayOrder 오버라이드 적용
   const effectiveColumns = createMemo(() => {
-    const cols = columnDefs(); // 이미 col.hidden (코드 설정) 필터링됨
+    const cols = columnDefs();
     const record = config().columnRecord ?? {};
 
     return cols
       .filter((col) => {
-        // config에서 hidden으로 설정된 컬럼 제외
+        // config 오버라이드가 있으면 config 우선, 없으면 원래 col.hidden 사용
         const saved = record[col.key];
-        return !saved?.hidden;
+        const isHidden = saved?.hidden ?? col.hidden;
+        return !isHidden;
       })
       .map((col) => {
         const saved = record[col.key];

package/src/components/form-control/checkbox/Checkbox.styles.ts

@@ -1,6 +1,5 @@
 import clsx from "clsx";
 import {
-  bgSurface,
   borderDefault,
   type ComponentSize,
   disabledOpacity,
@@ -32,7 +31,8 @@ export const indicatorBaseClass = clsx(
   "size-4",
   "border",
   borderDefault,
-  bgSurface,
+  // bgSurface,
+  "bg-primary-50 dark:bg-primary-950/30",
   "transition-colors",
 );
 

package/src/components/form-control/checkbox/Checkbox.tsx

@@ -90,27 +90,25 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
 
   return (
     <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div class="inline-flex">
-        <label
-          {...rest}
-          use:ripple={!local.disabled}
-          role="checkbox"
-          aria-checked={value()}
-          tabIndex={local.disabled ? -1 : 0}
-          class={getWrapperClass()}
-          style={local.style}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-        >
-          <div class={getIndicatorClass()}>
-            <Show when={value()}>
-              <Icon icon={IconCheck} size="1em" />
-            </Show>
-          </div>
-          <Show when={local.children}>
-            <span>{local.children}</span>
+      <div
+        {...rest}
+        use:ripple={!local.disabled}
+        role="checkbox"
+        aria-checked={value()}
+        tabIndex={local.disabled ? -1 : 0}
+        class={getWrapperClass()}
+        style={local.style}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div class={getIndicatorClass()}>
+          <Show when={value()}>
+            <Icon icon={IconCheck} size="1em" />
           </Show>
-        </label>
+        </div>
+        <Show when={local.children}>
+          <span>{local.children}</span>
+        </Show>
       </div>
     </Invalid>
   );

package/src/components/form-control/checkbox/Radio.tsx

@@ -91,27 +91,25 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
 
   return (
     <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div class="inline-flex">
-        <label
-          {...rest}
-          use:ripple={!local.disabled}
-          role="radio"
-          aria-checked={value()}
-          tabIndex={local.disabled ? -1 : 0}
-          class={getWrapperClass()}
-          style={local.style}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-        >
-          <div class={getIndicatorClass()}>
-            <Show when={value()}>
-              <div class={radioDotClass} />
-            </Show>
-          </div>
-          <Show when={local.children}>
-            <span>{local.children}</span>
+      <div
+        {...rest}
+        use:ripple={!local.disabled}
+        role="radio"
+        aria-checked={value()}
+        tabIndex={local.disabled ? -1 : 0}
+        class={getWrapperClass()}
+        style={local.style}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div class={getIndicatorClass()}>
+          <Show when={value()}>
+            <div class={radioDotClass} />
           </Show>
-        </label>
+        </div>
+        <Show when={local.children}>
+          <span>{local.children}</span>
+        </Show>
       </div>
     </Invalid>
   );