@simplysm/solid 13.0.62 → 13.0.64

package/docs/form-controls.md

@@ -436,6 +436,263 @@ import { Select } from "@simplysm/solid";
 
 ---
 
+## SelectList
+
+List-style single selection component with built-in search, pagination, and slot-based customization. Uses compound component pattern with `SelectList.Header`, `SelectList.Filter`, and `SelectList.ItemTemplate`.
+
+```tsx
+import { SelectList } from "@simplysm/solid";
+
+// Basic usage with search
+<SelectList
+  items={users()}
+  value={selectedUser()}
+  onValueChange={setSelectedUser}
+  getSearchText={(user) => user.name}
+>
+  <SelectList.ItemTemplate>
+    {(user) => <>{user.name} ({user.email})</>}
+  </SelectList.ItemTemplate>
+</SelectList>
+
+// With pagination and header
+<SelectList
+  items={items()}
+  value={selected()}
+  onValueChange={setSelected}
+  pageSize={20}
+  header="Select an item"
+>
+  <SelectList.ItemTemplate>
+    {(item) => <>{item.name}</>}
+  </SelectList.ItemTemplate>
+</SelectList>
+
+// With custom header and filter slots
+<SelectList
+  items={items()}
+  value={selected()}
+  onValueChange={setSelected}
+>
+  <SelectList.Header>
+    <div class="flex items-center gap-1">Custom Header</div>
+  </SelectList.Header>
+  <SelectList.Filter>
+    <MyCustomFilter />
+  </SelectList.Filter>
+  <SelectList.ItemTemplate>
+    {(item) => <>{item.label}</>}
+  </SelectList.ItemTemplate>
+</SelectList>
+
+// With canChange guard
+<SelectList
+  items={items()}
+  value={selected()}
+  onValueChange={setSelected}
+  canChange={async (item) => {
+    if (hasUnsavedChanges()) return confirm("Discard changes?");
+    return true;
+  }}
+>
+  <SelectList.ItemTemplate>
+    {(item) => <>{item.name}</>}
+  </SelectList.ItemTemplate>
+</SelectList>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `T[]` | **(required)** | Item array |
+| `value` | `T` | - | Selected value |
+| `onValueChange` | `(value: T \| undefined) => void` | - | Value change callback |
+| `required` | `boolean` | - | Required (hides "unspecified" item) |
+| `disabled` | `boolean` | - | Disabled state |
+| `getSearchText` | `(item: T) => string` | - | Search text extractor (auto-shows search input) |
+| `getIsHidden` | `(item: T) => boolean` | - | Hidden item filter |
+| `filterFn` | `(item: T, index: number) => boolean` | - | Custom filter function |
+| `canChange` | `(item: T \| undefined) => boolean \| Promise<boolean>` | - | Change guard (return `false` to block) |
+| `pageSize` | `number` | - | Page size (auto-shows pagination) |
+| `header` | `string` | - | Header text |
+| `class` | `string` | - | CSS class |
+| `style` | `JSX.CSSProperties` | - | Inline style |
+
+**Sub-components:**
+- `SelectList.Header` -- Custom header slot (overrides `header` prop)
+- `SelectList.Filter` -- Custom filter slot (overrides default search input)
+- `SelectList.ItemTemplate` -- Item rendering template
+
+---
+
+## DataSelectButton
+
+Modal-based selection button. Displays selected items inline and opens a dialog for selection. Supports single and multiple selection with key-based loading.
+
+```tsx
+import { DataSelectButton, type DataSelectModalResult } from "@simplysm/solid";
+
+// Single selection
+<DataSelectButton
+  value={selectedUserId()}
+  onValueChange={setSelectedUserId}
+  load={async (keys) => await api.getUsersByIds(keys)}
+  modal={() => <UserSelectModal />}
+  renderItem={(user) => <>{user.name}</>}
+/>
+
+// Multiple selection
+<DataSelectButton
+  value={selectedIds()}
+  onValueChange={setSelectedIds}
+  multiple
+  load={async (keys) => await api.getItemsByIds(keys)}
+  modal={() => <ItemSelectModal />}
+  renderItem={(item) => <>{item.name}</>}
+/>
+```
+
+The modal should return `DataSelectModalResult<TKey>` via `dialogInstance.close({ selectedKeys: [...] })`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `TKey \| TKey[]` | - | Selected key(s) |
+| `onValueChange` | `(value: TKey \| TKey[] \| undefined) => void` | - | Value change callback |
+| `load` | `(keys: TKey[]) => TItem[] \| Promise<TItem[]>` | **(required)** | Load items by keys |
+| `modal` | `() => JSX.Element` | **(required)** | Selection modal factory |
+| `renderItem` | `(item: TItem) => JSX.Element` | **(required)** | Item display renderer |
+| `multiple` | `boolean` | - | Multiple selection mode |
+| `required` | `boolean` | - | Required field |
+| `disabled` | `boolean` | - | Disabled state |
+| `size` | `"xs" \| "sm" \| "lg" \| "xl"` | - | Size |
+| `inset` | `boolean` | - | Inset style |
+| `validate` | `(value: unknown) => string \| undefined` | - | Custom validation function |
+| `touchMode` | `boolean` | - | Show error only after focus loss |
+| `dialogOptions` | `DialogShowOptions` | - | Dialog options for modal |
+
+**DataSelectModalResult:**
+
+```typescript
+interface DataSelectModalResult<TKey> {
+  selectedKeys: TKey[];
+}
+```
+
+---
+
+## SharedData Wrappers
+
+Convenience wrappers that connect `SharedDataAccessor` (from `useSharedData()`) to `Select`, `DataSelectButton`, and `SelectList` components. They auto-wire `items`, tree structure (`getChildren`), search, and hidden filtering from the shared data definition.
+
+### SharedDataSelect
+
+Wraps `Select` with `SharedDataAccessor`. Optionally adds search modal and edit modal action buttons.
+
+```tsx
+import { SharedDataSelect } from "@simplysm/solid";
+
+const sharedData = useSharedData<MySharedData>();
+
+<SharedDataSelect data={sharedData.departments} value={deptId()} onValueChange={setDeptId}>
+  {(dept) => <>{dept.name}</>}
+</SharedDataSelect>
+
+// With search modal and edit modal
+<SharedDataSelect
+  data={sharedData.users}
+  value={userId()}
+  onValueChange={setUserId}
+  modal={() => <UserSearchModal />}
+  editModal={() => <UserEditModal />}
+>
+  {(user) => <>{user.name}</>}
+</SharedDataSelect>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SharedDataAccessor<TItem>` | **(required)** | Shared data accessor |
+| `value` | `unknown` | - | Selected value |
+| `onValueChange` | `(value: unknown) => void` | - | Value change callback |
+| `multiple` | `boolean` | - | Multiple selection |
+| `required` | `boolean` | - | Required field |
+| `disabled` | `boolean` | - | Disabled state |
+| `size` | `"xs" \| "sm" \| "lg" \| "xl"` | - | Size |
+| `inset` | `boolean` | - | Inset style |
+| `filterFn` | `(item: TItem, index: number) => boolean` | - | Item filter function |
+| `modal` | `() => JSX.Element` | - | Search modal factory (adds search icon action) |
+| `editModal` | `() => JSX.Element` | - | Edit modal factory (adds edit icon action) |
+| `children` | `(item: TItem, index: number, depth: number) => JSX.Element` | **(required)** | Item render function |
+
+### SharedDataSelectButton
+
+Wraps `DataSelectButton` with `SharedDataAccessor`. Auto-wires `load` from shared data items.
+
+```tsx
+import { SharedDataSelectButton } from "@simplysm/solid";
+
+const sharedData = useSharedData<MySharedData>();
+
+<SharedDataSelectButton
+  data={sharedData.users}
+  value={userId()}
+  onValueChange={setUserId}
+  modal={() => <UserSelectModal />}
+>
+  {(user) => <>{user.name}</>}
+</SharedDataSelectButton>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SharedDataAccessor<TItem>` | **(required)** | Shared data accessor |
+| `value` | `TKey \| TKey[]` | - | Selected key(s) |
+| `onValueChange` | `(value: TKey \| TKey[] \| undefined) => void` | - | Value change callback |
+| `multiple` | `boolean` | - | Multiple selection |
+| `required` | `boolean` | - | Required field |
+| `disabled` | `boolean` | - | Disabled state |
+| `size` | `"xs" \| "sm" \| "lg" \| "xl"` | - | Size |
+| `inset` | `boolean` | - | Inset style |
+| `modal` | `() => JSX.Element` | **(required)** | Selection modal factory |
+| `children` | `(item: TItem) => JSX.Element` | **(required)** | Item render function |
+
+### SharedDataSelectList
+
+Wraps `SelectList` with `SharedDataAccessor`. Optionally adds a management modal link in header.
+
+```tsx
+import { SharedDataSelectList } from "@simplysm/solid";
+
+const sharedData = useSharedData<MySharedData>();
+
+<SharedDataSelectList
+  data={sharedData.categories}
+  value={selectedCategory()}
+  onValueChange={setSelectedCategory}
+  header="Category"
+  modal={() => <CategoryManageModal />}
+>
+  <SelectList.ItemTemplate>
+    {(cat) => <>{cat.name}</>}
+  </SelectList.ItemTemplate>
+</SharedDataSelectList>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SharedDataAccessor<TItem>` | **(required)** | Shared data accessor |
+| `value` | `TItem` | - | Selected value |
+| `onValueChange` | `(value: TItem \| undefined) => void` | - | Value change callback |
+| `required` | `boolean` | - | Required field |
+| `disabled` | `boolean` | - | Disabled state |
+| `filterFn` | `(item: TItem, index: number) => boolean` | - | Item filter function |
+| `canChange` | `(item: TItem \| undefined) => boolean \| Promise<boolean>` | - | Change guard |
+| `pageSize` | `number` | - | Page size (auto-shows pagination) |
+| `header` | `string` | - | Header text |
+| `modal` | `() => JSX.Element` | - | Management modal factory (adds link icon in header) |
+| `children` | `JSX.Element` | **(required)** | Sub-component children (e.g., `SelectList.ItemTemplate`) |
+
+---
+
 ## Combobox
 
 Autocomplete component with async search and item selection support. Debouncing is built-in.

package/docs/hooks.md

@@ -269,6 +269,36 @@ const {
 
 ---
 
+## createSlotSignal
+
+Signal factory for slot registration pattern. Used internally by compound components (`SelectList`, etc.) to register child slot content.
+
+```tsx
+import { createSlotSignal, type SlotAccessor } from "@simplysm/solid";
+
+const [headerSlot, setHeader] = createSlotSignal();
+
+// Register slot content (typically from a sub-component)
+setHeader(() => <div>Header Content</div>);
+
+// Read slot content (in parent render)
+<Show when={headerSlot()}>
+  {headerSlot()!()}
+</Show>
+
+// Unregister
+setHeader(undefined);
+```
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `[0]` | `Accessor<SlotAccessor>` | Slot accessor (`(() => JSX.Element) \| undefined`) |
+| `[1]` | `(content: SlotAccessor) => void` | Slot setter |
+
+**`SlotAccessor` type:** `(() => JSX.Element) | undefined`
+
+---
+
 ## useRouterLink
 
 `@solidjs/router`-based navigation hook. Automatically handles Ctrl/Alt + click (new tab), Shift + click (new window), and regular click (SPA routing).

package/docs/providers.md

@@ -106,6 +106,9 @@ interface SharedDataDefinition<TData> {
   getKey: (item: TData) => string | number;                    // Primary key extractor
   orderBy: [(item: TData) => unknown, "asc" | "desc"][];       // Sort order
   filter?: unknown;                                             // Optional filter for change events
+  getSearchText?: (item: TData) => string;                      // Search text extractor (for SelectList/Select filtering)
+  getIsHidden?: (item: TData) => boolean;                       // Hidden item filter
+  getParentKey?: (item: TData) => string | number | undefined;  // Parent key extractor (for tree structure)
 }
 ```
 
@@ -116,6 +119,10 @@ interface SharedDataDefinition<TData> {
 | `items` | `Accessor<TData[]>` | Reactive item array |
 | `get` | `(key: string \| number \| undefined) => TData \| undefined` | Get item by key |
 | `emit` | `(changeKeys?: Array<string \| number>) => Promise<void>` | Emit change event to server (triggers refetch in all subscribers) |
+| `getKey` | `(item: TData) => string \| number` | Primary key extractor |
+| `getSearchText` | `((item: TData) => string) \| undefined` | Search text extractor |
+| `getIsHidden` | `((item: TData) => boolean) \| undefined` | Hidden item filter |
+| `getParentKey` | `((item: TData) => string \| number \| undefined) \| undefined` | Parent key extractor (tree structure) |
 
 **SharedDataValue extras:**
 

package/package.json

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

package/src/components/data/crud-detail/CrudDetail.tsx

@@ -200,6 +200,23 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             저장
           </Button>
         </Show>
+        <Show
+          when={
+            canEdit() && local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)
+          }
+        >
+          {(_) => (
+            <Button
+              size="lg"
+              variant="ghost"
+              theme="danger"
+              onClick={() => void handleToggleDelete()}
+            >
+              <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
+              {info()!.isDeleted ? "복구" : "삭제"}
+            </Button>
+          )}
+        </Show>
         <Button size="lg" variant="ghost" theme="info" onClick={() => void handleRefresh()}>
           <Icon icon={IconRefresh} class="mr-1" />
           새로고침
@@ -255,38 +272,46 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         busy={busyCount() > 0}
         class={clsx("flex h-full flex-col", local.class)}
       >
-        {/* Toolbar (page/control mode) */}
-        <Show when={!isModal && canEdit()}>
+        {/* Toolbar */}
+        <Show when={(!isModal && !topbarCtx) || defs().tools}>
           <div class="flex gap-2 p-2 pb-0">
-            <Show when={local.submit}>
-              <Button
-                size="sm"
-                theme="primary"
-                variant="ghost"
-                onClick={() => formRef?.requestSubmit()}
-              >
-                <Icon icon={IconDeviceFloppy} class="mr-1" />
-                저장
-              </Button>
-            </Show>
-            <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
-              <Icon icon={IconRefresh} class="mr-1" />
-              새로고침
-            </Button>
-            <Show
-              when={local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)}
-            >
-              {(_) => (
+            <Show when={!topbarCtx && !isModal}>
+              <Show when={canEdit() && local.submit}>
                 <Button
                   size="sm"
-                  theme="danger"
+                  theme="primary"
                   variant="ghost"
-                  onClick={() => void handleToggleDelete()}
+                  onClick={() => formRef?.requestSubmit()}
                 >
-                  <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                  {info()!.isDeleted ? "복구" : "삭제"}
+                  <Icon icon={IconDeviceFloppy} class="mr-1" />
+                  저장
                 </Button>
-              )}
+              </Show>
+              <Show
+                when={
+                  canEdit() &&
+                  local.toggleDelete &&
+                  info() &&
+                  !info()!.isNew &&
+                  (local.deletable ?? true)
+                }
+              >
+                {(_) => (
+                  <Button
+                    size="sm"
+                    theme="danger"
+                    variant="ghost"
+                    onClick={() => void handleToggleDelete()}
+                  >
+                    <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
+                    {info()!.isDeleted ? "복구" : "삭제"}
+                  </Button>
+                )}
+              </Show>
+              <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
+                <Icon icon={IconRefresh} class="mr-1" />
+                새로고침
+              </Button>
             </Show>
             <Show when={defs().tools}>{(toolsDef) => toolsDef().children}</Show>
           </div>