@simplysm/solid 13.0.57 → 13.0.59

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

@@ -21,7 +21,7 @@ import { useNotification } from "../../feedback/notification/NotificationContext
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
 import { FormGroup } from "../../layout/FormGroup";
-import { TopbarContext, createTopbarActions } from "../../layout/topbar/TopbarContext";
+import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarContext";
 import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import { Dialog } from "../../disclosure/Dialog";
 import { Link } from "../../display/Link";
@@ -29,6 +29,7 @@ import { createEventListener } from "@solid-primitives/event-listener";
 import clsx from "clsx";
 import {
   IconDeviceFloppy,
+  IconExternalLink,
   IconFileExcel,
   IconPlus,
   IconRefresh,
@@ -37,10 +38,10 @@ import {
   IconTrashOff,
   IconUpload,
 } from "@tabler/icons-solidjs";
-import { isCrudSheetColumnDef, CrudSheetColumn } from "./CrudSheetColumn";
-import { isCrudSheetFilterDef, CrudSheetFilter } from "./CrudSheetFilter";
-import { isCrudSheetToolsDef, CrudSheetTools } from "./CrudSheetTools";
-import { isCrudSheetHeaderDef, CrudSheetHeader } from "./CrudSheetHeader";
+import { CrudSheetColumn, isCrudSheetColumnDef } from "./CrudSheetColumn";
+import { CrudSheetFilter, isCrudSheetFilterDef } from "./CrudSheetFilter";
+import { CrudSheetTools, isCrudSheetToolsDef } from "./CrudSheetTools";
+import { CrudSheetHeader, isCrudSheetHeaderDef } from "./CrudSheetHeader";
 import type {
   CrudSheetColumnDef,
   CrudSheetContext,
@@ -70,6 +71,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     "editable",
     "itemEditable",
     "itemDeletable",
+    "itemDeleted",
     "filterInitial",
     "items",
     "onItemsChange",
@@ -124,28 +126,27 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   let formRef: HTMLFormElement | undefined;
 
-  // -- Auto Refresh Effect --
   createEffect(() => {
-    const currLastFilter = lastFilter();
-    const currSorts = sorts();
-    const currPage = page();
-
-    queueMicrotask(async () => {
-      setBusyCount((c) => c + 1);
-      await noti.try(async () => {
-        await refresh(currLastFilter, currSorts, currPage);
-      }, "조회 실패");
-      setBusyCount((c) => c - 1);
-      setReady(true);
-    });
+    void doRefresh();
   });
 
-  async function refresh(currLastFilter: TFilter, currSorts: SortingDef[], currPage: number) {
+  async function doRefresh() {
+    setBusyCount((c) => c + 1);
+    try {
+      await refresh();
+    } catch (err) {
+      noti.error(err, "조회 실패");
+    }
+    setBusyCount((c) => c - 1);
+    setReady(true);
+  }
+
+  async function refresh() {
     const usePagination = local.itemsPerPage != null;
     const result: SearchResult<TItem> = await local.search(
-      currLastFilter,
-      usePagination ? currPage : 0,
-      currSorts,
+      lastFilter(),
+      usePagination ? page() : 0,
+      sorts(),
     );
     setItems(reconcile(result.items));
     originalItems = objClone(result.items);
@@ -167,8 +168,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setLastFilter(() => objClone(filter));
   }
 
-  function handleRefresh() {
-    setLastFilter(() => ({ ...lastFilter() }));
+  async function handleRefresh() {
+    await doRefresh();
   }
 
   // -- Inline Edit --
@@ -210,17 +211,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       return;
     }
 
-    const currLastFilter = lastFilter();
-    const currSorts = sorts();
-    const currPage = page();
-
     setBusyCount((c) => c + 1);
-    // eslint-disable-next-line solid/reactivity -- noti.try 내부에서 비동기 refresh 호출
-    await noti.try(async () => {
-      await local.inlineEdit!.submit(diffs);
+    try {
+      await local.inlineEdit.submit(diffs);
       noti.success("저장 완료", "저장되었습니다.");
-      await refresh(currLastFilter, currSorts, currPage);
-    }, "저장 실패");
+      await refresh();
+    } catch (err) {
+      noti.error(err, "저장 실패");
+    }
     setBusyCount((c) => c - 1);
   }
 
@@ -236,10 +234,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     if (!result) return;
 
     setBusyCount((c) => c + 1);
-    // eslint-disable-next-line solid/reactivity -- noti.try 내부에서 비동기 refresh 호출
-    await noti.try(async () => {
-      await refresh(lastFilter(), sorts(), page());
-    }, "조회 실패");
+    try {
+      await refresh();
+    } catch (err) {
+      noti.error(err, "조회 실패");
+    }
     setBusyCount((c) => c - 1);
   }
 
@@ -249,11 +248,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     if (!result) return;
 
     setBusyCount((c) => c + 1);
-    // eslint-disable-next-line solid/reactivity -- noti.try 내부에서 비동기 refresh 호출
-    await noti.try(async () => {
-      await refresh(lastFilter(), sorts(), page());
+    try {
+      await refresh();
       noti.success("삭제 완료", "삭제되었습니다.");
-    }, "삭제 실패");
+    } catch (err) {
+      noti.error(err, "삭제 실패");
+    }
     setBusyCount((c) => c - 1);
   }
 
@@ -262,11 +262,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     if (!local.excel) return;
 
     setBusyCount((c) => c + 1);
-    // eslint-disable-next-line solid/reactivity -- noti.try 내부에서 비동기 호출
-    await noti.try(async () => {
+    try {
       const result = await local.search(lastFilter(), 0, sorts());
-      await local.excel!.download(result.items);
-    }, "엑셀 다운로드 실패");
+      await local.excel.download(result.items);
+    } catch (err) {
+      noti.error(err, "엑셀 다운로드 실패");
+    }
     setBusyCount((c) => c - 1);
   }
 
@@ -281,12 +282,13 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       if (file == null) return;
 
       setBusyCount((c) => c + 1);
-      // eslint-disable-next-line solid/reactivity -- noti.try 내부에서 비동기 호출
-      await noti.try(async () => {
+      try {
         await local.excel!.upload!(file);
         noti.success("완료", "엑셀 업로드가 완료되었습니다.");
-        await refresh(lastFilter(), sorts(), page());
-      }, "엑셀 업로드 실패");
+        await refresh();
+      } catch (err) {
+        noti.error(err, "엑셀 업로드 실패");
+      }
       setBusyCount((c) => c - 1);
     };
     input.click();
@@ -307,14 +309,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   // -- Keyboard Shortcuts --
-  createEventListener(document, "keydown", (e: KeyboardEvent) => {
+  createEventListener(document, "keydown", async (e: KeyboardEvent) => {
     if (e.ctrlKey && e.key === "s" && !isSelectMode()) {
       e.preventDefault();
       formRef?.requestSubmit();
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
-      handleRefresh();
+      await doRefresh();
     }
   });
 
@@ -354,8 +356,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     },
     save: handleSave,
     refresh: async () => {
-      handleRefresh();
-      await Promise.resolve();
+      await doRefresh();
     },
     addItem: handleAddRow,
     setPage,
@@ -364,6 +365,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Render --
   const deleteProp = () => local.inlineEdit?.deleteProp;
+  const isItemDeleted = (item: TItem) => local.itemDeleted?.(item) ?? false;
 
   return (
     <>
@@ -385,17 +387,19 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         class={clsx("flex h-full flex-col", local.class)}
       >
         {/* Control mode: inline save/refresh bar */}
-        <Show when={!isModal && !topbarCtx && canEdit() && local.inlineEdit}>
+        <Show when={!isModal && !topbarCtx}>
           <div class="flex gap-2 p-2 pb-0">
-            <Button
-              size="sm"
-              theme="primary"
-              variant="ghost"
-              onClick={() => formRef?.requestSubmit()}
-            >
-              <Icon icon={IconDeviceFloppy} class="mr-1" />
-              저장
-            </Button>
+            <Show when={canEdit() && local.inlineEdit}>
+              <Button
+                size="sm"
+                theme="primary"
+                variant="ghost"
+                onClick={() => formRef?.requestSubmit()}
+              >
+                <Icon icon={IconDeviceFloppy} class="mr-1" />
+                저장
+              </Button>
+            </Show>
             <Button size="sm" theme="info" variant="ghost" onClick={handleRefresh}>
               <Icon icon={IconRefresh} class="mr-1" />
               새로고침
@@ -496,9 +500,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             onSortsChange={setSorts}
             selectMode={
               isSelectMode()
-                ? local.selectMode === "multi"
-                  ? "multiple"
-                  : "single"
+                ? local.selectMode
                 : local.modalEdit?.deleteItems != null
                   ? "multiple"
                   : undefined
@@ -506,43 +508,34 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             selectedItems={selectedItems()}
             onSelectedItemsChange={setSelectedItems}
             autoSelect={isSelectMode() && local.selectMode === "single" ? "click" : undefined}
-            cellClass={(item, _colKey) => {
-              const dp = deleteProp();
-              if (dp != null && Boolean((item as Record<string, unknown>)[dp])) {
+            cellClass={(item) => {
+              if (isItemDeleted(item)) {
                 return clsx("line-through");
               }
               return undefined;
             }}
           >
-            {/* Auto delete column */}
-            <Show when={deleteProp() != null && canEdit() ? deleteProp() : undefined}>
-              {(dp) => (
-                <DataSheetColumn<TItem>
-                  key="__delete"
-                  header=""
-                  fixed
-                  sortable={false}
-                  resizable={false}
-                >
-                  {(dsCtx) => (
-                    <div class="flex items-center justify-center px-1 py-0.5">
-                      <Link
-                        theme="danger"
-                        disabled={!(local.itemDeletable?.(dsCtx.item) ?? true)}
-                        onClick={() => handleToggleDelete(dsCtx.item, dsCtx.index)}
-                      >
-                        <Icon
-                          icon={
-                            Boolean((dsCtx.item as Record<string, unknown>)[dp()])
-                              ? IconTrashOff
-                              : IconTrash
-                          }
-                        />
-                      </Link>
-                    </div>
-                  )}
-                </DataSheetColumn>
-              )}
+            {/* Auto delete column (inline edit only) */}
+            <Show when={deleteProp() != null && canEdit()}>
+              <DataSheetColumn<TItem>
+                key="__delete"
+                header=""
+                fixed
+                sortable={false}
+                resizable={false}
+              >
+                {(dsCtx) => (
+                  <div class="flex items-center justify-center px-1 py-0.5">
+                    <Link
+                      theme="danger"
+                      disabled={!(local.itemDeletable?.(dsCtx.item) ?? true)}
+                      onClick={() => handleToggleDelete(dsCtx.item, dsCtx.index)}
+                    >
+                      <Icon icon={isItemDeleted(dsCtx.item) ? IconTrashOff : IconTrash} />
+                    </Link>
+                  </div>
+                )}
+              </DataSheetColumn>
             </Show>
 
             {/* User-defined columns -- map CrudSheetColumn to DataSheetColumn */}
@@ -574,20 +567,23 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                     // modalEdit editable column -- wrap with edit link
                     if (
                       local.modalEdit &&
-                      col.editable &&
+                      col.editTrigger &&
                       canEdit() &&
                       (local.itemEditable?.(dsCtx.item) ?? true)
                     ) {
                       return (
                         <Link
-                          class="flex w-full"
+                          class={clsx("flex", "gap-1")}
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             void handleEditItem(dsCtx.item);
                           }}
                         >
-                          {col.cell(crudCtx)}
+                          <div class={"p-1"}>
+                            <Icon icon={IconExternalLink} />
+                          </div>
+                          <div class={"flex-1"}>{col.cell(crudCtx)}</div>
                         </Link>
                       );
                     }
@@ -606,10 +602,10 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             <div class="flex-1" />
             <Show when={selectedItems().length > 0}>
               <Button size="sm" theme="danger" onClick={handleSelectCancel}>
-                {local.selectMode === "multi" ? "모두" : "선택"} 해제
+                {local.selectMode === "multiple" ? "모두" : "선택"} 해제
               </Button>
             </Show>
-            <Show when={local.selectMode === "multi"}>
+            <Show when={local.selectMode === "multiple"}>
               <Button size="sm" theme="primary" onClick={handleSelectConfirm}>
                 확인({selectedItems().length})
               </Button>

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

@@ -28,7 +28,7 @@ export function CrudSheetColumn<TItem>(props: CrudSheetColumnProps<TItem>): JSX.
     width: props.width,
     sortable: props.sortable ?? true,
     resizable: props.resizable ?? true,
-    editable: props.editable ?? false,
+    editTrigger: props.editTrigger ?? false,
   } as unknown as JSX.Element;
 }
 /* eslint-enable solid/reactivity */

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

@@ -80,11 +80,12 @@ interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
   editable?: boolean;
   itemEditable?: (item: TItem) => boolean;
   itemDeletable?: (item: TItem) => boolean;
+  itemDeleted?: (item: TItem) => boolean;
   filterInitial?: TFilter;
   items?: TItem[];
   onItemsChange?: (items: TItem[]) => void;
   excel?: ExcelConfig<TItem>;
-  selectMode?: "single" | "multi";
+  selectMode?: "single" | "multiple";
   onSelect?: (result: SelectResult<TItem>) => void;
   hideAutoTools?: boolean;
   class?: string;
@@ -108,12 +109,12 @@ export interface CrudSheetColumnDef<TItem> {
   class?: string;
   sortable: boolean;
   resizable: boolean;
-  editable: boolean;
+  editTrigger: boolean;
   cell: (ctx: CrudSheetCellContext<TItem>) => JSX.Element;
 }
 
 export interface CrudSheetColumnProps<TItem> extends Omit<DataSheetColumnProps<TItem>, "children"> {
-  editable?: boolean;
+  editTrigger?: boolean;
   children: (ctx: CrudSheetCellContext<TItem>) => JSX.Element;
 }
 

package/src/components/data/kanban/Kanban.tsx

@@ -18,6 +18,7 @@ import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Icon } from "../../display/Icon";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import "./Kanban.css";
 import { iconButtonBase } from "../../../styles/patterns.styles";
 import {
@@ -386,11 +387,8 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
   };
 
   // Slot signals
-  type SlotAccessor = (() => JSX.Element) | undefined;
-  const [title, _setTitle] = createSignal<SlotAccessor>();
-  const [tools, _setTools] = createSignal<SlotAccessor>();
-  const setTitle = (content: SlotAccessor) => _setTitle(() => content);
-  const setTools = (content: SlotAccessor) => _setTools(() => content);
+  const [title, setTitle] = createSlotSignal();
+  const [tools, setTools] = createSlotSignal();
 
   const laneContextValue: KanbanLaneContextValue = {
     value: () => local.value,

package/src/components/data/kanban/KanbanContext.ts

@@ -1,4 +1,5 @@
-import { createContext, useContext, type Accessor, type JSX, type Setter } from "solid-js";
+import { createContext, useContext, type Accessor, type Setter } from "solid-js";
+import type { SlotAccessor } from "../../../hooks/createSlotSignal";
 
 // ── 타입 ──────────────────────────────────────────────────────
 
@@ -50,8 +51,6 @@ export function useKanbanContext(): KanbanContextValue {
 
 // ── Lane Context ───────────────────────────────────────────────
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 export interface KanbanLaneContextValue<L = unknown, T = unknown> {
   value: Accessor<L | undefined>;
   dropTarget: Accessor<KanbanDropTarget<T> | undefined>;

package/src/components/data/list/ListItem.tsx

@@ -1,7 +1,6 @@
 import {
   type Component,
   createContext,
-  createSignal,
   type JSX,
   onCleanup,
   type ParentComponent,
@@ -16,6 +15,7 @@ import { twMerge } from "tailwind-merge";
 import { ripple } from "../../../directives/ripple";
 import { Collapse } from "../../disclosure/Collapse";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
 import { useListContext } from "./ListContext";
 import { List } from "./List";
 import {
@@ -32,8 +32,6 @@ import type { ComponentSize } from "../../../styles/tokens.styles";
 
 void ripple;
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 interface ListItemSlotsContextValue {
   setChildren: (content: SlotAccessor) => void;
 }
@@ -166,8 +164,7 @@ export const ListItem: ListItemComponent = (props) => {
     onChange: () => local.onOpenChange,
   });
 
-  const [childrenSlot, _setChildrenSlot] = createSignal<SlotAccessor>();
-  const setChildrenSlot = (content: SlotAccessor) => _setChildrenSlot(() => content);
+  const [childrenSlot, setChildrenSlot] = createSlotSignal();
   const hasChildren = () => childrenSlot() !== undefined;
 
   const useRipple = () => !(local.readonly || local.disabled);

package/src/components/data/sheet/DataSheet.styles.ts

@@ -3,7 +3,8 @@ import { borderDefault, borderSubtle } from "../../../styles/tokens.styles";
 
 export const dataSheetContainerClass = clsx(
   "relative",
-  "bg-white dark:bg-base-950",
+  // "bg-white dark:bg-base-950",
+  "bg-base-100 dark:bg-base-900",
   "overflow-auto",
 );
 
@@ -50,13 +51,7 @@ export const sortableThClass = clsx("cursor-pointer", "hover:underline");
 export const sortIconClass = clsx("px-1 py-0.5", "bg-base-100 dark:bg-base-900");
 
 // 상단 툴바 (설정 버튼 + 페이지네이션)
-export const toolbarClass = clsx(
-  "flex items-center gap-2",
-  "px-2 py-1",
-  "bg-base-50 dark:bg-base-900",
-  "border-b",
-  borderDefault,
-);
+export const toolbarClass = clsx("flex items-center gap-2", "px-2 py-1", "border-b", borderDefault);
 
 // 고정 컬럼 기본 (sticky)
 export const fixedClass = "sticky";

package/src/components/disclosure/Dialog.tsx

@@ -1,30 +1,30 @@
 import {
-  type JSX,
-  type ParentComponent,
   createContext,
   createEffect,
+  createSignal,
   createUniqueId,
+  For,
+  type JSX,
   onCleanup,
+  type ParentComponent,
   Show,
   splitProps,
-  For,
   useContext,
-  createSignal,
 } from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconX } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
+import { createSlotSignal, type SlotAccessor } from "../../hooks/createSlotSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { createPointerDrag } from "../../hooks/createPointerDrag";
 import { mergeStyles } from "../../helpers/mergeStyles";
 import { Icon } from "../display/Icon";
 import { borderSubtle } from "../../styles/tokens.styles";
 import { DialogDefaultsContext } from "./DialogContext";
-import { registerDialog, unregisterDialog, bringToFront } from "./dialogZIndex";
-
-type SlotAccessor = (() => JSX.Element) | undefined;
+import { bringToFront, registerDialog, unregisterDialog } from "./dialogZIndex";
+import { Button } from "../form-control/Button";
 
 interface DialogSlotsContextValue {
   setHeader: (content: SlotAccessor) => void;
@@ -188,10 +188,8 @@ export const Dialog: DialogComponent = (props) => {
 
   const headerId = "dialog-header-" + createUniqueId();
 
-  const [header, _setHeader] = createSignal<SlotAccessor>();
-  const setHeader = (content: SlotAccessor) => _setHeader(() => content);
-  const [action, _setAction] = createSignal<SlotAccessor>();
-  const setAction = (content: SlotAccessor) => _setAction(() => content);
+  const [header, setHeader] = createSlotSignal();
+  const [action, setAction] = createSlotSignal();
   const hasHeader = () => header() !== undefined;
 
   const [open, setOpen] = createControllableSignal({
@@ -212,11 +210,19 @@ export const Dialog: DialogComponent = (props) => {
     local.onCloseComplete?.();
   };
 
-  // open 변경 시 closeCompleteEmitted 초기화
+  // open 변경 시 closeCompleteEmitted 초기화 + fallback unmount 감지
+  let wasMounted = false;
   createEffect(() => {
     if (open()) {
       closeCompleteEmitted = false;
     }
+    if (mounted()) {
+      wasMounted = true;
+    } else if (wasMounted) {
+      // fallback timer가 transitionend보다 먼저 실행되어 DOM이 제거된 경우,
+      // onCloseComplete가 호출되지 않는 문제 방지
+      emitCloseComplete();
+    }
   });
 
   // dialog ref
@@ -477,7 +483,8 @@ export const Dialog: DialogComponent = (props) => {
     );
 
   // 헤더 클래스
-  const headerClass = () => clsx("flex items-center", "select-none", "border-b", borderSubtle);
+  const headerClass = () =>
+    clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", borderSubtle);
 
   return (
     <Show when={mounted()}>
@@ -516,26 +523,19 @@ export const Dialog: DialogComponent = (props) => {
                   }
                   onPointerDown={handleHeaderPointerDown}
                 >
-                  <h5 id={headerId} class={clsx("flex-1", "px-4 py-2", "text-sm font-bold")}>
+                  <h5 id={headerId} class={clsx("flex-1 font-bold")}>
                     {header()!()}
                   </h5>
                   <Show when={action()}>{action()!()}</Show>
                   <Show when={local.closable ?? true}>
-                    <button
+                    <Button
                       data-modal-close
-                      type="button"
-                      class={clsx(
-                        "inline-flex items-center justify-center",
-                        "px-3 py-2",
-                        "text-base-400 dark:text-base-500",
-                        "hover:text-base-600 dark:hover:text-base-300",
-                        "cursor-pointer",
-                        "transition-colors",
-                      )}
+                      size={"sm"}
+                      variant={"ghost"}
                       onClick={handleCloseClick}
                     >
-                      <Icon icon={IconX} size="1.25em" />
-                    </button>
+                      <Icon icon={IconX} />
+                    </Button>
                   </Show>
                 </div>
               </Show>