@simplysm/solid 13.0.58 → 13.0.60

package/src/components/form-control/color-picker/ColorPicker.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { Invalid } from "../Invalid";
-import { type ComponentSizeCompact } from "../../../styles/tokens.styles";
+import { type ComponentSize } from "../../../styles/tokens.styles";
 
 // 기본 스타일
 const baseClass = clsx(
@@ -20,13 +20,15 @@ const baseClass = clsx(
 );
 
 // 사이즈별 스타일
-const sizeClasses: Record<ComponentSizeCompact, string> = {
+const sizeClasses: Record<ComponentSize, string> = {
+  xs: "size-field-xs",
   sm: "size-field-sm",
   lg: "size-field-lg",
+  xl: "size-field-xl",
 };
 
 // disabled 스타일 - 대각선 줄무늬로 표시
-// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset은 Chrome 87+에서만 지원
+// eslint-disable-next-line tailwindcss/enforces-shorthand
 const disabledClass = clsx(
   "cursor-default",
   "relative",
@@ -39,7 +41,7 @@ export interface ColorPickerProps {
   value?: string;
 
   /** 값 변경 콜백 */
-  onValueChange?: (value: string) => void;
+  onValueChange?: (value: string | undefined) => void;
 
   /** 타이틀 (툴팁) */
   title?: string;
@@ -48,7 +50,10 @@ export interface ColorPickerProps {
   disabled?: boolean;
 
   /** 사이즈 */
-  size?: ComponentSizeCompact;
+  size?: ComponentSize;
+
+  /** inset 모드 (DataSheet 셀 내부 등) */
+  inset?: boolean;
 
   /** 필수 입력 여부 */
   required?: boolean;
@@ -81,6 +86,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     "title",
     "disabled",
     "size",
+    "inset",
     "required",
     "validate",
     "touchMode",
@@ -89,7 +95,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
   ]);
 
   const [value, setValue] = createControllableSignal({
-    value: () => local.value ?? "#000000",
+    value: () => local.value,
     onChange: () => local.onValueChange,
   });
 
@@ -106,20 +112,24 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     );
 
   const errorMsg = createMemo(() => {
-    const v = props.value;
+    const v = value();
     if (local.required && (v === undefined || v === "")) return "필수 입력 항목입니다";
     return local.validate?.(v);
   });
 
   return (
-    <Invalid variant="border" message={errorMsg()} touchMode={local.touchMode}>
+    <Invalid
+      variant={local.inset ? "dot" : "border"}
+      message={errorMsg()}
+      touchMode={local.touchMode}
+    >
       <input
         {...rest}
         data-color-picker
         type="color"
         class={getClassName()}
         style={local.style}
-        value={value()}
+        value={value() ?? "#000000"}
         title={local.title}
         disabled={local.disabled}
         onInput={handleInput}

package/src/components/form-control/field/NumberInput.tsx

@@ -13,6 +13,7 @@ import {
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
 import {
   type FieldSize,
   fieldInputClass,
@@ -30,8 +31,6 @@ const numberInputClass = clsx(
   "[&::-webkit-inner-spin-button]:appearance-none",
 );
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 interface NumberInputSlotsContextValue {
   setPrefix: (content: SlotAccessor) => void;
 }
@@ -235,8 +234,7 @@ export const NumberInput: NumberInputComponent = (props) => {
     onChange: () => local.onValueChange,
   });
 
-  const [prefix, _setPrefix] = createSignal<SlotAccessor>();
-  const setPrefix = (content: SlotAccessor) => _setPrefix(() => content);
+  const [prefix, setPrefix] = createSlotSignal();
   const prefixEl = () => prefix() !== undefined;
 
   // 외부 값 변경 시 입력 문자열 동기화

package/src/components/form-control/field/TextInput.tsx

@@ -3,7 +3,6 @@ import {
   createContext,
   createEffect,
   createMemo,
-  createSignal,
   type JSX,
   onCleanup,
   type ParentComponent,
@@ -13,6 +12,7 @@ import {
 } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
   fieldGapClasses,
@@ -23,8 +23,6 @@ import {
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 interface TextInputSlotsContextValue {
   setPrefix: (content: SlotAccessor) => void;
 }
@@ -244,8 +242,7 @@ const TextInputInner = (props: TextInputProps) => {
   };
 
   // Prefix 슬롯 Context 등록
-  const [prefix, _setPrefix] = createSignal<SlotAccessor>();
-  const setPrefix = (content: SlotAccessor) => _setPrefix(() => content);
+  const [prefix, setPrefix] = createSlotSignal();
   const prefixEl = () => prefix() !== undefined;
 
   // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)

package/src/components/form-control/select/Select.tsx

@@ -21,13 +21,12 @@ import { SelectItem } from "./SelectItem";
 import { ripple } from "../../../directives/ripple";
 import { borderDefault, type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
 
 void ripple;
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 // Select 전용 스타일
 const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
@@ -272,10 +271,8 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   };
 
   // 슬롯 signals
-  const [header, _setHeader] = createSignal<SlotAccessor>();
-  const setHeader = (content: SlotAccessor) => _setHeader(() => content);
-  const [action, _setAction] = createSignal<SlotAccessor>();
-  const setAction = (content: SlotAccessor) => _setAction(() => content);
+  const [header, setHeader] = createSlotSignal();
+  const [action, setAction] = createSlotSignal();
   const [itemTemplate, _setItemTemplate] = createSignal<
     ((...args: unknown[]) => JSX.Element) | undefined
   >();

package/src/components/form-control/select/SelectContext.ts

@@ -1,6 +1,5 @@
 import { createContext, useContext, type Accessor, type JSX } from "solid-js";
-
-type SlotAccessor = (() => JSX.Element) | undefined;
+import type { SlotAccessor } from "../../../hooks/createSlotSignal";
 
 export interface SelectContextValue<TValue = unknown> {
   /** 다중 선택 모드 여부 */

package/src/components/form-control/select/SelectItem.tsx

@@ -1,6 +1,5 @@
 import {
   createContext,
-  createSignal,
   type JSX,
   onCleanup,
   type ParentComponent,
@@ -13,6 +12,7 @@ import { IconCheck } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
 import { useSelectContext } from "./SelectContext";
 import { ripple } from "../../../directives/ripple";
+import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
 import { List } from "../../data/list/List";
 import { Collapse } from "../../disclosure/Collapse";
 import {
@@ -26,8 +26,6 @@ import {
 
 void ripple;
 
-type SlotAccessor = (() => JSX.Element) | undefined;
-
 interface SelectItemSlotsContextValue {
   setChildren: (content: SlotAccessor) => void;
 }
@@ -83,8 +81,7 @@ export const SelectItem: SelectItemComponent = <T,>(
 
   const context = useSelectContext<T>();
 
-  const [childrenSlot, _setChildrenSlot] = createSignal<SlotAccessor>();
-  const setChildrenSlot = (content: SlotAccessor) => _setChildrenSlot(() => content);
+  const [childrenSlot, setChildrenSlot] = createSlotSignal();
   const hasChildren = () => childrenSlot() !== undefined;
   const isSelected = () => context.isSelected(local.value);
   const useRipple = () => !local.disabled;

package/src/helpers/createAppStructure.ts

@@ -1,5 +1,5 @@
-import type { Component } from "solid-js";
-import { type Accessor, createMemo, createRoot } from "solid-js";
+import type { Component, ParentComponent } from "solid-js";
+import { type Accessor, createContext, createMemo, createRoot, useContext } from "solid-js";
 import type { IconProps } from "@tabler/icons-solidjs";
 
 // ── 입력 타입 ──
@@ -412,10 +412,7 @@ function findItemChainByCodes<TModule>(
 
 // ── 메인 함수 ──
 
-export function createAppStructure<
-  TModule,
-  const TItems extends AppStructureItem<TModule>[],
->(opts: {
+function buildAppStructure<TModule, const TItems extends AppStructureItem<TModule>[]>(opts: {
   items: TItems;
   usableModules?: Accessor<TModule[] | undefined>;
   permRecord?: Accessor<Record<string, boolean> | undefined>;
@@ -481,3 +478,36 @@ export function createAppStructure<
     },
   };
 }
+
+export function createAppStructure<TModule, const TItems extends AppStructureItem<TModule>[]>(
+  getOpts: () => {
+    items: TItems;
+    usableModules?: Accessor<TModule[] | undefined>;
+    permRecord?: Accessor<Record<string, boolean> | undefined>;
+  },
+): {
+  AppStructureProvider: ParentComponent;
+  useAppStructure: () => AppStructure<TModule> & { perms: InferPerms<TItems> };
+} {
+  type TRet = AppStructure<TModule> & { perms: InferPerms<TItems> };
+
+  const Ctx = createContext<TRet>();
+
+  const AppStructureProvider: ParentComponent = (props) => {
+    const structure = buildAppStructure(getOpts());
+    return Ctx.Provider({
+      value: structure as TRet,
+      get children() {
+        return props.children;
+      },
+    });
+  };
+
+  const useAppStructure = (): TRet => {
+    const ctx = useContext(Ctx);
+    if (!ctx) throw new Error("AppStructureProvider가 필요합니다.");
+    return ctx;
+  };
+
+  return { AppStructureProvider, useAppStructure };
+}

package/src/hooks/createPointerDrag.ts

@@ -4,7 +4,7 @@
  * @param target - Element to capture pointer on
  * @param pointerId - Pointer ID from the initiating PointerEvent
  * @param options.onMove - Called on each pointermove
- * @param options.onEnd - Called on pointerup (after listener cleanup)
+ * @param options.onEnd - Called on pointerup or pointercancel (after listener cleanup)
  */
 export function createPointerDrag(
   target: HTMLElement,
@@ -16,13 +16,16 @@ export function createPointerDrag(
 ): void {
   target.setPointerCapture(pointerId);
 
-  const onPointerMove = (e: PointerEvent) => options.onMove(e);
-  const onPointerUp = (e: PointerEvent) => {
+  const cleanup = (e: PointerEvent) => {
     target.removeEventListener("pointermove", onPointerMove);
-    target.removeEventListener("pointerup", onPointerUp);
+    target.removeEventListener("pointerup", cleanup);
+    target.removeEventListener("pointercancel", cleanup);
     options.onEnd(e);
   };
 
+  const onPointerMove = (e: PointerEvent) => options.onMove(e);
+
   target.addEventListener("pointermove", onPointerMove);
-  target.addEventListener("pointerup", onPointerUp);
+  target.addEventListener("pointerup", cleanup);
+  target.addEventListener("pointercancel", cleanup);
 }

package/src/hooks/createSlotSignal.ts

@@ -0,0 +1,14 @@
+import { createSignal, type Accessor, type JSX } from "solid-js";
+
+export type SlotAccessor = (() => JSX.Element) | undefined;
+
+/**
+ * 슬롯 등록용 signal 생성
+ *
+ * @returns [accessor, setter] — setter는 함수를 값으로 저장하기 위해 래핑 처리
+ */
+export function createSlotSignal(): [Accessor<SlotAccessor>, (content: SlotAccessor) => void] {
+  const [slot, _setSlot] = createSignal<SlotAccessor>();
+  const setSlot = (content: SlotAccessor) => _setSlot(() => content);
+  return [slot, setSlot];
+}

package/src/index.ts

@@ -115,37 +115,22 @@ export * from "./components/feedback/Progress";
 //#region ========== Providers ==========
 
 // Config
-export { type AppConfig, ConfigContext, useConfig } from "./providers/ConfigContext";
+export * from "./providers/ConfigContext";
 
 // SyncStorage
-export {
-  type StorageAdapter,
-  type SyncStorageContextValue,
-  SyncStorageContext,
-  useSyncStorage,
-} from "./providers/SyncStorageContext";
+export * from "./providers/SyncStorageContext";
 
 // Logger
-export { type LogAdapter, type LoggerContextValue } from "./providers/LoggerContext";
+export * from "./providers/LoggerContext";
 
 // Theme
-export { useTheme } from "./providers/ThemeContext";
-export type { ThemeMode, ResolvedTheme } from "./providers/ThemeContext";
+export * from "./providers/ThemeContext";
 
 // ServiceClient
-export {
-  type ServiceClientContextValue,
-  ServiceClientContext,
-  useServiceClient,
-} from "./providers/ServiceClientContext";
+export * from "./providers/ServiceClientContext";
 
 // SharedData
-export type {
-  SharedDataDefinition,
-  SharedDataAccessor,
-  SharedDataValue,
-} from "./providers/shared-data/SharedDataContext";
-export { SharedDataContext, useSharedData } from "./providers/shared-data/SharedDataContext";
+export * from "./providers/shared-data/SharedDataContext";
 export * from "./providers/shared-data/SharedDataChangeEvent";
 
 // SystemProvider
@@ -158,11 +143,12 @@ export * from "./providers/SystemProvider";
 export * from "./hooks/useLocalStorage";
 export * from "./hooks/useSyncConfig";
 export * from "./hooks/useLogger";
-export { createControllableSignal } from "./hooks/createControllableSignal";
-export { createControllableStore } from "./hooks/createControllableStore";
-export { createIMEHandler } from "./hooks/createIMEHandler";
-export { createMountTransition } from "./hooks/createMountTransition";
-export { useRouterLink } from "./hooks/useRouterLink";
+export * from "./hooks/createControllableSignal";
+export * from "./hooks/createControllableStore";
+export * from "./hooks/createIMEHandler";
+export * from "./hooks/createMountTransition";
+export * from "./hooks/createSlotSignal";
+export * from "./hooks/useRouterLink";
 
 //#endregion
 
@@ -175,25 +161,13 @@ export * from "./styles/patterns.styles";
 
 //#region ========== Directives ==========
 
-export { ripple } from "./directives/ripple";
+export * from "./directives/ripple";
 
 //#endregion
 
 //#region ========== Helpers ==========
 
-export { mergeStyles } from "./helpers/mergeStyles";
-export { createAppStructure } from "./helpers/createAppStructure";
-export type {
-  AppStructureItem,
-  AppStructureGroupItem,
-  AppStructureLeafItem,
-  AppStructureSubPerm,
-  AppRoute,
-  AppFlatMenu,
-  AppMenu,
-  AppPerm,
-  AppFlatPerm,
-  AppStructure,
-} from "./helpers/createAppStructure";
+export * from "./helpers/mergeStyles";
+export * from "./helpers/createAppStructure";
 
 //#endregion