@simplysm/solid 13.0.62 → 13.0.64

package/src/components/form-control/select-list/SelectList.tsx

@@ -0,0 +1,385 @@
+import {
+  children,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  onCleanup,
+  type ParentComponent,
+  Show,
+  splitProps,
+} from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { List } from "../../data/list/List";
+import { Pagination } from "../../data/Pagination";
+import { TextInput } from "../field/TextInput";
+import { createSlotSignal } from "../../../hooks/createSlotSignal";
+import { SelectListContext, type SelectListContextValue } from "./SelectListContext";
+import { useSelectListContext } from "./SelectListContext";
+import {
+  listItemBaseClass,
+  listItemSelectedClass,
+  listItemContentClass,
+  listItemDisabledClass,
+} from "../../data/list/ListItem.styles";
+import { ripple } from "../../../directives/ripple";
+import { textMuted } from "../../../styles/tokens.styles";
+
+void ripple;
+
+// ─── 서브 컴포넌트 ──────────────────────────────────────
+
+/**
+ * Header 슬롯 서브 컴포넌트
+ */
+const SelectListHeader: ParentComponent = (props) => {
+  const ctx = useSelectListContext();
+  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  ctx.setHeader(() => props.children);
+  onCleanup(() => ctx.setHeader(undefined));
+  return null;
+};
+
+/**
+ * Filter 슬롯 서브 컴포넌트
+ */
+const SelectListFilter: ParentComponent = (props) => {
+  const ctx = useSelectListContext();
+  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  ctx.setFilter(() => props.children);
+  onCleanup(() => ctx.setFilter(undefined));
+  return null;
+};
+
+/**
+ * ItemTemplate 서브 컴포넌트
+ */
+const SelectListItemTemplate = <TArgs extends unknown[]>(props: {
+  children: (...args: TArgs) => JSX.Element;
+}) => {
+  const ctx = useSelectListContext();
+  // eslint-disable-next-line solid/reactivity -- 렌더 함수를 signal에 저장, JSX tracked scope에서 호출됨
+  ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
+  onCleanup(() => ctx.setItemTemplate(undefined));
+  return null;
+};
+
+// ─── Props ──────────────────────────────────────────────
+
+export interface SelectListProps<TValue> {
+  /** 목록 아이템 배열 */
+  items: TValue[];
+
+  /** 현재 선택된 값 */
+  value?: TValue;
+
+  /** 값 변경 콜백 */
+  onValueChange?: (value: TValue | undefined) => void;
+
+  /** 필수 선택 여부 (true이면 미지정 항목 숨김) */
+  required?: boolean;
+
+  /** 비활성화 */
+  disabled?: boolean;
+
+  /** 검색 텍스트 추출 함수 (있으면 검색 TextInput 자동 표시) */
+  getSearchText?: (item: TValue) => string;
+
+  /** 숨김 여부 필터 */
+  getIsHidden?: (item: TValue) => boolean;
+
+  /** 커스텀 필터 함수 */
+  filterFn?: (item: TValue, index: number) => boolean;
+
+  /** 값 변경 가드 (false 반환 시 변경 차단) */
+  canChange?: (item: TValue | undefined) => boolean | Promise<boolean>;
+
+  /** 페이지 크기 (있으면 Pagination 자동 표시) */
+  pageSize?: number;
+
+  /** 헤더 텍스트 (Header 슬롯보다 우선순위 낮음) */
+  header?: string;
+
+  /** 커스텀 class */
+  class?: string;
+
+  /** 커스텀 style */
+  style?: JSX.CSSProperties;
+
+  /** 서브 컴포넌트용 children */
+  children?: JSX.Element;
+}
+
+// ─── 스타일 ──────────────────────────────────────────────
+
+const containerClass = clsx("inline-flex flex-col gap-1");
+
+const headerClass = clsx("px-2 py-1 text-sm font-semibold");
+
+// ─── 컴포넌트 ───────────────────────────────────────────
+
+interface SelectListComponent {
+  <TValue = unknown>(props: SelectListProps<TValue>): JSX.Element;
+  Header: typeof SelectListHeader;
+  Filter: typeof SelectListFilter;
+  ItemTemplate: typeof SelectListItemTemplate;
+}
+
+export const SelectList: SelectListComponent = <TValue,>(props: SelectListProps<TValue>) => {
+  const [local, rest] = splitProps(props as SelectListProps<TValue> & { children?: JSX.Element }, [
+    "children",
+    "class",
+    "style",
+    "items",
+    "value",
+    "onValueChange",
+    "required",
+    "disabled",
+    "getSearchText",
+    "getIsHidden",
+    "filterFn",
+    "canChange",
+    "pageSize",
+    "header",
+  ]);
+
+  // ─── 내부 상태 ─────────────────────────────────────────
+
+  const [searchText, setSearchText] = createSignal("");
+  const [page, setPage] = createSignal(1);
+
+  // ─── 슬롯 signals ────────────────────────────────────
+
+  const [headerSlot, setHeader] = createSlotSignal();
+  const [filterSlot, setFilter] = createSlotSignal();
+  const [itemTemplate, _setItemTemplate] = createSignal<
+    ((...args: unknown[]) => JSX.Element) | undefined
+  >();
+  const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
+    _setItemTemplate(() => fn);
+
+  // Context 값
+  const contextValue: SelectListContextValue = {
+    setHeader,
+    setFilter,
+    setItemTemplate,
+  };
+
+  // ─── items 변경 시 value 자동 재매칭 ──────────────────
+
+  createEffect(() => {
+    const currentItems = local.items;
+    const currentValue = local.value;
+    if (currentValue === undefined) return;
+
+    // 새 items에서 현재 value를 참조로 찾기
+    const found = currentItems.find((item) => item === currentValue);
+    if (found !== undefined) {
+      // 이미 같은 참조면 아무 것도 하지 않음
+      return;
+    }
+
+    // 참조가 없으면 현재 value를 유지 (호출하지 않음)
+  });
+
+  // ─── 필터링 파이프라인 ─────────────────────────────────
+
+  // getIsHidden 필터 → 검색 필터 → filterFn
+  const filteredItems = createMemo(() => {
+    let result = local.items;
+
+    // getIsHidden 필터
+    if (local.getIsHidden) {
+      const fn = local.getIsHidden;
+      result = result.filter((item) => !fn(item));
+    }
+
+    // 검색 필터
+    const search = searchText().trim().toLowerCase();
+    if (search && local.getSearchText) {
+      const getText = local.getSearchText;
+      result = result.filter((item) => getText(item).toLowerCase().includes(search));
+    }
+
+    // filterFn
+    if (local.filterFn) {
+      const fn = local.filterFn;
+      result = result.filter((item, index) => fn(item, index));
+    }
+
+    return result;
+  });
+
+  // 페이지 수 계산
+  const totalPageCount = createMemo(() => {
+    if (local.pageSize == null) return 1;
+    return Math.max(1, Math.ceil(filteredItems().length / local.pageSize));
+  });
+
+  // 검색이나 필터 변경 시 페이지 리셋
+  createEffect(() => {
+    // filteredItems에 의존
+    void filteredItems();
+    setPage(1);
+  });
+
+  // 페이지 슬라이스
+  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);
+  });
+
+  // ─── 선택/토글 핸들러 ─────────────────────────────────
+
+  const handleSelect = async (item: TValue | undefined) => {
+    if (local.disabled) return;
+
+    // canChange 가드
+    if (local.canChange) {
+      const allowed = await local.canChange(item);
+      if (!allowed) return;
+    }
+
+    // 토글: 이미 선택된 값을 다시 클릭하면 선택 해제 (required가 아닐 때만)
+    if (item !== undefined && item === local.value && !local.required) {
+      local.onValueChange?.(undefined);
+    } else {
+      local.onValueChange?.(item);
+    }
+  };
+
+  // ─── 아이템 렌더링 ────────────────────────────────────
+
+  const getItemTemplate = (): ((item: TValue, index: number) => JSX.Element) | undefined => {
+    return itemTemplate() as ((item: TValue, index: number) => JSX.Element) | undefined;
+  };
+
+  const renderItem = (item: TValue, index: number): JSX.Element => {
+    const tpl = getItemTemplate();
+    if (tpl) {
+      return tpl(item, index);
+    }
+    return <>{String(item)}</>;
+  };
+
+  // ─── 내부 렌더링 ──────────────────────────────────────
+
+  const SelectListInner: ParentComponent = (innerProps) => {
+    // children() resolve로 서브 컴포넌트 등록 트리거
+    const resolved = children(() => innerProps.children);
+    // resolved는 사용하지 않지만 서브 컴포넌트가 등록되도록 evaluate 필요
+    void resolved;
+
+    return (
+      <div
+        {...rest}
+        data-select-list
+        class={twMerge(containerClass, local.class)}
+        style={local.style}
+      >
+        {/* Header: 슬롯 우선, 없으면 props.header 텍스트 */}
+        <Show
+          when={headerSlot()}
+          fallback={
+            <Show when={local.header}>
+              <div class={headerClass}>{local.header}</div>
+            </Show>
+          }
+        >
+          {headerSlot()!()}
+        </Show>
+
+        {/* Filter: 슬롯 우선, 없으면 getSearchText 있을 때 TextInput */}
+        <Show
+          when={filterSlot()}
+          fallback={
+            <Show when={local.getSearchText}>
+              <TextInput
+                value={searchText()}
+                onValueChange={setSearchText}
+                placeholder="검색..."
+                inset
+                disabled={local.disabled}
+              />
+            </Show>
+          }
+        >
+          {filterSlot()!()}
+        </Show>
+
+        {/* Pagination */}
+        <Show when={local.pageSize != null && totalPageCount() > 1}>
+          <Pagination
+            page={page()}
+            onPageChange={setPage}
+            totalPageCount={totalPageCount()}
+            size="sm"
+          />
+        </Show>
+
+        {/* List */}
+        <List inset>
+          {/* 미지정 항목 (required가 아닐 때) */}
+          <Show when={!local.required}>
+            <button
+              type="button"
+              use:ripple={!local.disabled}
+              class={twMerge(
+                listItemBaseClass,
+                local.value === undefined && listItemSelectedClass,
+                local.disabled && listItemDisabledClass,
+              )}
+              data-list-item
+              role="treeitem"
+              aria-selected={local.value === undefined || undefined}
+              aria-disabled={local.disabled || undefined}
+              tabIndex={local.disabled ? -1 : 0}
+              onClick={() => handleSelect(undefined)}
+            >
+              <span class={clsx(listItemContentClass, textMuted)}>미지정</span>
+            </button>
+          </Show>
+
+          {/* 아이템 목록 */}
+          <For each={displayItems()}>
+            {(item, index) => (
+              <button
+                type="button"
+                use:ripple={!local.disabled}
+                class={twMerge(
+                  listItemBaseClass,
+                  item === local.value && listItemSelectedClass,
+                  local.disabled && listItemDisabledClass,
+                )}
+                data-list-item
+                role="treeitem"
+                aria-selected={item === local.value || undefined}
+                aria-disabled={local.disabled || undefined}
+                tabIndex={local.disabled ? -1 : 0}
+                onClick={() => handleSelect(item)}
+              >
+                <span class={listItemContentClass}>{renderItem(item, index())}</span>
+              </button>
+            )}
+          </For>
+        </List>
+      </div>
+    );
+  };
+
+  return (
+    <SelectListContext.Provider value={contextValue}>
+      <SelectListInner>{local.children}</SelectListInner>
+    </SelectListContext.Provider>
+  );
+};
+
+SelectList.Header = SelectListHeader;
+SelectList.Filter = SelectListFilter;
+SelectList.ItemTemplate = SelectListItemTemplate;

package/src/components/form-control/select-list/SelectListContext.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext, type JSX } from "solid-js";
+import type { SlotAccessor } from "../../../hooks/createSlotSignal";
+
+export interface SelectListContextValue {
+  /** Header 슬롯 등록 */
+  setHeader: (content: SlotAccessor) => void;
+
+  /** Filter 슬롯 등록 */
+  setFilter: (content: SlotAccessor) => void;
+
+  /** ItemTemplate 등록 */
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+}
+
+export const SelectListContext = createContext<SelectListContextValue>();
+
+export function useSelectListContext(): SelectListContextValue {
+  const context = useContext(SelectListContext);
+  if (!context) {
+    throw new Error("useSelectListContext는 SelectList 컴포넌트 내부에서만 사용할 수 있습니다");
+  }
+  return context;
+}

package/src/components/form-control/shared-data/SharedDataSelect.tsx

@@ -0,0 +1,101 @@
+import { createMemo, type JSX, mergeProps, splitProps } from "solid-js";
+import { IconEdit, IconSearch } from "@tabler/icons-solidjs";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import { Select, type SelectProps } from "../select/Select";
+import { Icon } from "../../display/Icon";
+import { useDialog } from "../../disclosure/DialogContext";
+import { type ComponentSize } from "../../../styles/tokens.styles";
+
+/** SharedDataSelect Props */
+export interface SharedDataSelectProps<TItem> {
+  /** 공유 데이터 접근자 */
+  data: SharedDataAccessor<TItem>;
+
+  /** 현재 선택된 값 */
+  value?: unknown;
+  /** 값 변경 콜백 */
+  onValueChange?: (value: unknown) => void;
+  /** 다중 선택 모드 */
+  multiple?: boolean;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+  /** 트리거 크기 */
+  size?: ComponentSize;
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 항목 필터 함수 */
+  filterFn?: (item: TItem, index: number) => boolean;
+  /** 선택 모달 컴포넌트 팩토리 */
+  modal?: () => JSX.Element;
+  /** 편집 모달 컴포넌트 팩토리 */
+  editModal?: () => JSX.Element;
+
+  /** 아이템 렌더링 함수 */
+  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 dialog = useDialog();
+
+  // filterFn 적용된 items
+  const items = createMemo(() => {
+    const allItems = local.data.items();
+    if (!local.filterFn) return allItems;
+    return allItems.filter(local.filterFn);
+  });
+
+  // modal 열기
+  const handleOpenModal = async () => {
+    if (!local.modal) return;
+    await dialog.show(local.modal, {});
+  };
+
+  // editModal 열기
+  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 규칙 충족
+  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에서 호출됨
+      return (item: TItem) => {
+        const key = local.data.getKey(item);
+        return items().filter((child) => local.data.getParentKey!(child) === key);
+      };
+    },
+    get getSearchText() {
+      return local.data.getSearchText;
+    },
+    get getIsHidden() {
+      return local.data.getIsHidden;
+    },
+  }) as unknown as SelectProps;
+
+  return (
+    <Select {...selectProps}>
+      <Select.ItemTemplate>{local.children}</Select.ItemTemplate>
+      {local.modal && (
+        <Select.Action onClick={() => void handleOpenModal()} aria-label="검색">
+          <Icon icon={IconSearch} size="1em" />
+        </Select.Action>
+      )}
+      {local.editModal && (
+        <Select.Action onClick={() => void handleOpenEditModal()} aria-label="편집">
+          <Icon icon={IconEdit} size="1em" />
+        </Select.Action>
+      )}
+    </Select>
+  );
+}

package/src/components/form-control/shared-data/SharedDataSelectButton.tsx

@@ -0,0 +1,47 @@
+import { type JSX, splitProps } from "solid-js";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import {
+  DataSelectButton,
+  type DataSelectButtonProps,
+} from "../data-select-button/DataSelectButton";
+import { type ComponentSize } from "../../../styles/tokens.styles";
+
+/** SharedDataSelectButton Props */
+export interface SharedDataSelectButtonProps<TItem> {
+  /** 공유 데이터 접근자 */
+  data: SharedDataAccessor<TItem>;
+
+  /** 현재 선택된 키 (단일 또는 다중) */
+  value?: DataSelectButtonProps<TItem>["value"];
+  /** 값 변경 콜백 */
+  onValueChange?: DataSelectButtonProps<TItem>["onValueChange"];
+  /** 다중 선택 모드 */
+  multiple?: boolean;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+  /** 트리거 크기 */
+  size?: ComponentSize;
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 선택 모달 컴포넌트 팩토리 */
+  modal: () => JSX.Element;
+  /** 아이템 렌더링 함수 */
+  children: (item: TItem) => JSX.Element;
+}
+
+export function SharedDataSelectButton<TItem>(
+  props: SharedDataSelectButtonProps<TItem>,
+): JSX.Element {
+  const [local, rest] = splitProps(props, ["data", "children"]);
+
+  return (
+    <DataSelectButton
+      load={(keys) => local.data.items().filter((item) => keys.includes(local.data.getKey(item)))}
+      renderItem={local.children}
+      {...rest}
+    />
+  );
+}

package/src/components/form-control/shared-data/SharedDataSelectList.tsx

@@ -0,0 +1,85 @@
+import { createMemo, type JSX, Show, splitProps } from "solid-js";
+import { IconExternalLink } from "@tabler/icons-solidjs";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import { SelectList } from "../select-list/SelectList";
+import { Icon } from "../../display/Icon";
+import { useDialog } from "../../disclosure/DialogContext";
+
+/** SharedDataSelectList Props */
+export interface SharedDataSelectListProps<TItem> {
+  /** 공유 데이터 접근자 */
+  data: SharedDataAccessor<TItem>;
+
+  /** 현재 선택된 값 */
+  value?: TItem;
+  /** 값 변경 콜백 */
+  onValueChange?: (value: TItem | undefined) => void;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+
+  /** 항목 필터 함수 */
+  filterFn?: (item: TItem, index: number) => boolean;
+  /** 값 변경 가드 (false 반환 시 변경 차단) */
+  canChange?: (item: TItem | undefined) => boolean | Promise<boolean>;
+  /** 페이지 크기 (있으면 Pagination 자동 표시) */
+  pageSize?: number;
+  /** 헤더 텍스트 */
+  header?: string;
+  /** 관리 모달 컴포넌트 팩토리 */
+  modal?: () => JSX.Element;
+
+  /** 서브 컴포넌트용 children (ItemTemplate 등) */
+  children: JSX.Element;
+}
+
+export function SharedDataSelectList<TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element {
+  const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "header", "children"]);
+
+  const dialog = useDialog();
+
+  // filterFn 적용된 items
+  const items = createMemo(() => {
+    const allItems = local.data.items();
+    if (!local.filterFn) return allItems;
+    return allItems.filter(local.filterFn);
+  });
+
+  // modal 열기
+  const handleOpenModal = async () => {
+    if (!local.modal) return;
+    await dialog.show(local.modal, {});
+  };
+
+  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>
+            <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>
+            </Show>
+          </div>
+        </SelectList.Header>
+      </Show>
+      {local.children}
+    </SelectList>
+  );
+}