Merge branch 'develop' into ci/pkg.pr.new

CHANGELOG.md

@@ -5,6 +5,29 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.8.2 `2025-02-19` 
+### 🐞 Bug Fixes
+- `Tabbar`: 修复控制台告警，优化子节点数量更新逻辑 @anlyyao ([#1767](https://github.com/Tencent/tdesign-mobile-vue/pull/1767))
+- `Picker`: 修复 `columns` 为异步数据时，子项无法选中的问题 @anlyyao ([#1769](https://github.com/Tencent/tdesign-mobile-vue/pull/1769))
+
+## 🌈 1.8.1 `2025-02-18` 
+### 🚀 Features
+- `Calendar`: 新增 `switchMode` 属性 @novlan1 ([#1744](https://github.com/Tencent/tdesign-mobile-vue/pull/1744))
+- `CheckboxGroup`: 增加 `keys` 和 `readonly` 属性 @anlyyao ([#1749](https://github.com/Tencent/tdesign-mobile-vue/pull/1749))
+- `Cascader`: 增强 `keys` 属性能力，类型更新为 `TreeKeysType`；`pick` 事件返回值增加 `label` @anlyyao ([#1749](https://github.com/Tencent/tdesign-mobile-vue/pull/1749))
+- `Radio`: 增强 `keys` 属性能力 @anlyyao ([#1749](https://github.com/Tencent/tdesign-mobile-vue/pull/1749))
+- `DropdownItem`: 增强 `keys` 属性能力 @anlyyao ([#1749](https://github.com/Tencent/tdesign-mobile-vue/pull/1749))
+- `Picker`:  新增 `keys` 属性 @anlyyao ([#1757](https://github.com/Tencent/tdesign-mobile-vue/pull/1757))
+- `CheckboxGroup`: 新增 `borderless` 属性 @novlan1 ([#1752](https://github.com/Tencent/tdesign-mobile-vue/pull/1752))
+- `Fab`: 增强 `draggable` 属性能力，并新增 `yBounds` 属性 @novlan1 ([#1751](https://github.com/Tencent/tdesign-mobile-vue/pull/1751))
+- `Picker`: 补充禁用项逻辑 @anlyyao ([#1763](https://github.com/Tencent/tdesign-mobile-vue/pull/1763))
+### 🐞 Bug Fixes
+- `Tabs`: 修复 `vModel` 无效 @anlyyao ([#1748](https://github.com/Tencent/tdesign-mobile-vue/pull/1748))
+- `Slider`: 修复 `marks` 响应式无效 @liweijie0812 ([#1739](https://github.com/Tencent/tdesign-mobile-vue/pull/1739))
+- `DropdownMenu`: 解决收起状态下 `onMenuClosed` 仍被触发的问题 @anlyyao ([#1755](https://github.com/Tencent/tdesign-mobile-vue/pull/1755))
+- `Search`: 修复 `action-click` 事件无效 @anlyyao ([#1764](https://github.com/Tencent/tdesign-mobile-vue/pull/1764))
+
+
 ## 🌈 1.8.0 `2025-01-22` 
 ### 🚀 Features
 - `Input`: 新增 `cursorColor` 属性 @SkylerXie ([#1703](https://github.com/Tencent/tdesign-mobile-vue/pull/1703))

package.json

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

site/docs.config.js

@@ -42,6 +42,22 @@ export const docs = [
         component: () => import('@/config-provider/config-provider.md'),
         componentEn: () => import('@/config-provider/config-provider.en-US.md'),
       },
+      {
+        title: '自定义主题',
+        titleEn: 'Theme Customization',
+        name: 'custom-theme',
+        path: '/mobile-vue/custom-theme',
+        component: () => import('@/_common/docs/mobile/theme.md'),
+        componentEn: () => import('@/_common/docs/mobile/theme.en-US.md'),
+      },
+      {
+        title: '暗黑模式',
+        titleEn: 'Dark Mode',
+        name: 'dark-mode',
+        path: '/mobile-vuet/dark-mode',
+        component: () => import('@/_common/dark-mode.md'),
+        componentEn: () => import('@/_common/dark-mode.en-US.md'),
+      },
     ],
   },
   {

src/calendar/template.tsx

@@ -300,71 +300,70 @@ export default defineComponent({
       }
       return className;
     };
-    return () => {
-      const renderCell = (dateItem: TDate) => {
-        const cell = renderTNodeJSX('cell', { params: { item: dateItem } });
-        if (cell) {
-          return cell;
-        }
-        let className = `${calendarClass.value}__dates-item-suffix`;
-        if (dateItem.type) {
-          className = `${className} ${calendarClass.value}__dates-item-suffix--${dateItem.type}`;
-        }
-        return (
-          <>
-            {dateItem.prefix && <div class={`${calendarClass.value}__dates-item-prefix`}>{dateItem.prefix}</div>}
-            {dateItem.day}
-            {dateItem.suffix && <div class={className}>{dateItem.suffix}</div>}
-          </>
-        );
-      };
-      const className = usePopup.value
-        ? `${calendarClass.value} ${calendarClass.value}--popup`
-        : `${calendarClass.value}`;
-
-      const renderConfirmBtn = () => {
-        if (confirmBtn.value && typeof confirmBtn.value !== 'object') {
-          return confirmBtn.value;
-        }
-        if (confirmBtn.value && Array.isArray(confirmBtn.value)) {
-          return confirmBtn.value;
-        }
-        if (confirmBtn.value && typeof confirmBtn.value === 'object') {
-          return <t-button block theme="primary" {...confirmBtn.value} onClick={handleConfirm} />;
-        }
-      };
-
-      if (props.switchMode !== 'none') {
-        calcCurrentMonth();
+    const renderCell = (dateItem: TDate) => {
+      const cell = renderTNodeJSX('cell', { params: { item: dateItem } });
+      if (cell) {
+        return cell;
       }
+      let className = `${calendarClass.value}__dates-item-suffix`;
+      if (dateItem.type) {
+        className = `${className} ${calendarClass.value}__dates-item-suffix--${dateItem.type}`;
+      }
+      return (
+        <>
+          {dateItem.prefix && <div class={`${calendarClass.value}__dates-item-prefix`}>{dateItem.prefix}</div>}
+          {dateItem.day}
+          {dateItem.suffix && <div class={className}>{dateItem.suffix}</div>}
+        </>
+      );
+    };
+    const className = usePopup.value
+      ? `${calendarClass.value} ${calendarClass.value}--popup`
+      : `${calendarClass.value}`;
 
-      const handleSwitchModeChange = (
-        type: 'pre-year' | 'pre-month' | 'next-month' | 'next-year',
-        disabled?: boolean,
-      ) => {
-        if (disabled) return;
-        const date = getCurrentDate();
-
-        const funcMap = {
-          'pre-year': () => getPrevYear(date),
-          'pre-month': () => getPrevMonth(date),
-          'next-month': () => getNextMonth(date),
-          'next-year': () => getNextYear(date),
-        };
-        const newValue = funcMap[type]();
-        if (!newValue) return;
+    const renderConfirmBtn = () => {
+      if (confirmBtn.value && typeof confirmBtn.value !== 'object') {
+        return confirmBtn.value;
+      }
+      if (confirmBtn.value && Array.isArray(confirmBtn.value)) {
+        return confirmBtn.value;
+      }
+      if (confirmBtn.value && typeof confirmBtn.value === 'object') {
+        return <t-button block theme="primary" {...confirmBtn.value} onClick={handleConfirm} />;
+      }
+    };
 
-        const { year, month } = getCurrentYearAndMonth(newValue);
+    if (props.switchMode !== 'none') {
+      calcCurrentMonth();
+    }
+
+    const handleSwitchModeChange = (
+      type: 'pre-year' | 'pre-month' | 'next-month' | 'next-year',
+      disabled?: boolean,
+    ) => {
+      if (disabled) return;
+      const date = getCurrentDate();
+
+      const funcMap = {
+        'pre-year': () => getPrevYear(date),
+        'pre-month': () => getPrevMonth(date),
+        'next-month': () => getNextMonth(date),
+        'next-year': () => getNextYear(date),
+      };
+      const newValue = funcMap[type]();
+      if (!newValue) return;
 
-        props.onPanelChange?.({ year, month: month + 1 });
+      const { year, month } = getCurrentYearAndMonth(newValue);
 
-        calcCurrentMonth(newValue);
-      };
+      props.onPanelChange?.({ year, month: month + 1 });
 
-      const onScroll = (e: Event) => {
-        props.onScroll?.({ e });
-      };
+      calcCurrentMonth(newValue);
+    };
 
+    const onScroll = (e: Event) => {
+      props.onScroll?.({ e });
+    };
+    return () => {
       return (
         <div ref={templateRef} class={className}>
           <div class={`${calendarClass.value}__title`}>{_props.title || globalConfig.value.title}</div>

src/cascader/cascader.tsx

@@ -94,11 +94,11 @@ export default defineComponent({
     const getIndexesByValue = (options: any, value: any) => {
       const keys = props.keys as KeysType;
       for (let i = 0; i < options.length; i++) {
-        if (lodashGet(options, options[i][keys?.value ?? 'value']) === value) {
+        if (lodashGet(options[i], keys?.value ?? 'value') === value) {
           return [i];
         }
-        if (lodashGet(options, options[i][keys?.children ?? 'children'])) {
-          const res: any = getIndexesByValue(lodashGet(options, options[i][keys?.children ?? 'children']), value);
+        if (lodashGet(options[i], keys?.children ?? 'children')) {
+          const res: any = getIndexesByValue(lodashGet(options[i], keys?.children ?? 'children'), value);
           if (res) {
             return [i, ...res];
           }

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

@@ -428,7 +428,6 @@ exports[`Checkbox > Checkbox cardVue demo works fine 1`] = `
 
 exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
 <div
-  borderless=""
   class="t-checkbox-group box"
   data-v-5c47b466=""
 >
@@ -467,9 +466,7 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
         <!---->
       </div>
     </div>
-    <div
-      class="t-checkbox__border t-checkbox__border--left"
-    />
+    <!---->
   </div>
   <div
     class="t-checkbox t-checkbox--left t-checkbox--checked"
@@ -505,9 +502,7 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
         <!---->
       </div>
     </div>
-    <div
-      class="t-checkbox__border t-checkbox__border--left"
-    />
+    <!---->
   </div>
   <div
     class="t-checkbox t-checkbox--left"
@@ -537,9 +532,7 @@ exports[`Checkbox > Checkbox horizontalVue demo works fine 1`] = `
         <!---->
       </div>
     </div>
-    <div
-      class="t-checkbox__border t-checkbox__border--left"
-    />
+    <!---->
   </div>
 
 </div>
@@ -746,7 +739,6 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
       >
 
         <div
-          borderless=""
           class="t-checkbox-group box"
           data-v-5c47b466=""
         >
@@ -785,9 +777,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <!---->
               </div>
             </div>
-            <div
-              class="t-checkbox__border t-checkbox__border--left"
-            />
+            <!---->
           </div>
           <div
             class="t-checkbox t-checkbox--left t-checkbox--checked"
@@ -823,9 +813,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <!---->
               </div>
             </div>
-            <div
-              class="t-checkbox__border t-checkbox__border--left"
-            />
+            <!---->
           </div>
           <div
             class="t-checkbox t-checkbox--left"
@@ -855,9 +843,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <!---->
               </div>
             </div>
-            <div
-              class="t-checkbox__border t-checkbox__border--left"
-            />
+            <!---->
           </div>
 
         </div>

src/checkbox/checkbox-group-props.ts

@@ -8,6 +8,8 @@ import { TdCheckboxGroupProps } from '../checkbox/type';
 import { PropType } from 'vue';
 
 export default {
+  /** 是否开启无边框模式。优先级低于 Checkbox.borderless */
+  borderless: Boolean,
   /** 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */
   disabled: {
     type: Boolean,

src/checkbox/checkbox.en-US.md

@@ -7,6 +7,7 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 block | Boolean | true | \- | N
+borderless | Boolean | undefined | \- | N
 checkAll | Boolean | false | \- | N
 checked | Boolean | false | `v-model` and `v-model:checked` is supported | N
 defaultChecked | Boolean | false | uncontrolled property | N
@@ -36,6 +37,7 @@ change | `(checked: boolean, context: { e: Event })` | \-
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+borderless | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
 keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | undefined | \- | N

src/checkbox/checkbox.md

@@ -7,6 +7,7 @@
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 block | Boolean | true | 是否为块级元素 | N
+borderless | Boolean | undefined | 是否开启无边框模式 | N
 checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
 checked | Boolean | false | 是否选中。支持语法糖 `v-model` 或 `v-model:checked` | N
 defaultChecked | Boolean | false | 是否选中。非受控属性 | N
@@ -36,6 +37,7 @@ change | `(checked: boolean, context: { e: Event })` | 值变化时触发
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+borderless | Boolean | false | 是否开启无边框模式。优先级低于 Checkbox.borderless | N
 disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
 keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | undefined | 支持最多选中的数量 | N

src/checkbox/checkbox.tsx

@@ -21,13 +21,7 @@ const { prefix } = config;
 export default defineComponent({
   name: `${prefix}-checkbox`,
   components: { TNode },
-  props: {
-    ...CheckboxProps,
-    borderless: {
-      type: Boolean,
-      value: false,
-    },
-  },
+  props: CheckboxProps,
   emits: ['update:checked', 'update:modelValue', 'change'],
   setup(props, context) {
     const checkboxClass = usePrefixClass('checkbox');
@@ -98,7 +92,9 @@ export default defineComponent({
       }
     };
     return () => {
-      const { placement, block, icon, maxLabelRow, maxContentRow, borderless } = props;
+      const { placement, block, icon, maxLabelRow, maxContentRow } = props;
+      const borderless = props.borderless || checkboxGroup?.borderless.value;
+
       const renderIconArray = () => {
         if (isIconArray) {
           return (

src/checkbox/demos/special.vue

@@ -8,10 +8,10 @@
 
   <div class="tdesign-mobile-demo-block__summary" style="margin-left: 16px; margin-top: 24px">横向卡片多选框</div>
 
-  <t-checkbox-group v-model:value="value1" class="horizontal-box">
+  <t-checkbox-group v-model:value="value1" class="horizontal-box" borderless>
     <div v-for="n in 3" :key="n" :class="`card ${value1.indexOf(n) > -1 ? 'card--active' : value1.indexOf(n)}`">
       <t-icon v-if="value1.indexOf(n) > -1" name="check" class="card__icon" :aria-hidden="true" />
-      <t-checkbox :value="n" label="多选" icon="none" borderless />
+      <t-checkbox :value="n" label="多选" icon="none" />
     </div>
   </t-checkbox-group>
 </template>

src/checkbox/props.ts

@@ -13,6 +13,11 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 是否开启无边框模式 */
+  borderless: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */
   checkAll: Boolean,
   /** 是否选中 */