feat(imageviewer): add image props

TDesignOteam · Mar 27, 2024 · 15ae70f · 15ae70f
1 parent f632f27
commit 15ae70f
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 12 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/image-viewer/defaultProps.ts b/packages/products/tdesign-react/src/image-viewer/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdImageViewerProps } from './type';
 
 export const imageViewerDefaultProps: TdImageViewerProps = {
   closeBtn: true,
+  closeOnEscKeydown: true,
   draggable: undefined,
   images: [],
   defaultIndex: 0,

diff --git a/packages/products/tdesign-react/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-react/src/image-viewer/image-viewer.en-US.md
@@ -1,16 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer 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
 closeBtn | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
 imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
 images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | \- | N

diff --git a/packages/products/tdesign-react/src/image-viewer/image-viewer.md b/packages/products/tdesign-react/src/image-viewer/image-viewer.md
@@ -1,16 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
+imageProps | Object | - | 透传内部 Image 图片的全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
 imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标 | N

diff --git a/packages/products/tdesign-react/src/image-viewer/type.ts b/packages/products/tdesign-react/src/image-viewer/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { ImageProps } from '../image';
 import { TNode } from '../common';
 import { MouseEvent, KeyboardEvent } from 'react';
 
@@ -15,6 +16,7 @@ export interface TdImageViewerProps {
   closeBtn?: TNode;
   /**
    * 按下 ESC 时是否触发图片预览器关闭事件
+   * @default true
    */
   closeOnEscKeydown?: boolean;
   /**
@@ -26,7 +28,11 @@ export interface TdImageViewerProps {
    */
   draggable?: boolean;
   /**
-   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度
+   * 透传内部 Image 图片的全部属性
+   */
+  imageProps?: ImageProps;
+  /**
+   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例
    */
   imageScale?: ImageScale;
   /**
@@ -98,6 +104,20 @@ export interface ImageScale {
   max: number;
   min: number;
   step: number;
+  defaultScale?: number;
+}
+
+export interface ImageScale {
+  max: number;
+  min: number;
+  step: number;
+  defaultScale?: number;
+}
+
+export interface ImageInfo {
+  mainImage: string | File;
+  thumbnail?: string | File;
+  download?: boolean;
 }
 
 export interface ImageInfo {
@@ -110,3 +130,8 @@ export interface ImageViewerScale {
   minWidth: number;
   minHeight: number;
 }
+
+export interface ImageViewerScale {
+  minWidth: number;
+  minHeight: number;
+}
diff --git a/packages/products/tdesign-vue-next/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-vue-next/src/image-viewer/image-viewer.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer Props
 
 name | type | default | description | required
@@ -9,6 +10,7 @@ closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。
 closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | `v-model:index` is supported | N

diff --git a/packages/products/tdesign-vue-next/src/image-viewer/image-viewer.md b/packages/products/tdesign-vue-next/src/image-viewer/image-viewer.md
@@ -1,14 +1,16 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
+imageProps | Object | - | 透传内部 Image 图片的全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N

diff --git a/packages/products/tdesign-vue-next/src/image-viewer/props.ts b/packages/products/tdesign-vue-next/src/image-viewer/props.ts
@@ -14,15 +14,22 @@ export default {
     default: true as TdImageViewerProps['closeBtn'],
   },
   /** 按下 ESC 时是否触发图片预览器关闭事件 */
-  closeOnEscKeydown: Boolean,
+  closeOnEscKeydown: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否在点击遮罩层时，触发预览关闭 */
   closeOnOverlay: Boolean,
   /** 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 */
   draggable: {
     type: Boolean,
     default: undefined,
   },
-  /**  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度 */
+  /** 透传内部 Image 图片的全部属性 */
+  imageProps: {
+    type: Object as PropType<TdImageViewerProps['imageProps']>,
+  },
+  /**  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例 */
   imageScale: {
     type: Object as PropType<TdImageViewerProps['imageScale']>,
   },

diff --git a/packages/products/tdesign-vue-next/src/image-viewer/type.ts b/packages/products/tdesign-vue-next/src/image-viewer/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { ImageProps } from '../image';
 import { TNode } from '../common';
 
 export interface TdImageViewerProps {
@@ -14,6 +15,7 @@ export interface TdImageViewerProps {
   closeBtn?: boolean | TNode;
   /**
    * 按下 ESC 时是否触发图片预览器关闭事件
+   * @default true
    */
   closeOnEscKeydown?: boolean;
   /**
@@ -25,7 +27,11 @@ export interface TdImageViewerProps {
    */
   draggable?: boolean;
   /**
-   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度
+   * 透传内部 Image 图片的全部属性
+   */
+  imageProps?: ImageProps;
+  /**
+   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例
    */
   imageScale?: ImageScale;
   /**
@@ -102,6 +108,20 @@ export interface ImageScale {
   max: number;
   min: number;
   step: number;
+  defaultScale?: number;
+}
+
+export interface ImageScale {
+  max: number;
+  min: number;
+  step: number;
+  defaultScale?: number;
+}
+
+export interface ImageInfo {
+  mainImage: string | File;
+  thumbnail?: string | File;
+  download?: boolean;
 }
 
 export interface ImageInfo {
@@ -114,3 +134,8 @@ export interface ImageViewerScale {
   minWidth: number;
   minHeight: number;
 }
+
+export interface ImageViewerScale {
+  minWidth: number;
+  minHeight: number;
+}
diff --git a/packages/products/tdesign-vue/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-vue/src/image-viewer/image-viewer.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer Props
 
 name | type | default | description | required
@@ -9,6 +10,7 @@ closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。
 closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | `.sync` is supported | N

diff --git a/packages/products/tdesign-vue/src/image-viewer/image-viewer.md b/packages/products/tdesign-vue/src/image-viewer/image-viewer.md
@@ -1,14 +1,16 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
+imageProps | Object | - | 透传内部 Image 图片的全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `.sync` | N

diff --git a/packages/products/tdesign-vue/src/image-viewer/props.ts b/packages/products/tdesign-vue/src/image-viewer/props.ts
@@ -14,15 +14,22 @@ export default {
     default: true,
   },
   /** 按下 ESC 时是否触发图片预览器关闭事件 */
-  closeOnEscKeydown: Boolean,
+  closeOnEscKeydown: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否在点击遮罩层时，触发预览关闭 */
   closeOnOverlay: Boolean,
   /** 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 */
   draggable: {
     type: Boolean,
     default: undefined,
   },
-  /**  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度 */
+  /** 透传内部 Image 图片的全部属性 */
+  imageProps: {
+    type: Object as PropType<TdImageViewerProps['imageProps']>,
+  },
+  /**  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例 */
   imageScale: {
     type: Object as PropType<TdImageViewerProps['imageScale']>,
   },

diff --git a/packages/products/tdesign-vue/src/image-viewer/type.ts b/packages/products/tdesign-vue/src/image-viewer/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { ImageProps } from '../image';
 import { TNode } from '../common';
 
 export interface TdImageViewerProps {
@@ -14,6 +15,7 @@ export interface TdImageViewerProps {
   closeBtn?: boolean | TNode;
   /**
    * 按下 ESC 时是否触发图片预览器关闭事件
+   * @default true
    */
   closeOnEscKeydown?: boolean;
   /**
@@ -25,7 +27,11 @@ export interface TdImageViewerProps {
    */
   draggable?: boolean;
   /**
-   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度
+   * 透传内部 Image 图片的全部属性
+   */
+  imageProps?: ImageProps;
+  /**
+   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例
    */
   imageScale?: ImageScale;
   /**
@@ -97,6 +103,20 @@ export interface ImageScale {
   max: number;
   min: number;
   step: number;
+  defaultScale?: number;
+}
+
+export interface ImageScale {
+  max: number;
+  min: number;
+  step: number;
+  defaultScale?: number;
+}
+
+export interface ImageInfo {
+  mainImage: string | File;
+  thumbnail?: string | File;
+  download?: boolean;
 }
 
 export interface ImageInfo {
@@ -109,3 +129,8 @@ export interface ImageViewerScale {
   minWidth: number;
   minHeight: number;
 }
+
+export interface ImageViewerScale {
+  minWidth: number;
+  minHeight: number;
+}
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -54465,6 +54465,47 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1711547215,
+      "platform_framework": [
+        "1",
+        "2",
+        "4"
+      ],
+      "component": "ImageViewer",
+      "field_category": 1,
+      "field_name": "imageProps",
+      "field_type": [
+        "8"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "透传内部 Image 图片的全部属性",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-03-27 13:46:55",
+      "update_time": "2024-03-27 13:46:55",
+      "event_output": null,
+      "custom_field_type": "ImageProps【import { ImageProps } from '@Image'】",
+      "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(PC)",
+        "React(PC)",
+        "Angular(PC)"
+      ],
+      "field_type_text": [
+        "Object"
+      ]
+    },
     {
       "id": 2723,
       "platform_framework": [