feat(calendar): add extra slot, closes tusen-ai#6648

SK-ERIC · Jan 2, 2025 · 4325ca3 · 4325ca3
1 parent 942de11
commit 4325ca3
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 50 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -12,6 +12,10 @@
 - Fix `n-date-picker`'s `confirm`, `now`, `clear` slots doesn't work with `'month'`, `'monthrange'`, `'quarter'`, `'quarterrange'`, `'year'` and `'yearrange'` type.
 - Fix `n-input`'s `render-count` prop doesn't work when type is not `'textarea'`.
 
+### Features
+
+- `n-calendar` adds `extra` slot, closes [#6648](https://github.com/tusen-ai/naive-ui/issues/6648).
+
 ## 2.40.4
 
 `2024-12-20`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -12,6 +12,10 @@
 - 修复 `n-date-picker` 的 `confirm`、`now`、`clear` 插槽对 `'month'`、`'monthrange'`、`'quarter'`、`'quarterrange'`、`'year'` 和 `'yearrange'` 类型不生效
 - 修复 `n-input` 的 `render-count` 属性在类型非 `'textarea'` 时不生效
 
+### Features
+
+- `n-calendar` 新增 `extra` slot，关闭 [#6648](https://github.com/tusen-ai/naive-ui/issues/6648)
+
 ## 2.40.4
 
 `2024-12-20`

diff --git a/src/calendar/demos/enUS/index.demo-entry.md b/src/calendar/demos/enUS/index.demo-entry.md
@@ -28,3 +28,4 @@ basic.vue
 | --- | --- | --- | --- |
 | default | `({ year: number, month: number, date: number })` | Content to be rendered in each date. |  |
 | header | `(props: { year: number, month: number })` | Header of the calendar. `month` starts from 1. | 2.29.1 |
+| extra | `(props: { year: number, month: number, prev: () => void, next: () => void, today: () => void })` | `month` starts from 1. | NEXT_VERSION |
diff --git a/src/calendar/demos/zhCN/index.demo-entry.md b/src/calendar/demos/zhCN/index.demo-entry.md
@@ -28,3 +28,4 @@ basic.vue
 | --- | --- | --- | --- |
 | default | `(props: { year: number, month: number, date: number })` | 每个日期中渲染的内容 |  |
 | header | `(props: { year: number, month: number })` | 日历的标题，`month` 从 1 开始 | 2.29.1 |
+| extra | `(props: { year: number, month: number, prev: () => void, next: () => void, today: () => void })` | `month` 从 1 开始 | NEXT_VERSION |
diff --git a/src/calendar/src/Calendar.tsx b/src/calendar/src/Calendar.tsx
@@ -3,6 +3,7 @@ import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { CalendarTheme } from '../styles'
 import type {
   CalendarDefaultSlotProps,
+  CalendarExtraSlotProps,
   CalendarHeaderSlotProps,
   DateItem,
   OnPanelChange,
@@ -57,6 +58,7 @@ export type CalendarProps = ExtractPublicPropTypes<typeof calendarProps>
 export interface CalendarSlots {
   default?: (props: CalendarDefaultSlotProps) => VNode[]
   header?: (props: CalendarHeaderSlotProps) => VNode[]
+  extra?: (props: CalendarExtraSlotProps) => VNode[]
 }
 
 export default defineComponent({
@@ -245,56 +247,68 @@ export default defineComponent({
             )}
           </div>
           <div class={`${mergedClsPrefix}-calendar-header__extra`}>
-            <NButtonGroup>
-              {{
-                default: () => (
-                  <>
-                    <NButton
-                      size="small"
-                      onClick={handlePrevClick}
-                      theme={mergedTheme.peers.Button}
-                      themeOverrides={mergedTheme.peerOverrides.Button}
-                    >
-                      {{
-                        icon: () => (
-                          <NBaseIcon
-                            clsPrefix={mergedClsPrefix}
-                            class={`${mergedClsPrefix}-calendar-prev-btn`}
-                          >
-                            {{ default: () => <ChevronLeftIcon /> }}
-                          </NBaseIcon>
-                        )
-                      }}
-                    </NButton>
-                    <NButton
-                      size="small"
-                      onClick={handleTodayClick}
-                      theme={mergedTheme.peers.Button}
-                      themeOverrides={mergedTheme.peerOverrides.Button}
-                    >
-                      {{ default: () => today }}
-                    </NButton>
-                    <NButton
-                      size="small"
-                      onClick={handleNextClick}
-                      theme={mergedTheme.peers.Button}
-                      themeOverrides={mergedTheme.peerOverrides.Button}
-                    >
-                      {{
-                        icon: () => (
-                          <NBaseIcon
-                            clsPrefix={mergedClsPrefix}
-                            class={`${mergedClsPrefix}-calendar-next-btn`}
-                          >
-                            {{ default: () => <ChevronRightIcon /> }}
-                          </NBaseIcon>
-                        )
-                      }}
-                    </NButton>
-                  </>
-                )
-              }}
-            </NButtonGroup>
+            {resolveSlotWithTypedProps(
+              $slots.extra,
+              {
+                year,
+                month: calendarMonth,
+                prev: handlePrevClick,
+                next: handleNextClick,
+                today: handleTodayClick
+              },
+              () => [
+                <NButtonGroup>
+                  {{
+                    default: () => (
+                      <>
+                        <NButton
+                          size="small"
+                          onClick={handlePrevClick}
+                          theme={mergedTheme.peers.Button}
+                          themeOverrides={mergedTheme.peerOverrides.Button}
+                        >
+                          {{
+                            icon: () => (
+                              <NBaseIcon
+                                clsPrefix={mergedClsPrefix}
+                                class={`${mergedClsPrefix}-calendar-prev-btn`}
+                              >
+                                {{ default: () => <ChevronLeftIcon /> }}
+                              </NBaseIcon>
+                            )
+                          }}
+                        </NButton>
+                        <NButton
+                          size="small"
+                          onClick={handleTodayClick}
+                          theme={mergedTheme.peers.Button}
+                          themeOverrides={mergedTheme.peerOverrides.Button}
+                        >
+                          {{ default: () => today }}
+                        </NButton>
+                        <NButton
+                          size="small"
+                          onClick={handleNextClick}
+                          theme={mergedTheme.peers.Button}
+                          themeOverrides={mergedTheme.peerOverrides.Button}
+                        >
+                          {{
+                            icon: () => (
+                              <NBaseIcon
+                                clsPrefix={mergedClsPrefix}
+                                class={`${mergedClsPrefix}-calendar-next-btn`}
+                              >
+                                {{ default: () => <ChevronRightIcon /> }}
+                              </NBaseIcon>
+                            )
+                          }}
+                        </NButton>
+                      </>
+                    )
+                  }}
+                </NButtonGroup>
+              ]
+            )}
           </div>
         </div>
         <div class={`${mergedClsPrefix}-calendar-dates`}>

diff --git a/src/calendar/src/interface.ts b/src/calendar/src/interface.ts
@@ -18,3 +18,11 @@ export interface CalendarHeaderSlotProps {
   year: number
   month: number
 }
+
+export interface CalendarExtraSlotProps {
+  year: number
+  month: number
+  prev: () => void
+  next: () => void
+  today: () => void
+}