@simplysm/solid 13.0.53 → 13.0.56

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

@@ -0,0 +1,21 @@
+import type { JSX } from "solid-js";
+import type { CrudSheetToolsDef } from "./types";
+
+export function isCrudSheetToolsDef(value: unknown): value is CrudSheetToolsDef<any> {
+  return (
+    value != null &&
+    typeof value === "object" &&
+    (value as Record<string, unknown>)["__type"] === "crud-sheet-tools"
+  );
+}
+
+/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+export function CrudSheetTools<_TItem>(props: {
+  children: (ctx: any) => JSX.Element;
+}): JSX.Element {
+  return {
+    __type: "crud-sheet-tools",
+    children: props.children,
+  } as unknown as JSX.Element;
+}
+/* eslint-enable solid/reactivity */

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

@@ -0,0 +1,133 @@
+import type { JSX } from "solid-js";
+import type { SetStoreFunction } from "solid-js/store";
+import type { ArrayDiffs2Result } from "@simplysm/core-common";
+import type { DataSheetColumnProps, SortingDef } from "../sheet/types";
+
+// ── Search ──
+
+export interface SearchResult<TItem> {
+  items: TItem[];
+  pageCount?: number;
+}
+
+// ── Feature Configs ──
+
+export interface InlineEditConfig<TItem> {
+  submit: (diffs: ArrayDiffs2Result<TItem>[]) => Promise<void>;
+  newItem: () => TItem;
+  deleteProp?: keyof TItem & string;
+}
+
+export interface ModalEditConfig<TItem> {
+  editItem: (item?: TItem) => Promise<boolean>;
+  deleteItems?: (items: TItem[]) => Promise<boolean>;
+}
+
+export interface ExcelConfig<TItem> {
+  download: (items: TItem[]) => Promise<void>;
+  upload?: (file: File) => Promise<void>;
+}
+
+export interface SelectResult<TItem> {
+  items: TItem[];
+  keys: (string | number)[];
+}
+
+// ── Cell Context ──
+
+export interface CrudSheetCellContext<TItem> {
+  item: TItem;
+  index: number;
+  row: number;
+  depth: number;
+  setItem: <TKey extends keyof TItem>(key: TKey, value: TItem[TKey]) => void;
+}
+
+// ── CrudSheet Context (for Tools render prop) ──
+
+export interface CrudSheetContext<TItem> {
+  items(): TItem[];
+  selectedItems(): TItem[];
+  page(): number;
+  sorts(): SortingDef[];
+  busy(): boolean;
+  hasChanges(): boolean;
+
+  save(): Promise<void>;
+  refresh(): Promise<void>;
+  addItem(): void;
+  setPage(page: number): void;
+  setSorts(sorts: SortingDef[]): void;
+}
+
+// ── Props ──
+
+export type CrudSheetProps<TItem, TFilter extends Record<string, any>> = CrudSheetBaseProps<
+  TItem,
+  TFilter
+> &
+  (
+    | { inlineEdit: InlineEditConfig<TItem>; modalEdit?: never }
+    | { modalEdit: ModalEditConfig<TItem>; inlineEdit?: never }
+    | { inlineEdit?: never; modalEdit?: never }
+  );
+
+interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
+  search: (filter: TFilter, page: number, 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;
+  filterInitial?: TFilter;
+  items?: TItem[];
+  onItemsChange?: (items: TItem[]) => void;
+  excel?: ExcelConfig<TItem>;
+  selectMode?: "single" | "multi";
+  onSelect?: (result: SelectResult<TItem>) => void;
+  hideAutoTools?: boolean;
+  class?: string;
+  children: JSX.Element;
+}
+
+// ── Sub-component Defs ──
+
+export interface CrudSheetColumnDef<TItem> {
+  __type: "crud-sheet-column";
+  key: string;
+  header: string[];
+  headerContent?: () => JSX.Element;
+  headerStyle?: string;
+  summary?: () => JSX.Element;
+  tooltip?: string;
+  fixed: boolean;
+  hidden: boolean;
+  collapse: boolean;
+  width?: string;
+  class?: string;
+  sortable: boolean;
+  resizable: boolean;
+  editable: boolean;
+  cell: (ctx: CrudSheetCellContext<TItem>) => JSX.Element;
+}
+
+export interface CrudSheetColumnProps<TItem> extends Omit<DataSheetColumnProps<TItem>, "children"> {
+  editable?: boolean;
+  children: (ctx: CrudSheetCellContext<TItem>) => JSX.Element;
+}
+
+export interface CrudSheetFilterDef<TFilter> {
+  __type: "crud-sheet-filter";
+  children: (filter: TFilter, setFilter: SetStoreFunction<TFilter>) => JSX.Element;
+}
+
+export interface CrudSheetToolsDef<TItem> {
+  __type: "crud-sheet-tools";
+  children: (ctx: CrudSheetContext<TItem>) => JSX.Element;
+}
+
+export interface CrudSheetHeaderDef {
+  __type: "crud-sheet-header";
+  children: JSX.Element;
+}

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

@@ -1,5 +1,4 @@
 import {
-  children,
   createEffect,
   createMemo,
   createSignal,
@@ -9,6 +8,7 @@ import {
   type ParentComponent,
   Show,
   splitProps,
+  useContext,
 } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -18,7 +18,6 @@ import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Icon } from "../../display/Icon";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { splitSlots } from "../../../helpers/splitSlots";
 import "./Kanban.css";
 import { iconButtonBase } from "../../../styles/patterns.styles";
 import {
@@ -35,15 +34,23 @@ import {
 
 // ─── KanbanLaneTitle ─────────────────────────────────────────────
 
-const KanbanLaneTitle: ParentComponent = (props) => (
-  <div data-kanban-lane-title>{props.children}</div>
-);
+const KanbanLaneTitle: ParentComponent = (props) => {
+  const ctx = useContext(KanbanLaneContext)!;
+  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  ctx.setTitle(() => props.children);
+  onCleanup(() => ctx.setTitle(undefined));
+  return null;
+};
 
 // ─── KanbanLaneTools ─────────────────────────────────────────────
 
-const KanbanLaneTools: ParentComponent = (props) => (
-  <div data-kanban-lane-tools>{props.children}</div>
-);
+const KanbanLaneTools: ParentComponent = (props) => {
+  const ctx = useContext(KanbanLaneContext)!;
+  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  ctx.setTools(() => props.children);
+  onCleanup(() => ctx.setTools(undefined));
+  return null;
+};
 
 // ─── KanbanCard ──────────────────────────────────────────────────
 
@@ -378,64 +385,66 @@ 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 laneContextValue: KanbanLaneContextValue = {
     value: () => local.value,
     dropTarget,
     setDropTarget,
     registerCard,
     unregisterCard,
+    setTitle,
+    setTools,
   };
 
-  // Provider 안에서 children을 resolve해야 splitSlots가 올바르게 동작
-  const LaneInner: ParentComponent = (innerProps) => {
-    const resolved = children(() => innerProps.children);
-    const [slots, content] = splitSlots(resolved, ["kanbanLaneTitle", "kanbanLaneTools"] as const);
-
-    const hasHeader = () =>
-      local.collapsible ||
-      hasSelectableCards() ||
-      slots().kanbanLaneTitle.length > 0 ||
-      slots().kanbanLaneTools.length > 0;
-
-    // placeholder div (Lane이 소유, DOM 직접 제어)
-    let bodyRef: HTMLDivElement | undefined;
-    const placeholderEl = document.createElement("div");
-    placeholderEl.className = placeholderBaseClass;
-
-    createEffect(() => {
-      const target = dropTarget();
-      const dc = boardCtx.dragCard();
-
-      if (!target || !dc || !bodyRef) {
-        if (placeholderEl.parentNode) {
-          placeholderEl.remove();
-        }
-        return;
-      }
-
-      // placeholder 높이 설정
-      placeholderEl.style.height = `${dc.heightOnDrag}px`;
+  const hasHeader = () =>
+    local.collapsible || hasSelectableCards() || title() != null || tools() != null;
 
-      // 삽입 위치 계산
-      const referenceNode =
-        target.position === "before" ? target.element : target.element.nextElementSibling;
-
-      // 이미 올바른 위치면 DOM 조작 생략
-      if (placeholderEl.parentNode === bodyRef && placeholderEl.nextSibling === referenceNode) {
-        return;
-      }
+  // placeholder div (Lane이 소유, DOM 직접 제어)
+  let bodyRef: HTMLDivElement | undefined;
+  const placeholderEl = document.createElement("div");
+  placeholderEl.className = placeholderBaseClass;
 
-      bodyRef.insertBefore(placeholderEl, referenceNode);
-    });
+  createEffect(() => {
+    const target = dropTarget();
+    const dc = boardCtx.dragCard();
 
-    // placeholder cleanup
-    onCleanup(() => {
+    if (!target || !dc || !bodyRef) {
       if (placeholderEl.parentNode) {
         placeholderEl.remove();
       }
-    });
+      return;
+    }
+
+    // placeholder 높이 설정
+    placeholderEl.style.height = `${dc.heightOnDrag}px`;
+
+    // 삽입 위치 계산
+    const referenceNode =
+      target.position === "before" ? target.element : target.element.nextElementSibling;
 
-    return (
+    // 이미 올바른 위치면 DOM 조작 생략
+    if (placeholderEl.parentNode === bodyRef && placeholderEl.nextSibling === referenceNode) {
+      return;
+    }
+
+    bodyRef.insertBefore(placeholderEl, referenceNode);
+  });
+
+  // placeholder cleanup
+  onCleanup(() => {
+    if (placeholderEl.parentNode) {
+      placeholderEl.remove();
+    }
+  });
+
+  return (
+    <KanbanLaneContext.Provider value={laneContextValue}>
       <BusyContainer busy={local.busy} variant="bar">
         <div
           {...rest}
@@ -460,25 +469,23 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
               <Show when={hasSelectableCards()}>
                 <Checkbox value={isAllSelected()} onValueChange={handleSelectAll} inline />
               </Show>
-              <div class="flex-1">{slots().kanbanLaneTitle}</div>
-              <Show when={slots().kanbanLaneTools.length > 0}>
-                <div class={laneToolsClass}>{slots().kanbanLaneTools}</div>
+              <div class="flex-1">
+                <Show when={title()}>{title()!()}</Show>
+              </div>
+              <Show when={tools()}>
+                <div class={laneToolsClass}>{tools()!()}</div>
               </Show>
             </div>
           </Show>
-          <Show when={!collapsed()}>
-            <div ref={bodyRef} class={laneBodyBaseClass}>
-              {content()}
-            </div>
-          </Show>
+          <div
+            ref={bodyRef}
+            class={laneBodyBaseClass}
+            style={{ display: collapsed() ? "none" : undefined }}
+          >
+            {local.children}
+          </div>
         </div>
       </BusyContainer>
-    );
-  };
-
-  return (
-    <KanbanLaneContext.Provider value={laneContextValue}>
-      <LaneInner>{local.children}</LaneInner>
     </KanbanLaneContext.Provider>
   );
 };

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

@@ -1,4 +1,4 @@
-import { createContext, useContext, type Accessor, type Setter } from "solid-js";
+import { createContext, useContext, type Accessor, type JSX, type Setter } from "solid-js";
 
 // ── 타입 ──────────────────────────────────────────────────────
 
@@ -50,6 +50,8 @@ 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>;
@@ -58,6 +60,10 @@ export interface KanbanLaneContextValue<L = unknown, T = unknown> {
   // Card registration (Phase 4)
   registerCard: (id: string, info: { value: T | undefined; selectable: boolean }) => void;
   unregisterCard: (id: string) => void;
+
+  // Slot registration
+  setTitle: (content: SlotAccessor) => void;
+  setTools: (content: SlotAccessor) => void;
 }
 
 export const KanbanLaneContext = createContext<KanbanLaneContextValue>();

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

@@ -1,10 +1,13 @@
 import {
-  children,
   type Component,
+  createContext,
+  createSignal,
   type JSX,
+  onCleanup,
   type ParentComponent,
   Show,
   splitProps,
+  useContext,
 } from "solid-js";
 import { IconChevronDown, type IconProps } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
@@ -15,7 +18,6 @@ import { Collapse } from "../../disclosure/Collapse";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { useListContext } from "./ListContext";
 import { List } from "./List";
-import { splitSlots } from "../../../helpers/splitSlots";
 import {
   listItemBaseClass,
   listItemSizeClasses,
@@ -30,6 +32,14 @@ import type { ComponentSize } from "../../../styles/tokens.styles";
 
 void ripple;
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
+interface ListItemSlotsContextValue {
+  setChildren: (content: SlotAccessor) => void;
+}
+
+const ListItemSlotsContext = createContext<ListItemSlotsContextValue>();
+
 const chevronClass = clsx("transition-transform duration-200 motion-reduce:transition-none");
 
 /**
@@ -50,14 +60,13 @@ const chevronClass = clsx("transition-transform duration-200 motion-reduce:trans
  * </List.Item>
  * ```
  */
-const ListItemChildren: ParentComponent = (props) => (
-  <div class="flex" data-list-item-children>
-    <div class={listItemIndentGuideClass} />
-    <List inset class="flex-1">
-      {props.children}
-    </List>
-  </div>
-);
+const ListItemChildren: ParentComponent = (props) => {
+  const ctx = useContext(ListItemSlotsContext)!;
+  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  ctx.setChildren(() => props.children);
+  onCleanup(() => ctx.setChildren(undefined));
+  return null;
+};
 
 export interface ListItemProps extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -157,10 +166,9 @@ export const ListItem: ListItemComponent = (props) => {
     onChange: () => local.onOpenChange,
   });
 
-  const resolved = children(() => local.children);
-  const [slots, content] = splitSlots(resolved, ["listItemChildren"] as const);
-
-  const hasChildren = () => slots().listItemChildren.length > 0;
+  const [childrenSlot, _setChildrenSlot] = createSignal<SlotAccessor>();
+  const setChildrenSlot = (content: SlotAccessor) => _setChildrenSlot(() => content);
+  const hasChildren = () => childrenSlot() !== undefined;
 
   const useRipple = () => !(local.readonly || local.disabled);
 
@@ -189,7 +197,7 @@ export const ListItem: ListItemComponent = (props) => {
   const getSelectedIconClassName = () => getListItemSelectedIconClass(local.selected ?? false);
 
   return (
-    <>
+    <ListItemSlotsContext.Provider value={{ setChildren: setChildrenSlot }}>
       <button
         {...rest}
         type="button"
@@ -215,17 +223,22 @@ export const ListItem: ListItemComponent = (props) => {
         <Show when={local.selectedIcon && !hasChildren()}>
           <Icon icon={local.selectedIcon!} class={getSelectedIconClassName()} />
         </Show>
-        <span class={listItemContentClass}>{content()}</span>
+        <span class={listItemContentClass}>{local.children}</span>
         <Show when={hasChildren()}>
           <Icon icon={IconChevronDown} size="1em" class={getChevronClassName()} />
         </Show>
       </button>
       <Show when={hasChildren()}>
         <Collapse open={openState()} data-collapsed={!openState() || undefined}>
-          {slots().listItemChildren.single()}
+          <div class="flex">
+            <div class={listItemIndentGuideClass} />
+            <List inset class="flex-1">
+              {childrenSlot()!()}
+            </List>
+          </div>
         </Collapse>
       </Show>
-    </>
+    </ListItemSlotsContext.Provider>
   );
 };
 

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

@@ -1,10 +1,27 @@
-[data-sheet] tbody tr:hover > td {
-  box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 3%);
+[data-sheet] tbody tr {
+  position: relative;
+}
+
+/* ::after 공통 — content가 없으면 렌더링되지 않으므로 각 상태에서 content 설정 */
+[data-sheet] tbody tr::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+
+[data-sheet] tbody tr:hover::after {
+  content: "";
+  background: rgb(0 0 0 / 3%);
 }
 
 /* 선택 행 시각 효과 — 호버보다 약간 더 진하게 */
-[data-sheet] tbody tr[data-selected] > td {
-  box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 5%);
+[data-sheet] tbody tr[data-selected]::after {
+  content: "";
+  background: rgb(0 0 0 / 5%);
 }
 
 /* 드래그 중인 행 */
@@ -13,14 +30,15 @@
 }
 
 /* inside 드롭 대상 행 */
-[data-sheet] tbody tr[data-drag-over="inside"] > td {
-  box-shadow: inset 0 0 0 9999px rgb(59 130 246 / 10%);
+[data-sheet] tbody tr[data-drag-over="inside"]::after {
+  content: "";
+  background: rgb(59 130 246 / 10%);
 }
 
-.dark [data-sheet] tbody tr:hover > td {
-  box-shadow: inset 0 0 0 9999px rgb(255 255 255 / 4%);
+.dark [data-sheet] tbody tr:hover::after {
+  background: rgb(255 255 255 / 4%);
 }
 
-.dark [data-sheet] tbody tr[data-selected] > td {
-  box-shadow: inset 0 0 0 9999px rgb(255 255 255 / 6%);
+.dark [data-sheet] tbody tr[data-selected]::after {
+  background: rgb(255 255 255 / 6%);
 }

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

@@ -62,7 +62,7 @@ export const toolbarClass = clsx(
 export const fixedClass = "sticky";
 
 // 고정/비고정 경계 시각 효과 — 고정 컬럼의 마지막 셀에 적용
-export const fixedLastClass = clsx("border-r-2 border-r-base-300", "dark:border-r-base-700");
+export const fixedLastClass = clsx("border-r border-r-base-400", "dark:border-r-base-600");
 
 // 리사이저 핸들 (헤더 셀 우측 드래그 영역)
 export const resizerClass = clsx(

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

@@ -187,7 +187,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     const result = await modal.show<DataSheetConfig>(
       () => <DataSheetConfigDialog columnInfos={columnInfos} currentConfig={currentConfig} />,
       {
-        title: "시트 설정",
+        header: "시트 설정",
         closeOnBackdrop: true,
         closeOnEscape: true,
       },