feat(Rate): placement attribute optionally adds empty string (#2980)

src/rate/README.en-US.md

@@ -1,34 +1,43 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Rate Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 allow-half | Boolean | false | \- | N
 color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N
 count | Number | 5 | \- | N
-disabled | Boolean | - | \- | N
-external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
+disabled | Boolean | undefined | \- | N
 gap | String / Number | 8 | \- | N
-icon | String / Array | - | Typescript：`string \| string[]` | N
+icon | String / Array | - | `0.30.0`。Typescript：`string \| string[]` | N
+icon-prefix | String | undefined | \- | N
+placement | String | top | options: top / bottom / '' | N
 show-text | Boolean | false | \- | N
 size | String | 24px | \- | N
 texts | Array | [] | Typescript：`Array<string>` | N
 value | Number | 0 | \- | N
 default-value | Number | undefined | uncontrolled property | N
-placement | String | top | options：top / bottom | N
-iconPrefix | String  | undefined | icon prefix | N        
-variant | String | outline | options：outline/filled | N
+variant | String | outline | options: outline/filled | N
 
 ### Rate Events
 
 name | params | description
 -- | -- | --
 change | `(value: number)` | \-
+### Rate External Classes
 
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
 
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -38,4 +47,4 @@ Name | Default Value | Description
 --td-rate-text-active-font-weight | 600 | - 
 --td-rate-text-color | @font-gray-4 | - 
 --td-rate-text-font-size | @font-size-m | - 
---td-rate-unselected-color | @bg-color-secondarycomponent | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | -

src/rate/README.md

@@ -70,39 +70,43 @@ isComponent: true
 
 
 ## API
+
 ### Rate Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 allow-half | Boolean | false | 是否允许半选 | N
 color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
 count | Number | 5 | 评分的数量 | N
-disabled | Boolean | - | 是否禁用评分 | N
-gap | Number | 8 | 评分图标的间距 | N
+disabled | Boolean | undefined | 是否禁用评分 | N
+gap | String / Number | 8 | 评分图标的间距 | N
 icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
+icon-prefix | String | undefined | 定义图标前缀 | N
+placement | String | top | 选择评分弹框的位置，值为空字符表示不显示评分弹窗。可选项：top / bottom / '' | N
 show-text | Boolean | false | 是否显示对应的辅助文字 | N
 size | String | 24px | 评分图标的大小 | N
 texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
 value | Number | 0 | 选择评分的值 | N
 default-value | Number | undefined | 选择评分的值。非受控属性 | N
-placement | String | top | 选择评分弹框的位置。可选项：top / bottom | N
-iconPrefix | String | undefined | 定义图标前缀 
-variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+variant | String | outline | 已废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
 
 ### Rate Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: number)` | 评分数改变时触发
+### Rate External Classes
 
-### Rate 外部样式类
-类名 | 说明
--- | -- 
+类名 | 描述
+-- | --
 t-class | 根节点样式类
-t-class-icon` | 图标样式类
+t-class-icon | 图标样式类
 t-class-text | 文本样式类
 
-### CSS 变量
+### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -112,4 +116,4 @@ t-class-text | 文本样式类
 --td-rate-text-active-font-weight | 600 | - 
 --td-rate-text-color | @font-gray-4 | - 
 --td-rate-text-font-size | @font-size-m | - 
---td-rate-unselected-color | @bg-color-secondarycomponent | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | -

src/rate/props.ts

@@ -23,25 +23,27 @@ const props: TdRateProps = {
   },
   /** 是否禁用评分 */
   disabled: {
-    type: Boolean,
-  },
-  /** 组件类名，分别用于设置 组件外层类名、评分图标类名、辅助文字类名。 */
-  externalClasses: {
-    type: Array,
+    type: null,
+    value: undefined,
   },
   /** 评分图标的间距 */
   gap: {
     type: null,
     value: 8,
   },
-  /** 自定义图标前缀 */
+  /** 自定义评分图标，[选中图标，未选中图标] */
+  icon: {
+    type: null,
+  },
+  /** 定义图标前缀 */
   iconPrefix: {
     type: String,
     value: undefined,
   },
-  /** 自定义评分图标，[选中图标，未选中图标] */
-  icon: {
-    type: null,
+  /** 选择评分弹框的位置，值为空字符表示不显示评分弹窗 */
+  placement: {
+    type: String,
+    value: 'top',
   },
   /** 是否显示对应的辅助文字 */
   showText: {
@@ -68,13 +70,10 @@ const props: TdRateProps = {
     type: Number,
     value: 0,
   },
-  /**
-   * 选择评分弹框的位置
-   * @default top
-   */
-  placement: {
+  /** 已废弃。形状类型，有描边类型和填充类型两种 */
+  variant: {
     type: String,
-    value: 'top',
+    value: 'outline',
   },
 };
 

src/rate/rate.wxml

@@ -41,7 +41,7 @@
     >{{value+'星'}} {{utils.getText(texts,value,defaultTexts)}}</text
   >
   <view
-    wx:if="{{tipsVisible}}"
+    wx:if="{{tipsVisible && placement}}"
     class="{{_.cls(classPrefix + '__tips', [placement])}}"
     style="left: {{tipsLeft}}px"
     aria-hidden="{{true}}"
@@ -85,7 +85,7 @@
         class="{{_.cls(classPrefix + '__icon', [['selected', utils.ceil(value) == value], ['selected-half', utils.ceil(value) != value]]) }}"
         name="{{utils.getIconName(defaultValue, 0, 0, icon)}}"
         size="{{ size }}"
-        style="{{utils.getColor(color)}}; font-size: {{size}};"
+        style="{{utils.getColor(color)}}"
       />
       <view class="{{classPrefix}}__tips-text">{{value}}</view>
     </view>

src/rate/type.ts

@@ -29,14 +29,6 @@ export interface TdRateProps {
     type: NumberConstructor;
     value?: number;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 是否禁用评分
    */
@@ -45,34 +37,34 @@ export interface TdRateProps {
     value?: boolean;
   };
   /**
-   * 组件类名，分别用于设置 组件外层类名、评分图标类名、辅助文字类名。
-   */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class', 't-class-icon', 't-class-text'];
-  };
-  /**
-   * 评分图标的间距，默认单位为 `px`, 示例：`8`
+   * 评分图标的间距
    * @default 8
    */
   gap?: {
     type: null;
     value?: string | number;
   };
   /**
-   * 自定义图标前缀
+   * 自定义评分图标，[选中图标，未选中图标]
+   */
+  icon?: {
+    type: null;
+    value?: string | string[];
+  };
+  /**
+   * 定义图标前缀
    */
   iconPrefix?: {
     type: StringConstructor;
     value?: string;
-    reuqired?: boolean;
   };
   /**
-   * 自定义评分图标，[选中图标，未选中图标]
+   * 选择评分弹框的位置，值为空字符表示不显示评分弹窗
+   * @default top
    */
-  icon?: {
-    type: null;
-    value?: string | string[];
+  placement?: {
+    type: StringConstructor;
+    value?: 'top' | 'bottom' | '';
   };
   /**
    * 是否显示对应的辅助文字
@@ -115,11 +107,11 @@ export interface TdRateProps {
     value?: number;
   };
   /**
-   * 选择评分弹框的位置
-   * @default top
+   * 已废弃。形状类型，有描边类型和填充类型两种
+   * @default outline
    */
-  placement?: {
+  variant?: {
     type: StringConstructor;
-    value?: 'top' | 'bottom';
+    value?: 'outline' | 'filled';
   };
 }