@tendaui/components 1.2.4 → 1.3.0

package/notification/_example/usage-example.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { NotificationProvider, useNotification, Button } from "@tendaui/react";
+
+const UsageExampleDemo = () => {
+  const UsageNotificationDemo = () => {
+    const { success, error } = useNotification();
+
+    const handleSubmit = () => {
+      // 模拟异步操作
+      setTimeout(() => {
+        const isSuccess = Math.random() > 0.5;
+        if (isSuccess) {
+          success({
+            title: "提交成功",
+            message: "您的表单已成功提交"
+          });
+        } else {
+          error({
+            title: "提交失败",
+            message: "网络异常，请稍后重试"
+          });
+        }
+      }, 500);
+    };
+
+    const handleDelete = () => {
+      success({
+        title: "删除成功",
+        message: "数据已成功删除"
+      });
+    };
+
+    const handleSave = () => {
+      success({
+        title: "保存成功",
+        message: "您的更改已保存"
+      });
+    };
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        <div style={{ color: "#666", fontSize: "12px" }}>模拟真实业务场景中的通知使用</div>
+        <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+          <Button theme="primary" onClick={handleSubmit}>
+            提交表单（随机结果）
+          </Button>
+          <Button theme="danger" onClick={handleDelete}>
+            删除数据
+          </Button>
+          <Button onClick={handleSave}>保存更改</Button>
+        </div>
+      </div>
+    );
+  };
+  return (
+    <NotificationProvider>
+      <UsageNotificationDemo />
+    </NotificationProvider>
+  );
+};
+
+export default UsageExampleDemo;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tendaui/components",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "TendaUI React Components - Source code",
   "main": "index.ts",
   "module": "index.ts",
   "types": "index.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest run --config ../../vitest.config.ts",
+    "test:watch": "vitest --config ../../vitest.config.ts"
   },
   "peerDependencies": {
     "react": ">=16.13.1",
@@ -51,5 +52,5 @@
     "**/style/css.js",
     "**/style/all.js"
   ],
-  "gitHead": "bdc34c68fc499513c8403e5645531f277d1c0dda"
+  "gitHead": "3c98b020d36c078d64e7fc4f418874e8ab567cb2"
 }

package/popup/Popup.tsx

@@ -38,7 +38,7 @@ export interface PopupRef {
 
 const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
   const props = useDefaultProps<PopupProps>(originalProps, popupDefaultProps);
-  const { classPrefix } = useConfig();
+  const { classPrefix, direction } = useConfig();
   const {
     trigger,
     content,
@@ -110,10 +110,22 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
   }, [hideEmptyPopup, content, visible, popupElement]);
 
   // 转化 placement
-  const popperPlacement = useMemo(
-    () => placement && (placement.replace(/-(left|top)$/, "-start").replace(/-(right|bottom)$/, "-end") as Placement),
-    [placement]
-  );
+  const popperPlacement = useMemo(() => {
+    if (!placement) return placement;
+    const normalized = placement.replace(/-(left|top)$/, "-start").replace(/-(right|bottom)$/, "-end");
+    if (direction !== "rtl") return normalized as Placement;
+    const parts = normalized.split("-");
+    const mirrored = parts
+      .map((part) => {
+        if (part === "left") return "right";
+        if (part === "right") return "left";
+        if (part === "start") return "end";
+        if (part === "end") return "start";
+        return part;
+      })
+      .join("-");
+    return mirrored as Placement;
+  }, [placement, direction]);
   // 获取 triggerNode
   const { getTriggerNode, getPopupProps, getTriggerDom } = useTrigger({
     triggerRef,

package/popup/_example/controlled.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const ControlledDemo = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div style={{ padding: "40px", display: "flex", flexDirection: "column", gap: "16px", alignItems: "center" }}>
+      <div style={{ display: "flex", gap: "8px" }}>
+        <Button onClick={() => setVisible(true)}>打开</Button>
+        <Button onClick={() => setVisible(false)}>关闭</Button>
+        <Button onClick={() => setVisible(!visible)}>切换</Button>
+      </div>
+      <Popup
+        visible={visible}
+        onVisibleChange={(v) => setVisible(v)}
+        content={
+          <div style={{ padding: "12px" }}>
+            <p>这是受控的弹出层</p>
+            <Button size="small" onClick={() => setVisible(false)}>
+              关闭
+            </Button>
+          </div>
+        }
+        showArrow
+      >
+        <Button>触发元素</Button>
+      </Popup>
+    </div>
+  );
+};
+
+export default ControlledDemo;

package/popup/_example/custom-content.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const CustomContentDemo = () => {
+  return (
+    <div style={{ padding: "40px", display: "flex", gap: "16px", justifyContent: "center" }}>
+      <Popup
+        trigger="click"
+        content={
+          <div style={{ padding: "16px", width: "200px" }}>
+            <h4 style={{ margin: "0 0 8px 0" }}>标题</h4>
+            <p style={{ margin: "0 0 12px 0", color: "#666", fontSize: "12px" }}>
+              这是一段描述文字，可以放置更多内容。
+            </p>
+            <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
+              <Button size="small" variant="outline">
+                取消
+              </Button>
+              <Button size="small" theme="primary">
+                确定
+              </Button>
+            </div>
+          </div>
+        }
+        showArrow
+      >
+        <Button>自定义内容</Button>
+      </Popup>
+
+      <Popup
+        trigger="hover"
+        content={
+          <div style={{ padding: "12px" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <div
+                style={{
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "50%",
+                  background: "var(--td-brand-color)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#fff"
+                }}
+              >
+                A
+              </div>
+              <div>
+                <div style={{ fontWeight: "bold" }}>用户名</div>
+                <div style={{ fontSize: "12px", color: "#999" }}>user@example.com</div>
+              </div>
+            </div>
+          </div>
+        }
+        showArrow
+      >
+        <Button>用户卡片</Button>
+      </Popup>
+    </div>
+  );
+};
+
+export default CustomContentDemo;

package/popup/_example/default.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const DefaultDemo = () => {
+  return (
+    <div style={{ padding: "40px", display: "flex", justifyContent: "center" }}>
+      <Popup 
+        trigger="click" 
+        placement="top" 
+        content={<div style={{ padding: "12px" }}>这是弹出层内容</div>}
+        showArrow
+      >
+        <Button>点击显示 Popup</Button>
+      </Popup>
+    </div>
+  );
+};
+
+export default DefaultDemo;

package/popup/_example/delay.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const DelayDemo = () => {
+  return (
+    <div style={{ padding: "40px", display: "flex", gap: "16px", justifyContent: "center" }}>
+      <Popup
+        trigger="hover"
+        content={<div style={{ padding: "12px" }}>延迟 500ms 显示</div>}
+        delay={[500, 0]}
+        showArrow
+      >
+        <Button>延迟显示</Button>
+      </Popup>
+      <Popup
+        trigger="hover"
+        content={<div style={{ padding: "12px" }}>延迟 500ms 隐藏</div>}
+        delay={[0, 500]}
+        showArrow
+      >
+        <Button>延迟隐藏</Button>
+      </Popup>
+      <Popup
+        trigger="hover"
+        content={<div style={{ padding: "12px" }}>延迟 300ms 显示和隐藏</div>}
+        delay={300}
+        showArrow
+      >
+        <Button>统一延迟</Button>
+      </Popup>
+    </div>
+  );
+};
+
+export default DelayDemo;

package/popup/_example/disabled.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const DisabledDemo = () => {
+  return (
+    <div style={{ padding: "40px", display: "flex", gap: "16px", justifyContent: "center" }}>
+      <Popup trigger="click" content={<div style={{ padding: "12px" }}>正常状态</div>} showArrow>
+        <Button>正常</Button>
+      </Popup>
+      <Popup trigger="click" content={<div style={{ padding: "12px" }}>禁用状态</div>} showArrow disabled>
+        <Button disabled>禁用</Button>
+      </Popup>
+    </div>
+  );
+};
+
+export default DisabledDemo;

package/popup/_example/no-arrow.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const NoArrowDemo = () => {
+  return (
+    <div style={{ padding: "40px", display: "flex", gap: "16px", justifyContent: "center" }}>
+      <Popup trigger="hover" content={<div style={{ padding: "12px" }}>有箭头</div>} showArrow>
+        <Button>有箭头</Button>
+      </Popup>
+      <Popup trigger="hover" content={<div style={{ padding: "12px" }}>无箭头</div>} showArrow={false}>
+        <Button>无箭头</Button>
+      </Popup>
+    </div>
+  );
+};
+
+export default NoArrowDemo;

package/popup/_example/placements.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const PlacementsDemo = () => {
+  const popupContent = (text: string) => <div style={{ padding: "8px 12px", fontSize: "12px" }}>{text}</div>;
+
+  return (
+    <div style={{ padding: "80px 120px" }}>
+      <div style={{ display: "flex", justifyContent: "center", gap: "8px", marginBottom: "8px" }}>
+        <Popup placement="top-left" content={popupContent("top-left")} showArrow trigger="hover">
+          <Button size="small">TL</Button>
+        </Popup>
+        <Popup placement="top" content={popupContent("top")} showArrow trigger="hover">
+          <Button size="small">Top</Button>
+        </Popup>
+        <Popup placement="top-right" content={popupContent("top-right")} showArrow trigger="hover">
+          <Button size="small">TR</Button>
+        </Popup>
+      </div>
+
+      <div style={{ display: "flex", justifyContent: "space-between", width: "280px", margin: "0 auto" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <Popup placement="left-top" content={popupContent("left-top")} showArrow trigger="hover">
+            <Button size="small">LT</Button>
+          </Popup>
+          <Popup placement="left" content={popupContent("left")} showArrow trigger="hover">
+            <Button size="small">Left</Button>
+          </Popup>
+          <Popup placement="left-bottom" content={popupContent("left-bottom")} showArrow trigger="hover">
+            <Button size="small">LB</Button>
+          </Popup>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <Popup placement="right-top" content={popupContent("right-top")} showArrow trigger="hover">
+            <Button size="small">RT</Button>
+          </Popup>
+          <Popup placement="right" content={popupContent("right")} showArrow trigger="hover">
+            <Button size="small">Right</Button>
+          </Popup>
+          <Popup placement="right-bottom" content={popupContent("right-bottom")} showArrow trigger="hover">
+            <Button size="small">RB</Button>
+          </Popup>
+        </div>
+      </div>
+
+      <div style={{ display: "flex", justifyContent: "center", gap: "8px", marginTop: "8px" }}>
+        <Popup placement="bottom-left" content={popupContent("bottom-left")} showArrow trigger="hover">
+          <Button size="small">BL</Button>
+        </Popup>
+        <Popup placement="bottom" content={popupContent("bottom")} showArrow trigger="hover">
+          <Button size="small">Bottom</Button>
+        </Popup>
+        <Popup placement="bottom-right" content={popupContent("bottom-right")} showArrow trigger="hover">
+          <Button size="small">BR</Button>
+        </Popup>
+      </div>
+    </div>
+  );
+};
+
+export default PlacementsDemo;

package/popup/_example/triggers.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Popup, Button } from "@tendaui/react";
+
+const TriggersDemo = () => {
+  return (
+    <div style={{ padding: "40px", display: "flex", gap: "16px", flexWrap: "wrap", justifyContent: "center" }}>
+      <Popup trigger="click" content={<div style={{ padding: "12px" }}>点击触发</div>} showArrow>
+        <Button>Click 触发</Button>
+      </Popup>
+
+      <Popup trigger="hover" content={<div style={{ padding: "12px" }}>悬停触发</div>} showArrow>
+        <Button>Hover 触发</Button>
+      </Popup>
+
+      <Popup trigger="focus" content={<div style={{ padding: "12px" }}>聚焦触发</div>} showArrow>
+        <Button>Focus 触发</Button>
+      </Popup>
+
+      <Popup trigger="context-menu" content={<div style={{ padding: "12px" }}>右键触发</div>} showArrow>
+        <Button>右键触发</Button>
+      </Popup>
+    </div>
+  );
+};
+
+export default TriggersDemo;

package/radio/_example/allow-uncheck.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Radio } from "@tendaui/react";
+
+const AllowUncheckDemo = () => {
+  const [value, setValue] = useState<string | undefined>("a");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中：{value || "(无)"}</div>
+      <Radio.Group allowUncheck value={value} onChange={(val) => setValue(val as string)}>
+        <Radio value="a">选项 A</Radio>
+        <Radio value="b">选项 B</Radio>
+        <Radio value="c">选项 C</Radio>
+      </Radio.Group>
+      <div style={{ color: "#666", fontSize: "12px" }}>提示：再次点击已选中的选项可以取消选中</div>
+    </div>
+  );
+};
+
+export default AllowUncheckDemo;

package/radio/_example/button-style.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Radio } from "@tendaui/react";
+
+const ButtonStyleDemo = () => {
+  const [value1, setValue1] = useState("a");
+  const [value2, setValue2] = useState("a");
+  const [value3, setValue3] = useState("a");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>outline 样式（默认）</div>
+        <Radio.Group value={value1} onChange={(val) => setValue1(val as string)} variant="outline">
+          <Radio.Button value="a">选项 A</Radio.Button>
+          <Radio.Button value="b">选项 B</Radio.Button>
+          <Radio.Button value="c">选项 C</Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>primary-filled 样式</div>
+        <Radio.Group value={value2} onChange={(val) => setValue2(val as string)} variant="primary-filled">
+          <Radio.Button value="a">选项 A</Radio.Button>
+          <Radio.Button value="b">选项 B</Radio.Button>
+          <Radio.Button value="c">选项 C</Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>default-filled 样式</div>
+        <Radio.Group value={value3} onChange={(val) => setValue3(val as string)} variant="default-filled">
+          <Radio.Button value="a">选项 A</Radio.Button>
+          <Radio.Button value="b">选项 B</Radio.Button>
+          <Radio.Button value="c">选项 C</Radio.Button>
+        </Radio.Group>
+      </div>
+    </div>
+  );
+};
+
+export default ButtonStyleDemo;

package/radio/_example/controlled.tsx

@@ -0,0 +1,13 @@
+import React, { useState } from "react";
+import { Radio } from "@tendaui/react";
+
+const ControlledDemo = () => {
+  const [checked, setChecked] = useState(true);
+  return (
+    <Radio checked={checked} onChange={(val) => setChecked(val)}>
+      受控单选框（点击切换）
+    </Radio>
+  );
+};
+
+export default ControlledDemo;

package/radio/_example/default.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Radio } from "@tendaui/react";
+
+const DefaultDemo = () => {
+  return (
+    <div>
+      <Radio>未选中</Radio>
+      <Radio defaultChecked>选中</Radio>
+    </div>
+  );
+};
+
+export default DefaultDemo;

package/radio/_example/group-disabled.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Radio } from "@tendaui/react";
+
+const GroupDisabledDemo = () => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Radio.Group disabled defaultValue="b">
+        <Radio value="a">选项 A</Radio>
+        <Radio value="b">选项 B</Radio>
+        <Radio value="c">选项 C</Radio>
+      </Radio.Group>
+
+      <Radio.Group disabled defaultValue="b" variant="primary-filled">
+        <Radio.Button value="a">选项 A</Radio.Button>
+        <Radio.Button value="b">选项 B</Radio.Button>
+        <Radio.Button value="c">选项 C</Radio.Button>
+      </Radio.Group>
+    </div>
+  );
+};
+
+export default GroupDisabledDemo;

package/radio/_example/group-with-options.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Radio } from "@tendaui/react";
+
+const GroupWithOptionsDemo = () => {
+  const [value, setValue] = useState("2");
+  const options = [
+    { label: "选项一", value: "1" },
+    { label: "选项二", value: "2" },
+    { label: "选项三", value: "3", disabled: true },
+    { label: "选项四", value: "4" }
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中值：{value}</div>
+      <Radio.Group options={options} value={value} onChange={(val) => setValue(val as string)} />
+    </div>
+  );
+};
+
+export default GroupWithOptionsDemo;

package/radio/_example/group.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Radio } from "@tendaui/react";
+
+const GroupDemo = () => {
+  const [value, setValue] = useState("beijing");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>当前选中：{value}</div>
+      <Radio.Group value={value} onChange={(val) => setValue(val as string)}>
+        <Radio value="beijing">北京</Radio>
+        <Radio value="shanghai">上海</Radio>
+        <Radio value="guangzhou">广州</Radio>
+        <Radio value="shenzhen">深圳</Radio>
+      </Radio.Group>
+    </div>
+  );
+};
+
+export default GroupDemo;

package/radio/_example/sizes.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Radio } from "@tendaui/react";
+
+const SizesDemo = () => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>小尺寸</div>
+        <Radio.Group size="small" defaultValue="a">
+          <Radio.Button value="a">选项 A</Radio.Button>
+          <Radio.Button value="b">选项 B</Radio.Button>
+          <Radio.Button value="c">选项 C</Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>中尺寸（默认）</div>
+        <Radio.Group size="medium" defaultValue="a">
+          <Radio.Button value="a">选项 A</Radio.Button>
+          <Radio.Button value="b">选项 B</Radio.Button>
+          <Radio.Button value="c">选项 C</Radio.Button>
+        </Radio.Group>
+      </div>
+
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>大尺寸</div>
+        <Radio.Group size="large" defaultValue="a">
+          <Radio.Button value="a">选项 A</Radio.Button>
+          <Radio.Button value="b">选项 B</Radio.Button>
+          <Radio.Button value="c">选项 C</Radio.Button>
+        </Radio.Group>
+      </div>
+    </div>
+  );
+};
+
+export default SizesDemo;

package/radio/_example/states.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Radio } from "@tendaui/react";
+
+const StatesDemo = () => {
+  return (
+    <div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
+      <Radio>未选中</Radio>
+      <Radio defaultChecked>选中</Radio>
+      <Radio disabled>禁用未选中</Radio>
+      <Radio disabled defaultChecked>
+        禁用选中
+      </Radio>
+      <Radio readonly defaultChecked>
+        只读选中
+      </Radio>
+    </div>
+  );
+};
+
+export default StatesDemo;

package/select/_example/collapsed.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const CollapsedExample = () => {
+  const [value, setValue] = useState<string[]>(["1", "2", "3", "5"]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Select
+        value={value}
+        onChange={(val) => setValue(val as string[])}
+        options={basicOptions}
+        placeholder="请选择"
+        multiple
+        minCollapsedNum={2}
+        style={{ width: "400px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>超过 2 个选项时会折叠显示</div>
+    </div>
+  );
+};
+
+export default CollapsedExample;