Merge remote-tracking branch 'tdesign/develop' into test/tabbar

.eslintignore

@@ -1,4 +1,3 @@
-**/*test*
 **/*site*
 **/*_common*
 **/*types*

CHANGELOG.md

@@ -5,6 +5,25 @@ toc: false
 spline: explain
 ---
 
+## 🌈 0.10.5 `2022-09-06` 
+### 🚀 Features
+- `Popup`: 新增 `customStyle` 和 `overlayProps` 属性 @anlyyao ([#296](https://github.com/Tencent/tdesign-mobile-vue/pull/296))
+- `Popup`: 更新示例代码 @anlyyao ([#296](https://github.com/Tencent/tdesign-mobile-vue/pull/296))
+- `Drawer`: 更新示例代码 @anlyyao ([#296](https://github.com/Tencent/tdesign-mobile-vue/pull/296))
+- `Switch`: 更新示例代码 @anlyyao ([#307](https://github.com/Tencent/tdesign-mobile-vue/pull/307))
+- `Switch`: 新增单元测试 @anlyyao ([#307](https://github.com/Tencent/tdesign-mobile-vue/pull/307))
+### 🐞 Bug Fixes
+- `Popup`: `closeOverlayClick`属性更名为 `closeOnOverlayClick` @anlyyao ([#296](https://github.com/Tencent/tdesign-mobile-vue/pull/296))
+- `Drawer`: `closeOverlayClick`属性更名为 `closeOnOverlayClick` @anlyyao ([#296](https://github.com/Tencent/tdesign-mobile-vue/pull/296))
+- `Dialog`: 修复 content 变更没有响应的问题 @TingShine ([#306](https://github.com/Tencent/tdesign-mobile-vue/pull/306))
+- `ActionSheet`: 修复type=grid时没有触发 onSelected的问题 @HelKyle ([#317](https://github.com/Tencent/tdesign-mobile-vue/pull/317))
+- `DateTimePicker`: 修复组件修改model无法双向绑定的问题；修复组件默认value为空时，无法正常滑动的问题；优化List组件demo展示；修复Upload组件无法正常上传文件的问题 @Dengzygx ([#344](https://github.com/Tencent/tdesign-mobile-vue/pull/344))
+-  `List`: 优化List组件demo展示；修复Upload组件无法正常上传文件的问题 @Dengzygx ([#344](https://github.com/Tencent/tdesign-mobile-vue/pull/344))
+- `Upload`: 修复Upload组件无法正常上传文件的问题 @Dengzygx ([#344](https://github.com/Tencent/tdesign-mobile-vue/pull/344))
+### 🚧 Others
+- style: update _common @anlyyao ([#308](https://github.com/Tencent/tdesign-mobile-vue/pull/308))
+- fix: enrich coverage badge type @anlyyao ([#315](https://github.com/Tencent/tdesign-mobile-vue/pull/315))
+
 ## 🌈 0.10.4 `2022-08-22` 
 ### 🚀 Features
 - `Search`: 内嵌 input 组件 type 调整为 search @VeryHandSomeBoy ([#293](https://github.com/Tencent/tdesign-mobile-vue/pull/293))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-mobile-vue",
   "purename": "tdesign",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "tdesign-mobile-vue",
   "author": "TDesign Group",
   "homepage": "https://tdesign.tencent.com/mobile-vue/",
@@ -111,7 +111,7 @@
     "@types/jest": "^28.1.6",
     "@types/prismjs": "^1.16.2",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
-    "@typescript-eslint/parser": "^5.5.0",
+    "@typescript-eslint/parser": "~5.34.0",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vitest/ui": "^0.16.0",

src/action-sheet/action-sheet.md

@@ -1,10 +1,12 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ActionSheet Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+type | string | list | 展示类型，可选项：list/grid | N
 cancelText | String | 取消 | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | 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

src/action-sheet/menu-grid.vue

@@ -9,7 +9,13 @@
     >
       <div v-for="(Items, i) in actionItems" :key="i" :class="`${name}__menu`">
         <t-grid :column="gridColumn">
-          <t-grid-item v-for="(item, index) in Items" :key="index" :text="item.label" :image="item.icon" />
+          <t-grid-item
+            v-for="(item, index) in Items"
+            :key="index"
+            :text="item.label"
+            :image="item.icon"
+            @click="handleSelected(i * count + index)"
+          />
         </t-grid>
       </div>
     </div>

src/button/demos/test.vue

@@ -3,10 +3,10 @@
     <p>正确</p>
     <div class="tdesign-demo-block">
       <t-button theme="primary">主要按钮</t-button>
-      <t-button variant="outline" >次要按钮</t-button>
+      <t-button variant="outline">次要按钮</t-button>
     </div>
 
-    <br/>
+    <br />
     <p>错误</p>
     <div class="tdesign-demo-block">
       <t-button theme="primary">主要按钮</t-button>
@@ -17,5 +17,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+
 export default defineComponent({});
 </script>

src/checkbox/__test__/index.test.tsx

@@ -13,21 +13,21 @@ describe('Checkbox', () => {
               <Checkbox value="1" ref="1" />
               <Checkbox value="2" ref="2" />
             </CheckboxGroup>
-          )
-        }
+          );
+        },
       });
 
       expect(checked.value.length).toBe(0);
 
-      const target = wrapper.findComponent({ ref: '1'});     
-      await target.find('.t-checkbox__original-left').trigger('click')
-      
-      expect(wrapper.findComponent({ ref: '1'}).vm.isChecked).toBe(true);
+      const target = wrapper.findComponent({ ref: '1' });
+      await target.find('.t-checkbox__original-left').trigger('click');
+
+      expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(true);
       expect(checked.value).toContain('1');
 
-      await target.find('.t-checkbox__original-left').trigger('click')
+      await target.find('.t-checkbox__original-left').trigger('click');
 
-      expect(wrapper.findComponent({ ref: '1'}).vm.isChecked).toBe(false);
+      expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(false);
       expect(checked.value.length).toBe(0);
     });
 
@@ -40,20 +40,20 @@ describe('Checkbox', () => {
               <Checkbox value="2" ref="2" />
               <Checkbox value="3" ref="3" />
             </CheckboxGroup>
-          )
-        }
+          );
+        },
       });
 
-      await wrapper.findComponent({ ref: '1'}).find('.t-checkbox__original-left').trigger('click')
-      
-      expect(wrapper.findComponent({ ref: '2'}).vm.isChecked).toBe(true);
-      expect(wrapper.findComponent({ ref: '3'}).vm.isChecked).toBe(true);
+      await wrapper.findComponent({ ref: '1' }).find('.t-checkbox__original-left').trigger('click');
+
+      expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(true);
+      expect(wrapper.findComponent({ ref: '3' }).vm.isChecked).toBe(true);
 
-      await wrapper.findComponent({ ref: '1'}).find('.t-checkbox__original-left').trigger('click')
+      await wrapper.findComponent({ ref: '1' }).find('.t-checkbox__original-left').trigger('click');
 
-      expect(wrapper.findComponent({ ref: '2'}).vm.isChecked).toBe(false);
-      expect(wrapper.findComponent({ ref: '3'}).vm.isChecked).toBe(false);
-    })
+      expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(false);
+      expect(wrapper.findComponent({ ref: '3' }).vm.isChecked).toBe(false);
+    });
 
     test('max', async () => {
       const checked = ref([]);
@@ -65,18 +65,18 @@ describe('Checkbox', () => {
               <Checkbox value="2" ref="2" />
               <Checkbox value="3" ref="3" />
             </CheckboxGroup>
-          )
-        }
+          );
+        },
       });
 
-      await wrapper.findComponent({ ref: '1'}).find('.t-checkbox__original-left').trigger('click')
-
-      expect(wrapper.findComponent({ ref: '1'}).vm.isChecked).toBe(true);
+      await wrapper.findComponent({ ref: '1' }).find('.t-checkbox__original-left').trigger('click');
 
-      await wrapper.findComponent({ ref: '2'}).find('.t-checkbox__original-left').trigger('click')
+      expect(wrapper.findComponent({ ref: '1' }).vm.isChecked).toBe(true);
 
-      expect(wrapper.findComponent({ ref: '2'}).vm.isChecked).toBe(true);
-      expect(wrapper.findComponent({ ref: '3'}).vm.isDisabled).toBe(true);
-    })
-  })
-})
+      await wrapper.findComponent({ ref: '2' }).find('.t-checkbox__original-left').trigger('click');
+
+      expect(wrapper.findComponent({ ref: '2' }).vm.isChecked).toBe(true);
+      expect(wrapper.findComponent({ ref: '3' }).vm.isDisabled).toBe(true);
+    });
+  });
+});

src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap

@@ -69,7 +69,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     </transition-stub>
     <transition-stub>
       <div
-        class="t-popup--content t-popup--content-top"
+        class="t-popup--content t-popup--content-bottom"
         style="display: none;"
       >
         
@@ -1318,7 +1318,7 @@ exports[`DateTimePicker > DateTimePicker hourMinuteVue demo works fine 1`] = `
     </transition-stub>
     <transition-stub>
       <div
-        class="t-popup--content t-popup--content-top"
+        class="t-popup--content t-popup--content-bottom"
         style="display: none;"
       >
         
@@ -6960,7 +6960,7 @@ exports[`DateTimePicker > DateTimePicker renderLabelDateVue demo works fine 1`]
     </transition-stub>
     <transition-stub>
       <div
-        class="t-popup--content t-popup--content-top"
+        class="t-popup--content t-popup--content-bottom"
         style="display: none;"
       >
         
@@ -7456,7 +7456,7 @@ exports[`DateTimePicker > DateTimePicker startEndDateVue demo works fine 1`] = `
     </transition-stub>
     <transition-stub>
       <div
-        class="t-popup--content t-popup--content-top"
+        class="t-popup--content t-popup--content-bottom"
         style="display: none;"
       >
         

src/date-time-picker/date-time-picker.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="className">
     <t-picker
+      ref="pickeInstance"
       :value="currentPicker"
       :title="title"
       :columns="(selected) => generateDatePickerColumns(selected, start, end, renderLabel)"
@@ -14,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent, SetupContext, toRefs } from 'vue';
+import { ref, computed, defineComponent, SetupContext, toRefs, watch, nextTick } from 'vue';
 import dayjs from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -43,10 +44,12 @@ export default defineComponent({
   name,
   components: { TPicker },
   props: DateTimePickerProps,
-  emits: ['change', 'cancel', 'confirm', 'pick'],
+  emits: ['change', 'cancel', 'confirm', 'pick', 'update:modelValue', 'update:value'],
   setup(props: any, context: SetupContext) {
     const emitEvent = useEmitEvent(props, context.emit);
-
+    const pickeInstance = ref<any>(null);
+    const isChanged = ref(false);
+    const realDateValue = ref();
     const className = computed(() => [`${name}`]);
     const { value, modelValue } = toRefs(props);
     const [dateTimePickerValue, setDateTimePickerValue] = useVModel(
@@ -127,7 +130,7 @@ export default defineComponent({
     };
 
     // 当默认v-model为空时，当前value取最小日期
-    const pickerValue = ref(getPickerValueByDateTimePickerValue(dateTimePickerValue.value || start.value));
+    const pickerValue = ref(getPickerValueByDateTimePickerValue(dateTimePickerValue.value || start.value.valueOf()));
 
     let lastTimePicker = [...pickerValue.value];
     let currentPicker = [...pickerValue.value];
@@ -215,7 +218,7 @@ export default defineComponent({
 
       if (isPrecision('date')) {
         const lower = isInMinMonth ? minDay : 1;
-        const upper = isInMaxMonth ? maxDay : dayjs(`${selected[0]}-${selected[1]}`).daysInMonth();
+        const upper = isInMaxMonth ? maxDay : dayjs(`${selected[0]}-${+selected[1] + 1}`).daysInMonth();
         generateColumn(lower, upper, 'date');
       }
 
@@ -253,8 +256,8 @@ export default defineComponent({
     const onChange = (value: Array<PickerValue>, context: { columns: Array<PickerContext>; e: MouseEvent }) => {
       lastTimePicker = [...currentPicker];
       const currentDate = getDateTimePickerValueByPickerValue(value);
-      const realDateValue = dayjs(currentDate).format(props.format);
-      setDateTimePickerValue(realDateValue);
+      realDateValue.value = dayjs(currentDate).format(props.format);
+      isChanged.value = true;
     };
 
     const onPick = (value: Array<PickerValue>, context: PickerContext) => {
@@ -263,7 +266,46 @@ export default defineComponent({
       emitEvent('pick', dayjs(currentDate).format(props.format));
     };
 
+    /**
+     * 监听v-model变化，当modelValue发生变化时，更新数据和ui
+     * isChanged用来区分用户直接修改v-model，和滑动picker修改value两种方式
+     * 只有用户滑动picker时，isChanged为true，滑动结束后设为false
+     */
+    watch(
+      () => dateTimePickerValue,
+      (val) => {
+        nextTick(() => {
+          if (isChanged.value) {
+            isChanged.value = false;
+          } else {
+            pickeInstance.value?.setValues(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf()));
+            currentPicker = [...ref(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf())).value];
+            lastTimePicker = [...currentPicker];
+            isChanged.value = false;
+          }
+        });
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+
+    watch(
+      () => isChanged,
+      (val) => {
+        if (val.value) {
+          setDateTimePickerValue(realDateValue.value);
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+
     return {
+      pickeInstance,
       className,
       confirmButtonText,
       cancelButtonText,
@@ -273,6 +315,8 @@ export default defineComponent({
       renderLabel,
       pickerValue,
       currentPicker,
+      realDateValue,
+      isChanged,
       generateDatePickerColumns,
       onConfirm,
       onCancel,

src/date-time-picker/demos/base.vue

@@ -1,7 +1,7 @@
 <template>
   <tdesign-demo-block>
     <t-input :value="text.ymdhms" label="选择日期时间" placeholder="日期时间" @click="show.ymdhms = true" />
-    <t-popup v-model="show.ymdhms" position="bottom">
+    <t-popup v-model="show.ymdhms" placement="bottom">
       <t-date-time-picker
         v-model="text.ymdhms"
         :mode="['date', 'second']"

src/date-time-picker/demos/hour-minute.vue

@@ -1,7 +1,7 @@
 <template>
   <tdesign-demo-block>
     <t-input :value="text.hm" label="选择时分" placeholder="时分" @click="show.hm = true" />
-    <t-popup v-model="show.hm" position="bottom">
+    <t-popup v-model="show.hm" placement="bottom">
       <t-date-time-picker
         v-model="text.hm"
         :mode="[null, 'minute']"

src/date-time-picker/demos/render-label-date.vue

@@ -1,7 +1,7 @@
 <template>
   <tdesign-demo-block>
     <t-input :value="text.ym" label="选择年月" placeholder="年月" @click="show.ym = true" />
-    <t-popup v-model="show.ym" position="bottom">
+    <t-popup v-model="show.ym" placement="bottom">
       <t-date-time-picker
         v-model="text.ym"
         :mode="mode"

src/date-time-picker/demos/start-end-date.vue

@@ -1,7 +1,7 @@
 <template>
   <tdesign-demo-block>
     <t-input :value="text.ymd" label="选择年月日" placeholder="年月日" @click="show.ymd = true" />
-    <t-popup v-model="show.ymd" position="bottom">
+    <t-popup v-model="show.ymd" placement="bottom">
       <t-date-time-picker
         v-model="text.ymd"
         :mode="mode"