@tendaui/components 1.2.3 → 1.3.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 TendaUI
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 TendaUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,176 +1,176 @@
-# @tendaui/components
-
-TendaUI React 组件库的源代码包，包含所有 UI 组件的实现。
-
-## 📦 安装
-
-在 monorepo 的其他包中使用 `workspace` 协议安装：
-
-```bash
-pnpm add @tendaui/components@workspace:*
-```
-
-## 🔗 在其他包中使用
-
-### 1. 在 package.json 中添加依赖
-
-```json
-{
-  "dependencies": {
-    "@tendaui/components": "workspace:*"
-  }
-}
-```
-
-### 2. 在代码中导入使用
-
-#### 导入单个组件
-
-```tsx
-import { Button } from "@tendaui/components";
-import "@tendaui/components/button/style";
-
-function App() {
-  return <Button type="primary">点击我</Button>;
-}
-```
-
-#### 导入多个组件
-
-```tsx
-import { Button, Input, Form } from "@tendaui/components";
-import "@tendaui/components/styles/globals.css";
-
-function App() {
-  return (
-    <Form>
-      <Input placeholder="请输入" />
-      <Button type="primary">提交</Button>
-    </Form>
-  );
-}
-```
-
-#### 按需导入组件
-
-```tsx
-// 导入单个组件的所有导出
-import Button from "@tendaui/components/button";
-import "@tendaui/components/button/style";
-
-// 或者导入特定文件
-import { Button } from "@tendaui/components/button";
-```
-
-#### 导入 Hooks
-
-```tsx
-import { useConfig, useControlled } from "@tendaui/components/hooks";
-```
-
-#### 导入工具函数
-
-```tsx
-import { composeRefs, parseTNode } from "@tendaui/components/utils";
-```
-
-## 📝 TypeScript 支持
-
-如果需要在 TypeScript 项目中使用，可以在 `tsconfig.json` 中添加路径映射：
-
-```json
-{
-  "compilerOptions": {
-    "paths": {
-      "@tendaui/components": ["../../packages/components"],
-      "@tendaui/components/*": ["../../packages/components/*"]
-    }
-  }
-}
-```
-
-## 🎯 使用场景
-
-### 场景 1: 在 `tendaui-react` 包中使用
-
-`tendaui-react` 包可以依赖 `@tendaui/components` 来构建最终发布的包：
-
-```json
-{
-  "name": "tendaui-react",
-  "dependencies": {
-    "@tendaui/components": "workspace:*"
-  }
-}
-```
-
-### 场景 2: 在文档包中使用
-
-在 Storybook 或其他文档工具中直接使用组件：
-
-```tsx
-import { Button } from "@tendaui/components";
-import { Meta, Story } from "@storybook/react";
-
-export default {
-  title: "Components/Button",
-  component: Button
-} as Meta;
-```
-
-### 场景 3: 在测试中使用
-
-在测试文件中导入组件进行测试：
-
-```tsx
-import { render, screen } from "@testing-library/react";
-import { Button } from "@tendaui/components";
-
-test("renders button", () => {
-  render(<Button>Test</Button>);
-  expect(screen.getByText("Test")).toBeInTheDocument();
-});
-```
-
-## 📋 可用组件
-
-- `Alert` - 警告提示
-- `Badge` - 徽标
-- `Button` - 按钮
-- `Checkbox` - 复选框
-- `ConfigProvider` - 全局配置
-- `Dialog` - 对话框
-- `Form` - 表单
-- `Input` - 输入框
-- `Loading` - 加载中
-- `Notification` - 通知
-- `Popup` - 弹出层
-- `Select` - 选择器
-- `SelectInput` - 选择输入框
-- `Switch` - 开关
-- `Tag` - 标签
-- `TagInput` - 标签输入框
-
-## 🔧 开发
-
-### 本地开发
-
-由于这是一个源代码包，修改组件代码后，使用它的包会自动看到更改（如果配置了正确的构建工具）。
-
-### 构建
-
-如果需要构建这个包，可以添加构建脚本：
-
-```json
-{
-  "scripts": {
-    "build": "tsc --build"
-  }
-}
-```
-
-## 📚 相关文档
-
-- [Monorepo 最佳实践](../../MONOREPO.md)
-- [发布指南](../../PUBLISH.md)
-- [Lerna 使用指南](../../LERNA.md)
+# @tendaui/components
+
+TendaUI React 组件库的源代码包，包含所有 UI 组件的实现。
+
+## 📦 安装
+
+在 monorepo 的其他包中使用 `workspace` 协议安装：
+
+```bash
+pnpm add @tendaui/components@workspace:*
+```
+
+## 🔗 在其他包中使用
+
+### 1. 在 package.json 中添加依赖
+
+```json
+{
+  "dependencies": {
+    "@tendaui/components": "workspace:*"
+  }
+}
+```
+
+### 2. 在代码中导入使用
+
+#### 导入单个组件
+
+```tsx
+import { Button } from "@tendaui/components";
+import "@tendaui/components/button/style";
+
+function App() {
+  return <Button type="primary">点击我</Button>;
+}
+```
+
+#### 导入多个组件
+
+```tsx
+import { Button, Input, Form } from "@tendaui/components";
+import "@tendaui/components/styles/globals.css";
+
+function App() {
+  return (
+    <Form>
+      <Input placeholder="请输入" />
+      <Button type="primary">提交</Button>
+    </Form>
+  );
+}
+```
+
+#### 按需导入组件
+
+```tsx
+// 导入单个组件的所有导出
+import Button from "@tendaui/components/button";
+import "@tendaui/components/button/style";
+
+// 或者导入特定文件
+import { Button } from "@tendaui/components/button";
+```
+
+#### 导入 Hooks
+
+```tsx
+import { useConfig, useControlled } from "@tendaui/components/hooks";
+```
+
+#### 导入工具函数
+
+```tsx
+import { composeRefs, parseTNode } from "@tendaui/components/utils";
+```
+
+## 📝 TypeScript 支持
+
+如果需要在 TypeScript 项目中使用，可以在 `tsconfig.json` 中添加路径映射：
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@tendaui/components": ["../../packages/components"],
+      "@tendaui/components/*": ["../../packages/components/*"]
+    }
+  }
+}
+```
+
+## 🎯 使用场景
+
+### 场景 1: 在 `tendaui-react` 包中使用
+
+`tendaui-react` 包可以依赖 `@tendaui/components` 来构建最终发布的包：
+
+```json
+{
+  "name": "tendaui-react",
+  "dependencies": {
+    "@tendaui/components": "workspace:*"
+  }
+}
+```
+
+### 场景 2: 在文档包中使用
+
+在 Storybook 或其他文档工具中直接使用组件：
+
+```tsx
+import { Button } from "@tendaui/components";
+import { Meta, Story } from "@storybook/react";
+
+export default {
+  title: "Components/Button",
+  component: Button
+} as Meta;
+```
+
+### 场景 3: 在测试中使用
+
+在测试文件中导入组件进行测试：
+
+```tsx
+import { render, screen } from "@testing-library/react";
+import { Button } from "@tendaui/components";
+
+test("renders button", () => {
+  render(<Button>Test</Button>);
+  expect(screen.getByText("Test")).toBeInTheDocument();
+});
+```
+
+## 📋 可用组件
+
+- `Alert` - 警告提示
+- `Badge` - 徽标
+- `Button` - 按钮
+- `Checkbox` - 复选框
+- `ConfigProvider` - 全局配置
+- `Dialog` - 对话框
+- `Form` - 表单
+- `Input` - 输入框
+- `Loading` - 加载中
+- `Notification` - 通知
+- `Popup` - 弹出层
+- `Select` - 选择器
+- `SelectInput` - 选择输入框
+- `Switch` - 开关
+- `Tag` - 标签
+- `TagInput` - 标签输入框
+
+## 🔧 开发
+
+### 本地开发
+
+由于这是一个源代码包，修改组件代码后，使用它的包会自动看到更改（如果配置了正确的构建工具）。
+
+### 构建
+
+如果需要构建这个包，可以添加构建脚本：
+
+```json
+{
+  "scripts": {
+    "build": "tsc --build"
+  }
+}
+```
+
+## 📚 相关文档
+
+- [Monorepo 最佳实践](../../MONOREPO.md)
+- [发布指南](../../PUBLISH.md)
+- [Lerna 使用指南](../../LERNA.md)

package/_util/scroll.ts

@@ -0,0 +1,9 @@
+/**
+ * 检查节点是否溢出
+ * @param node 目标节点
+ * @returns 是否溢出
+ */
+export function isNodeOverflow(node: HTMLElement): boolean {
+  if (!node) return false;
+  return node.scrollWidth > node.clientWidth;
+}

package/alert/_example/base.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Alert } from "@tendaui/react";
+
+export default function Base() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      <Alert theme="success" message="这是一条成功的消息提示" />
+      <Alert theme="info" message="这是一条普通的消息提示" />
+      <Alert theme="warning" message="这是一条警示消息" />
+      <Alert theme="error" message="高危操作/出错信息提示" />
+    </div>
+  );
+}

package/alert/_example/collapse.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Alert } from "@tendaui/react";
+
+export default function Collapse() {
+  const message = [
+    "1.这是一条普通的消息提示描述，",
+    "2.这是一条普通的消息提示描述，",
+    "3.这是一条普通的消息提示描述，",
+    "4.这是一条普通的消息提示描述，",
+    "5.这是一条普通的消息提示描述，"
+  ];
+  return (
+    <Alert message={message} maxLine={2} closeBtn />
+  );
+}

package/badge/_example/base.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+export default function Base() {
+  return (
+    <Badge count={2}>
+      <Button>按钮</Button>
+    </Badge>
+  );
+}

package/badge/_example/count.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Count() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={1}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={16}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={99}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={100}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/custom-color.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function CustomColor() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={8} color="var(--td-success-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} color="var(--td-warning-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} color="var(--td-brand-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="new" color="#6366f1">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1} color="var(--td-success-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/dot.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Dot() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge dot count={1}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1}>
+        <Button>消息</Button>
+      </Badge>
+      <Badge dot>
+        <span style={{ fontSize: "16px" }}>通知</span>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/max-count.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function MaxCount() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={100} maxCount={99}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={1000} maxCount={999}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={50} maxCount={20}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/offset.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Offset() {
+  return (
+    <div style={{ display: "flex", gap: "40px", alignItems: "center" }}>
+      <Badge count={8}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} offset={[-5, 5]}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} offset={[5, -5]}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} offset={[-10, 10]}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/shape.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Shape() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={8} shape="circle">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} shape="circle">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} shape="round">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} shape="round">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="new" shape="round">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/show-zero.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function ShowZero() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={0}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={0} showZero>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}