feat(mobile): image-viewer update api

packages/products/tdesign-miniprogram/src/image-viewer/README.en-US.md

@@ -22,6 +22,6 @@ default-visible | Boolean | undefined | hide or show image viewer。uncontrolled
 
 name | params | description
 -- | -- | --
-change | `(index: Number)` | \-
+change | `(index: number)` | \-
 close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | \-
-delete | `(index: Number)` | \-
+delete | `(index: number)` | \-

packages/products/tdesign-miniprogram/src/image-viewer/README.md

@@ -22,6 +22,6 @@ default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 |
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(index: Number)` | 翻页时回调
+change | `(index: number)` | 翻页时回调
 close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发
-delete | `(index: Number)` | 点击删除操作按钮时触发
+delete | `(index: number)` | 点击删除操作按钮时触发

packages/products/tdesign-miniprogram/src/image-viewer/props.ts

@@ -8,17 +8,17 @@ import { TdImageViewerProps } from './type';
 const props: TdImageViewerProps = {
   /** 遮罩的背景颜色 */
   backgroundColor: {
-    type: null,
-    value: rgba(0, 0, 0, .6),
+    type: String,
+    value: 'rgba(0, 0, 0, 1)',
   },
-  /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮 */
+  /** 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 */
   closeBtn: {
-    type: Boolean,
-    value: true,
+    type: null,
+    value: false,
   },
-  /** 是否显示删除操作 */
+  /** 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 */
   deleteBtn: {
-    type: Boolean,
+    type: null,
     value: false,
   },
   /** 图片数组 */
@@ -31,20 +31,15 @@ const props: TdImageViewerProps = {
     type: Number,
     value: 0,
   },
-  /** 最大放大比例 */
-  maxZoom: {
-    type: Number,
-    value: 3,
-  },
   /** 是否显示页码 */
   showIndex: {
     type: Boolean,
     value: false,
   },
-  /** 自定义组件样式 */
-  style: {
-    type: String,
-    value: '',
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: {
+    type: Boolean,
+    value: false,
   },
   /** 隐藏/显示预览 */
   visible: {

packages/products/tdesign-miniprogram/src/image-viewer/type.ts

@@ -7,27 +7,27 @@
 export interface TdImageViewerProps {
   /**
    * 遮罩的背景颜色
-   * @default rgba(0, 0, 0, .6)
+   * @default 'rgba(0, 0, 0, 1)'
    */
   backgroundColor?: {
-    type: null;
-    value?: string | number;
+    type: StringConstructor;
+    value?: string;
   };
   /**
-   * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮
-   * @default true
+   * 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标
+   * @default false
    */
   closeBtn?: {
-    type: BooleanConstructor;
-    value?: boolean;
+    type: null;
+    value?: string | boolean | object;
   };
   /**
-   * 是否显示删除操作
+   * 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标
    * @default false
    */
   deleteBtn?: {
-    type: BooleanConstructor;
-    value?: boolean;
+    type: null;
+    value?: string | boolean | object;
   };
   /**
    * 图片数组
@@ -45,14 +45,6 @@ export interface TdImageViewerProps {
     type: NumberConstructor;
     value?: Number;
   };
-  /**
-   * 最大放大比例
-   * @default 3
-   */
-  maxZoom?: {
-    type: NumberConstructor;
-    value?: Number;
-  };
   /**
    * 是否显示页码
    * @default false
@@ -62,12 +54,12 @@ export interface TdImageViewerProps {
     value?: boolean;
   };
   /**
-   * 自定义组件样式
-   * @default ''
+   * 是否使用了自定义导航栏
+   * @default false
    */
-  style?: {
-    type: StringConstructor;
-    value?: string;
+  usingCustomNavbar?: {
+    type: BooleanConstructor;
+    value?: boolean;
   };
   /**
    * 隐藏/显示预览

packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts

@@ -0,0 +1,15 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdImageViewerProps } from './type';
+
+export const imageViewerDefaultProps: TdImageViewerProps = {
+  closeBtn: true,
+  deleteBtn: false,
+  images: [],
+  defaultIndex: 0,
+  maxZoom: 3,
+  showIndex: false,
+  defaultVisible: false,
+};

packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md

@@ -0,0 +1,22 @@
+:: BASE_DOC ::
+
+## API
+
+### ImageViewer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+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-mobile-react/blob/develop/src/common.ts) | N
+deleteBtn | TNode | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+images | Array | [] | Typescript：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N
+index | Number | 0 | \- | N
+defaultIndex | Number | 0 | uncontrolled property | N
+maxZoom | Number | 3 | Typescript：`Number` | N
+showIndex | Boolean | false | \- | N
+visible | Boolean | false | hide or show image viewer | N
+defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
+onClose | Function |  | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/> | N
+onDelete | Function |  | Typescript：`(index: number) => void`<br/> | N
+onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/> | N

packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md

@@ -0,0 +1,22 @@
+:: 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-mobile-react/blob/develop/src/common.ts) | N
+deleteBtn | TNode | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+images | Array | [] | 图片数组。TS 类型：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N
+index | Number | 0 | 当前预览图片所在的下标 | N
+defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N
+maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`Number` | N
+showIndex | Boolean | false | 是否显示页码 | N
+visible | Boolean | false | 隐藏/显示预览 | N
+defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
+onClose | Function |  | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/>关闭时触发 | N
+onDelete | Function |  | TS 类型：`(index: number) => void`<br/>点击删除操作按钮时触发 | N
+onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N

packages/products/tdesign-mobile-react/src/image-viewer/type.ts

@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdImageViewerProps {
+  /**
+   * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮
+   * @default true
+   */
+  closeBtn?: TNode;
+  /**
+   * 是否显示删除操作，前提需要开启页码
+   * @default false
+   */
+  deleteBtn?: TNode;
+  /**
+   * 图片数组
+   * @default []
+   */
+  images?: Array<string | ImageInfo>;
+  /**
+   * 当前预览图片所在的下标
+   * @default 0
+   */
+  index?: number;
+  /**
+   * 当前预览图片所在的下标，非受控属性
+   * @default 0
+   */
+  defaultIndex?: number;
+  /**
+   * 【开发中】最大放大比例
+   * @default 3
+   */
+  maxZoom?: Number;
+  /**
+   * 是否显示页码
+   * @default false
+   */
+  showIndex?: boolean;
+  /**
+   * 隐藏/显示预览
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 隐藏/显示预览，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: boolean; index: number }) => void;
+  /**
+   * 点击删除操作按钮时触发
+   */
+  onDelete?: (index: number) => void;
+  /**
+   * 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片
+   */
+  onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' | 'current' }) => void;
+}
+
+export interface ImageInfo {
+  url: string;
+  align: 'start' | 'center' | 'end';
+}

packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md

@@ -8,21 +8,21 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 deleteBtn | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-images | Array | [] | Typescript：`Array<string \| {url: string; align: 'start' \| 'center' \| 'end'; }>` | N
+images | Array | [] | Typescript：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | - | `v-model:index` is supported | N
 defaultIndex | Number | - | uncontrolled property | N
 maxZoom | Number | 3 | Typescript：`Number` | N
 showIndex | Boolean | false | \- | N
 visible | Boolean | false | hide or show image viewer。`v-model` and `v-model:visible` is supported | N
 defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
-onClose | Function |  | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`<br/> | N
-onDelete | Function |  | Typescript：`(index: Number) => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/> | N
+onDelete | Function |  | Typescript：`(index: number) => void`<br/> | N
 onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/> | N
 
 ### ImageViewer Events
 
 name | params | description
 -- | -- | --
-close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | \-
-delete | `(index: Number)` | \-
+close | `(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number })` | \-
+delete | `(index: number)` | \-
 index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | \-

packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md

@@ -8,21 +8,21 @@
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 deleteBtn | Boolean / Slot / Function | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-images | Array | [] | 图片数组。TS 类型：`Array<string \| {url: string; align: 'start' \| 'center' \| 'end'; }>` | N
+images | Array | [] | 图片数组。TS 类型：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
 defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N
 maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`Number` | N
 showIndex | Boolean | false | 是否显示页码 | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
 defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
-onClose | Function |  | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`<br/>关闭时触发 | N
-onDelete | Function |  | TS 类型：`(index: Number) => void`<br/>点击删除操作按钮时触发 | N
+onClose | Function |  | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/>关闭时触发 | N
+onDelete | Function |  | TS 类型：`(index: number) => void`<br/>点击删除操作按钮时触发 | N
 onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N
 
 ### ImageViewer Events
 
 名称 | 参数 | 描述
 -- | -- | --
-close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | 关闭时触发
-delete | `(index: Number)` | 点击删除操作按钮时触发
+close | `(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number })` | 关闭时触发
+delete | `(index: number)` | 点击删除操作按钮时触发
 index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片

packages/products/tdesign-mobile-vue/src/image-viewer/type.ts

@@ -21,7 +21,7 @@ export interface TdImageViewerProps {
    * 图片数组
    * @default []
    */
-  images?: Array<string | { url: string; align: 'start' | 'center' | 'end' }>;
+  images?: Array<string | ImageInfo>;
   /**
    * 当前预览图片所在的下标
    */
@@ -58,13 +58,18 @@ export interface TdImageViewerProps {
   /**
    * 关闭时触发
    */
-  onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: Boolean; index: Number }) => void;
+  onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: boolean; index: number }) => void;
   /**
    * 点击删除操作按钮时触发
    */
-  onDelete?: (index: Number) => void;
+  onDelete?: (index: number) => void;
   /**
    * 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片
    */
   onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' }) => void;
 }
+
+export interface ImageInfo {
+  url: string;
+  align: 'start' | 'center' | 'end';
+}

packages/scripts/api.json

@@ -61679,7 +61679,7 @@
       "create_time": "2024-05-31 05:07:01",
       "update_time": "2024-05-31 05:07:01",
       "event_output": null,
-      "custom_field_type": "Array<string | {url: string; align: 'start' | 'center' | 'end'; }>",
+      "custom_field_type": "Array<string | ImageInfo>【interface ImageInfo { url: string; align: 'start' | 'center' | 'end' }】",
       "syntactic_sugar": null,
       "readonly": 1,
       "html_attribute": 0,
@@ -62294,7 +62294,7 @@
       "field_desc_zh": "翻页时回调",
       "field_desc_en": null,
       "field_required": 0,
-      "event_input": "(index: Number)",
+      "event_input": "(index: number)",
       "create_time": "2023-03-13 02:16:45",
       "update_time": "2023-03-13 02:16:45",
       "event_output": null,
@@ -62399,7 +62399,7 @@
       "field_desc_zh": "关闭时触发",
       "field_desc_en": null,
       "field_required": 0,
-      "event_input": "(context: { trigger: 'overlay' | 'close-btn', visible: Boolean, index: Number })",
+      "event_input": "(context: { trigger: 'overlay' | 'close-btn', visible: boolean, index: number })",
       "create_time": "2023-05-18 02:56:23",
       "update_time": "2023-05-18 02:56:23",
       "event_output": null,
@@ -62437,7 +62437,7 @@
       "field_desc_zh": "点击删除操作按钮时触发",
       "field_desc_en": null,
       "field_required": 0,
-      "event_input": "(index: Number)",
+      "event_input": "(index: number)",
       "create_time": "2023-03-13 02:16:45",
       "update_time": "2023-03-13 02:16:45",
       "event_output": null,