@tendaui/components 1.2.4 → 1.3.0

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;

package/tag/_example/sizes.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Tag } from "@tendaui/react";
+
+const SizeExample = () => (
+  <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+    <Tag size="small" theme="primary">
+      小标签
+    </Tag>
+    <Tag size="medium" theme="primary">
+      中标签
+    </Tag>
+    <Tag size="large" theme="primary">
+      大标签
+    </Tag>
+  </div>
+);
+
+export default SizeExample;

package/tag/_example/variants.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Tag } from "@tendaui/react";
+
+const VariantExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+    <div style={{ display: "flex", gap: "8px" }}>
+      <Tag theme="primary" variant="light">
+        浅色标签
+      </Tag>
+      <Tag theme="warning" variant="light">
+        浅色标签
+      </Tag>
+      <Tag theme="danger" variant="light">
+        浅色标签
+      </Tag>
+      <Tag theme="success" variant="light">
+        浅色标签
+      </Tag>
+    </div>
+    <div style={{ display: "flex", gap: "8px" }}>
+      <Tag theme="primary" variant="dark">
+        深色标签
+      </Tag>
+      <Tag theme="warning" variant="dark">
+        深色标签
+      </Tag>
+      <Tag theme="danger" variant="dark">
+        深色标签
+      </Tag>
+      <Tag theme="success" variant="dark">
+        深色标签
+      </Tag>
+    </div>
+  </div>
+);
+
+export default VariantExample;

package/tag-input/_example/collapsed.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TagInput } from "@tendaui/react";
+
+const CollapsedExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>超过 2 个折叠</div>
+      <TagInput
+        defaultValue={["标签一", "标签二", "标签三", "标签四", "标签五"]}
+        minCollapsedNum={2}
+        placeholder="请输入"
+        style={{ width: "400px" }}
+      />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>超过 3 个折叠</div>
+      <TagInput
+        defaultValue={["标签一", "标签二", "标签三", "标签四", "标签五"]}
+        minCollapsedNum={3}
+        placeholder="请输入"
+        style={{ width: "400px" }}
+      />
+    </div>
+  </div>
+);
+
+export default CollapsedExample;

package/tag-input/_example/controlled-uncontrolled.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { TagInput, TagInputValue } from "@tendaui/react";
+
+const Example = () => {
+  const [controlledTags, setControlledTags] = useState<TagInputValue>(["Vue", "React"]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>受控模式</div>
+        <TagInput
+          value={controlledTags}
+          onChange={(val) => setControlledTags(val)}
+          placeholder="请输入"
+          clearable
+          style={{ width: "400px" }}
+        />
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>非受控模式</div>
+        <TagInput defaultValue={["Svelte", "Solid"]} placeholder="请输入" clearable style={{ width: "400px" }} />
+      </div>
+    </div>
+  );
+};
+
+export default Example;

package/tag-input/_example/default.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { TagInput, TagInputValue } from "@tendaui/react";
+
+const DefaultExample = () => {
+  const [tags, setTags] = useState<TagInputValue>(["Vue", "React", "Angular"]);
+
+  return (
+    <div style={{ width: "400px" }}>
+      <TagInput value={tags} onChange={(val) => setTags(val)} clearable placeholder="请输入标签，按回车添加" />
+      <div style={{ marginTop: "8px", color: "#666", fontSize: "12px" }}>当前标签：{tags.join(", ")}</div>
+    </div>
+  );
+};
+
+export default DefaultExample;

package/tag-input/_example/disabled-readonly.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { TagInput } from "@tendaui/react";
+
+const DisabledReadonlyExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>正常</div>
+      <TagInput defaultValue={["Vue", "React"]} placeholder="正常" style={{ width: "400px" }} />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>禁用</div>
+      <TagInput defaultValue={["Vue", "React"]} disabled placeholder="禁用" style={{ width: "400px" }} />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>只读</div>
+      <TagInput defaultValue={["Vue", "React"]} readonly placeholder="只读" style={{ width: "400px" }} />
+    </div>
+  </div>
+);
+
+export default DisabledReadonlyExample;