@simplysm/solid 13.0.27 → 13.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.27",
+  "version": "13.0.29",
   "description": "심플리즘 패키지 - SolidJS 라이브러리",
   "author": "김석래",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "solid-tiptap": "^0.8.0",
     "tailwind-merge": "^3.4.1",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.27",
-    "@simplysm/core-common": "13.0.27"
+    "@simplysm/core-browser": "13.0.29",
+    "@simplysm/core-common": "13.0.29"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

package/src/components/data/Pagination.tsx

@@ -1,7 +1,12 @@
 import { type Component, For, type JSX, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from "@tabler/icons-solidjs";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+} from "@tabler/icons-solidjs";
 import { Button } from "../form-control/Button";
 import { Icon } from "../display/Icon";
 

package/src/components/data/calendar/Calendar.tsx

@@ -4,7 +4,10 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 
-export interface CalendarProps<TValue> extends Omit<JSX.HTMLAttributes<HTMLTableElement>, "children"> {
+export interface CalendarProps<TValue> extends Omit<
+  JSX.HTMLAttributes<HTMLTableElement>,
+  "children"
+> {
   items: TValue[];
   getItemDate: (item: TValue, index: number) => DateOnly;
   renderItem: (item: TValue, index: number) => JSX.Element;
@@ -116,14 +119,25 @@ function CalendarBase<TValue>(props: CalendarProps<TValue>) {
             <tr>
               <For each={row}>
                 {(cell) => (
-                  <td class={twMerge(notCurrentClass, cell.date.month !== yearMonth().month && "not-current")}>
+                  <td
+                    class={twMerge(
+                      notCurrentClass,
+                      cell.date.month !== yearMonth().month && "not-current",
+                    )}
+                  >
                     <div
-                      class={cell.date.month !== yearMonth().month ? twMerge(dayClass, notCurrentDayClass) : dayClass}
+                      class={
+                        cell.date.month !== yearMonth().month
+                          ? twMerge(dayClass, notCurrentDayClass)
+                          : dayClass
+                      }
                     >
                       {cell.date.day}
                     </div>
                     <div class={contentClass}>
-                      <For each={cell.items}>{(entry) => local.renderItem(entry.item, entry.index)}</For>
+                      <For each={cell.items}>
+                        {(entry) => local.renderItem(entry.item, entry.index)}
+                      </For>
                     </div>
                   </td>
                 )}

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

@@ -16,7 +16,7 @@ import { IconEye, IconEyeOff } from "@tabler/icons-solidjs";
 import { Card } from "../../display/Card";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Icon } from "../../display/Icon";
-import { LoadingContainer } from "../../feedback/loading/LoadingContainer";
+import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { splitSlots } from "../../../helpers/splitSlots";
 import "./Kanban.css";
@@ -34,15 +34,22 @@ import {
 
 // ─── KanbanLaneTitle ─────────────────────────────────────────────
 
-const KanbanLaneTitle: ParentComponent = (props) => <div data-kanban-lane-title>{props.children}</div>;
+const KanbanLaneTitle: ParentComponent = (props) => (
+  <div data-kanban-lane-title>{props.children}</div>
+);
 
 // ─── KanbanLaneTools ─────────────────────────────────────────────
 
-const KanbanLaneTools: ParentComponent = (props) => <div data-kanban-lane-tools>{props.children}</div>;
+const KanbanLaneTools: ParentComponent = (props) => (
+  <div data-kanban-lane-tools>{props.children}</div>
+);
 
 // ─── KanbanCard ──────────────────────────────────────────────────
 
-export interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "draggable"> {
+export interface KanbanCardProps extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children" | "draggable"
+> {
   value?: unknown;
   draggable?: boolean;
   selectable?: boolean;
@@ -52,14 +59,25 @@ export interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>
 
 const cardHostClass = clsx("relative block", "transition-opacity duration-200");
 
-const cardContentClass = clsx("select-none whitespace-normal", "animate-none", "transition-shadow duration-200");
+const cardContentClass = clsx(
+  "select-none whitespace-normal",
+  "animate-none",
+  "transition-shadow duration-200",
+);
 
 const cardSelectedClass = clsx("ring-2 ring-primary-500/50", "shadow-md dark:shadow-black/30");
 
 const LONG_PRESS_MS = 500;
 
 const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class", "value", "draggable", "selectable", "contentClass"]);
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "value",
+    "draggable",
+    "selectable",
+    "contentClass",
+  ]);
 
   const boardCtx = useKanbanContext();
   const laneCtx = useKanbanLaneContext();
@@ -182,7 +200,12 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
       ref={hostRef}
       data-kanban-card
       draggable={isDraggable()}
-      class={twMerge(cardHostClass, isDraggable() && "cursor-grab", isDragSource() && "opacity-30", local.class)}
+      class={twMerge(
+        cardHostClass,
+        isDraggable() && "cursor-grab",
+        isDragSource() && "opacity-30",
+        local.class,
+      )}
       onDragStart={handleDragStart}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
@@ -191,7 +214,9 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
       onPointerCancel={handlePointerCancel}
       onClick={handleClick}
     >
-      <Card class={twMerge(cardContentClass, isSelected() && cardSelectedClass, local.contentClass)}>
+      <Card
+        class={twMerge(cardContentClass, isSelected() && cardSelectedClass, local.contentClass)}
+      >
         {local.children}
       </Card>
     </div>
@@ -267,9 +292,9 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
 
   const boardCtx = useKanbanContext();
 
-  const [registeredCards, setRegisteredCards] = createSignal<Map<string, { value: unknown; selectable: boolean }>>(
-    new Map(),
-  );
+  const [registeredCards, setRegisteredCards] = createSignal<
+    Map<string, { value: unknown; selectable: boolean }>
+  >(new Map());
 
   const registerCard = (id: string, info: { value: unknown; selectable: boolean }) => {
     setRegisteredCards((prev) => new Map(prev).set(id, info));
@@ -396,7 +421,8 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
       placeholderEl.style.height = `${dc.heightOnDrag}px`;
 
       // 삽입 위치 계산
-      const referenceNode = target.position === "before" ? target.element : target.element.nextElementSibling;
+      const referenceNode =
+        target.position === "before" ? target.element : target.element.nextElementSibling;
 
       // 이미 올바른 위치면 DOM 조작 생략
       if (placeholderEl.parentNode === bodyRef && placeholderEl.nextSibling === referenceNode) {
@@ -414,7 +440,7 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
     });
 
     return (
-      <LoadingContainer busy={local.busy} variant="bar">
+      <BusyContainer busy={local.busy} variant="bar">
         <div
           {...rest}
           data-kanban-lane
@@ -427,12 +453,21 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
           <Show when={hasHeader()}>
             <div class={laneHeaderBaseClass}>
               <Show when={local.collapsible}>
-                <button type="button" class={collapseButtonClass} onClick={() => setCollapsed((prev) => !prev)}>
+                <button
+                  type="button"
+                  class={collapseButtonClass}
+                  onClick={() => setCollapsed((prev) => !prev)}
+                >
                   <Icon icon={collapsed() ? IconEyeOff : IconEye} size="1em" />
                 </button>
               </Show>
               <Show when={hasSelectableCards()}>
-                <Checkbox value={isAllSelected()} onValueChange={handleSelectAll} inline theme="primary" />
+                <Checkbox
+                  value={isAllSelected()}
+                  onValueChange={handleSelectAll}
+                  inline
+                  theme="primary"
+                />
               </Show>
               <div class="flex-1">{slots().kanbanLaneTitle}</div>
               <Show when={slots().kanbanLaneTools.length > 0}>
@@ -446,7 +481,7 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
             </div>
           </Show>
         </div>
-      </LoadingContainer>
+      </BusyContainer>
     );
   };
 
@@ -459,7 +494,10 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
 
 // ─── Kanban (Board) ──────────────────────────────────────────────
 
-export interface KanbanProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onDrop"> {
+export interface KanbanProps extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children" | "onDrop"
+> {
   onDrop?: (info: KanbanDropInfo) => void;
   selectedValues?: unknown[];
   onSelectedValuesChange?: (values: unknown[]) => void;
@@ -477,7 +515,13 @@ interface KanbanComponent {
 }
 
 const KanbanBase = (props: KanbanProps) => {
-  const [local, rest] = splitProps(props, ["children", "class", "onDrop", "selectedValues", "onSelectedValuesChange"]);
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "onDrop",
+    "selectedValues",
+    "onSelectedValuesChange",
+  ]);
 
   const [dragCard, setDragCard] = createSignal<KanbanCardRef>();
 

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

@@ -6,11 +6,15 @@ import { ListItem } from "./ListItem";
 
 const baseClass = clsx("inline-flex flex-col rounded-md");
 
-const rootClass = clsx("border border-base-300 bg-base-50 p-px dark:border-base-700 dark:bg-base-900");
+const rootClass = clsx(
+  "border border-base-300 bg-base-50 p-px dark:border-base-700 dark:bg-base-900",
+);
 
 const nestedClass = clsx("rounded-none py-1");
 
-const insetClass = clsx("w-full border-transparent bg-transparent dark:border-transparent dark:bg-transparent");
+const insetClass = clsx(
+  "w-full border-transparent bg-transparent dark:border-transparent dark:bg-transparent",
+);
 
 export interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /**
@@ -89,7 +93,8 @@ const ListBase: ParentComponent<ListProps> = (props) => {
       current.click();
     } else {
       // Collapse의 이전 형제가 부모 button
-      const parentItem = current.closest("[data-collapse]")?.previousElementSibling as HTMLElement | null;
+      const parentItem = current.closest("[data-collapse]")
+        ?.previousElementSibling as HTMLElement | null;
       if (parentItem?.hasAttribute("data-list-item")) {
         parentItem.focus();
       }
@@ -100,7 +105,9 @@ const ListBase: ParentComponent<ListProps> = (props) => {
     const current = e.target as HTMLElement;
     if (!current.hasAttribute("data-list-item")) return;
 
-    const allItems = [...listRef.querySelectorAll('[data-list-item]:not([aria-disabled="true"])')] as HTMLElement[];
+    const allItems = [
+      ...listRef.querySelectorAll('[data-list-item]:not([aria-disabled="true"])'),
+    ] as HTMLElement[];
     const visibleItems = allItems.filter((el) => isVisible(el));
     const idx = visibleItems.indexOf(current);
 

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

@@ -1,4 +1,11 @@
-import { children, type Component, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import {
+  children,
+  type Component,
+  type JSX,
+  type ParentComponent,
+  Show,
+  splitProps,
+} from "solid-js";
 import { IconChevronDown, type IconProps } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
 import clsx from "clsx";
@@ -52,7 +59,10 @@ const ListItemChildren: ParentComponent = (props) => (
   </div>
 );
 
-export interface ListItemProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+export interface ListItemProps extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onClick"
+> {
   /**
    * 중첩 리스트의 열림 상태 (controlled 모드)
    */

package/src/components/data/permission-table/PermissionTable.tsx

@@ -1,5 +1,14 @@
 import type { JSX } from "solid-js";
-import { type Component, createEffect, createMemo, createSignal, For, on, Show, splitProps } from "solid-js";
+import {
+  type Component,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  on,
+  Show,
+  splitProps,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { DataSheet } from "../sheet/DataSheet";
@@ -113,7 +122,10 @@ export function changePermCheck<TModule>(
 // --- 내부 헬퍼 ---
 
 /** 모듈 필터에 의해 보이는지 확인 (객체 참조 유지) */
-function isItemVisible<TModule>(item: PermissionItem<TModule>, modules: TModule[] | undefined): boolean {
+function isItemVisible<TModule>(
+  item: PermissionItem<TModule>,
+  modules: TModule[] | undefined,
+): boolean {
   if (!modules || modules.length === 0) return true;
   if (item.modules && !item.modules.some((m) => modules.includes(m))) return false;
   if (!item.perms && item.children) {
@@ -123,7 +135,10 @@ function isItemVisible<TModule>(item: PermissionItem<TModule>, modules: TModule[
 }
 
 /** 보이는 아이템에서만 고유 perm 타입 수집 */
-function collectVisiblePerms<TModule>(items: PermissionItem<TModule>[], modules: TModule[] | undefined): string[] {
+function collectVisiblePerms<TModule>(
+  items: PermissionItem<TModule>[],
+  modules: TModule[] | undefined,
+): string[] {
   const set = new Set<string>();
 
   function walk(list: PermissionItem<TModule>[]) {
@@ -165,7 +180,11 @@ function hasPermInTree<TModule>(item: PermissionItem<TModule>, perm: string): bo
 }
 
 /** 기본 권한(perms[0])이 꺼져 있어서 비활성화해야 하는지 */
-function isPermDisabled<TModule>(item: PermissionItem<TModule>, perm: string, value: Record<string, boolean>): boolean {
+function isPermDisabled<TModule>(
+  item: PermissionItem<TModule>,
+  perm: string,
+  value: Record<string, boolean>,
+): boolean {
   if (!item.perms || item.href == null || item.href === "") return false;
   const basePerm = item.perms[0];
   if (perm === basePerm) return false;
@@ -196,7 +215,15 @@ function collectExpandable<TModule>(
 // --- 컴포넌트 ---
 
 export const PermissionTable: Component<PermissionTableProps> = (props) => {
-  const [local] = splitProps(props, ["items", "value", "onValueChange", "modules", "disabled", "class", "style"]);
+  const [local] = splitProps(props, [
+    "items",
+    "value",
+    "onValueChange",
+    "modules",
+    "disabled",
+    "class",
+    "style",
+  ]);
 
   // 보이는 최상위 아이템 (객체 참조 유지)
   const visibleItems = createMemo(() => {

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

@@ -1,7 +1,11 @@
 import clsx from "clsx";
 import { borderDefault, borderSubtle } from "../../../styles/tokens.styles";
 
-export const dataSheetContainerClass = clsx("relative", "bg-white dark:bg-base-950", "overflow-auto");
+export const dataSheetContainerClass = clsx(
+  "relative",
+  "bg-white dark:bg-base-950",
+  "overflow-auto",
+);
 
 export const tableClass = clsx("border-separate border-spacing-0", "w-max");
 
@@ -111,7 +115,12 @@ export const expandToggleClass = clsx(
 );
 
 // 선택 컬럼 — single 모드 아이콘 래퍼
-export const selectSingleClass = clsx("flex items-center justify-center", "size-6", "cursor-pointer", "rounded");
+export const selectSingleClass = clsx(
+  "flex items-center justify-center",
+  "size-6",
+  "cursor-pointer",
+  "rounded",
+);
 
 // single 모드 — 선택됨
 export const selectSingleSelectedClass = clsx("text-primary-500", "dark:text-primary-400");
@@ -143,13 +152,22 @@ export const featureCellWrapperClass = clsx("flex items-center", "px-1");
 export const featureCellBodyWrapperClass = clsx("flex h-full items-center", "px-1");
 
 // 기능 컬럼 헤더 클릭 가능 래퍼 (전체 선택 등)
-export const featureCellClickableClass = clsx("flex cursor-pointer items-center justify-center", "px-1");
+export const featureCellClickableClass = clsx(
+  "flex cursor-pointer items-center justify-center",
+  "px-1",
+);
 
 // 기능 컬럼 바디 클릭 가능 래퍼 (선택/재정렬 등 — 전체 높이)
-export const featureCellBodyClickableClass = clsx("flex h-full cursor-pointer items-center justify-center", "px-1");
+export const featureCellBodyClickableClass = clsx(
+  "flex h-full cursor-pointer items-center justify-center",
+  "px-1",
+);
 
 // 재정렬 핸들 래퍼 (touch-none 추가)
-export const reorderCellWrapperClass = clsx("flex h-full touch-none items-center justify-center", "px-1");
+export const reorderCellWrapperClass = clsx(
+  "flex h-full touch-none items-center justify-center",
+  "px-1",
+);
 
 // 설정 버튼
 export const configButtonClass = clsx(