Merge remote-tracking branch 'origin/develop'

CHANGELOG.md

@@ -5,6 +5,18 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.4.3 `2024-09-26` 
+### 🚀 Features
+- `Radio`: 新增 `readonly`属性 ，配置只读  @liweijie0812 ([#1593](https://github.com/Tencent/tdesign-mobile-vue/pull/1593))
+- `RadioGroup`: `change`事件回调添加`name`属性 @liweijie0812 ([#1593](https://github.com/Tencent/tdesign-mobile-vue/pull/1593))
+- `ConfigProvider`: 支持全局配置修改全部组件的 `classPrefix`  @anlyyao ([#1596](https://github.com/Tencent/tdesign-mobile-vue/pull/1596))
+- `Input`: 支持 `format` 属性 @anlyyao ([#1602](https://github.com/Tencent/tdesign-mobile-vue/pull/1602))
+### 🐞 Bug Fixes
+- `Cell`: 修复部分 css vars 无效的问题 @anlyyao ([#1599](https://github.com/Tencent/tdesign-mobile-vue/pull/1599))
+- `Popup`: 修复 `destroyOnClose` 为 `true` 时动画无效的问题 @anlyyao ([#1600](https://github.com/Tencent/tdesign-mobile-vue/pull/1600))
+- `DropdownMenu`: 修复部分机型中向上展开样式错误 @anlyyao ([#1603](https://github.com/Tencent/tdesign-mobile-vue/pull/1603))
+- `Slider`: 修复在 `hidden` 元素中组件显示异常 @anlyyao ([#1604](https://github.com/Tencent/tdesign-mobile-vue/pull/1604))
+
 ## 🌈 1.4.2 `2024-09-13` 
 ### 🚀 Features
 - `AvatarGroup`: 新增  `shape` 属性，新增 `onCollapsedItemClick` 事件 @anlyyao ([#1571](https://github.com/Tencent/tdesign-mobile-vue/pull/1571))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-mobile-vue",
   "purename": "tdesign",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "tdesign-mobile-vue",
   "author": "TDesign Group",
   "homepage": "https://tdesign.tencent.com/mobile-vue/",

src/action-sheet/action-sheet-grid.tsx

@@ -1,11 +1,8 @@
 import { defineComponent, computed } from 'vue';
-import config from '../config';
 import { Grid as TGrid, GridItem as TGridItem } from '../grid';
 import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
 import { ActionSheetItem } from './type';
-
-const { prefix } = config;
-const name = `${prefix}-action-sheet`;
+import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
   components: { TGrid, TGridItem, TSwiper, TSwiperItem },
@@ -25,8 +22,12 @@ export default defineComponent({
   },
   emits: ['selected'],
   setup(props, { emit }) {
+    const actionSheetClass = usePrefixClass('action-sheet');
+
     const gridColumn = computed(() => Math.ceil(props.count / 2));
+
     const pageNum = computed(() => Math.ceil(props.items.length / props.count));
+
     const actionItems = computed(() => {
       const res: ActionSheetItem[][] = [];
       for (let i = 0; i < pageNum.value; i++) {
@@ -35,15 +36,17 @@ export default defineComponent({
       }
       return res;
     });
+
     const gridClasses = computed(() => ({
-      [`${name}__grid`]: true,
-      [`${name}__grid--swiper`]: pageNum.value > 1,
-      [`${name}__dots`]: pageNum.value > 1,
+      [`${actionSheetClass.value}__grid`]: true,
+      [`${actionSheetClass.value}__grid--swiper`]: pageNum.value > 1,
+      [`${actionSheetClass.value}__dots`]: pageNum.value > 1,
     }));
+
     const handleSelected = (i: number) => {
       emit('selected', i);
-      console.log('111', i);
     };
+
     return () => {
       const swiper = () => {
         const swiperItems = actionItems.value.map((items, i) => {
@@ -72,7 +75,7 @@ export default defineComponent({
               pagination-position="bottom"
               navigation={{ type: 'dots', showControls: false }}
               loop={false}
-              class={`${name}__swiper-wrap`}
+              class={`${actionSheetClass.value}__swiper-wrap`}
               height={192}
             >
               {swiperItems}

src/action-sheet/action-sheet-list.tsx

@@ -1,15 +1,11 @@
 import { computed, defineComponent, PropType, toRefs } from 'vue';
 import TButton from '../button';
 import TBadge from '../badge';
-import config from '../config';
 import { ActionSheetItem } from './type';
 import { useTNodeDefault } from '../hooks/tnode';
-
-const { prefix } = config;
-const name = `${prefix}-action-sheet`;
+import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  name,
   components: { TButton, TBadge },
   props: {
     items: {
@@ -23,15 +19,17 @@ export default defineComponent({
   },
   emits: ['selected'],
   setup(props, { emit }) {
+    const actionSheetClass = usePrefixClass('action-sheet');
+
     const renderTNodeJSX = useTNodeDefault();
 
     const { align, items } = toRefs(props);
     const handleSelected = (index: number) => {
       emit('selected', index);
     };
     const itemClasses = computed(() => ({
-      [`${name}__list-item`]: true,
-      [`${name}__list-item--left`]: align.value === 'left',
+      [`${actionSheetClass.value}__list-item`]: true,
+      [`${actionSheetClass.value}__list-item--left`]: align.value === 'left',
     }));
 
     return () => {
@@ -49,24 +47,24 @@ export default defineComponent({
                     size={item.badge.size}
                     offset={item.badge.offset || [-16, 20]}
                   >
-                    <span class={`${name}__list-item-text`}> {item.label}</span>
+                    <span class={`${actionSheetClass.value}__list-item-text`}> {item.label}</span>
                   </t-badge>
                 );
               }
               return renderTNodeJSX('badge', {
-                defaultNode: <span class={`${name}__list-item-text`}>{item.label}</span>,
+                defaultNode: <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>,
               });
             };
             return content();
           }
-          return <span class={`${name}__list-item-text`}>{item.label}</span>;
+          return <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>;
         };
         const buttonList = items.value.map((item, index) => (
           <t-button
             key={index}
             variant={'text'}
             block
-            class={[itemClasses.value, { [`${name}__list-item--disabled`]: item.disabled }]}
+            class={[itemClasses.value, { [`${actionSheetClass.value}__list-item--disabled`]: item.disabled }]}
             disabled={item.disabled}
             icon={item.icon}
             style={{ color: item.color }}
@@ -78,7 +76,7 @@ export default defineComponent({
         return buttonList;
       };
 
-      return <div class={`${name}__list`}>{renderButtonNode()}</div>;
+      return <div class={`${actionSheetClass.value}__list`}>{renderButtonNode()}</div>;
     };
   },
 });

src/action-sheet/action-sheet.tsx

@@ -7,13 +7,12 @@ import TButton from '../button';
 import config from '../config';
 import { TdActionSheetProps, ActionSheetItem } from './type';
 import props from './props';
-import { useConfig } from '../config-provider/useConfig';
+import { usePrefixClass, useConfig } from '../hooks/useClass';
 
 const { prefix } = config;
-const name = `${prefix}-action-sheet`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-action-sheet`,
   components: {
     TPopup,
     TButton,
@@ -23,6 +22,7 @@ export default defineComponent({
   props,
   emits: ['selected', 'update:modelValue', 'cancel', 'close', 'update:visible'],
   setup(props, context) {
+    const actionSheetClass = usePrefixClass('action-sheet');
     const { globalConfig } = useConfig('actionSheet');
 
     const actionItems = computed(() => {
@@ -42,12 +42,12 @@ export default defineComponent({
       'visible-change',
     );
     const rootClasses = computed(() => ({
-      [`${name}__content`]: true,
+      [`${actionSheetClass.value}__content`]: true,
     }));
     const descriptionClasses = computed(() => ({
-      [`${name}__description`]: true,
-      [`${name}__description--left`]: props.align === 'left',
-      [`${name}__description--grid`]: props.theme === 'grid',
+      [`${actionSheetClass.value}__description`]: true,
+      [`${actionSheetClass.value}__description--left`]: props.align === 'left',
+      [`${actionSheetClass.value}__description--grid`]: props.theme === 'grid',
     }));
     watch(
       () => currentVisible.value,
@@ -100,9 +100,9 @@ export default defineComponent({
         const cancel = () => {
           if (props.showCancel) {
             return (
-              <div class={`${name}__footer`}>
-                <div class={`${name}__gap-${props.theme}`}></div>
-                <t-button class={`${name}__cancel`} variant="text" block onClick={handleCancel}>
+              <div class={`${actionSheetClass.value}__footer`}>
+                <div class={`${actionSheetClass.value}__gap-${props.theme}`}></div>
+                <t-button class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
                   {props.cancelText || globalConfig.value.cancel}
                 </t-button>
               </div>
@@ -123,7 +123,7 @@ export default defineComponent({
           visible={currentVisible.value}
           placement="bottom"
           destroy-on-close={true}
-          class={name}
+          class={actionSheetClass.value}
           onClose={handleClose}
         >
           {root()}

src/avatar/avatar-group.tsx

@@ -7,10 +7,9 @@ import { usePrefixClass } from '../hooks/useClass';
 import { isValidSize } from '../_common/js/avatar/utils';
 
 const { prefix } = config;
-const name = `${prefix}-avatar-group`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-avatar-group`,
   props: AvatarGroupProps,
   setup(props) {
     const renderTNodeJSX = useTNodeJSX();

src/avatar/avatar.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject } from 'vue';
 import TBadge from '../badge';
 import TImage from '../image';
 import config from '../config';
@@ -9,10 +9,9 @@ import { usePrefixClass } from '../hooks/useClass';
 import { isValidSize } from '../_common/js/avatar/utils';
 
 const { prefix } = config;
-const name = `${prefix}-avatar`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-avatar`,
   props: AvatarProps,
   setup(props) {
     const renderTNodeJSX = useTNodeJSX();

src/badge/__test__/__snapshots__/demo.test.jsx.snap

@@ -634,8 +634,12 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
           <div
             class="t-cell__title"
           >
-            单行标题
-            <!---->
+            <div
+              class="t-cell__title-text"
+            >
+              单行标题
+              <!---->
+            </div>
             <!---->
           </div>
           <div
@@ -1044,8 +1048,12 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
     <div
       class="t-cell__title"
     >
-      单行标题
-      <!---->
+      <div
+        class="t-cell__title-text"
+      >
+        单行标题
+        <!---->
+      </div>
       <!---->
     </div>
     <div

src/badge/badge.tsx

@@ -7,16 +7,17 @@ import { usePrefixClass } from '../hooks/useClass';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
-const name = `${prefix}-badge`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-badge`,
   props: BadgeProps,
   setup(props) {
     const renderTNodeJSX = useTNodeJSX();
     const renderTNodeContent = useContent();
 
     const badgeClass = usePrefixClass('badge');
+    const classPrefix = usePrefixClass();
+
     // 徽标外层样式类
     const badgeClasses = computed(() => ({
       [`${badgeClass.value}`]: true,
@@ -30,7 +31,7 @@ export default defineComponent({
       [`${badgeClass.value}--${props.size}`]: true,
       [`${badgeClass.value}--${props.shape}`]: true,
       [`${badgeClass.value}--count`]: !props.dot && props.count,
-      [`${prefix}-has-count`]: true,
+      [`${classPrefix.value}-has-count`]: true,
     }));
 
     // 是否展示角标