@cloudtower/eagle 0.34.17 → 0.34.18

package/dist/src/core/Tab/Tab.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TabProps } from "./Tab.type";
+export declare const Tab: (props: TabProps) => React.JSX.Element;

package/dist/src/core/Tab/Tab.style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const TabMenuWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TabTitleElStyle: import("@linaria/core").LinariaClassName;
+export declare const MoreThanTooltipStyle: import("@linaria/core").LinariaClassName;
+export declare const IconStyle: import("@linaria/core").LinariaClassName;

package/dist/src/core/Tab/Tab.type.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+/**
+ * Tab 项的数据结构
+ */
+export type TabItem = {
+    /** Tab 的唯一标识符 */
+    key: string;
+    /** Tab 的标题，可以是字符串、ReactNode 或函数 */
+    title: string | React.ReactNode | ((props: {
+        isActive: boolean;
+    }) => React.ReactNode);
+    /** Tab 的内容 */
+    children: React.ReactNode;
+};
+/**
+ * Tab 组件的属性
+ */
+export type TabProps = {
+    /** 外层容器的类名 */
+    className?: string;
+    /** 内容区域的类名 */
+    contentClassName?: string;
+    /** 当前选中的 Tab 的 key */
+    selectedKey: string;
+    /** Tab 列表 */
+    tabs: TabItem[];
+    /** Tab 切换时的回调 */
+    onChange?: (key: string) => void;
+    /** 额外的插槽内容，显示在 tab bar 的右侧 */
+    extraSlot?: React.ReactNode;
+    /** Tab 的大小 */
+    size?: "small" | "medium";
+};
+/**
+ * 激活 Tab 的类型枚举
+ */
+export declare enum ActiveTabType {
+    /** 普通类型的 Tab */
+    Common = 0,
+    /** 在更多菜单中的 Tab */
+    More = 1
+}

package/dist/src/core/Tab/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tab";

package/dist/src/core/Tab/useTabAdaptiveLayout.d.ts

@@ -0,0 +1,23 @@
+import { TabItem } from "../../core/Tab/Tab.type";
+import { RefObject } from "react";
+/**
+ * Tab 自适应布局 Hook
+ *
+ * 根据可用空间自动计算哪些 tab 需要隐藏到"更多"菜单中。
+ * 当容器尺寸变化、tabs 列表变化或 selectedKey 变化时，会自动重新计算布局。
+ *
+ * @param tabs - Tab 列表
+ * @param tabsRef - Tab 容器的 ref
+ * @param extraSlotRef - 额外插槽的 ref（用于计算可用宽度）
+ * @param selectedKey - 当前选中的 tab key（用于触发重新计算，当选中项在"更多"菜单中时会影响按钮宽度）
+ *
+ * @returns moreTabs - 需要隐藏到"更多"菜单的 tabs 列表
+ *
+ * @example
+ * ```tsx
+ * const tabsRef = useRef<HTMLDivElement>(null);
+ * const extraSlotRef = useRef<HTMLDivElement>(null);
+ * const moreTabs = useTabAdaptiveLayout(tabs, tabsRef, extraSlotRef, selectedKey);
+ * ```
+ */
+export declare const useTabAdaptiveLayout: (tabs: TabItem[], tabsRef: RefObject<HTMLDivElement>, extraSlotRef: RefObject<HTMLDivElement>, selectedKey?: string) => TabItem[];

package/dist/src/core/index.d.ts

@@ -76,6 +76,7 @@ export * from "./StepProgress";
 export * from "./Steps";
 export * from "./Styled";
 export * from "./Switch";
+export * from "./Tab";
 export * from "./Table";
 export * from "./TableForm";
 export * from "./Tag";

package/dist/stories/docs/core/Tab.stories.d.ts

@@ -0,0 +1,65 @@
+import { Tab } from "../../../src/core/Tab/Tab";
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+/**
+ * Tab 是一个标签页组件，支持多个标签页之间的切换。
+ *
+ * ### 参数说明
+ *
+ * | 参数 | 说明 | 类型 | 默认值 |
+ * | --- | --- | --- | --- |
+ * | className | 自定义类名 | string | - |
+ * | contentClassName | 内容区域的类名 | string | - |
+ * | selectedKey | 当前选中的标签页 key | string | - |
+ * | tabs | 标签页配置数组 | TabItem[] | [] |
+ * | onChange | 切换标签页时的回调 | (key: string) => void | - |
+ * | extraSlot | 额外的插槽内容，显示在标签栏右侧 | React.ReactNode | - |
+ *
+ * ### TabItem 参数说明
+ *
+ * | 参数 | 说明 | 类型 | 默认值 |
+ * | --- | --- | --- | --- |
+ * | key | 唯一标识符 | string | - |
+ * | title | 标签页标题，可以是字符串、ReactNode 或函数 | string \| ReactNode \| ((props: { isActive: boolean }) => ReactNode) | - |
+ * | onClick | 点击标签页时的回调 | () => void | - |
+ * | children | 标签页内容 | React.ReactNode | - |
+ *
+ * ### 特性
+ * - 支持响应式布局，当空间不够时自动将多余的标签页放入下拉菜单
+ * - 支持自定义标题（可通过函数形式获取激活状态）
+ * - 支持在标签栏右侧添加额外内容
+ * - 支持自定义内容区域的样式
+ */
+declare const meta: {
+    component: (props: import("../../../src/core/Tab/Tab.type").TabProps) => React.JSX.Element;
+    title: "Core/Tab | 标签页";
+};
+export default meta;
+type Story = StoryObj<typeof Tab>;
+/**
+ * 基础的标签页用法，展示如何创建和使用标签页组件
+ */
+export declare const Basic: Story;
+/**
+ * 当有大量标签页时，组件会自动计算可用空间，将无法完整显示的标签页放入下拉菜单中
+ */
+export declare const ResponsiveLayout: Story;
+/**
+ * 标签页标题支持函数形式，可以接收 isActive 参数来判断当前是否激活
+ */
+export declare const CustomTitle: Story;
+/**
+ * extraSlot 可以在标签栏右侧添加额外的内容，如按钮、图标等
+ */
+export declare const WithExtraSlot: Story;
+/**
+ * 展示实际业务场景中的使用方式，包含复杂的标签内容和操作
+ */
+export declare const ComplexContent: Story;
+/**
+ * 支持动态添加和删除标签页的场景。
+ * - 在 extraSlot 中提供"新增标签"按钮
+ * - 每个标签页标题右侧显示删除图标
+ * - 可以动态添加和删除标签页
+ */
+export declare const DynamicTabs: Story;