From ed1e5b588b25f309db9acf7a184f8a15676ba0e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Tue, 16 Jul 2024 12:06:11 +0800
Subject: [PATCH] feat(Rate): support placement

---
 src/rate/__test__/index.test.jsx | 38 ++++++++++++++++++++++++++++++++
 src/rate/props.ts                | 11 ++++++++-
 src/rate/rate.en-US.md           |  3 ++-
 src/rate/rate.md                 |  3 ++-
 src/rate/rate.tsx                | 11 +++++++--
 src/rate/type.ts                 |  7 +++++-
 6 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/src/rate/__test__/index.test.jsx b/src/rate/__test__/index.test.jsx
index 3a1de9e0e..7303fb3a0 100644
--- a/src/rate/__test__/index.test.jsx
+++ b/src/rate/__test__/index.test.jsx
@@ -134,4 +134,42 @@ describe('Rate', () => {
     await move($target);
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  it(': placement',async () => {
+    const wrapper = mount(() => <Rate />);
+    const icons = wrapper.findAll(`.${name}__icon`);
+    await icons[0].trigger('click');
+    const tips = wrapper.find(`.${name}__tips`);
+    expect(tips.exists()).toBeTruthy();
+    const placement = wrapper.find(`.${name}__tips--top`);
+    expect(placement.exists()).toBeTruthy();
+  });
+
+  it(': placement=top',async () => {
+    const wrapper = mount(() => <Rate placement="top" />);
+    const icons = wrapper.findAll(`.${name}__icon`);
+    await icons[0].trigger('click');
+    const tips = wrapper.find(`.${name}__tips`);
+    expect(tips.exists()).toBeTruthy();
+    const placement = wrapper.find(`.${name}__tips--top`);
+    expect(placement.exists()).toBeTruthy();
+  });
+
+  it(': placement=bottom',async () => {
+    const wrapper = mount(() => <Rate placement="bottom" />);
+    const icons = wrapper.findAll(`.${name}__icon`);
+    await icons[0].trigger('click');
+    const tips = wrapper.find(`.${name}__tips`);
+    expect(tips.exists()).toBeTruthy();
+    const placement = wrapper.find(`.${name}__tips--bottom`);
+    expect(placement.exists()).toBeTruthy();
+  });
+
+  it(': placement=""',async () => {
+    const wrapper = mount(() => <Rate placement="" />);
+    const icons = wrapper.findAll(`.${name}__icon`);
+    await icons[0].trigger('click');
+    const tips = wrapper.find(`.${name}__tips`);
+    expect(tips.exists()).toBeFalsy();
+  });
 });
diff --git a/src/rate/props.ts b/src/rate/props.ts
index a280bbdbe..6e3a94a6c 100644
--- a/src/rate/props.ts
+++ b/src/rate/props.ts
@@ -27,13 +27,22 @@ export default {
   },
   /** 评分图标的间距 */
   gap: {
-    type: Number,
+    type: [String, Number] as PropType<TdRateProps['gap']>,
     default: 8,
   },
   /** 自定义评分图标，[选中图标，未选中图标] */
   icon: {
     type: [Array, Function] as PropType<TdRateProps['icon']>,
   },
+  /** 选择评分弹框的位置，值为空字符表示不显示评分弹窗 */
+  placement: {
+    type: String as PropType<TdRateProps['placement']>,
+    default: 'top' as TdRateProps['placement'],
+    validator(val: TdRateProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'bottom', ''].includes(val);
+    },
+  },
   /** 是否显示对应的辅助文字 */
   showText: Boolean,
   /** 评分图标的大小 */
diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md
index d83338446..ac688b44c 100644
--- a/src/rate/rate.en-US.md
+++ b/src/rate/rate.en-US.md
@@ -10,8 +10,9 @@ allowHalf | Boolean | false | \- | N
 color | String / Array | '#ED7B2F' | Typescript：`string \| Array<string>` | N
 count | Number | 5 | \- | N
 disabled | Boolean | undefined | \- | N
-gap | Number | 8 | \- | N
+gap | String / Number | 8 | \- | N
 icon | Array / Slot / Function | - | Typescript：`Array<TNode \| Function>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+placement | String | top | options: top / bottom / '' | N
 showText | Boolean | false | \- | N
 size | String | 24px | \- | N
 texts | Array | [] | Typescript：`Array<string>` | N
diff --git a/src/rate/rate.md b/src/rate/rate.md
index 7c197545f..06e39c989 100644
--- a/src/rate/rate.md
+++ b/src/rate/rate.md
@@ -10,8 +10,9 @@ allowHalf | Boolean | false | 是否允许半选 | N
 color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
 count | Number | 5 | 评分的数量 | N
 disabled | Boolean | undefined | 是否禁用评分 | N
-gap | Number | 8 | 评分图标的间距 | N
+gap | String / Number | 8 | 评分图标的间距 | N
 icon | Array / Slot / Function | - | 自定义评分图标，[选中图标，未选中图标]。TS 类型：`Array<TNode \| Function>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+placement | String | top | 选择评分弹框的位置，值为空字符表示不显示评分弹窗。可选项：top / bottom / '' | N
 showText | Boolean | false | 是否显示对应的辅助文字 | N
 size | String | 24px | 评分图标的大小 | N
 texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
diff --git a/src/rate/rate.tsx b/src/rate/rate.tsx
index 5a0e1ea87..7a30ed067 100644
--- a/src/rate/rate.tsx
+++ b/src/rate/rate.tsx
@@ -250,9 +250,16 @@ export default defineComponent({
       };
 
       const renderRateTips = () => {
-        if (!tipsVisible.value) return null;
+        if (!tipsVisible.value || props.placement === '') return null;
         return (
-          <div ref={ratePopoverRef} class={`${rateClass.value}__tips`} style={{ left: `${tipsLeft.value}px` }}>
+          <div
+            ref={ratePopoverRef}
+            class={{
+              [`${rateClass.value}__tips`]: true,
+              [`${rateClass.value}__tips--${props.placement}`]: props.placement,
+            }}
+            style={{ left: `${tipsLeft.value}px` }}
+          >
             {actionType.value === 'tap' ? (
               <div style="display: flex">
                 {props.allowHalf && (
diff --git a/src/rate/type.ts b/src/rate/type.ts
index 2516b819c..1acf97f48 100644
--- a/src/rate/type.ts
+++ b/src/rate/type.ts
@@ -30,11 +30,16 @@ export interface TdRateProps {
    * 评分图标的间距
    * @default 8
    */
-  gap?: number;
+  gap?: string | number;
   /**
    * 自定义评分图标，[选中图标，未选中图标]
    */
   icon?: Array<TNode | Function>;
+  /**
+   * 选择评分弹框的位置，值为空字符表示不显示评分弹窗
+   * @default top
+   */
+  placement?: 'top' | 'bottom' | '';
   /**
    * 是否显示对应的辅助文字
    * @default false