@tendaui/components 1.2.4 → 1.3.1

package/styles/components/table/_index.scss

@@ -50,12 +50,12 @@
     overflow-wrap: break-word;
     background-color: inherit;
     box-sizing: border-box;
-    text-align: left;
+    text-align: start;
   }
 
   // 对齐方式
   .#{$prefix}-align-left {
-    text-align: left;
+    text-align: start;
   }
 
   .#{$prefix}-align-center {
@@ -63,7 +63,7 @@
   }
 
   .#{$prefix}-align-right {
-    text-align: right;
+    text-align: end;
   }
 
   // 文本省略
@@ -76,25 +76,28 @@
     display: block;
   }
 
-  // 当单元格启用省略�?  &__cell--ellipsis {
-  overflow: hidden;
-  position: relative;
-  max-width: 100%;
-
-  // 确保内部内容不会超出
-  & > div {
-    width: 100%;
+  // 当单元格启用省略时
+  &__cell--ellipsis {
+    overflow: hidden;
+    position: relative;
     max-width: 100%;
-    box-sizing: border-box;
+
+    // 确保内部内容不会超出
+    & > div {
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
   }
+
   // 边框模式
   &--bordered {
     td,
     th {
-      border-left: 1px solid $table-border-color;
+      border-inline-start: 1px solid $table-border-color;
 
       &:first-child {
-        border-left-width: 0;
+        border-inline-start-width: 0;
       }
     }
 
@@ -104,9 +107,11 @@
     }
   }
 
-  // 斑马�?  &--stripe {
-  tbody tr:nth-of-type(odd) {
-    background-color: $table-highlight-bg-color;
+  // 斑马纹
+  &--stripe {
+    tbody tr:nth-of-type(odd) {
+      background-color: $table-highlight-bg-color;
+    }
   }
 
   // 悬浮效果
@@ -146,7 +151,8 @@
   &--layout-fixed {
     table-layout: fixed;
 
-    // 固定布局下，省略文本需要特殊处�?    td.#{$prefix}-table__cell--ellipsis,
+    // 固定布局下，省略文本需要特殊处理
+    td.#{$prefix}-table__cell--ellipsis,
     th.#{$prefix}-table__cell--ellipsis {
       overflow: hidden;
       position: relative;
@@ -170,17 +176,19 @@
     }
   }
 
-  // 空数�?  &__empty-row {
-  td {
-    padding: 0;
-    border: 0;
-  }
+  // 空行
+  &__empty-row {
+    td {
+      padding: 0;
+      border: 0;
+    }
 
-  &__empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: $table-empty-min-height;
-    color: $table-color-empty;
+    &__empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: $table-empty-min-height;
+      color: $table-color-empty;
+    }
   }
 }

package/styles/components/tabs/_index.scss

@@ -1,5 +1,4 @@
 @use "../../_vars.scss" as *;
-@use "../../vars.scss" as *;
 @use "./vars.scss" as *;
 @use "./_mixins.scss" as *;
 @use "../../mixins/reset.scss" as *;
@@ -31,7 +30,7 @@
     position: relative;
 
     &.#{$prefix}-is-addable {
-      margin-right: $tab-btn-width;
+      margin-inline-end: $tab-btn-width;
     }
 
     &.#{$prefix}-tabs__nav--card {
@@ -61,8 +60,8 @@
       align-items: center;
       height: $tab-nav-item-wrapper-height;
       padding: $tab-nav-item-wrapper-padding;
-      margin-left: $tab-nav-item-margin-left;
-      margin-right: $tab-nav-item-margin-right;
+      margin-inline-start: $tab-nav-item-margin-left;
+      margin-inline-end: $tab-nav-item-margin-right;
       border-radius: $border-radius-default;
       transition: $tab-nav-item-transition;
 
@@ -117,7 +116,7 @@
       }
 
       & > .remove-btn {
-        margin-left: $tab-btn-remove-btn-margin-left;
+        margin-inline-start: $tab-btn-remove-btn-margin-left;
         transition: $tab-btn-remove-btn-transition;
         display: flex;
       }
@@ -135,25 +134,25 @@
 
       &.#{$prefix}-is-top {
         bottom: 0;
-        left: 0;
+        inset-inline-start: 0;
         height: $tab-default-stroke-size;
       }
 
       &.#{$prefix}-is-bottom {
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         height: $tab-default-stroke-size;
       }
 
       &.#{$prefix}-is-left {
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         width: $tab-default-stroke-size;
       }
 
       &.#{$prefix}-is-right {
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         width: $tab-default-stroke-size;
       }
     }

package/styles/components/tooltip/_index.scss

@@ -0,0 +1,104 @@
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+
+// Tooltip 组件样式
+.#{$prefix}-tooltip {
+  .#{$prefix}-popup__content {
+    display: inline-block;
+    border: 0;
+    z-index: $z-index-Tooltip;
+    margin-bottom: 1px;
+    max-width: $tooltip-max-width;
+    word-break: break-word;
+    box-sizing: border-box;
+    border-radius: $border-radius-medium;
+    color: $tooltip-light-text-color;
+  }
+
+  &--dark {
+    .#{$prefix}-popup__content {
+      color: $tooltip-text-color;
+      background: $tooltip-bg;
+      box-shadow:
+        inset 0 0.5px 0 $gray-color-9,
+        inset 0.5px 0 0 $gray-color-9,
+        inset 0 -0.5px 0 $gray-color-9,
+        inset -0.5px 0 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="left"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset -0.5px 0 0 $gray-color-9,
+        inset 0 0.5px 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="right"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset 0.5px 0 0 $gray-color-9,
+        inset 0 -0.5px 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="top"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset 0 -0.5px 0 $gray-color-9,
+        inset -0.5px 0 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="bottom"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset 0.5px 0 0 $gray-color-9,
+        inset 0 0.5px 0 $gray-color-9;
+    }
+  }
+
+  &--light {
+    .#{$prefix}-popup__content {
+      color: $tooltip-light-text-color;
+      background: $bg-color-container;
+      box-shadow: $shadow-2;
+    }
+  }
+
+  &--primary {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-primary;
+      background: $tooltip-bg-primary;
+    }
+  }
+
+  &--success {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-success;
+      background: $tooltip-bg-success;
+    }
+  }
+
+  &--error {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-danger;
+      background: $tooltip-bg-danger;
+    }
+  }
+
+  &--warning {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-warning;
+      background: $tooltip-bg-warning;
+    }
+  }
+
+  .#{$prefix}-popup__arrow {
+    background: inherit;
+    height: auto;
+    &::before {
+      background: inherit;
+    }
+  }
+
+  &--noshadow {
+    .#{$prefix}-popup__content,
+    &[data-popper-placement] .#{$prefix}-popup__arrow:before {
+      box-shadow: none;
+    }
+  }
+}

package/styles/components/tooltip/_vars.scss

@@ -0,0 +1,23 @@
+@use "../../_vars.scss" as *;
+// Tooltip 组件变量
+// 宽度
+$tooltip-max-width: 480px;
+
+// 颜色
+$tooltip-bg: $gray-color-9; // tooltip 背景色
+$tooltip-color-primary: $brand-color;
+$tooltip-bg-primary: $brand-color-light;
+$tooltip-color-success: $success-color;
+$tooltip-bg-success: $success-color-light;
+$tooltip-color-danger: $error-color;
+$tooltip-bg-danger: $error-color-light;
+$tooltip-color-warning: $warning-color;
+$tooltip-bg-warning: $warning-color-light;
+$tooltip-text-color: $text-color-anti;
+$tooltip-light-text-color: $text-color-primary;
+
+// 间距
+$tooltip-default-margin: $comp-margin-s;
+
+// tooltip箭头位移量
+$tooltip-arrow-position: $comp-margin-xs;

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 style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+    <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;