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

package/dist/types.d.ts

@@ -5,6 +5,13 @@
  * @module types
  */
 import type { Snippet } from 'svelte';
+/**
+ * 可转发到组件根节点或主交互节点的 data-* 属性。
+ */
+export type DataAttributeValue = string | number | boolean | null | undefined;
+export interface DataAttributes {
+    [key: `data-${string}`]: DataAttributeValue;
+}
 /**
  * 基础变体类型
  */
@@ -24,7 +31,7 @@ export type Alignment = 'start' | 'center' | 'end';
 /**
  * 按钮属性
  */
-export interface ButtonProps {
+export interface ButtonProps extends DataAttributes {
     /** 变体 */
     variant?: Variant;
     /** 尺寸 */
@@ -53,7 +60,7 @@ export interface ButtonProps {
 /**
  * 无样式按钮属性
  */
-export interface BareButtonProps {
+export interface BareButtonProps extends DataAttributes {
     /** 按钮类型 */
     type?: 'button' | 'submit' | 'reset';
     /** 是否禁用 */
@@ -78,7 +85,7 @@ export interface BareButtonProps {
 /**
  * 输入框属性
  */
-export interface InputProps {
+export interface InputProps extends DataAttributes {
     /** 值 */
     value?: string;
     /** 占位符 */
@@ -151,7 +158,7 @@ export interface InputProps {
 /**
  * 无样式输入框属性
  */
-export interface BareInputProps {
+export interface BareInputProps extends DataAttributes {
     /** 值 */
     value?: string;
     /** 占位符 */
@@ -230,7 +237,7 @@ export interface BareInputProps {
 /**
  * 文本域属性
  */
-export interface TextareaProps {
+export interface TextareaProps extends DataAttributes {
     /** 值 */
     value?: string;
     /** 占位符 */
@@ -276,7 +283,7 @@ export interface SelectOption<T = string> {
 /**
  * 选择框属性
  */
-export interface SelectProps<T = string> {
+export interface SelectProps<T = string> extends DataAttributes {
     /** 值 */
     value?: T;
     /** 选项（使用 options 或 children 二选一） */
@@ -305,7 +312,7 @@ export interface SelectProps<T = string> {
 /**
  * 复选框属性
  */
-export interface CheckboxProps {
+export interface CheckboxProps extends DataAttributes {
     /** 是否选中 */
     checked?: boolean;
     /** 标签 */
@@ -326,7 +333,7 @@ export interface CheckboxProps {
 /**
  * 开关属性
  */
-export interface SwitchProps {
+export interface SwitchProps extends DataAttributes {
     /** 是否开启 */
     checked?: boolean;
     /** 标签 */
@@ -343,7 +350,7 @@ export interface SwitchProps {
 /**
  * 原生开关输入（用于折叠/抽屉等结构要求 input 直系子元素的场景）
  */
-export interface ToggleCheckboxProps {
+export interface ToggleCheckboxProps extends DataAttributes {
     /** 是否选中 */
     checked?: boolean;
     /** 表单字段名称 */
@@ -357,7 +364,7 @@ export interface ToggleCheckboxProps {
     /** 变化事件 */
     onchange?: (checked: boolean) => void;
 }
-export interface ToggleRadioProps {
+export interface ToggleRadioProps extends DataAttributes {
     /** 是否选中 */
     checked?: boolean;
     /** 表单字段名称 */
@@ -374,7 +381,7 @@ export interface ToggleRadioProps {
 /**
  * 单选框属性
  */
-export interface RadioProps<T = string> {
+export interface RadioProps<T = string> extends DataAttributes {
     /** 值 */
     value?: T;
     /** 选项 */
@@ -395,7 +402,7 @@ export interface RadioProps<T = string> {
 /**
  * 徽章属性
  */
-export interface BadgeProps {
+export interface BadgeProps extends DataAttributes {
     /** 变体 */
     variant?: Variant;
     /** 尺寸 */
@@ -410,7 +417,7 @@ export interface BadgeProps {
 /**
  * 卡片属性
  */
-export interface CardProps {
+export interface CardProps extends DataAttributes {
     /** 标题 */
     title?: string;
     /** 是否有边框 */
@@ -431,7 +438,7 @@ export interface CardProps {
 /**
  * 模态框属性
  */
-export interface ModalProps {
+export interface ModalProps extends DataAttributes {
     /** 是否打开 */
     open?: boolean;
     /** 标题 */
@@ -468,7 +475,7 @@ export interface ModalProps {
 /**
  * 抽屉属性
  */
-export interface DrawerProps {
+export interface DrawerProps extends DataAttributes {
     /** 是否打开 */
     open?: boolean;
     /** 标题 */
@@ -493,7 +500,7 @@ export interface DrawerProps {
 /**
  * 提示框属性
  */
-export interface TooltipProps {
+export interface TooltipProps extends DataAttributes {
     /** 提示内容 */
     content: string;
     /** 位置 */
@@ -508,7 +515,7 @@ export interface TooltipProps {
 /**
  * 加载属性
  */
-export interface SpinnerProps {
+export interface SpinnerProps extends DataAttributes {
     /** 尺寸 */
     size?: Size;
     /** 变体 */
@@ -519,7 +526,7 @@ export interface SpinnerProps {
 /**
  * 进度条属性
  */
-export interface ProgressProps {
+export interface ProgressProps extends DataAttributes {
     /** 值 (0-100) */
     value: number;
     /** 最大值 */
@@ -542,7 +549,7 @@ export interface ProgressProps {
 /**
  * 警告框属性
  */
-export interface AlertProps {
+export interface AlertProps extends DataAttributes {
     /** 变体 */
     variant?: Variant;
     /** 标题 */
@@ -559,7 +566,7 @@ export interface AlertProps {
 /**
  * Toast 属性
  */
-export interface ToastProps {
+export interface ToastProps extends DataAttributes {
     /** 消息 */
     message: string;
     /** 变体 */
@@ -576,7 +583,7 @@ export interface ToastProps {
 /**
  * 分页属性
  */
-export interface PaginationProps {
+export interface PaginationProps extends DataAttributes {
     /** 当前页 */
     page: number;
     /** 总数 */
@@ -629,7 +636,7 @@ export interface BreadcrumbItem {
 /**
  * 面包屑属性
  */
-export interface BreadcrumbProps {
+export interface BreadcrumbProps extends DataAttributes {
     /** 项目 */
     items: BreadcrumbItem[];
     /** 分隔符 */
@@ -653,7 +660,7 @@ export interface TabItem {
 /**
  * 标签页属性
  */
-export interface TabsProps {
+export interface TabsProps extends DataAttributes {
     /** 标签项 */
     items: TabItem[];
     /** 当前激活的标签 */
@@ -672,7 +679,7 @@ export interface TabsProps {
 /**
  * 头像属性
  */
-export interface AvatarProps {
+export interface AvatarProps extends DataAttributes {
     /** 图片地址 */
     src?: string;
     /** 替代文本 */
@@ -708,7 +715,7 @@ export interface DropdownItem {
 /**
  * 下拉菜单属性
  */
-export interface DropdownProps {
+export interface DropdownProps extends DataAttributes {
     /** 菜单项 */
     items: DropdownItem[];
     /** 触发方式 */
@@ -727,7 +734,7 @@ export interface DropdownProps {
 /**
  * 表单属性
  */
-export interface FormProps {
+export interface FormProps extends DataAttributes {
     /** 表单 ID */
     id?: string;
     /** 自定义类名 */
@@ -748,7 +755,7 @@ export interface FormProps {
 /**
  * 表单字段属性
  */
-export interface FormFieldProps {
+export interface FormFieldProps extends DataAttributes {
     /** 标签 */
     label?: string;
     /** 字段名 */
@@ -767,7 +774,7 @@ export interface FormFieldProps {
 /**
  * 骨架屏属性
  */
-export interface SkeletonProps {
+export interface SkeletonProps extends DataAttributes {
     /** 变体 */
     variant?: 'text' | 'title' | 'avatar' | 'thumbnail' | 'button' | 'input';
     /** 宽度 */
@@ -786,7 +793,7 @@ export interface SkeletonProps {
 /**
  * 空状态属性
  */
-export interface EmptyProps {
+export interface EmptyProps extends DataAttributes {
     /** 标题 */
     title?: string;
     /** 描述 */
@@ -805,7 +812,7 @@ export interface EmptyProps {
 /**
  * 结果页属性
  */
-export interface ResultProps {
+export interface ResultProps extends DataAttributes {
     /** 状态 */
     status?: 'success' | 'error' | 'warning' | 'info';
     /** 标题 */
@@ -824,7 +831,7 @@ export interface ResultProps {
 /**
  * 确认对话框属性
  */
-export interface ConfirmProps {
+export interface ConfirmProps extends DataAttributes {
     /** 是否打开 */
     open?: boolean;
     /** 标题 */
@@ -849,7 +856,7 @@ export interface ConfirmProps {
 /**
  * 标签属性
  */
-export interface TagProps {
+export interface TagProps extends DataAttributes {
     /** 文本 */
     text?: string;
     /** 变体 */
@@ -872,7 +879,7 @@ export interface TagProps {
 /**
  * 标签输入框属性
  */
-export interface TagInputProps {
+export interface TagInputProps extends DataAttributes {
     /** 标签列表 */
     tags?: string[];
     /** 占位符 */
@@ -904,7 +911,7 @@ export interface StepItem {
 /**
  * 步骤条属性
  */
-export interface StepsProps {
+export interface StepsProps extends DataAttributes {
     /** 步骤列表 */
     items?: StepItem[];
     /** 当前步骤 */
@@ -923,7 +930,7 @@ export interface StepsProps {
 /**
  * 图标按钮属性
  */
-export interface IconButtonProps {
+export interface IconButtonProps extends DataAttributes {
     /** 图标（受信任的内联 SVG 字符串或 Snippet） */
     icon?: string | Snippet;
     /** 标签（无障碍） */
@@ -950,7 +957,7 @@ export interface IconButtonProps {
 /**
  * 弹出层属性
  */
-export interface PopoverProps {
+export interface PopoverProps extends DataAttributes {
     /** 是否打开 */
     open?: boolean;
     /** 位置 */

package/dist/utils.d.ts

@@ -4,7 +4,7 @@
  * CSS 类名处理工具
  * @module utils
  */
-import type { Size, Variant } from './types.js';
+import type { DataAttributes, Size, Variant } from './types.js';
 /**
  * 合并类名（支持 Tailwind 类冲突消解）
  *
@@ -12,6 +12,11 @@ import type { Size, Variant } from './types.js';
  * @returns 合并后的类名字符串
  */
 export declare function cn(...classes: (string | boolean | undefined | null)[]): string;
+export type ForwardedDataAttributes = Record<`data-${string}`, string | number | boolean>;
+/**
+ * 从组件未声明 props 中提取 data-* 属性，避免把普通未知属性透传到 DOM。
+ */
+export declare function getDataAttributes(props: DataAttributes | Record<string, unknown>): ForwardedDataAttributes;
 /**
  * 获取变体类名
  */

package/dist/utils.js

@@ -14,6 +14,21 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...classes) {
     return twMerge(classes.filter(Boolean).join(' '));
 }
+/**
+ * 从组件未声明 props 中提取 data-* 属性，避免把普通未知属性透传到 DOM。
+ */
+export function getDataAttributes(props) {
+    const dataAttributes = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (!key.startsWith('data-') || value === null || value === undefined) {
+            continue;
+        }
+        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+            dataAttributes[key] = value;
+        }
+    }
+    return dataAttributes;
+}
 /**
  * 已知前缀的变体类名静态映射
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.29",
+  "version": "0.1.0-alpha.30",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -51,7 +51,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.29"
+    "@h-ai/core": "0.1.0-alpha.30"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",