fix(button): fix button icon size (#4506)

* fix(button): fix button icon size

* feat(action-sheet): support preventScrollThrough

* feat(image-viewer): support maxzoom

* feat(chat-marddown): support scroll horizontally

* feat(form): add contentAlign

* chore: stash changelog [ci skip]

---------

Co-authored-by: tdesign-bot <tdesign@tencent.com>

Author: novlan1

packages/components/form-item/form-item.ts

@@ -48,6 +48,20 @@ export default class FormItem extends SuperComponent {
     form: {},
     colon: false,
     innerShowErrorMessage: true,
+    innerContentAlign: '',
+    contentStyle: '',
+  };
+
+  observers = {
+    contentAlign(val: string) {
+      // 自身传了 contentAlign 时，优先使用自身值
+      if (val) {
+        this.setData({
+          innerContentAlign: val,
+          contentStyle: `text-align: ${val}`,
+        });
+      }
+    },
   };
 
   relations: RelationsOptions = {
@@ -61,11 +75,16 @@ export default class FormItem extends SuperComponent {
         const formRules = target.data.rules?.[this.properties.name];
         const isRequired = formRules?.some((rule) => rule.required);
 
+        const { contentAlign } = this.properties;
+        const innerContentAlign = contentAlign || target.data.contentAlign || '';
+
         this.setData({
           formRules: formRules || [],
           colon: target.data.colon,
           innerLabelAlign: labelAlign || target.data.labelAlign,
           innerLabelWidth: normalizeLabelWidth(labelWidth || target.data.labelWidth),
+          innerContentAlign,
+          contentStyle: innerContentAlign ? `text-align: ${innerContentAlign}` : '',
           innerRequiredMark: requiredMark || target.data.requiredMark || globalConfig.requiredMark || isRequired,
           innerShowErrorMessage:
             typeof showErrorMessage === 'boolean' ? showErrorMessage : target.properties.showErrorMessage,

packages/components/form-item/form-item.wxml

@@ -17,21 +17,24 @@
 
     <!-- 内容区域 -->
     <view class="{{formClass}}__controls {{errorClasses}} {{prefix}}-class-controls">
-      <view class="{{formClass}}__controls-content {{formClass}}__controls--{{contentAlign}}" style="{{contentStyle}}">
+      <view
+        class="{{formClass}}__controls-content {{formClass}}__controls--{{innerContentAlign}}"
+        style="{{contentStyle}}"
+      >
         <slot />
       </view>
       <!-- 帮助信息 -->
       <view
         wx:if="{{help}}"
-        class="{{formItemClass}}-help {{formClass}}__controls--{{contentAlign}} {{prefix}}-class-help"
+        class="{{formItemClass}}-help {{formClass}}__controls--{{innerContentAlign}} {{prefix}}-class-help"
       >
         {{ help }}
       </view>
 
       <!-- 校验提示信息 -->
       <view
         wx:if="{{(errorList.length > 0 && innerShowErrorMessage) || successList.length > 0}}"
-        class="{{formItemClass}}-extra {{formClass}}__controls--{{contentAlign}} {{prefix}}-class-extra"
+        class="{{formItemClass}}-extra {{formClass}}__controls--{{innerContentAlign}} {{prefix}}-class-extra"
       >
         {{errorList.length > 0 && innerShowErrorMessage ? errorList[0].message : successList[0].message}}
       </view>

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/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/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/components/form/README.md

@@ -52,6 +52,7 @@ toc: false
 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
@@ -69,7 +70,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 组件实例方法
@@ -90,6 +91,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/components/form/props.ts

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

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/components/upload/README.en-US.md

@@ -58,7 +58,8 @@ Name | Default Value | Description
 --td-upload-add-disabled-bg-color | @bg-color-component-disabled | -
 --td-upload-add-icon-disabled-color | @text-color-disabled | -
 --td-upload-add-icon-size | 56rpx | -
---td-upload-disabled-mask | rgba(0, 0, 0, 0.6) | -
+--td-upload-background | @upload-add-bg-color | -
+--td-upload-disabled-mask | @mask-disabled | -
 --td-upload-drag-transition-duration | --td-upload-drag-transition-duration | -
 --td-upload-drag-transition-timing-function | --td-upload-drag-transition-timing-function | -
 --td-upload-drag-z-index | 999 | -

packages/components/upload/README.md

@@ -121,7 +121,8 @@ add-content | 自定义 `add-content` 显示内容
 --td-upload-add-disabled-bg-color | @bg-color-component-disabled | -
 --td-upload-add-icon-disabled-color | @text-color-disabled | -
 --td-upload-add-icon-size | 56rpx | -
---td-upload-disabled-mask | rgba(0, 0, 0, 0.6) | -
+--td-upload-background | @upload-add-bg-color | -
+--td-upload-disabled-mask | @mask-disabled | -
 --td-upload-drag-transition-duration | --td-upload-drag-transition-duration | -
 --td-upload-drag-transition-timing-function | --td-upload-drag-transition-timing-function | -
 --td-upload-drag-z-index | 999 | -