@simplysm/solid 13.0.93 → 13.0.96

package/docs/display-feedback.md

@@ -2,14 +2,17 @@
 
 ## Card
 
-그림자와 호버 효과가 있는 카드 컨테이너.
+그림자와 호버 효과가 있는 카드 컨테이너. 페이드 인 애니메이션 포함.
 
 ```tsx
 import { Card } from "@simplysm/solid";
 
 <Card>카드 내용</Card>
+<Card class="p-4">커스텀 패딩</Card>
 ```
 
+`<div>` HTML 속성을 모두 상속한다.
+
 ---
 
 ## Alert
@@ -21,8 +24,16 @@ import { Alert } from "@simplysm/solid";
 
 <Alert theme="success">저장되었습니다.</Alert>
 <Alert theme="danger">오류가 발생했습니다.</Alert>
+<Alert theme="warning">주의가 필요합니다.</Alert>
+<Alert theme="info">참고 사항입니다.</Alert>
 ```
 
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `theme` | `SemanticTheme` | `"base"` | 색상 테마 |
+
+`<div>` HTML 속성을 모두 상속한다.
+
 ---
 
 ## Icon
@@ -31,34 +42,82 @@ Tabler Icons 래퍼.
 
 ```tsx
 import { Icon } from "@simplysm/solid";
-import { IconUser } from "@tabler/icons-solidjs";
+import { IconUser, IconSettings } from "@tabler/icons-solidjs";
 
 <Icon icon={IconUser} size="1.5em" />
+<Icon icon={IconSettings} size={24} />
 ```
 
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `icon` | `Component<TablerIconProps>` | (필수) | Tabler 아이콘 컴포넌트 |
+| `size` | `string \| number` | `"1.25em"` | 아이콘 크기 |
+
+Tabler `IconProps`의 나머지 속성(`class`, `color` 등)을 모두 상속한다.
+
 ---
 
-## Link / Tag
+## Link
+
+테마 색상의 링크 컴포넌트.
 
 ```tsx
-import { Link, Tag } from "@simplysm/solid";
+import { Link } from "@simplysm/solid";
 
 <Link href="/users">사용자 목록</Link>
-<Tag>라벨</Tag>
+<Link theme="danger" onClick={handleDelete}>삭제</Link>
+<Link disabled>비활성 링크</Link>
 ```
 
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `theme` | `SemanticTheme` | `"primary"` | 색상 테마 |
+| `disabled` | `boolean` | `false` | 비활성화 |
+
+`<a>` HTML 속성을 모두 상속한다.
+
+---
+
+## Tag
+
+테마 색상의 태그/배지.
+
+```tsx
+import { Tag } from "@simplysm/solid";
+
+<Tag>기본</Tag>
+<Tag theme="primary">Primary</Tag>
+<Tag theme="success">완료</Tag>
+<Tag theme="danger">긴급</Tag>
+```
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `theme` | `SemanticTheme` | `"base"` | 색상 테마 |
+
+`<span>` HTML 속성을 모두 상속한다.
+
 ---
 
 ## Barcode
 
-바코드/QR 코드 생성.
+바코드/QR 코드 생성 (bwip-js 기반).
 
 ```tsx
 import { Barcode } from "@simplysm/solid";
 
-<Barcode value="1234567890" />
+<Barcode type="qrcode" value="https://example.com" />
+<Barcode type="code128" value="1234567890" />
+<Barcode type="ean13" value="4006381333931" />
 ```
 
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `type` | `BarcodeType` | 바코드 타입 (필수). `"qrcode"`, `"code128"`, `"ean13"` 등 100+ 타입 |
+| `value` | `string` | 바코드 값 |
+
+`<div>` HTML 속성을 모두 상속한다.
+
 ---
 
 ## Echarts
@@ -78,6 +137,13 @@ import { Echarts } from "@simplysm/solid";
 />
 ```
 
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `option` | `EChartsOption` | ECharts 옵션 (필수) |
+| `busy` | `boolean` | 로딩 상태 (`showLoading`/`hideLoading`) |
+
+`<div>` HTML 속성을 모두 상속한다. 내부적으로 SVG 렌더러를 사용하며, 컨테이너 크기 변경 시 자동 리사이즈한다.
+
 ---
 
 ## Dialog
@@ -96,16 +162,24 @@ import { Dialog } from "@simplysm/solid";
 </Dialog>
 ```
 
-| Prop | 타입 | 설명 |
-|------|------|------|
-| `open` | `boolean` | 열림 상태 |
-| `onOpenChange` | `(v: boolean) => void` | 상태 콜백 |
-| `mode` | `"float" \| "fill"` | 모드 |
-| `resizable` | `boolean` | 리사이즈 가능 |
-| `draggable` | `boolean` | 드래그 가능 |
-| `width`, `height` | `string` | 크기 |
-| `closeOnEscape` | `boolean` | ESC 닫기 |
-| `beforeClose` | `() => boolean` | 닫기 확인 |
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `open` | `boolean` | | 열림 상태 |
+| `onOpenChange` | `(v: boolean) => void` | | 상태 콜백 |
+| `mode` | `"float" \| "fill"` | `"float"` | 모드 |
+| `resizable` | `boolean` | `false` | 리사이즈 가능 |
+| `draggable` | `boolean` | `false` | 드래그 가능 |
+| `width` | `string` | | 너비 |
+| `height` | `string` | | 높이 |
+| `closeOnEscape` | `boolean` | `true` | ESC 닫기 |
+| `beforeClose` | `() => boolean` | | 닫기 전 확인 (false 반환 시 취소) |
+
+### 서브 컴포넌트
+
+| 컴포넌트 | 설명 |
+|----------|------|
+| `Dialog.Header` | 다이얼로그 헤더 (닫기 버튼 포함) |
+| `Dialog.Action` | 하단 액션 영역 |
 
 ### 프로그래밍 방식 다이얼로그
 
@@ -139,6 +213,22 @@ import { Dropdown } from "@simplysm/solid";
 </Dropdown>
 ```
 
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `open` | `boolean` | | 열림 상태 |
+| `onOpenChange` | `(v: boolean) => void` | | 상태 콜백 |
+| `position` | `{ x: number; y: number }` | | 절대 위치 (컨텍스트 메뉴용) |
+| `maxHeight` | `number` | `300` | 최대 높이 (px) |
+| `disabled` | `boolean` | `false` | 비활성화 |
+| `keyboardNav` | `boolean` | `false` | 키보드 네비게이션 (Select 등에서 사용) |
+
+### 서브 컴포넌트
+
+| 컴포넌트 | 설명 |
+|----------|------|
+| `Dropdown.Trigger` | 드롭다운 트리거 |
+| `Dropdown.Content` | 드롭다운 콘텐츠 |
+
 ---
 
 ## Collapse
@@ -148,11 +238,20 @@ import { Dropdown } from "@simplysm/solid";
 ```tsx
 import { Collapse } from "@simplysm/solid";
 
+<Button aria-expanded={expanded()} onClick={() => setExpanded(!expanded())}>
+  토글
+</Button>
 <Collapse open={expanded()}>
   <div>접힌 내용</div>
 </Collapse>
 ```
 
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `open` | `boolean` | `false` | 열림 상태 |
+
+`<div>` HTML 속성을 모두 상속한다. 높이 애니메이션이 자동 적용된다.
+
 ---
 
 ## Tabs
@@ -168,6 +267,17 @@ import { Tabs } from "@simplysm/solid";
 </Tabs>
 ```
 
+| Prop (Tabs) | 타입 | 설명 |
+|------------|------|------|
+| `value` | `string` | 선택된 탭 값 |
+| `onValueChange` | `(v: string) => void` | 변경 콜백 |
+| `size` | `ComponentSize` | 크기 |
+
+| Prop (Tabs.Tab) | 타입 | 설명 |
+|-----------------|------|------|
+| `value` | `string` | 탭 식별 값 |
+| `disabled` | `boolean` | 비활성화 |
+
 ---
 
 ## Notification
@@ -259,8 +369,23 @@ busy.hide();
 import { Progress } from "@simplysm/solid";
 
 <Progress value={progress()} />
+<Progress value={75} theme="success" />
+
+// 커스텀 콘텐츠
+<Progress value={50} theme="primary" size="lg">
+  <span>50% 완료</span>
+</Progress>
 ```
 
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `value` | `number` | (필수) | 진행률 (0-100) |
+| `theme` | `SemanticTheme` | `"primary"` | 색상 테마 |
+| `size` | `ComponentSize` | `"md"` | 크기 |
+| `inset` | `boolean` | `false` | 테두리 없음 |
+
+`<div>` HTML 속성을 모두 상속한다. children이 있으면 퍼센트 텍스트 대신 커스텀 콘텐츠를 표시한다.
+
 ---
 
 ## Print

package/docs/features.md

@@ -39,7 +39,7 @@ const result = await dialog.open(UserList);
 
 ## CrudSheet
 
-DataSheet 기반 CRUD 기능 통합 컴포넌트. 인라인/다이얼로그 편집, 검색, Excel 가져오기/내보내기, 배치 작업을 지원한다.
+DataSheet 기반 CRUD 기능 통합 컴포넌트. 인라인/다이얼로그 편집, 검색, Excel 가져오기/내보내기, 선택 모드, 배치 작업을 지원한다.
 
 편집 방식은 `inlineEdit`과 `dialogEdit` 중 하나를 선택한다 (동시 사용 불가).
 
@@ -80,6 +80,7 @@ function ProductSheet(props: { close?: (result?: boolean) => void }) {
       dialogEdit={{
         editItem: (item) => dialog.open(ProductDetail, { item }),
         deleteItems: (items) => deleteProducts(items),
+        restoreItems: (items) => restoreProducts(items),
       }}
     >
       <CrudSheet.Column header="상품명" key="name" editTrigger>
@@ -90,15 +91,241 @@ function ProductSheet(props: { close?: (result?: boolean) => void }) {
 }
 ```
 
+### CrudSheet Props
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `search` | `(filter, page, sorts) => Promise<SearchResult<TItem>>` | 데이터 조회 함수. `page`가 `undefined`면 전체 조회 (Excel 등) |
+| `getItemKey` | `(item: TItem) => string \| number \| undefined` | 아이템 고유 키 반환 |
+| `close` | `() => void` | Dialog 모드 활성화. 전달 시 Dialog 헤더에 새로고침 버튼 표시 |
+| `inlineEdit` | `InlineEditConfig<TItem>` | 인라인 편집 설정 (`dialogEdit`과 동시 사용 불가) |
+| `dialogEdit` | `DialogEditConfig<TItem>` | 다이얼로그 편집 설정 (`inlineEdit`과 동시 사용 불가) |
+| `editable` | `boolean` | 편집 버튼 표시 여부 (기본값: `true`) |
+| `isItemEditable` | `(item: TItem) => boolean` | 아이템별 편집 가능 여부 (dialogEdit의 editTrigger 링크에 적용) |
+| `isItemDeletable` | `(item: TItem) => boolean` | 아이템별 삭제 가능 여부 (삭제 버튼/링크 비활성화) |
+| `isItemDeleted` | `(item: TItem) => boolean` | 아이템 삭제 상태 확인 (취소선 표시) |
+| `isItemSelectable` | `(item: TItem) => boolean \| string` | 아이템별 선택 가능 여부 |
+| `filterInitial` | `TFilter` | 필터 초기값 |
+| `items` | `TItem[]` | 제어 모드: 외부에서 아이템 배열 전달 |
+| `onItemsChange` | `(items: TItem[]) => void` | 제어 모드: 아이템 변경 콜백 |
+| `storageKey` | `string` | DataSheet 컬럼 너비 등 상태 저장 키 |
+| `lastModifiedAtProp` | `string` | 자동 "최종수정일시" 컬럼 추가 (DateTime 타입, hidden) |
+| `lastModifiedByProp` | `string` | 자동 "수정자" 컬럼 추가 (string 타입, hidden) |
+| `excel` | `ExcelConfig<TItem>` | Excel 가져오기/내보내기 설정 |
+| `selectionMode` | `"single" \| "multiple"` | 선택 모드 활성화 |
+| `selectedKeys` | `(string \| number)[]` | 제어 모드: 선택된 키 배열 |
+| `onSelectedKeysChange` | `(keys) => void` | 제어 모드: 선택 변경 콜백 |
+| `onSelect` | `(result: SelectResult<TItem>) => void` | 선택 확인 콜백 (single 모드는 클릭 시 자동 호출) |
+| `onSubmitComplete` | `() => void` | 저장 완료 후 콜백 |
+| `hideAutoTools` | `boolean` | 자동 생성 툴바 버튼 숨기기 |
+| `class` | `string` | CSS 클래스 |
+
+### 설정 타입
+
+```typescript
+// 인라인 편집 설정
+interface InlineEditConfig<TItem> {
+  submit: (diffs: ArrayOneWayDiffResult<TItem>[]) => Promise<void>;
+  newItem: () => TItem;
+  deleteProp?: keyof TItem & string;   // 삭제 플래그 프로퍼티 (예: "isDeleted")
+  diffsExcludes?: string[];            // diff 비교 제외 프로퍼티
+}
+
+// 다이얼로그 편집 설정
+interface DialogEditConfig<TItem> {
+  editItem: (item?: TItem) => Promise<boolean | undefined>;   // 등록(item 없음)/수정 다이얼로그
+  deleteItems?: (items: TItem[]) => Promise<boolean>;          // 선택 항목 삭제
+  restoreItems?: (items: TItem[]) => Promise<boolean>;         // 선택 항목 복원
+}
+
+// Excel 설정
+interface ExcelConfig<TItem> {
+  download: (items: TItem[]) => Promise<void>;   // 전체 데이터 다운로드
+  upload?: (file: File) => Promise<void>;        // .xlsx 파일 업로드
+}
+
+// 조회 결과
+interface SearchResult<TItem> {
+  items: TItem[];
+  pageCount?: number;   // 페이지 수 (미설정 시 페이징 없음)
+}
+
+// 선택 결과
+interface SelectResult<TItem> {
+  items: TItem[];
+  keys: (string | number)[];
+}
+```
+
+### 선택 모드
+
+`selectionMode`를 설정하면 체크박스 컬럼이 자동 추가된다. Dialog 모드에서 사용하면 선택 전용 UI로 전환된다.
+
+```tsx
+// 다중 선택 (제어 모드)
+const [selectedKeys, setSelectedKeys] = createSignal<number[]>([]);
+
+<CrudSheet
+  search={searchFn}
+  getItemKey={(item) => item.id}
+  selectionMode="multiple"
+  selectedKeys={selectedKeys()}
+  onSelectedKeysChange={setSelectedKeys}
+>
+  <CrudSheet.Column key="name" header="이름">
+    {(ctx) => <div>{ctx.item.name}</div>}
+  </CrudSheet.Column>
+</CrudSheet>
+
+// Dialog에서 단일 선택 (클릭 시 자동 확정)
+<CrudSheet
+  close={props.close}
+  search={searchFn}
+  getItemKey={(item) => item.id}
+  selectionMode="single"
+  onSelect={(result) => props.close?.({ selectedKeys: result.keys })}
+>
+  ...
+</CrudSheet>
+```
+
+### Excel 가져오기/내보내기
+
+```tsx
+<CrudSheet
+  search={searchFn}
+  getItemKey={(item) => item.id}
+  excel={{
+    download: async (items) => {
+      // items는 전체 데이터 (페이징 무시하고 재조회)
+      await exportToExcel(items);
+    },
+    upload: async (file) => {
+      // .xlsx 파일 업로드 후 자동 새로고침
+      await importFromExcel(file);
+    },
+  }}
+>
+  ...
+</CrudSheet>
+```
+
+### 키보드 단축키
+
+| 단축키 | 동작 |
+|--------|------|
+| `Ctrl+S` | 저장 (인라인 편집 모드) |
+| `Ctrl+Alt+L` | 새로고침 |
+
+활성화 조건: 해당 CrudSheet 영역에 포커스/클릭이 있어야 한다 (다중 CrudSheet 환경에서 충돌 방지).
+
 ### CrudSheet 서브 컴포넌트
 
 | 컴포넌트 | 설명 |
 |----------|------|
 | `CrudSheet.Column` | 컬럼 정의. `editTrigger`로 dialogEdit 시 클릭 편집 링크 표시 |
-| `CrudSheet.Filter` | 검색 필터 영역 |
-| `CrudSheet.Tools` | 커스텀 툴바 버튼 (`CrudSheetContext` 전달) |
+| `CrudSheet.Filter` | 검색 필터 영역. render prop으로 `(filter, setFilter)` 전달 |
+| `CrudSheet.Tools` | 커스텀 툴바 버튼. render prop으로 `CrudSheetContext` 전달 |
 | `CrudSheet.Header` | 시트 상단 커스텀 헤더 영역 |
 
+### CrudSheet.Column
+
+`DataSheetColumn`의 모든 props를 상속하며, 추가로 `editTrigger`와 CRUD 전용 셀 컨텍스트를 제공한다.
+
+```tsx
+<CrudSheet.Column<TItem>
+  key="name"              // 컬럼 식별 키 (정렬, 저장에 사용)
+  header="이름"           // 헤더 텍스트 또는 JSX
+  editTrigger             // dialogEdit 시 클릭 편집 링크 표시
+  fixed                   // 고정 컬럼
+  hidden                  // 기본 숨김 (사용자가 토글 가능)
+  collapse                // 접기 가능
+  width="150px"           // 초기 너비
+  sortable={true}         // 정렬 가능 (기본: true)
+  resizable={true}        // 리사이즈 가능 (기본: true)
+  summary={(items) => items.reduce((sum, item) => sum + item.amount, 0)}
+>
+  {(ctx) => (
+    // ctx: CrudSheetCellContext<TItem>
+    // ctx.item: 현재 아이템
+    // ctx.index: 배열 인덱스
+    // ctx.row: 행 번호
+    // ctx.depth: 트리 깊이
+    // ctx.setItem(key, value): 인라인 편집 시 값 변경
+    <TextInput value={ctx.item.name} onValueChange={(v) => ctx.setItem("name", v)} />
+  )}
+</CrudSheet.Column>
+```
+
+### CrudSheet.Filter
+
+검색 필터 영역. render prop으로 현재 `filter` 상태와 `setFilter` (SolidJS store setter)를 전달한다. 검색 버튼은 자동 생성된다.
+
+```tsx
+<CrudSheet.Filter<{ searchText?: string; status?: string }>>
+  {(filter, setFilter) => (
+    <>
+      <FormGroup.Item label="검색어">
+        <TextInput value={filter.searchText ?? ""} onValueChange={(v) => setFilter("searchText", v)} />
+      </FormGroup.Item>
+      <FormGroup.Item label="상태">
+        <Select
+          value={filter.status}
+          onValueChange={(v) => setFilter("status", v)}
+          items={["active", "inactive"]}
+        />
+      </FormGroup.Item>
+    </>
+  )}
+</CrudSheet.Filter>
+```
+
+### CrudSheet.Tools
+
+커스텀 툴바 버튼. render prop으로 `CrudSheetContext`를 전달하여 내부 상태 접근 및 액션 호출이 가능하다.
+
+```tsx
+<CrudSheet.Tools<TItem>>
+  {(ctx) => (
+    <>
+      <Button size="sm" onClick={() => void handleCustomAction(ctx.selection())}>
+        커스텀 액션 ({ctx.selection().length}건)
+      </Button>
+      <Show when={ctx.hasChanges()}>
+        <span class="text-warning-500">변경사항 있음</span>
+      </Show>
+    </>
+  )}
+</CrudSheet.Tools>
+```
+
+#### CrudSheetContext API
+
+| 멤버 | 타입 | 설명 |
+|------|------|------|
+| `items()` | `TItem[]` | 현재 페이지 아이템 목록 |
+| `selection()` | `TItem[]` | 현재 선택된 아이템 목록 |
+| `page()` | `number` | 현재 페이지 번호 |
+| `sorts()` | `SortingDef[]` | 현재 정렬 정의 |
+| `busy()` | `boolean` | 로딩 중 여부 |
+| `hasChanges()` | `boolean` | 변경사항 존재 여부 (인라인 편집) |
+| `save()` | `Promise<void>` | 저장 실행 |
+| `refresh()` | `Promise<void>` | 데이터 새로고침 |
+| `addItem()` | `void` | 행 추가 (인라인 편집) |
+| `clearSelection()` | `void` | 선택 초기화 |
+| `setPage(page)` | `void` | 페이지 변경 |
+| `setSorts(sorts)` | `void` | 정렬 변경 |
+
+### CrudSheet.Header
+
+시트 상단에 커스텀 헤더 영역을 추가한다.
+
+```tsx
+<CrudSheet.Header>
+  <div class="p-2 text-lg font-bold">사용자 관리</div>
+</CrudSheet.Header>
+```
+
 ---
 
 ## CrudDetail
@@ -131,6 +358,46 @@ function UserDetail(props: { close?: (result?: boolean) => void; userId: number
 const result = await dialog.open(UserDetail, { userId: 123 });
 ```
 
+### CrudDetail Props
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `load` | `() => Promise<{ data: TData; info: CrudDetailInfo }>` | 데이터 로드 함수 (필수) |
+| `children` | `(ctx: CrudDetailContext<TData>) => JSX.Element` | 폼 렌더링 (필수) |
+| `submit` | `(data: TData) => Promise<boolean \| undefined>` | 저장 함수 |
+| `toggleDelete` | `(del: boolean) => Promise<boolean \| undefined>` | 삭제/복원 토글 |
+| `editable` | `boolean` | 편집 가능 여부 |
+| `deletable` | `boolean` | 삭제 가능 여부 |
+| `data` | `TData` | 제어 모드: 외부 데이터 |
+| `onDataChange` | `(data: TData) => void` | 제어 모드: 데이터 변경 콜백 |
+| `close` | `(result?: boolean) => void` | Dialog 모드 활성화 |
+| `class` | `string` | CSS 클래스 |
+
+### CrudDetailInfo
+
+```typescript
+interface CrudDetailInfo {
+  isNew: boolean;           // 신규 레코드 여부
+  isDeleted: boolean;       // 삭제 상태
+  lastModifiedAt?: DateTime; // 최종 수정 일시
+  lastModifiedBy?: string;  // 최종 수정자
+}
+```
+
+### CrudDetailContext
+
+```typescript
+interface CrudDetailContext<TData> {
+  data: TData;                        // 현재 데이터 (store)
+  setData: SetStoreFunction<TData>;   // 데이터 수정 (SolidJS store setter)
+  info: () => CrudDetailInfo;         // 상세 정보
+  busy: () => boolean;                // 로딩 중 여부
+  hasChanges: () => boolean;          // 변경사항 존재 여부
+  save: () => Promise<void>;          // 저장 실행
+  refresh: () => Promise<void>;       // 데이터 새로고침
+}
+```
+
 ### CrudDetail 서브 컴포넌트
 
 | 컴포넌트 | 설명 |