@simplysm/solid 13.0.29 → 13.0.31

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

@@ -1,20 +1,25 @@
-import { type Component, type JSX, Show, splitProps, createSignal, createEffect } from "solid-js";
+import {
+  type Component,
+  createEffect,
+  createMemo,
+  type JSX,
+  Show,
+  splitProps,
+  createSignal,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import {
   type FieldSize,
-  fieldBaseClass,
-  fieldSizeClasses,
-  fieldInsetClass,
-  fieldInsetHeightClass,
-  fieldInsetSizeHeightClasses,
-  fieldDisabledClass,
   fieldInputClass,
+  fieldGapClasses,
+  getFieldWrapperClass,
 } from "./Field.styles";
-import { textMuted } from "../../../styles/tokens.styles";
 import { Icon } from "../../display/Icon";
+import { PlaceholderFallback } from "./FieldPlaceholder";
+import { Invalid } from "../../form-control/Invalid";
 
 // NumberInput 전용 input 스타일 (우측 정렬 + 스피너 숨김)
 const numberInputClass = clsx(
@@ -63,6 +68,21 @@ export interface NumberInputProps {
 
   /** 접두 아이콘 */
   prefixIcon?: Component<TablerIconProps>;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 최솟값 */
+  min?: number;
+
+  /** 최댓값 */
+  max?: number;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: number | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
 }
 
 /**
@@ -169,6 +189,11 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     "size",
     "inset",
     "prefixIcon",
+    "required",
+    "min",
+    "max",
+    "validate",
+    "touchMode",
     "class",
     "style",
   ]);
@@ -239,23 +264,13 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
 
   // wrapper 클래스 (inset 분기에서는 local.class 제외)
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldBaseClass,
-      local.prefixIcon &&
-        (local.size === "sm"
-          ? "gap-1.5"
-          : local.size === "lg"
-            ? "gap-3"
-            : local.size === "xl"
-              ? "gap-4"
-              : "gap-2"),
-      local.size && fieldSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass,
-      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,
+      extra: local.prefixIcon && fieldGapClasses[local.size ?? "default"],
+    });
 
   const isEditable = () => !local.disabled && !local.readonly;
 
@@ -265,82 +280,95 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     </Show>
   );
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && v === undefined) return "필수 입력 항목입니다";
+    if (v !== undefined) {
+      if (local.min !== undefined && v < local.min) return `최솟값은 ${local.min}입니다`;
+      if (local.max !== undefined && v > local.max) return `최댓값은 ${local.max}입니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드: 기존 Show 패턴 유지
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-number-field
-              class={twMerge(getWrapperClass(true), "sd-number-field", "justify-end")}
-              style={local.style}
-              title={local.title}
-            >
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
+    >
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드: 기존 Show 패턴 유지
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-number-field
+                class={twMerge(getWrapperClass(true), "sd-number-field", "justify-end")}
+                style={local.style}
+                title={local.title}
+              >
+                {prefixIconEl()}
+                <PlaceholderFallback
+                  value={formatNumber(value(), local.comma ?? true, local.minDigits)}
+                  placeholder={local.placeholder}
+                />
+              </div>
+            }
+          >
+            <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
               {prefixIconEl()}
-              {formatNumber(value(), local.comma ?? true, local.minDigits) ||
-                (local.placeholder != null && local.placeholder !== "" ? (
-                  <span class={textMuted}>{local.placeholder}</span>
-                ) : (
-                  "\u00A0"
-                ))}
+              <input
+                type="text"
+                inputmode="numeric"
+                class={numberInputClass}
+                value={displayValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onInput={handleInput}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+              />
             </div>
-          }
-        >
-          <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
+          </Show>
+        }
+      >
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div {...rest} data-number-field class={clsx("relative", local.class)} style={local.style}>
+          <div
+            data-number-field-content
+            class={twMerge(getWrapperClass(false), "justify-end")}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
+            title={local.title}
+          >
             {prefixIconEl()}
-            <input
-              type="text"
-              inputmode="numeric"
-              class={numberInputClass}
-              value={displayValue()}
+            <PlaceholderFallback
+              value={formatNumber(value(), local.comma ?? true, local.minDigits)}
               placeholder={local.placeholder}
-              title={local.title}
-              onInput={handleInput}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
             />
           </div>
-        </Show>
-      }
-    >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div {...rest} data-number-field class={clsx("relative", local.class)} style={local.style}>
-        <div
-          data-number-field-content
-          class={twMerge(getWrapperClass(false), "justify-end")}
-          style={{ visibility: isEditable() ? "hidden" : undefined }}
-          title={local.title}
-        >
-          {prefixIconEl()}
-          {formatNumber(value(), local.comma ?? true, local.minDigits) ||
-            (local.placeholder != null && local.placeholder !== "" ? (
-              <span class={textMuted}>{local.placeholder}</span>
-            ) : (
-              "\u00A0"
-            ))}
-        </div>
 
-        <Show when={isEditable()}>
-          <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-            {prefixIconEl()}
-            <input
-              type="text"
-              inputmode="numeric"
-              class={numberInputClass}
-              value={displayValue()}
-              placeholder={local.placeholder}
-              title={local.title}
-              onInput={handleInput}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-            />
-          </div>
-        </Show>
-      </div>
-    </Show>
+          <Show when={isEditable()}>
+            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+              {prefixIconEl()}
+              <input
+                type="text"
+                inputmode="numeric"
+                class={numberInputClass}
+                value={displayValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                onInput={handleInput}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };

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

@@ -1,21 +1,18 @@
 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 type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
-  fieldBaseClass,
-  fieldDisabledClass,
+  fieldGapClasses,
   fieldInputClass,
-  fieldInsetClass,
-  fieldInsetHeightClass,
-  fieldInsetSizeHeightClasses,
   type FieldSize,
-  fieldSizeClasses,
+  getFieldWrapperClass,
 } from "./Field.styles";
-import { textMuted } from "../../../styles/tokens.styles";
+import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Icon } from "../../display/Icon";
+import { Invalid } from "../../form-control/Invalid";
 
 type TextInputType = "text" | "password" | "email";
 
@@ -56,6 +53,24 @@ export interface TextInputProps {
   /** 접두 아이콘 */
   prefixIcon?: Component<TablerIconProps>;
 
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 최소 길이 */
+  minLength?: number;
+
+  /** 최대 길이 */
+  maxLength?: number;
+
+  /** 입력 패턴 (정규식 문자열) */
+  pattern?: string;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: string) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 커스텀 class */
   class?: string;
 
@@ -99,8 +114,7 @@ function removeFormat(formattedValue: string, format: string): string {
   let result = "";
 
   for (let i = 0; i < formattedValue.length; i++) {
-    const formatChar = format[i];
-    if (formatChar === "X") {
+    if (i >= format.length || format[i] === "X") {
       result += formattedValue[i];
     }
     // 포맷 문자가 아닌 경우 (구분자) 스킵
@@ -138,6 +152,12 @@ export const TextInput: Component<TextInputProps> = (props) => {
     "inset",
     "format",
     "prefixIcon",
+    "required",
+    "minLength",
+    "maxLength",
+    "pattern",
+    "validate",
+    "touchMode",
     "class",
     "style",
   ]);
@@ -192,23 +212,13 @@ export const TextInput: Component<TextInputProps> = (props) => {
 
   // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldBaseClass,
-      local.prefixIcon &&
-        (local.size === "sm"
-          ? "gap-1.5"
-          : local.size === "lg"
-            ? "gap-3"
-            : local.size === "xl"
-              ? "gap-4"
-              : "gap-2"),
-      local.size && fieldSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass,
-      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,
+      extra: local.prefixIcon && fieldGapClasses[local.size ?? "default"],
+    });
 
   // 편집 가능 여부
   const isEditable = () => !local.disabled && !local.readonly;
@@ -226,79 +236,93 @@ export const TextInput: Component<TextInputProps> = (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}자까지 입력 가능합니다`;
+      if (local.pattern != null && !new RegExp(local.pattern).test(v))
+        return "입력 형식이 올바르지 않습니다";
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드: 기존 Show 패턴 유지
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-text-field
-              class={twMerge(getWrapperClass(true), "sd-text-field")}
-              style={local.style}
-              title={local.title}
-            >
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
+    >
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드: 기존 Show 패턴 유지
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-text-field
+                class={twMerge(getWrapperClass(true), "sd-text-field")}
+                style={local.style}
+                title={local.title}
+              >
+                {prefixIconEl()}
+                <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
+              </div>
+            }
+          >
+            <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
               {prefixIconEl()}
-              {displayValue() ||
-                (local.placeholder != null && local.placeholder !== "" ? (
-                  <span class={textMuted}>{local.placeholder}</span>
-                ) : (
-                  "\u00A0"
-                ))}
+              <input
+                type={local.type ?? "text"}
+                class={fieldInputClass}
+                value={inputValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                autocomplete={local.autocomplete}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
             </div>
-          }
-        >
-          <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
+          </Show>
+        }
+      >
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div {...rest} data-text-field class={clsx("relative", local.class)} style={local.style}>
+          <div
+            data-text-field-content
+            class={getWrapperClass(false)}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
+            title={local.title}
+          >
             {prefixIconEl()}
-            <input
-              type={local.type ?? "text"}
-              class={fieldInputClass}
-              value={inputValue()}
-              placeholder={local.placeholder}
-              title={local.title}
-              autocomplete={local.autocomplete}
-              onInput={handleInput}
-              onCompositionStart={handleCompositionStart}
-              onCompositionEnd={handleCompositionEnd}
-            />
+            <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
           </div>
-        </Show>
-      }
-    >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-text-field
-        class={twMerge(getWrapperClass(false), "relative", local.class)}
-        style={local.style}
-      >
-        <div data-text-field-content style={{ visibility: isEditable() ? "hidden" : undefined }}>
-          {prefixIconEl()}
-          {displayValue() ||
-            (local.placeholder != null && local.placeholder !== "" ? (
-              <span class={textMuted}>{local.placeholder}</span>
-            ) : (
-              "\u00A0"
-            ))}
-        </div>
 
-        <Show when={isEditable()}>
-          <input
-            type={local.type ?? "text"}
-            class={clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1")}
-            value={inputValue()}
-            placeholder={local.placeholder}
-            title={local.title}
-            autocomplete={local.autocomplete}
-            onInput={handleInput}
-            onCompositionStart={handleCompositionStart}
-            onCompositionEnd={handleCompositionEnd}
-          />
-        </Show>
-      </div>
-    </Show>
+          <Show when={isEditable()}>
+            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+              {prefixIconEl()}
+              <input
+                type={local.type ?? "text"}
+                class={fieldInputClass}
+                value={inputValue()}
+                placeholder={local.placeholder}
+                title={local.title}
+                autocomplete={local.autocomplete}
+                onInput={handleInput}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };