@h-ai/ui 0.1.0-alpha.29 → 0.1.0-alpha.31

package/dist/components/primitives/Range.svelte

@@ -9,7 +9,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import { cn } from '../../utils.js'
+  import type { DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import BareInput from './BareInput.svelte'
 
   interface Props {
@@ -49,8 +50,10 @@
     onchange,
     oninput,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeClass = $derived({
     xs: 'range-xs',
     sm: 'range-sm',
@@ -94,7 +97,7 @@
   }
 </script>
 
-<div class='w-full'>
+<div {...dataAttributes} class='w-full'>
   <BareInput
     type='range'
     class={rangeClass}

package/dist/components/primitives/Range.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 当前值 */
     value?: number;
@@ -22,6 +23,7 @@ interface Props {
     /** 自定义类名 */
     class?: string;
 }
-declare const Range: import("svelte").Component<Props, {}, "value">;
+type $$ComponentProps = Props & DataAttributes;
+declare const Range: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Range = ReturnType<typeof Range>;
 export default Range;

package/dist/components/primitives/Rating.svelte

@@ -9,8 +9,9 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 当前评分值 (0 - max) */
@@ -49,8 +50,10 @@
     name = `rating-${Math.random().toString(36).slice(2, 9)}`,
     onchange,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeClass = $derived({
     xs: 'rating-xs',
     sm: 'rating-sm',
@@ -110,7 +113,7 @@
 
 {#if readonly}
   <!-- 只读模式 - 使用 div 而非 input -->
-  <div class={cn('rating', sizeClass, className)}>
+  <div {...dataAttributes} class={cn('rating', sizeClass, className)}>
     {#each Array.from({ length: max }) as _, i (i)}
       <div
         class={cn(

package/dist/components/primitives/Rating.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 当前评分值 (0 - max) */
     value?: number;
@@ -22,6 +23,7 @@ interface Props {
     /** 自定义类名 */
     class?: string;
 }
-declare const Rating: import("svelte").Component<Props, {}, "value">;
+type $$ComponentProps = Props & DataAttributes;
+declare const Rating: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Rating = ReturnType<typeof Rating>;
 export default Rating;

package/dist/components/primitives/Select.svelte

@@ -2,15 +2,15 @@
   =============================================================================
   @h-ai/ui - Select 组件
   =============================================================================
-  下拉选择框组件
+  下拉选择框组件（全自定义实现，统一弹出层样式）
 
   使用 Svelte 5 Runes ($props, $derived, $bindable)
-  支持自定义验证消息（validationMessage）覆盖浏览器原生提示
+  支持 clearable（可清空）和 filterable（可筛选）属性
   =============================================================================
 -->
 <script lang='ts' generics="T = string">
-  import type { SelectProps } from '../../types.js'
-  import { cn, getSizeClass } from '../../utils.js'
+  import type { DataAttributes, SelectProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   let {
     value = $bindable<T>(),
@@ -19,76 +19,283 @@
     size = 'md',
     disabled = false,
     required = false,
+    clearable = false,
+    filterable = false,
     error = '',
-    validationMessage = '',
     class: className = '',
     id,
     onchange,
-    children,
-  }: SelectProps<T> = $props()
+    ...restProps
+  }: SelectProps<T> & DataAttributes = $props()
 
-  let selectRef: HTMLSelectElement | undefined = $state()
+  const dataAttributes = $derived(getDataAttributes(restProps))
+  let inputRef: HTMLInputElement | undefined = $state()
+  let dropdownRef: HTMLDivElement | undefined = $state()
+  let isDropdownOpen = $state(false)
+  let filterText = $state('')
+  let isHovered = $state(false)
 
-  const selectClass = $derived(
+  // 尺寸映射
+  const sizeClasses: Record<string, string> = {
+    xs: 'h-7 text-xs px-2',
+    sm: 'h-9 text-sm px-3',
+    md: 'h-10 text-sm px-3',
+    lg: 'h-12 text-base px-4',
+  }
+
+  // 选项文字尺寸
+  const optionTextClass = $derived(
+    size === 'xs'
+      ? 'text-xs'
+      : size === 'lg'
+      ? 'text-base'
+      : 'text-sm',
+  )
+
+  // 获取当前选中的标签
+  const selectedLabel = $derived(() => {
+    if (!options || !value)
+      return ''
+    const selected = options.find(opt => opt.value === value)
+    return selected ? selected.label : ''
+  })
+
+  // 过滤后的选项
+  const filteredOptions = $derived(() => {
+    if (!options)
+      return []
+    if (!filterable || !filterText)
+      return options
+    return options.filter(opt =>
+      opt.label.toLowerCase().includes(filterText.toLowerCase()),
+    )
+  })
+
+  const wrapperClass = $derived(
     cn(
-      'select w-full',
-      getSizeClass(size, 'input'),
-      error && 'select-error',
+      'relative flex w-full items-center rounded-lg border bg-base-100 cursor-pointer',
+      sizeClasses[size] || sizeClasses.md,
+      error
+        ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+        : isDropdownOpen
+        ? 'border-primary/50 ring-2 ring-primary/10'
+        : 'border-base-content/15 hover:border-base-content/25 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+      'transition-[border-color,box-shadow] duration-150',
+      disabled && 'opacity-50 cursor-not-allowed',
+    ),
+  )
+
+  const inputClass = $derived(
+    cn(
+      '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',
       className,
     ),
   )
 
-  // 当 validationMessage 变化时更新自定义验证消息
+  // 点击外部关闭下拉框
   $effect(() => {
-    if (selectRef) {
-      selectRef.setCustomValidity(validationMessage)
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
+        isDropdownOpen = false
+        filterText = ''
+      }
+    }
+
+    if (isDropdownOpen) {
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
     }
   })
 
-  function handleChange(e: Event & { currentTarget: HTMLSelectElement }) {
-    const selectedValue = e.currentTarget.value as T
-    value = selectedValue
-    // 选择后重置自定义验证
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
+  function handleWrapperClick() {
+    if (disabled)
+      return
+
+    if (!isDropdownOpen) {
+      isDropdownOpen = true
     }
-    onchange?.(selectedValue)
+
+    if (filterable) {
+      // filterable 模式下点击后始终聚焦输入框，保持下拉可筛状态
+      setTimeout(() => inputRef?.focus(), 0)
+    }
+  }
+
+  function handleOptionSelect(optionValue: T, optionDisabled?: boolean) {
+    if (optionDisabled)
+      return
+    value = optionValue
+    isDropdownOpen = false
+    filterText = ''
+    onchange?.(optionValue)
   }
 
-  function handleInvalid(e: Event & { currentTarget: HTMLSelectElement }) {
-    if (validationMessage) {
-      e.currentTarget.setCustomValidity(validationMessage)
+  function handleFilterInput(e: Event & { currentTarget: HTMLInputElement }) {
+    filterText = e.currentTarget.value
+    if (!isDropdownOpen) {
+      isDropdownOpen = true
     }
   }
+
+  function handleInputKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      isDropdownOpen = false
+      filterText = ''
+      inputRef?.blur()
+    }
+    else if (e.key === 'Enter') {
+      // 回车选中第一个匹配项
+      const opts = filteredOptions()
+      if (opts.length > 0 && !opts[0].disabled) {
+        handleOptionSelect(opts[0].value)
+      }
+    }
+    else if (e.key === 'Backspace' && filterText === '' && clearable && value) {
+      value = undefined as T
+      onchange?.(undefined as T)
+    }
+  }
+
+  function handleClear(e: MouseEvent) {
+    e.stopPropagation()
+    e.preventDefault()
+    value = undefined as T
+    filterText = ''
+    onchange?.(undefined as T)
+  }
+
+  // 判断是否显示清除按钮
+  const showClear = $derived(clearable && value !== undefined && value !== null && value !== '' && isHovered)
 </script>
 
-<div class='fieldset w-full'>
-  <select
-    bind:this={selectRef}
-    {id}
-    class={selectClass}
-    {disabled}
-    {required}
-    onchange={handleChange}
-    oninvalid={handleInvalid}
+<div
+  {...dataAttributes}
+  class='fieldset w-full'
+  bind:this={dropdownRef}
+  role='combobox'
+  aria-expanded={isDropdownOpen}
+  aria-haspopup='listbox'
+  onmouseenter={() => isHovered = true}
+  onmouseleave={() => isHovered = false}
+>
+  <div
+    class={wrapperClass}
+    onclick={handleWrapperClick}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        handleWrapperClick()
+      }
+    }}
+    role='presentation'
   >
-    {#if placeholder}
-      <option value="" disabled selected={!value}>{placeholder}</option>
+    {#if filterable}
+      <!-- 可筛选模式：可输入的 input -->
+      <input
+        bind:this={inputRef}
+        {id}
+        type='text'
+        class={inputClass}
+        {disabled}
+        {required}
+        {placeholder}
+        value={isDropdownOpen ? filterText : selectedLabel()}
+        oninput={handleFilterInput}
+        onkeydown={handleInputKeydown}
+        onfocus={() => {
+          if (!disabled && !isDropdownOpen)
+            isDropdownOpen = true
+        }}
+        role='combobox'
+        aria-autocomplete='list'
+        aria-controls='{id}-listbox'
+        aria-expanded={isDropdownOpen}
+      />
+    {:else}
+      <!-- 普通模式：只读 input 显示选中值 -->
+      <input
+        {id}
+        type='text'
+        class={inputClass}
+        readonly
+        {disabled}
+        {required}
+        {placeholder}
+        value={selectedLabel()}
+        tabindex='-1'
+      />
     {/if}
-    {#if children}
-      {@render children()}
-    {:else if options}
-      {#each options as option (String(option.value))}
-        <option
-          value={option.value as string}
-          disabled={option.disabled}
-          selected={value === option.value}
+
+    <!-- 右侧图标区域 -->
+    <div class='flex items-center pr-2 shrink-0'>
+      {#if showClear}
+        <button
+          type='button'
+          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='清空选择'
+        >
+          <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' />
+          </svg>
+        </button>
+      {:else}
+        <svg
+          class={cn('h-4 w-4 text-base-content/40 transition-transform duration-200', isDropdownOpen && 'rotate-180')}
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 20 20'
+          fill='currentColor'
         >
-          {option.label}
-        </option>
-      {/each}
+          <path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' />
+        </svg>
+      {/if}
+    </div>
+
+    <!-- 下拉选项列表 -->
+    {#if isDropdownOpen}
+      <ul
+        id='{id}-listbox'
+        class='absolute left-0 z-50 mt-2 w-full max-h-60 overflow-auto rounded-xl border border-base-content/10 bg-base-100 p-1.5 shadow-xl shadow-base-content/10'
+        role='listbox'
+        style='top: 100%;'
+      >
+        {#each filteredOptions() as option (String(option.value))}
+          <li
+            class={cn(
+              'flex cursor-pointer items-center rounded-lg px-3 py-2.5 transition-all duration-150',
+              optionTextClass,
+              option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-base-content/5 active:bg-base-content/8',
+              value === option.value && 'bg-primary/10 text-primary font-semibold',
+            )}
+            role='option'
+            aria-selected={value === option.value}
+            aria-disabled={option.disabled}
+            onclick={(e) => {
+              e.stopPropagation()
+              handleOptionSelect(option.value, option.disabled)
+            }}
+            onkeydown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                handleOptionSelect(option.value, option.disabled)
+              }
+            }}
+            tabindex={option.disabled ? -1 : 0}
+          >
+            {option.label}
+          </li>
+        {:else}
+          <li class={cn('px-3 py-3 text-base-content/40 text-center', optionTextClass)}>
+            无匹配选项
+          </li>
+        {/each}
+      </ul>
     {/if}
-  </select>
+  </div>
   {#if error}
     <span class='fieldset-label text-error'>{error}</span>
   {/if}

package/dist/components/primitives/Select.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { SelectProps } from '../../types.js';
+import type { DataAttributes, SelectProps } from '../../types.js';
 declare function $$render<T = string>(): {
-    props: SelectProps<T>;
+    props: SelectProps<T> & DataAttributes;
     exports: {};
     bindings: "value";
     slots: {};

package/dist/components/primitives/Spinner.svelte

@@ -8,15 +8,17 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { SpinnerProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, SpinnerProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     size = 'md',
     variant = 'primary',
     class: className = '',
-  }: SpinnerProps = $props()
+    ...restProps
+  }: SpinnerProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeMap = {
     'xs': 'loading-xs',
     'sm': 'loading-sm',
@@ -51,4 +53,4 @@
   )
 </script>
 
-<span class={spinnerClass}></span>
+<span {...dataAttributes} class={spinnerClass}></span>

package/dist/components/primitives/Spinner.svelte.d.ts

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

package/dist/components/primitives/Switch.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { SwitchProps } from '../../types.js'
-  import { cn, generateId, getSizeClass } from '../../utils.js'
+  import type { DataAttributes, SwitchProps } from '../../types.js'
+  import { cn, generateId, getDataAttributes, getSizeClass } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -18,8 +18,10 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: SwitchProps = $props()
+    ...restProps
+  }: SwitchProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const id = generateId('switch')
 
   const hasToggleColorVariant = $derived(
@@ -41,7 +43,7 @@
   }
 </script>
 
-<div class='inline-flex'>
+<div {...dataAttributes} class='inline-flex'>
   <label class='label cursor-pointer gap-2' for={id}>
     <input
       {id}

package/dist/components/primitives/Switch.svelte.d.ts

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

package/dist/components/primitives/Tag.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { TagProps } from '../../types.js'
-  import { cn, getSizeClass, getVariantClass } from '../../utils.js'
+  import type { DataAttributes, TagProps } from '../../types.js'
+  import { cn, getDataAttributes, getSizeClass, getVariantClass } from '../../utils.js'
   import IconButton from './IconButton.svelte'
 
   const {
@@ -23,8 +23,10 @@
     class: className = '',
     onclose,
     children,
-  }: TagProps = $props()
+    ...restProps
+  }: TagProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const tagClass = $derived(
     cn(
       'badge gap-1',
@@ -41,7 +43,7 @@
   }
 </script>
 
-<span class={tagClass}>
+<span {...dataAttributes} class={tagClass}>
   {#if children}
     {@render children()}
   {:else}

package/dist/components/primitives/Tag.svelte.d.ts

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

package/dist/components/primitives/Textarea.svelte

@@ -9,8 +9,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { TextareaProps } from '../../types.js'
-  import { cn, getInputSizeClass } from '../../utils.js'
+  import type { DataAttributes, TextareaProps } from '../../types.js'
+  import { cn, getDataAttributes, getInputSizeClass } from '../../utils.js'
 
   let {
     value = $bindable(''),
@@ -27,13 +27,26 @@
     id,
     name,
     oninput,
-  }: TextareaProps = $props()
+    ...restProps
+  }: TextareaProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let textareaRef: HTMLTextAreaElement | undefined = $state()
 
+  const wrapperClass = $derived(
+    cn(
+      'flex w-full rounded-lg border bg-base-100',
+      error
+        ? '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',
+      disabled && 'opacity-50 cursor-not-allowed',
+    ),
+  )
+
   const textareaClass = $derived(
     cn(
-      'textarea w-full',
+      'textarea w-full bg-transparent border-none outline-none',
       getInputSizeClass(size),
       error && 'textarea-error',
       className,
@@ -71,21 +84,23 @@
   }
 </script>
 
-<div class='fieldset w-full'>
-  <textarea
-    bind:this={textareaRef}
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {required}
-    class={textareaClass}
-    bind:value
-    oninput={handleInput}
-    oninvalid={handleInvalid}
-  ></textarea>
+<div {...dataAttributes} class='fieldset w-full'>
+  <div class={wrapperClass}>
+    <textarea
+      bind:this={textareaRef}
+      {id}
+      {name}
+      {placeholder}
+      {rows}
+      {disabled}
+      {readonly}
+      {required}
+      class={textareaClass}
+      bind:value
+      oninput={handleInput}
+      oninvalid={handleInvalid}
+    ></textarea>
+  </div>
   {#if error}
     <span class='fieldset-label text-error'>{error}</span>
   {/if}

package/dist/components/primitives/Textarea.svelte.d.ts

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