@tendaui/components 1.2.3 → 1.3.0

package/styles/themes/_size.scss

@@ -1,68 +1,68 @@
-// size/margin/padding相关 token
-:root {
-  --td-size-1: 2px;
-  --td-size-2: 4px;
-  --td-size-3: 6px;
-  --td-size-4: 8px;
-  --td-size-5: 12px;
-  --td-size-6: 16px;
-  --td-size-7: 20px;
-  --td-size-8: 24px;
-  --td-size-9: 28px;
-  --td-size-10: 32px;
-  --td-size-11: 36px;
-  --td-size-12: 40px;
-  --td-size-13: 48px;
-  --td-size-14: 56px;
-  --td-size-15: 64px;
-  --td-size-16: 72px;
-
-  //全局 component 组件尺寸高度相关 token
-  --td-comp-size-xxxs: var(--td-size-6);
-  --td-comp-size-xxs: var(--td-size-7);
-  --td-comp-size-xs: var(--td-size-8);
-  --td-comp-size-s: var(--td-size-9);
-  --td-comp-size-m: var(--td-size-10);
-  --td-comp-size-l: var(--td-size-11);
-  --td-comp-size-xl: var(--td-size-12);
-  --td-comp-size-xxl: var(--td-size-13);
-  --td-comp-size-xxxl: var(--td-size-14);
-  --td-comp-size-xxxxl: var(--td-size-15);
-  --td-comp-size-xxxxxl: var(--td-size-16);
-
-  //全局 popup 弹出层整体边距 token
-  --td-pop-padding-s: var(--td-size-2);
-  --td-pop-padding-m: var(--td-size-3);
-  --td-pop-padding-l: var(--td-size-4);
-  --td-pop-padding-xl: var(--td-size-5);
-  --td-pop-padding-xxl: var(--td-size-6);
-
-  //全局 component 组件左右边距 token
-  --td-comp-paddingLR-xxs: var(--td-size-1);
-  --td-comp-paddingLR-xs: var(--td-size-2);
-  --td-comp-paddingLR-s: var(--td-size-4);
-  --td-comp-paddingLR-m: var(--td-size-5);
-  --td-comp-paddingLR-l: var(--td-size-6);
-  --td-comp-paddingLR-xl: var(--td-size-8);
-  --td-comp-paddingLR-xxl: var(--td-size-10);
-
-  //全局 component 组件上下边距 token
-  --td-comp-paddingTB-xxs: var(--td-size-1);
-  --td-comp-paddingTB-xs: var(--td-size-2);
-  --td-comp-paddingTB-s: var(--td-size-4);
-  --td-comp-paddingTB-m: var(--td-size-5);
-  --td-comp-paddingTB-l: var(--td-size-6);
-  --td-comp-paddingTB-xl: var(--td-size-8);
-  --td-comp-paddingTB-xxl: var(--td-size-10);
-
-  //全局 component 组件间距 token
-  --td-comp-margin-xxs: var(--td-size-1);
-  --td-comp-margin-xs: var(--td-size-2);
-  --td-comp-margin-s: var(--td-size-4);
-  --td-comp-margin-m: var(--td-size-5);
-  --td-comp-margin-l: var(--td-size-6);
-  --td-comp-margin-xl: var(--td-size-7);
-  --td-comp-margin-xxl: var(--td-size-8);
-  --td-comp-margin-xxxl: var(--td-size-10);
-  --td-comp-margin-xxxxl: var(--td-size-12);
-}
+// size/margin/padding相关 token
+:root {
+  --td-size-1: 2px;
+  --td-size-2: 4px;
+  --td-size-3: 6px;
+  --td-size-4: 8px;
+  --td-size-5: 12px;
+  --td-size-6: 16px;
+  --td-size-7: 20px;
+  --td-size-8: 24px;
+  --td-size-9: 28px;
+  --td-size-10: 32px;
+  --td-size-11: 36px;
+  --td-size-12: 40px;
+  --td-size-13: 48px;
+  --td-size-14: 56px;
+  --td-size-15: 64px;
+  --td-size-16: 72px;
+
+  //全局 component 组件尺寸高度相关 token
+  --td-comp-size-xxxs: var(--td-size-6);
+  --td-comp-size-xxs: var(--td-size-7);
+  --td-comp-size-xs: var(--td-size-8);
+  --td-comp-size-s: var(--td-size-9);
+  --td-comp-size-m: var(--td-size-10);
+  --td-comp-size-l: var(--td-size-11);
+  --td-comp-size-xl: var(--td-size-12);
+  --td-comp-size-xxl: var(--td-size-13);
+  --td-comp-size-xxxl: var(--td-size-14);
+  --td-comp-size-xxxxl: var(--td-size-15);
+  --td-comp-size-xxxxxl: var(--td-size-16);
+
+  //全局 popup 弹出层整体边距token
+  --td-pop-padding-s: var(--td-size-2);
+  --td-pop-padding-m: var(--td-size-3);
+  --td-pop-padding-l: var(--td-size-4);
+  --td-pop-padding-xl: var(--td-size-5);
+  --td-pop-padding-xxl: var(--td-size-6);
+
+  //全局 component 组件左右边距 token
+  --td-comp-paddingLR-xxs: var(--td-size-1);
+  --td-comp-paddingLR-xs: var(--td-size-2);
+  --td-comp-paddingLR-s: var(--td-size-4);
+  --td-comp-paddingLR-m: var(--td-size-5);
+  --td-comp-paddingLR-l: var(--td-size-6);
+  --td-comp-paddingLR-xl: var(--td-size-8);
+  --td-comp-paddingLR-xxl: var(--td-size-10);
+
+  //全局 component 组件上下边距 token
+  --td-comp-paddingTB-xxs: var(--td-size-1);
+  --td-comp-paddingTB-xs: var(--td-size-2);
+  --td-comp-paddingTB-s: var(--td-size-4);
+  --td-comp-paddingTB-m: var(--td-size-5);
+  --td-comp-paddingTB-l: var(--td-size-6);
+  --td-comp-paddingTB-xl: var(--td-size-8);
+  --td-comp-paddingTB-xxl: var(--td-size-10);
+
+  //全局 component 组件间距 token
+  --td-comp-margin-xxs: var(--td-size-1);
+  --td-comp-margin-xs: var(--td-size-2);
+  --td-comp-margin-s: var(--td-size-4);
+  --td-comp-margin-m: var(--td-size-5);
+  --td-comp-margin-l: var(--td-size-6);
+  --td-comp-margin-xl: var(--td-size-7);
+  --td-comp-margin-xxl: var(--td-size-8);
+  --td-comp-margin-xxxl: var(--td-size-10);
+  --td-comp-margin-xxxxl: var(--td-size-12);
+}

package/styles/utilities/_animation.scss

@@ -1,57 +1,58 @@
-@import '../_vars.scss';
-
-@keyframes t-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes t-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes t-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.#{$prefix}-icon-loading {
-  animation: t-spin 1s linear infinite;
-}
-
-// 动态生成 keyframes 动画
-@mixin anim-g-attr-change($name, $attr, $from, $to) {
-  @keyframes #{$name} {
-    from {
-      #{$attr}: #{$from};
-    }
-    to {
-      #{$attr}: #{$to};
-    }
-  }
-}
-
-@keyframes t-zoom-out {
-  from {
-    transform: scale(0.2);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
+@use "../_vars.scss" as *;
+@use "../_vars.scss" as *;
+
+@keyframes t-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes t-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes t-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.#{$prefix}-icon-loading {
+  animation: t-spin 1s linear infinite;
+}
+
+// 动态生成 keyframes 动画
+@mixin anim-g-attr-change($name, $attr, $from, $to) {
+  @keyframes #{$name} {
+    from {
+      #{$attr}: #{$from};
+    }
+    to {
+      #{$attr}: #{$to};
+    }
+  }
+}
+
+@keyframes t-zoom-out {
+  from {
+    transform: scale(0.2);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}

package/styles/utilities/_tips.scss

@@ -1,9 +1,10 @@
-@import '../mixins/_text.scss';
-.#{$prefix}-tips {
-  font-size: $font-size-s;
-}
-
-@include tips-text-status(default);
-@include tips-text-status(error);
-@include tips-text-status(warning);
-@include tips-text-status(success);
+@use "../_vars.scss" as *;
+@use "../mixins/_text.scss" as *;
+.#{$prefix}-tips {
+  font-size: $font-size-s;
+}
+
+@include tips-text-status(default);
+@include tips-text-status(error);
+@include tips-text-status(warning);
+@include tips-text-status(success);

package/switch/_example/async-change.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const AsyncExample = () => {
+  const [checked, setChecked] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (val: boolean) => {
+    setLoading(true);
+    // 模拟异步请求
+    setTimeout(() => {
+      setChecked(val);
+      setLoading(false);
+    }, 1000);
+  };
+
+  return (
+    <div>
+      <Switch value={checked} loading={loading} onChange={(val) => handleChange(val as boolean)} />
+      <div style={{ color: "#666", fontSize: "12px" }}>点击切换，模拟 1 秒异步请求</div>
+    </div>
+  );
+};
+
+export default AsyncExample;

package/switch/_example/before-change.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const BeforeChangeExample = () => {
+  const [checked, setChecked] = useState(false);
+
+  const beforeChange = () => {
+    return new Promise<boolean>((resolve) => {
+      const confirmed = window.confirm("确定要切换状态吗？");
+      resolve(confirmed);
+    });
+  };
+
+  return (
+    <div>
+      <Switch value={checked} beforeChange={beforeChange} onChange={(val) => setChecked(val as boolean)} />
+      <div style={{ color: "#666", fontSize: "12px" }}>切换前会弹出确认框，确认后才会切换</div>
+    </div>
+  );
+};
+
+export default BeforeChangeExample;

package/switch/_example/controlled.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const ControlledExample = () => {
+  const [checked, setChecked] = useState(true);
+  return (
+    <div>
+      <Switch value={checked} onChange={(val) => setChecked(val as boolean)} />
+      <div style={{ color: "#666" }}>当前状态：{checked ? "开启" : "关闭"}</div>
+    </div>
+  );
+};
+
+export default ControlledExample;

package/switch/_example/custom-value.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const CustomValueExample = () => {
+  const [value1, setValue1] = useState<string | number | boolean>(1);
+  const [value2, setValue2] = useState<string | number | boolean>("open");
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+        <Switch customValue={[1, 0]} value={value1} onChange={(val) => setValue1(val)} />
+        <span style={{ color: "#666" }}>数字值: {String(value1)}</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+        <Switch customValue={["open", "close"]} value={value2} onChange={(val) => setValue2(val)} />
+        <span style={{ color: "#666" }}>字符串值: {String(value2)}</span>
+      </div>
+    </div>
+  );
+};
+
+export default CustomValueExample;

package/switch/_example/default.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const DefaultExample = () => <Switch defaultValue={true} />;
+
+export default DefaultExample;

package/switch/_example/disabled.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const DisabledExample = () => (
+  <div style={{ display: "flex", gap: "24px" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch defaultValue={false} />
+      <span style={{ color: "#666", fontSize: "12px" }}>正常关闭</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>正常开启</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch disabled defaultValue={false} />
+      <span style={{ color: "#666", fontSize: "12px" }}>禁用关闭</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch disabled defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>禁用开启</span>
+    </div>
+  </div>
+);
+
+export default DisabledExample;

package/switch/_example/loading.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const LoadingExample = () => (
+  <div style={{ display: "flex", gap: "24px" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch loading defaultValue={false} />
+      <span style={{ color: "#666", fontSize: "12px" }}>加载中（关）</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch loading defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>加载中（开）</span>
+    </div>
+  </div>
+);
+
+export default LoadingExample;

package/switch/_example/sizes.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const SizesExample = () => (
+  <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch size="small" defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>小</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch size="medium" defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>中（默认）</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch size="large" defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>大</span>
+    </div>
+  </div>
+);
+
+export default SizesExample;

package/switch/_example/with-label.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const WithLabelExample = () => (
+  <div>
+    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Switch label={["开", "关"]} defaultValue={true} />
+      <span style={{ color: "#666" }}>数组形式</span>
+    </div>
+    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Switch label={["ON", "OFF"]} defaultValue={false} />
+      <span style={{ color: "#666" }}>英文标签</span>
+    </div>
+    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Switch label={["1", "0"]} defaultValue={true} />
+      <span style={{ color: "#666" }}>数字标签</span>
+    </div>
+  </div>
+);
+
+export default WithLabelExample;

package/tab/TabPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useState, useEffect } from "react";
 import classNames from "classnames";
 import type { TdTabPanelProps } from "./type";
 import { StyledProps } from "../common";
@@ -17,13 +17,16 @@ const TabPanel: React.FC<TabPanelProps> = (props) => {
     tabPanelDefaultProps
   );
   const { tdTabPanelClassPrefix } = useTabClass();
-  const lazyRenderRef = useRef(lazy);
+  const [shouldRender, setShouldRender] = useState(!lazy);
 
-  if (lazy && isActive && lazyRenderRef.current) {
-    lazyRenderRef.current = false;
-  }
+  // 当标签激活且是延迟渲染时，设置为应该渲染
+  useEffect(() => {
+    if (lazy && isActive) {
+      setShouldRender(true);
+    }
+  }, [lazy, isActive]);
 
-  if ((!isActive && destroyOnHide) || lazyRenderRef.current) {
+  if ((!isActive && destroyOnHide) || !shouldRender) {
     return null;
   }
 

package/tab/_example/addable.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const AddableExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+  const [tabs, setTabs] = useState([
+    { label: "选项卡一", value: "tab1" },
+    { label: "选项卡二", value: "tab2" }
+  ]);
+  const [tabCount, setTabCount] = useState(2);
+
+  const handleAdd = () => {
+    const newTabValue = `tab${tabCount + 1}`;
+    const newTab = { label: `选项卡${tabCount + 1}`, value: newTabValue };
+    setTabs([...tabs, newTab]);
+    setTabCount(tabCount + 1);
+    setActiveTab(newTabValue);
+  };
+
+  const handleRemove = (options: { value: string | number; index: number }) => {
+    const newTabs = tabs.filter((tab) => tab.value !== options.value);
+    setTabs(newTabs);
+    if (activeTab === options.value && newTabs.length > 0) {
+      setActiveTab(newTabs[0].value);
+    }
+  };
+
+  return (
+    <Tabs
+      value={activeTab}
+      onChange={(val) => setActiveTab(val as string)}
+      addable
+      onAdd={handleAdd}
+      onRemove={handleRemove}
+    >
+      {tabs.map((tab) => (
+        <TabPanel key={tab.value} label={tab.label} value={tab.value} removable>
+          <div style={{ padding: "16px" }}>{tab.label} 的内容</div>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+};
+
+export default AddableExample;

package/tab/_example/card-theme.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const CardThemeExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)} theme="card">
+      <TabPanel label="选项卡一" value="tab1">
+        <div style={{ padding: "16px" }}>卡片风格 - 选项卡一的内容</div>
+      </TabPanel>
+      <TabPanel label="选项卡二" value="tab2">
+        <div style={{ padding: "16px" }}>卡片风格 - 选项卡二的内容</div>
+      </TabPanel>
+      <TabPanel label="选项卡三" value="tab3">
+        <div style={{ padding: "16px" }}>卡片风格 - 选项卡三的内容</div>
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+export default CardThemeExample;

package/tab/_example/default.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const DefaultExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)}>
+      <TabPanel label="选项卡一" value="tab1">
+        <div style={{ padding: "16px" }}>选项卡一的内容</div>
+      </TabPanel>
+      <TabPanel label="选项卡二" value="tab2">
+        <div style={{ padding: "16px" }}>选项卡二的内容</div>
+      </TabPanel>
+      <TabPanel label="选项卡三" value="tab3">
+        <div style={{ padding: "16px" }}>选项卡三的内容</div>
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+export default DefaultExample;

package/tab/_example/disabled.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const DisabledExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>部分禁用</div>
+        <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)}>
+          <TabPanel label="选项卡一" value="tab1">
+            <div style={{ padding: "16px" }}>选项卡一的内容</div>
+          </TabPanel>
+          <TabPanel label="选项卡二（禁用）" value="tab2" disabled>
+            <div style={{ padding: "16px" }}>选项卡二的内容</div>
+          </TabPanel>
+          <TabPanel label="选项卡三" value="tab3">
+            <div style={{ padding: "16px" }}>选项卡三的内容</div>
+          </TabPanel>
+        </Tabs>
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>全部禁用</div>
+        <Tabs value="tab1" disabled>
+          <TabPanel label="选项卡一" value="tab1">
+            <div style={{ padding: "16px" }}>选项卡一的内容</div>
+          </TabPanel>
+          <TabPanel label="选项卡二" value="tab2">
+            <div style={{ padding: "16px" }}>选项卡二的内容</div>
+          </TabPanel>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default DisabledExample;

package/tab/_example/lazy.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const LazyExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>懒加载模式下，只有在选项卡被激活时才会渲染内容</div>
+      <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)}>
+        <TabPanel label="选项卡一" value="tab1" lazy>
+          <div style={{ padding: "16px" }}>选项卡一的内容（懒加载）</div>
+        </TabPanel>
+        <TabPanel label="选项卡二" value="tab2" lazy>
+          <div style={{ padding: "16px" }}>选项卡二的内容（懒加载）</div>
+        </TabPanel>
+        <TabPanel label="选项卡三" value="tab3" lazy>
+          <div style={{ padding: "16px" }}>选项卡三的内容（懒加载）</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  );
+};
+
+export default LazyExample;