From 15ae70f524c6792141d1976a2c51583509f7be10 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Wed, 27 Mar 2024 21:47:54 +0800 Subject: [PATCH] feat(imageviewer): add image props --- db/TDesign.db | Bin 888832 -> 888832 bytes .../src/image-viewer/defaultProps.ts | 1 + .../src/image-viewer/image-viewer.en-US.md | 6 ++- .../src/image-viewer/image-viewer.md | 4 +- .../tdesign-react/src/image-viewer/type.ts | 27 +++++++++++- .../src/image-viewer/image-viewer.en-US.md | 2 + .../src/image-viewer/image-viewer.md | 4 +- .../src/image-viewer/props.ts | 11 ++++- .../tdesign-vue-next/src/image-viewer/type.ts | 27 +++++++++++- .../src/image-viewer/image-viewer.en-US.md | 2 + .../src/image-viewer/image-viewer.md | 4 +- .../tdesign-vue/src/image-viewer/props.ts | 11 ++++- .../tdesign-vue/src/image-viewer/type.ts | 27 +++++++++++- packages/scripts/api.json | 41 ++++++++++++++++++ 14 files changed, 155 insertions(+), 12 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index ad930bb6e4516f932f00b4876eaeea5533676698..285f604db7f67d0f8dbca1a057d9771ea1783152 100644 GIT binary patch delta 242 zcmZozVAim}Y=ShS^F$eEM(4(a)&$1Z1g6#m=GFw3)&$np1h&=$_SOWB)&$Ph1g_Qu z?$!jJtqHtK;+gkw?Ap$rz+2A91Y{Tna9Oc)aWb4i1C;<85O3Wmm3CT3Qq brbY%vCb|a3x(K1^fzoWI+pWuak4gXli)>6m delta 121 zcmZozVAim}Y=ShS(?l6(MyJMv)&$1Z1g6#m=GFw3)&$np1h&=$_SOWB)&$Ph1g_Qu z?$!jJtqHtK;+c1I9NEsEz+29^-7tX5jeYx(3|` `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 index e6eca93f3..5b2207177 100644 --- a/packages/products/tdesign-react/src/image-viewer/image-viewer.md +++ b/packages/products/tdesign-react/src/image-viewer/image-viewer.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### ImageViewer Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -11,6 +12,7 @@ closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认 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` `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 index 72b76dc4a..6014a91df 100644 --- 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 index 63759c41b..9da3b0169 100644 --- 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` `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 index 5bab4dbd4..cbe799b10 100644 --- 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` `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 index 6cbfd2c6e..381377b34 100644 --- a/packages/products/tdesign-vue-next/src/image-viewer/props.ts +++ b/packages/products/tdesign-vue-next/src/image-viewer/props.ts @@ -14,7 +14,10 @@ export default { default: true as TdImageViewerProps['closeBtn'], }, /** 按下 ESC 时是否触发图片预览器关闭事件 */ - closeOnEscKeydown: Boolean, + closeOnEscKeydown: { + type: Boolean, + default: true, + }, /** 是否在点击遮罩层时，触发预览关闭 */ closeOnOverlay: Boolean, /** 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 */ @@ -22,7 +25,11 @@ export default { type: Boolean, default: undefined, }, - /** 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度 */ + /** 透传内部 Image 图片的全部属性 */ + imageProps: { + type: Object as PropType, + }, + /** 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例 */ imageScale: { type: Object as PropType, }, diff --git a/packages/products/tdesign-vue-next/src/image-viewer/type.ts b/packages/products/tdesign-vue-next/src/image-viewer/type.ts index ca274521f..4a9f5e42e 100644 --- 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 index b75f8420c..60164c1e5 100644 --- 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` `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 index 419dd4394..5888fe4f1 100644 --- 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` `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 index 2f5369cc7..c2f4f5b26 100644 --- a/packages/products/tdesign-vue/src/image-viewer/props.ts +++ b/packages/products/tdesign-vue/src/image-viewer/props.ts @@ -14,7 +14,10 @@ export default { default: true, }, /** 按下 ESC 时是否触发图片预览器关闭事件 */ - closeOnEscKeydown: Boolean, + closeOnEscKeydown: { + type: Boolean, + default: true, + }, /** 是否在点击遮罩层时，触发预览关闭 */ closeOnOverlay: Boolean, /** 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 */ @@ -22,7 +25,11 @@ export default { type: Boolean, default: undefined, }, - /** 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度 */ + /** 透传内部 Image 图片的全部属性 */ + imageProps: { + type: Object as PropType, + }, + /** 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例 */ imageScale: { type: Object as PropType, }, diff --git a/packages/products/tdesign-vue/src/image-viewer/type.ts b/packages/products/tdesign-vue/src/image-viewer/type.ts index eb7173a42..8c667685b 100644 --- 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 index 9b35b81e2..c0e60e892 100644 --- 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": [