feat(image-viewer): support zoom [uniapp]

packages/products/tdesign-miniprogram/packages/components/form-item/props.ts

@@ -11,6 +11,10 @@ const props: TdFormItemProps = {
     type: Boolean,
     value: false,
   },
+  /** 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign */
+  contentAlign: {
+    type: String,
+  },
   /** 表单项说明内容 */
   help: {
     type: String,

packages/products/tdesign-miniprogram/packages/components/form-item/type.ts

@@ -15,6 +15,13 @@ export interface TdFormItemProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign
+   */
+  contentAlign?: {
+    type: StringConstructor;
+    value?: 'left' | 'right';
+  };
   /**
    * 表单项说明内容
    */

packages/products/tdesign-miniprogram/packages/components/form/README.en-US.md

@@ -9,6 +9,7 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 colon | Boolean | false | \- | N
+content-align | String | left | options: left/right | N
 data | Object | {} | Typescript: `FormData` | N
 error-message | Object | - | Typescript: `FormErrorMessage` | N
 label-align | String | right | options: left/right/top | N
@@ -26,7 +27,7 @@ submit-with-warning-message | Boolean | false | \- | N
 name | params | description
 -- | -- | --
 reset | `(detail: { e?: FormResetEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)
-submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+submit | `(detail: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
 validate | `(result: ValidateResultContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
 
 ### FormInstanceFunctions 组件实例方法
@@ -47,6 +48,7 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 arrow | Boolean | false | \- | N
+content-align | String | - | options: left/right | N
 help | String | - | \- | N
 label | String | '' | \- | N
 label-align | String | - | options: left/right/top | N

packages/products/tdesign-miniprogram/packages/components/form/README.md

@@ -9,6 +9,7 @@
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
+content-align | String | left | 表单内容对齐方式：左对齐、右对齐。可选项：left/right | N
 data | Object | {} | 表单数据。TS 类型：`FormData` | N
 error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
 label-align | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
@@ -26,7 +27,7 @@ submit-with-warning-message | Boolean | false | 【讨论中】当校验结果
 名称 | 参数 | 描述
 -- | -- | --
 reset | `(detail: { e?: FormResetEvent })` | 表单重置时触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)
-submit | `(context: SubmitContext<FormData>)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+submit | `(detail: SubmitContext<FormData>)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
 validate | `(result: ValidateResultContext<FormData>)` | 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
 
 ### FormInstanceFunctions 组件实例方法
@@ -47,6 +48,7 @@ validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormDat
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 arrow | Boolean | false | 是否显示右侧箭头 | N
+content-align | String | - | 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign。可选项：left/right | N
 help | String | - | 表单项说明内容 | N
 label | String | '' | 字段标签名称 | N
 label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N

packages/products/tdesign-miniprogram/packages/components/form/props.ts

@@ -11,6 +11,11 @@ const props: TdFormProps = {
     type: Boolean,
     value: false,
   },
+  /** 表单内容对齐方式：左对齐、右对齐 */
+  contentAlign: {
+    type: String,
+    value: 'left',
+  },
   /** 表单数据 */
   data: {
     type: Object,

packages/products/tdesign-miniprogram/packages/components/form/type.ts

@@ -16,6 +16,14 @@ export interface TdFormProps<FormData extends Data = Data> {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 表单内容对齐方式：左对齐、右对齐
+   * @default left
+   */
+  contentAlign?: {
+    type: StringConstructor;
+    value?: 'left' | 'right';
+  };
   /**
    * 表单数据
    * @default {}

packages/products/tdesign-miniprogram/packages/uniapp-components/action-sheet/README.en-US.md

@@ -13,12 +13,13 @@ count | Number | 8 | \- | N
 description | String | - | \- | N
 items | Array | [] | Typescript: `Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; description?: string; color?: string; disabled?: boolean; icon?: string \| object; suffixIcon?: string \| object }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
 popup-props | Object | {} | Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
+prevent-scroll-through | Boolean | true | \- | N
 show-cancel | Boolean | true | \- | N
 show-overlay | Boolean | true | \- | N
 theme | String | list | options: list/grid | N
 using-custom-navbar | Boolean | false | \- | N
-visible | Boolean | false | `v-model:visible` is supported | N
-default-visible | Boolean | false | uncontrolled property | N
+visible | Boolean | false | `v-model:visible` is supported。Typescript: `boolean \| null` | N
+default-visible | Boolean | false | uncontrolled property。Typescript: `boolean \| null` | N
 
 ### ActionSheet Events
 

packages/products/tdesign-miniprogram/packages/uniapp-components/action-sheet/README.md

@@ -13,12 +13,13 @@ count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有
 description | String | - | 动作面板描述文字 | N
 items | Array | [] | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; description?: string; color?: string; disabled?: boolean; icon?: string \| object; suffixIcon?: string \| object }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
 popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/action-sheet/type.ts) | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
 show-cancel | Boolean | true | 是否显示取消按钮 | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
-visible | Boolean | false | 显示与隐藏。支持语法糖 `v-model:visible` | N
-default-visible | Boolean | false | 显示与隐藏。非受控属性 | N
+visible | Boolean | false | 显示与隐藏。支持语法糖 `v-model:visible`。TS 类型：`boolean \| null` | N
+default-visible | Boolean | false | 显示与隐藏。非受控属性。TS 类型：`boolean \| null` | N
 
 ### ActionSheet Events
 

packages/products/tdesign-miniprogram/packages/uniapp-components/action-sheet/props.ts

@@ -40,6 +40,11 @@ export default {
     type: Object,
     default: () => ({}),
   },
+  /** 防止滚动穿透，即不允许点击和滚动 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,
@@ -63,8 +68,8 @@ export default {
   usingCustomNavbar: Boolean,
   /** 显示与隐藏 */
   visible: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdActionSheetProps['visible'],
   },
   /** 显示与隐藏，非受控属性 */
   defaultVisible: Boolean,

packages/products/tdesign-miniprogram/packages/uniapp-components/action-sheet/type.ts

@@ -37,6 +37,11 @@ export interface TdActionSheetProps {
    * @default {}
    */
   popupProps?: PopupProps;
+  /**
+   * 防止滚动穿透，即不允许点击和滚动
+   * @default true
+   */
+  preventScrollThrough?: boolean;
   /**
    * 是否显示取消按钮
    * @default true
@@ -61,12 +66,12 @@ export interface TdActionSheetProps {
    * 显示与隐藏
    * @default false
    */
-  visible?: boolean;
+  visible?: boolean | null;
   /**
    * 显示与隐藏，非受控属性
    * @default false
    */
-  defaultVisible?: boolean;
+  defaultVisible?: boolean | null;
   /**
    * 点击取消按钮时触发
    */

packages/products/tdesign-miniprogram/packages/uniapp-components/form-item/props.ts

@@ -8,6 +8,14 @@ import type { TdFormItemProps } from './type';
 export default {
   /** 是否显示右侧箭头 */
   arrow: Boolean,
+  /** 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign */
+  contentAlign: {
+    type: String,
+    validator(val: TdFormItemProps['contentAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
   /** 表单项说明内容 */
   help: {
     type: String,

packages/products/tdesign-miniprogram/packages/uniapp-components/form-item/type.ts

@@ -12,6 +12,10 @@ export interface TdFormItemProps {
    * @default false
    */
   arrow?: boolean;
+  /**
+   * 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign
+   */
+  contentAlign?: 'left' | 'right';
   /**
    * 表单项说明内容
    */

packages/products/tdesign-miniprogram/packages/uniapp-components/form/README.en-US.md

@@ -8,6 +8,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 custom-style | Object | - | CSS(Cascading Style Sheets) | N
 colon | Boolean | false | \- | N
+content-align | String | left | options: left/right | N
 data | Object | {} | Typescript: `FormData` | N
 error-message | Object | - | Typescript: `FormErrorMessage` | N
 label-align | String | right | options: left/right/top | N
@@ -45,6 +46,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 custom-style | Object | - | CSS(Cascading Style Sheets) | N
 arrow | Boolean | false | \- | N
+content-align | String | - | options: left/right | N
 help | String | - | \- | N
 label | String | '' | \- | N
 label-align | String | - | options: left/right/top | N

packages/products/tdesign-miniprogram/packages/uniapp-components/form/README.md

@@ -8,6 +8,7 @@
 -- | -- | -- | -- | --
 custom-style | Object | - | 自定义样式 | N
 colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
+content-align | String | left | 表单内容对齐方式：左对齐、右对齐。可选项：left/right | N
 data | Object | {} | 表单数据。TS 类型：`FormData` | N
 error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
 label-align | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
@@ -45,6 +46,7 @@ validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormDat
 -- | -- | -- | -- | --
 custom-style | Object | - | 自定义样式 | N
 arrow | Boolean | false | 是否显示右侧箭头 | N
+content-align | String | - | 表单内容对齐方式：左对齐、右对齐，优先级高于 Form.contentAlign。可选项：left/right | N
 help | String | - | 表单项说明内容 | N
 label | String | '' | 字段标签名称 | N
 label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N

packages/products/tdesign-miniprogram/packages/uniapp-components/form/props.ts

@@ -8,6 +8,15 @@ import type { TdFormProps } from './type';
 export default {
   /** 是否在表单标签字段右侧显示冒号 */
   colon: Boolean,
+  /** 表单内容对齐方式：左对齐、右对齐 */
+  contentAlign: {
+    type: String,
+    default: 'left' as TdFormProps['contentAlign'],
+    validator(val: TdFormProps['contentAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
   /** 表单数据 */
   data: {
     type: Object,

packages/products/tdesign-miniprogram/packages/uniapp-components/form/type.ts

@@ -14,6 +14,11 @@ export interface TdFormProps<FormData extends Data = Data> {
    * @default false
    */
   colon?: boolean;
+  /**
+   * 表单内容对齐方式：左对齐、右对齐
+   * @default left
+   */
+  contentAlign?: 'left' | 'right';
   /**
    * 表单数据
    * @default {}

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

@@ -14,7 +14,7 @@ image-props | Object | - | Typescript: `ImageProps`，[Image API Documents](./im
 images | Array | [] | Typescript: `Array<string>` | N
 initial-index | Number | 0 | Typescript: `Number` | N
 lazy | Boolean | true | \- | N
-loop | Boolean | true | \- | N
+max-zoom | Number | 3 | \- | N
 show-index | Boolean | false | \- | N
 using-custom-navbar | Boolean | false | \- | N
 visible | Boolean | false | hide or show image viewer。`v-model:visible` is supported | N

packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.md

@@ -14,7 +14,7 @@ image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[
 images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
 initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N
 lazy | Boolean | true | 是否开启图片懒加载。开启后会预加载当前图片、相邻图片 | N
-loop | Boolean | true | 是否开启循环滚动 | N
+max-zoom | Number | 3 | 图片最大放大比例 | N
 show-index | Boolean | false | 是否显示页码 | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model:visible` | N

packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/props.ts

@@ -40,19 +40,19 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 是否开启循环滚动 */
-  loop: {
-    type: Boolean,
-    default: true,
+  /** 图片最大放大比例 */
+  maxZoom: {
+    type: Number,
+    default: 3,
   },
   /** 是否显示页码 */
   showIndex: Boolean,
   /** 是否使用了自定义导航栏 */
   usingCustomNavbar: Boolean,
   /** 隐藏/显示预览 */
   visible: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdImageViewerProps['visible'],
   },
   /** 隐藏/显示预览，非受控属性 */
   defaultVisible: Boolean,

packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/type.ts

@@ -42,10 +42,10 @@ export interface TdImageViewerProps {
    */
   lazy?: boolean;
   /**
-   * 是否开启循环滚动
-   * @default true
+   * 图片最大放大比例
+   * @default 3
    */
-  loop?: boolean;
+  maxZoom?: number;
   /**
    * 是否显示页码
    * @default false
@@ -60,7 +60,7 @@ export interface TdImageViewerProps {
    * 隐藏/显示预览
    * @default false
    */
-  visible?: boolean;
+  visible?: boolean | null;
   /**
    * 隐藏/显示预览，非受控属性
    * @default false