@tendaui/components 1.2.3 → 1.3.0

package/table/_example/custom-row-class-name.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const CustomRowClassNameExample = () => (
+  <Table
+    columns={baseColumns}
+    data={baseData}
+    bordered
+    rowClassName={({ row, rowIndex }) => {
+      if (row.status === "active") {
+        return "table-row-active";
+      }
+      if (rowIndex % 2 === 0) {
+        return "table-row-even";
+      }
+      return "";
+    }}
+  />
+);
+
+export default CustomRowClassNameExample;

package/table/_example/default.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const DefaultExample = () => <Table columns={baseColumns} data={baseData} />;
+
+export default DefaultExample;

package/table/_example/ellipsis.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const EllipsisExample = () => (
+  <Table
+    columns={[
+      { colKey: "name", title: "姓名", width: 120 },
+      { colKey: "age", title: "年龄", width: 80, align: "center" },
+      {
+        colKey: "email",
+        title: "邮箱",
+        width: 150,
+        ellipsis: true
+      },
+      {
+        colKey: "address",
+        title: "地址（省略）",
+        width: 200,
+        ellipsis: true
+      }
+    ]}
+    data={baseData}
+    bordered
+  />
+);
+
+export default EllipsisExample;

package/table/_example/empty.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const EmptyExample = () => (
+  <Table columns={baseColumns} data={[]} empty={<div style={{ padding: "40px", textAlign: "center" }}>暂无数据</div>} />
+);
+
+export default EmptyExample;

package/table/_example/fixed-width.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const FixedWidthExample = () => (
+  <Table
+    columns={[
+      { colKey: "name", title: "姓名", width: 100 },
+      { colKey: "age", title: "年龄", width: 80 },
+      { colKey: "email", title: "邮箱", width: 240 },
+      { colKey: "address", title: "地址", width: 300 },
+      { colKey: "status", title: "状态", width: 100 }
+    ]}
+    data={baseData}
+    bordered
+    tableLayout="fixed"
+  />
+);
+
+export default FixedWidthExample;

package/table/_example/hover.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const HoverExample = () => <Table columns={baseColumns} data={baseData} hover />;
+
+export default HoverExample;

package/table/_example/row-click.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const RowClickExample = () => (
+  <Table
+    columns={baseColumns}
+    data={baseData}
+    bordered
+    hover
+    onRowClick={({ row, rowIndex }) => {
+      window.alert(`点击了第 ${rowIndex + 1} 行，姓名：${row.name}`);
+    }}
+  />
+);
+
+export default RowClickExample;

package/table/_example/sizes.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const SizesExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+    <div>
+      <h3>Small</h3>
+      <Table columns={baseColumns} data={baseData} size="small" bordered />
+    </div>
+    <div>
+      <h3>Medium</h3>
+      <Table columns={baseColumns} data={baseData} size="medium" bordered />
+    </div>
+    <div>
+      <h3>Large</h3>
+      <Table columns={baseColumns} data={baseData} size="large" bordered />
+    </div>
+  </div>
+);
+
+export default SizesExample;

package/table/_example/stripe.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const StripeExample = () => <Table columns={baseColumns} data={baseData} stripe />;
+
+export default StripeExample;

package/table/_example/vertical-align.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  description: string;
+}
+
+const VerticalAlignExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+    <div>
+      <h3>Top</h3>
+      <Table
+        columns={[
+          { colKey: "name", title: "姓名", width: 120 },
+          {
+            colKey: "description",
+            title: "描述",
+            cell: ({ row }) => (
+              <div>
+                {row.id === 1 ? (
+                  <div>
+                    <div>第一行内容</div>
+                    <div>第二行内容</div>
+                    <div>第三行内容</div>
+                  </div>
+                ) : (
+                  <div>单行内容</div>
+                )}
+              </div>
+            )
+          }
+        ]}
+        data={[
+          { id: 1, name: "张三", description: "" },
+          { id: 2, name: "李四", description: "" }
+        ]}
+        bordered
+        verticalAlign="top"
+      />
+    </div>
+    <div>
+      <h3>Middle (默认)</h3>
+      <Table
+        columns={[
+          { colKey: "name", title: "姓名", width: 120 },
+          {
+            colKey: "description",
+            title: "描述",
+            cell: ({ row }) => (
+              <div>
+                {row.id === 1 ? (
+                  <div>
+                    <div>第一行内容</div>
+                    <div>第二行内容</div>
+                    <div>第三行内容</div>
+                  </div>
+                ) : (
+                  <div>单行内容</div>
+                )}
+              </div>
+            )
+          }
+        ]}
+        data={[
+          { id: 1, name: "张三", description: "" },
+          { id: 2, name: "李四", description: "" }
+        ]}
+        bordered
+        verticalAlign="middle"
+      />
+    </div>
+    <div>
+      <h3>Bottom</h3>
+      <Table
+        columns={[
+          { colKey: "name", title: "姓名", width: 120 },
+          {
+            colKey: "description",
+            title: "描述",
+            cell: ({ row }) => (
+              <div>
+                {row.id === 1 ? (
+                  <div>
+                    <div>第一行内容</div>
+                    <div>第二行内容</div>
+                    <div>第三行内容</div>
+                  </div>
+                ) : (
+                  <div>单行内容</div>
+                )}
+              </div>
+            )
+          }
+        ]}
+        data={[
+          { id: 1, name: "张三", description: "" },
+          { id: 2, name: "李四", description: "" }
+        ]}
+        bordered
+        verticalAlign="bottom"
+      />
+    </div>
+  </div>
+);
+
+export default VerticalAlignExample;

package/table/hooks/useTableClassName.ts

@@ -47,9 +47,9 @@ export default function useTableClassName() {
       sizeLarge: `${classPrefix}-table--size-large`,
       layoutFixed: `${classPrefix}-table--layout-fixed`,
       layoutAuto: `${classPrefix}-table--layout-auto`,
-      verticalAlignTop: `${classPrefix}-vertical-align-top`,
-      verticalAlignMiddle: `${classPrefix}-vertical-align-middle`,
-      verticalAlignBottom: `${classPrefix}-vertical-align-bottom`,
+      verticalAlignTop: `${classPrefix}-table--vertical-align-top`,
+      verticalAlignMiddle: `${classPrefix}-table--vertical-align-middle`,
+      verticalAlignBottom: `${classPrefix}-table--vertical-align-bottom`,
       alignLeft: `${classPrefix}-align-left`,
       alignCenter: `${classPrefix}-align-center`,
       alignRight: `${classPrefix}-align-right`,

package/table/index.ts

@@ -1,7 +1,9 @@
 import _Table from "./Table";
+import Ellipsis from "./Ellipsis";
 import "./style/index";
 
 export type { TableProps } from "./Table";
 export type * from "./type";
+export { Ellipsis };
 export const Table = _Table;
 export default Table;

package/table/type.ts

@@ -26,6 +26,7 @@ export type TableLayout = "auto" | "fixed";
  * 单元格参数
  */
 export interface BaseTableCellParams<T extends TableRowData = TableRowData> {
+  id: number;
   row: T;
   rowIndex: number;
   col: BaseTableCol<T>;

package/tag/Tag.tsx

@@ -70,7 +70,7 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
     <CloseIcon
       onClick={(e) => {
         if (disabled) return;
-        onClose({ e: e as any });
+        onClose({ e });
       }}
       className={`${tagClassPrefix}__icon-close`}
     />

package/tag/_example/closable.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Tag } from "@tendaui/react";
+
+const ClosableTagExample = () => {
+  const [tagList, setTagList] = useState([
+    {
+      name: "可删除标签1",
+      showClose: true
+    },
+    {
+      name: "可删除标签2",
+      showClose: true
+    },
+    {
+      name: "可删除标签3",
+      showClose: true
+    }
+  ]);
+
+  const deleteTag = (i: number) => {
+    const newtagList = [...tagList];
+    newtagList.splice(i, 1);
+    setTagList(newtagList);
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "30px" }}>
+      {tagList.map((tag, i) => (
+        <Tag
+          key={i}
+          closable
+          onClose={() => {
+            deleteTag(i);
+          }}
+          disabled={tag.disabled}
+        >
+          {tag.name}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export default ClosableTagExample;

package/tag/_example/default.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Tag } from "@tendaui/react";
+
+const DefaultExample = () => (
+  <div style={{ display: "flex", gap: "8px" }}>
+    <Tag theme="primary">标签一</Tag>
+    <Tag theme="warning">标签二</Tag>
+    <Tag theme="danger" variant="dark">
+      标签三
+    </Tag>
+    <Tag theme="success" variant="dark">
+      标签四
+    </Tag>
+  </div>
+);
+
+export default DefaultExample;

package/tag/_example/disabled.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Tag } from "@tendaui/react";
+
+const DisabledExample = () => (
+  <div style={{ display: "flex", gap: "8px" }}>
+    <Tag theme="primary">正常标签</Tag>
+    <Tag theme="primary" disabled>
+      禁用标签
+    </Tag>
+    <Tag theme="primary" closable>
+      可删除标签
+    </Tag>
+    <Tag theme="primary" closable disabled>
+      禁用可删除标签
+    </Tag>
+  </div>
+);
+
+export default DisabledExample;