@taicode/common-web 1.1.19 → 1.1.20

package/output/catalyst/button.d.ts

@@ -32,7 +32,7 @@ declare const styles: {
         rose: string[];
     };
 };
-type ButtonProps = ({
+export type ButtonProps = ({
     color?: keyof typeof styles.colors;
     outline?: never;
     plain?: never;

package/output/catalyst/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../source/catalyst/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJX,CAAA;AAED,KAAK,WAAW,GAAG,CACf;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACtE;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAC/C;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,IAAI,CAAA;CAAE,CAClD,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,CAClD,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CACjE,CAAA;AAEH,eAAO,MAAM,MAAM,iFAmBjB,CAAA;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAUtE"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../source/catalyst/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJX,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,CACtB;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACtE;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAC/C;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,IAAI,CAAA;CAAE,CAClD,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,CAClD,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CACjE,CAAA;AAEH,eAAO,MAAM,MAAM,iFAmBjB,CAAA;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAUtE"}

package/output/loading-button/LoadingButtonDemo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * LoadingButton 组件演示
+ */
+export declare function LoadingButtonDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadingButtonDemo.d.ts.map

package/output/loading-button/LoadingButtonDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingButtonDemo.d.ts","sourceRoot":"","sources":["../../source/loading-button/LoadingButtonDemo.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,iBAAiB,4CAsKhC"}

package/output/loading-button/LoadingButtonDemo.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LoadingButton } from '../loading-button';
+/**
+ * LoadingButton 组件演示
+ */
+export function LoadingButtonDemo() {
+    const [result, setResult] = useState('');
+    // 模拟异步保存操作
+    const handleSave = async () => {
+        setResult('正在保存...');
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        setResult('保存成功!');
+    };
+    // 模拟可能失败的操作
+    const handleDelete = async () => {
+        setResult('正在删除...');
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        // 模拟随机失败
+        if (Math.random() > 0.5) {
+            setResult('删除成功!');
+        }
+        else {
+            setResult('删除失败!');
+            throw new Error('删除失败');
+        }
+    };
+    // 同步操作
+    const handleClick = () => {
+        setResult('立即点击!');
+    };
+    return (_jsxs("div", { className: "space-y-8 p-8", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold mb-4", children: "LoadingButton \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { className: "text-gray-600 mb-4", children: "\u6F14\u793A\u5982\u4F55\u4F7F\u7528 LoadingButton \u7EC4\u4EF6\u5904\u7406\u5F02\u6B65\u64CD\u4F5C" })] }), result && (_jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 rounded-lg", children: _jsx("p", { className: "text-sm font-medium", children: result }) })), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u57FA\u7840\u7528\u6CD5" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", onClick: handleSave, children: "\u4FDD\u5B58\u6570\u636E" }), _jsx(LoadingButton, { color: "red", onClick: handleDelete, children: "\u5220\u9664\u6570\u636E" }), _jsx(LoadingButton, { color: "green", onClick: handleClick, children: "\u540C\u6B65\u64CD\u4F5C" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u4E0D\u540C\u6837\u5F0F" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "emerald", onClick: handleSave, children: "Solid \u6837\u5F0F" }), _jsx(LoadingButton, { outline: true, onClick: handleSave, children: "Outline \u6837\u5F0F" }), _jsx(LoadingButton, { plain: true, onClick: handleSave, children: "Plain \u6837\u5F0F" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u81EA\u5B9A\u4E49\u52A0\u8F7D\u6587\u672C" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", onClick: handleSave, loadingText: "\u6B63\u5728\u4FDD\u5B58\u6570\u636E...", children: "\u81EA\u5B9A\u4E49\u6587\u672C" }), _jsx(LoadingButton, { color: "purple", onClick: handleSave, loadingText: _jsxs("span", { className: "flex items-center gap-2", children: [_jsxs("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "\u5904\u7406\u4E2D"] }), children: "\u81EA\u5B9A\u4E49\u56FE\u6807" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u989C\u8272\u9009\u9879" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "red", onClick: handleSave, children: "Red" }), _jsx(LoadingButton, { color: "orange", onClick: handleSave, children: "Orange" }), _jsx(LoadingButton, { color: "amber", onClick: handleSave, children: "Amber" }), _jsx(LoadingButton, { color: "yellow", onClick: handleSave, children: "Yellow" }), _jsx(LoadingButton, { color: "lime", onClick: handleSave, children: "Lime" }), _jsx(LoadingButton, { color: "green", onClick: handleSave, children: "Green" }), _jsx(LoadingButton, { color: "emerald", onClick: handleSave, children: "Emerald" }), _jsx(LoadingButton, { color: "teal", onClick: handleSave, children: "Teal" }), _jsx(LoadingButton, { color: "cyan", onClick: handleSave, children: "Cyan" }), _jsx(LoadingButton, { color: "sky", onClick: handleSave, children: "Sky" }), _jsx(LoadingButton, { color: "blue", onClick: handleSave, children: "Blue" }), _jsx(LoadingButton, { color: "indigo", onClick: handleSave, children: "Indigo" }), _jsx(LoadingButton, { color: "violet", onClick: handleSave, children: "Violet" }), _jsx(LoadingButton, { color: "purple", onClick: handleSave, children: "Purple" }), _jsx(LoadingButton, { color: "fuchsia", onClick: handleSave, children: "Fuchsia" }), _jsx(LoadingButton, { color: "pink", onClick: handleSave, children: "Pink" }), _jsx(LoadingButton, { color: "rose", onClick: handleSave, children: "Rose" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u7981\u7528\u72B6\u6001" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", disabled: true, onClick: handleSave, children: "\u7981\u7528\u6309\u94AE" }), _jsx(LoadingButton, { color: "green", onClick: handleSave, disableOnLoading: false, children: "\u52A0\u8F7D\u65F6\u4E0D\u7981\u7528" })] })] })] }));
+}

package/output/loading-button/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type ButtonProps } from '../catalyst/button';
+/**
+ * LoadingButton 组件属性类型
+ * 继承 Button 的所有属性，自动处理 onClick 的异步状态
+ */
+export type LoadingButtonProps = ButtonProps;
+/**
+ * LoadingButton 组件
+ *
+ * 自动处理 onClick 异步操作的加载状态，在按钮末尾显示 loading 图标
+ *
+ * @example
+ * ```tsx
+ * <LoadingButton
+ *   color="blue"
+ *   onClick={async () => {
+ *     await saveData()
+ *   }}
+ * >
+ *   保存
+ * </LoadingButton>
+ * ```
+ */
+export declare const LoadingButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=index.d.ts.map

package/output/loading-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/loading-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAG7D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAM5C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,iFAkDxB,CAAA"}

package/output/loading-button/index.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { Button } from '../catalyst/button';
+import { catchIt } from '@taicode/common-base';
+function isPromiseLike(value) {
+    return value != null && typeof value.then === 'function';
+}
+/**
+ * LoadingButton 组件
+ *
+ * 自动处理 onClick 异步操作的加载状态，在按钮末尾显示 loading 图标
+ *
+ * @example
+ * ```tsx
+ * <LoadingButton
+ *   color="blue"
+ *   onClick={async () => {
+ *     await saveData()
+ *   }}
+ * >
+ *   保存
+ * </LoadingButton>
+ * ```
+ */
+export const LoadingButton = forwardRef(function LoadingButton(_a, ref) {
+    var { children, onClick } = _a, props = __rest(_a, ["children", "onClick"]);
+    const [isLoading, setIsLoading] = useState(false);
+    const handleClick = async (event) => {
+        if (!onClick || isLoading)
+            return;
+        const result = onClick(event);
+        // 检查是否是 Promise
+        if (isPromiseLike(result)) {
+            setIsLoading(true);
+            const catchResult = await catchIt(result);
+            setIsLoading(false);
+            // 错误由调用方处理
+            if (catchResult.isError()) {
+                throw catchResult.error;
+            }
+        }
+    };
+    return (_jsxs(Button, Object.assign({}, props, { ref: ref, onClick: handleClick, disabled: isLoading, children: [children, isLoading && (_jsxs("svg", { "data-slot": "icon", className: "animate-spin", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }))] })));
+});

package/output/loading-button/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/output/loading-button/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../source/loading-button/index.test.tsx"],"names":[],"mappings":""}

package/output/loading-button/index.test.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LoadingButton } from './index';
+describe('LoadingButton', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.useRealTimers();
+    });
+    it('应该正常渲染按钮', () => {
+        render(_jsx(LoadingButton, { children: "\u70B9\u51FB\u6211" }));
+        expect(screen.getByRole('button')).toHaveTextContent('点击我');
+    });
+    it('应该在同步 onClick 时不显示加载状态', async () => {
+        const handleClick = vi.fn();
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { onClick: handleClick, children: "\u70B9\u51FB\u6211" }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(button).toHaveTextContent('点击我');
+    });
+    it('应该在异步 onClick 时显示加载状态', async () => {
+        const handleClick = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 1000)));
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { onClick: handleClick, children: "\u4FDD\u5B58" }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        // 应该显示加载文本
+        expect(button).toHaveTextContent('加载中...');
+        // 快进时间
+        vi.advanceTimersByTime(1000);
+        await waitFor(() => {
+            expect(button).toHaveTextContent('保存');
+        });
+    });
+    it('应该支持自定义加载文本', async () => {
+        const handleClick = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 1000)));
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { onClick: handleClick, loadingText: "\u6B63\u5728\u4FDD\u5B58...", children: "\u4FDD\u5B58" }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        expect(button).toHaveTextContent('正在保存...');
+    });
+    it('应该在加载时禁用按钮', async () => {
+        const handleClick = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 1000)));
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { onClick: handleClick, children: "\u4FDD\u5B58" }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        // 按钮应该被禁用
+        expect(button).toBeDisabled();
+        // 尝试再次点击不应该触发
+        await user.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('应该在 disableOnLoading=false 时不禁用按钮', async () => {
+        const handleClick = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 1000)));
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { onClick: handleClick, disableOnLoading: false, children: "\u4FDD\u5B58" }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        // 按钮不应该被禁用
+        expect(button).not.toBeDisabled();
+    });
+    it('应该在异步操作完成后恢复状态', async () => {
+        const handleClick = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 1000)));
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { onClick: handleClick, children: "\u4FDD\u5B58" }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        expect(button).toHaveTextContent('加载中...');
+        expect(button).toBeDisabled();
+        // 快进时间
+        vi.advanceTimersByTime(1000);
+        await waitFor(() => {
+            expect(button).toHaveTextContent('保存');
+            expect(button).not.toBeDisabled();
+        });
+    });
+    it('应该在异步操作失败后恢复状态', async () => {
+        const error = new Error('保存失败');
+        const handleClick = vi.fn().mockImplementation(() => new Promise((_, reject) => setTimeout(() => reject(error), 1000)));
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { onClick: handleClick, children: "\u4FDD\u5B58" }));
+        const button = screen.getByRole('button');
+        // 点击会抛出错误，需要捕获
+        await expect(async () => {
+            await user.click(button);
+            vi.advanceTimersByTime(1000);
+        }).rejects.toThrow('保存失败');
+        await waitFor(() => {
+            expect(button).toHaveTextContent('保存');
+            expect(button).not.toBeDisabled();
+        });
+    });
+    it('应该支持所有 Button 的颜色选项', () => {
+        const { rerender } = render(_jsx(LoadingButton, { color: "blue", children: "\u84DD\u8272\u6309\u94AE" }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        rerender(_jsx(LoadingButton, { color: "red", children: "\u7EA2\u8272\u6309\u94AE" }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        rerender(_jsx(LoadingButton, { color: "green", children: "\u7EFF\u8272\u6309\u94AE" }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('应该支持 outline 样式', () => {
+        render(_jsx(LoadingButton, { outline: true, children: "\u8F6E\u5ED3\u6309\u94AE" }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('应该支持 plain 样式', () => {
+        render(_jsx(LoadingButton, { plain: true, children: "\u7B80\u5355\u6309\u94AE" }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('应该支持 disabled 属性', () => {
+        render(_jsx(LoadingButton, { disabled: true, children: "\u7981\u7528\u6309\u94AE" }));
+        expect(screen.getByRole('button')).toBeDisabled();
+    });
+    it('应该在已禁用时不响应点击', async () => {
+        const handleClick = vi.fn();
+        const user = userEvent.setup({ delay: null });
+        render(_jsx(LoadingButton, { disabled: true, onClick: handleClick, children: "\u7981\u7528\u6309\u94AE" }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taicode/common-web",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "author": "Alain",
   "license": "ISC",
   "description": "",