Merge branch 'dev' into next

src/calendar/components/Month.js

@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 
 // Utils
 import { createNamespace, addUnit } from '../../utils';
@@ -9,7 +9,6 @@ import {
   t,
   bem,
   compareDay,
-  ROW_HEIGHT,
   getPrevDay,
   getNextDay,
   formatMonthTitle,
@@ -17,8 +16,9 @@ import {
 
 // Composition
 import { useToggle } from '@vant/use';
-import { useHeight } from '../../composition/use-rect';
+import { useRefs } from '../../composition/use-refs';
 import { useExpose } from '../../composition/use-expose';
+import { useRect, useHeight } from '../../composition/use-rect';
 
 // Components
 import Day from './Day';
@@ -39,25 +39,23 @@ export default createComponent({
     currentDate: [Date, Array],
     allowSameDay: Boolean,
     showSubtitle: Boolean,
+    realRowHeight: Number,
     showMonthTitle: Boolean,
     firstDayOfWeek: Number,
   },
 
-  emits: ['click'],
+  emits: ['click', 'update-height'],
 
   setup(props, { emit }) {
     const [visible, setVisible] = useToggle();
+    const [dayRefs, setDayRefs] = useRefs();
     const daysRef = ref();
     const monthRef = ref();
     const height = useHeight(monthRef);
 
     const title = computed(() => formatMonthTitle(props.date));
 
-    const rowHeight = computed(() => {
-      if (props.rowHeight !== ROW_HEIGHT) {
-        return addUnit(props.rowHeight);
-      }
-    });
+    const rowHeight = computed(() => addUnit(props.rowHeight));
 
     const offset = computed(() => {
       const realDay = props.date.getDay();
@@ -77,7 +75,7 @@ export default createComponent({
     const monthStyle = computed(() => {
       if (!shouldRender.value) {
         const rowCount = Math.ceil((totalDay.value + offset.value) / 7);
-        const padding = rowCount * unitToPx(props.rowHeight);
+        const padding = rowCount * unitToPx(props.realRowHeight);
         return {
           paddingBottom: `${padding}px`,
         };
@@ -227,6 +225,7 @@ export default createComponent({
 
     const renderDay = (item, index) => (
       <Day
+        ref={setDayRefs(index)}
         item={item}
         index={index}
         color={props.color}
@@ -251,6 +250,25 @@ export default createComponent({
       return <div ref={daysRef} />;
     };
 
+    watch(
+      () => props.realRowHeight,
+      () => {
+        height.value = useRect(monthRef).height;
+        console.log('height.value', height.value);
+      }
+    );
+
+    watch(shouldRender, (value) => {
+      if (value) {
+        nextTick(() => {
+          if (dayRefs.value[0] && !props.realRowHeight) {
+            const { height } = dayRefs.value[0].$el.getBoundingClientRect();
+            emit('update-height', height);
+          }
+        });
+      }
+    });
+
     useExpose({
       height,
       getDate,

src/calendar/index.js

@@ -9,7 +9,6 @@ import {
   copyDates,
   getNextDay,
   compareDay,
-  ROW_HEIGHT,
   calcDateNum,
   compareMonth,
   createComponent,
@@ -31,6 +30,7 @@ export default createComponent({
     readonly: Boolean,
     teleport: [String, Object],
     formatter: Function,
+    rowHeight: [Number, String],
     confirmText: String,
     rangePrompt: String,
     defaultDate: [Date, Array],
@@ -52,10 +52,6 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
-    rowHeight: {
-      type: [Number, String],
-      default: ROW_HEIGHT,
-    },
     maxRange: {
       type: [Number, String],
       default: null,
@@ -119,6 +115,7 @@ export default createComponent({
     return {
       subtitle: '',
       currentDate: this.getInitialDate(),
+      realRowHeight: 0,
     };
   },
 
@@ -409,6 +406,10 @@ export default createComponent({
       this.$emit('confirm', copyDates(this.currentDate));
     },
 
+    onUpdateHeight(height) {
+      this.realRowHeight = height;
+    },
+
     genMonth(date, index) {
       const showMonthTitle = index !== 0 || !this.showSubtitle;
       return (
@@ -431,8 +432,10 @@ export default createComponent({
             'currentDate',
             'showSubtitle',
             'allowSameDay',
+            'realRowHeight',
           ])}
           onClick={this.onClickDay}
+          onUpdate-height={this.onUpdateHeight}
         />
       );
     },

src/calendar/test/__snapshots__/demo.spec.js.snap

@@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
       </div>
       <div class="van-calendar__body">
-        <div class="van-calendar__month" style="padding-bottom: 320px;">
+        <div class="van-calendar__month" style="padding-bottom: 0px;">
           <div role="grid" class="van-calendar__days">
             <div class="van-calendar__month-mark">1</div>
             <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
@@ -102,7 +102,7 @@ exports[`renders demo correctly 1`] = `
             <div role="gridcell" tabindex="-1" class="van-calendar__day">31</div>
           </div>
         </div>
-        <div class="van-calendar__month" style="padding-bottom: 320px;">
+        <div class="van-calendar__month" style="padding-bottom: 0px;">
           <div class="van-calendar__month-title">2012年2月</div>
           <div role="grid" class="van-calendar__days">
             <div class="van-calendar__month-mark">2</div>
@@ -137,7 +137,7 @@ exports[`renders demo correctly 1`] = `
             <div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
           </div>
         </div>
-        <div class="van-calendar__month" style="padding-bottom: 320px;">
+        <div class="van-calendar__month" style="padding-bottom: 0px;">
           <div class="van-calendar__month-title">2012年3月</div>
           <div role="grid" class="van-calendar__days">
             <div class="van-calendar__month-mark">3</div>

src/calendar/test/__snapshots__/index.spec.js.snap

@@ -8,7 +8,7 @@ exports[`color prop when type is range 1`] = `
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 384px;">
+    <div class="van-calendar__month" style="padding-bottom: 0px;">
       <div role="grid" class="van-calendar__days">
         <div class="van-calendar__month-mark">1</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -61,7 +61,7 @@ exports[`color prop when type is single 1`] = `
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 384px;">
+    <div class="van-calendar__month" style="padding-bottom: 0px;">
       <div role="grid" class="van-calendar__days">
         <div class="van-calendar__month-mark">1</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -114,7 +114,7 @@ exports[`formatter prop 1`] = `
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 384px;">
+    <div class="van-calendar__month" style="padding-bottom: 0px;">
       <div role="grid" class="van-calendar__days">
         <div class="van-calendar__month-mark">1</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -173,7 +173,7 @@ exports[`popup wrapper 2`] = `
       <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
     </div>
     <div class="van-calendar__body">
-      <div class="van-calendar__month" style="padding-bottom: 384px;">
+      <div class="van-calendar__month" style="padding-bottom: 0px;">
         <div role="grid" class="van-calendar__days">
           <div class="van-calendar__month-mark">1</div>
           <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
@@ -228,7 +228,7 @@ exports[`row-height prop 1`] = `
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 300px;">
+    <div class="van-calendar__month" style="padding-bottom: 0px;">
       <div role="grid" class="van-calendar__days">
         <div class="van-calendar__month-mark">1</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px; margin-left: 71.42857142857143%;">1</div>
@@ -281,7 +281,7 @@ exports[`title & footer slot 1`] = `
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
-    <div class="van-calendar__month" style="padding-bottom: 384px;">
+    <div class="van-calendar__month" style="padding-bottom: 0px;">
       <div role="grid" class="van-calendar__days">
         <div class="van-calendar__month-mark">1</div>
         <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>

src/calendar/utils.ts

@@ -4,8 +4,6 @@ const [createComponent, bem, t] = createNamespace('calendar');
 
 export { createComponent, bem, t };
 
-export const ROW_HEIGHT = 64;
-
 export function formatMonthTitle(date: Date) {
   return t('monthTitle', date.getFullYear(), date.getMonth() + 1);
 }