From 779f3363c2f6647fa1cbe033c5fc67df9c33d422 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 5 Jul 2021 13:06:04 +0800
Subject: [PATCH] feat(Calendar): add subtitle slot (#8980)

---
 src/calendar/Calendar.tsx                     |  4 +--
 src/calendar/CalendarHeader.tsx               |  3 +-
 src/calendar/README.md                        |  1 +
 src/calendar/README.zh-CN.md                  |  1 +
 .../test/__snapshots__/index.spec.ts.snap     | 33 ++++++++++---------
 src/calendar/test/index.spec.ts               |  3 +-
 6 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/calendar/Calendar.tsx b/src/calendar/Calendar.tsx
index 2c976ff72..b42566cc6 100644
--- a/src/calendar/Calendar.tsx
+++ b/src/calendar/Calendar.tsx
@@ -489,10 +489,10 @@ export default defineComponent({
     const renderCalendar = () => (
       <div class={bem()}>
         <CalendarHeader
-          v-slots={{ title: slots.title }}
+          v-slots={pick(slots, ['title', 'subtitle'])}
           title={props.title}
-          showTitle={props.showTitle}
           subtitle={state.subtitle}
+          showTitle={props.showTitle}
           showSubtitle={props.showSubtitle}
           firstDayOfWeek={dayOffset.value}
         />
diff --git a/src/calendar/CalendarHeader.tsx b/src/calendar/CalendarHeader.tsx
index a1d0c9b42..30779ae25 100644
--- a/src/calendar/CalendarHeader.tsx
+++ b/src/calendar/CalendarHeader.tsx
@@ -26,7 +26,8 @@ export default defineComponent({
 
     const renderSubtitle = () => {
       if (props.showSubtitle) {
-        return <div class={bem('header-subtitle')}>{props.subtitle}</div>;
+        const title = slots.subtitle ? slots.subtitle() : props.subtitle;
+        return <div class={bem('header-subtitle')}>{title}</div>;
       }
     };
 
diff --git a/src/calendar/README.md b/src/calendar/README.md
index 3d3a680d4..4793037c2 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -332,6 +332,7 @@ Following props are supported when the type is multiple
 | Name                  | Description               | SlotProps  |
 | --------------------- | ------------------------- | ---------- |
 | title                 | Custom title              | -          |
+| subtitle `v3.1.3`     | Custom subtitle           | -          |
 | footer                | Custom footer             | -          |
 | top-info `v3.0.17`    | Custom top info of day    | _day: Day_ |
 | bottom-info `v3.0.17` | Custom bottom info of day | _day: Day_ |
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 4acb3ece7..51131ba59 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -338,6 +338,7 @@ export default {
 | 名称                  | 说明                     | 参数       |
 | --------------------- | ------------------------ | ---------- |
 | title                 | 自定义标题               | -          |
+| subtitle `v3.1.3`     | 自定义日历副标题         | -          |
 | footer                | 自定义底部区域内容       | -          |
 | top-info `v3.0.17`    | 自定义日期上方的提示信息 | _day: Day_ |
 | bottom-info `v3.0.17` | 自定义日期下方的提示信息 | _day: Day_ |
diff --git a/src/calendar/test/__snapshots__/index.spec.ts.snap b/src/calendar/test/__snapshots__/index.spec.ts.snap
index b8cd34846..aaece9542 100644
--- a/src/calendar/test/__snapshots__/index.spec.ts.snap
+++ b/src/calendar/test/__snapshots__/index.spec.ts.snap
@@ -900,28 +900,14 @@ exports[`row-height prop 1`] = `
 </div>
 `;
 
-exports[`should render top-info and bottom-info slot correctly 1`] = `
-<div role="gridcell"
-     style="margin-left: 71.42857142857143%;"
-     class="van-calendar__day van-calendar__day--disabled"
->
-  <div class="van-calendar__top-info">
-    top: 1
-  </div>
-  1
-  <div class="van-calendar__bottom-info">
-    bottom: 1
-  </div>
-</div>
-`;
-
-exports[`title & footer slot 1`] = `
+exports[`should render title、footer、subtitle slot correctly 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">
     <div class="van-calendar__header-title">
       Custom Title
     </div>
     <div class="van-calendar__header-subtitle">
+      Custom Subtitle
     </div>
     <div class="van-calendar__weekdays">
       <span class="van-calendar__weekday">
@@ -1132,3 +1118,18 @@ exports[`title & footer slot 1`] = `
   </div>
 </div>
 `;
+
+exports[`should render top-info and bottom-info slot correctly 1`] = `
+<div role="gridcell"
+     style="margin-left: 71.42857142857143%;"
+     class="van-calendar__day van-calendar__day--disabled"
+>
+  <div class="van-calendar__top-info">
+    top: 1
+  </div>
+  1
+  <div class="van-calendar__bottom-info">
+    bottom: 1
+  </div>
+</div>
+`;
diff --git a/src/calendar/test/index.spec.ts b/src/calendar/test/index.spec.ts
index 8a7165e36..b9b76b33d 100644
--- a/src/calendar/test/index.spec.ts
+++ b/src/calendar/test/index.spec.ts
@@ -344,7 +344,7 @@ test('formatter prop', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('title & footer slot', async () => {
+test('should render title、footer、subtitle slot correctly', async () => {
   const wrapper = mount(Calendar, {
     props: {
       minDate,
@@ -356,6 +356,7 @@ test('title & footer slot', async () => {
     slots: {
       title: () => 'Custom Title',
       footer: () => 'Custom Footer',
+      subtitle: () => 'Custom Subtitle',
     },
   });