@simplysm/solid 13.0.69 → 13.0.70

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

@@ -15,12 +15,13 @@ import { DataSheet } from "../../data/sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { borderDefault } from "../../../styles/tokens.styles";
 import type { AppPerm } from "../../../helpers/createAppStructure";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 const titleCellClass = clsx("flex items-stretch", "px-2");
 const indentGuideWrapperClass = clsx("mr-1 flex w-3", "justify-center");
 const indentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault);
 
-// --- 타입 ---
+// --- Types ---
 
 export interface PermissionTableProps<TModule = string> {
   items?: AppPerm<TModule>[];
@@ -32,9 +33,9 @@ export interface PermissionTableProps<TModule = string> {
   style?: JSX.CSSProperties;
 }
 
-// --- 유틸리티 (테스트에서도 사용) ---
+// --- Utilities (also used in tests) ---
 
-/** 트리에서 모든 고유 perm 타입을 수집 */
+/** Collect all unique perm types from the tree */
 export function collectAllPerms<TModule>(items: AppPerm<TModule>[]): string[] {
   const set = new Set<string>();
   const walk = (list: AppPerm<TModule>[]) => {
@@ -49,7 +50,7 @@ export function collectAllPerms<TModule>(items: AppPerm<TModule>[]): string[] {
   return [...set];
 }
 
-/** modules 필터: 활성 모듈과 교차가 있는 아이템만 남김 */
+/** Filter by modules: keep only items that have intersection with active modules */
 export function filterByModules<TModule>(
   items: AppPerm<TModule>[],
   modules: TModule[] | undefined,
@@ -72,7 +73,7 @@ export function filterByModules<TModule>(
   return result;
 }
 
-/** 체크 변경 시 cascading 처리 */
+/** Handle cascading when checkbox changes */
 export function changePermCheck<TModule>(
   value: Record<string, boolean>,
   item: AppPerm<TModule>,
@@ -112,9 +113,9 @@ export function changePermCheck<TModule>(
   return result;
 }
 
-// --- 내부 헬퍼 ---
+// --- Internal Helpers ---
 
-/** 모듈 필터에 의해 보이는지 확인 (객체 참조 유지) */
+/** Check if item is visible by module filter (preserve object reference) */
 function isItemVisible<TModule>(item: AppPerm<TModule>, modules: TModule[] | undefined): boolean {
   if (!modules || modules.length === 0) return true;
   if (item.modules && !item.modules.some((m) => modules.includes(m))) return false;
@@ -124,7 +125,7 @@ function isItemVisible<TModule>(item: AppPerm<TModule>, modules: TModule[] | und
   return true;
 }
 
-/** 보이는 아이템에서만 고유 perm 타입 수집 */
+/** Collect unique perm types from visible items only */
 function collectVisiblePerms<TModule>(
   items: AppPerm<TModule>[],
   modules: TModule[] | undefined,
@@ -145,7 +146,7 @@ function collectVisiblePerms<TModule>(
   return [...set];
 }
 
-/** 그룹 노드의 체크 상태: 하위 중 하나라도 체크면 true */
+/** Get check state of group node: true if any child is checked */
 function isGroupPermChecked<TModule>(
   item: AppPerm<TModule>,
   perm: string,
@@ -160,7 +161,7 @@ function isGroupPermChecked<TModule>(
   return false;
 }
 
-/** 하위에 특정 perm이 하나라도 있으면 true */
+/** Check if specific perm exists in subtree */
 function hasPermInTree<TModule>(item: AppPerm<TModule>, perm: string): boolean {
   if (item.perms?.includes(perm)) return true;
   if (item.children) {
@@ -169,7 +170,7 @@ function hasPermInTree<TModule>(item: AppPerm<TModule>, perm: string): boolean {
   return false;
 }
 
-/** 기본 권한(perms[0])이 꺼져 있어서 비활성화해야 하는지 */
+/** Check if perm should be disabled (base perm is off) */
 function isPermDisabled<TModule>(
   item: AppPerm<TModule>,
   perm: string,
@@ -181,7 +182,7 @@ function isPermDisabled<TModule>(
   return !(value[item.href + "/" + basePerm] ?? false);
 }
 
-/** 확장 가능한 모든 아이템 수집 (객체 참조 유지) */
+/** Collect all expandable items (preserve object reference) */
 function collectExpandable<TModule>(
   items: AppPerm<TModule>[],
   getChildren: (item: AppPerm<TModule>) => AppPerm<TModule>[] | undefined,
@@ -202,7 +203,7 @@ function collectExpandable<TModule>(
   return result;
 }
 
-// --- 컴포넌트 ---
+// --- Component ---
 
 export const PermissionTable: Component<PermissionTableProps> = (props) => {
   const [local] = splitProps(props, [
@@ -215,14 +216,16 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     "style",
   ]);
 
-  // 보이는 최상위 아이템 (객체 참조 유지)
+  const i18n = useI18nOptional();
+
+  // Visible top-level items (preserve object reference)
   const visibleItems = createMemo(() => {
     const items = local.items ?? [];
     if (!local.modules || local.modules.length === 0) return items;
     return items.filter((item) => isItemVisible(item, local.modules));
   });
 
-  // Sheet의 getChildren — 모듈 필터 적용, 객체 참조 유지
+  // Sheet's getChildren — apply module filter, preserve object reference
   const getChildren = (item: AppPerm): AppPerm[] | undefined => {
     if (!item.children || item.children.length === 0) return undefined;
     const modules = local.modules;
@@ -231,17 +234,17 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     return filtered.length > 0 ? filtered : undefined;
   };
 
-  // 보이는 아이템의 모든 고유 perm 타입
+  // All unique perm types from visible items
   const allPerms = createMemo(() => collectVisiblePerms(local.items ?? [], local.modules));
 
   const currentValue = createMemo(() => local.value ?? {});
 
-  // 확장 상태 — 기본적으로 모두 펼침
+  // Expanded state — all expanded by default
   const getAllExpandable = () => collectExpandable(visibleItems(), getChildren);
 
   const [expandedItems, setExpandedItems] = createSignal<AppPerm[]>(getAllExpandable());
 
-  // 트리 구조 변경 시 모두 다시 펼침 (모듈 필터 변경 등)
+  // Re-expand all when tree structure changes (e.g., module filter changed)
   createEffect(
     on(
       visibleItems,
@@ -266,7 +269,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
         onExpandedItemsChange={setExpandedItems}
         hideConfigBar
       >
-        <DataSheet.Column key="title" header="권한 항목" sortable={false} resizable={false}>
+        <DataSheet.Column key="title" header={i18n?.t("permissionTable.permissionItem") ?? "Permission Item"} sortable={false} resizable={false}>
           {(ctx) => {
             const item = ctx.item as AppPerm;
             return (

package/src/components/features/shared-data/SharedDataSelect.tsx

@@ -4,72 +4,74 @@ import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDa
 import { Select, type SelectProps } from "../../form-control/select/Select";
 import { Icon } from "../../display/Icon";
 import { useDialog } from "../../disclosure/DialogContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { type ComponentSize } from "../../../styles/tokens.styles";
 
 /** SharedDataSelect Props */
 export interface SharedDataSelectProps<TItem> {
-  /** 공유 데이터 접근자 */
+  /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** 현재 선택된 값 */
+  /** Currently selected value */
   value?: unknown;
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: unknown) => void;
-  /** 다중 선택 모드 */
+  /** Multiple selection mode */
   multiple?: boolean;
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
-  /** 트리거 크기 */
+  /** Trigger size */
   size?: ComponentSize;
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 항목 필터 함수 */
+  /** Item filter function */
   filterFn?: (item: TItem, index: number) => boolean;
-  /** 선택 모달 컴포넌트 팩토리 */
+  /** Selection modal component factory */
   modal?: () => JSX.Element;
-  /** 편집 모달 컴포넌트 팩토리 */
+  /** Edit modal component factory */
   editModal?: () => JSX.Element;
 
-  /** 아이템 렌더링 함수 */
+  /** Item rendering function */
   children: (item: TItem, index: number, depth: number) => JSX.Element;
 }
 
 export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JSX.Element {
   const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "editModal", "children"]);
 
+  const i18n = useI18nOptional();
   const dialog = useDialog();
 
-  // filterFn 적용된 items
+  // Items with filterFn applied
   const items = createMemo(() => {
     const allItems = local.data.items();
     if (!local.filterFn) return allItems;
     return allItems.filter(local.filterFn);
   });
 
-  // modal 열기
+  // Open modal
   const handleOpenModal = async () => {
     if (!local.modal) return;
     await dialog.show(local.modal, {});
   };
 
-  // editModal 열기
+  // Open edit modal
   const handleOpenEditModal = async () => {
     if (!local.editModal) return;
     await dialog.show(local.editModal, {});
   };
 
-  // Select의 discriminated union (multiple: true | false?)과 TItem → unknown 변환을 위해 mergeProps + as 사용
-  // getter로 래핑하여 SolidJS 반응성 lint 규칙 충족
+  // Use mergeProps + as for Select's discriminated union (multiple: true | false?) and TItem → unknown conversion
+  // Wrap with getter to satisfy SolidJS reactivity lint rules
   const selectProps = mergeProps(rest, {
     get items() {
       return items();
     },
     get getChildren() {
       if (!local.data.getParentKey) return undefined;
-      // eslint-disable-next-line solid/reactivity -- 반환 함수는 Select 내부 JSX tracked scope에서 호출됨
+      // eslint-disable-next-line solid/reactivity -- return function is called within Select's internal JSX tracked scope
       return (item: TItem) => {
         const key = local.data.getKey(item);
         return items().filter((child) => local.data.getParentKey!(child) === key);
@@ -87,12 +89,12 @@ export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JS
     <Select {...selectProps}>
       <Select.ItemTemplate>{local.children}</Select.ItemTemplate>
       {local.modal && (
-        <Select.Action onClick={() => void handleOpenModal()} aria-label="검색">
+        <Select.Action onClick={() => void handleOpenModal()} aria-label={i18n?.t("sharedDataSelect.search") ?? "Search"}>
           <Icon icon={IconSearch} size="1em" />
         </Select.Action>
       )}
       {local.editModal && (
-        <Select.Action onClick={() => void handleOpenEditModal()} aria-label="편집">
+        <Select.Action onClick={() => void handleOpenEditModal()} aria-label={i18n?.t("sharedDataSelect.edit") ?? "Edit"}>
           <Icon icon={IconEdit} size="1em" />
         </Select.Action>
       )}

package/src/components/features/shared-data/SharedDataSelectButton.tsx

@@ -8,27 +8,27 @@ import { type ComponentSize } from "../../../styles/tokens.styles";
 
 /** SharedDataSelectButton Props */
 export interface SharedDataSelectButtonProps<TItem> {
-  /** 공유 데이터 접근자 */
+  /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** 현재 선택된 키 (단일 또는 다중) */
+  /** Currently selected key(s) (single or multiple) */
   value?: DataSelectButtonProps<TItem>["value"];
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: DataSelectButtonProps<TItem>["onValueChange"];
-  /** 다중 선택 모드 */
+  /** Multiple selection mode */
   multiple?: boolean;
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
-  /** 트리거 크기 */
+  /** Trigger size */
   size?: ComponentSize;
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 선택 모달 컴포넌트 팩토리 */
+  /** Selection modal component factory */
   modal: () => JSX.Element;
-  /** 아이템 렌더링 함수 */
+  /** Item rendering function */
   children: (item: TItem) => JSX.Element;
 }
 

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -1,85 +1,282 @@
-import { createMemo, type JSX, Show, splitProps } from "solid-js";
+import { createEffect, createMemo, createSignal, For, type JSX, Show, splitProps } from "solid-js";
 import { IconExternalLink } from "@tabler/icons-solidjs";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
-import { SelectList } from "../../form-control/select-list/SelectList";
+import { List } from "../../data/list/List";
+import { Pagination } from "../../data/Pagination";
+import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
+import { TextInput } from "../../form-control/field/TextInput";
 import { useDialog } from "../../disclosure/DialogContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { textMuted } from "../../../styles/tokens.styles";
+import { createSlotSignal } from "../../../hooks/createSlotSignal";
+import {
+  SharedDataSelectListContext,
+  type SharedDataSelectListContextValue,
+  SharedDataSelectListItemTemplate,
+  SharedDataSelectListFilter,
+} from "./SharedDataSelectListContext";
 
 /** SharedDataSelectList Props */
 export interface SharedDataSelectListProps<TItem> {
-  /** 공유 데이터 접근자 */
+  /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** 현재 선택된 값 */
+  /** Currently selected value */
   value?: TItem;
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: TItem | undefined) => void;
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
 
-  /** 항목 필터 함수 */
+  /** Item filter function */
   filterFn?: (item: TItem, index: number) => boolean;
-  /** 값 변경 가드 (false 반환 시 변경 차단) */
+  /** Value change guard (blocks change if returns false) */
   canChange?: (item: TItem | undefined) => boolean | Promise<boolean>;
-  /** 페이지 크기 (있으면 Pagination 자동 표시) */
+  /** Page size (shows Pagination if provided) */
   pageSize?: number;
-  /** 헤더 텍스트 */
+  /** Header text */
   header?: string;
-  /** 관리 모달 컴포넌트 팩토리 */
+  /** Management modal component factory */
   modal?: () => JSX.Element;
 
-  /** 서브 컴포넌트용 children (ItemTemplate 등) */
-  children: JSX.Element;
+  /** Compound sub-components (ItemTemplate, Filter) */
+  children?: JSX.Element;
+
+  /** Custom class */
+  class?: string;
+  /** Custom style */
+  style?: JSX.CSSProperties;
+}
+
+// ─── Styles ──────────────────────────────────────────────
+
+const containerClass = clsx("flex-col gap-1");
+
+const headerClass = clsx("flex items-center gap-1 px-2 py-1 text-sm font-semibold");
+
+// ─── Component ───────────────────────────────────────────
+
+export interface SharedDataSelectListComponent {
+  <TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element;
+  ItemTemplate: typeof SharedDataSelectListItemTemplate;
+  Filter: typeof SharedDataSelectListFilter;
 }
 
-export function SharedDataSelectList<TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element {
-  const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "header", "children"]);
+export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
+  props: SharedDataSelectListProps<TItem>,
+): JSX.Element => {
+  const [local, rest] = splitProps(props, [
+    "data",
+    "children",
+    "class",
+    "style",
+    "value",
+    "onValueChange",
+    "required",
+    "disabled",
+    "filterFn",
+    "canChange",
+    "pageSize",
+    "header",
+    "modal",
+  ]);
 
   const dialog = useDialog();
+  const i18n = useI18nOptional();
+
+  // ─── Slot signals ──────────────────────────────────────
+
+  const [filter, setFilter] = createSlotSignal();
+  const [itemTemplate, _setItemTemplate] = createSignal<
+    ((item: TItem, index: number) => JSX.Element) | undefined
+  >();
+  const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
+    _setItemTemplate(() => fn as ((item: TItem, index: number) => JSX.Element) | undefined);
+
+  const contextValue: SharedDataSelectListContextValue = {
+    setItemTemplate,
+    setFilter,
+  };
+
+  // ─── Search state ──────────────────────────────────────
+
+  const [searchText, setSearchText] = createSignal("");
+
+  // Reset search text when filter slot changes
+  createEffect(() => {
+    if (filter()) {
+      setSearchText("");
+    }
+  });
+
+  // ─── Pagination state ─────────────────────────────────
+
+  const [page, setPage] = createSignal(1);
+
+  // ─── Filtering pipeline ─────────────────────────────────
+
+  const filteredItems = createMemo(() => {
+    let result = local.data.items();
+
+    // getIsHidden filter
+    const isHidden = local.data.getIsHidden;
+    if (isHidden) {
+      result = result.filter((item) => !isHidden(item));
+    }
+
+    // Search filter (only when Filter compound is absent and getSearchText exists)
+    const getSearchText = local.data.getSearchText;
+    if (!filter() && getSearchText && searchText()) {
+      const terms = searchText().trim().split(" ").filter(Boolean);
+      if (terms.length > 0) {
+        result = result.filter((item) => {
+          const text = getSearchText(item).toLowerCase();
+          return terms.every((t) => text.includes(t.toLowerCase()));
+        });
+      }
+    }
+
+    // filterFn
+    if (local.filterFn) {
+      const fn = local.filterFn;
+      result = result.filter((item, index) => fn(item, index));
+    }
+
+    return result;
+  });
+
+  // ─── Page calculation ───────────────────────────────────────
 
-  // filterFn 적용된 items
-  const items = createMemo(() => {
-    const allItems = local.data.items();
-    if (!local.filterFn) return allItems;
-    return allItems.filter(local.filterFn);
+  const totalPageCount = createMemo(() => {
+    if (local.pageSize == null) return 1;
+    return Math.max(1, Math.ceil(filteredItems().length / local.pageSize));
   });
 
-  // modal 열기
+  // Reset page when filter changes
+  createEffect(() => {
+    void filteredItems();
+    setPage(1);
+  });
+
+  // Page slice
+  const displayItems = createMemo(() => {
+    const items = filteredItems();
+    if (local.pageSize == null) return items;
+
+    const start = (page() - 1) * local.pageSize;
+    const end = start + local.pageSize;
+    return items.slice(start, end);
+  });
+
+  // ─── Select/toggle handler ─────────────────────────────
+
+  const handleSelect = async (item: TItem | undefined) => {
+    if (local.disabled) return;
+
+    // canChange guard
+    if (local.canChange) {
+      const allowed = await local.canChange(item);
+      if (!allowed) return;
+    }
+
+    // Toggle: click already selected value to deselect (only if not required)
+    if (item !== undefined && item === local.value && !local.required) {
+      local.onValueChange?.(undefined);
+    } else {
+      local.onValueChange?.(item);
+    }
+  };
+
+  // ─── Open modal ────────────────────────────────────────
+
   const handleOpenModal = async () => {
     if (!local.modal) return;
     await dialog.show(local.modal, {});
   };
 
+  // ─── Render ────────────────────────────────────────────
+
   return (
-    <SelectList
-      {...rest}
-      items={items()}
-      getSearchText={local.data.getSearchText}
-      getIsHidden={local.data.getIsHidden}
-    >
-      {/* header + modal 아이콘을 SelectList.Header로 결합 */}
-      <Show when={local.header != null || local.modal != null}>
-        <SelectList.Header>
-          <div class="flex items-center gap-1">
-            <Show when={local.header != null}>
-              <span>{local.header}</span>
-            </Show>
+    <SharedDataSelectListContext.Provider value={contextValue}>
+      {/* Render children inside Provider so sub-components (ItemTemplate, Filter) can access context */}
+      {local.children}
+      <div
+        {...rest}
+        data-shared-data-select-list
+        class={twMerge(containerClass, local.class)}
+        style={local.style}
+      >
+        {/* Header */}
+        <Show when={local.header != null || local.modal != null}>
+          <div class={headerClass}>
+            <Show when={local.header != null}>{local.header}</Show>
             <Show when={local.modal != null}>
-              <button
-                type="button"
-                class="inline-flex items-center justify-center rounded p-0.5 text-base-500 hover:text-primary-500 dark:text-base-400 dark:hover:text-primary-400"
-                aria-label="관리"
-                onClick={() => void handleOpenModal()}
-              >
-                <Icon icon={IconExternalLink} size="1em" />
-              </button>
+              <Button size="sm" onClick={() => void handleOpenModal()}>
+                <Icon icon={IconExternalLink} />
+              </Button>
             </Show>
           </div>
-        </SelectList.Header>
-      </Show>
-      {local.children}
-    </SelectList>
+        </Show>
+
+        {/* Search input: when Filter compound is absent and getSearchText exists */}
+        <Show when={!filter() && local.data.getSearchText}>
+          <TextInput
+            value={searchText()}
+            onValueChange={setSearchText}
+            placeholder={i18n?.t("sharedDataSelectList.searchPlaceholder") ?? "Search..."}
+            size="sm"
+            inset
+          />
+        </Show>
+
+        {/* Custom Filter */}
+        <Show when={filter()}>{filter()!()}</Show>
+
+        {/* Pagination */}
+        <Show when={local.pageSize != null && totalPageCount() > 1}>
+          <Pagination
+            page={page()}
+            onPageChange={setPage}
+            totalPageCount={totalPageCount()}
+            size="sm"
+          />
+        </Show>
+
+        {/* List */}
+        <List inset>
+          {/* Unspecified item (when not required) */}
+          <Show when={!local.required}>
+            <List.Item
+              selected={local.value === undefined}
+              disabled={local.disabled}
+              onClick={() => handleSelect(undefined)}
+            >
+              <span class={textMuted}>Unspecified</span>
+            </List.Item>
+          </Show>
+
+          {/* Item list */}
+          <For each={displayItems()}>
+            {(item, index) => (
+              <List.Item
+                selected={item === local.value}
+                disabled={local.disabled}
+                onClick={() => handleSelect(item)}
+              >
+                {itemTemplate()?.(item, index())}
+              </List.Item>
+            )}
+          </For>
+        </List>
+      </div>
+    </SharedDataSelectListContext.Provider>
   );
-}
+}) as SharedDataSelectListComponent;
+
+SharedDataSelectList.ItemTemplate = SharedDataSelectListItemTemplate;
+SharedDataSelectList.Filter = SharedDataSelectListFilter;