Merge branch 'Tencent:develop' into develop

CHANGELOG.md

@@ -5,6 +5,25 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.8.0 `2025-01-22` 
+### 🚀 Features
+- `Input`: 新增 `cursorColor` 属性 @SkylerXie ([#1703](https://github.com/Tencent/tdesign-mobile-vue/pull/1703))
+- `Icon`:  更新图标库版本至 `0.3.4`，新增 `logo-alipay`、`logo-behance-filled` 等图标，修改 `logo-wecom` 图标，移除不合理的 `logo-wecom-filled` 图标 @anlyyao ([#1715](https://github.com/Tencent/tdesign-mobile-vue/pull/1715))
+- `ActionSheet`: 新增 `showOverlay` 和 `popupProps` 属性 @hensonjunyuan ([#1704](https://github.com/Tencent/tdesign-mobile-vue/pull/1704))
+- `Tabs`: 新增 `split` 和 `middle` 属性，并支持自动定位到激活项位置 @Faxxicy ([#1663](https://github.com/Tencent/tdesign-mobile-vue/pull/1663))  @novlan1 ([#1727](https://github.com/Tencent/tdesign-mobile-vue/pull/1727))
+- `TabPanel`: 新增 `icon` 属性 @novlan1 ([#1727](https://github.com/Tencent/tdesign-mobile-vue/pull/1727))
+- `Grid`: 新增 `hover` 属性 @novlan1 ([#1725](https://github.com/Tencent/tdesign-mobile-vue/pull/1725))
+- `GridItem`:  新增 `icon` 属性 @novlan1 ([#1725](https://github.com/Tencent/tdesign-mobile-vue/pull/1725))
+- `Search`: 新增  `clearTrigger` 属性 @novlan1 ([#1726](https://github.com/Tencent/tdesign-mobile-vue/pull/1726))
+### 🐞 Bug Fixes
+- `Tabs`: 当子项类型为 `fragment` 时，标签无法正确渲染 @betavs ([#1690](https://github.com/Tencent/tdesign-mobile-vue/pull/1690))
+- `Radio`: 当`value=0` 时无法被选中的问题 @RSS1102 ([#1709](https://github.com/Tencent/tdesign-mobile-vue/pull/1709))
+- `Checkbox`: 修复 `CheckGroup` 使用 `options` 属性时 `disabled` 无效的问题 @anlyyao ([#1713](https://github.com/Tencent/tdesign-mobile-vue/pull/1713))
+- `TabBar`: 修复子项数量大于 3 时子项宽度未保持一致 @anlyyao ([#1714](https://github.com/Tencent/tdesign-mobile-vue/pull/1714))
+- `Dialog`: 修复圆角样式错误，并新增 `--td-dialog-border-radius` @anlyyao ([#1733](https://github.com/Tencent/tdesign-mobile-vue/pull/1733))
+- `Popup`: 修复圆角错误，并新增 `--td-popup-close-btn-color` @anlyyao ([#1734](https://github.com/Tencent/tdesign-mobile-vue/pull/1734))
+- `Cell`: 修复部分样式错误，并更新 `align` 属性描述 @liweijie0812 ([#1731](https://github.com/Tencent/tdesign-mobile-vue/pull/1731))
+
 ## 🌈 1.7.0 `2024-12-19` 
 ### 🚀 Features
 - `IDE`: 增加 `Volar`、`WebStorm` 提示文件 @liweijie0812 ([#1682](https://github.com/Tencent/tdesign-mobile-vue/pull/1682))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-mobile-vue",
   "purename": "tdesign",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "tdesign-mobile-vue",
   "author": "TDesign Group",
   "homepage": "https://tdesign.tencent.com/mobile-vue/",
@@ -92,7 +92,7 @@
     "@vueuse/core": "10.7.0",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
-    "tdesign-icons-vue-next": "^0.3.3",
+    "tdesign-icons-vue-next": "^0.3.4",
     "validator": "^13.5.1"
   },
   "peerDependencies": {
@@ -173,9 +173,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "rollup-pluginutils": "^2.8.2",
-    "tdesign-icons-view": "^0.3.2",
-    "tdesign-publish-cli": "^0.0.10",
-    "tdesign-site-components": "^0.15.2",
+    "tdesign-icons-view": "^0.3.4",
+    "tdesign-publish-cli": "^0.0.12",
+    "tdesign-site-components": "^0.15.6",
     "tslib": "^2.3.1",
     "typescript": "~4.7.2",
     "vite": "^2.9.14",

scripts/test/snap-setup.js

@@ -1,6 +1,6 @@
 import { config } from '@vue/test-utils';
 import { createApp } from 'vue';
-import { renderToString } from '@vue/server-renderer';
+import { renderToString } from 'vue/server-renderer';
 import TDesign from '@/index';
 import DemoBlock from '../../site/mobile/components/demo-block.vue';
 

site/web/stackblitz/content.ts

@@ -50,9 +50,10 @@ export const stackblitzRc = `
 export const viteConfigContent = `
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
+  import vueJsx from '@vitejs/plugin-vue-jsx';
 
   export default defineConfig({
-    plugins: [vue()],
+    plugins: [vue(), vueJsx()],
   });
 `;
 
@@ -75,7 +76,8 @@ export const packageJSONContent = JSON.stringify(
       vite: orgPkg.devDependencies.vite,
       '@vue/compiler-sfc': orgPkg.devDependencies['@vue/compiler-sfc'],
       '@vitejs/plugin-vue': orgPkg.devDependencies['@vitejs/plugin-vue'],
-      'less': orgPkg.devDependencies['less']
+      '@vitejs/plugin-vue-jsx': orgPkg.devDependencies['@vitejs/plugin-vue-jsx'],
+      less: orgPkg.devDependencies['less'],
     },
   },
   null,

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

@@ -5,7 +5,6 @@ import { ActionSheetItem } from './type';
 import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  components: { TGrid, TGridItem, TSwiper, TSwiperItem },
   props: {
     items: {
       type: Array<ActionSheetItem>,
@@ -51,7 +50,7 @@ export default defineComponent({
       const swiper = () => {
         const swiperItems = actionItems.value.map((items, i) => {
           const gridItems = items.map((item, index) => (
-            <t-grid-item
+            <TGridItem
               key={index}
               text={item.label}
               image={item.icon}
@@ -63,14 +62,14 @@ export default defineComponent({
             />
           ));
           return (
-            <t-swiper-item key={i}>
-              <t-grid column={gridColumn.value}>{gridItems}</t-grid>
-            </t-swiper-item>
+            <TSwiperItem key={i}>
+              <TGrid column={gridColumn.value}>{gridItems}</TGrid>
+            </TSwiperItem>
           );
         });
         if (actionItems.value.length > 1) {
           return (
-            <t-swiper
+            <TSwiper
               autoplay={false}
               pagination-position="bottom"
               navigation={{ type: 'dots', showControls: false }}
@@ -79,15 +78,15 @@ export default defineComponent({
               height={192}
             >
               {swiperItems}
-            </t-swiper>
+            </TSwiper>
           );
         }
         return null;
       };
       const grid = () => {
         if (actionItems.value.length === 1) {
           const items = actionItems.value[0].map((item, index) => (
-            <t-grid-item
+            <TGridItem
               key={index}
               text={item.label}
               image={item.icon}
@@ -96,7 +95,7 @@ export default defineComponent({
             />
           ));
 
-          return <t-grid column={gridColumn.value}>{items}</t-grid>;
+          return <TGrid column={gridColumn.value}>{items}</TGrid>;
         }
         return null;
       };

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

@@ -6,7 +6,6 @@ import { useTNodeDefault } from '../hooks/tnode';
 import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  components: { TButton, TBadge },
   props: {
     items: {
       type: Array as PropType<ActionSheetItem[]>,
@@ -39,7 +38,7 @@ export default defineComponent({
             const content = () => {
               if (item.badge.dot || item.badge.count) {
                 return (
-                  <t-badge
+                  <TBadge
                     count={item.badge.count}
                     max-count={item.badge.maxCount || 99}
                     dot={item.badge.dot}
@@ -48,7 +47,7 @@ export default defineComponent({
                     offset={item.badge.offset || [-16, 20]}
                   >
                     <span class={`${actionSheetClass.value}__list-item-text`}> {item.label}</span>
-                  </t-badge>
+                  </TBadge>
                 );
               }
               return renderTNodeJSX('badge', {
@@ -60,7 +59,7 @@ export default defineComponent({
           return <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>;
         };
         const buttonList = items.value.map((item, index) => (
-          <t-button
+          <TButton
             key={index}
             variant={'text'}
             block
@@ -71,7 +70,7 @@ export default defineComponent({
             onClick={() => handleSelected(index)}
           >
             {renderBadgeNode(item)}
-          </t-button>
+          </TButton>
         ));
         return buttonList;
       };

src/action-sheet/action-sheet.en-US.md

@@ -6,13 +6,15 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：center/left | N
+align | String | center | options: center/left | N
 cancelText | String | - | \- | N
 count | Number | 8 | \- | N
 description | String | - | \- | N
-items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+items | Array | - | Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | \- | N
-theme | String | list | options：list/grid | N
+showOverlay | Boolean | true | \- | N
+theme | String | list | options: list/grid | N
 visible | Boolean | false | required。`v-model` and `v-model:visible` is supported | Y
 defaultVisible | Boolean | false | required。uncontrolled property | Y
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -27,8 +29,8 @@ cancel | `(context: { e: MouseEvent })` | \-
 close | `(trigger: ActionSheetTriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +45,4 @@ Name | Default Value | Description
 --td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
 --td-action-sheet-list-item-height | 56px | - 
 --td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-text-weight | 400 | -

src/action-sheet/action-sheet.md

@@ -1,16 +1,19 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ActionSheet Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | center | 水平对齐方式。可选项：center/left | N
 cancelText | String | - | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
 description | String | - | 动作面板描述文字 | N
-items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+items | Array | - | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | 是否显示取消按钮 | N
+showOverlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏。支持语法糖 `v-model` 或 `v-model:visible` | Y
 defaultVisible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
@@ -26,8 +29,8 @@ cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
 close | `(trigger: ActionSheetTriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -42,4 +45,4 @@ selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单
 --td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
 --td-action-sheet-list-item-height | 56px | - 
 --td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-text-weight | 400 | -

src/action-sheet/action-sheet.tsx

@@ -1,32 +1,26 @@
-import { watch, defineComponent, computed } from 'vue';
-import { useDefault } from '../shared';
-import ActionSheetList from './action-sheet-list';
-import ActionSheetGrid from './action-sheet-grid';
-import TPopup from '../popup';
+import { computed, defineComponent, watch } from 'vue';
+import TActionSheetGrid from './action-sheet-grid';
+import TActionSheetList from './action-sheet-list';
 import TButton from '../button';
+import TPopup from '../popup';
 import config from '../config';
-import { TdActionSheetProps, ActionSheetItem } from './type';
+import { useConfig, usePrefixClass } from '../hooks/useClass';
+import { useDefault } from '../shared';
 import props from './props';
-import { usePrefixClass, useConfig } from '../hooks/useClass';
+import { ActionSheetItem, TdActionSheetProps } from './type';
 
 const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-action-sheet`,
-  components: {
-    TPopup,
-    TButton,
-    ActionSheetList,
-    ActionSheetGrid,
-  },
   props,
   emits: ['selected', 'update:modelValue', 'cancel', 'close', 'update:visible'],
   setup(props, context) {
     const actionSheetClass = usePrefixClass('action-sheet');
     const { globalConfig } = useConfig('actionSheet');
 
     const actionItems = computed(() => {
-      return props.items.map((item: String | ActionSheetItem) => {
+      return props.items.map((item: string | ActionSheetItem) => {
         if (typeof item === 'string') {
           return {
             label: item,
@@ -89,22 +83,22 @@ export default defineComponent({
         };
         const list = () => {
           if (props.theme === 'list') {
-            return <action-sheet-list align={props.align} items={actionItems.value} onSelected={handleSelected} />;
+            return <TActionSheetList align={props.align} items={actionItems.value} onSelected={handleSelected} />;
           }
         };
         const grid = () => {
           if (props.theme === 'grid') {
-            return <action-sheet-grid items={actionItems.value} count={props.count} onSelected={handleSelected} />;
+            return <TActionSheetGrid items={actionItems.value} count={props.count} onSelected={handleSelected} />;
           }
         };
         const cancel = () => {
           if (props.showCancel) {
             return (
               <div class={`${actionSheetClass.value}__footer`}>
                 <div class={`${actionSheetClass.value}__gap-${props.theme}`}></div>
-                <t-button class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
+                <TButton class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
                   {props.cancelText || globalConfig.value.cancel}
-                </t-button>
+                </TButton>
               </div>
             );
           }
@@ -119,15 +113,17 @@ export default defineComponent({
         );
       };
       return (
-        <t-popup
+        <TPopup
+          {...(props.popupProps as TdActionSheetProps['popupProps'])}
           visible={currentVisible.value}
           placement="bottom"
           destroy-on-close={true}
           class={actionSheetClass.value}
           onClose={handleClose}
+          showOverlay={props.showOverlay}
         >
           {root()}
-        </t-popup>
+        </TPopup>
       );
     };
   },

src/action-sheet/props.ts

@@ -35,14 +35,22 @@ export default {
   /** 菜单项 */
   items: {
     type: Array as PropType<TdActionSheetProps['items']>,
-    default: [],
-    required: true,
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object as PropType<TdActionSheetProps['popupProps']>,
+    default: () => ({}),
   },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,
     default: true,
   },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
   /** 展示类型，列表和表格形式展示 */
   theme: {
     type: String as PropType<TdActionSheetProps['theme']>,