feat: breadcrumb item support click event (#238)

TDesignOteam · Mar 12, 2024 · 81d2b1f · 81d2b1f
1 parent 23e581b
commit 81d2b1f
Show file tree

Hide file tree

Showing 16 changed files with 333 additions and 8 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/breadcrumb/breadcrumb.en-US.md b/packages/products/tdesign-react/src/breadcrumb/breadcrumb.en-US.md
@@ -6,18 +6,19 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 maxItemWidth | String | undefined | \- | N
 options | Array | - | Typescript：`Array<TdBreadcrumbItemProps>` | N
 separator | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 
+
 ### BreadcrumbItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
@@ -26,5 +27,6 @@ icon | TElement | - | prefix icon in breadcrumb item。Typescript：`TNode`。[s
 maxWidth | String | undefined | \- | N
 replace | Boolean | false | \- | N
 router | Object | - | Typescript：`any` | N
-target | String | _self | options：_blank/_self/_parent/_top | N
+target | String | _self | options: _blank/_self/_parent/_top | N
 to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
diff --git a/packages/products/tdesign-react/src/breadcrumb/breadcrumb.md b/packages/products/tdesign-react/src/breadcrumb/breadcrumb.md
@@ -4,17 +4,18 @@
 
 ### Breadcrumb Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 maxItemWidth | String | undefined | 单项最大宽度，超出后会以省略号形式呈现 | N
 options | Array | - | 面包屑项，功能同 BreadcrumbItem。TS 类型：`Array<TdBreadcrumbItemProps>` | N
 separator | TNode | - | 自定义分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 
+
 ### BreadcrumbItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -28,3 +29,4 @@ replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后
 router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。TS 类型：`any` | N
 target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N
 to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
diff --git a/packages/products/tdesign-react/src/breadcrumb/defaultProps.ts b/packages/products/tdesign-react/src/breadcrumb/defaultProps.ts
@@ -2,7 +2,9 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdBreadcrumbItemProps } from './type';
+import { TdBreadcrumbProps, TdBreadcrumbItemProps } from './type';
+
+export const breadcrumbDefaultProps: TdBreadcrumbProps = { maxItemWidth: undefined };
 
 export const breadcrumbItemDefaultProps: TdBreadcrumbItemProps = {
   maxWidth: undefined,

diff --git a/packages/products/tdesign-react/src/breadcrumb/type.ts b/packages/products/tdesign-react/src/breadcrumb/type.ts
@@ -5,6 +5,22 @@
  * */
 
 import { TNode, TElement } from '../common';
+import { MouseEvent } from 'react';
+
+export interface TdBreadcrumbProps {
+  /**
+   * 单项最大宽度，超出后会以省略号形式呈现
+   */
+  maxItemWidth?: string;
+  /**
+   * 面包屑项，功能同 BreadcrumbItem
+   */
+  options?: Array<TdBreadcrumbItemProps>;
+  /**
+   * 自定义分隔符
+   */
+  separator?: TNode;
+}
 
 export interface TdBreadcrumbItemProps {
   /**
@@ -50,6 +66,10 @@ export interface TdBreadcrumbItemProps {
    * 路由跳转目标，当且仅当 Router 存在时，该 API 有效
    */
   to?: string | Route;
+  /**
+   * 点击时触发
+   */
+  onClick?: (e: MouseEvent<HTMLElement>) => void;
 }
 
 export interface Route {

diff --git a/packages/products/tdesign-vue-next/src/breadcrumb/breadcrumb-item-props.ts b/packages/products/tdesign-vue-next/src/breadcrumb/breadcrumb-item-props.ts
@@ -51,4 +51,6 @@ export default {
   to: {
     type: [String, Object] as PropType<TdBreadcrumbItemProps['to']>,
   },
+  /** 点击时触发 */
+  onClick: Function as PropType<TdBreadcrumbItemProps['onClick']>,
 };
diff --git a/packages/products/tdesign-vue-next/src/breadcrumb/breadcrumb.en-US.md b/packages/products/tdesign-vue-next/src/breadcrumb/breadcrumb.en-US.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Breadcrumb Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+maxItemWidth | String | undefined | \- | N
+options | Array | - | Typescript：`Array<TdBreadcrumbItemProps>` | N
+separator | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | light | options: light | N
+
+
+### BreadcrumbItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+disabled | Boolean | - | \- | N
+href | String | - | \- | N
+icon | Slot / Function | - | prefix icon in breadcrumb item。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+maxWidth | String | undefined | \- | N
+replace | Boolean | false | \- | N
+router | Object | - | Typescript：`any` | N
+target | String | _self | options: _blank/_self/_parent/_top | N
+to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/breadcrumb/type.ts) | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
+
+### BreadcrumbItem Events
+
+name | params | description
+-- | -- | --
+click | `(e: MouseEvent)` | trigger on click
diff --git a/packages/products/tdesign-vue-next/src/breadcrumb/breadcrumb.md b/packages/products/tdesign-vue-next/src/breadcrumb/breadcrumb.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Breadcrumb Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+maxItemWidth | String | undefined | 单项最大宽度，超出后会以省略号形式呈现 | N
+options | Array | - | 面包屑项，功能同 BreadcrumbItem。TS 类型：`Array<TdBreadcrumbItemProps>` | N
+separator | String / Slot / Function | - | 自定义分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | light | 组件风格。可选项：light | N
+
+
+### BreadcrumbItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+disabled | Boolean | - | 是否禁用当前项点击 | N
+href | String | - | 跳转链接 | N
+icon | Slot / Function | - | 面板屑项内的前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+maxWidth | String | undefined | 最大宽度，超出后会以省略号形式呈现。优先级高于 Breadcrumb 中的 maxItemWidth | N
+replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录） | N
+router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。TS 类型：`any` | N
+target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N
+to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/breadcrumb/type.ts) | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
+
+### BreadcrumbItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(e: MouseEvent)` | 点击时触发
diff --git a/packages/products/tdesign-vue-next/src/breadcrumb/props.ts b/packages/products/tdesign-vue-next/src/breadcrumb/props.ts
@@ -0,0 +1,33 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdBreadcrumbProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 单项最大宽度，超出后会以省略号形式呈现 */
+  maxItemWidth: {
+    type: String,
+    default: undefined,
+  },
+  /** 面包屑项，功能同 BreadcrumbItem */
+  options: {
+    type: Array as PropType<TdBreadcrumbProps['options']>,
+  },
+  /** 自定义分隔符 */
+  separator: {
+    type: [String, Function] as PropType<TdBreadcrumbProps['separator']>,
+  },
+  /** 组件风格 */
+  theme: {
+    type: String as PropType<TdBreadcrumbProps['theme']>,
+    default: 'light' as TdBreadcrumbProps['theme'],
+    validator(val: TdBreadcrumbProps['theme']): boolean {
+      if (!val) return true;
+      return ['light'].includes(val);
+    },
+  },
+};
diff --git a/packages/products/tdesign-vue-next/src/breadcrumb/type.ts b/packages/products/tdesign-vue-next/src/breadcrumb/type.ts
@@ -6,6 +6,26 @@
 
 import { TNode } from '../common';
 
+export interface TdBreadcrumbProps {
+  /**
+   * 单项最大宽度，超出后会以省略号形式呈现
+   */
+  maxItemWidth?: string;
+  /**
+   * 面包屑项，功能同 BreadcrumbItem
+   */
+  options?: Array<TdBreadcrumbItemProps>;
+  /**
+   * 自定义分隔符
+   */
+  separator?: string | TNode;
+  /**
+   * 组件风格
+   * @default light
+   */
+  theme?: 'light';
+}
+
 export interface TdBreadcrumbItemProps {
   /**
    * 子元素
@@ -50,6 +70,10 @@ export interface TdBreadcrumbItemProps {
    * 路由跳转目标，当且仅当 Router 存在时，该 API 有效
    */
   to?: string | Route;
+  /**
+   * 点击时触发
+   */
+  onClick?: (e: MouseEvent) => void;
 }
 
 export interface Route {

diff --git a/packages/products/tdesign-vue/src/breadcrumb/breadcrumb-item-props.ts b/packages/products/tdesign-vue/src/breadcrumb/breadcrumb-item-props.ts
@@ -51,4 +51,6 @@ export default {
   to: {
     type: [String, Object] as PropType<TdBreadcrumbItemProps['to']>,
   },
+  /** 点击时触发 */
+  onClick: Function as PropType<TdBreadcrumbItemProps['onClick']>,
 };
diff --git a/packages/products/tdesign-vue/src/breadcrumb/breadcrumb.en-US.md b/packages/products/tdesign-vue/src/breadcrumb/breadcrumb.en-US.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Breadcrumb Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+maxItemWidth | String | undefined | \- | N
+options | Array | - | Typescript：`Array<TdBreadcrumbItemProps>` | N
+separator | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+theme | String | light | options: light | N
+
+
+### BreadcrumbItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+disabled | Boolean | - | \- | N
+href | String | - | \- | N
+icon | Slot / Function | - | prefix icon in breadcrumb item。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+maxWidth | String | undefined | \- | N
+replace | Boolean | false | \- | N
+router | Object | - | Typescript：`any` | N
+target | String | _self | options: _blank/_self/_parent/_top | N
+to | String / Object | - | Typescript：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
+
+### BreadcrumbItem Events
+
+name | params | description
+-- | -- | --
+click | `(e: MouseEvent)` | trigger on click
diff --git a/packages/products/tdesign-vue/src/breadcrumb/breadcrumb.md b/packages/products/tdesign-vue/src/breadcrumb/breadcrumb.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Breadcrumb Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+maxItemWidth | String | undefined | 单项最大宽度，超出后会以省略号形式呈现 | N
+options | Array | - | 面包屑项，功能同 BreadcrumbItem。TS 类型：`Array<TdBreadcrumbItemProps>` | N
+separator | String / Slot / Function | - | 自定义分隔符。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+theme | String | light | 组件风格。可选项：light | N
+
+
+### BreadcrumbItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+disabled | Boolean | - | 是否禁用当前项点击 | N
+href | String | - | 跳转链接 | N
+icon | Slot / Function | - | 面板屑项内的前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+maxWidth | String | undefined | 最大宽度，超出后会以省略号形式呈现。优先级高于 Breadcrumb 中的 maxItemWidth | N
+replace | Boolean | false | 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录） | N
+router | Object | - | 路由对象。如果项目存在 Router，则默认使用 Router。TS 类型：`any` | N
+target | String | _self | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N
+to | String / Object | - | 路由跳转目标，当且仅当 Router 存在时，该 API 有效。TS 类型：`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/breadcrumb/type.ts) | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
+
+### BreadcrumbItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(e: MouseEvent)` | 点击时触发
diff --git a/packages/products/tdesign-vue/src/breadcrumb/props.ts b/packages/products/tdesign-vue/src/breadcrumb/props.ts
@@ -0,0 +1,33 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdBreadcrumbProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 单项最大宽度，超出后会以省略号形式呈现 */
+  maxItemWidth: {
+    type: String,
+    default: undefined,
+  },
+  /** 面包屑项，功能同 BreadcrumbItem */
+  options: {
+    type: Array as PropType<TdBreadcrumbProps['options']>,
+  },
+  /** 自定义分隔符 */
+  separator: {
+    type: [String, Function] as PropType<TdBreadcrumbProps['separator']>,
+  },
+  /** 组件风格 */
+  theme: {
+    type: String as PropType<TdBreadcrumbProps['theme']>,
+    default: 'light' as TdBreadcrumbProps['theme'],
+    validator(val: TdBreadcrumbProps['theme']): boolean {
+      if (!val) return true;
+      return ['light'].includes(val);
+    },
+  },
+};