fix(DatePicker): fix date-picker presets slot usage

packages/components/date-picker/DatePicker.tsx

@@ -34,13 +34,14 @@ import type {
   DateValue,
   DatePickerYearChangeTrigger,
   DatePickerMonthChangeTrigger,
+  PresetDate,
 } from './type';
 import type { TagInputRemoveContext } from '../tag-input';
 
 export default defineComponent({
   name: 'TDatePicker',
   props,
-  setup(props) {
+  setup(props, { slots }) {
     const COMPONENT_NAME = usePrefixClass('date-picker');
 
     const {
@@ -368,7 +369,7 @@ export default defineComponent({
     }
 
     // 预设
-    function onPresetClick(presetValue: DateValue | (() => DateValue)) {
+    function onPresetClick(presetValue: DateValue | (() => DateValue), context: { preset: PresetDate; e: MouseEvent }) {
       const presetVal = isFunction(presetValue) ? presetValue() : presetValue;
       onChange?.(
         formatDate(presetVal, {
@@ -385,6 +386,7 @@ export default defineComponent({
         format: formatRef.value.format,
       });
       popupVisible.value = false;
+      props.onPresetClick?.(context);
     }
 
     function onYearChange(nextYear: number) {
@@ -461,7 +463,7 @@ export default defineComponent({
           popupVisible={!isReadOnly.value && popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
           {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])}
-          panel={() => <TSinglePanel {...panelProps.value} />}
+          panel={() => <TSinglePanel {...panelProps.value} v-slots={{ presets: slots.presets }} />}
           tagInputProps={{
             onRemove: onTagRemoveClick,
           }}

packages/components/date-picker/DateRangePicker.tsx

@@ -552,7 +552,7 @@ export default defineComponent({
           popupProps={popupProps.value}
           rangeInputProps={rangeInputProps.value}
           popupVisible={popupVisible.value}
-          panel={() => <TRangePanel {...panelProps.value} />}
+          panel={() => <TRangePanel {...panelProps.value} v-slots={{ presets: slots.presets }} />}
         />
       </div>
     );

packages/components/date-picker/_example/date-presets-alt.vue

@@ -1,5 +1,9 @@
 <template>
   <t-space direction="vertical">
+    <t-date-picker v-model="value" :presets="presets1" @preset-click="handlePresetClick" />
+    <t-date-picker v-model="value">
+      <template #presets> <t-button>今天</t-button> </template>
+    </t-date-picker>
     <t-date-range-picker v-model="range1" :presets="presets" />
     <t-date-range-picker v-model="range2" :presets="presets" enable-time-picker />
   </t-space>
@@ -9,12 +13,20 @@
 import { ref } from 'vue';
 import dayjs from 'dayjs';
 
+const presets1 = ref({
+  今天: dayjs().toDate(),
+});
 const presets = ref({
   最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
   最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
   今天: [dayjs().toDate(), dayjs().toDate()],
 });
 
+const value = ref('2022-01-01');
 const range1 = ref(['2022-01-01', '2022-08-08']);
 const range2 = ref(['2022-01-01 11:11:11', '2022-08-08 12:12:12']);
+
+const handlePresetClick = (preset) => {
+  console.log(preset);
+};
 </script>

packages/components/date-picker/components/base/Footer.tsx

@@ -6,7 +6,7 @@ import TButton from '../../../button';
 import type { TdDatePickerProps } from '../../type';
 
 export default defineComponent({
-  name: 'TDatePickerTable',
+  name: 'TDatePickerFooter',
   props: {
     enableTimePicker: Boolean,
     presetsPlacement: String,
@@ -25,7 +25,6 @@ export default defineComponent({
     const footerClass = computed(() => [COMPONENT_NAME.value, `${COMPONENT_NAME.value}--${props.presetsPlacement}`]);
 
     const renderPresets = () => {
-      if (!props.presets) return null;
       if (isPlainObject(props.presets))
         return Object.keys(props.presets).map((key: string) => (
           <TButton
@@ -39,22 +38,27 @@ export default defineComponent({
             {key}
           </TButton>
         ));
-      return renderTNodeJSX('presets');
+      const presetsNode = renderTNodeJSX('presets');
+      return presetsNode ?? null;
+    };
+    return () => {
+      const presetsContent = renderPresets();
+      const hasPresetsContent = Array.isArray(presetsContent) ? presetsContent.length > 0 : !!presetsContent;
+      return (
+        <div class={footerClass.value}>
+          {hasPresetsContent ? <div class={presetsClass.value}>{presetsContent}</div> : null}
+          {props.enableTimePicker && props.needConfirm && (
+            <TButton
+              disabled={!props.selectedValue}
+              size="small"
+              theme="primary"
+              onClick={(e: MouseEvent) => props.onConfirmClick?.({ e })}
+            >
+              {t(globalConfig.value.confirm)}
+            </TButton>
+          )}
+        </div>
+      );
     };
-    return () => (
-      <div class={footerClass.value}>
-        {<div class={presetsClass.value}>{renderPresets()}</div>}
-        {props.enableTimePicker && props.needConfirm && (
-          <TButton
-            disabled={!props.selectedValue}
-            size="small"
-            theme="primary"
-            onClick={(e: MouseEvent) => props.onConfirmClick?.({ e })}
-          >
-            {t(globalConfig.value.confirm)}
-          </TButton>
-        )}
-      </div>
-    );
   },
 });

packages/components/date-picker/components/panel/ExtraContent.tsx

@@ -14,9 +14,11 @@ export default defineComponent({
     onConfirmClick: Function,
     selectedValue: [String, Number, Array, Date] as PropType<TdDatePickerProps['value']>,
   },
-  setup(props) {
-    // 默认为 true
-    const showPanelFooter = computed(() => (props.enableTimePicker && props.needConfirm) || props.presets);
+  setup(props, { slots }) {
+    // 有 presets 对象、presets 插槽、或需要确认按钮时显示 footer
+    const showPanelFooter = computed(
+      () => (props.enableTimePicker && props.needConfirm) || props.presets || !!slots.presets,
+    );
 
     return () =>
       showPanelFooter.value ? (
@@ -28,6 +30,7 @@ export default defineComponent({
           presetsPlacement={props.presetsPlacement}
           selectedValue={props.selectedValue}
           needConfirm={props.needConfirm}
+          v-slots={{ presets: slots.presets }}
         />
       ) : null;
   },

packages/components/date-picker/components/panel/RangePanel.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
     onTimePickerChange: Function,
     needConfirm: Boolean,
   },
-  setup(props) {
+  setup(props, { slots }) {
     const COMPONENT_NAME = usePrefixClass('date-range-picker__panel');
     const { globalConfig } = useConfig('datePicker');
 
@@ -207,6 +207,7 @@ export default defineComponent({
             onConfirmClick={props.onConfirmClick}
             presetsPlacement={props.presetsPlacement}
             needConfirm={props.needConfirm}
+            v-slots={{ presets: slots.presets }}
           />
         ) : null}
         <div class={`${COMPONENT_NAME.value}-content-wrapper`}>
@@ -258,6 +259,7 @@ export default defineComponent({
             onConfirmClick={props.onConfirmClick}
             presetsPlacement={props.presetsPlacement}
             needConfirm={props.needConfirm}
+            v-slots={{ presets: slots.presets }}
           />
         ) : null}
       </div>

packages/components/date-picker/components/panel/SinglePanel.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
     onTimePickerChange: Function,
     disableTime: Function,
   },
-  setup(props) {
+  setup(props, { slots }) {
     const COMPONENT_NAME = usePrefixClass('date-picker__panel');
     const { globalConfig } = useConfig('datePicker');
 
@@ -129,9 +129,13 @@ export default defineComponent({
         ]}
         onClick={(e) => props.onPanelClick?.({ e })}
       >
-        {['top', 'left'].includes(props.presetsPlacement) ? <TExtraContent {...extraProps.value} /> : null}
+        {['top', 'left'].includes(props.presetsPlacement) ? (
+          <TExtraContent {...extraProps.value} v-slots={slots.presets ? { presets: slots.presets } : {}} />
+        ) : null}
         <TPanelContent {...panelContentProps.value} />
-        {['bottom', 'right'].includes(props.presetsPlacement) ? <TExtraContent {...extraProps.value} /> : null}
+        {['bottom', 'right'].includes(props.presetsPlacement) ? (
+          <TExtraContent {...extraProps.value} v-slots={slots.presets ? { presets: slots.presets } : {}} />
+        ) : null}
       </div>
     );
   },