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

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/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/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)
   }
@@ -78,6 +89,7 @@
   }
 
   function handleBlur(e: FocusEvent & { currentTarget: HTMLInputElement }) {
+    validation.validate(e.currentTarget)
     onblur?.(e)
   }
 
@@ -86,9 +98,7 @@
   }
 
   function handleInvalid(e: Event & { currentTarget: HTMLInputElement }) {
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
-    }
+    validation.validate(e.currentTarget)
     oninvalid?.(e)
   }
 </script>
@@ -97,7 +107,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 +126,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 +139,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>

package/dist/components/primitives/Select.svelte

@@ -10,7 +10,10 @@
 -->
 <script lang='ts' generics="T = string">
   import type { DataAttributes, SelectProps } from '../../types.js'
-  import { tick } from 'svelte'
+  import { tick, untrack } from 'svelte'
+  import { getFormFieldContext } from '../../internal/form-context.js'
+  import { createControlValidation, resolveFormText } from '../../internal/form-validation.svelte.js'
+  import { uiM } from '../../messages.js'
   import { cn, getDataAttributes, portal } from '../../utils.js'
   import { getFormControlSizeClasses } from '../control-size.js'
 
@@ -24,13 +27,38 @@
     clearable = false,
     filterable = false,
     error = '',
+    validationMessage = '',
     class: className = '',
     id,
+    name,
     onchange,
     ...restProps
   }: SelectProps<T> & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const field = getFormFieldContext()
+  const uniqueId = $props.id()
+  const controlId = $derived(id ?? field?.controlId ?? `${uniqueId}-control`)
+  const messageId = `${uniqueId}-error`
+  const validation = createControlValidation(() => validationMessage)
+  const localError = $derived(resolveFormText(error) || validation.message)
+  const effectiveError = $derived(field?.error || localError)
+  let nativeSelect: HTMLSelectElement | undefined = $state()
+  // 独立保存原生选中值，筛选输入的文字不能代替表单实际选项。
+  const nativeValue = $derived(value === undefined || value === null ? '' : String(value))
+  $effect(() => {
+    void options
+    void required
+    void disabled
+    if (nativeSelect) {
+      nativeSelect.value = nativeValue
+      untrack(() => validation.input(nativeSelect!))
+    }
+  })
+  $effect(() => {
+    if (nativeSelect)
+      nativeSelect.setCustomValidity(validation.message)
+  })
   let inputRef: HTMLInputElement | undefined = $state()
   let dropdownRef: HTMLDivElement | undefined = $state()
   let triggerRef: HTMLDivElement | undefined = $state()
@@ -58,7 +86,7 @@
 
   // 获取当前选中的标签
   const selectedLabel = $derived(() => {
-    if (!options || !value)
+    if (!options || value === undefined || value === null)
       return ''
     const selected = options.find(opt => opt.value === value)
     return selected ? selected.label : ''
@@ -79,7 +107,7 @@
     cn(
       'relative flex w-full min-w-0 items-center rounded-lg border bg-base-100 cursor-pointer',
       sizeClasses.control,
-      error
+      effectiveError
         ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
         : isDropdownOpen
         ? 'border-primary/50 ring-2 ring-primary/10'
@@ -95,7 +123,7 @@
       'flex-1 min-w-0 bg-transparent outline-none border-none',
       'focus:outline-none focus:ring-0 focus:shadow-none',
       'placeholder:text-base-content/40',
-      error && 'text-error',
+      effectiveError && 'text-error',
     ),
   )
 
@@ -230,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>
@@ -238,12 +277,32 @@
   {...dataAttributes}
   class='fieldset w-full min-w-0'
   bind:this={dropdownRef}
-  role='combobox'
-  aria-expanded={isDropdownOpen}
-  aria-haspopup='listbox'
   onmouseenter={() => isHovered = true}
   onmouseleave={() => isHovered = false}
+  onfocusout={handleFocusOut}
 >
+  <select
+    bind:this={nativeSelect}
+    class='sr-only'
+    tabindex='-1'
+    aria-hidden='true'
+    {name}
+    {required}
+    {disabled}
+    value={nativeValue}
+    oninvalid={(e) => {
+      e.preventDefault()
+      validation.validate(e.currentTarget)
+      inputRef?.focus()
+    }}
+  >
+    <option value=''></option>
+    {#each options ?? [] as option (String(option.value))}
+      {#if String(option.value) !== ''}
+        <option value={String(option.value)} disabled={option.disabled}>{option.label}</option>
+      {/if}
+    {/each}
+  </select>
   <div
     class={wrapperClass}
     bind:this={triggerRef}
@@ -260,11 +319,12 @@
       <!-- 可筛选模式：可输入的 input -->
       <input
         bind:this={inputRef}
-        {id}
+        id={controlId}
+        aria-invalid={effectiveError ? true : undefined}
+        aria-describedby={[field?.messageId, localError && !field?.error ? messageId : ''].filter(Boolean).join(' ') || undefined}
         type='text'
         class={inputClass}
         {disabled}
-        {required}
         {placeholder}
         value={isDropdownOpen ? filterText : selectedLabel()}
         oninput={handleFilterInput}
@@ -274,22 +334,33 @@
             isDropdownOpen = true
         }}
         role='combobox'
+        aria-haspopup='listbox'
         aria-autocomplete='list'
-        aria-controls='{id}-listbox'
+        aria-controls='{controlId}-listbox'
         aria-expanded={isDropdownOpen}
       />
     {:else}
       <!-- 普通模式：只读 input 显示选中值 -->
       <input
-        {id}
+        bind:this={inputRef}
+        id={controlId}
+        aria-invalid={effectiveError ? true : undefined}
+        aria-describedby={[field?.messageId, localError && !field?.error ? messageId : ''].filter(Boolean).join(' ') || undefined}
         type='text'
         class={inputClass}
         readonly
         {disabled}
-        {required}
         {placeholder}
         value={selectedLabel()}
-        tabindex='-1'
+        onkeydown={handleInputKeydown}
+        onfocus={() => {
+          if (!disabled)
+            isDropdownOpen = true
+        }}
+        role='combobox'
+        aria-haspopup='listbox'
+        aria-controls='{controlId}-listbox'
+        aria-expanded={isDropdownOpen}
       />
     {/if}
 
@@ -301,7 +372,7 @@
           class='flex items-center justify-center w-5 h-5 rounded-full hover:bg-base-content/10 transition-colors'
           onclick={handleClear}
           tabindex='-1'
-          aria-label='清空选择'
+          aria-label={uiM('select_clear')}
         >
           <svg xmlns='http://www.w3.org/2000/svg' class='h-3.5 w-3.5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
             <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
@@ -324,10 +395,11 @@
       <ul
         bind:this={listboxRef}
         use:portal
-        id='{id}-listbox'
+        id='{controlId}-listbox'
         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
@@ -356,13 +428,13 @@
           </li>
         {:else}
           <li class={cn('px-3 py-3 text-base-content/40 text-center', optionTextClass)}>
-            无匹配选项
+            {uiM('select_no_match')}
           </li>
         {/each}
       </ul>
     {/if}
   </div>
-  {#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/primitives/Textarea.svelte

@@ -10,6 +10,8 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, TextareaProps } from '../../types.js'
+  import { getFormFieldContext } from '../../internal/form-context.js'
+  import { createControlValidation, resolveFormText } from '../../internal/form-validation.svelte.js'
   import { cn, getDataAttributes, getInputSizeClass } from '../../utils.js'
 
   let {
@@ -23,20 +25,30 @@
     autoResize = false,
     error = '',
     validationMessage = '',
+    minlength,
+    maxlength,
+    inputmode,
+    textareaRef = $bindable<HTMLTextAreaElement | undefined>(),
     class: className = '',
     id,
     name,
     oninput,
+    oninvalid,
     ...restProps
   }: TextareaProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  let textareaRef: HTMLTextAreaElement | undefined = $state()
+  const field = getFormFieldContext()
+  const validation = createControlValidation(() => validationMessage, () => [value, required, readonly, disabled, minlength, maxlength])
+  const uniqueId = $props.id()
+  const messageId = `${uniqueId}-error`
+  const localError = $derived(resolveFormText(error) || validation.message)
+  const effectiveError = $derived(field?.error || localError)
 
   const wrapperClass = $derived(
     cn(
       'flex w-full rounded-lg border bg-base-100',
-      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',
@@ -48,7 +60,7 @@
     cn(
       'textarea w-full bg-transparent border-none outline-none',
       getInputSizeClass(size),
-      error && 'textarea-error',
+      effectiveError && 'textarea-error',
       className,
     ),
   )
@@ -56,7 +68,7 @@
   // 当 validationMessage 变化时更新自定义验证消息
   $effect(() => {
     if (textareaRef) {
-      textareaRef.setCustomValidity(validationMessage)
+      textareaRef.setCustomValidity(validation.message)
     }
   })
 
@@ -70,17 +82,14 @@
     }
 
     // 输入时重置自定义验证
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
-    }
+    validation.input(e.currentTarget)
 
     oninput?.(e)
   }
 
   function handleInvalid(e: Event & { currentTarget: HTMLTextAreaElement }) {
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
-    }
+    validation.validate(e.currentTarget)
+    oninvalid?.(e)
   }
 </script>
 
@@ -88,20 +97,26 @@
   <div class={wrapperClass}>
     <textarea
       bind:this={textareaRef}
-      {id}
+      id={id ?? field?.controlId}
+      aria-invalid={effectiveError ? true : undefined}
+      aria-describedby={[field?.messageId, localError && !field?.error ? messageId : ''].filter(Boolean).join(' ') || undefined}
       {name}
       {placeholder}
       {rows}
       {disabled}
       {readonly}
       {required}
+      {minlength}
+      {maxlength}
+      {inputmode}
       class={textareaClass}
       bind:value
       oninput={handleInput}
+      onblur={e => validation.validate(e.currentTarget)}
       oninvalid={handleInvalid}
     ></textarea>
   </div>
-  {#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/primitives/Textarea.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DataAttributes, TextareaProps } from '../../types.js';
 type $$ComponentProps = TextareaProps & DataAttributes;
-declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value" | "textareaRef">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;