@simplysm/solid 13.0.97 → 13.0.99

package/docs/disclosure.md

@@ -0,0 +1,188 @@
+# Disclosure Components
+
+Source: `src/components/disclosure/**`
+
+## `Collapse`
+
+Animated collapsible container using CSS margin-top transition.
+
+```typescript
+export interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `open` | `boolean` | Whether content is visible. Default: `false` |
+
+---
+
+## `Dropdown`
+
+Popup dropdown component with trigger/content slot pattern. Supports auto-positioning, keyboard navigation, and context menu mode.
+
+```typescript
+export interface DropdownProps {
+  position?: { x: number; y: number };
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  maxHeight?: number;
+  disabled?: boolean;
+  keyboardNav?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children: JSX.Element;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `position` | `{ x: number; y: number }` | Absolute position for context menu mode |
+| `open` | `boolean` | Popup open state |
+| `onOpenChange` | `(open: boolean) => void` | Open state change callback |
+| `maxHeight` | `number` | Popup max height in px. Default: `300` |
+| `disabled` | `boolean` | Disable trigger click |
+| `keyboardNav` | `boolean` | Enable ArrowUp/ArrowDown keyboard navigation |
+
+### Sub-components
+
+- **`Dropdown.Trigger`** -- Trigger element slot (click toggles popup)
+- **`Dropdown.Content`** -- Popup content slot
+
+---
+
+## `Dialog`
+
+Modal/float dialog with dragging, 8-directional resizing, automatic z-index management, and slot-based header/action areas.
+
+```typescript
+export interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  withCloseButton?: boolean;
+  closeOnInteractOutside?: boolean;
+  closeOnEscape?: boolean;
+  resizable?: boolean;
+  draggable?: boolean;
+  mode?: "float" | "fill";
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
+  position?: "bottom-right" | "top-right";
+  headerStyle?: JSX.CSSProperties | string;
+  beforeClose?: () => boolean;
+  onCloseComplete?: () => void;
+  class?: string;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `open` | `boolean` | Dialog open state |
+| `onOpenChange` | `(open: boolean) => void` | Open state change callback |
+| `withCloseButton` | `boolean` | Show close button. Default: `true` |
+| `closeOnInteractOutside` | `boolean` | Close on backdrop click. Default: `false` |
+| `closeOnEscape` | `boolean` | Close on ESC key. Default: `true` |
+| `resizable` | `boolean` | Enable 8-directional resizing. Default: `false` |
+| `draggable` | `boolean` | Enable header dragging. Default: `true` |
+| `mode` | `"float" \| "fill"` | Display mode |
+| `width` / `height` | `number` | Initial dimensions in px |
+| `minWidth` / `minHeight` | `number` | Minimum dimensions in px |
+| `position` | `"bottom-right" \| "top-right"` | Absolute position mode |
+| `beforeClose` | `() => boolean` | Close guard (return `false` to cancel) |
+| `onCloseComplete` | `() => void` | Callback after close animation completes |
+
+### Sub-components
+
+- **`Dialog.Header`** -- Header slot (enables dragging)
+- **`Dialog.Action`** -- Action slot in header area (before close button)
+
+### `DialogProvider`
+
+Provider for programmatic dialog management via `useDialog().show()`.
+
+```typescript
+export interface DialogProviderProps extends DialogDefaults {}
+
+export interface DialogDefaults {
+  closeOnEscape?: boolean;
+  closeOnInteractOutside?: boolean;
+}
+```
+
+### `useDialog`
+
+```typescript
+export function useDialog(): DialogContextValue;
+
+export interface DialogContextValue {
+  show<P extends Record<string, any>>(
+    component: Component<P>,
+    props: Omit<P, "close">,
+    options?: DialogShowOptions,
+  ): Promise<ExtractCloseResult<P> | undefined>;
+}
+```
+
+### `DialogShowOptions`
+
+```typescript
+export interface DialogShowOptions {
+  header?: JSX.Element;
+  withCloseButton?: boolean;
+  closeOnInteractOutside?: boolean;
+  closeOnEscape?: boolean;
+  resizable?: boolean;
+  draggable?: boolean;
+  mode?: "float" | "fill";
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
+  position?: "bottom-right" | "top-right";
+  headerStyle?: JSX.CSSProperties | string;
+  beforeClose?: () => boolean;
+}
+```
+
+### `DialogDefaultsContext`
+
+Context for setting default dialog options across the app.
+
+---
+
+## `Tabs`
+
+Tab bar component with underline indicator and keyboard support.
+
+```typescript
+interface TabsProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  size?: ComponentSize;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Currently selected tab value |
+| `onValueChange` | `(value: string) => void` | Tab change callback |
+| `size` | `ComponentSize` | Tab size |
+
+### Sub-components
+
+- **`Tabs.Tab`** -- Individual tab button
+
+```typescript
+interface TabsTabProps {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+```

package/docs/display.md

@@ -0,0 +1,137 @@
+# Display Components
+
+Source: `src/components/display/**`
+
+## `Barcode`
+
+SVG barcode renderer using bwip-js. Supports 100+ barcode formats.
+
+```typescript
+export interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  type: BarcodeType;
+  value?: string;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `type` | `BarcodeType` | Barcode format (e.g., `"qrcode"`, `"code128"`, `"ean13"`) |
+| `value` | `string` | Data to encode |
+
+### `BarcodeType`
+
+Union of 100+ barcode format strings including `"qrcode"`, `"code128"`, `"ean13"`, `"datamatrix"`, `"pdf417"`, `"azteccode"`, etc.
+
+---
+
+## `Card`
+
+Surface container with shadow, hover effects, and fade-in animation.
+
+```typescript
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+```
+
+---
+
+## `Echarts`
+
+Apache ECharts wrapper with auto-resize and loading state support.
+
+```typescript
+export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  option: echarts.EChartsOption;
+  busy?: boolean;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `option` | `echarts.EChartsOption` | ECharts configuration object |
+| `busy` | `boolean` | Show loading overlay |
+
+---
+
+## `Icon`
+
+Wrapper for Tabler Icons with consistent sizing and vertical alignment.
+
+```typescript
+export interface IconProps extends Omit<TablerIconProps, "size"> {
+  icon: Component<TablerIconProps>;
+  size?: string | number;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `icon` | `Component<TablerIconProps>` | Tabler icon component |
+| `size` | `string \| number` | Icon size. Default: `"1.25em"` |
+
+---
+
+## `Tag`
+
+Inline badge/tag with semantic theme colors.
+
+```typescript
+export interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  theme?: TagTheme;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `SemanticTheme` | Color theme. Default: `"base"` |
+
+### `TagTheme`
+
+```typescript
+export type TagTheme = SemanticTheme;
+```
+
+---
+
+## `Link`
+
+Styled anchor element with theme colors and disabled state.
+
+```typescript
+export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  theme?: LinkTheme;
+  disabled?: boolean;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `SemanticTheme` | Color theme. Default: `"primary"` |
+| `disabled` | `boolean` | Disabled state |
+
+### `LinkTheme`
+
+```typescript
+export type LinkTheme = SemanticTheme;
+```
+
+---
+
+## `Alert`
+
+Block-level alert container with semantic theme background.
+
+```typescript
+export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  theme?: AlertTheme;
+}
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `SemanticTheme` | Color theme. Default: `"base"` |
+
+### `AlertTheme`
+
+```typescript
+export type AlertTheme = SemanticTheme;
+```

package/docs/features.md

@@ -0,0 +1,310 @@
+# Feature Components
+
+Source: `src/components/features/**`
+
+## `AddressSearchContent`
+
+Korean address search dialog content using Daum Postcode API.
+
+```typescript
+export interface AddressSearchResult {
+  postNumber: string | undefined;
+  address: string | undefined;
+  buildingName: string | undefined;
+}
+```
+
+Props: `{ close?: (result?: AddressSearchResult) => void }`
+
+Designed to be used with `useDialog().show()`.
+
+---
+
+## `SharedDataSelect`
+
+Select component integrated with `SharedDataAccessor` for reactive shared data selection. Supports single and multiple modes with search, tree structure, and dialog selection.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `SharedDataAccessor<TItem>` | Shared data accessor |
+| `value` | `TKey \| TKey[]` | Selected key(s) |
+| `onValueChange` | `(value) => void` | Value change callback |
+| `multiple` | `boolean` | Multiple selection mode |
+| `required` | `boolean` | Required input |
+| `disabled` | `boolean` | Disabled state |
+| `size` | `ComponentSize` | Trigger size |
+| `inset` | `boolean` | Borderless style |
+| `filterFn` | `(item, index) => boolean` | Item filter function |
+| `dialog` | `Component<TDialogProps>` | Selection dialog component |
+| `dialogOptions` | `DialogShowOptions` | Dialog display options |
+
+---
+
+## `SharedDataSelectButton`
+
+Button-based select component for shared data. Opens a dialog for selection. Supports single and multiple modes.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `SharedDataAccessor<TItem>` | Shared data accessor |
+| `value` | `string \| number \| (string \| number)[]` | Selected key(s) |
+| `onValueChange` | `(value) => void` | Value change callback |
+| `multiple` | `boolean` | Multiple selection mode |
+| `required` | `boolean` | Required input |
+| `disabled` | `boolean` | Disabled state |
+| `size` | `ComponentSize` | Trigger size |
+| `inset` | `boolean` | Borderless style |
+| `dialog` | `Component<TDialogProps>` | Selection dialog component (required) |
+| `dialogOptions` | `DialogShowOptions` | Dialog display options |
+| `children` | `(item: TItem) => JSX.Element` | Item rendering function |
+
+---
+
+## `SharedDataSelectList`
+
+List-based selection component for shared data with pagination and search.
+
+```typescript
+export interface SharedDataSelectListProps<TItem> {
+  data: SharedDataAccessor<TItem>;
+  value?: TItem;
+  onValueChange?: (value: TItem | undefined) => void;
+  required?: boolean;
+  disabled?: boolean;
+  filterFn?: (item: TItem, index: number) => boolean;
+}
+```
+
+### Sub-components
+
+- **`SharedDataSelectList.ItemTemplate`** -- Template for item rendering
+- **`SharedDataSelectList.Filter`** -- Custom filter UI slot
+
+### `SharedDataSelectListContextValue`
+
+```typescript
+export interface SharedDataSelectListContextValue {
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+}
+```
+
+---
+
+## `DataSelectButton`
+
+Generic button-based select component that opens a dialog for selection. Works with any data source (not tied to SharedData).
+
+### `SelectDialogBaseProps`
+
+```typescript
+export interface SelectDialogBaseProps<TKey = string | number> {
+  close?: (result?: DataSelectDialogResult<TKey>) => void;
+  selectionMode: "single" | "multiple";
+  selectedKeys: TKey[];
+}
+```
+
+### `DataSelectDialogResult`
+
+```typescript
+export interface DataSelectDialogResult<TKey> {
+  selectedKeys: TKey[];
+}
+```
+
+### `DialogPropsField`
+
+Conditional type that makes `dialogProps` required only when the dialog component has required custom props.
+
+```typescript
+export type DialogPropsField<P, TKey = string | number> =
+  {} extends UserDialogProps<P, TKey>
+    ? { dialogProps?: UserDialogProps<P, TKey> }
+    : { dialogProps: UserDialogProps<P, TKey> };
+```
+
+---
+
+## `CrudSheet`
+
+Full-featured CRUD data grid with inline/dialog editing, sorting, pagination, selection, excel import/export, and toolbar management.
+
+```typescript
+export type CrudSheetProps<TItem, TFilter extends Record<string, unknown>> =
+  CrudSheetBaseProps<TItem, TFilter> & (
+    | { inlineEdit: InlineEditConfig<TItem>; dialogEdit?: never }
+    | { dialogEdit: DialogEditConfig<TItem>; inlineEdit?: never }
+    | { inlineEdit?: never; dialogEdit?: never }
+  );
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `search` | `(filter, page, sorts) => Promise<SearchResult<TItem>>` | Data fetch function |
+| `getItemKey` | `(item) => string \| number \| undefined` | Item key extractor |
+| `storageKey` | `string` | Config persistence key |
+| `editable` | `boolean` | Enable editing |
+| `inlineEdit` | `InlineEditConfig<TItem>` | Inline editing configuration |
+| `dialogEdit` | `DialogEditConfig<TItem>` | Dialog editing configuration |
+| `excel` | `ExcelConfig<TItem>` | Excel download/upload |
+| `selectionMode` | `"single" \| "multiple"` | Selection mode |
+| `filterInitial` | `TFilter` | Initial filter state |
+
+### `SearchResult`
+
+```typescript
+export interface SearchResult<TItem> {
+  items: TItem[];
+  pageCount?: number;
+}
+```
+
+### `InlineEditConfig`
+
+```typescript
+export interface InlineEditConfig<TItem> {
+  submit: (diffs: ArrayOneWayDiffResult<TItem>[]) => Promise<void>;
+  newItem: () => TItem;
+  deleteProp?: keyof TItem & string;
+  diffsExcludes?: string[];
+}
+```
+
+### `DialogEditConfig`
+
+```typescript
+export interface DialogEditConfig<TItem> {
+  editItem: (item?: TItem) => Promise<boolean | undefined>;
+  deleteItems?: (items: TItem[]) => Promise<boolean>;
+  restoreItems?: (items: TItem[]) => Promise<boolean>;
+}
+```
+
+### `ExcelConfig`
+
+```typescript
+export interface ExcelConfig<TItem> {
+  download: (items: TItem[]) => Promise<void>;
+  upload?: (file: File) => Promise<void>;
+}
+```
+
+### `CrudSheetCellContext`
+
+```typescript
+export interface CrudSheetCellContext<TItem> {
+  item: TItem;
+  index: number;
+  row: number;
+  depth: number;
+  setItem: <TKey extends keyof TItem>(key: TKey, value: TItem[TKey]) => void;
+}
+```
+
+### `CrudSheetContext`
+
+```typescript
+export interface CrudSheetContext<TItem> {
+  items(): TItem[];
+  selection(): TItem[];
+  page(): number;
+  sorts(): SortingDef[];
+  busy(): boolean;
+  hasChanges(): boolean;
+  save(): Promise<void>;
+  refresh(): Promise<void>;
+  addItem(): void;
+  clearSelection(): void;
+  setPage(page: number): void;
+  setSorts(sorts: SortingDef[]): void;
+}
+```
+
+### `SelectResult`
+
+```typescript
+export interface SelectResult<TItem> {
+  items: TItem[];
+  keys: (string | number)[];
+}
+```
+
+### `CrudSheetColumnProps`
+
+```typescript
+export interface CrudSheetColumnProps<TItem> extends Omit<DataSheetColumnProps<TItem>, "children"> {
+  editTrigger?: boolean;
+  children: (ctx: CrudSheetCellContext<TItem>) => JSX.Element;
+}
+```
+
+---
+
+## `CrudDetail`
+
+CRUD detail view with controlled store, save/refresh lifecycle, and delete toggle.
+
+```typescript
+export interface CrudDetailProps<TData extends object> {
+  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;
+  class?: string;
+}
+```
+
+### `CrudDetailInfo`
+
+```typescript
+export interface CrudDetailInfo {
+  isNew: boolean;
+  isDeleted: boolean;
+  lastModifiedAt?: DateTime;
+  lastModifiedBy?: string;
+}
+```
+
+### `CrudDetailContext`
+
+```typescript
+export interface CrudDetailContext<TData> {
+  data: TData;
+  setData: SetStoreFunction<TData>;
+  info: () => CrudDetailInfo;
+  busy: () => boolean;
+  hasChanges: () => boolean;
+  save: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+```
+
+---
+
+## `PermissionTable`
+
+Permission management table displaying a tree of `AppPerm` items with checkbox columns for each permission type.
+
+```typescript
+export interface PermissionTableProps<TModule = string> {
+  items?: AppPerm<TModule>[];
+  value?: Record<string, boolean>;
+  onValueChange?: (value: Record<string, boolean>) => void;
+  modules?: TModule[];
+  disabled?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+```
+
+### Utility Functions
+
+```typescript
+export function collectAllPerms<TModule>(items: AppPerm<TModule>[]): string[];
+export function filterByModules<TModule>(items: AppPerm<TModule>[], modules: TModule[]): AppPerm<TModule>[];
+```