@h-ai/ui 0.1.0-alpha.39 → 0.1.0-alpha.41

package/dist/components/compounds/TableToolbar.svelte.d.ts

@@ -0,0 +1,129 @@
+import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
+/** 工具栏筛选字段定义。 */
+type FilterFieldDef = {
+    /** 筛选字段 key，同时作为回调中的属性名。 */
+    id: string;
+    /** 用户可见字段名。 */
+    label: string | (() => string);
+    /** 控件类型；date-range 会渲染起止日期输入。 */
+    type: string;
+    /** 控件占位文案。 */
+    placeholder?: string | (() => string);
+    /** 日期范围起始值 key。 */
+    startKey?: string;
+    /** 日期范围结束值 key。 */
+    endKey?: string;
+    /** 数值控件最小值。 */
+    min?: number;
+    /** 数值控件最大值。 */
+    max?: number;
+    /** 数值控件步长。 */
+    step?: number;
+    /** 选择类控件选项。 */
+    options?: Array<{
+        label: string;
+        value: string | number | boolean;
+    }> | (() => Array<{
+        label: string;
+        value: string | number | boolean;
+    }>);
+};
+/** TableToolbar 对外入参。 */
+type TableToolbarProps = {
+    /** 是否显示搜索框，默认 true。 */
+    searchable?: boolean;
+    /** 搜索框占位文案。 */
+    searchPlaceholder?: string;
+    /** 搜索框当前值，可通过 bind:searchValue 受控。 */
+    searchValue?: string;
+    /** 搜索框无障碍标签。 */
+    searchLabel?: string;
+    /** 可用筛选字段。 */
+    filterFields?: FilterFieldDef[];
+    /** 当前筛选值，可通过 bind:filterValues 受控。 */
+    filterValues?: Record<string, unknown>;
+    /** 可用排序列。 */
+    sortableColumns?: Array<{
+        key: string;
+        label: string;
+    }>;
+    /** 当前排序字段，可通过 bind:sortBy 受控。 */
+    sortBy?: string;
+    /** 当前排序方向。 */
+    sortDirection?: 'asc' | 'desc';
+    /** 当前视图模式，可通过 bind:viewMode 受控。 */
+    viewMode?: 'table' | 'card';
+    /** 是否显示表格/卡片切换。 */
+    showViewSwitch?: boolean;
+    /** 主操作按钮文案；为空时不显示。 */
+    primaryActionLabel?: string;
+    /** 工具栏左侧内容插槽，可放置页面标题、统计信息等非操作内容。 */
+    leading?: Snippet;
+    /** 工具栏右侧自定义操作插槽。 */
+    children?: Snippet;
+    /** 搜索提交回调。 */
+    onsearch?: (search: string) => void;
+    /** 筛选值变化回调。 */
+    onfilterchange?: (filters: Record<string, unknown>) => void;
+    /** 清空筛选回调。 */
+    onclearfilters?: () => void;
+    /** 排序变化回调。 */
+    onsort?: (key: string, direction: 'asc' | 'desc') => void;
+    /** 清空排序回调。 */
+    onclearsort?: () => void;
+    /** 视图变化回调。 */
+    onviewmodechange?: (mode: 'table' | 'card') => void;
+    /** 主操作点击回调。 */
+    onPrimaryAction?: () => void;
+    /** 根节点自定义 class。 */
+    class?: string;
+} & DataAttributes;
+/**
+ * TableToolbar
+ * 通用表格工具栏，支持搜索、筛选弹层、排序弹层、视图切换、主操作按钮和自定义按钮插槽。
+ *
+ * @prop {boolean} searchable - 是否显示搜索框
+ * @prop {string} searchPlaceholder - 搜索框占位文案
+ * @prop {string} searchValue - 搜索框当前值（bindable）
+ * @prop {string} searchLabel - 搜索框 aria-label
+ * @prop {FilterFieldDef[]} filterFields - 筛选字段配置
+ * @prop {Record<string, unknown>} filterValues - 当前筛选值（bindable）
+ * @prop {Array<{key: string, label: string}>} sortableColumns - 可排序列
+ * @prop {string} sortBy - 当前排序字段
+ * @prop {'asc' | 'desc'} sortDirection - 当前排序方向
+ * @prop {'table' | 'card'} viewMode - 当前视图模式
+ * @prop {boolean} showViewSwitch - 是否显示视图切换
+ * @prop {string} primaryActionLabel - 主操作按钮文案
+ * @prop {Snippet} leading - 工具栏左侧内容插槽，可用于页面标题或说明标签
+ * @prop {Snippet} children - 自定义按钮插槽
+ * @prop {Function} onsearch - 搜索回调
+ * @prop {Function} onfilterchange - 筛选变化回调
+ * @prop {Function} onclearfilters - 清空筛选回调
+ * @prop {Function} onsort - 排序回调
+ * @prop {Function} onclearsort - 清空排序回调
+ * @prop {Function} onviewmodechange - 视图切换回调
+ * @prop {Function} onPrimaryAction - 主操作回调
+ *
+ * @example
+ * <TableToolbar
+ *   searchable
+ *   searchPlaceholder="搜索..."
+ *   bind:searchValue
+ *   filterFields={[
+ *     { id: 'status', label: '状态', type: 'enum', options: [{ label: '启用', value: 'active' }] }
+ *   ]}
+ *   bind:filterValues
+ *   sortableColumns={[{ key: 'name', label: '名称' }]}
+ *   sortBy="name"
+ *   sortDirection="asc"
+ *   onsearch={(v) => handleSearch(v)}
+ *   onfilterchange={(f) => handleFilter(f)}
+ *   onsort={(key, dir) => handleSort(key, dir)}
+ * >
+ *   <Button size="sm" onclick={handleExport}>导出</Button>
+ * </TableToolbar>
+ */
+declare const TableToolbar: import("svelte").Component<TableToolbarProps, {}, "searchValue" | "filterValues" | "sortBy" | "sortDirection" | "viewMode">;
+type TableToolbar = ReturnType<typeof TableToolbar>;
+export default TableToolbar;

package/dist/components/compounds/index.d.ts

@@ -39,6 +39,7 @@ export { default as Skeleton } from './Skeleton.svelte';
 export { default as Steps } from './Steps.svelte';
 export type { SwipeCellAction } from './swipe-cell-types.js';
 export { default as SwipeCell } from './SwipeCell.svelte';
+export { default as TableToolbar } from './TableToolbar.svelte';
 export { default as Tabs } from './Tabs.svelte';
 export { default as TagInput } from './TagInput.svelte';
 export type { TimelineItem } from './timeline-types.js';

package/dist/components/compounds/index.js

@@ -51,6 +51,8 @@ export { default as SafeArea } from './SafeArea.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
 export { default as Steps } from './Steps.svelte';
 export { default as SwipeCell } from './SwipeCell.svelte';
+// 表格工具栏
+export { default as TableToolbar } from './TableToolbar.svelte';
 export { default as Tabs } from './Tabs.svelte';
 export { default as TagInput } from './TagInput.svelte';
 export { default as Timeline } from './Timeline.svelte';

package/dist/components/primitives/Select.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang='ts' generics="T = string">
   import type { DataAttributes, SelectProps } from '../../types.js'
+  import { tick } from 'svelte'
   import { cn, getDataAttributes, portal } from '../../utils.js'
   import { getFormControlSizeClasses } from '../control-size.js'
 
@@ -39,6 +40,8 @@
   let isHovered = $state(false)
   // 下拉层定位样式（portal 到 body，用 fixed 逃逸 overflow/stacking）
   let dropdownStyle = $state('')
+  /** portal 移动节点后用于二次测量的动画帧句柄，关闭时必须取消避免过期写入。 */
+  let dropdownPositionFrame: number | undefined = $state()
 
   const sizeClasses = $derived(getFormControlSizeClasses(size))
 
@@ -131,15 +134,40 @@
     dropdownStyle = `position:fixed;left:${Math.round(rect.left)}px;width:${Math.round(rect.width)}px;${vertical};z-index:1200;`
   }
 
+  /**
+   * 在 portal 完成节点移动和父级 flex 布局收敛后重算一次浮层坐标。
+   *
+   * 首次打开时，Svelte 创建浮层、portal 将其移入 body 与分页栏的 flex 尺寸更新可能落在同一渲染批次；
+   * 立即测量用于避免首帧无定位，下一帧复测则保证 fixed 坐标只基于最终的触发器视口位置。
+   */
+  async function scheduleSettledDropdownPosition(): Promise<void> {
+    await tick()
+    if (!isDropdownOpen) {
+      return
+    }
+
+    dropdownPositionFrame = window.requestAnimationFrame(() => {
+      dropdownPositionFrame = undefined
+      if (isDropdownOpen) {
+        updateDropdownPosition()
+      }
+    })
+  }
+
   // 打开时定位并跟随滚动/缩放更新
   $effect(() => {
     if (!isDropdownOpen)
       return
     updateDropdownPosition()
+    void scheduleSettledDropdownPosition()
     const scrollOpts = { passive: true, capture: true } as const
     window.addEventListener('scroll', updateDropdownPosition, scrollOpts)
     window.addEventListener('resize', updateDropdownPosition)
     return () => {
+      if (dropdownPositionFrame !== undefined) {
+        window.cancelAnimationFrame(dropdownPositionFrame)
+        dropdownPositionFrame = undefined
+      }
       window.removeEventListener('scroll', updateDropdownPosition, scrollOpts)
       window.removeEventListener('resize', updateDropdownPosition)
     }