@tdesign/uniapp 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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

package/README.md

@@ -145,7 +145,7 @@ 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 |
 

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

package/dist/avatar/avatar.vue

@@ -4,7 +4,7 @@
       classPrefix + '__wrapper',
       tClass
     ]"
-    :style="tools._style([utils.getStyles(isShow), customStyle, innerStyle])"
+    :style="'' + tools._style([utils.getStyles(isShow), customStyle, innerStyle])"
   >
     <t-badge
       v-if="badgeProps"
@@ -26,7 +26,7 @@
           utils.getClass(classPrefix, dataSize || 'medium', dataShape, dataBordered),
           tClassImage
         ]"
-        :style="utils.getSize(dataSize, windowWidth)"
+        :style="'' + utils.getSize(dataSize, windowWidth)"
         :aria-label="ariaLabel || alt || '头像'"
         :aria-role="ariaRole || 'img'"
         :aria-hidden="ariaHidden"
@@ -92,109 +92,111 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-avatar`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-image`,
-    `${prefix}-class-icon`,
-    `${prefix}-class-alt`,
-    `${prefix}-class-content`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
+export default {
   components: {
     TIcon,
     TBadge,
     TImage,
   },
-  props: {
-    ...avatarProps,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      isShow: true,
-      zIndex: 0,
-      windowWidth: systemInfo.windowWidth,
-      utils,
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-image`,
+      `${prefix}-class-icon`,
+      `${prefix}-class-alt`,
+      `${prefix}-class-content`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
+    props: {
+      ...avatarProps,
+    },
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        isShow: true,
+        zIndex: 0,
+        windowWidth: systemInfo.windowWidth,
+        utils,
+        tools,
 
-      iconName: '',
-      iconData: {},
+        iconName: '',
+        iconData: {},
 
-      dataShape: this.shape,
-      dataSize: this.size,
-      dataBordered: this.bordered,
-      innerStyle: '',
-    };
-  },
-  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)',
+        dataShape: this.shape,
+        dataSize: this.size,
+        dataBordered: this.bordered,
+        innerStyle: '',
       };
-
-      return tools._style([
-        {
-          fontSize: this.iconData.size
-            ? addUnit(this.iconData.size)
-            : fontSize[this.dataSize],
-        },
-        this.iconData.style || '',
-      ]);
-    },
-    imageCustomStyle() {
-      return tools._style([
-        {
-          width: '100%',
-          height: '100%',
-        },
-        this.imageProps?.style || '',
-      ]);
     },
-  },
-  watch: {
-    icon: {
-      handler(t) {
-        const obj = setIcon('icon', t, '');
+    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)',
+        };
 
-        Object.keys(obj).forEach((key) => {
-          this[key] = obj[key];
-        });
+        return tools._style([
+          {
+            fontSize: this.iconData.size
+              ? addUnit(this.iconData.size)
+              : fontSize[this.dataSize],
+          },
+          this.iconData.style || '',
+        ]);
+      },
+      imageCustomStyle() {
+        return tools._style([
+          {
+            width: '100%',
+            height: '100%',
+          },
+          this.imageProps?.style || '',
+        ]);
       },
-      immediate: true,
     },
+    watch: {
+      icon: {
+        handler(t) {
+          const obj = setIcon('icon', t, '');
 
-  },
-  mounted() {
+          Object.keys(obj).forEach((key) => {
+            this[key] = obj[key];
+          });
+        },
+        immediate: true,
+      },
 
-  },
-  methods: {
-    innerAfterLinked() {
-      this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
-      this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
-      this.dataBordered = true;
     },
-    hide() {
-      this.isShow = false;
+    mounted() {
+
     },
-    onLoadError(e) {
-      if (this.hideOnLoadFailed) {
+    methods: {
+      innerAfterLinked() {
+        this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
+        this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
+        this.dataBordered = true;
+      },
+      hide() {
         this.isShow = false;
-      }
-      this.$emit('error', e && e.e);
-    },
-    setStyle(val = '') {
-      this.innerStyle = val;
+      },
+      onLoadError(e) {
+        if (this.hideOnLoadFailed) {
+          this.isShow = false;
+        }
+        this.$emit('error', e && e.e);
+      },
+      setStyle(val = '') {
+        this.innerStyle = val;
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./avatar.css"></style>