feat(date-picker-pro): 修改日历面板下侧插槽名称

Author: daviForevel

packages/devui-vue/devui/date-picker-pro/__tests__/date-picker-pro.spec.tsx

@@ -344,7 +344,7 @@ describe('date-picker-pro test', () => {
  wrapper.unmount();
  });
 
- it('date-picker-pro footerArea slot', async () => {
+ it('date-picker-pro footer slot', async () => {
  const datePickerProValue = ref<Date | string>('');
  const setToday = () => {
  datePickerProValue.value = new Date();
@@ -355,7 +355,7 @@ describe('date-picker-pro test', () => {
  <DDatePickerPro
  v-model={datePickerProValue.value}
  v-slots={{
- footerArea: () => (
+ footer: () => (
  <div>
  <DButton color="primary" onClick={setToday}>
  今天
@@ -373,10 +373,10 @@ describe('date-picker-pro test', () => {
  await nextTick();
  await nextTick();
  const pickerPanel = container.find(pickerPanelClass);
- const footerArea = pickerPanel.find(ns.e('panel-footer'));
- expect(footerArea.exists()).toBeTruthy();
+ const footer = pickerPanel.find(ns.e('panel-footer'));
+ expect(footer.exists()).toBeTruthy();
 
- const button = footerArea.find('button');
+ const button = footer.find('button');
  expect(button.exists()).toBeTruthy();
  await button.trigger('click');
 

packages/devui-vue/devui/date-picker-pro/__tests__/range-date-picker-pro.spec.tsx

@@ -3,7 +3,6 @@ import DRangeDatePickerPro from '../src/components/range-date-picker-pro';
 import { nextTick, ref } from 'vue';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import DButton from '../../button/src/button';
-import { divide } from 'lodash';
 
 const datePickerNs = useNamespace('date-picker-pro', true);
 const rangeDatePickerNs = useNamespace('range-date-picker-pro', true);
@@ -299,7 +298,7 @@ describe('range-date-picker-pro test', () => {
  wrapper.unmount();
  });
 
- it('range-date-picker-pro footerArea slot', async () => {
+ it('range-date-picker-pro footer slot', async () => {
  const datePickerProValue = ref<(Date | string)[]>(['', '']);
  const setToday = () => {
  datePickerProValue.value = [new Date(new Date().getTime()), new Date(new Date().getTime() + 1 * 24 * 3600 * 1000)];
@@ -310,7 +309,7 @@ describe('range-date-picker-pro test', () => {
  <DRangeDatePickerPro
  v-model={datePickerProValue.value}
  v-slots={{
- footerArea: () => (
+ footer: () => (
  <div>
  <d-button variant="solid" color="secondary" onClick={setToday}>
  今天
@@ -327,10 +326,10 @@ describe('range-date-picker-pro test', () => {
  await nextTick();
  await nextTick();
  const pickerPanel = container.find(pickerPanelClass);
- const footerArea = pickerPanel.find(datePickerNs.e('panel-footer'));
- expect(footerArea.exists()).toBeTruthy();
+ const footer = pickerPanel.find(datePickerNs.e('panel-footer'));
+ expect(footer.exists()).toBeTruthy();
 
- const button = footerArea.find('button');
+ const button = footer.find('button');
  expect(button.exists()).toBeTruthy();
  const date = new Date();
  await button.trigger('click');

packages/devui-vue/devui/date-picker-pro/src/components/date-picker-panel.tsx

@@ -35,8 +35,8 @@ export default defineComponent({
  {props.showTime && <TimerPickerPanel visible={props.visible} bindData={timeData.value} onSelectedTime={handlerSelectedTime} />}
  {ctx.slots?.rightArea && <div class={ns.e('panel-right-area')}>{ctx.slots?.rightArea()}</div>}
  </div>
- {ctx.slots?.footerArea && <div class={ns.e('panel-footer')}>{ctx.slots?.footerArea()}</div>}
- {!ctx.slots?.footerArea && props.showTime && (
+ {ctx.slots?.footer && <div class={ns.e('panel-footer')}>{ctx.slots?.footer()}</div>}
+ {!ctx.slots?.footer && props.showTime && (
  <div class={ns.e('panel-footer')}>
  <div class={ns.e('panel-footer-center')}>
  <Button variant="solid" onClick={handlerConfirm}>

packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx

@@ -40,7 +40,7 @@ export default defineComponent({
  return () => {
  const vSlots = {
  rightArea: ctx.slots?.rightArea && (() => renderSlot(useSlots(), 'rightArea')),
- footerArea: ctx.slots?.footerArea && (() => renderSlot(useSlots(), 'footerArea')),
+ footer: ctx.slots?.footer && (() => renderSlot(useSlots(), 'footer')),
  };
 
  return (

packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
  return () => {
  const vSlots = {
  rightArea: ctx.slots?.rightArea && (() => renderSlot(useSlots(), 'rightArea')),
- footerArea: ctx.slots?.footerArea && (() => renderSlot(useSlots(), 'footerArea')),
+ footer: ctx.slots?.footer && (() => renderSlot(useSlots(), 'footer')),
  };
  return (
  <div class={ns.b()} ref={containerRef}>

packages/devui-vue/docs/components/date-picker-pro/index.md

@@ -154,10 +154,10 @@ export default defineComponent({
  </slot>
  </template>
  </d-date-picker-pro>
- <div class="mb10">footer area</div>
+ <div class="mb10">footer</div>
  <d-date-picker-pro v-model="datePickerProValue2" class="mb20 wh250" :showTime="true">
- <template #footerArea>
- <slot name="footerArea">
+ <template #footer>
+ <slot name="footer">
  <div class="date-picker-footer">
  <d-button
  variant="solid"
@@ -371,10 +371,10 @@ export default defineComponent({
  </slot>
  </template>
  </d-range-date-picker-pro>
- <div class="mb10">footer area</div>
+ <div class="mb10">footer</div>
  <d-range-date-picker-pro ref="footerCustom" v-model="datePickerProValue2" class="mb20 wh250" :showTime="true">
- <template #footerArea>
- <slot name="footerArea">
+ <template #footer>
+ <slot name="footer">
  <div class="date-picker-footer">
  <d-button
  variant="solid"
@@ -461,10 +461,10 @@ export default defineComponent({
 
 ### DatePickerPro 插槽
 
-| 名称  | 说明 | 跳转 Demo |
-| :--------- | :------------------------------------------------------- | :---------------------------------------- |
-| rightArea  | 自定义 DatePickerPro 日历面板右侧内容， 如：日期快捷选项 | [自定义日历面板区域](#自定义日历面板区域) |
-| footerArea | 自定义 DatePickerPro 日历面板下侧内容 | [自定义日历面板区域](#自定义日历面板区域) |
+| 名称 | 说明 | 跳转 Demo |
+| :-------- | :------------------------------------------------------- | :---------------------------------------- |
+| rightArea | 自定义 DatePickerPro 日历面板右侧内容， 如：日期快捷选项 | [自定义日历面板区域](#自定义日历面板区域) |
+| footer  | 自定义 DatePickerPro 日历面板下侧内容 | [自定义日历面板区域](#自定义日历面板区域) |
 
 ### DatePickerPro 类型定义
 
@@ -513,7 +513,7 @@ type Format = string;
 
 ### RangeDatePickerPro 插槽
 
-| 名称  | 说明 | 跳转 Demo |
-| :--------- | :---------------------------------------------------------------- | :------------------------------------------------ |
-| rightArea  | 自定义 RangeDatePickerPro 日历面板右侧内容， 如：日期范围快捷选项 | [自定义日期范围面板区域](#自定义日期范围面板区域) |
-| footerArea | 自定义 RangeDatePickerPro 日历面板下侧内容 | [自定义日期范围面板区域](#自定义日期范围面板区域) |
+| 名称 | 说明 | 跳转 Demo |
+| :-------- | :---------------------------------------------------------------- | :------------------------------------------------ |
+| rightArea | 自定义 RangeDatePickerPro 日历面板右侧内容， 如：日期范围快捷选项 | [自定义日期范围面板区域](#自定义日期范围面板区域) |
+| footer  | 自定义 RangeDatePickerPro 日历面板下侧内容 | [自定义日期范围面板区域](#自定义日期范围面板区域) |