@tdesign/uniapp 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -5,6 +5,23 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 0.9.1 `2026-06-12`
+
+### 🚀 Features
+
+- `ActionSheet`: 新增 `preventScrollThrough` 属性 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))
+- `Form`: 新增 `contentAlign` 属性，支持配置表单内容对齐方式 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))
+- `ImageViewer`: 新增 `maxZoom` 属性，支持缩放 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))
+- `Search`: 支持 `v-model` 语法糖写法 @Kriac ([#4459](https://github.com/Tencent/tdesign-miniprogram/pull/4459))
+
+### 🐞 Bug Fixes
+
+- `Button`: 修复图标尺寸变量错误问题 @novlan1 ([#4506](https://github.com/Tencent/tdesign-miniprogram/pull/4506))
+- `Input`: 将 `change` 事件放在值更新之后 @Kriac ([#4443](https://github.com/Tencent/tdesign-miniprogram/pull/4443))
+- `Picker`: 修复按钮自定义文案无效 @liweijie0812 ([#4480](https://github.com/Tencent/tdesign-miniprogram/pull/4480))
+- `Table`: 修复列配置中的类名选项无效的问题 @betavs ([#4500](https://github.com/Tencent/tdesign-miniprogram/pull/4500))
+- `Upload`: 修复预览图片不是当前问题 @novlan1 ([#4473](https://github.com/Tencent/tdesign-miniprogram/pull/4473))
+
 ## 🌈 0.9.0 `2026-05-08`
 
 ### 🚀 Features

package/dist/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
 
@@ -45,7 +46,7 @@ t-class-content | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-action-sheet-border-color | @component-stroke | -
 --td-action-sheet-border-radius | @radius-extraLarge | -

package/dist/action-sheet/README.md

@@ -89,12 +89,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
 
@@ -121,7 +122,7 @@ t-class-content | 内容样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-action-sheet-border-color | @component-stroke | -
 --td-action-sheet-border-radius | @radius-extraLarge | -

package/dist/action-sheet/action-sheet.vue

@@ -10,6 +10,7 @@
       :using-custom-navbar="dataUsingCustomNavbar"
       :custom-navbar-height="customNavbarHeight"
       :show-overlay="dataShowOverlay"
+      :prevent-scroll-through="dataPreventScrollThrough"
       :z-index="(dataPopupProps && dataPopupProps.zIndex) || defaultPopUpzIndex"
       :overlay-props="(dataPopupProps && dataPopupProps.overlayProps) || defaultOverlayProps"
       @visible-change="onPopupVisibleChange"
@@ -173,20 +174,22 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import TPopup from '../popup/popup';
-import TGrid from '../grid/grid';
-import TGridItem from '../grid-item/grid-item';
-import { chunk } from '../common/utils';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import { actionSheetTheme } from './show';
-import props from './props';
-import useCustomNavbar from '../mixins/using-custom-navbar';
-import tools from '../common/utils.wxs';
+
 import { getFunctionalMixin } from '../common/functional/mixin';
+import { uniComponent } from '../common/src/index';
+import { chunk } from '../common/utils';
+import tools from '../common/utils.wxs';
+import TGrid from '../grid/grid';
+import TGridItem from '../grid-item/grid-item';
+import TIcon from '../icon/icon';
 import usingConfig from '../mixins/using-config';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import TPopup from '../popup/popup';
+
 import { getIconData } from './computed';
+import props from './props';
+import { actionSheetTheme } from './show';
 
 const componentName = 'action-sheet';
 const name = `${prefix}-${componentName}`;
@@ -246,10 +249,10 @@ export default {
         ]);
       },
       iconCustomStyle() {
-        return 'margin-right: 8px;';
+        return 'margin-right: 16rpx;';
       },
       suffixIconCustomStyle() {
-        return 'margin-right: 8px;margin-left: auto;';
+        return 'margin-right: 16rpx;margin-left: auto;';
       },
       gridStyle() {
         return `${this.heightStyle}padding-bottom: 48rpx;`;
@@ -300,6 +303,7 @@ export default {
           'description',
           'items',
           'popupProps',
+          'preventScrollThrough',
           'showCancel',
           'showOverlay',
           'theme',

package/dist/action-sheet/computed.js

@@ -13,7 +13,7 @@ export const getListThemeItemClass = function (props) {
 
 export const getIconData = function (icon) {
   if (utils.isString(icon)) {
-    return { name: icon };
+    return { name: icon, size: '48rpx' };
   }
 
   if (utils.isNoEmptyObj(icon)) {

package/dist/action-sheet/props.ts

@@ -40,6 +40,11 @@ export default {
     type: Object,
     default: () => ({}),
   },
+  /** 防止滚动穿透，即不允许点击和滚动 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,

package/dist/action-sheet/type.ts

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

package/dist/avatar/README.en-US.md

@@ -75,7 +75,7 @@ t-class-image | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
 --td-avatar-group-line-spacing | 4rpx | -

package/dist/avatar/README.md

@@ -127,7 +127,7 @@ t-class-image | 图片样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
 --td-avatar-group-line-spacing | 4rpx | -

package/dist/avatar/avatar.vue

@@ -51,6 +51,7 @@
           name="icon"
         >
           <t-icon
+            :custom-style="iconCustomStyle"
             :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ') + tClassIcon"
             :prefix="iconData.prefix"
             :name="iconName || iconData.name"
@@ -59,7 +60,6 @@
             :aria-hidden="!!iconData.ariaHidden"
             :aria-label="iconData.ariaLabel"
             :aria-role="iconData.ariaRole"
-            :custom-style="iconCustomStyle"
             @click="iconData.click || ''"
           />
         </block>
@@ -77,16 +77,17 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
 import TBadge from '../badge/badge';
-import TImage from '../image/image';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import avatarProps from './props';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import { setIcon, systemInfo, addUnit } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+
 import * as utils from './computed.js';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import avatarProps from './props';
 
 
 const name = `${prefix}-avatar`;
@@ -136,9 +137,9 @@ export default {
     computed: {
       iconCustomStyle() {
         const fontSize = {
-          small: 'var(--td-avatar-icon-small-font-size, 20px)',
-          medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
-          large: 'var(--td-avatar-icon-large-font-size, 32px)',
+          small: 'var(--td-avatar-icon-small-font-size, 40rpx)',
+          medium: 'var(--td-avatar-icon-medium-font-size, 48rpx)',
+          large: 'var(--td-avatar-icon-large-font-size, 64rpx)',
         };
 
         return tools._style([

package/dist/avatar-group/avatar-group.vue

@@ -27,12 +27,12 @@
 </template>
 <script>
 import TAvatar from '../avatar/avatar';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import avatarGroupProps from './props';
-
-import tools from '../common/utils.wxs';
 import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
+import tools from '../common/utils.wxs';
+
+import avatarGroupProps from './props';
 
 
 const name = `${prefix}-avatar-group`;

package/dist/back-top/README.en-US.md

@@ -38,7 +38,7 @@ t-class-text | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-back-top-half-round-border-radius | @radius-round | -
 --td-back-top-round-bg-color | @bg-color-container | -

package/dist/back-top/README.md

@@ -58,7 +58,7 @@ t-class-text | 文本样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-back-top-half-round-border-radius | @radius-round | -
 --td-back-top-round-bg-color | @bg-color-container | -

package/dist/back-top/back-top.vue

@@ -39,13 +39,14 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { uniComponent } from '../common/src/index';
 import { calcIcon } from '../common/utils';
 import tools from '../common/utils.wxs';
-import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import TIcon from '../icon/icon';
+
+import props from './props';
 
 
 const name = `${prefix}-back-top`;

package/dist/badge/README.en-US.md

@@ -35,7 +35,7 @@ t-class-count | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-badge-basic-height | 32rpx | -
 --td-badge-basic-padding | 8rpx | -

package/dist/badge/README.md

@@ -68,7 +68,7 @@ t-class-count | 计数样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-badge-basic-height | 32rpx | -
 --td-badge-basic-padding | 8rpx | -

package/dist/badge/badge.vue

@@ -57,9 +57,10 @@
   </view>
 </template>
 <script>
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
+
+
 import { uniqueFactory, getRect } from '../common/utils';
 import tools from '../common/utils.wxs';
 
@@ -69,6 +70,7 @@ import {
   getBadgeInnerClass,
   isShowBadge,
 } from './computed.js';
+import props from './props';
 
 
 const name = `${prefix}-badge`;

package/dist/button/README.en-US.md

@@ -138,7 +138,7 @@ t-class-loading | class name of loading
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-button-border-radius | @radius-default | -
 --td-button-border-width | 4rpx | -

package/dist/button/README.md

@@ -131,7 +131,7 @@ t-class-loading | 加载样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-button-border-radius | @radius-default | -
 --td-button-border-width | 4rpx | -

package/dist/button/button.vue

@@ -79,13 +79,14 @@
   </button>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import TLoading from '../loading/loading';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
 import { calcIcon, addUnit } from '../common/utils';
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
+import TLoading from '../loading/loading';
+
+import props from './props';
 
 
 const name = `${prefix}-button`;
@@ -127,10 +128,10 @@ export default {
           return {};
         }
         const fontSize = {
-          'extra-small': 'var(--td-button-extra-small-icon-font-size, 18px)',
-          small: 'var(--td-button-small-icon-font-size, 18px)',
-          medium: 'var(--td-button-medium-icon-font-size, 20px)',
-          large: 'var(--td-button-large-icon-font-size, 24px)',
+          'extra-small': 'var(--td-button-extra-small-icon-size, 36rpx)',
+          small: 'var(--td-button-small-icon-size, 36rpx)',
+          medium: 'var(--td-button-medium-icon-size, 40rpx)',
+          large: 'var(--td-button-large-icon-size, 48rpx)',
         };
 
         return tools._style([
@@ -138,7 +139,7 @@ export default {
             fontSize: this.innerIcon.size
               ? addUnit(this.innerIcon.size)
               : fontSize[this.size || 'medium'],
-            borderRadius: 'var(--td-button-icon-border-radius, 4px)',
+            borderRadius: 'var(--td-button-icon-border-radius, 8rpx)',
           },
           this.innerIcon.style || '',
         ]);
@@ -242,10 +243,10 @@ export default {
 
 /* #ifdef H5 || MP-WEIXIN */
 :deep(.t-button__loading) + .t-button__content:not(:empty) {
-  margin-left: 4px;
+  margin-left: 8rpx;
 }
 :deep(.t-button__icon) + .t-button__content:not(:empty) {
-  margin-left: 4px;
+  margin-left: 8rpx;
 }
 /* #endif */
 

package/dist/calendar/README.en-US.md

@@ -47,7 +47,7 @@ title | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-calendar-active-color | @brand-color | -
 --td-calendar-bg-color | @bg-color-container | -

package/dist/calendar/README.md

@@ -99,7 +99,7 @@ title | 标题
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-calendar-active-color | @brand-color | -
 --td-calendar-bg-color | @bg-color-container | -

package/dist/calendar/calendar-header.vue

@@ -53,8 +53,9 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon.vue';
 import utils from '../common/utils.wxs';
+import TIcon from '../icon/icon.vue';
+
 import props from './calendar-header.props';
 import { getMonthTitle } from './computed';
 

package/dist/calendar/calendar.vue

@@ -73,24 +73,26 @@
   </view>
 </template>
 <script>
-import TPopup from '../popup/popup';
-import CalendarTemplate from './template.vue';
 
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import { coalesce } from '../common/utils';
 
-import props from './props';
 import TCalendar from '../common/shared/calendar/index';
-import useCustomNavbar from '../mixins/using-custom-navbar';
-import { getPrevMonth, getPrevYear, getNextMonth, getNextYear } from './utils';
+import { uniComponent } from '../common/src/index';
+import { coalesce } from '../common/utils';
+
 import tools from '../common/utils.wxs';
 import usingConfig from '../mixins/using-config';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import TPopup from '../popup/popup';
+
 import {
   getMonthTitle,
   getDateLabel,
   isDateSelected,
 } from './computed.js';
+import props from './props';
+import CalendarTemplate from './template.vue';
+import { getPrevMonth, getPrevYear, getNextMonth, getNextYear } from './utils';
 
 
 const componentName = 'calendar';

package/dist/calendar/template.vue

@@ -15,11 +15,11 @@
     <t-icon
       v-if="usePopup"
       name="close"
+      :custom-style="closeBtnCustomStyle"
       :t-class="classPrefix + '__close-btn'"
       size="48rpx"
       aria-role="button"
       aria-label="关闭"
-      :custom-style="closeBtnCustomStyle"
       @click="handleClose"
     />
     <block
@@ -177,16 +177,19 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon.vue';
 import TButton from '../button/button.vue';
+
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
 import utils from '../common/utils.wxs';
+import TIcon from '../icon/icon.vue';
+
+import CalendarHeader from './calendar-header.vue';
 import {
   getDateLabel,
   getMonthTitle,
 } from './computed.js';
-import CalendarHeader from './calendar-header.vue';
-import { prefix } from '../common/config';
-import { coalesce } from '../common/utils';
+
 import props from './template.props';
 
 
@@ -220,10 +223,10 @@ export default {
     closeBtnCustomStyle() {
       return utils._style({
         position: 'absolute',
-        top: '16px',
-        right: '16px',
-        margin: '-12px',
-        padding: '12px',
+        top: '32rpx',
+        right: '32rpx',
+        margin: '-24rpx',
+        padding: '24rpx',
         color: 'var(--td-calendar-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, .9))))',
       });
     },

package/dist/cascader/README.en-US.md

@@ -40,7 +40,7 @@ title | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-cascader-active-color | @brand-color | -
 --td-cascader-bg-color | @bg-color-container | -

package/dist/cascader/README.md

@@ -82,7 +82,7 @@ title | 自定义 `title` 显示内容
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-cascader-active-color | @brand-color | -
 --td-cascader-bg-color | @bg-color-container | -

package/dist/cascader/cascader.vue

@@ -132,18 +132,18 @@
   </view>
 </template>
 <script>
-import TIcon from '../icon/icon';
-import TPopup from '../popup/popup';
-import TTabs from '../tabs/tabs';
-import TTabPanel from '../tab-panel/tab-panel.vue';
-import TRadioGroup from '../radio-group/radio-group';
-import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
-import props from './props';
+import { uniComponent } from '../common/src/index';
 import { getRect, coalesce, nextTick } from '../common/utils';
-
 import tools from '../common/utils.wxs';
+import TIcon from '../icon/icon';
 import usingConfig from '../mixins/using-config';
+import TPopup from '../popup/popup';
+import TRadioGroup from '../radio-group/radio-group';
+import TTabPanel from '../tab-panel/tab-panel.vue';
+import TTabs from '../tabs/tabs';
+
+import props from './props';
 
 
 const componentName = 'cascader';

package/dist/cell/README.en-US.md

@@ -83,7 +83,7 @@ t-class-title | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
 --td-cell-group-border-color | @component-stroke | -
 --td-cell-group-title-bg-color | @bg-color-secondarycontainer | -

package/dist/cell/README.md

@@ -116,7 +116,7 @@ t-class-title | 标题样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
 --td-cell-group-border-color | @component-stroke | -
 --td-cell-group-title-bg-color | @bg-color-secondarycontainer | -