@h-ai/ui 0.1.0-alpha.63 → 0.1.0-alpha.65

package/README.en.md

@@ -187,6 +187,10 @@ Labels connect to nested UI controls automatically; use `<FormField for="control
 
 `Input`, `Textarea`, `Select` and `PasswordInput` provide Chinese/English native validation messages. `validationMessage` overrides failures without keeping valid input invalid. Sync locale with the UI `setGlobalLocale` / `createLocaleStore` to update visible validation errors immediately. `Textarea` supports `minlength` / `maxlength`; `Select` supports `name`, required validation and FormData serialization.
 
+Client validation appears on the first blur and updates as invalid input is corrected. Untouched fields are validated on submit. CRUD create/edit forms share this behavior, honor custom messages and reset validation when reopened. `Select` validates when focus leaves both its trigger and options. `PasswordInput.minLength` enforces length and informs strength; omitting it leaves login password length unrestricted while strength uses an eight-character baseline.
+
+`UserProfile.fieldConstraints` accepts per-field `required`, `minlength`, `maxlength`, `pattern` and `validationMessage` (`pattern` applies to single-line inputs), so application rules such as username formats share blur validation. `validationMessage` also accepts a deferred translation function.
+
 `LoginForm`, `RegisterForm`, `ChangePasswordForm`, `ForgotPasswordForm`, `ResetPasswordForm`, `AuthPanel`, `UserProfile` and `FeedbackModal` accept the same layout options. Pass them through `CrudPage.form` or directly to `CrudEditPanel`. CRUD fields support `colSpan` and deferred `validation.message`. Buttons and Enter both validate before submission; corrections clear errors. Server validation remains required.
 
 ```svelte

package/README.ja.md

@@ -187,6 +187,10 @@ components/
 
 `Input`、`Textarea`、`Select`、`PasswordInput` のネイティブ検証は中国語・英語に対応します。`validationMessage` は失敗時だけ適用され、有効な入力を無効にし続けません。UI の `setGlobalLocale` / `createLocaleStore` で言語を同期すると表示中のエラーも更新されます。`Textarea` は `minlength` / `maxlength`、`Select` は `name`・必須検証・FormData に対応します。
 
+初回のフォーカス離脱時にエラーを表示し、修正中も更新します。未操作の項目は送信時に検証します。CRUD の新規作成・編集も同じ動作とカスタムメッセージに対応し、再表示時に検証状態をリセットします。`Select` はトリガーと選択肢の両方からフォーカスが離れた時に検証します。`PasswordInput.minLength` は長さ制約と強度計算に使い、省略時はログイン用の長さ制限を設けず、強度のみ8文字を基準にします。
+
+`UserProfile.fieldConstraints` は項目別に `required`、`minlength`、`maxlength`、`pattern`、`validationMessage` を受け取り、ユーザー名などの業務ルールをフォーカス離脱時に検証します。`pattern` は単一行の入力に適用し、`validationMessage` は翻訳関数にも対応します。
+
 `LoginForm`、`RegisterForm`、`ChangePasswordForm`、`ForgotPasswordForm`、`ResetPasswordForm`、`AuthPanel`、`UserProfile`、`FeedbackModal` は同じレイアウト設定に対応します。`CrudPage.form` または `CrudEditPanel` に渡します。CRUD 項目は `colSpan` と翻訳関数の `validation.message` に対応し、ボタンと Enter のどちらも送信前に検証します。入力修正でエラーが消えます。サーバー側の検証も必要です。
 
 ```svelte

package/README.md

@@ -187,6 +187,10 @@ components/
 
 `Input`、`Textarea`、`Select` 和 `PasswordInput` 的原生校验使用内置中英文提示；`validationMessage` 只覆盖失败提示，不让有效输入一直无效。应用通过 UI 的 `setGlobalLocale` / `createLocaleStore` 同步语言，已显示的校验错误即时更新。`Textarea` 支持 `minlength` / `maxlength`，`Select` 支持 `name`、必填校验和 FormData 序列化。
 
+字段首次失焦后显示前端校验错误，修正输入时即时更新；未访问的字段在提交时统一校验。CRUD 新增/编辑复用该行为，支持自定义校验文案，关闭重开清空校验状态。`Select` 在焦点离开触发器和选项后校验。`PasswordInput.minLength` 同时约束长度并用于强度计算；省略时不限制登录密码长度，强度计算仍以 8 位为基准。
+
+`UserProfile.fieldConstraints` 按字段接收 `required`、`minlength`、`maxlength`、`pattern` 和 `validationMessage`（`pattern` 用于单行输入），让应用的用户名等业务规则复用失焦校验；`validationMessage` 支持延迟翻译函数。
+
 `LoginForm`、`RegisterForm`、`ChangePasswordForm`、`ForgotPasswordForm`、`ResetPasswordForm`、`AuthPanel`、`UserProfile` 和 `FeedbackModal` 接受同一组布局参数。`CrudPage` 通过 `form` 传入；`CrudEditPanel` 直接接收。CRUD 字段支持 `colSpan`，`validation.message` 支持翻译函数；按钮与回车均先校验，修正后错误消失，客户端校验不能替代服务端校验。
 
 ```svelte

package/dist/components/compounds/Drawer.svelte

@@ -10,8 +10,9 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, DrawerProps } from '../../types.js'
-  import { onDestroy, onMount } from 'svelte'
+  import { onDestroy, onMount, setContext } from 'svelte'
   import { readStoredValue, writeStoredValue } from '../../internal/browser-safety.js'
+  import { FORM_VISIBILITY_CONTEXT } from '../../internal/form-context.js'
   import { uiM } from '../../messages.js'
   import { cn, generateId, getDataAttributes } from '../../utils.js'
   import IconButton from '../primitives/IconButton.svelte'
@@ -34,6 +35,9 @@
   }: DrawerProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  setContext(FORM_VISIBILITY_CONTEXT, {
+    get open() { return open },
+  })
   const id = generateId('drawer')
   /** 用户拖动后的像素宽度；优先于 width 与 size。 */
   let resizedWidth = $state<number | null>(null)

package/dist/components/compounds/Modal.svelte

@@ -4,6 +4,8 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, ModalProps } from '../../types.js'
+  import { setContext } from 'svelte'
+  import { FORM_VISIBILITY_CONTEXT } from '../../internal/form-context.js'
   import { uiM } from '../../messages.js'
   import { cn, getDataAttributes } from '../../utils.js'
 
@@ -28,6 +30,9 @@
   }: ModalProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  setContext(FORM_VISIBILITY_CONTEXT, {
+    get open() { return open },
+  })
   const modalId = $props.id()
   const titleId = `${modalId}-title`
   let panel = $state<HTMLDivElement>()

package/dist/components/primitives/Input.svelte

@@ -89,6 +89,7 @@
   }
 
   function handleBlur(e: FocusEvent & { currentTarget: HTMLInputElement }) {
+    validation.validate(e.currentTarget)
     onblur?.(e)
   }
 
@@ -97,7 +98,7 @@
   }
 
   function handleInvalid(e: Event & { currentTarget: HTMLInputElement }) {
-    validation.invalid(e.currentTarget)
+    validation.validate(e.currentTarget)
     oninvalid?.(e)
   }
 </script>

package/dist/components/primitives/Select.svelte

@@ -258,6 +258,17 @@
     onchange?.(undefined as T)
   }
 
+  function handleFocusOut(event: FocusEvent) {
+    const next = event.relatedTarget
+    // 选项通过 portal 渲染，触发器与选项之间的焦点移动仍属于同一字段。
+    if (next instanceof Node && (dropdownRef?.contains(next) || listboxRef?.contains(next)))
+      return
+    if (nativeSelect)
+      validation.validate(nativeSelect)
+    isDropdownOpen = false
+    filterText = ''
+  }
+
   // 判断是否显示清除按钮
   const showClear = $derived(clearable && value !== undefined && value !== null && value !== '' && isHovered)
 </script>
@@ -268,6 +279,7 @@
   bind:this={dropdownRef}
   onmouseenter={() => isHovered = true}
   onmouseleave={() => isHovered = false}
+  onfocusout={handleFocusOut}
 >
   <select
     bind:this={nativeSelect}
@@ -280,7 +292,7 @@
     value={nativeValue}
     oninvalid={(e) => {
       e.preventDefault()
-      validation.invalid(e.currentTarget)
+      validation.validate(e.currentTarget)
       inputRef?.focus()
     }}
   >
@@ -387,6 +399,7 @@
         class='max-h-60 overflow-auto rounded-xl border border-base-content/10 bg-base-100 p-1.5 shadow-xl shadow-base-content/10'
         style={dropdownStyle}
         role='listbox'
+        onfocusout={handleFocusOut}
       >
         {#each filteredOptions() as option (String(option.value))}
           <li

package/dist/components/primitives/Textarea.svelte

@@ -88,7 +88,7 @@
   }
 
   function handleInvalid(e: Event & { currentTarget: HTMLTextAreaElement }) {
-    validation.invalid(e.currentTarget)
+    validation.validate(e.currentTarget)
     oninvalid?.(e)
   }
 </script>
@@ -112,6 +112,7 @@
       class={textareaClass}
       bind:value
       oninput={handleInput}
+      onblur={e => validation.validate(e.currentTarget)}
       oninvalid={handleInvalid}
     ></textarea>
   </div>

package/dist/components/scenes/crud/CrudEditPanel.svelte

@@ -79,9 +79,12 @@
   const panelId = $props.id()
   let formElement: HTMLFormElement | undefined = $state()
   let attempted = $state(false)
+  let touched = $state<Record<string, boolean>>({})
   $effect(() => {
-    if (!open)
+    if (!open) {
       attempted = false
+      touched = {}
+    }
   })
   function resolveOptions(options?: CrudFieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
     if (!options)
@@ -94,10 +97,8 @@
   )
   const fieldErrors = $derived.by(() => {
     const errors: Record<string, string> = {}
-    if (!attempted)
-      return errors
     for (const field of sortedFields) {
-      if (mode === 'edit' && field.readonly)
+      if ((!attempted && !touched[field.id]) || (mode === 'edit' && field.readonly))
         continue
       const issue = getCrudValidationIssue(field, formData[field.id])
       if (issue)
@@ -148,6 +149,15 @@
     formData = { ...formData, [fieldId]: value }
   }
 
+  function handleFieldBlur(event: FocusEvent) {
+    if (!(event.target instanceof HTMLElement))
+      return
+    const field = event.target.closest<HTMLElement>('[data-field]')
+    if (!field?.dataset.field || (event.relatedTarget instanceof Node && field.contains(event.relatedTarget)))
+      return
+    touched = { ...touched, [field.dataset.field]: true }
+  }
+
   function toggleMultiSelect(fieldId: string, optValue: string | number | boolean) {
     const current = (formData[fieldId] as Array<string | number | boolean>) ?? []
     const strVal = String(optValue)
@@ -295,7 +305,7 @@
     closeOnBackdrop={false}
     onclose={handleClose}
   >
-    <form bind:this={formElement} novalidate onsubmit={handleSubmit}>
+    <form bind:this={formElement} novalidate onsubmit={handleSubmit} onfocusout={handleFieldBlur}>
       <!-- 底部按钮在表单外；保留原生提交控件，使多字段表单支持回车提交。 -->
       <input type='submit' class='hidden' tabindex='-1' aria-hidden='true' value={uiM('crud_save')} />
       {@render formFields()}
@@ -318,7 +328,7 @@
     onclose={handleClose}
     closeOnBackdrop={false}
   >
-    <form bind:this={formElement} novalidate onsubmit={handleSubmit} class={drawerFormClass}>
+    <form bind:this={formElement} novalidate onsubmit={handleSubmit} onfocusout={handleFieldBlur} class={drawerFormClass}>
       <input type='submit' class='hidden' tabindex='-1' aria-hidden='true' value={uiM('crud_save')} />
       {@render formFields()}
     </form>

package/dist/components/scenes/iam/ChangePasswordForm.svelte

@@ -83,6 +83,9 @@
       <FormField for='old-password' label={uiM('change_password_old')}>
         <PasswordInput
           value={oldPassword}
+          id='old-password'
+          autocomplete='current-password'
+          required
           oninput={(e) => { oldPassword = e.currentTarget.value }}
           placeholder={uiM('change_password_old_placeholder')}
           {disabled}
@@ -95,6 +98,9 @@
     <FormField for='new-password' label={uiM('change_password_new')}>
       <PasswordInput
         value={newPassword}
+        id='new-password'
+        autocomplete='new-password'
+        required
         oninput={(e) => { newPassword = e.currentTarget.value }}
         placeholder={uiM('change_password_new_placeholder')}
         {disabled}
@@ -107,6 +113,9 @@
     <FormField for='confirm-password' label={uiM('change_password_confirm')}>
       <PasswordInput
         value={confirmPassword}
+        id='confirm-password'
+        autocomplete='new-password'
+        required
         oninput={(e) => { confirmPassword = e.currentTarget.value }}
         placeholder={uiM('change_password_confirm_placeholder')}
         {disabled}

package/dist/components/scenes/iam/PasswordInput.svelte

@@ -42,7 +42,7 @@
     showToggle?: boolean
     /** 是否显示密码强度 */
     showStrength?: boolean
-    /** 最小长度 */
+    /** 最小长度；提供时校验，省略时仅以 8 位为基准计算强度。 */
     minLength?: number
     /** 自定义类名 */
     class?: string
@@ -68,7 +68,7 @@
     error = '',
     showToggle = true,
     showStrength = false,
-    minLength = 8,
+    minLength,
     class: className = '',
     inputRef = $bindable<HTMLInputElement | undefined>(),
     oninput,
@@ -79,7 +79,7 @@
 
   const dataAttributes = $derived(getDataAttributes(restProps))
   const field = getFormFieldContext()
-  const validation = createControlValidation(undefined, () => [value, required, readonly, disabled])
+  const validation = createControlValidation(undefined, () => [value, required, readonly, disabled, minLength])
   const uniqueId = $props.id()
   const messageId = `${uniqueId}-error`
   const localError = $derived(resolveFormText(error) || validation.message)
@@ -110,7 +110,7 @@
     let score = 0
 
     // 长度检查
-    if (value.length >= minLength)
+    if (value.length >= (minLength ?? 8))
       score += 1
     if (value.length >= 12)
       score += 1
@@ -173,12 +173,14 @@
       {disabled}
       {readonly}
       {required}
+      minlength={minLength}
       ariaInvalid={effectiveError ? true : undefined}
       ariaDescribedby={[field?.messageId, localError && !field?.error ? messageId : ''].filter(Boolean).join(' ') || undefined}
       oninput={handleInput}
       onchange={handleChange}
+      onblur={e => validation.validate(e.currentTarget)}
       oninvalid={(e) => {
-        validation.invalid(e.currentTarget)
+        validation.validate(e.currentTarget)
         oninvalid?.(e)
       }}
     />

package/dist/components/scenes/iam/PasswordInput.svelte.d.ts

@@ -22,7 +22,7 @@ interface Props {
     showToggle?: boolean;
     /** 是否显示密码强度 */
     showStrength?: boolean;
-    /** 最小长度 */
+    /** 最小长度；提供时校验，省略时仅以 8 位为基准计算强度。 */
     minLength?: number;
     /** 自定义类名 */
     class?: string;

package/dist/components/scenes/iam/UserProfile.svelte

@@ -31,6 +31,7 @@
     labelPosition = 'top',
     labelWidth = '8rem',
     fields = ['avatar', 'username', 'email', 'displayName', 'phone'],
+    fieldConstraints = {},
     avatarAccept = 'image/*',
     avatarHint,
     class: className = '',
@@ -167,7 +168,7 @@
         {@const modelKey = getModelKey(field)}
         {#if field === 'avatar'}
           <!-- 头像 -->
-          <div class='flex items-center gap-4'>
+          <div class='flex flex-wrap items-center gap-4 border-b border-base-content/8 pb-5'>
             <Avatar
               src={user?.avatarUrl ?? user?.avatar}
               alt={uiM('user_profile_avatar')}
@@ -176,7 +177,7 @@
               class='shadow-sm'
             />
             {#if editable && (editMode || alwaysEditable)}
-              <div>
+              <div class='min-w-0 flex-1 basis-48'>
                 <BareInput
                   id={avatarInputId}
                   type='file'
@@ -196,10 +197,11 @@
           </div>
         {:else}
           <!-- 其他字段 -->
-          <FormField label={getFieldLabel(field)} colSpan={field === 'bio' ? 2 : 'auto'}>
+          <FormField label={getFieldLabel(field)} required={fieldConstraints[field]?.required} colSpan={field === 'bio' ? 2 : 'auto'}>
             {#if editable && (editMode || alwaysEditable)}
               {#if field === 'bio'}
                 <Textarea
+                  {...fieldConstraints[field]}
                   name={modelKey}
                   rows={3}
                   bind:value={formData[modelKey]}
@@ -208,6 +210,7 @@
                 />
               {:else}
                 <Input
+                  {...fieldConstraints[field]}
                   type={field === 'email' ? 'email' : field === 'phone' ? 'tel' : 'text'}
                   name={modelKey}
                   bind:value={formData[modelKey]}

package/dist/components/scenes/types.d.ts

@@ -6,7 +6,7 @@
  */
 import type { HaiResult } from '@h-ai/core';
 import type { Snippet } from 'svelte';
-import type { DataAttributes, FormLayoutOptions, FormText, Size } from '../../types.js';
+import type { DataAttributes, FormLayoutOptions, FormText, InputProps, Size } from '../../types.js';
 /**
  * 密码输入框属性
  */
@@ -33,7 +33,7 @@ export interface PasswordInputProps extends DataAttributes {
     showToggle?: boolean;
     /** 是否显示密码强度 */
     showStrength?: boolean;
-    /** 最小长度 */
+    /** 最小长度；提供时校验，省略时仅以 8 位为基准计算强度。 */
     minLength?: number;
     /** 自定义类名 */
     class?: string;
@@ -418,6 +418,8 @@ export interface UserProfileProps extends FormLayoutOptions, DataAttributes {
     loading?: boolean;
     /** 显示的字段 */
     fields?: UserProfileField[];
+    /** 按业务规则声明字段的原生约束，复用控件失焦校验。 */
+    fieldConstraints?: Partial<Record<Exclude<UserProfileField, 'avatar'>, Pick<InputProps, 'required' | 'minlength' | 'maxlength' | 'pattern' | 'validationMessage'>>>;
     /** 头像上传地址 */
     avatarUploadUrl?: string;
     /** 文件选择器允许的头像类型；最终校验由业务上传服务负责。 */

package/dist/internal/form-context.d.ts

@@ -2,6 +2,11 @@
 import type { FormLayoutOptions } from '../types.js';
 export declare const FORM_LAYOUT_CONTEXT: unique symbol;
 export declare const FORM_FIELD_CONTEXT: unique symbol;
+export declare const FORM_VISIBILITY_CONTEXT: unique symbol;
+interface FormVisibilityContext {
+    readonly open: boolean;
+}
+export declare function getFormVisibilityContext(): FormVisibilityContext | undefined;
 export interface FormFieldContext {
     readonly controlId: string;
     readonly labelId: string;
@@ -10,3 +15,4 @@ export interface FormFieldContext {
 }
 export declare function getFormLayoutContext(): FormLayoutOptions | undefined;
 export declare function getFormFieldContext(): FormFieldContext | undefined;
+export {};

package/dist/internal/form-context.js

@@ -1,6 +1,10 @@
 import { getContext } from 'svelte';
 export const FORM_LAYOUT_CONTEXT = Symbol('hai-form-layout');
 export const FORM_FIELD_CONTEXT = Symbol('hai-form-field');
+export const FORM_VISIBILITY_CONTEXT = Symbol('hai-form-visibility');
+export function getFormVisibilityContext() {
+    return getContext(FORM_VISIBILITY_CONTEXT);
+}
 export function getFormLayoutContext() {
     return getContext(FORM_LAYOUT_CONTEXT);
 }

package/dist/internal/form-validation.svelte.d.ts

@@ -9,7 +9,7 @@ type FormControl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 export declare function resolveFormText(text?: FormText): string;
 export declare function createControlValidation(getOverride?: () => FormText | undefined, getValue?: () => unknown): {
     readonly message: string;
-    invalid(control: FormControl): void;
+    validate(control: FormControl): void;
     input(control: FormControl): void;
     reset: () => void;
 };

package/dist/internal/form-validation.svelte.js

@@ -1,5 +1,6 @@
 import { untrack } from 'svelte';
 import { getUILocale, uiM } from '../messages.js';
+import { getFormVisibilityContext } from './form-context.js';
 export function resolveFormText(text) {
     if (typeof text !== 'function')
         return text ?? '';
@@ -15,9 +16,12 @@ function readIssue(control) {
         return { key: 'form_required' };
     if (validity.typeMismatch)
         return { key: control.getAttribute('type') === 'email' ? 'form_email' : 'form_url' };
-    if (validity.tooShort)
+    // 程序回填的值也需校验长度，原生 tooShort/tooLong 只覆盖用户输入。
+    const minLength = control.getAttribute('minlength');
+    const maxLength = control.getAttribute('maxlength');
+    if (validity.tooShort || (control.value && minLength !== null && control.value.length < Number(minLength)))
         return { key: 'form_min_length', params: { min: control.getAttribute('minlength') ?? '' } };
-    if (validity.tooLong)
+    if (validity.tooLong || (control.value && maxLength !== null && control.value.length > Number(maxLength)))
         return { key: 'form_max_length', params: { max: control.getAttribute('maxlength') ?? '' } };
     if (validity.rangeUnderflow)
         return { key: 'form_min', params: { min: control.getAttribute('min') ?? '' } };
@@ -32,12 +36,18 @@ function readIssue(control) {
     return undefined;
 }
 export function createControlValidation(getOverride = () => undefined, getValue) {
+    const visibility = getFormVisibilityContext();
     let issue = $state();
     let currentControl = $state();
     function reset() {
         issue = undefined;
         currentControl?.setCustomValidity('');
     }
+    $effect(() => {
+        // 弹窗与抽屉保留子树；关闭时清理原生错误，重开不能沿用上次的触碰状态。
+        if (visibility && !visibility.open)
+            reset();
+    });
     $effect(() => {
         const form = currentControl?.form;
         form?.addEventListener('reset', reset);
@@ -59,7 +69,7 @@ export function createControlValidation(getOverride = () => undefined, getValue)
         get message() {
             return issue ? resolveFormText(getOverride()) || uiM(issue.key, issue.params) : '';
         },
-        invalid(control) {
+        validate(control) {
             currentControl = control;
             control.setCustomValidity('');
             issue = readIssue(control);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.63",
+  "version": "0.1.0-alpha.65",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -59,7 +59,7 @@
     "svelte": "^5.57.2"
   },
   "dependencies": {
-    "@h-ai/core": "0.1.0-alpha.63",
+    "@h-ai/core": "0.1.0-alpha.65",
     "@internationalized/date": "^3.12.4",
     "@shikijs/langs": "^4.5.0",
     "bits-ui": "^2.19.5",