@tdesign/uniapp 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -5,6 +5,37 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 0.8.0 `2026-03-23`
+
+### 🚨 Breaking Changes
+
+- `DateTimePicker`: 废弃 `custom-locale` 属性，请用 `ConfigProvider` 替换该功能 @novlan1 ([#4350](https://github.com/Tencent/tdesign-miniprogram/pull/4350))
+
+### 🚀 Features
+
+- `Cascader`: 新增 `PopupProps` 属性，透传至 `Popup` @novlan1 ([#4320](https://github.com/Tencent/tdesign-miniprogram/pull/4320))
+- `ConfigProvider`: 新增 `ConfigProvider` 全局特性配置组件 @novlan1 ([#4350](https://github.com/Tencent/tdesign-miniprogram/pull/4350))
+- `Picker`: 支持 `v-model:value` 语法糖 @novlan1 ([#4320](https://github.com/Tencent/tdesign-miniprogram/pull/4320))
+
+### 🐞 Bug Fixes
+
+- `ColorPicker`: 修复弹窗模式下预设颜色（swatch-colors）无法横向滚动 @novlan1 ([#4350](https://github.com/Tencent/tdesign-miniprogram/pull/4350))
+- `DateTimePicker`: 修复 `format` 含非日期 `token`（如 `ddd`）时，格式化后的值回传导致 `Invalid Date` 的问题 @novlan1 ([#4320](https://github.com/Tencent/tdesign-miniprogram/pull/4320))
+- `Form`: 修复 `required-mark` 无效问题 @novlan1 ([#4350](https://github.com/Tencent/tdesign-miniprogram/pull/4350))
+- `Tabs`: 修复开启 `animation` 和 `lazy` 时，跳跃切换选项卡内容区域显示异常的问题 @novlan1 ([#4350](https://github.com/Tencent/tdesign-miniprogram/pull/4350))
+- `Toast`: 修复 `setup` 语法下，函数式调用时找不到实例的问题 @novlan1 ([#4312](https://github.com/Tencent/tdesign-miniprogram/pull/4312))
+- `Upload`: 
+  - 修复 `@upload-disabled-mask` 变量默认值错误 @anlyyao ([#4303](https://github.com/Tencent/tdesign-miniprogram/pull/4303))
+  - 修复 H5 环境下回调中 URL 错误问题 @novlan1 ([#4320](https://github.com/Tencent/tdesign-miniprogram/pull/4320))
+
+## 🌈 0.7.3 `2026-03-04`
+
+### 🐞 Bug Fixes
+
+- `Button`: 去除多余动画效果 @novlan1 ([#4305](https://github.com/Tencent/tdesign-miniprogram/pull/4305))
+- `Dialog`: 修复确认/取消按钮不显示问题 @novlan1 ([#4305](https://github.com/Tencent/tdesign-miniprogram/pull/4305))
+- `Theme`: 修复 `index.css` 尺寸值错误的问题 @liweijie0812 ([#4290](https://github.com/Tencent/tdesign-miniprogram/pull/4290))
+
 ## 🌈 0.7.2 `2026-02-26`
 
 ### 🚀 Features

package/README.md

@@ -54,13 +54,21 @@ npm i @tdesign/uniapp
 1. 在 `main.ts` 中引入样式文件
 
 ```js
+// CLI 模式
 import '@tdesign/uniapp/common/style/theme/index.css';
+
+// HBuilderX 模式
+// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.css';
 ```
 
 也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
 
 ```js
+// CLI 模式
 import '@tdesign/uniapp/common/style/theme/index.less';
+
+// HBuilderX 模式
+// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.less';
 ```
 
 2. 在文件中使用
@@ -113,7 +121,17 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 
 安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
 
-推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/@tdesign/uniapp/global.d.ts`，即可实现该效果。
+推荐安装 [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 插件，并在项目的 `tsconfig.json` 的 `compilerOptions.types` 属性中增加 `@tdesign/uniapp/global`，即可实现提示效果。
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@tdesign/uniapp/global",
+    ]
+  }
+}
+```
 
 ## 平台兼容性
 
@@ -127,12 +145,24 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 
 ## 浏览器兼容性
 
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> iOS Safari| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |[<img src="https://user-images.githubusercontent.com/51158141/189169679-71e045f6-9b9b-4baf-8b9f-e045a40216f5.png" alt="Android Browser" width="24px" height="24px" />]()<br/>Android Browser|
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> iOS Safari| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |<img src="https://user-images.githubusercontent.com/51158141/189169679-71e045f6-9b9b-4baf-8b9f-e045a40216f5.png" alt="Android Browser" width="24px" height="24px" /><br/>Android Browser|
 | --------- | --------- | --------- | --------- | --------- |--------- |
 | Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
 
 详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
 
+## 模板项目
+
+我们提供了多种开箱即用的模板项目，帮助你快速开始开发。
+
+| 模板 | 描述 | 预览 |
+| --- | --- | --- |
+| [TDesign UniApp Starter](https://github.com/TDesignOteam/tdesign-uniapp-starter/) | Vue3 + CLI 模式模板 - 通用类 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-h5.png" height="100" /> |
+| [TDesign UniApp Starter Apply](https://github.com/TDesignOteam/tdesign-uniapp-starter-apply/) | Vue3 + CLI 模式模板 - 活动报名 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-apply-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue3 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue3-hx/) | Vue3 + HBuilderX 模式模板 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue3-hx-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue2 CLI](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-cli/) | Vue2 + CLI 模式模板 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-cli-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue2 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-hx/) | Vue2 + HBuilderX 模式模板 |<img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-hx-h5.png" height="100" /> |
+
 ## 反馈
 
 有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-miniprogram/issues) 反馈或扫码加入用户微信群。

package/dist/action-sheet/README.md

@@ -1,7 +1,7 @@
 ---
 title: ActionSheet 动作面板
 description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
-spline: data
+spline: message
 isComponent: true
 ---
 

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

@@ -1,8 +1,8 @@
 <template>
   <view
     :id="classPrefix"
-    :style="tools._style([rootCustomStyle])"
-    :class="tools.cls(classPrefix, [dataAlign, dataTheme, ['no-description', !description]]) + ' ' + tClass"
+    :style="'' + tools._style([rootCustomStyle])"
+    :class="'' + tools.cls(classPrefix, [dataAlign, dataTheme, ['no-description', !description]]) + ' ' + tClass"
   >
     <t-popup
       :visible="dataVisible"
@@ -44,7 +44,7 @@
                 :description="item.description || ''"
                 :image="item.image || ''"
                 :style="'--td-grid-item-text-color: ' + item.color"
-                @click="onSelect($event, { index })"
+                @click="(e) => onSelect(e, { index })"
               />
             </t-grid>
           </block>
@@ -78,7 +78,7 @@
                       :description="item.description || ''"
                       :image="item.image || ''"
                       :style="'--td-grid-item-text-color: ' + item.color"
-                      @click="onSelect($event, { index })"
+                      @click="(e) => onSelect(e, { index })"
                     />
                   </t-grid>
                 </swiper-item>
@@ -107,7 +107,7 @@
             <view
               :data-index="index"
               :style="item.color ? 'color: ' + item.color : ''"
-              :class="tools.cls(classPrefix + '__list-item', [['disabled', item.disabled]])"
+              :class="'' + tools.cls(classPrefix + '__list-item', [['disabled', item.disabled]])"
               :aria-role="ariaRole || 'button'"
               :aria-label="item.label || item"
               tabindex="0"
@@ -166,7 +166,7 @@
           aria-role="button"
           @click="onCancel"
         >
-          {{ dataCancelText || '取消' }}
+          {{ dataCancelText || globalConfig.cancel }}
         </view>
       </view>
     </t-popup>
@@ -185,181 +185,189 @@ import props from './props';
 import useCustomNavbar from '../mixins/using-custom-navbar';
 import tools from '../common/utils.wxs';
 import { getFunctionalMixin } from '../common/functional/mixin';
+import usingConfig from '../mixins/using-config';
 import { getIconData } from './computed';
 
-const name = `${prefix}-action-sheet`;
+const componentName = 'action-sheet';
+const name = `${prefix}-${componentName}`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [{
-    key: 'visible',
-    event: 'visible-change',
-  }],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-    `${prefix}-class-cancel`,
-  ],
-  mixins: [getFunctionalMixin(props), useCustomNavbar],
+export default {
   components: {
     TIcon,
     TPopup,
     TGrid,
     TGridItem,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'visible-change',
-    'update:visible',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      gridThemeItems: [],
-      currentSwiperIndex: 0,
-      defaultOverlayProps: {},
-      defaultPopUpzIndex: 11500,
-      tools,
-
-      heightStyle: 'height: 456rpx;',
-    };
-  },
-  computed: {
-    rootCustomStyle() {
-      return tools._style([
-        this.customStyle,
-        this.dataTheme === 'grid' ? 'padding-bottom: 16rpx' : '',
-      ]);
-    },
-    iconCustomStyle() {
-      return 'margin-right: 8px;';
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    suffixIconCustomStyle() {
-      return 'margin-right: 8px;margin-left: auto;';
+    controlledProps: [{
+      key: 'visible',
+      event: 'visible-change',
+    }],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+      `${prefix}-class-cancel`,
+    ],
+    mixins: [
+      getFunctionalMixin(props),
+      useCustomNavbar,
+      usingConfig({ componentName }),
+    ],
+    props: {
+      ...props,
     },
-    gridStyle() {
-      return `${this.heightStyle}padding-bottom: 48rpx;`;
+    emits: [
+      'visible-change',
+      'update:visible',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        gridThemeItems: [],
+        currentSwiperIndex: 0,
+        defaultOverlayProps: {},
+        defaultPopUpzIndex: 11500,
+        tools,
+
+        heightStyle: 'height: 456rpx;',
+      };
     },
-  },
-  watch: {
-    dataVisible: {
-      handler(e) {
-        if (e) {
-          this.init();
-        }
+    computed: {
+      rootCustomStyle() {
+        return tools._style([
+          this.customStyle,
+          this.dataTheme === 'grid' ? 'padding-bottom: 16rpx' : '',
+        ]);
       },
-      immediate: true,
-    },
-    dataItems: {
-      handler() {
-        if (this.dataVisible) {
-          this.init();
-        }
+      iconCustomStyle() {
+        return 'margin-right: 8px;';
+      },
+      suffixIconCustomStyle() {
+        return 'margin-right: 8px;margin-left: auto;';
+      },
+      gridStyle() {
+        return `${this.heightStyle}padding-bottom: 48rpx;`;
       },
-      immediate: true,
     },
-  },
-  methods: {
-    init() {
-      this.memoInitialData();
-      this.splitGridThemeActions();
+    watch: {
+      dataVisible: {
+        handler(e) {
+          if (e) {
+            this.init();
+          }
+        },
+        immediate: true,
+      },
+      dataItems: {
+        handler() {
+          if (this.dataVisible) {
+            this.init();
+          }
+        },
+        immediate: true,
+      },
     },
+    methods: {
+      init() {
+        this.memoInitialData();
+        this.splitGridThemeActions();
+      },
 
-    getIconData,
+      getIconData,
 
-    memoInitialData() {
-      this.initialData = {
-      };
-    },
-
-    splitGridThemeActions() {
-      if (this.dataTheme !== actionSheetTheme.Grid) return;
-      this.gridThemeItems = chunk(this.dataItems, this.dataCount);
-    },
+      memoInitialData() {
+        this.initialData = {
+        };
+      },
 
-    /** 指令调用显示 */
-    show(options) {
-      const defaultOptions = [
-        'align',
-        'cancelText',
-        'count',
-        'description',
-        'items',
-        'popupProps',
-        'showCancel',
-        'showOverlay',
-        'theme',
-        'usingCustomNavbar',
-      ].reduce((acc, key) => ({
-        ...acc,
-        [key]: props[key].default,
-      }));
+      splitGridThemeActions() {
+        if (this.dataTheme !== actionSheetTheme.Grid) return;
+        this.gridThemeItems = chunk(this.dataItems, this.dataCount);
+      },
 
-      this.setData({
-        ...defaultOptions,
-        ...options,
-        visible: true,
-      });
-      this.splitGridThemeActions();
-      this.autoClose = true;
-      this._trigger('visible-change', { visible: true });
-    },
+      /** 指令调用显示 */
+      show(options) {
+        const defaultOptions = [
+          'align',
+          'cancelText',
+          'count',
+          'description',
+          'items',
+          'popupProps',
+          'showCancel',
+          'showOverlay',
+          'theme',
+          'usingCustomNavbar',
+        ].reduce((acc, key) => ({
+          ...acc,
+          [key]: props[key].default,
+        }));
 
-    /** 指令调用隐藏 */
-    close() {
-      this.$emit('close', { trigger: 'command' });
-      this._trigger('visible-change', { visible: false });
-    },
+        this.setData({
+          ...defaultOptions,
+          ...options,
+          visible: true,
+        });
+        this.splitGridThemeActions();
+        this.autoClose = true;
+        this._trigger('visible-change', { visible: true });
+      },
 
-    /** 默认点击遮罩关闭 */
-    onPopupVisibleChange(detail) {
-      if (!detail.visible) {
-        this.$emit('close', { trigger: 'overlay' });
+      /** 指令调用隐藏 */
+      close() {
+        this.$emit('close', { trigger: 'command' });
         this._trigger('visible-change', { visible: false });
-      }
-      if (this.autoClose) {
-        this.dataVisible = false;
-        this.autoClose = false;
-      }
-    },
+      },
 
-    onSwiperChange(e) {
-      const { current } = e.detail;
-      this.currentSwiperIndex = current;
-    },
+      /** 默认点击遮罩关闭 */
+      onPopupVisibleChange(detail) {
+        if (!detail.visible) {
+          this.$emit('close', { trigger: 'overlay' });
+          this._trigger('visible-change', { visible: false });
+        }
+        if (this.autoClose) {
+          this.dataVisible = false;
+          this.autoClose = false;
+        }
+      },
 
-    onSelect(event, { index }) {
-      const { currentSwiperIndex, dataItems, gridThemeItems, dataCount, dataTheme } = this;
-      const isSwiperMode = dataTheme === actionSheetTheme.Grid;
-      const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : dataItems[index];
-      const realIndex = isSwiperMode ? index + currentSwiperIndex * dataCount : index;
+      onSwiperChange(e) {
+        const { current } = e.detail;
+        this.currentSwiperIndex = current;
+      },
 
-      if (item) {
-        this.$emit('selected', { selected: item, index: realIndex });
+      onSelect(event, { index }) {
+        const { currentSwiperIndex, dataItems, gridThemeItems, dataCount, dataTheme } = this;
+        const isSwiperMode = dataTheme === actionSheetTheme.Grid;
+        const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : dataItems[index];
+        const realIndex = isSwiperMode ? index + currentSwiperIndex * dataCount : index;
 
-        if (!item.disabled) {
-          this.$emit('close', { trigger: 'select' });
-          this._trigger('visible-change', { visible: false });
+        if (item) {
+          this.$emit('selected', { selected: item, index: realIndex });
+
+          if (!item.disabled) {
+            this.$emit('close', { trigger: 'select' });
+            this._trigger('visible-change', { visible: false });
+          }
         }
-      }
-    },
+      },
 
-    onCancel() {
-      this.$emit('cancel');
-      if (this.autoClose) {
-        this.dataVisible = false;
-        this.autoClose = false;
-      }
+      onCancel() {
+        this.$emit('cancel');
+        if (this.autoClose) {
+          this.dataVisible = false;
+          this.autoClose = false;
+        }
+      },
     },
-  },
-});
+  }),
+};
 </script>
 
 <style scoped src="./action-sheet.css"></style>

package/dist/action-sheet/props.ts

@@ -63,8 +63,8 @@ export default {
   usingCustomNavbar: Boolean,
   /** 显示与隐藏 */
   visible: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdActionSheetProps['visible'],
   },
   /** 显示与隐藏，非受控属性 */
   defaultVisible: Boolean,

package/dist/action-sheet/type.ts

@@ -61,7 +61,7 @@ export interface TdActionSheetProps {
    * 显示与隐藏
    * @default false
    */
-  visible?: boolean;
+  visible?: boolean | null;
   /**
    * 显示与隐藏，非受控属性
    * @default false