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

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

@@ -9,9 +9,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { ForgotPasswordFormData, ForgotPasswordFormProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
@@ -30,8 +31,10 @@
     onsubmit,
     header,
     footer,
-  }: ForgotPasswordFormProps = $props()
+    ...restProps
+  }: ForgotPasswordFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let email = $state('')
   let phone = $state('')
 
@@ -65,7 +68,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-2xl font-semibold text-center mb-4'>{uiM('forgot_password_title')}</h2>

package/dist/components/scenes/iam/ForgotPasswordForm.svelte.d.ts

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

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

@@ -3,9 +3,10 @@
   用户登录表单组件，搭配 primitives/compounds 使用。
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { LoginFormData, LoginFormProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
   import BareButton from '../../primitives/BareButton.svelte'
   import Button from '../../primitives/Button.svelte'
@@ -30,8 +31,10 @@
     onforgotpassword,
     header,
     footer,
-  }: LoginFormProps = $props()
+    ...restProps
+  }: LoginFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const hasAgreements = $derived(
     !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
   )
@@ -66,7 +69,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-xl font-semibold text-center mb-5'>{uiM('login_title')}</h2>

package/dist/components/scenes/iam/LoginForm.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { DataAttributes } from '../../../types.js';
 import type { LoginFormProps } from '../types.js';
+type $$ComponentProps = LoginFormProps & DataAttributes;
 /**
  * LoginForm
  * 用户登录表单组件，搭配 primitives/compounds 使用。
  */
-declare const LoginForm: import("svelte").Component<LoginFormProps, {}, "">;
+declare const LoginForm: import("svelte").Component<$$ComponentProps, {}, "">;
 type LoginForm = ReturnType<typeof LoginForm>;
 export default LoginForm;

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

@@ -4,9 +4,9 @@
   内置多语言支持，自动跟随全局 locale。
 -->
 <script lang='ts'>
-  import type { Size } from '../../../types.js'
+  import type { DataAttributes, Size } from '../../../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
   import BareInput from '../../primitives/BareInput.svelte'
   import Progress from '../../primitives/Progress.svelte'
@@ -71,8 +71,10 @@
     oninput,
     onchange,
     oninvalid,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let showPassword = $state(false)
 
   // 容器高度（与 Input 组件一致）
@@ -146,7 +148,7 @@
   }
 </script>
 
-<div class='fieldset w-full'>
+<div {...dataAttributes} class='fieldset w-full'>
   <!-- 输入框容器 -->
   <div class={cn(
     'flex items-center w-full rounded-lg border bg-base-100',

package/dist/components/scenes/iam/PasswordInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Size } from '../../../types.js';
+import type { DataAttributes, Size } from '../../../types.js';
 interface Props {
     /** 元素 ID */
     id?: string;
@@ -41,11 +41,12 @@ interface Props {
         currentTarget: HTMLInputElement;
     }) => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * PasswordInput
  * 密码输入框组件，支持显示/隐藏切换和密码强度指示。
  * 内置多语言支持，自动跟随全局 locale。
  */
-declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "inputRef">;
+declare const PasswordInput: import("svelte").Component<$$ComponentProps, {}, "value" | "inputRef">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;

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

@@ -3,10 +3,10 @@
   用户注册表单组件，搭配 primitives/compounds 使用。
 -->
 <script lang='ts'>
-  import type { InputProps } from '../../../types.js'
+  import type { DataAttributes, InputProps } from '../../../types.js'
   import type { RegisterField, RegisterFormData, RegisterFormProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
@@ -29,8 +29,10 @@
     onsubmit,
     header,
     footer,
-  }: RegisterFormProps = $props()
+    ...restProps
+  }: RegisterFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const hasAgreements = $derived(
     !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
   )
@@ -159,7 +161,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-xl font-semibold text-center mb-5'>{uiM('register_title')}</h2>

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

@@ -1,8 +1,10 @@
+import type { DataAttributes } from '../../../types.js';
 import type { RegisterFormProps } from '../types.js';
+type $$ComponentProps = RegisterFormProps & DataAttributes;
 /**
  * RegisterForm
  * 用户注册表单组件，搭配 primitives/compounds 使用。
  */
-declare const RegisterForm: import("svelte").Component<RegisterFormProps, {}, "">;
+declare const RegisterForm: import("svelte").Component<$$ComponentProps, {}, "">;
 type RegisterForm = ReturnType<typeof RegisterForm>;
 export default RegisterForm;

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

@@ -3,9 +3,10 @@
   重置密码表单组件（配合验证码/链接使用）。
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { ResetPasswordFormData, ResetPasswordFormProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
@@ -26,8 +27,10 @@
     class: className = '',
     errors = {},
     onsubmit,
-  }: ResetPasswordFormProps = $props()
+    ...restProps
+  }: ResetPasswordFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let code = $state('')
   let newPassword = $state('')
   let confirmPassword = $state('')
@@ -65,7 +68,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-xl font-semibold text-center mb-4'>{uiM('reset_password_title')}</h2>

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

@@ -1,8 +1,10 @@
+import type { DataAttributes } from '../../../types.js';
 import type { ResetPasswordFormProps } from '../types.js';
+type $$ComponentProps = ResetPasswordFormProps & DataAttributes;
 /**
  * ResetPasswordForm
  * 重置密码表单组件（配合验证码/链接使用）。
  */
-declare const ResetPasswordForm: import("svelte").Component<ResetPasswordFormProps, {}, "">;
+declare const ResetPasswordForm: import("svelte").Component<$$ComponentProps, {}, "">;
 type ResetPasswordForm = ReturnType<typeof ResetPasswordForm>;
 export default ResetPasswordForm;

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

@@ -9,9 +9,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { UserProfileField, UserProfileProps, UserProfileSubmitData } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
   import Avatar from '../../primitives/Avatar.svelte'
   import BareInput from '../../primitives/BareInput.svelte'
@@ -29,8 +30,10 @@
     errors = {},
     onsubmit,
     onavatarchange,
-  }: UserProfileProps = $props()
+    ...restProps
+  }: UserProfileProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let editMode = $state(false)
   let formData = $state<UserProfileSubmitData>({
     username: '',
@@ -149,7 +152,7 @@
   }
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <form onsubmit={handleSubmit}>
     <div class='space-y-6'>
       {#each fields as field (field)}

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

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

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

@@ -8,9 +8,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { AvatarUploadProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
 
   const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
@@ -29,8 +30,10 @@
     class: className = '',
     onchange,
     onerror,
-  }: AvatarUploadProps = $props()
+    ...restProps
+  }: AvatarUploadProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
   let localPreviewUrl: string | null = $state(null)
@@ -216,12 +219,12 @@
   }
 </script>
 
-<div
-  class={containerClass}
-  role='button'
-  tabindex='0'
-  onclick={handleClick}
-  onkeydown={e => e.key === 'Enter' && handleClick()}
+<div {...dataAttributes}
+     class={containerClass}
+     role='button'
+     tabindex='0'
+     onclick={handleClick}
+     onkeydown={e => e.key === 'Enter' && handleClick()}
 >
   <BareInput
     type='file'

package/dist/components/scenes/storage/AvatarUpload.svelte.d.ts

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

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

@@ -8,9 +8,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { FileItem, FileListProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Button from '../../primitives/Button.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
 
@@ -27,8 +28,10 @@
     ondownload,
     ondelete,
     onpreview,
-  }: FileListProps = $props()
+    ...restProps
+  }: FileListProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let previewFile = $state<FileItem | null>(null)
 
   const containerClass = $derived(
@@ -109,7 +112,7 @@
 </script>
 
 {#if loading}
-  <div class='flex justify-center py-8'>
+  <div {...dataAttributes} class='flex justify-center py-8'>
     <span class='loading loading-spinner loading-lg'></span>
   </div>
 {:else if files.length === 0}

package/dist/components/scenes/storage/FileList.svelte.d.ts

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

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

@@ -9,10 +9,11 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { FileUploadProps, UploadFile } from '../types.js'
   import { SvelteMap } from 'svelte/reactivity'
   import { uiM } from '../../../messages.js'
-  import { cn, generateId } from '../../../utils.js'
+  import { cn, generateId, getDataAttributes } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
   import Progress from '../../primitives/Progress.svelte'
@@ -37,8 +38,10 @@
     onupload,
     onerror,
     onremove,
-  }: FileUploadProps = $props()
+    ...restProps
+  }: FileUploadProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let files = $state<UploadFile[]>([])
   let isDragging = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
@@ -361,7 +364,7 @@
   }
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <!-- 上传区域 -->
   <div
     class={dropzoneClass}

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

@@ -1,5 +1,7 @@
+import type { DataAttributes } from '../../../types.js';
 import type { FileUploadProps } from '../types.js';
-declare const FileUpload: import("svelte").Component<FileUploadProps, {
+type $$ComponentProps = FileUploadProps & DataAttributes;
+declare const FileUpload: import("svelte").Component<$$ComponentProps, {
     upload: () => Promise<void>;
     clear: () => void;
 }, "">;

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

@@ -9,9 +9,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { ImageUploadProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
   import Spinner from '../../primitives/Spinner.svelte'
@@ -33,8 +34,10 @@
     class: className = '',
     onchange,
     onerror,
-  }: ImageUploadProps = $props()
+    ...restProps
+  }: ImageUploadProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
   let previewUrl = $derived(value)
@@ -205,13 +208,13 @@
   }
 </script>
 
-<div
-  class={containerClass}
-  style={containerStyle}
-  role='button'
-  tabindex='0'
-  onclick={handleClick}
-  onkeydown={e => e.key === 'Enter' && handleClick()}
+<div {...dataAttributes}
+     class={containerClass}
+     style={containerStyle}
+     role='button'
+     tabindex='0'
+     onclick={handleClick}
+     onkeydown={e => e.key === 'Enter' && handleClick()}
 >
   <BareInput
     type='file'

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

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

package/dist/components/scenes/types.d.ts

@@ -5,11 +5,11 @@
  * @module types
  */
 import type { Snippet } from 'svelte';
-import type { Size } from '../../types.js';
+import type { DataAttributes, Size } from '../../types.js';
 /**
  * 密码输入框属性
  */
-export interface PasswordInputProps {
+export interface PasswordInputProps extends DataAttributes {
     /** 元素 ID */
     id?: string;
     /** 值 */
@@ -65,7 +65,7 @@ export interface LoginFormData {
 /**
  * 登录表单属性
  */
-export interface LoginFormProps {
+export interface LoginFormProps extends DataAttributes {
     /** 加载状态 */
     loading?: boolean;
     /** 禁用状态 */
@@ -117,7 +117,7 @@ export interface RegisterFormData {
 /**
  * 注册表单属性
  */
-export interface RegisterFormProps {
+export interface RegisterFormProps extends DataAttributes {
     /** 加载状态 */
     loading?: boolean;
     /** 禁用状态 */
@@ -162,7 +162,7 @@ export interface ChangePasswordFormData {
 /**
  * 修改密码表单属性
  */
-export interface ChangePasswordFormProps {
+export interface ChangePasswordFormProps extends DataAttributes {
     /** 加载状态 */
     loading?: boolean;
     /** 禁用状态 */
@@ -192,7 +192,7 @@ export interface ForgotPasswordFormData {
 /**
  * 找回密码表单属性
  */
-export interface ForgotPasswordFormProps {
+export interface ForgotPasswordFormProps extends DataAttributes {
     /** 加载状态 */
     loading?: boolean;
     /** 禁用状态 */
@@ -231,7 +231,7 @@ export interface ResetPasswordFormData {
 /**
  * 重置密码表单属性
  */
-export interface ResetPasswordFormProps {
+export interface ResetPasswordFormProps extends DataAttributes {
     /** 加载状态 */
     loading?: boolean;
     /** 禁用状态 */
@@ -287,7 +287,7 @@ export interface UserProfileSubmitData {
 /**
  * 用户个人信息属性
  */
-export interface UserProfileProps {
+export interface UserProfileProps extends DataAttributes {
     /** 用户信息 */
     user?: UserProfileData;
     /** 是否可编辑 */
@@ -338,7 +338,7 @@ export interface UploadFile {
 /**
  * 文件上传属性
  */
-export interface FileUploadProps {
+export interface FileUploadProps extends DataAttributes {
     /** 接受的文件类型 */
     accept?: string;
     /** 最大文件大小 (bytes) */
@@ -394,7 +394,7 @@ export interface FileItem {
 /**
  * 文件列表属性
  */
-export interface FileListProps {
+export interface FileListProps extends DataAttributes {
     /** 文件列表 */
     files?: FileItem[];
     /** 加载状态 */
@@ -423,7 +423,7 @@ export interface FileListProps {
 /**
  * 图片上传属性
  */
-export interface ImageUploadProps {
+export interface ImageUploadProps extends DataAttributes {
     /** 图片 URL */
     value?: string;
     /** 接受的文件类型 */
@@ -456,7 +456,7 @@ export interface ImageUploadProps {
 /**
  * 头像上传属性
  */
-export interface AvatarUploadProps {
+export interface AvatarUploadProps extends DataAttributes {
     /** 头像 URL */
     value?: string;
     /** 尺寸 */
@@ -485,7 +485,7 @@ export interface AvatarUploadProps {
 /**
  * 加密输入框属性
  */
-export interface EncryptedInputProps {
+export interface EncryptedInputProps extends DataAttributes {
     /** 原始值 */
     value?: string;
     /** 加密后的值 */
@@ -518,7 +518,7 @@ export interface EncryptedInputProps {
 /**
  * 哈希展示属性
  */
-export interface HashDisplayProps {
+export interface HashDisplayProps extends DataAttributes {
     /** 哈希值 */
     value?: string;
     /** 算法 */
@@ -541,7 +541,7 @@ export interface HashDisplayProps {
 /**
  * Markdown 渲染器属性
  */
-export interface MarkdownRendererProps {
+export interface MarkdownRendererProps extends DataAttributes {
     /** Markdown 源文本 */
     content?: string;
     /** 自定义类名 */
@@ -556,7 +556,7 @@ export interface MarkdownRendererProps {
 /**
  * 签名展示属性
  */
-export interface SignatureDisplayProps {
+export interface SignatureDisplayProps extends DataAttributes {
     /** 签名值 */
     signature?: string;
     /** 公钥 */