From 1e6dbd85584cf366d02773f809377face6ba4416 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Sat, 3 Sep 2022 23:23:10 +0800
Subject: [PATCH] refactor(components): [calendar] rename slot dateCell to
 date-cell (#9590)

* refactor(components): [calendar] rename slot dateCell to date-cell

closed 9565

* docs: update

* fix(components): [calendar] avoid slots taking effect at the same time
---
 docs/en-US/component/calendar.md              |  9 ++---
 docs/examples/calendar/customize.vue          |  2 +-
 docs/examples/calendar/header.vue             | 24 +++++++-------
 .../calendar/__tests__/calendar.test.tsx      | 16 +++++++++
 packages/components/calendar/src/calendar.vue | 33 +++++++++++++++----
 .../components/calendar/src/date-table.vue    |  2 +-
 6 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/docs/en-US/component/calendar.md b/docs/en-US/component/calendar.md
index e77b31a906..9f89658c39 100644
--- a/docs/en-US/component/calendar.md
+++ b/docs/en-US/component/calendar.md
@@ -17,7 +17,7 @@ calendar/basic
 
 ## Custom Content
 
-:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
+:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `date-cell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
 
 calendar/customize
 
@@ -54,6 +54,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
 
 ## Slots
 
-| Name     | Description                                                                                                                                                                                                                                                                              | Attribute |
-| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| dateCell | { type, isSelected, day, date }. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format YYYY-MM-DD; `date` is date the cell represents | data      |
+| Name      | Description                                                                                                                                                                                                                                                                              | Attribute |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| date-cell | { type, isSelected, day, date }. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format YYYY-MM-DD; `date` is date the cell represents | data      |
+| header    | content of the Calendar header                                                                                                                                                                                                                                                           | —         |
diff --git a/docs/examples/calendar/customize.vue b/docs/examples/calendar/customize.vue
index f5e338ced4..f02487b2d3 100644
--- a/docs/examples/calendar/customize.vue
+++ b/docs/examples/calendar/customize.vue
@@ -1,6 +1,6 @@
 <template>
   <el-calendar>
-    <template #dateCell="{ data }">
+    <template #date-cell="{ data }">
       <p :class="data.isSelected ? 'is-selected' : ''">
         {{ data.day.split('-').slice(1).join('-') }}
         {{ data.isSelected ? '✔️' : '' }}
diff --git a/docs/examples/calendar/header.vue b/docs/examples/calendar/header.vue
index 270a0b4253..73ce62680e 100644
--- a/docs/examples/calendar/header.vue
+++ b/docs/examples/calendar/header.vue
@@ -4,19 +4,19 @@
       <span>Custom header content</span>
       <span>{{ date }}</span>
       <el-button-group>
-        <el-button size="small" @click="selectDate('prev-year')"
-          >Previous Year</el-button
-        >
-        <el-button size="small" @click="selectDate('prev-month')"
-          >Previous Month</el-button
-        >
+        <el-button size="small" @click="selectDate('prev-year')">
+          Previous Year
+        </el-button>
+        <el-button size="small" @click="selectDate('prev-month')">
+          Previous Month
+        </el-button>
         <el-button size="small" @click="selectDate('today')">Today</el-button>
-        <el-button size="small" @click="selectDate('next-month')"
-          >Next Month</el-button
-        >
-        <el-button size="small" @click="selectDate('next-year')"
-          >Next Year</el-button
-        >
+        <el-button size="small" @click="selectDate('next-month')">
+          Next Month
+        </el-button>
+        <el-button size="small" @click="selectDate('next-year')">
+          Next Year
+        </el-button>
       </el-button-group>
     </template>
   </el-calendar>
diff --git a/packages/components/calendar/__tests__/calendar.test.tsx b/packages/components/calendar/__tests__/calendar.test.tsx
index cb242fcfce..0660ae07d3 100644
--- a/packages/components/calendar/__tests__/calendar.test.tsx
+++ b/packages/components/calendar/__tests__/calendar.test.tsx
@@ -3,6 +3,8 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import Calendar from '../src/calendar.vue'
 
+const AXIOM = 'Rem is the best girl'
+
 describe('Calendar.vue', () => {
   it('create', async () => {
     const wrapper = mount({
@@ -181,4 +183,18 @@ describe('Calendar.vue', () => {
     expect(/2022.*January/.test(titleEl.element.innerHTML)).toBeTruthy()
     expect(cell?.classList.contains('is-selected')).toBeTruthy()
   })
+
+  it('slots', async () => {
+    const wrapper = mount(() => (
+      <Calendar
+        v-slots={{
+          header: () => AXIOM,
+          'date-cell': () => AXIOM,
+        }}
+      />
+    ))
+
+    expect(wrapper.find('.el-calendar__header').text()).toEqual(AXIOM)
+    expect(wrapper.find('.current.is-today').text()).toEqual(AXIOM)
+  })
 })
diff --git a/packages/components/calendar/src/calendar.vue b/packages/components/calendar/src/calendar.vue
index 960c496eeb..7f67fa29a1 100644
--- a/packages/components/calendar/src/calendar.vue
+++ b/packages/components/calendar/src/calendar.vue
@@ -20,8 +20,12 @@
     </div>
     <div v-if="validatedRange.length === 0" :class="ns.e('body')">
       <date-table :date="date" :selected-day="realSelectedDay" @pick="pickDay">
-        <template v-if="$slots.dateCell" #dateCell="data">
-          <slot name="dateCell" v-bind="data" />
+        <template
+          v-if="$slots['date-cell'] || $slots.dateCell"
+          #date-cell="data"
+        >
+          <slot v-if="$slots['date-cell']" name="date-cell" v-bind="data" />
+          <slot v-else name="dateCell" v-bind="data" />
         </template>
       </date-table>
     </div>
@@ -35,8 +39,12 @@
         :hide-header="index !== 0"
         @pick="pickDay"
       >
-        <template v-if="$slots.dateCell" #dateCell="data">
-          <slot name="dateCell" v-bind="data" />
+        <template
+          v-if="$slots['date-cell'] || $slots.dateCell"
+          #date-cell="data"
+        >
+          <slot v-if="$slots['date-cell']" name="date-cell" v-bind="data" />
+          <slot v-else name="dateCell" v-bind="data" />
         </template>
       </date-table>
     </div>
@@ -44,10 +52,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, useSlots } from 'vue'
 import dayjs from 'dayjs'
 import { ElButton, ElButtonGroup } from '@element-plus/components/button'
-import { useLocale, useNamespace } from '@element-plus/hooks'
+import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'
 import { debugWarn } from '@element-plus/utils'
 import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import DateTable from './date-table.vue'
@@ -66,6 +74,7 @@ defineOptions({
 const props = defineProps(calendarProps)
 const emit = defineEmits(calendarEmits)
 
+const solts = useSlots()
 const ns = useNamespace('calendar')
 const { t, lang } = useLocale()
 
@@ -230,6 +239,18 @@ const selectDate = (type: CalendarDateType) => {
   pickDay(day)
 }
 
+useDeprecated(
+  {
+    from: '"dateCell"',
+    replacement: '"date-cell"',
+    scope: 'ElCalendar',
+    version: '2.3.0',
+    ref: 'https://element-plus.org/en-US/component/calendar.html#slots',
+    type: 'Slot',
+  },
+  computed(() => !!solts.dateCell)
+)
+
 defineExpose({
   /** @description currently selected date */
   selectedDay: realSelectedDay,
diff --git a/packages/components/calendar/src/date-table.vue b/packages/components/calendar/src/date-table.vue
index a9889b555d..fef4f3fdca 100644
--- a/packages/components/calendar/src/date-table.vue
+++ b/packages/components/calendar/src/date-table.vue
@@ -24,7 +24,7 @@
           @click="handlePickDay(cell)"
         >
           <div :class="nsDay.b()">
-            <slot name="dateCell" :data="getSlotData(cell)">
+            <slot name="date-cell" :data="getSlotData(cell)">
               <span>{{ cell.text }}</span>
             </slot>
           </div>