@simplysm/solid 13.0.28 → 13.0.30

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

@@ -16,10 +16,11 @@ 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";
+import { iconButtonBase } from "../../../styles/patterns.styles";
 import {
   KanbanContext,
   KanbanLaneContext,
@@ -34,16 +35,23 @@ 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"> {
-  value?: unknown;
+export interface KanbanCardProps<TCardValue = unknown> extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children" | "draggable"
+> {
+  value?: TCardValue;
   draggable?: boolean;
   selectable?: boolean;
   contentClass?: string;
@@ -52,14 +60,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 +201,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 +215,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>
@@ -200,8 +226,11 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
 
 // ─── KanbanLane ──────────────────────────────────────────────────
 
-export interface KanbanLaneProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
-  value?: unknown;
+export interface KanbanLaneProps<TLaneValue = unknown> extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  value?: TLaneValue;
   busy?: boolean;
   collapsible?: boolean;
   collapsed?: boolean;
@@ -223,20 +252,12 @@ const laneDragOverClass = clsx("bg-primary-50 dark:bg-primary-950");
 const laneHeaderBaseClass = clsx(
   "flex items-center gap-2",
   "px-3 py-2",
-  "font-semibold",
+  "font-bold",
   "text-base-700 dark:text-base-200",
   "select-none",
 );
 
-const collapseButtonClass = clsx(
-  "flex items-center justify-center",
-  "size-6 rounded",
-  "text-base-500",
-  "hover:bg-base-200 hover:text-primary-500",
-  "dark:hover:bg-base-800",
-  "transition-colors duration-150",
-  "cursor-pointer",
-);
+const collapseButtonClass = twMerge(iconButtonBase, "size-6", "hover:text-primary-500");
 
 const laneToolsClass = clsx("flex items-center", "gap-1");
 
@@ -267,9 +288,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 +417,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 +436,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 +449,16 @@ 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 />
               </Show>
               <div class="flex-1">{slots().kanbanLaneTitle}</div>
               <Show when={slots().kanbanLaneTools.length > 0}>
@@ -446,7 +472,7 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
             </div>
           </Show>
         </div>
-      </LoadingContainer>
+      </BusyContainer>
     );
   };
 
@@ -459,17 +485,22 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
 
 // ─── Kanban (Board) ──────────────────────────────────────────────
 
-export interface KanbanProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onDrop"> {
-  onDrop?: (info: KanbanDropInfo) => void;
-  selectedValues?: unknown[];
-  onSelectedValuesChange?: (values: unknown[]) => void;
+export interface KanbanProps<TCardValue = unknown, TLaneValue = unknown> extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children" | "onDrop"
+> {
+  onDrop?: (info: KanbanDropInfo<TLaneValue, TCardValue>) => void;
+  selectedValues?: TCardValue[];
+  onSelectedValuesChange?: (values: TCardValue[]) => void;
   children?: JSX.Element;
 }
 
 const boardBaseClass = clsx("inline-flex flex-nowrap", "h-full", "gap-4");
 
 interface KanbanComponent {
-  (props: KanbanProps): JSX.Element;
+  <TCardValue = unknown, TLaneValue = unknown>(
+    props: KanbanProps<TCardValue, TLaneValue>,
+  ): JSX.Element;
   Lane: typeof KanbanLane;
   Card: typeof KanbanCard;
   LaneTitle: typeof KanbanLaneTitle;
@@ -477,7 +508,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");
 
@@ -11,7 +15,7 @@ export const thClass = clsx(
   "border-b border-r border-base-300 dark:border-base-800",
   "overflow-hidden whitespace-nowrap",
   "p-0",
-  "text-left font-semibold",
+  "text-left font-bold",
   "align-middle",
 );
 
@@ -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(