@tendaui/components 1.3.0 → 1.3.1

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/button/_example/ghost.tsx

@@ -3,10 +3,7 @@ import { Button } from "@tendaui/react";
 
 export default function Ghost() {
   return (
-    <div style={{ display: "flex", gap: "12px", padding: "24px", flexWrap: "wrap", backgroundColor: "#f5f5f5" }}>
-      <Button ghost theme="default">
-        默认
-      </Button>
+    <div style={{ display: "flex", gap: "12px", padding: "24px", flexWrap: "wrap" }}>
       <Button ghost theme="primary">
         主要
       </Button>
@@ -21,4 +18,4 @@ export default function Ghost() {
       </Button>
     </div>
   );
-}
+}

package/color-picker/utils/color-picker/cmyk.ts

@@ -1,89 +1,89 @@
-/**
- * rgb 转 cmyk
- * @param red
- * @param green
- * @param blue
- * @returns
- */
-export const rgb2cmyk = (red: number, green: number, blue: number) => {
-  let computedC = 0;
-  let computedM = 0;
-  let computedY = 0;
-  let computedK = 0;
-
-  const r = parseInt(`${red}`.replace(/\s/g, ""), 10);
-  const g = parseInt(`${green}`.replace(/\s/g, ""), 10);
-  const b = parseInt(`${blue}`.replace(/\s/g, ""), 10);
-
-  if (r === 0 && g === 0 && b === 0) {
-    computedK = 1;
-    return [0, 0, 0, 1];
-  }
-
-  computedC = 1 - r / 255;
-  computedM = 1 - g / 255;
-  computedY = 1 - b / 255;
-
-  const minCMY = Math.min(computedC, Math.min(computedM, computedY));
-  computedC = (computedC - minCMY) / (1 - minCMY);
-  computedM = (computedM - minCMY) / (1 - minCMY);
-  computedY = (computedY - minCMY) / (1 - minCMY);
-  computedK = minCMY;
-
-  return [computedC, computedM, computedY, computedK];
-};
-
-/**
- * cmyk 转 rgb
- * @param cyan
- * @param magenta
- * @param yellow
- * @param black
- * @returns
- */
-export const cmyk2rgb = (cyan: number, magenta: number, yellow: number, black: number) => {
-  let c = cyan / 100;
-  let m = magenta / 100;
-  let y = yellow / 100;
-  const k = black / 100;
-
-  c = c * (1 - k) + k;
-  m = m * (1 - k) + k;
-  y = y * (1 - k) + k;
-
-  let r = 1 - c;
-  let g = 1 - m;
-  let b = 1 - y;
-
-  r = Math.round(255 * r);
-  g = Math.round(255 * g);
-  b = Math.round(255 * b);
-  return {
-    r,
-    g,
-    b
-  };
-};
-
-const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
-
-const toNumber = (str: string) => Math.max(0, Math.min(255, parseInt(str, 10)));
-
-/**
- * 输入色转rgb
- * @param input
- * @returns
- */
-export const cmykInputToColor = (input: string) => {
-  if (/cmyk/i.test(input)) {
-    const str = input.replace(/\s/g, "");
-    const match = str.match(REG_CMYK_STRING);
-    const c = toNumber(match[1]);
-    const m = toNumber(match[2]);
-    const y = toNumber(match[3]);
-    const k = toNumber(match[4]);
-    const { r, g, b } = cmyk2rgb(c, m, y, k);
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-  return input;
-};
+/**
+ * rgb 转 cmyk
+ * @param red
+ * @param green
+ * @param blue
+ * @returns
+ */
+export const rgb2cmyk = (red: number, green: number, blue: number) => {
+  let computedC = 0;
+  let computedM = 0;
+  let computedY = 0;
+  let computedK = 0;
+
+  const r = parseInt(`${red}`.replace(/\s/g, ""), 10);
+  const g = parseInt(`${green}`.replace(/\s/g, ""), 10);
+  const b = parseInt(`${blue}`.replace(/\s/g, ""), 10);
+
+  if (r === 0 && g === 0 && b === 0) {
+    computedK = 1;
+    return [0, 0, 0, 1];
+  }
+
+  computedC = 1 - r / 255;
+  computedM = 1 - g / 255;
+  computedY = 1 - b / 255;
+
+  const minCMY = Math.min(computedC, Math.min(computedM, computedY));
+  computedC = (computedC - minCMY) / (1 - minCMY);
+  computedM = (computedM - minCMY) / (1 - minCMY);
+  computedY = (computedY - minCMY) / (1 - minCMY);
+  computedK = minCMY;
+
+  return [computedC, computedM, computedY, computedK];
+};
+
+/**
+ * cmyk 转 rgb
+ * @param cyan
+ * @param magenta
+ * @param yellow
+ * @param black
+ * @returns
+ */
+export const cmyk2rgb = (cyan: number, magenta: number, yellow: number, black: number) => {
+  let c = cyan / 100;
+  let m = magenta / 100;
+  let y = yellow / 100;
+  const k = black / 100;
+
+  c = c * (1 - k) + k;
+  m = m * (1 - k) + k;
+  y = y * (1 - k) + k;
+
+  let r = 1 - c;
+  let g = 1 - m;
+  let b = 1 - y;
+
+  r = Math.round(255 * r);
+  g = Math.round(255 * g);
+  b = Math.round(255 * b);
+  return {
+    r,
+    g,
+    b
+  };
+};
+
+const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
+
+const toNumber = (str: string) => Math.max(0, Math.min(255, parseInt(str, 10)));
+
+/**
+ * 输入色转rgb
+ * @param input
+ * @returns
+ */
+export const cmykInputToColor = (input: string) => {
+  if (/cmyk/i.test(input)) {
+    const str = input.replace(/\s/g, "");
+    const match = str.match(REG_CMYK_STRING);
+    const c = toNumber(match[1]);
+    const m = toNumber(match[2]);
+    const y = toNumber(match[3]);
+    const k = toNumber(match[4]);
+    const { r, g, b } = cmyk2rgb(c, m, y, k);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  return input;
+};