@tendaui/components 1.2.4 → 1.3.1

package/select/_example/creatable.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const CreatableExample = () => {
+  const [value, setValue] = useState<string[]>([]);
+  const [options, setOptions] = useState([
+    { label: "React", value: "react" },
+    { label: "Vue", value: "vue" },
+    { label: "Angular", value: "angular" }
+  ]);
+
+  const handleCreate = (val: string | number) => {
+    const newOption = { label: String(val), value: String(val) };
+    setOptions([...options, newOption]);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Select
+        value={value}
+        onChange={(val) => setValue(val as string[])}
+        options={options}
+        placeholder="输入并回车创建新选项"
+        multiple
+        filterable
+        creatable
+        clearable
+        onCreate={handleCreate}
+        style={{ width: "400px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>提示：输入新内容后按回车可创建新选项</div>
+    </div>
+  );
+};
+
+export default CreatableExample;

package/select/_example/custom-content.tsx

@@ -0,0 +1,26 @@
+import { Select } from "@tendaui/react";
+import React from "react";
+
+const customOptions = [
+  { label: "架构云", value: "1", content: <span style={{ color: "var(--td-brand-color)" }}>架构云（推荐）</span> },
+  {
+    label: "大数据",
+    value: "2",
+    content: (
+      <span>
+        大数据 <span style={{ color: "#999", fontSize: "12px" }}>- 企业版</span>
+      </span>
+    )
+  },
+  {
+    label: "人工智能",
+    value: "3",
+    content: <span style={{ color: "var(--td-success-color)" }}>人工智能（新）</span>
+  }
+];
+
+const CustomContentExample = () => (
+  <Select options={customOptions} placeholder="选项支持自定义内容" style={{ width: "300px" }} />
+);
+
+export default CustomContentExample;

package/select/_example/default.tsx

@@ -0,0 +1,29 @@
+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 DefaultExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Select
+        value={value}
+        onChange={(val) => setValue(val as string)}
+        options={basicOptions}
+        placeholder="请选择"
+        clearable
+        style={{ width: "300px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>选中值：{value || "(空)"}</div>
+    </div>
+  );
+};
+
+export default DefaultExample;

package/select/_example/disabled.tsx

@@ -0,0 +1,20 @@
+import React 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 DisabledExample = () => (
+  <div style={{ display: "flex", gap: "16px" }}>
+    <Select options={basicOptions} placeholder="正常状态" style={{ width: "200px" }} />
+    <Select options={basicOptions} placeholder="禁用状态" disabled defaultValue="1" style={{ width: "200px" }} />
+    <Select options={basicOptions} placeholder="只读状态" readonly defaultValue="2" style={{ width: "200px" }} />
+  </div>
+);
+
+export default DisabledExample;

package/select/_example/filterable.tsx

@@ -0,0 +1,27 @@
+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 FilterableExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <Select
+      value={value}
+      onChange={(val) => setValue(val as string)}
+      options={basicOptions}
+      placeholder="请输入关键词搜索"
+      filterable
+      clearable
+      style={{ width: "300px" }}
+    />
+  );
+};
+
+export default FilterableExample;

package/select/_example/group-options.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const groupOptions = [
+  {
+    group: "华北",
+    children: [
+      { label: "北京", value: "beijing" },
+      { label: "天津", value: "tianjin" }
+    ]
+  },
+  {
+    group: "华东",
+    children: [
+      { label: "上海", value: "shanghai" },
+      { label: "南京", value: "nanjing" },
+      { label: "杭州", value: "hangzhou" }
+    ]
+  },
+  {
+    group: "华南",
+    children: [
+      { label: "广州", value: "guangzhou" },
+      { label: "深圳", value: "shenzhen" }
+    ]
+  }
+];
+
+const GroupExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <Select
+      value={value}
+      onChange={(val) => setValue(val as string)}
+      options={groupOptions}
+      placeholder="请选择城市"
+      filterable
+      clearable
+      style={{ width: "300px" }}
+    />
+  );
+};
+
+export default GroupExample;

package/select/_example/label-suffix.tsx

@@ -0,0 +1,24 @@
+import React 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 LabelSuffixExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <Select label="城市：" options={basicOptions} placeholder="请选择" style={{ width: "350px" }} />
+    <Select
+      suffix={<span style={{ color: "#999" }}>个</span>}
+      options={basicOptions}
+      placeholder="请选择"
+      style={{ width: "350px" }}
+    />
+  </div>
+);
+
+export default LabelSuffixExample;

package/select/_example/loading.tsx

@@ -0,0 +1,19 @@
+import React 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 LoadingExample = () => (
+  <div style={{ display: "flex", gap: "16px" }}>
+    <Select options={basicOptions} placeholder="正常" style={{ width: "200px" }} />
+    <Select options={[]} placeholder="加载中..." loading style={{ width: "200px" }} />
+  </div>
+);
+
+export default LoadingExample;

package/select/_example/multiple.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const MultipleExample = () => {
+  const [value, setValue] = useState<string[]>(["1", "3"]);
+  const options = [
+    { label: "全选", checkAll: true },
+    { label: "架构云", value: "1" },
+    { label: "大数据", value: "2" },
+    { label: "区块链", value: "3" },
+    { label: "物联网", value: "4", disabled: true },
+    { label: "人工智能", value: "5" }
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Select
+        value={value}
+        onChange={(val) => setValue(val as string[])}
+        options={options}
+        placeholder="请选择多个选项"
+        multiple
+        filterable
+        clearable
+        style={{ width: "400px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>选中值：{JSON.stringify(value)}</div>
+    </div>
+  );
+};
+
+export default MultipleExample;

package/select/_example/sizes.tsx

@@ -0,0 +1,20 @@
+import React 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 SizesExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <Select size="small" options={basicOptions} placeholder="小尺寸" style={{ width: "300px" }} />
+    <Select size="medium" options={basicOptions} placeholder="中尺寸（默认）" style={{ width: "300px" }} />
+    <Select size="large" options={basicOptions} placeholder="大尺寸" style={{ width: "300px" }} />
+  </div>
+);
+
+export default SizesExample;

package/select/_example/status.tsx

@@ -0,0 +1,27 @@
+import React 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 StatusExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px", margin: "8px 0" }}>
+    <Select
+      status="default"
+      options={basicOptions}
+      placeholder="默认状态"
+      tips="这是一条提示"
+      style={{ width: "300px" }}
+    />
+    <Select status="success" options={basicOptions} placeholder="成功状态" tips="校验通过" style={{ width: "300px" }} />
+    <Select status="warning" options={basicOptions} placeholder="警告状态" tips="请注意" style={{ width: "300px" }} />
+    <Select status="error" options={basicOptions} placeholder="错误状态" tips="输入有误" style={{ width: "300px" }} />
+  </div>
+);
+
+export default StatusExample;

package/slider/Slider.tsx

@@ -22,7 +22,7 @@ const RIGHT_NODE = 1;
 type SliderHandleNode = typeof LEFT_NODE | typeof RIGHT_NODE;
 
 const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref) => {
-  const { classPrefix } = useConfig();
+  const { classPrefix, direction } = useConfig();
   const props = useDefaultProps(originalProps, sliderDefaultProps);
   const {
     disabled,
@@ -43,6 +43,7 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref
   const sliderRef = useRef<HTMLDivElement>(null);
   const [value, internalOnChange] = useControlled(props, "value", onChange);
   const isVertical = layout === "vertical";
+  const isRtl = direction === "rtl";
 
   const renderValue = Array.isArray(value) ? value : [min, Math.min(max, value)];
   const start = (renderValue[LEFT_NODE] - min) / (max - min);
@@ -95,8 +96,8 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref
     return result;
   }, [max, min, step]);
 
-  const startDirection = isVertical ? "bottom" : "left";
-  const stepDirection = isVertical ? "top" : "left";
+  const startDirection = isVertical ? "bottom" : isRtl ? "right" : "left";
+  const stepDirection = isVertical ? "top" : isRtl ? "right" : "left";
   const sizeKey = isVertical ? "height" : "width";
   const renderDots = isVertical ? dots.map((item) => ({ ...item, position: 1 - item.position })) : dots;
 
@@ -168,8 +169,15 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref
 
     const clientKey = isVertical ? "clientY" : "clientX";
     const sliderPositionInfo = sliderRef.current.getBoundingClientRect();
-    const sliderOffset = sliderPositionInfo[startDirection];
-    const position = ((event[clientKey] - sliderOffset) / sliderPositionInfo[sizeKey]) * (isVertical ? -1 : 1);
+    let position = 0;
+    if (isVertical) {
+      const sliderOffset = sliderPositionInfo[startDirection];
+      position = ((event[clientKey] - sliderOffset) / sliderPositionInfo[sizeKey]) * -1;
+    } else if (isRtl) {
+      position = (sliderPositionInfo.right - event[clientKey]) / sliderPositionInfo.width;
+    } else {
+      position = (event[clientKey] - sliderPositionInfo.left) / sliderPositionInfo.width;
+    }
     setPosition(position, nodeIndex);
   };
 

package/slider/_example/custom-label.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const CustomLabelExample = () => {
+  const [value, setValue] = useState<number>(50);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider
+        value={value}
+        onChange={(val) => setValue(val as number)}
+        label={({ value, position }) => (
+          <span style={{ color: position === "start" ? "blue" : "green" }}>{value}%</span>
+        )}
+      />
+    </div>
+  );
+};
+
+export default CustomLabelExample;

package/slider/_example/default.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const BasicExample = () => {
+  const [value, setValue] = useState<number>(30);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider value={value} onChange={(val) => setValue(val as number)} label={({ value }) => `${value}%`} />
+      <div style={{ marginTop: "16px", color: "#666" }}>当前值：{value}</div>
+    </div>
+  );
+};
+
+export default BasicExample;

package/slider/_example/disabled.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Slider } from "@tendaui/react";
+
+const DisabledExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "40px" }}>
+    <div style={{ width: "400px" }}>
+      <div style={{ marginBottom: "8px", color: "#666" }}>正常</div>
+      <Slider defaultValue={50} />
+    </div>
+    <div style={{ width: "400px" }}>
+      <div style={{ marginBottom: "8px", color: "#666" }}>禁用</div>
+      <Slider defaultValue={50} disabled />
+    </div>
+  </div>
+);
+
+export default DisabledExample;

package/slider/_example/marks.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const MarksExample = () => {
+  const [value1, setValue1] = useState<number>(30);
+  const [value2, setValue2] = useState<number>(50);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "60px", margin: "8px 0 16px 0" }}>
+      <div style={{ width: "400px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>数组形式刻度</div>
+        <Slider value={value1} onChange={(val) => setValue1(val as number)} marks={[0, 25, 50, 75, 100]} />
+      </div>
+      <div style={{ width: "400px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>对象形式刻度（自定义文案）</div>
+        <Slider
+          value={value2}
+          onChange={(val) => setValue2(val as number)}
+          marks={{
+            0: "低",
+            25: "中低",
+            50: "中",
+            75: "中高",
+            100: "高"
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MarksExample;

package/slider/_example/range.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const RangeExample = () => {
+  const [value, setValue] = useState<number[]>([20, 70]);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider value={value} onChange={(val) => setValue(val as number[])} range />
+      <div style={{ marginTop: "16px", color: "#666" }}>
+        当前范围：{value[0]} - {value[1]}
+      </div>
+    </div>
+  );
+};
+
+export default RangeExample;

package/slider/_example/step.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const StepExample = () => {
+  const [value, setValue] = useState<number>(30);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider value={value} onChange={(val) => setValue(val as number)} step={10} label />
+      <div style={{ marginTop: "16px", color: "#666" }}>步长为 10，当前值：{value}</div>
+    </div>
+  );
+};
+
+export default StepExample;

package/slider/_example/vertical.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { Slider, SliderValue } from "@tendaui/react";
+
+const VerticalExample = () => {
+  const [value, setValue] = useState<SliderValue>(40);
+  const [rangeValue, setRangeValue] = useState<SliderValue>([20, 70]);
+
+  return (
+    <div style={{ display: "flex", gap: "80px", padding: "20px" }}>
+      <div style={{ height: "250px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>单滑块</div>
+        <Slider value={value} onChange={setValue} layout="vertical" />
+      </div>
+      <div style={{ height: "250px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>范围滑块</div>
+        <Slider value={rangeValue} onChange={setRangeValue} layout="vertical" range />
+      </div>
+      <div style={{ height: "250px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>带输入框</div>
+        <Slider value={value} onChange={setValue} layout="vertical" inputNumberProps={{ theme: "row" }} />
+      </div>
+    </div>
+  );
+};
+
+export default VerticalExample;

package/slider/_example/with-input-number.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const WithInputExample = () => {
+  const [value1, setValue1] = useState<number>(50);
+  const [value2, setValue2] = useState<number[]>([20, 80]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "40px" }}>
+      <div style={{ width: "500px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>单滑块 + 数字输入框</div>
+        <Slider value={value1} onChange={(val) => setValue1(val as number)} inputNumberProps={true} />
+      </div>
+      <div style={{ width: "500px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>范围滑块 + 数字输入框</div>
+        <Slider value={value2} onChange={(val) => setValue2(val as number[])} range inputNumberProps={true} />
+      </div>
+    </div>
+  );
+};
+
+export default WithInputExample;

package/slider/type.ts

@@ -2,7 +2,7 @@ import { InputNumberProps } from "../input-number";
 import { TNode } from "../common";
 import React from "react";
 
-export interface TooltipProps {
+interface TooltipProps {
   content?: string | React.ReactNode;
   [key: string]: any;
 }

package/styles/_vars.scss

@@ -356,3 +356,19 @@ $z-index-Tooltip: 5600;
 $z-index-Notification: 6000;
 $z-index-dragging: 6500;
 $z-index-guide: 999999;
+
+// Tooltip 相关变量
+$tooltip-padding: 8px 12px;
+$tooltip-font-size: $font-size-s;
+$tooltip-line-height: $text-line-height-s;
+$tooltip-text-color: $text-color-anti;
+$tooltip-bg-color: $gray-color-9;
+$tooltip-border-radius: $border-radius-small;
+$tooltip-shadow: $shadow-2;
+
+// Tooltip 主题变量
+$tooltip-bg-color-dark: $gray-color-9;
+$tooltip-text-color-dark: $text-color-anti;
+$tooltip-bg-color-light: $bg-color-container;
+$tooltip-text-color-light: $text-color-primary;
+$tooltip-shadow-light: $shadow-2;

package/styles/components/button/_index.scss

@@ -69,16 +69,16 @@
   }
 
   .t-icon + .#{$prefix}-button__text:not(:empty) {
-    margin-left: $btn-icon-text-margin-left;
+    margin-inline-start: $btn-icon-text-margin-left;
   }
 
   .#{$prefix}-loading + .#{$prefix}-button__text:not(:empty) {
-    margin-left: $btn-icon-text-margin-left;
+    margin-inline-start: $btn-icon-text-margin-left;
   }
 
   .#{$prefix}-button__suffix:not(:empty) {
     display: inline-flex;
-    margin-left: $btn-icon-text-margin-left;
+    margin-inline-start: $btn-icon-text-margin-left;
   }
 
   // 主要按钮