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

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

@@ -8,6 +8,8 @@
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
+  import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
   import AgreementNotice from './AgreementNotice.svelte'
@@ -16,6 +18,9 @@
 
   const {
     loading = false,
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
     disabled = false,
     showTitle = false,
     showPasswordStrength = true,
@@ -165,114 +170,107 @@
 </script>
 
 <form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
-  <!-- 标题 -->
-  {#if showTitle}
-    <h2 class='text-xl font-semibold text-center mb-5'>{uiM('register_title')}</h2>
-  {/if}
-
-  <!-- 自定义头部 -->
-  {#if header}
-    <div class='register-form-header'>
-      {@render header()}
-    </div>
-  {/if}
-
-  {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
-  {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+  <FormLayout {columns} {labelPosition} {labelWidth}>
+    <!-- 标题 -->
+    {#if showTitle}
+      <h2 class='text-xl font-semibold text-center mb-5'>{uiM('register_title')}</h2>
+    {/if}
 
-  <!-- 动态字段 -->
-  {#each fields as field (field)}
-    {#if field === 'password'}
-      <!-- 密码字段 -->
-      <div class='space-y-1.5'>
-        <label class='text-sm font-medium text-base-content/70' for='register-password'>
-          {getFieldLabel('password')}
-        </label>
-        <PasswordInput
-          id='register-password'
-          bind:value={password}
-          placeholder={getFieldPlaceholder('password')}
-          autocomplete='new-password'
-          {disabled}
-          required
-          showStrength={showPasswordStrength}
-          minLength={minPasswordLength}
-          error={errors.password}
-        />
+    <!-- 自定义头部 -->
+    {#if header}
+      <div class='register-form-header'>
+        {@render header()}
       </div>
+    {/if}
 
-      <!-- 确认密码字段 -->
-      {#if requireConfirmPassword}
-        <div class='space-y-1.5'>
-          <label class='text-sm font-medium text-base-content/70' for='register-confirm-password'>
-            {getFieldLabel('confirmPassword')}
-          </label>
+    {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
+    {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+
+    <!-- 动态字段 -->
+    {#each fields as field (field)}
+      {#if field === 'password'}
+        <!-- 密码字段 -->
+        <FormField for='register-password' label={getFieldLabel('password')}>
           <PasswordInput
-            id='register-confirm-password'
-            bind:value={confirmPassword}
-            placeholder={getFieldPlaceholder('confirmPassword')}
+            id='register-password'
+            bind:value={password}
+            placeholder={getFieldPlaceholder('password')}
             autocomplete='new-password'
             {disabled}
             required
-            showStrength={false}
-            error={confirmPasswordError}
+            showStrength={showPasswordStrength}
+            minLength={minPasswordLength}
+            error={errors.password}
+          />
+        </FormField>
+
+        <!-- 确认密码字段 -->
+        {#if requireConfirmPassword}
+          <FormField for='register-confirm-password' label={getFieldLabel('confirmPassword')}>
+            <PasswordInput
+              id='register-confirm-password'
+              bind:value={confirmPassword}
+              placeholder={getFieldPlaceholder('confirmPassword')}
+              autocomplete='new-password'
+              {disabled}
+              required
+              showStrength={false}
+              error={confirmPasswordError}
+            />
+          </FormField>
+        {/if}
+      {:else if field !== 'confirmPassword'}
+        <FormField for='register-{field}' label={getFieldLabel(field)}>
+          <Input
+            id={`register-${field}`}
+            type={getFieldType(field)}
+            name={field}
+            placeholder={getFieldPlaceholder(field)}
+            value={getFieldValue(field)}
+            oninput={(e: Event & { currentTarget: HTMLInputElement }) => setFieldValue(field, e.currentTarget.value)}
+            {disabled}
+            required={field === 'username' || field === 'email'}
+            autocomplete={field === 'username' ? 'username' : field === 'email' ? 'email' : undefined}
+            error={errors[field]}
           />
-        </div>
+        </FormField>
       {/if}
-    {:else if field !== 'confirmPassword'}
-      <div class='space-y-1.5'>
-        <label class='text-sm font-medium text-base-content/70' for='register-{field}'>
-          {getFieldLabel(field)}
-        </label>
-        <Input
-          id={`register-${field}`}
-          type={getFieldType(field)}
-          name={field}
-          placeholder={getFieldPlaceholder(field)}
-          value={getFieldValue(field)}
-          oninput={(e: Event & { currentTarget: HTMLInputElement }) => setFieldValue(field, e.currentTarget.value)}
-          {disabled}
-          required={field === 'username' || field === 'email'}
-          autocomplete={field === 'username' ? 'username' : field === 'email' ? 'email' : undefined}
-          error={errors[field]}
-        />
-      </div>
-    {/if}
-  {/each}
+    {/each}
 
-  <!-- 通用错误 -->
-  {#if extraFields}
-    <div class='register-form-extra-fields'>{@render extraFields()}</div>
-  {/if}
-  {#if errors.general}
-    <Alert variant='error'>
-      {errors.general}
-    </Alert>
-  {/if}
+    <!-- 通用错误 -->
+    {#if extraFields}
+      <div class='register-form-extra-fields'>{@render extraFields()}</div>
+    {/if}
+    {#if errors.general}
+      <Alert variant='error'>
+        {errors.general}
+      </Alert>
+    {/if}
 
-  <!-- 提交按钮 -->
-  <Button
-    type='submit'
-    variant='primary'
-    class='w-full'
-    disabled={loading || disabled || !passwordsMatch || Boolean(policyError)}
-    loading={loading}
-  >
-    {submitText || uiM('register_submit')}
-  </Button>
+    <!-- 提交按钮 -->
+    <Button
+      type='submit'
+      variant='primary'
+      class='w-full'
+      disabled={loading || disabled || !passwordsMatch || Boolean(policyError)}
+      loading={loading}
+    >
+      {submitText || uiM('register_submit')}
+    </Button>
 
-  <!-- 协议提示 -->
-  <AgreementNotice {agreements} />
+    <!-- 协议提示 -->
+    <AgreementNotice {agreements} />
 
-  <!-- 自定义底部 -->
-  {#if footer}
-    <div class='register-form-footer'>
-      {@render footer()}
-    </div>
-  {:else if showLoginLink}
-    <div class='text-center mt-4 text-sm text-base-content/60'>
-      <span>{uiM('register_has_account')}</span>
-      <a href={loginUrl} class='link link-primary ml-1'>{uiM('register_login_now')}</a>
-    </div>
-  {/if}
+    <!-- 自定义底部 -->
+    {#if footer}
+      <div class='register-form-footer'>
+        {@render footer()}
+      </div>
+    {:else if showLoginLink}
+      <div class='text-center mt-4 text-sm text-base-content/60'>
+        <span>{uiM('register_has_account')}</span>
+        <a href={loginUrl} class='link link-primary ml-1'>{uiM('register_login_now')}</a>
+      </div>
+    {/if}
+  </FormLayout>
 </form>

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

@@ -8,6 +8,8 @@
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
+  import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
   import { arePasswordsEqual, passwordPolicyError, passwordPolicyHint } from './password-utils.js'
@@ -15,6 +17,9 @@
 
   const {
     loading = false,
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
     disabled = false,
     showTitle = false,
     showDescription = false,
@@ -72,91 +77,84 @@
 </script>
 
 <form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
-  <!-- 标题 -->
-  {#if showTitle}
-    <h2 class='text-xl font-semibold text-center mb-4'>{uiM('reset_password_title')}</h2>
-  {/if}
-
-  <!-- 描述 -->
-  {#if showDescription}
-    <p class='text-center text-base-content/45 text-sm mb-5'>
-      {uiM('reset_password_desc')}
-    </p>
-  {/if}
-
-  <!-- 验证码 -->
-  {#if showCode}
-    <div class='space-y-1.5'>
-      <label class='text-sm font-medium text-base-content/70' for='reset-code'>
-        {uiM('reset_password_code_label')}
-      </label>
-      <Input
-        id='reset-code'
-        name='code'
-        type='text'
-        placeholder={uiM('reset_password_code_placeholder')}
-        bind:value={code}
+  <FormLayout {columns} {labelPosition} {labelWidth}>
+    <!-- 标题 -->
+    {#if showTitle}
+      <h2 class='text-xl font-semibold text-center mb-4'>{uiM('reset_password_title')}</h2>
+    {/if}
+
+    <!-- 描述 -->
+    {#if showDescription}
+      <p class='text-center text-base-content/45 text-sm mb-5'>
+        {uiM('reset_password_desc')}
+      </p>
+    {/if}
+
+    <!-- 验证码 -->
+    {#if showCode}
+      <FormField for='reset-code' label={uiM('reset_password_code_label')}>
+        <Input
+          id='reset-code'
+          name='code'
+          type='text'
+          placeholder={uiM('reset_password_code_placeholder')}
+          bind:value={code}
+          {disabled}
+          required
+          error={errors.code}
+        />
+      </FormField>
+    {/if}
+
+    <!-- 新密码 -->
+    <FormField for='reset-new-password' label={uiM('reset_password_new_label')}>
+      <PasswordInput
+        bind:value={newPassword}
+        placeholder={uiM('reset_password_new_placeholder')}
         {disabled}
-        required
-        error={errors.code}
+        error={errors.newPassword}
+        showStrength={showPasswordStrength}
+        minLength={minPasswordLength}
       />
-    </div>
-  {/if}
-
-  <!-- 新密码 -->
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='reset-new-password'>
-      {uiM('reset_password_new_label')}
-    </label>
-    <PasswordInput
-      bind:value={newPassword}
-      placeholder={uiM('reset_password_new_placeholder')}
-      {disabled}
-      error={errors.newPassword}
-      showStrength={showPasswordStrength}
-      minLength={minPasswordLength}
-    />
-  </div>
-
-  <!-- 确认新密码 -->
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='reset-confirm-password'>
-      {uiM('reset_password_confirm_label')}
-    </label>
-    <PasswordInput
-      bind:value={confirmPassword}
-      placeholder={uiM('reset_password_confirm_placeholder')}
-      {disabled}
-      error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('reset_password_mismatch') : '')}
-      showStrength={false}
-    />
-  </div>
-
-  <!-- 通用错误 -->
-  {#if errors.general}
-    <Alert variant='error'>
-      {errors.general}
-    </Alert>
-  {/if}
-
-  {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
-  {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
-
-  <!-- 提交按钮 -->
-  <Button
-    type='submit'
-    variant='primary'
-    {loading}
-    disabled={loading || disabled || !canSubmit || Boolean(policyError)}
-    class='w-full'
-  >
-    {submitText || uiM('reset_password_submit')}
-  </Button>
-
-  <!-- 返回链接 -->
-  {#if showBackLink}
-    <div class='text-center mt-4 text-sm'>
-      <a href={loginUrl} class='link link-primary'>← {uiM('reset_password_back')}</a>
-    </div>
-  {/if}
+    </FormField>
+
+    <!-- 确认新密码 -->
+    <FormField for='reset-confirm-password' label={uiM('reset_password_confirm_label')}>
+      <PasswordInput
+        bind:value={confirmPassword}
+        placeholder={uiM('reset_password_confirm_placeholder')}
+        {disabled}
+        error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('reset_password_mismatch') : '')}
+        showStrength={false}
+      />
+    </FormField>
+
+    <!-- 通用错误 -->
+    {#if errors.general}
+      <Alert variant='error'>
+        {errors.general}
+      </Alert>
+    {/if}
+
+    {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
+    {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+
+    <!-- 提交按钮 -->
+    <Button
+      type='submit'
+      variant='primary'
+      {loading}
+      disabled={loading || disabled || !canSubmit || Boolean(policyError)}
+      class='w-full'
+    >
+      {submitText || uiM('reset_password_submit')}
+    </Button>
+
+    <!-- 返回链接 -->
+    {#if showBackLink}
+      <div class='text-center mt-4 text-sm'>
+        <a href={loginUrl} class='link link-primary'>← {uiM('reset_password_back')}</a>
+      </div>
+    {/if}
+  </FormLayout>
 </form>

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

@@ -14,6 +14,8 @@
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
+  import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Avatar from '../../primitives/Avatar.svelte'
   import BareInput from '../../primitives/BareInput.svelte'
   import Button from '../../primitives/Button.svelte'
@@ -25,6 +27,9 @@
     editable = false,
     alwaysEditable = false,
     loading = false,
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
     fields = ['avatar', 'username', 'email', 'displayName', 'phone'],
     avatarAccept = 'image/*',
     avatarHint,
@@ -157,7 +162,7 @@
 
 <div {...dataAttributes} class={containerClass}>
   <form onsubmit={handleSubmit}>
-    <div class='space-y-6'>
+    <FormLayout {columns} {labelPosition} {labelWidth}>
       {#each fields as field (field)}
         {@const modelKey = getModelKey(field)}
         {#if field === 'avatar'}
@@ -191,8 +196,7 @@
           </div>
         {:else}
           <!-- 其他字段 -->
-          <div class='fieldset'>
-            <legend class='fieldset-legend font-medium'>{getFieldLabel(field)}</legend>
+          <FormField label={getFieldLabel(field)} colSpan={field === 'bio' ? 2 : 'auto'}>
             {#if editable && (editMode || alwaysEditable)}
               {#if field === 'bio'}
                 <Textarea
@@ -216,7 +220,7 @@
                 {formData[modelKey] || '-'}
               </p>
             {/if}
-          </div>
+          </FormField>
         {/if}
       {/each}
 
@@ -259,6 +263,6 @@
           {/if}
         </div>
       {/if}
-    </div>
+    </FormLayout>
   </form>
 </div>

package/dist/components/scenes/storage/FileUpload.svelte

@@ -300,7 +300,7 @@
   }
 </script>
 
-<div {...dataAttributes} class={containerClass}>
+<div {...dataAttributes} class={containerClass} data-form-wide>
   <!-- 上传区域 -->
   <div
     class={dropzoneClass}

package/dist/components/scenes/storage/ImageUpload.svelte

@@ -195,6 +195,7 @@
 </script>
 
 <div {...dataAttributes}
+     data-form-wide
      class={containerClass}
      style={containerStyle}
      role='button'

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, Size } from '../../types.js';
+import type { DataAttributes, FormLayoutOptions, FormText, Size } from '../../types.js';
 /**
  * 密码输入框属性
  */
@@ -28,7 +28,7 @@ export interface PasswordInputProps extends DataAttributes {
     /** 是否必填 */
     required?: boolean;
     /** 错误消息 */
-    error?: string;
+    error?: FormText;
     /** 是否显示切换按钮 */
     showToggle?: boolean;
     /** 是否显示密码强度 */
@@ -74,7 +74,7 @@ export interface LoginFormData {
 /**
  * 登录表单属性
  */
-export interface LoginFormProps extends DataAttributes {
+export interface LoginFormProps extends FormLayoutOptions, DataAttributes {
     /** 实际可用的方式；空数组表示无可用登录方式。 */
     methods?: AuthLoginMethod[];
     /** 验证码长度 */
@@ -136,7 +136,7 @@ export interface RegisterFormData {
 /**
  * 注册表单属性
  */
-export interface RegisterFormProps extends DataAttributes {
+export interface RegisterFormProps extends FormLayoutOptions, DataAttributes {
     passwordPolicy?: PasswordPolicy;
     /** 加载状态 */
     loading?: boolean;
@@ -184,7 +184,7 @@ export interface ChangePasswordFormData {
 /**
  * 修改密码表单属性
  */
-export interface ChangePasswordFormProps extends DataAttributes {
+export interface ChangePasswordFormProps extends FormLayoutOptions, DataAttributes {
     passwordPolicy?: PasswordPolicy;
     /** 加载状态 */
     loading?: boolean;
@@ -215,7 +215,7 @@ export interface ForgotPasswordFormData {
 /**
  * 找回密码表单属性
  */
-export interface ForgotPasswordFormProps extends DataAttributes {
+export interface ForgotPasswordFormProps extends FormLayoutOptions, DataAttributes {
     /** 加载状态 */
     loading?: boolean;
     /** 禁用状态 */
@@ -254,7 +254,7 @@ export interface ResetPasswordFormData {
 /**
  * 重置密码表单属性
  */
-export interface ResetPasswordFormProps extends DataAttributes {
+export interface ResetPasswordFormProps extends FormLayoutOptions, DataAttributes {
     passwordPolicy?: PasswordPolicy;
     /** 加载状态 */
     loading?: boolean;
@@ -355,7 +355,7 @@ export interface AuthPanelActions {
 /** AuthPanel 的初始页面；未传独立路由时由组件内部导航。 */
 export type AuthPanelMode = 'login' | 'register' | 'forgot' | 'reset';
 /** 配置驱动认证场景；网络、通知和令牌存储由应用注入 actions。 */
-export interface AuthPanelProps extends DataAttributes {
+export interface AuthPanelProps extends FormLayoutOptions, DataAttributes {
     /** 未取得配置时显示加载状态，只消费 IAM 的公开配置。 */
     config: AuthPanelConfig | null;
     /** 由 Kit 或 API client 提供标准动作，组件不处理底层传输。 */
@@ -408,7 +408,7 @@ export interface UserProfileSubmitData {
 /**
  * 用户个人信息属性
  */
-export interface UserProfileProps extends DataAttributes {
+export interface UserProfileProps extends FormLayoutOptions, DataAttributes {
     /** 用户信息 */
     user?: UserProfileData;
     /** 是否可编辑 */

package/dist/i18n.svelte.d.ts

@@ -5,7 +5,8 @@
  * @module i18n.svelte
  */
 import type { Locale, LocaleInfo } from '@h-ai/core';
-declare const DEFAULT_LOCALE: string, DEFAULT_LOCALES: LocaleInfo[], setGlobalLocale: (locale: Locale) => void;
+import { changeUILocale as setGlobalLocale } from './internal/locale.js';
+declare const DEFAULT_LOCALE: string, DEFAULT_LOCALES: LocaleInfo[];
 declare function isLocaleSupported(locale: Locale, supportedLocales?: LocaleInfo[]): boolean;
 declare function resolveLocale(locale: Locale, supportedLocales?: LocaleInfo[], defaultLocale?: Locale): Locale;
 declare function detectBrowserLocale(supportedLocales?: LocaleInfo[]): Locale | null;

package/dist/i18n.svelte.js

@@ -6,8 +6,9 @@
  */
 import { core } from '@h-ai/core';
 import { readStoredValue, writeStoredValue } from './internal/browser-safety.js';
+import { changeUILocale as setGlobalLocale } from './internal/locale.js';
 // 从 core.i18n 解构常用函数
-const { DEFAULT_LOCALE, DEFAULT_LOCALES, setGlobalLocale, } = core.i18n;
+const { DEFAULT_LOCALE, DEFAULT_LOCALES, } = core.i18n;
 function isLocaleSupported(locale, supportedLocales = DEFAULT_LOCALES) {
     const normalized = locale === 'en' ? 'en-US' : locale === 'zh' ? 'zh-CN' : locale;
     return supportedLocales.some(item => item.code === normalized);

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

@@ -0,0 +1,12 @@
+/** 表单布局和字段提示的内部上下文，不要求应用转发控件属性。 */
+import type { FormLayoutOptions } from '../types.js';
+export declare const FORM_LAYOUT_CONTEXT: unique symbol;
+export declare const FORM_FIELD_CONTEXT: unique symbol;
+export interface FormFieldContext {
+    readonly controlId: string;
+    readonly labelId: string;
+    readonly messageId: string | undefined;
+    readonly error: string;
+}
+export declare function getFormLayoutContext(): FormLayoutOptions | undefined;
+export declare function getFormFieldContext(): FormFieldContext | undefined;

package/dist/internal/form-context.js

@@ -0,0 +1,9 @@
+import { getContext } from 'svelte';
+export const FORM_LAYOUT_CONTEXT = Symbol('hai-form-layout');
+export const FORM_FIELD_CONTEXT = Symbol('hai-form-field');
+export function getFormLayoutContext() {
+    return getContext(FORM_LAYOUT_CONTEXT);
+}
+export function getFormFieldContext() {
+    return getContext(FORM_FIELD_CONTEXT);
+}

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

@@ -0,0 +1,16 @@
+/** 将原生校验状态保留为消息键，显示时按当前 UI 语言解析。 */
+import type { UIMessageKey } from '../messages.js';
+import type { FormText } from '../types.js';
+export interface FormValidationIssue {
+    key: UIMessageKey;
+    params?: Record<string, string | number>;
+}
+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;
+    input(control: FormControl): void;
+    reset: () => void;
+};
+export {};