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

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',
     ),
   )
 
@@ -238,12 +266,31 @@
   {...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}
 >
+  <select
+    bind:this={nativeSelect}
+    class='sr-only'
+    tabindex='-1'
+    aria-hidden='true'
+    {name}
+    {required}
+    {disabled}
+    value={nativeValue}
+    oninvalid={(e) => {
+      e.preventDefault()
+      validation.invalid(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 +307,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 +322,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 +360,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,7 +383,7 @@
       <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'
@@ -356,13 +415,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.invalid(e.currentTarget)
+    oninvalid?.(e)
   }
 </script>
 
@@ -88,20 +97,25 @@
   <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}
       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;

package/dist/components/scenes/app/FeedbackModal.svelte

@@ -12,6 +12,8 @@
   />
 -->
 <script lang='ts'>
+  import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Modal from '../../compounds/Modal.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
@@ -47,18 +49,18 @@
     }
   }
 
-  import type { DataAttributes } from '../../../types.js'
+  import type { DataAttributes, FormLayoutOptions } from '../../../types.js'
   import { uiM } from '../../../messages.js'
   import { getDataAttributes } from '../../../utils.js'
 
-  interface Props {
+  interface Props extends FormLayoutOptions {
     open?: boolean
     labels?: FeedbackLabels
     onsubmit?: (data: FeedbackData) => Promise<void>
     class?: string
   }
 
-  let { open = $bindable(false), labels = {}, onsubmit, class: className = '', ...restProps }: Props & DataAttributes = $props()
+  let { open = $bindable(false), labels = {}, columns = 1, labelPosition = 'top', labelWidth = '8rem', onsubmit, class: className = '', ...restProps }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
   // 文案优先使用传入的 labels，缺省回退到内置消息 uiM(...)
@@ -67,7 +69,9 @@
   let description = $state('')
   let contact = $state('')
   let loading = $state(false)
-  let error = $state('')
+  let error = $state<'empty' | 'submit' | ''>('')
+  let submitError = $state('')
+  const errorText = $derived(error === 'empty' ? labels.errorEmpty ?? uiM('feedback_error_empty') : error === 'submit' ? submitError || labels.errorSubmit || uiM('feedback_error_submit') : '')
 
   const typeOptions = $derived([
     { value: 'bug', label: labels.types?.bug ?? uiM('feedback_type_bug') },
@@ -77,8 +81,10 @@
   ])
 
   async function handleSubmit() {
+    if (loading)
+      return
     if (!description.trim()) {
-      error = labels.errorEmpty ?? uiM('feedback_error_empty')
+      error = 'empty'
       return
     }
 
@@ -95,7 +101,8 @@
       resetForm()
     }
     catch (e) {
-      error = e instanceof Error ? e.message : (labels.errorSubmit ?? uiM('feedback_error_submit'))
+      submitError = e instanceof Error ? e.message : ''
+      error = 'submit'
     }
     finally {
       loading = false
@@ -107,41 +114,44 @@
     description = ''
     contact = ''
     error = ''
+    submitError = ''
   }
 </script>
 
 <Modal {...dataAttributes} class={className} bind:open title={labels.title ?? uiM('feedback_title')}>
   <p class='text-base-content/70 mb-4'>{labels.description ?? uiM('feedback_description')}</p>
 
-  {#if error}
+  {#if error === 'submit'}
     <div class='alert alert-error mb-4'>
       <span class='icon-[tabler--alert-circle] size-5'></span>
-      <span>{error}</span>
+      <span>{errorText}</span>
     </div>
   {/if}
 
-  <div class='space-y-4'>
-    <div class='fieldset'>
-      <legend class='fieldset-legend'>{labels.typeLabel ?? uiM('feedback_type_label')}</legend>
+  <FormLayout {columns} {labelPosition} {labelWidth}>
+    <FormField for='feedback-type' label={labels.typeLabel ?? uiM('feedback_type_label')}>
       <Select
         id='feedback-type'
         options={typeOptions}
         bind:value={feedbackType}
       />
-    </div>
+    </FormField>
 
-    <div class='fieldset'>
-      <legend class='fieldset-legend'>{labels.contentLabel ?? uiM('feedback_content_label')} <span class='text-error'>*</span></legend>
+    <FormField for='feedback-desc' label={labels.contentLabel ?? uiM('feedback_content_label')} required error={error === 'empty' ? errorText : ''}>
       <Textarea
         id='feedback-desc'
         class='h-32'
         placeholder={labels.contentPlaceholder ?? uiM('feedback_content_placeholder')}
         bind:value={description}
+        disabled={loading}
+        oninput={() => {
+          if (description.trim())
+            error = ''
+        }}
       />
-    </div>
+    </FormField>
 
-    <div class='fieldset'>
-      <legend class='fieldset-legend'>{labels.contactLabel ?? uiM('feedback_contact_label')}</legend>
+    <FormField for='feedback-contact' label={labels.contactLabel ?? uiM('feedback_contact_label')}>
       <Input
         id='feedback-contact'
         type='text'
@@ -150,8 +160,8 @@
         bind:value={contact}
         autocomplete='email'
       />
-    </div>
-  </div>
+    </FormField>
+  </FormLayout>
 
   {#snippet footer()}
     <Button variant='ghost' onclick={() => open = false}>

package/dist/components/scenes/app/FeedbackModal.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DataAttributes } from '../../../types.js';
+import type { DataAttributes, FormLayoutOptions } from '../../../types.js';
 type FeedbackType = 'bug' | 'feature' | 'question' | 'other';
 interface FeedbackData {
     type: FeedbackType;
@@ -25,7 +25,7 @@ interface FeedbackLabels {
         other?: string;
     };
 }
-interface Props {
+interface Props extends FormLayoutOptions {
     open?: boolean;
     labels?: FeedbackLabels;
     onsubmit?: (data: FeedbackData) => Promise<void>;