@simplysm/solid 13.0.57 → 13.0.58

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);
@@ -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();
@@ -364,6 +366,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 +388,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" />
               새로고침
@@ -506,43 +511,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 +570,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>
                       );
                     }

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,6 +80,7 @@ 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;
@@ -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/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,15 +1,15 @@
 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";
@@ -22,7 +22,8 @@ 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";
+import { bringToFront, registerDialog, unregisterDialog } from "./dialogZIndex";
+import { Button } from "../form-control/Button";
 
 type SlotAccessor = (() => JSX.Element) | undefined;
 
@@ -212,11 +213,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 +486,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 +526,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>

package/src/components/display/Icon.tsx

@@ -16,7 +16,7 @@ export const Icon: Component<IconProps> = (props) => {
       component={local.icon}
       size={local.size ?? "1.25em"}
       {...rest}
-      class={clsx("inline", rest.class)}
+      class={clsx("inline", "[vertical-align:-0.25em]", rest.class)}
     />
   );
 };

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -10,7 +10,7 @@ const baseClass = clsx(
   "fixed",
   "top-8",
   "right-4",
-  "z-50",
+  "z-notification",
   "flex",
   "items-start",
   "gap-4",

package/src/components/feedback/notification/NotificationContext.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, type Accessor } from "solid-js";
+import { type Accessor, createContext, useContext } from "solid-js";
 
 /** 알림 테마 */
 export type NotificationTheme = "info" | "success" | "warning" | "danger";
@@ -59,12 +59,7 @@ export interface NotificationContextValue {
   success: (title: string, message?: string, options?: NotificationOptions) => string;
   warning: (title: string, message?: string, options?: NotificationOptions) => string;
   danger: (title: string, message?: string, options?: NotificationOptions) => string;
-
-  // 에러 처리 (danger 알림 + 로깅)
-  try: <TResult>(
-    fn: () => Promise<TResult> | TResult,
-    header?: string,
-  ) => Promise<TResult | undefined>;
+  error: (err?: any, header?: string) => void;
 
   // 알림 수정
   update: (

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -1,4 +1,4 @@
-import { type ParentComponent, createSignal, createMemo, Show } from "solid-js";
+import { createMemo, createSignal, type ParentComponent, Show } from "solid-js";
 import {
   NotificationContext,
   type NotificationContextValue,
@@ -79,20 +79,13 @@ export const NotificationProvider: ParentComponent = (props) => {
     return addNotification("danger", title, message, options);
   };
 
-  const tryFn = async <TResult,>(
-    fn: () => Promise<TResult> | TResult,
-    header?: string,
-  ): Promise<TResult | undefined> => {
-    try {
-      return await fn();
-    } catch (err) {
-      if (err instanceof Error) {
-        danger(header ?? err.message, header != null ? err.message : undefined);
-        logger.error(err.stack ?? err.message);
-        return undefined;
-      }
-      throw err;
+  const error = (err?: any, header?: string): void => {
+    if (err instanceof Error) {
+      danger(header ?? err.message, header != null ? err.message : undefined);
+      logger.error(err.stack ?? err.message);
+      return;
     }
+    throw err;
   };
 
   const update = (
@@ -151,7 +144,7 @@ export const NotificationProvider: ParentComponent = (props) => {
     success,
     warning,
     danger,
-    try: tryFn,
+    error,
     update,
     remove,
     markAsRead,

package/tailwind.config.ts

@@ -52,6 +52,7 @@ export default {
         "dropdown": "1000",
         "modal-backdrop": "1999",
         "modal": "2000",
+        "notification": "3000",
       },
     },
   },