feat(TabBar): TabBar组件对齐 mobile-vue

packages/products/tdesign-miniprogram/src/tab-bar-item/props.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTabBarItemProps } from './type';
+const props: TdTabBarItemProps = {
+  /** 图标右上角提示信息 */
+  badgeProps: {
+    type: Object,
+  },
+  /** 图标名称。传入对象时透传至 Icon 组件 */
+  icon: {
+    type: null,
+  },
+  /** 二级菜单 */
+  subTabBar: {
+    type: Array,
+  },
+  /** 标识符 */
+  value: {
+    type: null,
+  },
+};
+
+export default props;

packages/products/tdesign-miniprogram/src/tab-bar-item/type.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { BadgeProps } from '../badge/index';
+
+export interface TdTabBarItemProps {
+  /**
+   * 图标右上角提示信息
+   */
+  badgeProps?: {
+    type: ObjectConstructor;
+    value?: BadgeProps;
+  };
+  /**
+   * 图标名称。传入对象时透传至 Icon 组件
+   */
+  icon?: {
+    type: null;
+    value?: string | object;
+  };
+  /**
+   * 二级菜单
+   */
+  subTabBar?: {
+    type: ArrayConstructor;
+    value?: SubTabBarItem[];
+  };
+  /**
+   * 标识符
+   */
+  value?: {
+    type: null;
+    value?: string | number;
+  };
+}
+
+export interface SubTabBarItem {
+  value: string;
+  label: string;
+}

packages/products/tdesign-miniprogram/src/tab-bar/README.en-US.md

@@ -14,7 +14,7 @@ safe-area-inset-bottom | Boolean | true | \- | N
 shape | String | normal | options: normal/round | N
 split | Boolean | true | \- | N
 theme | String | normal | options: normal/tag | N
-value | String / Number / Array | null | Typescript：`string \| number \| Array<string \| number>` | N
+value | String / Number / Array | - | Typescript：`string \| number \| Array<string \| number>` | N
 default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`string \| number \| Array<string \| number>` | N
 
 ### TabBar Events

packages/products/tdesign-miniprogram/src/tab-bar/README.md

@@ -14,7 +14,7 @@ safe-area-inset-bottom | Boolean | true | 是否为 iPhoneX 留出底部安全
 shape | String | normal | 标签栏的形状。可选项：normal/round | N
 split | Boolean | true | 是否需要分割线 | N
 theme | String | normal | 选项风格。可选项：normal/tag | N
-value | String / Number / Array | null | 当前选中标签的索引。TS 类型：`string \| number \| Array<string \| number>` | N
+value | String / Number / Array | - | 当前选中标签的索引。TS 类型：`string \| number \| Array<string \| number>` | N
 default-value | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array<string \| number>` | N
 
 ### TabBar Events

packages/products/tdesign-miniprogram/src/tab-bar/props.ts

@@ -25,15 +25,20 @@ const props: TdTabBarProps = {
     type: Boolean,
     value: true,
   },
+  /** 标签栏的形状 */
+  shape: {
+    type: String,
+    value: 'normal',
+  },
   /** 是否需要分割线 */
   split: {
     type: Boolean,
     value: true,
   },
-  /** 自定义组件样式 */
-  style: {
+  /** 选项风格 */
+  theme: {
     type: String,
-    value: '',
+    value: 'normal',
   },
   /** 当前选中标签的索引 */
   value: {
@@ -43,7 +48,6 @@ const props: TdTabBarProps = {
   /** 当前选中标签的索引，非受控属性 */
   defaultValue: {
     type: null,
-    value: null,
   },
 };
 

packages/products/tdesign-miniprogram/src/tab-bar/type.ts

@@ -4,8 +4,6 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { BadgeProps } from '../badge/index';
-
 export interface TdTabBarProps {
   /**
    * 是否显示外边框
@@ -38,6 +36,14 @@ export interface TdTabBarProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 标签栏的形状
+   * @default normal
+   */
+  shape?: {
+    type: StringConstructor;
+    value?: 'normal' | 'round';
+  };
   /**
    * 是否需要分割线
    * @default true
@@ -47,71 +53,25 @@ export interface TdTabBarProps {
     value?: boolean;
   };
   /**
-   * 自定义组件样式
-   * @default ''
+   * 选项风格
+   * @default normal
    */
-  style?: {
+  theme?: {
     type: StringConstructor;
-    value?: string;
+    value?: 'normal' | 'tag';
   };
   /**
    * 当前选中标签的索引
-   * @default null
    */
   value?: {
     type: null;
     value?: string | number | Array<string | number>;
   };
   /**
    * 当前选中标签的索引，非受控属性
-   * @default null
    */
   defaultValue?: {
     type: null;
     value?: string | number | Array<string | number>;
   };
 }
-
-export interface TdTabBarItemProps {
-  /**
-   * 图标右上角提示信息
-   */
-  badgeProps?: {
-    type: ObjectConstructor;
-    value?: BadgeProps;
-  };
-  /**
-   * 图标名称
-   */
-  icon?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 二级菜单
-   */
-  subTabBar?: {
-    type: ArrayConstructor;
-    value?: SubTabBarItem[];
-  };
-  /**
-   * 标识符
-   */
-  value?: {
-    type: null;
-    value?: string | number;
-  };
-}
-
-export interface SubTabBarItem {
-  value: string;
-  label: string;
-}

packages/products/tdesign-mobile-react/src/tab-bar/defaultProps.ts

@@ -0,0 +1,14 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTabBarProps } from './type';
+
+export const tabBarDefaultProps: TdTabBarProps = {
+  bordered: true,
+  fixed: true,
+  safeAreaInsetBottom: true,
+  shape: 'normal',
+  split: true,
+  theme: 'normal',
+};

packages/products/tdesign-mobile-react/src/tab-bar/tab-bar.en-US.md

@@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+
+### TabBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+bordered | Boolean | true | \- | N
+children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+fixed | Boolean | true | \- | N
+safeAreaInsetBottom | Boolean | true | \- | N
+shape | String | normal | options: normal/round | N
+split | Boolean | true | \- | N
+theme | String | normal | options: normal/tag | N
+value | String / Number / Array | - | Typescript：`string \| number \| Array<string \| number>` | N
+defaultValue | String / Number / Array | - | uncontrolled property。Typescript：`string \| number \| Array<string \| number>` | N
+onChange | Function |  | Typescript：`(value: string \| number) => void`<br/> | N
+
+
+### TabBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N
+children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+subTabBar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N
+value | String / Number | - | \- | N

packages/products/tdesign-mobile-react/src/tab-bar/tab-bar.md

@@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+
+### TabBar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+bordered | Boolean | true | 是否显示外边框 | N
+children | TNode | - | 标签栏内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+fixed | Boolean | true | 是否固定在底部 | N
+safeAreaInsetBottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N
+shape | String | normal | 标签栏的形状。可选项：normal/round | N
+split | Boolean | true | 是否需要分割线 | N
+theme | String | normal | 选项风格。可选项：normal/tag | N
+value | String / Number / Array | - | 当前选中标签的索引。TS 类型：`string \| number \| Array<string \| number>` | N
+defaultValue | String / Number / Array | - | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array<string \| number>` | N
+onChange | Function |  | TS 类型：`(value: string \| number) => void`<br/>选中标签切换时触发 | N
+
+
+### TabBarItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+badgeProps | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N
+children | TNode | - | 标签内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TElement | - | 图标名称。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N
+value | String / Number | - | 标识符 | N

packages/products/tdesign-mobile-react/src/tab-bar/type.ts

@@ -0,0 +1,85 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { BadgeProps } from '../badge';
+import { TNode, TElement } from '../common';
+
+export interface TdTabBarProps {
+  /**
+   * 是否显示外边框
+   * @default true
+   */
+  bordered?: boolean;
+  /**
+   * 标签栏内容
+   */
+  children?: TNode;
+  /**
+   * 是否固定在底部
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 是否为 iPhoneX 留出底部安全距离
+   * @default true
+   */
+  safeAreaInsetBottom?: boolean;
+  /**
+   * 标签栏的形状
+   * @default normal
+   */
+  shape?: 'normal' | 'round';
+  /**
+   * 是否需要分割线
+   * @default true
+   */
+  split?: boolean;
+  /**
+   * 选项风格
+   * @default normal
+   */
+  theme?: 'normal' | 'tag';
+  /**
+   * 当前选中标签的索引
+   */
+  value?: string | number | Array<string | number>;
+  /**
+   * 当前选中标签的索引，非受控属性
+   */
+  defaultValue?: string | number | Array<string | number>;
+  /**
+   * 选中标签切换时触发
+   */
+  onChange?: (value: string | number) => void;
+}
+
+export interface TdTabBarItemProps {
+  /**
+   * 图标右上角提示信息
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 标签内容
+   */
+  children?: TNode;
+  /**
+   * 图标名称
+   */
+  icon?: TElement;
+  /**
+   * 二级菜单
+   */
+  subTabBar?: SubTabBarItem[];
+  /**
+   * 标识符
+   */
+  value?: string | number;
+}
+
+export interface SubTabBarItem {
+  value: string;
+  label: string;
+}

packages/products/tdesign-mobile-vue/src/tab-bar/props.ts

@@ -58,7 +58,6 @@ export default {
   /** 当前选中标签的索引，非受控属性 */
   defaultValue: {
     type: [String, Number, Array] as PropType<TdTabBarProps['defaultValue']>,
-    default: undefined,
   },
   /** 选中标签切换时触发 */
   onChange: Function as PropType<TdTabBarProps['onChange']>,