@taicode/common-web 1.1.20 → 1.1.21

package/output/loading-button/LoadingButtonDemo.js

@@ -1,33 +0,0 @@
-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.test.d.ts

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

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

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

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

@@ -1,129 +0,0 @@
-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();
-    });
-});