npm - @simplysm/solid - Versions diffs - 13.0.69 → 13.0.71 - Mend

@simplysm/solid 13.0.69 → 13.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (495) hide show

package/docs/styling.md DELETED Viewed

@@ -1,184 +0,0 @@
-# Styling & Tailwind Theme
-`@simplysm/solid` provides the following custom themes via Tailwind CSS preset.
-## Semantic Colors
-| Name | Base Color | Usage |
-|------|------------|-------|
-| `primary` | blue | Primary actions |
-| `info` | sky | Information |
-| `success` | green | Success |
-| `warning` | amber | Warning |
-| `danger` | red | Danger/error |
-| `base` | zinc | Neutral (backgrounds, borders, secondary text, etc.) |
-> Use `base-*` instead of directly using `zinc-*`.
-## Custom Sizes
-| Class | Description |
-|-------|-------------|
-| `h-field` / `size-field` | Default field height (based on `py-1`) |
-| `h-field-xs` / `size-field-xs` | Extra-small field height (based on `py-0`) |
-| `h-field-sm` / `size-field-sm` | Small field height (based on `py-0.5`) |
-| `h-field-lg` / `size-field-lg` | Large field height (based on `py-2`) |
-| `h-field-xl` / `size-field-xl` | Extra-large field height (based on `py-3`) |
-| `h-field-inset` / `size-field-inset` | Inset field height (excludes border) |
-| `h-field-inset-xs` / `size-field-inset-xs` | Extra-small inset field height |
-| `h-field-inset-sm` / `size-field-inset-sm` | Small inset field height |
-| `h-field-inset-lg` / `size-field-inset-lg` | Large inset field height |
-| `h-field-inset-xl` / `size-field-inset-xl` | Extra-large inset field height |
-## z-index Layers
-| Class | Value | Description |
-|-------|-------|-------------|
-| `z-sidebar` | 100 | Sidebar |
-| `z-sidebar-backdrop` | 99 | Sidebar backdrop |
-| `z-busy` | 500 | Loading overlay |
-| `z-dropdown` | 1000 | Dropdown popup |
-| `z-modal-backdrop` | 1999 | Modal backdrop |
-| `z-modal` | 2000 | Modal dialog |
-| `z-notification` | 3000 | Notification banner |
-## Dark Mode
-Uses Tailwind's `class` strategy. `ThemeProvider` automatically toggles the `dark` class on the `<html>` element.
-```html
-<!-- Light mode -->
-<html>
-<!-- Dark mode -->
-<html class="dark">
-```
-## Styling Patterns
-When using Tailwind classes in components, group them by semantic units with `clsx` and resolve conflicts with `twMerge`:
-```typescript
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-const baseClass = clsx(
-  "inline-flex items-center",
-  "px-2 py-1",
-  "rounded",
-  "border border-transparent",
-);
-const className = twMerge(baseClass, props.class);
-```
-## Exported Style Tokens
-`@simplysm/solid` exports TypeScript style constants and type definitions for use when building custom components that integrate with the library's design system.
-### tokens.styles
-```typescript
-import {
-  type ComponentSize,         // "xs" | "sm" | "lg" | "xl"
-  type ComponentSizeCompact,  // "sm" | "lg" (used by ColorPicker, Progress)
-  type SemanticTheme,         // "primary" | "info" | "success" | "warning" | "danger" | "base"
-  borderDefault,         // Tailwind classes for default border color
-  borderSubtle,          // Tailwind classes for subtle border color
-  bgSurface,             // Tailwind classes for surface background
-  textDefault,           // Tailwind classes for default text color
-  textMuted,             // Tailwind classes for muted text color
-  textPlaceholder,       // Tailwind classes for placeholder text color
-  disabledOpacity,       // Tailwind classes for disabled state opacity
-  paddingXs,             // Tailwind classes for extra-small padding (px-1 py-0)
-  paddingSm,             // Tailwind classes for small padding (px-1.5 py-0.5)
-  paddingLg,             // Tailwind classes for large padding (px-3 py-2)
-  paddingXl,             // Tailwind classes for extra-large padding (px-4 py-3)
-  themeTokens,           // Record<SemanticTheme, { solid, solidHover, light, text, hoverBg, border }>
-} from "@simplysm/solid";
-```
-### patterns.styles
-```typescript
-import {
-  iconButtonBase,         // Base classes for icon-only buttons
-  insetFocusOutline,      // Focus outline (focus-within) for inset fields
-  insetFocusOutlineSelf,  // Focus outline (focus) for inset trigger elements
-  insetBase,              // Base layout classes for inset mode
-  fieldSurface,           // Field surface (background, border, focus ring)
-  inputBase,              // Base classes for <input> elements
-} from "@simplysm/solid";
-```
-### Field.styles
-```typescript
-import {
-  type FieldSize,                    // "xs" | "sm" | "lg" | "xl"
-  fieldBaseClass,                    // Base wrapper classes (inline-flex, field surface, h-field)
-  fieldSizeClasses,                  // Size variant classes per FieldSize
-  fieldInsetClass,                   // Inset mode wrapper classes
-  fieldInsetHeightClass,             // Inset height class (h-field-inset, excludes border)
-  fieldInsetSizeHeightClasses,       // Inset height classes per size
-  fieldDisabledClass,                // Disabled state classes
-  textAreaBaseClass,                 // Base textarea wrapper classes
-  textAreaSizeClasses,               // Textarea size classes per FieldSize
-  fieldInputClass,                   // Base classes for field <input> element
-  fieldGapClasses,                   // Gap classes per size (with prefix icon)
-  getFieldWrapperClass,              // Utility to build field wrapper class string
-  getTextareaWrapperClass,           // Utility to build textarea wrapper class string
-} from "@simplysm/solid";
-```
-**`getFieldWrapperClass` options:**
-| Option | Type | Description |
-|--------|------|-------------|
-| `size` | `FieldSize` | Size variant |
-| `disabled` | `boolean` | Apply disabled styles |
-| `inset` | `boolean` | Apply inset styles |
-| `includeCustomClass` | `string \| false` | Additional CSS class (or `false` to skip) |
-| `extra` | `string \| false` | Extra classes inserted before size/disabled/inset |
-### Checkbox.styles
-```typescript
-import {
-  type CheckboxSize,               // "xs" | "sm" | "lg" | "xl"
-  checkboxBaseClass,               // Base wrapper classes
-  indicatorBaseClass,              // Base indicator (box) classes
-  checkedClass,                    // Checked state classes (primary color)
-  checkboxSizeClasses,             // Size variant classes
-  checkboxInsetClass,              // Inset mode classes
-  checkboxInsetSizeHeightClasses,  // Inset height classes per size (excludes border)
-  checkboxInlineClass,             // Inline display classes
-  checkboxDisabledClass,           // Disabled state classes
-} from "@simplysm/solid";
-```
-### DataSheet.styles
-```typescript
-import {
-  dataSheetContainerClass, tableClass, thClass, thContentClass, tdClass,
-  summaryThClass, insetContainerClass, insetTableClass, defaultContainerClass,
-  sortableThClass, sortIconClass, toolbarClass, fixedClass, fixedLastClass,
-  resizerClass, resizeIndicatorClass, featureThClass, featureTdClass,
-  expandIndentGuideClass, expandIndentGuideLineClass, expandToggleClass,
-  selectSingleClass, selectSingleSelectedClass, selectSingleUnselectedClass,
-  reorderHandleClass, reorderIndicatorClass, configButtonClass,
-  featureCellWrapperClass, featureCellBodyWrapperClass,
-  featureCellClickableClass, featureCellBodyClickableClass,
-  reorderCellWrapperClass,
-} from "@simplysm/solid";
-```
-### ListItem.styles
-```typescript
-import {
-  listItemBaseClass, listItemSizeClasses, listItemSelectedClass,
-  listItemDisabledClass, listItemReadonlyClass, listItemIndentGuideClass,
-  listItemContentClass, getListItemSelectedIconClass,
-} from "@simplysm/solid";
-```

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

@@ -1,385 +0,0 @@
-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 DELETED Viewed

@@ -1,23 +0,0 @@
-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;
-}