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

package/dist/components/compounds/DatePicker.svelte

@@ -23,8 +23,10 @@
 -->
 <script lang='ts'>
   import type { DateValue } from '@internationalized/date'
-  import type { DataAttributes, Size } from '../../types.js'
+  import type { DataAttributes, FormText, Size } from '../../types.js'
   import { DatePicker as BitsDatePicker } from 'bits-ui'
+  import { getFormFieldContext } from '../../internal/form-context.js'
+  import { resolveFormText } from '../../internal/form-validation.svelte.js'
   import { cn, getDataAttributes } from '../../utils.js'
   import { getFormControlSizeClasses } from '../control-size.js'
 
@@ -44,7 +46,7 @@
     /** 尺寸 */
     size?: Size
     /** 错误消息 */
-    error?: string
+    error?: FormText
     /** 自定义类名 */
     class?: string
     /** 日期变更回调 */
@@ -66,6 +68,11 @@
   }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const field = getFormFieldContext()
+  const uniqueId = $props.id()
+  const messageId = `${uniqueId}-message`
+  const localError = $derived(resolveFormText(error))
+  const effectiveError = $derived(field?.error || localError)
   const sizeClasses = $derived(getFormControlSizeClasses(size))
 </script>
 
@@ -80,10 +87,12 @@
     onValueChange={v => onchange?.(v)}
   >
     <BitsDatePicker.Input
+      aria-labelledby={field?.labelId}
+      aria-describedby={[field?.messageId, localError && !field?.error ? messageId : ''].filter(Boolean).join(' ') || undefined}
       class={cn(
         'flex w-full items-center gap-0.5 rounded-lg border bg-base-100 pr-2 transition-[border-color,box-shadow] duration-150',
         sizeClasses.control,
-        error
+        effectiveError
           ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
           : 'border-base-content/15 hover:border-base-content/25 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
         disabled && 'cursor-not-allowed opacity-50',
@@ -149,7 +158,7 @@
     </BitsDatePicker.Content>
   </BitsDatePicker.Root>
 
-  {#if error}
-    <span class='fieldset-label text-error'>{error}</span>
+  {#if localError && !field?.error}
+    <p id={messageId} class='mt-1.5 text-xs text-error leading-relaxed break-words' aria-live='polite'>{localError}</p>
   {/if}
 </div>

package/dist/components/compounds/DatePicker.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DateValue } from '@internationalized/date';
-import type { DataAttributes, Size } from '../../types.js';
+import type { DataAttributes, FormText, Size } from '../../types.js';
 interface Props {
     /** 选中日期（双向绑定） */
     value?: DateValue;
@@ -16,7 +16,7 @@ interface Props {
     /** 尺寸 */
     size?: Size;
     /** 错误消息 */
-    error?: string;
+    error?: FormText;
     /** 自定义类名 */
     class?: string;
     /** 日期变更回调 */

package/dist/components/compounds/Form.svelte

@@ -10,12 +10,16 @@
 <script lang='ts'>
   import type { DataAttributes, FormProps } from '../../types.js'
   import { cn, getDataAttributes } from '../../utils.js'
+  import FormLayout from './FormLayout.svelte'
 
   const {
     id = '',
     class: className = '',
     loading = false,
     disabled = false,
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
     onsubmit,
     onreset,
     onerror,
@@ -65,9 +69,7 @@
     }
   }
 
-  function handleReset(e: Event) {
-    e.preventDefault()
-    formElement?.reset()
+  function handleReset() {
     onreset?.()
   }
 
@@ -94,7 +96,9 @@
       onsubmit={handleSubmit}
       onreset={handleReset}
 >
-  {#if children}
-    {@render children()}
-  {/if}
+  <FormLayout {columns} {labelPosition} {labelWidth}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </FormLayout>
 </form>

package/dist/components/compounds/FormField.svelte

@@ -9,6 +9,9 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, FormFieldProps } from '../../types.js'
+  import { setContext } from 'svelte'
+  import { FORM_FIELD_CONTEXT, getFormLayoutContext } from '../../internal/form-context.js'
+  import { resolveFormText } from '../../internal/form-validation.svelte.js'
   import { cn, getDataAttributes } from '../../utils.js'
 
   const {
@@ -16,43 +19,105 @@
     error = '',
     hint = '',
     required = false,
+    for: providedControlId,
+    labelPosition,
+    labelWidth,
+    colSpan = 'auto',
     class: className = '',
     children,
     ...restProps
   }: FormFieldProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const layout = getFormLayoutContext()
+  const uniqueId = $props.id()
+  const controlId = $derived(providedControlId ?? `${uniqueId}-control`)
+  const messageId = `${uniqueId}-message`
+  const labelId = `${uniqueId}-label`
+  const resolvedLabel = $derived(resolveFormText(label))
+  const resolvedError = $derived(resolveFormText(error))
+  const resolvedHint = $derived(resolveFormText(hint))
+  const position = $derived(labelPosition ?? layout?.labelPosition ?? 'top')
+  const width = $derived(labelWidth ?? layout?.labelWidth ?? '8rem')
+  setContext(FORM_FIELD_CONTEXT, {
+    get controlId() { return controlId },
+    get labelId() { return labelId },
+    get messageId() { return resolvedError || resolvedHint ? messageId : undefined },
+    get error() { return resolvedError },
+  })
   const fieldClass = $derived(
     cn(
-      'fieldset w-full',
+      'hai-form-field w-full min-w-0',
       className,
     ),
   )
 </script>
 
-<div {...dataAttributes} class={fieldClass}>
-  {#if label}
-    <legend class='fieldset-legend'>
-      {label}
+<div {...dataAttributes} class={fieldClass} data-col-span={colSpan} data-label-position={position} style:--hai-form-label-width={width}>
+  {#if resolvedLabel}
+    <label id={labelId} for={controlId} class='field-label text-sm font-medium text-base-content/70'>
+      {resolvedLabel}
       {#if required}
         <span class='text-error'>*</span>
       {/if}
-    </legend>
+    </label>
   {/if}
 
-  <div class='field-content'>
+  <div class='field-content min-w-0'>
     {#if children}
       {@render children()}
     {/if}
   </div>
 
-  {#if error || hint}
-    <div>
-      {#if error}
-        <span class='fieldset-label text-error'>{error}</span>
-      {:else if hint}
-        <span class='fieldset-label text-base-content/60'>{hint}</span>
+  {#if resolvedError || resolvedHint}
+    <div id={messageId} class='field-message text-xs leading-relaxed break-words' aria-live='polite'>
+      {#if resolvedError}
+        <span class='text-error'>{resolvedError}</span>
+      {:else if resolvedHint}
+        <span class='text-base-content/60'>{resolvedHint}</span>
       {/if}
     </div>
   {/if}
 </div>
+
+<style>
+  .hai-form-field {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.375rem 1rem;
+  }
+
+  .field-label {
+    overflow-wrap: anywhere;
+  }
+
+  .field-content > :global(.fieldset) {
+    padding-block: 0;
+  }
+
+  .hai-form-field[data-label-position='left']:has(.field-label) {
+    grid-template-columns: minmax(0, var(--hai-form-label-width)) minmax(0, 1fr);
+  }
+
+  .hai-form-field[data-label-position='left'] .field-label {
+    padding-top: 0.5rem;
+  }
+
+  .hai-form-field[data-label-position='left']:has(.field-label) .field-message {
+    grid-column: 2;
+  }
+
+  @container hai-form (max-width: 27.99rem) {
+    .hai-form-field[data-label-position='left']:has(.field-label) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .hai-form-field[data-label-position='left'] .field-label {
+      padding-top: 0;
+    }
+
+    .hai-form-field[data-label-position='left']:has(.field-label) .field-message {
+      grid-column: 1;
+    }
+  }
+</style>

package/dist/components/compounds/FormLayout.svelte

@@ -0,0 +1,59 @@
+<!-- 表单字段布局，供 Form 和原生表单/场景组件共同复用。 -->
+<script lang='ts'>
+  import type { FormLayoutProps } from '../../types.js'
+  import { setContext } from 'svelte'
+  import { FORM_LAYOUT_CONTEXT } from '../../internal/form-context.js'
+  import { cn, getDataAttributes } from '../../utils.js'
+
+  const {
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
+    class: className = '',
+    children,
+    ...restProps
+  }: FormLayoutProps = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
+  setContext(FORM_LAYOUT_CONTEXT, {
+    get labelPosition() { return labelPosition },
+    get labelWidth() { return labelWidth },
+  })
+</script>
+
+<div {...dataAttributes} class={cn('hai-form-layout', className)}>
+  <div class='hai-form-grid' data-columns={columns}>
+    {#if children}{@render children()}{/if}
+  </div>
+</div>
+
+<style>
+  .hai-form-layout {
+    container: hai-form / inline-size;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .hai-form-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--hai-form-gap, 1rem);
+    align-items: start;
+  }
+
+  .hai-form-grid > :global(*) {
+    min-width: 0;
+  }
+
+  @container hai-form (min-width: 36rem) {
+    .hai-form-grid[data-columns='2'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .hai-form-grid[data-columns='2'] > :global(:not(.hai-form-field)),
+    .hai-form-grid[data-columns='2'] > :global(.hai-form-field[data-col-span='2']),
+    .hai-form-grid[data-columns='2'] > :global(.hai-form-field[data-col-span='auto']:has(textarea, input[type='file'], [data-form-wide], [aria-multiselectable='true'])) {
+      grid-column: 1 / -1;
+    }
+  }
+</style>

package/dist/components/compounds/FormLayout.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FormLayoutProps } from '../../types.js';
+declare const FormLayout: import("svelte").Component<FormLayoutProps, {}, "">;
+type FormLayout = ReturnType<typeof FormLayout>;
+export default FormLayout;

package/dist/components/compounds/TagInput.svelte

@@ -82,7 +82,7 @@
   }
 </script>
 
-<div {...dataAttributes} class='fieldset w-full'>
+<div {...dataAttributes} class='fieldset w-full' data-form-wide>
   <div
     class={containerClass}
     onclick={() => inputElement?.focus()}

package/dist/components/compounds/index.d.ts

@@ -24,6 +24,7 @@ export { default as Dropdown } from './Dropdown.svelte';
 export { default as Empty } from './Empty.svelte';
 export { default as Form } from './Form.svelte';
 export { default as FormField } from './FormField.svelte';
+export { default as FormLayout } from './FormLayout.svelte';
 export { default as InfiniteScroll } from './InfiniteScroll.svelte';
 export { default as MessageBoxContainer } from './MessageBoxContainer.svelte';
 export { default as MessageBoxDialog } from './MessageBoxDialog.svelte';

package/dist/components/compounds/index.js

@@ -31,6 +31,7 @@ export { default as Empty } from './Empty.svelte';
 // 表单组合
 export { default as Form } from './Form.svelte';
 export { default as FormField } from './FormField.svelte';
+export { default as FormLayout } from './FormLayout.svelte';
 // 无限滚动 / 上拉加载
 export { default as InfiniteScroll } from './InfiniteScroll.svelte';
 // MessageBox 命令式弹框（类似 ElementUI MessageBox）

package/dist/components/primitives/BareInput.svelte

@@ -9,6 +9,7 @@
 -->
 <script lang='ts'>
   import type { BareInputProps, DataAttributes } from '../../types.js'
+  import { getFormFieldContext } from '../../internal/form-context.js'
   import { getDataAttributes } from '../../utils.js'
 
   let {
@@ -37,6 +38,8 @@
     ariaExpanded,
     ariaControls,
     ariaAutocomplete,
+    ariaInvalid,
+    ariaDescribedby,
     oninput,
     onchange,
     onkeydown,
@@ -47,6 +50,7 @@
   }: BareInputProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const field = getFormFieldContext()
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
     // 文件输入的 value 由浏览器管理，不能把 fakepath 写回原生控件。
     if (type !== 'file')
@@ -73,7 +77,9 @@
 
 <input {...dataAttributes}
        bind:this={inputRef}
-       {id}
+       id={id ?? field?.controlId}
+       aria-invalid={ariaInvalid ?? (field?.error ? true : undefined)}
+       aria-describedby={ariaDescribedby ?? field?.messageId}
        {name}
        {type}
        {placeholder}

package/dist/components/primitives/Checkbox.svelte

@@ -9,10 +9,12 @@
 -->
 <script lang='ts'>
   import type { CheckboxProps, DataAttributes } from '../../types.js'
-  import { cn, generateId, getDataAttributes, getSizeClass } from '../../utils.js'
+  import { getFormFieldContext } from '../../internal/form-context.js'
+  import { cn, getDataAttributes, getSizeClass } from '../../utils.js'
 
   let {
     checked = $bindable(false),
+    id: providedId,
     label = '',
     size = 'md',
     disabled = false,
@@ -24,7 +26,9 @@
   }: CheckboxProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  const id = generateId('checkbox')
+  const field = getFormFieldContext()
+  const uniqueId = $props.id()
+  const id = $derived(providedId ?? uniqueId)
 
   const checkboxClass = $derived(
     cn(
@@ -46,6 +50,8 @@
   <label class='label cursor-pointer gap-2' for={id}>
     <input
       {id}
+      aria-invalid={field?.error ? true : undefined}
+      aria-describedby={field?.messageId}
       type='checkbox'
       class={checkboxClass}
       disabled={disabled || readonly}

package/dist/components/primitives/Input.svelte

@@ -4,6 +4,8 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, InputProps } from '../../types.js'
+  import { getFormFieldContext } from '../../internal/form-context.js'
+  import { createControlValidation, resolveFormText } from '../../internal/form-validation.svelte.js'
   import { cn, getDataAttributes } from '../../utils.js'
   import { getFormControlSizeClasses } from '../control-size.js'
 
@@ -40,6 +42,17 @@
   }: InputProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const field = getFormFieldContext()
+  const validation = createControlValidation(() => validationMessage, () => [value, required, readonly, disabled, pattern, min, max, minlength, maxlength, step])
+  const uniqueId = $props.id()
+  const messageId = `${uniqueId}-error`
+  const localError = $derived(resolveFormText(error) || validation.message)
+  const effectiveError = $derived(field?.error || localError)
+  $effect(() => {
+    // 修正输入后清除旧的 customError，切换语言时同步原生提示。
+    if (inputRef)
+      inputRef.setCustomValidity(validation.message)
+  })
   const sizeClasses = $derived(getFormControlSizeClasses(size))
 
   const inputTypeClass = $derived(
@@ -52,7 +65,7 @@
     cn(
       'flex items-center w-full rounded-lg border bg-base-100',
       sizeClasses.height,
-      error
+      effectiveError
         ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
         : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
       'transition-[border-color,box-shadow] duration-150',
@@ -62,9 +75,7 @@
   )
 
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity('')
-    }
+    validation.input(e.currentTarget)
     value = e.currentTarget.value
     oninput?.(e)
   }
@@ -86,9 +97,7 @@
   }
 
   function handleInvalid(e: Event & { currentTarget: HTMLInputElement }) {
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
-    }
+    validation.invalid(e.currentTarget)
     oninvalid?.(e)
   }
 </script>
@@ -97,7 +106,9 @@
   <div class={containerClass}>
     <input
       bind:this={inputRef}
-      {id}
+      id={id ?? field?.controlId}
+      aria-invalid={effectiveError ? true : undefined}
+      aria-describedby={[field?.messageId, localError && !field?.error ? messageId : ''].filter(Boolean).join(' ') || undefined}
       {name}
       {type}
       {placeholder}
@@ -114,7 +125,7 @@
       inputmode={inputmode}
       autocomplete={autocomplete as HTMLInputElement['autocomplete']}
       class={cn(
-        'flex-1 h-full bg-transparent border-none outline-none placeholder:text-base-content/35',
+        'flex-1 min-w-0 h-full bg-transparent border-none outline-none placeholder:text-base-content/35',
         sizeClasses.spacing,
         inputTypeClass,
       )}
@@ -127,7 +138,7 @@
       oninvalid={handleInvalid}
     />
   </div>
-  {#if error}
-    <p class='mt-1.5 text-xs text-error/80 leading-tight'>{error}</p>
+  {#if localError && !field?.error}
+    <p id={messageId} class='mt-1.5 text-xs text-error leading-relaxed break-words' aria-live='polite'>{localError}</p>
   {/if}
 </div>