@simplysm/solid 13.0.29 → 13.0.31

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

@@ -1,16 +1,11 @@
 import clsx from "clsx";
-import { type Component, createEffect, type JSX, Show, splitProps } from "solid-js";
+import { type Component, createEffect, createMemo, type JSX, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
-import {
-  type FieldSize,
-  textAreaBaseClass as fieldTextAreaBaseClass,
-  textAreaSizeClasses,
-  fieldInsetClass,
-  fieldDisabledClass,
-} from "./Field.styles";
-import { textMuted } from "../../../styles/tokens.styles";
+import { type FieldSize, textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
+import { PlaceholderFallback } from "./FieldPlaceholder";
+import { Invalid } from "../../form-control/Invalid";
 
 export interface TextareaProps {
   /** 입력 값 */
@@ -40,6 +35,21 @@ export interface TextareaProps {
   /** 최소 줄 수 (기본값: 1) */
   minRows?: number;
 
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 최소 길이 */
+  minLength?: number;
+
+  /** 최대 길이 */
+  maxLength?: number;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: string) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 커스텀 class */
   class?: string;
 
@@ -79,6 +89,11 @@ export const Textarea: Component<TextareaProps> = (props) => {
     "size",
     "inset",
     "minRows",
+    "required",
+    "minLength",
+    "maxLength",
+    "validate",
+    "touchMode",
     "class",
     "style",
   ]);
@@ -136,14 +151,12 @@ export const Textarea: Component<TextareaProps> = (props) => {
 
   // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldTextAreaBaseClass,
-      local.size && textAreaSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass,
-
-      includeCustomClass && local.class,
-    );
+    getTextareaWrapperClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+      includeCustomClass: includeCustomClass && local.class,
+    });
 
   const getTextareaClass = () =>
     twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size], local.inset && "p-0");
@@ -158,100 +171,113 @@ export const Textarea: Component<TextareaProps> = (props) => {
     }
   });
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && !v) return "필수 입력 항목입니다";
+    if (v) {
+      if (local.minLength != null && v.length < local.minLength)
+        return `최소 ${local.minLength}자 이상 입력하세요`;
+      if (local.maxLength != null && v.length > local.maxLength)
+        return `최대 ${local.maxLength}자까지 입력 가능합니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드: 기존 Show 패턴 유지
-        <Show
-          when={isEditable()}
-          fallback={
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드: 기존 Show 패턴 유지
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-textarea-field
+                class={getWrapperClass(true)}
+                style={{ "white-space": "pre-wrap", "word-break": "break-all", ...local.style }}
+                title={local.title}
+              >
+                <PlaceholderFallback value={value()} placeholder={local.placeholder} />
+              </div>
+            }
+          >
             <div
               {...rest}
               data-textarea-field
               class={getWrapperClass(true)}
-              style={{ "white-space": "pre-wrap", "word-break": "break-all", ...local.style }}
-              title={local.title}
+              style={{ position: "relative", ...local.style }}
             >
-              {value() ||
-                (local.placeholder != null && local.placeholder !== "" ? (
-                  <span class={textMuted}>{local.placeholder}</span>
-                ) : (
-                  "\u00A0"
-                ))}
+              <div
+                data-hidden-content
+                style={{
+                  "visibility": "hidden",
+                  "white-space": "pre-wrap",
+                  "word-break": "break-all",
+                }}
+              >
+                {contentForHeight()}
+              </div>
+
+              <textarea
+                class={getTextareaClass()}
+                value={value()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onKeyDown={handleKeyDown}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
             </div>
-          }
+          </Show>
+        }
+      >
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div
+          {...rest}
+          data-textarea-field
+          class={clsx("relative", local.class)}
+          style={local.style}
         >
           <div
-            {...rest}
-            data-textarea-field
-            class={getWrapperClass(true)}
-            style={{ position: "relative", ...local.style }}
+            data-textarea-field-content
+            class={getWrapperClass(false)}
+            style={{
+              "visibility": isEditable() ? "hidden" : undefined,
+              "white-space": "pre-wrap",
+              "word-break": "break-all",
+            }}
+            title={local.title}
           >
+            {isEditable() ? (
+              contentForHeight()
+            ) : (
+              <PlaceholderFallback value={value()} placeholder={local.placeholder} />
+            )}
+          </div>
+
+          <Show when={isEditable()}>
             <div
-              data-hidden-content
-              style={{
-                "visibility": "hidden",
-                "white-space": "pre-wrap",
-                "word-break": "break-all",
-              }}
+              class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}
+              style={{ position: "relative" }}
             >
-              {contentForHeight()}
+              <textarea
+                class={twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size])}
+                value={value()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onKeyDown={handleKeyDown}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
             </div>
-
-            <textarea
-              class={getTextareaClass()}
-              value={value()}
-              placeholder={local.placeholder}
-              title={local.title}
-              onKeyDown={handleKeyDown}
-              onInput={handleInput}
-              onCompositionStart={handleCompositionStart}
-              onCompositionEnd={handleCompositionEnd}
-            />
-          </div>
-        </Show>
-      }
-    >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-textarea-field
-        class={twMerge(getWrapperClass(false), "relative", local.class)}
-        style={local.style}
-      >
-        <div
-          data-textarea-field-content
-          style={{
-            "visibility": isEditable() ? "hidden" : undefined,
-            "white-space": "pre-wrap",
-            "word-break": "break-all",
-          }}
-          title={local.title}
-        >
-          {isEditable()
-            ? contentForHeight()
-            : value() ||
-              (local.placeholder != null && local.placeholder !== "" ? (
-                <span class={textMuted}>{local.placeholder}</span>
-              ) : (
-                "\u00A0"
-              ))}
+          </Show>
         </div>
-
-        <Show when={isEditable()}>
-          <textarea
-            class={twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size])}
-            value={value()}
-            placeholder={local.placeholder}
-            title={local.title}
-            onKeyDown={handleKeyDown}
-            onInput={handleInput}
-            onCompositionStart={handleCompositionStart}
-            onCompositionEnd={handleCompositionEnd}
-          />
-        </Show>
-      </div>
-    </Show>
+      </Show>
+    </Invalid>
   );
 };

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

@@ -1,18 +1,10 @@
 import clsx from "clsx";
-import { type Component, type JSX, Show, splitProps } from "solid-js";
+import { type Component, createMemo, type JSX, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import {
-  type FieldSize,
-  fieldBaseClass,
-  fieldSizeClasses,
-  fieldInsetClass,
-  fieldInsetHeightClass,
-  fieldInsetSizeHeightClasses,
-  fieldDisabledClass,
-  fieldInputClass,
-} from "./Field.styles";
+import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { Invalid } from "../../form-control/Invalid";
 
 type TimePickerUnit = "minute" | "second";
 
@@ -46,6 +38,21 @@ export interface TimePickerProps {
 
   /** 커스텀 style */
   style?: JSX.CSSProperties;
+
+  /** 최소 시간 */
+  min?: Time;
+
+  /** 최대 시간 */
+  max?: Time;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: Time | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
 }
 
 /**
@@ -111,6 +118,11 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "inset",
     "class",
     "style",
+    "min",
+    "max",
+    "required",
+    "validate",
+    "touchMode",
   ]);
 
   // 기본 단위는 minute
@@ -134,15 +146,12 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
 
   // wrapper 클래스
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldBaseClass,
-      local.size && fieldSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass + " block",
-      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),
-
-      includeCustomClass && local.class,
-    );
+    getFieldWrapperClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+      includeCustomClass: includeCustomClass && local.class,
+    });
 
   // 편집 가능 여부
   const isEditable = () => !local.disabled && !local.readonly;
@@ -150,64 +159,81 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
   // step 속성 (second일 때 1)
   const getStep = () => (fieldType() === "second" ? "1" : undefined);
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && v === undefined) return "필수 입력 항목입니다";
+    if (v !== undefined) {
+      if (local.min !== undefined && v.tick < local.min.tick)
+        return `${local.min.toFormatString("HH:mm:ss")}보다 크거나 같아야 합니다`;
+      if (local.max !== undefined && v.tick > local.max.tick)
+        return `${local.max.toFormatString("HH:mm:ss")}보다 작거나 같아야 합니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-time-field
-              class={twMerge(getWrapperClass(true), "sd-time-field")}
-              style={local.style}
-              title={local.title}
-            >
-              {displayValue() || "\u00A0"}
-            </div>
-          }
-        >
-          <div {...rest} data-time-field class={getWrapperClass(true)} style={local.style}>
-            <input
-              type="time"
-              class={fieldInputClass}
-              value={displayValue()}
-              title={local.title}
-              step={getStep()}
-              onChange={handleChange}
-            />
-          </div>
-        </Show>
-      }
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
     >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-time-field
-        class={twMerge(getWrapperClass(false), "relative", local.class)}
-        style={local.style}
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-time-field
+                class={twMerge(getWrapperClass(true), "sd-time-field")}
+                style={local.style}
+                title={local.title}
+              >
+                {displayValue() || "\u00A0"}
+              </div>
+            }
+          >
+            <div {...rest} data-time-field class={getWrapperClass(true)} style={local.style}>
+              <input
+                type="time"
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                step={getStep()}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        }
       >
-        <div
-          data-time-field-content
-          style={{ visibility: isEditable() ? "hidden" : undefined }}
-          title={local.title}
-        >
-          {displayValue() || "\u00A0"}
-        </div>
-
-        <Show when={isEditable()}>
-          <input
-            type="time"
-            class={clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1")}
-            value={displayValue()}
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div {...rest} data-time-field class={clsx("relative", local.class)} style={local.style}>
+          <div
+            data-time-field-content
+            class={getWrapperClass(false)}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
             title={local.title}
-            step={getStep()}
-            onChange={handleChange}
-          />
-        </Show>
-      </div>
-    </Show>
+          >
+            {displayValue() || "\u00A0"}
+          </div>
+
+          <Show when={isEditable()}>
+            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+              <input
+                type="time"
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                step={getStep()}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };

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

@@ -1,5 +1,6 @@
 import {
   children,
+  createMemo,
   createSignal,
   For,
   type JSX,
@@ -19,7 +20,9 @@ import { ripple } from "../../../directives/ripple";
 import { splitSlots } from "../../../helpers/splitSlots";
 import { borderDefault, type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createItemTemplate } from "../../../hooks/createItemTemplate";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
+import { Invalid } from "../Invalid";
 
 void ripple;
 
@@ -40,23 +43,23 @@ const SelectAction: ParentComponent<SelectActionProps> = (props) => {
       {...rest}
       type="button"
       data-select-action
+      use:ripple
       class={twMerge(
         clsx(
           "border",
           borderDefault,
           "px-1.5",
-          "rounded-r",
           "font-bold text-primary-500",
           "hover:bg-base-100 dark:hover:bg-base-700",
+          "group-focus-within:border-y-primary-400",
+          "last:group-focus-within:border-r-primary-400",
+          "dark:group-focus-within:border-y-primary-400",
+          "dark:last:group-focus-within:border-r-primary-400",
+          "focus:relative focus:z-10 focus:border-primary-400",
+          "dark:focus:border-primary-400",
         ),
         local.class,
       )}
-      onClick={(e) => {
-        e.stopPropagation();
-        if (typeof rest.onClick === "function") {
-          rest.onClick(e);
-        }
-      }}
     >
       {local.children}
     </button>
@@ -68,33 +71,9 @@ const SelectAction: ParentComponent<SelectActionProps> = (props) => {
  */
 const SelectHeader: ParentComponent = (props) => <div data-select-header>{props.children}</div>;
 
-/**
- * items prop 방식일 때 아이템 렌더링 템플릿
- *
- * 함수 참조를 저장하기 위해 전역 Map 사용
- */
-interface SelectItemTemplateProps<TValue> {
-  children: (item: TValue, index: number, depth: number) => JSX.Element;
-}
-
-// 템플릿 함수를 저장하는 전역 Map (WeakMap 사용하여 메모리 누수 방지)
-const templateFnMap = new WeakMap<
-  HTMLElement,
-  (item: unknown, index: number, depth: number) => JSX.Element
->();
-
-const SelectItemTemplate = <T,>(props: SelectItemTemplateProps<T>) => (
-  <span
-    ref={(el) => {
-      templateFnMap.set(
-        el,
-        props.children as (item: unknown, index: number, depth: number) => JSX.Element,
-      );
-    }}
-    data-select-item-template
-    style={{ display: "none" }}
-  />
-);
+const { TemplateSlot: SelectItemTemplate, getTemplate: getSelectItemTemplate } = createItemTemplate<
+  [item: unknown, index: number, depth: number]
+>("data-select-item-template");
 
 // Props 정의
 
@@ -115,6 +94,12 @@ interface SelectCommonProps {
   /** 테두리 없는 스타일 */
   inset?: boolean;
 
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: unknown) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 커스텀 class */
   class?: string;
 
@@ -225,6 +210,8 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "items",
     "getChildren",
     "renderValue",
+    "validate",
+    "touchMode",
   ]);
 
   let triggerRef!: HTMLDivElement;
@@ -293,6 +280,14 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     }
   };
 
+  // 유효성 검사 메시지
+  const errorMsg = createMemo(() => {
+    const v = getValue();
+    if (local.required && (v === undefined || v === null || v === ""))
+      return "필수 입력 항목입니다";
+    return local.validate?.(v);
+  });
+
   // 트리거 클래스
   const getTriggerClassName = () =>
     getTriggerClass({
@@ -315,10 +310,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     const getItemTemplate = ():
       | ((item: T, index: number, depth: number) => JSX.Element)
       | undefined => {
-      const templateSlots = slots().selectItemTemplate;
-      if (templateSlots.length === 0) return undefined;
-      // WeakMap에서 함수 참조 가져오기
-      return templateFnMap.get(templateSlots[0]) as
+      return getSelectItemTemplate(slots().selectItemTemplate) as
         | ((item: T, index: number, depth: number) => JSX.Element)
         | undefined;
     };
@@ -379,7 +371,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     };
 
     return (
-      <div {...rest} data-select class={local.inset ? "flex" : "inline-flex"}>
+      <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex")}>
         <div
           ref={triggerRef}
           use:ripple={!local.disabled}
@@ -391,7 +383,11 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
           tabIndex={local.disabled ? -1 : 0}
           class={twMerge(
             getTriggerClassName(),
-            slots().selectAction.length > 0 && "rounded-r-none border-r-0",
+            slots().selectAction.length > 0 &&
+              clsx(
+                "rounded-r-none border-r-0",
+                "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
+              ),
           )}
           style={local.style}
           onClick={handleTriggerClick}
@@ -402,7 +398,17 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
             <Icon icon={IconChevronDown} size="1em" />
           </div>
         </div>
-        <Show when={slots().selectAction.length > 0}>{slots().selectAction}</Show>
+        <Show when={slots().selectAction.length > 0}>
+          <div
+            class={clsx(
+              "contents",
+              "[&>[data-select-action]:last-child]:rounded-r",
+              "[&>[data-select-action]+[data-select-action]]:-ml-px",
+            )}
+          >
+            {slots().selectAction}
+          </div>
+        </Show>
 
         <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>
           <Show when={slots().selectHeader.length > 0}>{slots().selectHeader.single()}</Show>
@@ -417,9 +423,11 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   };
 
   return (
-    <SelectContext.Provider value={contextValue as SelectContextValue}>
-      <SelectInner>{local.children}</SelectInner>
-    </SelectContext.Provider>
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <SelectContext.Provider value={contextValue as SelectContextValue}>
+        <SelectInner>{local.children}</SelectInner>
+      </SelectContext.Provider>
+    </Invalid>
   );
 };