feat(time-picker): props.presets预设快捷时间选择

src/time-picker/_example/presets.vue

@@ -0,0 +1,26 @@
+<template>
+  <t-space direction="vertical">
+    <t-time-picker v-model="time1" class="demos" :presets="{ 上午十一点: '11:00:00' }" />
+    <t-time-range-picker
+      v-model="time2"
+      class="demos"
+      clearable
+      format="HH:mm:ss"
+      allow-input
+      :presets="{ 下午: ['13:00:00', '18:00:00'] }"
+    />
+  </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const time1 = ref('20:22');
+const time2 = ref(['00:00:00', '23:59:59']);
+</script>
+
+<style scoped>
+.demos {
+  margin-top: 20px;
+}
+</style>

src/time-picker/panel/props.ts

@@ -4,6 +4,7 @@ import dayjs from 'dayjs';
 
 import * as Props from '../props';
 import { EPickerCols } from '../../_common/js/time-picker/const';
+import { TdTimePickerProps, TdTimeRangePickerProps } from '../type';
 
 // 布尔类型
 const BooleanType = {
@@ -47,6 +48,12 @@ export const panelProps = () => ({
       default: true,
     },
   },
+  activeIndex: {
+    type: Number,
+  },
+  presets: {
+    type: Object as PropType<TdTimePickerProps['presets'] | TdTimeRangePickerProps['presets']>,
+  },
   hideDisabledTime: {
     ...Props.default.hideDisabledTime,
   },

src/time-picker/panel/time-picker-panel.tsx

@@ -7,6 +7,8 @@ import { panelProps } from './props';
 import SinglePanel from './single-panel';
 import TButton from '../../button/button';
 import { useConfig, usePrefixClass } from '../../hooks/useConfig';
+import { TimePickerValue, TimeRangeValue } from '../type';
+import log from '../../_common/js/log';
 
 dayjs.extend(customParseFormat);
 
@@ -26,7 +28,7 @@ export default defineComponent({
     const triggerScroll = ref(false);
     const panelRef = ref();
     const { globalConfig } = useConfig('timePicker');
-    const showNowTimeBtn = computed(() => !!steps.value.filter((v) => v > 1).length);
+    const showNowTimeBtn = computed(() => !!steps.value.filter((v) => Number(v) > 1).length);
 
     const defaultValue = computed(() => {
       const isStepsSet = showNowTimeBtn.value;
@@ -50,6 +52,20 @@ export default defineComponent({
     const resetTriggerScroll = () => {
       triggerScroll.value = false;
     };
+    const handlePresetClick = (
+      presetValue: TimePickerValue | (() => TimePickerValue) | TimeRangeValue | (() => TimeRangeValue),
+    ) => {
+      const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
+      if (typeof props.activeIndex === 'number') {
+        if (Array.isArray(presetVal)) {
+          props.onChange(presetVal[props.activeIndex]);
+        } else {
+          log.error('TimePicker', `preset: ${props.presets} 预设值必须是数组!`);
+        }
+      } else {
+        props.onChange(presetVal);
+      }
+    };
 
     // 渲染后执行update 使面板滚动至当前时间位置
     onMounted(() => {
@@ -99,6 +115,18 @@ export default defineComponent({
                 {globalConfig.value.now}
               </TButton>
             ) : null}
+            {props.presets &&
+              Object.keys(props.presets).map((key: string) => (
+                <TButton
+                  key={key}
+                  theme="primary"
+                  size="small"
+                  variant="text"
+                  onClick={() => handlePresetClick(props.presets[key])}
+                >
+                  {key}
+                </TButton>
+              ))}
           </div>
         ) : null}
       </div>

src/time-picker/time-picker.en-US.md

@@ -8,7 +8,7 @@ name | type | default | description | required
 allowInput | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
-disabled | Boolean | false | \- | N
+disabled | Boolean | - | \- | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
@@ -21,7 +21,7 @@ steps | Array | [1, 1, 1] | Typescript：`Array<string \| number>` | N
 tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 value | String | - | `v-model` and `v-model:value` is supported。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
 defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
-onBlur | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
+onBlur | Function |  | Typescript：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/> | N
 onChange | Function |  | Typescript：`(value: TimePickerValue) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onFocus | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
@@ -33,7 +33,7 @@ onPick | Function |  | Typescript：`(value: TimePickerValue, context: { e: Mous
 
 name | params | description
 -- | -- | --
-blur | `(context: { value: TimePickerValue; e: FocusEvent })` | \-
+blur | `(context: { value: TimePickerValue } & SelectInputBlurContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/>
 change | `(value: TimePickerValue)` | \-
 close | `(context: { e: MouseEvent })` | \-
 focus | `(context: { value: TimePickerValue; e: FocusEvent })` | \-
@@ -48,7 +48,7 @@ name | type | default | description | required
 allowInput | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
-disabled | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
+disabled | Boolean / Array | - | Typescript：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N
 placeholder | String / Array | undefined | Typescript：`string \| Array<string>` | N

src/time-picker/time-picker.md

@@ -8,7 +8,7 @@
 allowInput | Boolean | false | 是否允许直接输入时间 | N
 clearable | Boolean | false | 是否允许清除选中值 | N
 disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
-disabled | Boolean | false | 是否禁用组件 | N
+disabled | Boolean | - | 是否禁用组件 | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
 inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
@@ -21,7 +21,7 @@ steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 
 tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 value | String | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
 defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
-onBlur | Function |  | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发，value 表示组件当前有效值 | N
+onBlur | Function |  | TS 类型：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`<br/>当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/> | N
 onChange | Function |  | TS 类型：`(value: TimePickerValue) => void`<br/>选中值发生变化时触发 | N
 onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>面板关闭时触发 | N
 onFocus | Function |  | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发，value 表示组件当前有效值 | N
@@ -33,7 +33,7 @@ onPick | Function |  | TS 类型：`(value: TimePickerValue, context: { e: Mouse
 
 名称 | 参数 | 描述
 -- | -- | --
-blur | `(context: { value: TimePickerValue; e: FocusEvent })` | 当输入框失去焦点时触发，value 表示组件当前有效值
+blur | `(context: { value: TimePickerValue } & SelectInputBlurContext)` | 当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/>
 change | `(value: TimePickerValue)` | 选中值发生变化时触发
 close | `(context: { e: MouseEvent })` | 面板关闭时触发
 focus | `(context: { value: TimePickerValue; e: FocusEvent })` | 输入框获得焦点时触发，value 表示组件当前有效值
@@ -48,7 +48,7 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | 面板选中值
 allowInput | Boolean | false | 是否允许直接输入时间 | N
 clearable | Boolean | false | 是否允许清除选中值 | N
 disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
-disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | N
+disabled | Boolean / Array | - | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
 placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array<string>` | N

src/time-picker/time-picker.tsx

@@ -4,7 +4,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { TimeIcon as TdTimeIcon } from 'tdesign-icons-vue-next';
 
 import TimePickerPanel from './panel/time-picker-panel';
-import TSelectInput, { TdSelectInputProps } from '../select-input';
+import TSelectInput, { SelectInputBlurContext } from '../select-input';
 import { formatInputValue, validateInputValue } from '../_common/js/time-picker/utils';
 
 import type { InputProps } from '../input';
@@ -61,14 +61,14 @@ export default defineComponent({
       currentValue.value = value;
     };
 
-    const handleInputBlur: TdSelectInputProps['onBlur'] = (value, { e }) => {
+    const handleInputBlur = (value: string, context: SelectInputBlurContext) => {
       if (allowInput.value) {
         const isValidTime = validateInputValue(currentValue.value, format.value);
         if (isValidTime) {
           setInnerValue(formatInputValue(currentValue.value, format.value));
         }
       }
-      props.onBlur?.({ value: String(value), e: e as FocusEvent });
+      props.onBlur?.({ value, inputValue: context.inputValue, e: context.e });
     };
 
     const handleClickConfirm = () => {
@@ -121,6 +121,7 @@ export default defineComponent({
               onChange={handlePanelChange}
               hideDisabledTime={props.hideDisabledTime}
               handleConfirmClick={handleClickConfirm}
+              presets={props.presets}
             />
           )}
         />

src/time-picker/time-range-picker.tsx

@@ -15,7 +15,7 @@ import { TimeRangeValue } from './interface';
 import { TimeRangePickerPartial } from './type';
 // hooks
 import useVModel from '../hooks/useVModel';
-import { useConfig, usePrefixClass } from '../hooks/useConfig';
+import { useCommonClassName, useConfig, usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import { useFormDisabled } from '../form/hooks';
 
@@ -29,7 +29,7 @@ export default defineComponent({
   setup(props) {
     const componentName = usePrefixClass('time-range-picker');
     const { globalConfig } = useConfig('timePicker');
-    const { classPrefix } = useConfig('classPrefix');
+    const { STATUS } = useCommonClassName();
     const { TimeIcon } = useGlobalIcon({ TimeIcon: TdTimeIcon });
 
     const disabled = useFormDisabled();
@@ -40,7 +40,7 @@ export default defineComponent({
     const inputClasses = computed(() => [
       `${componentName.value}__group`,
       {
-        [`${classPrefix.value}-is-focused`]: isShowPanel.value,
+        [STATUS.value.focused]: isShowPanel.value,
       },
     ]);
     const { value, modelValue, allowInput, format } = toRefs(props);
@@ -172,6 +172,8 @@ export default defineComponent({
               onPick={handleOnPick}
               handleConfirmClick={handleClickConfirm}
               position={currentPanelIdx.value === 0 ? 'start' : 'end'}
+              activeIndex={currentPanelIdx.value}
+              presets={props.presets}
             />
           )}
         />

src/time-picker/type.ts

@@ -32,7 +32,6 @@ export interface TdTimePickerProps {
   ) => Partial<{ hour: Array<number>; minute: Array<number>; second: Array<number>; millisecond: Array<number> }>;
   /**
    * 是否禁用组件
-   * @default false
    */
   disabled?: boolean;
   /**
@@ -98,7 +97,7 @@ export interface TdTimePickerProps {
   /**
    * 当输入框失去焦点时触发，value 表示组件当前有效值
    */
-  onBlur?: (context: { value: TimePickerValue; e: FocusEvent }) => void;
+  onBlur?: (context: { value: TimePickerValue } & SelectInputBlurContext) => void;
   /**
    * 选中值发生变化时触发
    */