feat(DropdownMenuItem): add placement props (#484)

TDesignOteam · Dec 4, 2024 · 06ac27b · 06ac27b
1 parent e2aa4b9
commit 06ac27b
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 0 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-miniprogram/src/dropdown-item/props.ts b/packages/products/tdesign-miniprogram/src/dropdown-item/props.ts
@@ -39,6 +39,11 @@ const props: TdDropdownItemProps = {
     type: null,
     value: 1,
   },
+  /** 复选框和内容相对位置，仅单选菜单栏有效 */
+  placement: {
+    type: String,
+    value: 'left',
+  },
   /** 选中值 */
   value: {
     type: null,

diff --git a/packages/products/tdesign-miniprogram/src/dropdown-item/type.ts b/packages/products/tdesign-miniprogram/src/dropdown-item/type.ts
@@ -68,6 +68,14 @@ export interface TdDropdownItemProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 复选框和内容相对位置，仅单选菜单栏有效
+   * @default left
+   */
+  placement?: {
+    type: StringConstructor;
+    value?: 'left' | 'right';
+  };
   /**
    * 选中值
    */

diff --git a/packages/products/tdesign-miniprogram/src/dropdown-menu/README.en-US.md b/packages/products/tdesign-miniprogram/src/dropdown-menu/README.en-US.md
@@ -20,6 +20,7 @@ name | params | description
 -- | -- | --
 close | \- | \-
 open | \- | \-
+
 ### DropdownMenu External Classes
 
 className | Description
@@ -44,6 +45,7 @@ multiple | Boolean | false | \- | N
 options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 options-columns | String / Number | 1 | \- | N
 options-layout | String | columns | `deprecated` | N
+placement | String | left | options: left/right | N
 value | String / Number / Array | undefined | Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 
@@ -55,6 +57,7 @@ change | `(value: DropdownValue)` | \-
 close | \- | \-
 confirm | `(value: DropdownValue)` | \-
 reset | \- | \-
+
 ### DropdownItem External Classes
 
 className | Description

diff --git a/packages/products/tdesign-miniprogram/src/dropdown-menu/README.md b/packages/products/tdesign-miniprogram/src/dropdown-menu/README.md
@@ -20,6 +20,7 @@ z-index | Number | 11600 | 菜单栏 z-index 层级 | N
 -- | -- | --
 close | \- | 菜单关闭时触发
 open | \- | 菜单展开时触发
+
 ### DropdownMenu External Classes
 
 类名 | 描述
@@ -44,6 +45,7 @@ multiple | Boolean | false | 是否多选 | N
 options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 options-columns | String / Number | 1 | 选项分栏（1-3） | N
 options-layout | String | columns | 已废弃。选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 | N
+placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | N
 value | String / Number / Array | undefined | 选中值。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
 
@@ -55,6 +57,7 @@ change | `(value: DropdownValue)` | 值改变时触发
 close | \- | 关闭时触发
 confirm | `(value: DropdownValue)` | 点击确认时触发
 reset | \- | 点击重置时触发
+
 ### DropdownItem External Classes
 
 类名 | 描述

diff --git a/packages/products/tdesign-mobile-react/src/dropdown-menu/defaultProps.ts b/packages/products/tdesign-mobile-react/src/dropdown-menu/defaultProps.ts
@@ -17,5 +17,6 @@ export const dropdownItemDefaultProps: TdDropdownItemProps = {
   multiple: false,
   options: [],
   optionsColumns: 1,
+  placement: 'left',
   defaultValue: undefined,
 };
diff --git a/packages/products/tdesign-mobile-react/src/dropdown-menu/dropdown-menu.en-US.md b/packages/products/tdesign-mobile-react/src/dropdown-menu/dropdown-menu.en-US.md
@@ -28,6 +28,7 @@ label | String | - | \- | N
 multiple | Boolean | false | \- | N
 options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
 optionsColumns | String / Number | 1 | \- | N
+placement | String | left | options: left/right | N
 value | String / Number / Array | undefined | Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
 defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
 onChange | Function |  | Typescript：`(value: DropdownValue) => void`<br/> | N

diff --git a/packages/products/tdesign-mobile-react/src/dropdown-menu/dropdown-menu.md b/packages/products/tdesign-mobile-react/src/dropdown-menu/dropdown-menu.md
@@ -28,6 +28,7 @@ label | String | - | 标题 | N
 multiple | Boolean | false | 是否多选 | N
 options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
 optionsColumns | String / Number | 1 | 选项分栏（1-3） | N
+placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | N
 value | String / Number / Array | undefined | 选中值。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
 defaultValue | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
 onChange | Function |  | TS 类型：`(value: DropdownValue) => void`<br/>值改变时触发 | N

diff --git a/packages/products/tdesign-mobile-react/src/dropdown-menu/type.ts b/packages/products/tdesign-mobile-react/src/dropdown-menu/type.ts
@@ -68,6 +68,11 @@ export interface TdDropdownItemProps {
    * @default 1
    */
   optionsColumns?: string | number;
+  /**
+   * 复选框和内容相对位置，仅单选菜单栏有效
+   * @default left
+   */
+  placement?: 'left' | 'right';
   /**
    * 选中值
    */

diff --git a/packages/products/tdesign-mobile-vue/src/dropdown-menu/dropdown-item-props.ts b/packages/products/tdesign-mobile-vue/src/dropdown-menu/dropdown-item-props.ts
@@ -35,6 +35,15 @@ export default {
     type: [String, Number] as PropType<TdDropdownItemProps['optionsColumns']>,
     default: 1,
   },
+  /** 复选框和内容相对位置，仅单选菜单栏有效 */
+  placement: {
+    type: String as PropType<TdDropdownItemProps['placement']>,
+    default: 'left' as TdDropdownItemProps['placement'],
+    validator(val: TdDropdownItemProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
   /** 选中值 */
   value: {
     type: [String, Number, Array] as PropType<TdDropdownItemProps['value']>,

diff --git a/packages/products/tdesign-mobile-vue/src/dropdown-menu/dropdown-menu.en-US.md b/packages/products/tdesign-mobile-vue/src/dropdown-menu/dropdown-menu.en-US.md
@@ -24,6 +24,7 @@ label | String | - | \- | N
 multiple | Boolean | false | \- | N
 options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
 optionsColumns | String / Number | 1 | \- | N
+placement | String | left | options: left/right | N
 value | String / Number / Array | undefined | `v-model` and `v-model:value` is supported。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
 defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
 onChange | Function |  | Typescript：`(value: DropdownValue) => void`<br/> | N

diff --git a/packages/products/tdesign-mobile-vue/src/dropdown-menu/dropdown-menu.md b/packages/products/tdesign-mobile-vue/src/dropdown-menu/dropdown-menu.md
@@ -24,6 +24,7 @@ label | String | - | 标题 | N
 multiple | Boolean | false | 是否多选 | N
 options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
 optionsColumns | String / Number | 1 | 选项分栏（1-3） | N
+placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | N
 value | String / Number / Array | undefined | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
 defaultValue | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
 onChange | Function |  | TS 类型：`(value: DropdownValue) => void`<br/>值改变时触发 | N

diff --git a/packages/products/tdesign-mobile-vue/src/dropdown-menu/type.ts b/packages/products/tdesign-mobile-vue/src/dropdown-menu/type.ts
@@ -68,6 +68,11 @@ export interface TdDropdownItemProps {
    * @default 1
    */
   optionsColumns?: string | number;
+  /**
+   * 复选框和内容相对位置，仅单选菜单栏有效
+   * @default left
+   */
+  placement?: 'left' | 'right';
   /**
    * 选中值
    */

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -45477,6 +45477,49 @@
         "String"
       ]
     },
+    {
+      "id": 1733309141,
+      "platform_framework": [
+        "8",
+        "16",
+        "32",
+        "64"
+      ],
+      "component": "DropdownItem",
+      "field_category": 1,
+      "field_name": "placement",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "left",
+      "field_enum": "left/right",
+      "field_desc_zh": "复选框和内容相对位置，仅单选菜单栏有效",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-12-04 10:45:41",
+      "update_time": "2024-12-04 10:45:41",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
     {
       "id": 2912,
       "platform_framework": [