@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,291 @@
+import type { JSX } from "solid-js";
+import { type Component, createEffect, createMemo, createSignal, For, on, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { DataSheet } from "../sheet/DataSheet";
+import { Checkbox } from "../../form-control/checkbox/Checkbox";
+import { borderDefault } from "../../../styles/tokens.styles";
+
+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);
+
+// --- 타입 ---
+
+export interface PermissionItem<TModule = string> {
+  title: string;
+  href?: string;
+  modules?: TModule[];
+  perms?: string[];
+  children?: PermissionItem<TModule>[];
+}
+
+export interface PermissionTableProps<TModule = string> {
+  items?: PermissionItem<TModule>[];
+  value?: Record<string, boolean>;
+  onValueChange?: (value: Record<string, boolean>) => void;
+  modules?: TModule[];
+  disabled?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+// --- 유틸리티 (테스트에서도 사용) ---
+
+/** 트리에서 모든 고유 perm 타입을 수집 */
+export function collectAllPerms<TModule>(items: PermissionItem<TModule>[]): string[] {
+  const set = new Set<string>();
+  const walk = (list: PermissionItem<TModule>[]) => {
+    for (const item of list) {
+      if (item.perms) {
+        for (const p of item.perms) set.add(p);
+      }
+      if (item.children) walk(item.children);
+    }
+  };
+  walk(items);
+  return [...set];
+}
+
+/** modules 필터: 활성 모듈과 교차가 있는 아이템만 남김 */
+export function filterByModules<TModule>(
+  items: PermissionItem<TModule>[],
+  modules: TModule[] | undefined,
+): PermissionItem<TModule>[] {
+  if (!modules || modules.length === 0) return items;
+
+  const result: PermissionItem<TModule>[] = [];
+
+  for (const item of items) {
+    if (item.modules && !item.modules.some((m) => modules.includes(m))) {
+      continue;
+    }
+    const children = item.children ? filterByModules(item.children, modules) : undefined;
+    if (item.children && (!children || children.length === 0) && !item.perms) {
+      continue;
+    }
+    result.push({ ...item, children });
+  }
+
+  return result;
+}
+
+/** 체크 변경 시 cascading 처리 */
+export function changePermCheck<TModule>(
+  value: Record<string, boolean>,
+  item: PermissionItem<TModule>,
+  perm: string,
+  checked: boolean,
+): Record<string, boolean> {
+  const result = { ...value };
+
+  const apply = (target: PermissionItem<TModule>) => {
+    if (target.perms && target.href != null && target.href !== "") {
+      const permIndex = target.perms.indexOf(perm);
+
+      if (permIndex >= 0) {
+        const basePerm = target.perms[0];
+        const baseOff = permIndex > 0 && checked && !result[target.href + "/" + basePerm];
+
+        if (!baseOff) {
+          result[target.href + "/" + perm] = checked;
+        }
+      }
+
+      if (perm === target.perms[0] && !checked) {
+        for (let i = 1; i < target.perms.length; i++) {
+          result[target.href + "/" + target.perms[i]] = false;
+        }
+      }
+    }
+
+    if (target.children) {
+      for (const child of target.children) {
+        apply(child);
+      }
+    }
+  };
+
+  apply(item);
+  return result;
+}
+
+// --- 내부 헬퍼 ---
+
+/** 모듈 필터에 의해 보이는지 확인 (객체 참조 유지) */
+function isItemVisible<TModule>(item: PermissionItem<TModule>, modules: TModule[] | undefined): boolean {
+  if (!modules || modules.length === 0) return true;
+  if (item.modules && !item.modules.some((m) => modules.includes(m))) return false;
+  if (!item.perms && item.children) {
+    return item.children.some((child) => isItemVisible(child, modules));
+  }
+  return true;
+}
+
+/** 보이는 아이템에서만 고유 perm 타입 수집 */
+function collectVisiblePerms<TModule>(items: PermissionItem<TModule>[], modules: TModule[] | undefined): string[] {
+  const set = new Set<string>();
+
+  function walk(list: PermissionItem<TModule>[]) {
+    for (const item of list) {
+      if (!isItemVisible(item, modules)) continue;
+      if (item.perms) {
+        for (const p of item.perms) set.add(p);
+      }
+      if (item.children) walk(item.children);
+    }
+  }
+
+  walk(items);
+  return [...set];
+}
+
+/** 그룹 노드의 체크 상태: 하위 중 하나라도 체크면 true */
+function isGroupPermChecked<TModule>(
+  item: PermissionItem<TModule>,
+  perm: string,
+  value: Record<string, boolean>,
+): boolean {
+  if (item.perms && item.href != null && item.href !== "") {
+    return value[item.href + "/" + perm] ?? false;
+  }
+  if (item.children) {
+    return item.children.some((child) => isGroupPermChecked(child, perm, value));
+  }
+  return false;
+}
+
+/** 하위에 특정 perm이 하나라도 있으면 true */
+function hasPermInTree<TModule>(item: PermissionItem<TModule>, perm: string): boolean {
+  if (item.perms?.includes(perm)) return true;
+  if (item.children) {
+    return item.children.some((child) => hasPermInTree(child, perm));
+  }
+  return false;
+}
+
+/** 기본 권한(perms[0])이 꺼져 있어서 비활성화해야 하는지 */
+function isPermDisabled<TModule>(item: PermissionItem<TModule>, perm: string, value: Record<string, boolean>): boolean {
+  if (!item.perms || item.href == null || item.href === "") return false;
+  const basePerm = item.perms[0];
+  if (perm === basePerm) return false;
+  return !(value[item.href + "/" + basePerm] ?? false);
+}
+
+/** 확장 가능한 모든 아이템 수집 (객체 참조 유지) */
+function collectExpandable<TModule>(
+  items: PermissionItem<TModule>[],
+  getChildren: (item: PermissionItem<TModule>) => PermissionItem<TModule>[] | undefined,
+): PermissionItem<TModule>[] {
+  const result: PermissionItem<TModule>[] = [];
+
+  function walk(list: PermissionItem<TModule>[]) {
+    for (const item of list) {
+      const children = getChildren(item);
+      if (children && children.length > 0) {
+        result.push(item);
+        walk(children);
+      }
+    }
+  }
+
+  walk(items);
+  return result;
+}
+
+// --- 컴포넌트 ---
+
+export const PermissionTable: Component<PermissionTableProps> = (props) => {
+  const [local] = splitProps(props, ["items", "value", "onValueChange", "modules", "disabled", "class", "style"]);
+
+  // 보이는 최상위 아이템 (객체 참조 유지)
+  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 — 모듈 필터 적용, 객체 참조 유지
+  const getChildren = (item: PermissionItem): PermissionItem[] | undefined => {
+    if (!item.children || item.children.length === 0) return undefined;
+    const modules = local.modules;
+    if (!modules || modules.length === 0) return item.children;
+    const filtered = item.children.filter((child) => isItemVisible(child, modules));
+    return filtered.length > 0 ? filtered : undefined;
+  };
+
+  // 보이는 아이템의 모든 고유 perm 타입
+  const allPerms = createMemo(() => collectVisiblePerms(local.items ?? [], local.modules));
+
+  const currentValue = createMemo(() => local.value ?? {});
+
+  // 확장 상태 — 기본적으로 모두 펼침
+  const getAllExpandable = () => collectExpandable(visibleItems(), getChildren);
+
+  const [expandedItems, setExpandedItems] = createSignal<PermissionItem[]>(getAllExpandable());
+
+  // 트리 구조 변경 시 모두 다시 펼침 (모듈 필터 변경 등)
+  createEffect(
+    on(
+      visibleItems,
+      () => {
+        setExpandedItems(getAllExpandable());
+      },
+      { defer: true },
+    ),
+  );
+
+  const handlePermChange = (item: PermissionItem, perm: string, checked: boolean) => {
+    const newValue = changePermCheck(currentValue(), item, perm, checked);
+    local.onValueChange?.(newValue);
+  };
+
+  return (
+    <div data-permission-table class={twMerge(local.class)} style={local.style}>
+      <DataSheet
+        items={visibleItems()}
+        getChildren={getChildren}
+        expandedItems={expandedItems()}
+        onExpandedItemsChange={setExpandedItems}
+        hideConfigBar
+      >
+        <DataSheet.Column key="title" header="권한 항목" sortable={false} resizable={false}>
+          {(ctx) => {
+            const item = ctx.item as PermissionItem;
+            return (
+              <div class={titleCellClass}>
+                <For each={Array.from({ length: ctx.depth })}>
+                  {() => (
+                    <div class={indentGuideWrapperClass}>
+                      <div class={indentGuideLineClass} />
+                    </div>
+                  )}
+                </For>
+                <span class="py-1">{item.title}</span>
+              </div>
+            );
+          }}
+        </DataSheet.Column>
+        <For each={allPerms()}>
+          {(perm) => (
+            <DataSheet.Column key={`perm-${perm}`} header={perm} sortable={false} resizable={false}>
+              {(ctx) => {
+                const item = ctx.item as PermissionItem;
+                return (
+                  <Show when={hasPermInTree(item, perm)}>
+                    <Checkbox
+                      value={isGroupPermChecked(item, perm, currentValue())}
+                      onValueChange={(checked) => handlePermChange(item, perm, checked)}
+                      disabled={local.disabled || isPermDisabled(item, perm, currentValue())}
+                      inset
+                    />
+                  </Show>
+                );
+              }}
+            </DataSheet.Column>
+          )}
+        </For>
+      </DataSheet>
+    </div>
+  );
+};

package/src/components/data/sheet/DataSheet.css

@@ -0,0 +1,26 @@
+[data-sheet] tbody tr:hover > td {
+  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.03);
+}
+
+.dark [data-sheet] tbody tr:hover > td {
+  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04);
+}
+
+/* 선택 행 시각 효과 — 호버보다 약간 더 진하게 */
+[data-sheet] tbody tr[data-selected] > td {
+  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
+}
+
+.dark [data-sheet] tbody tr[data-selected] > td {
+  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.06);
+}
+
+/* 드래그 중인 행 */
+[data-sheet] tbody tr[data-dragging] > td {
+  opacity: 0.5;
+}
+
+/* inside 드롭 대상 행 */
+[data-sheet] tbody tr[data-drag-over="inside"] > td {
+  box-shadow: inset 0 0 0 9999px rgba(59, 130, 246, 0.1);
+}

package/src/components/data/sheet/DataSheet.styles.ts

@@ -0,0 +1,161 @@
+import clsx from "clsx";
+import { borderDefault, borderSubtle } from "../../../styles/tokens.styles";
+
+export const dataSheetContainerClass = clsx("relative", "bg-white dark:bg-base-950", "overflow-auto");
+
+export const tableClass = clsx("border-separate border-spacing-0", "w-max");
+
+export const thClass = clsx(
+  "relative",
+  "bg-base-100 dark:bg-base-900",
+  "border-b border-r border-base-300 dark:border-base-800",
+  "overflow-hidden whitespace-nowrap",
+  "p-0",
+  "text-left font-semibold",
+  "align-middle",
+);
+
+export const thContentClass = clsx("px-2 py-1");
+
+export const tdClass = clsx(
+  "bg-white dark:bg-base-950",
+  "border-b border-r",
+  borderSubtle,
+  "truncate",
+  "p-0",
+  "align-top",
+);
+
+export const summaryThClass = clsx("bg-warning-50 dark:bg-warning-900/20");
+
+export const insetContainerClass = clsx("border-none", "rounded-none");
+
+export const insetTableClass = clsx(
+  "w-full",
+  "[&_th:last-child]:border-r-0",
+  "[&_td:last-child]:border-r-0",
+  "[&_tbody>tr:last-child>td]:border-b-0",
+);
+
+export const defaultContainerClass = clsx("border", borderDefault, "rounded");
+
+// 정렬 가능 헤더 — 클릭 가능 표시
+export const sortableThClass = clsx("cursor-pointer", "hover:underline");
+
+// 정렬 아이콘 영역
+export const sortIconClass = clsx("px-1 py-0.5", "bg-base-100 dark:bg-base-900");
+
+// 상단 툴바 (설정 버튼 + 페이지네이션)
+export const toolbarClass = clsx(
+  "flex items-center gap-2",
+  "px-2 py-1",
+  "bg-base-50 dark:bg-base-900",
+  "border-b",
+  borderDefault,
+);
+
+// 고정 컬럼 기본 (sticky)
+export const fixedClass = "sticky";
+
+// 고정/비고정 경계 시각 효과 — 고정 컬럼의 마지막 셀에 적용
+export const fixedLastClass = clsx("border-r-2 border-r-base-300", "dark:border-r-base-700");
+
+// 리사이저 핸들 (헤더 셀 우측 드래그 영역)
+export const resizerClass = clsx(
+  "absolute inset-y-0 right-0",
+  "w-1",
+  "cursor-ew-resize",
+  "touch-none",
+  "hover:bg-primary-300 dark:hover:bg-primary-600",
+);
+
+// 드래그 중 세로 점선 인디케이터
+export const resizeIndicatorClass = clsx(
+  "absolute inset-y-0",
+  "w-0 border-l-2 border-dashed border-primary-500",
+  "pointer-events-none",
+  "z-[7]",
+);
+
+// 기능 컬럼 기본 (확장/선택 컬럼 공통)
+export const featureThClass = clsx(
+  "bg-base-100 dark:bg-base-800",
+  "border-b border-r",
+  borderDefault,
+  "p-0",
+  "align-middle",
+);
+
+export const featureTdClass = clsx(
+  "bg-base-50 dark:bg-base-900",
+  "border-b border-r",
+  borderSubtle,
+  "p-0",
+  "align-middle",
+  "h-px",
+);
+
+// 확장 컬럼 깊이 가이드 — 래퍼 (토글 아이콘과 같은 너비, 세로선 중앙 정렬)
+export const expandIndentGuideClass = clsx("mr-0.5 w-3 self-stretch", "flex justify-end");
+
+// 확장 컬럼 깊이 가이드 — 세로선
+export const expandIndentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault);
+
+// 확장 토글 버튼
+export const expandToggleClass = clsx(
+  "flex items-center justify-center",
+  "size-6",
+  "cursor-pointer",
+  "rounded",
+  "hover:bg-base-200 dark:hover:bg-base-600",
+);
+
+// 선택 컬럼 — single 모드 아이콘 래퍼
+export const selectSingleClass = clsx("flex items-center justify-center", "size-6", "cursor-pointer", "rounded");
+
+// single 모드 — 선택됨
+export const selectSingleSelectedClass = clsx("text-primary-500", "dark:text-primary-400");
+
+// single 모드 — 미선택
+export const selectSingleUnselectedClass = clsx("text-base-300", "dark:text-base-600");
+
+// 드래그 핸들 기능 컬럼
+export const reorderHandleClass = clsx(
+  "flex items-center justify-center",
+  "size-6",
+  "cursor-grab",
+  "text-base-400 dark:text-base-500",
+  "hover:text-base-600 dark:hover:text-base-400",
+);
+
+// 드래그 인디케이터 (before/after 수평선)
+export const reorderIndicatorClass = clsx(
+  "absolute inset-x-0",
+  "h-0 border-t-2 border-primary-500",
+  "pointer-events-none",
+  "z-[7]",
+);
+
+// 기능 컬럼 헤더 내부 래퍼 (확장/선택 등)
+export const featureCellWrapperClass = clsx("flex items-center", "px-1");
+
+// 기능 컬럼 바디 내부 래퍼 (확장/선택/재정렬 등 — 전체 높이)
+export const featureCellBodyWrapperClass = clsx("flex h-full items-center", "px-1");
+
+// 기능 컬럼 헤더 클릭 가능 래퍼 (전체 선택 등)
+export const featureCellClickableClass = clsx("flex cursor-pointer items-center justify-center", "px-1");
+
+// 기능 컬럼 바디 클릭 가능 래퍼 (선택/재정렬 등 — 전체 높이)
+export const featureCellBodyClickableClass = clsx("flex h-full cursor-pointer items-center justify-center", "px-1");
+
+// 재정렬 핸들 래퍼 (touch-none 추가)
+export const reorderCellWrapperClass = clsx("flex h-full touch-none items-center justify-center", "px-1");
+
+// 설정 버튼
+export const configButtonClass = clsx(
+  "flex items-center justify-center",
+  "size-6 rounded",
+  "text-base-500 dark:text-base-400",
+  "hover:bg-base-200 dark:hover:bg-base-700",
+  "cursor-pointer",
+);