chore: sync develop

src/date-picker/DatePicker.tsx

@@ -193,7 +193,7 @@ export default defineComponent({
     }
 
     // 预设
-    function onPresetClick(presetValue: DateValue | (() => DateValue)) {
+    function onPresetClick(presetValue: any, context: any) {
       const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
       onChange?.(
         formatDate(presetVal, {
@@ -205,6 +205,8 @@ export default defineComponent({
           trigger: 'preset',
         },
       );
+      props.onPresetClick?.(context);
+      emit('preset-click', context);
       popupVisible.value = false;
     }
 

src/date-picker/DatePickerPanel.tsx

@@ -32,7 +32,7 @@ export default defineComponent({
     timePickerProps: datePickerProps.timePickerProps,
     ...datePickerPanelProps,
   },
-  setup(props: TdDatePickerPanelProps, { emit }) {
+  setup(props: TdDatePickerPanelProps, { emit, attrs }) {
     const {
       cacheValue, value, year, month, time, onChange,
     } = useSingleValue(props);
@@ -168,14 +168,14 @@ export default defineComponent({
     }
 
     // 预设
-    function onPresetClick(presetValue: DateValue | (() => DateValue), { e, preset }: any) {
+    function onPresetClick(presetValue: any, context: any) {
       const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
       onChange?.(formatDate(presetVal, { format: formatRef.value.format }) as DateValue, {
         dayjsValue: parseToDayjs(presetVal, formatRef.value.format),
         trigger: 'preset',
       });
-      props.onPresetClick?.({ e, preset });
-      emit('preset-click', { e, preset });
+      props.onPresetClick?.(context);
+      emit('preset-click', context);
     }
 
     function onYearChange(nextYear: number) {
@@ -226,6 +226,8 @@ export default defineComponent({
       timePickerProps: props.timePickerProps,
       enableTimePicker: props.enableTimePicker,
       presetsPlacement: props.presetsPlacement,
+      // 该属性在单独使用此panel时无特别意义, 不应该暴露为props
+      popupVisible: (attrs?.popupVisible as Boolean) ?? true,
       onPanelClick,
       onCellClick,
       onJumperClick,

src/date-picker/DateRangePicker.tsx

@@ -21,13 +21,15 @@ import {
   initYearMonthTime,
 } from '../_common/js/date-picker/format';
 import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
+import useFormDisabled from '../hooks/useFormDisabled';
 
 export default defineComponent({
   name: 'TDateRangePicker',
   props,
   setup(props, { emit }) {
     const COMPONENT_NAME = usePrefixClass('date-range-picker');
     const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon });
+    const { formDisabled } = useFormDisabled();
 
     const {
       inputValue,
@@ -51,6 +53,7 @@ export default defineComponent({
       format: props.format,
       valueType: props.valueType,
     }));
+    const isDisabled = computed(() => formDisabled.value || props.disabled);
 
     // 记录面板是否选中过
     const isSelected = ref(false);
@@ -315,18 +318,18 @@ export default defineComponent({
       }
 
       // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
-      if (!isFirstValueSelected.value) {
+      if (nextValue.length === 1 || !isFirstValueSelected.value) {
         let nextIndex = notValidIndex;
         if (nextIndex === -1) nextIndex = activeIndex.value ? 0 : 1;
         activeIndex.value = nextIndex;
         isFirstValueSelected.value = true;
-      } else {
+      } else if (nextValue.length === 2) {
         popupVisible.value = false;
       }
     }
 
     // 预设
-    function onPresetClick(preset: any) {
+    function onPresetClick(preset: any, context: any) {
       let presetValue = preset;
       if (typeof preset === 'function') {
         presetValue = preset();
@@ -346,6 +349,8 @@ export default defineComponent({
           },
         );
         popupVisible.value = false;
+        props.onPresetClick?.(context);
+        emit('preset-click', context);
       }
     }
 
@@ -414,6 +419,7 @@ export default defineComponent({
       popupVisible,
       panelProps,
       CalendarIcon,
+      isDisabled,
     };
   },
   render() {
@@ -438,7 +444,7 @@ export default defineComponent({
     return (
       <div class={COMPONENT_NAME}>
         <TRangeInputPopup
-          disabled={this.disabled}
+          disabled={this.isDisabled}
           status={this.status}
           tips={this.tips || this.$scopedSlots.tips}
           inputValue={inputValue as string[]}

src/date-picker/DateRangePickerPanel.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
     panelPreselection: dateRangePickerProps.panelPreselection,
     ...dateRangePickerPanelProps,
   },
-  setup(props: TdDateRangePickerPanelProps, { emit }) {
+  setup(props: TdDateRangePickerPanelProps, { emit, attrs }) {
     const {
       value, year, month, time, cacheValue, isFirstValueSelected, onChange,
     } = useRangeValue(props);
@@ -274,7 +274,7 @@ export default defineComponent({
     }
 
     // 预设
-    function onPresetClick(preset: any) {
+    function onPresetClick(preset: any, context: any) {
       let presetValue = preset;
       if (typeof preset === 'function') {
         presetValue = preset();
@@ -292,6 +292,8 @@ export default defineComponent({
             trigger: 'preset',
           },
         );
+        props.onPresetClick?.(context);
+        emit('preset-click', context);
       }
     }
 
@@ -372,6 +374,8 @@ export default defineComponent({
       enableTimePicker: props.enableTimePicker,
       presetsPlacement: props.presetsPlacement,
       panelPreselection: props.panelPreselection,
+      // 该属性本身主要是联动父组件使用, 单独使用没有特别意义, 不应该暴露为props
+      popupVisible: (attrs?.popupVisible as Boolean) ?? true,
       onPanelClick,
       onCellClick,
       onCellMouseEnter,

src/date-picker/base/Footer.tsx

@@ -41,7 +41,8 @@ export default defineComponent({
                   key={key}
                   size="small"
                   variant="text"
-                  onClick={(e: MouseEvent) => this.onPresetClick?.(this.presets[key], { e })}
+                  onClick={(e: MouseEvent) => this.onPresetClick?.(this.presets[key], { e, preset: { [key]: this.presets[key] } })
+                  }
                 >
                   {key}
                 </TButton>

src/date-picker/panel/ExtraContent.tsx

@@ -10,7 +10,8 @@ export default defineComponent({
     presetsPlacement: String as PropType<TdDatePickerProps['presetsPlacement']>,
     onPresetClick: Function,
     onConfirmClick: Function,
-    selectedValue: String as PropType<DateValue>,
+    // 支持时间戳模式：时间戳为Number类型
+    selectedValue: [String, Number] as PropType<DateValue>,
   },
   setup(props) {
     const showPanelFooter = computed(() => props.enableTimePicker || props.presets);

src/hooks/useResizeObserver.ts

@@ -4,7 +4,7 @@ export default function useResizeObserver(
   container: Ref<HTMLElement>,
   callback: (data: ResizeObserverEntry[]) => void,
 ) {
-  const isSupport = window && window.ResizeObserver;
+  const isSupport = typeof window !== 'undefined' && window.ResizeObserver;
   // unit tests do not need any warn console; too many warns influence focusing on more important log info
   if (!isSupport) return;
 

src/image/index.ts

@@ -8,5 +8,6 @@ import './style';
 export type ImageProps = TdImageProps;
 export * from './type';
 
+// @ts-ignore
 export const Image = withInstall(mapProps(['value'])(_Image));
 export default Image;

src/menu/index.ts

@@ -31,7 +31,7 @@ export const Menu = withInstall(
     ],
     {
       model: { prop: 'value', event: 'change' },
-    },
+    }, // @ts-ignore
   )(_Menu),
 );
 
@@ -49,7 +49,7 @@ export const HeadMenu = withInstall(
     ],
     {
       model: { prop: 'value', event: 'change' },
-    },
+    }, // @ts-ignore
   )(_HeadMenu),
 );
 

src/select-input/useSingle.tsx

@@ -77,7 +77,7 @@ export default function useSingle(props: TdSelectInputProps, context: SetupConte
     const prefixContent = [renderTNode('label'), singleValueDisplay];
     const inputProps = {
       ...commonInputProps.value,
-      value: singleValueDisplay ? undefined : displayedValue,
+      value: singleValueDisplay && props.value ? undefined : displayedValue,
       label: prefixContent.length ? () => prefixContent : undefined,
       autoWidth: props.autoWidth,
       autofocus: props.autofocus,

src/select/option.tsx

@@ -54,7 +54,6 @@ export default defineComponent({
     isVirtual: Boolean,
     bufferSize: Number,
     index: Number,
-    panelElement: HTMLElement,
   },
   components: {
     TCheckbox: Checkbox,
@@ -68,7 +67,16 @@ export default defineComponent({
     const { classPrefix } = useConfig('classPrefix');
 
     const {
-      value, label, multiple, disabled, panelElement, scrollType, bufferSize, index, isCreatedOption,
+      value,
+      label,
+      multiple,
+      disabled,
+      // @ts-ignore
+      panelElement,
+      scrollType,
+      bufferSize,
+      index,
+      isCreatedOption,
     } = toRefs(props);
 
     const { hasLazyLoadHolder = null, tRowHeight = null } = useLazyLoad(

src/select/select-panel.tsx

@@ -358,6 +358,6 @@ export default defineComponent({
       );
     }
 
-    return <div>{this.renderPanelContent()}</div>;
+    return (this.renderPanelContent as Function)();
   },
 });

src/slider/slider-button.tsx

@@ -183,7 +183,7 @@ export default mixins(classPrefixMixins, Vue as VueConstructor<SliderInstanceTyp
         this.hideTooltipComponent();
       }
     },
-    onButtonDown(event: UIEvent) {
+    onButtonDown(event: MouseEvent | TouchEvent) {
       if (this.disabled) {
         return;
       }

src/table/_example/select-single.vue

@@ -15,7 +15,9 @@
         <p v-if="row.status === 0" class="status">健康</p>
         <p v-if="row.status === 1" class="status unhealth">异常</p>
       </template>
-      <template #op-column><p>操作</p></template>
+      <template #op-column>
+        <p>操作</p>
+      </template>
       <template #op="slotProps">
         <a class="link" @click="rehandleClickOp(slotProps)">管理</a>
         <a class="link" @click="rehandleClickOp(slotProps)">删除</a>
@@ -126,6 +128,7 @@ export default {
   .t-table__row--selected {
     background-color: #ecf2fe;
   }
+
   /** 最右侧选中图标示范 */
   .t-table__row--selected > td:last-child::after {
     content: '✅';
@@ -144,10 +147,12 @@ export default {
   cursor: pointer;
   margin-right: 15px;
 }
+
 .status {
   position: relative;
   color: #00a870;
   margin-left: 10px;
+
   &::before {
     position: absolute;
     top: 50%;
@@ -161,8 +166,10 @@ export default {
     border-radius: 50%;
   }
 }
+
 .status.unhealth {
   color: #e34d59;
+
   &::before {
     background-color: #e34d59;
   }

src/table/hooks/useFixed.ts

@@ -369,7 +369,7 @@ export default function useFixed(
     if (!rect) return;
     // 存在纵向滚动条，且固定表头时，需去除滚动条宽度
     const reduceWidth = isFixedHeader.value ? scrollbarWidth.value : 0;
-    tableWidth.value = Math.floor(rect.width - reduceWidth - (props.bordered ? 1 : 0));
+    tableWidth.value = rect.width - reduceWidth - (props.bordered ? 1 : 0);
     const elmRect = tableElmRef?.value?.getBoundingClientRect();
     tableElmWidth.value = elmRect?.width;
   };

src/table/thead.tsx

@@ -161,7 +161,10 @@ export default defineComponent({
           const resizeColumnListener = this.resizable || !canDragSort
             ? {
               mousedown: (e: MouseEvent) => {
-                this.columnResizeParams?.onColumnMousedown?.(e, col, index);
+                e.stopPropagation();
+                if (this.resizable) {
+                  this.columnResizeParams?.onColumnMousedown?.(e, col, index);
+                }
                 if (!canDragSort) {
                   const timer = setTimeout(() => {
                     const thList = this.theadRef.querySelectorAll('th');
@@ -170,7 +173,9 @@ export default defineComponent({
                   }, 10);
                 }
               },
-              mousemove: (e: MouseEvent) => this.columnResizeParams?.onColumnMouseover?.(e, col),
+              mousemove: (e: MouseEvent) => {
+                this.resizable && this.columnResizeParams?.onColumnMouseover?.(e, col);
+              },
             }
             : {};
           const content = isFunction(col.ellipsisTitle) ? col.ellipsisTitle(h, { col, colIndex: index }) : undefined;

src/tabs/tab-nav.tsx

@@ -96,12 +96,6 @@ export default mixins(classPrefixMixins, getGlobalIconMixins()).extend({
   },
   computed: {
     navs(): Array<VNode> {
-      // https://github.com/vuejs/jsx-vue2/releases/tag/v1.3.0
-      // In some legacy codebases, a standalone render function might rely on its this context rather than the runtime currentInstance. So there may be incompatibilities.
-      // add const h = this.$createElement to the beginning of the problematic function
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      // const h = this.$createElement;
       return this.panels.map((panel, index) => (
         <TTabNavItem
           ref={`tabItem${index}`}

src/tag-input/hooks/useHover.ts

@@ -1,8 +1,8 @@
-import { ref, SetupContext } from 'vue';
+import { ref, SetupContext, Ref } from 'vue';
 
 export interface UseHoverParams {
-  readonly: boolean;
-  disabled: boolean;
+  readonly: Ref<boolean>;
+  disabled: Ref<boolean>;
   onMouseenter: (context: { e: MouseEvent }) => void;
   onMouseleave: (context: { e: MouseEvent }) => void;
 }
@@ -14,14 +14,14 @@ export default function useHover(props: UseHoverParams, { emit }: SetupContext)
   const isHover = ref<boolean>(false);
 
   const addHover = (context: { e: MouseEvent }) => {
-    if (readonly || disabled) return;
+    if (readonly.value || disabled.value) return;
     isHover.value = true;
     onMouseenter?.(context);
     emit('mouseenter', context);
   };
 
   const cancelHover = (context: { e: MouseEvent }) => {
-    if (readonly || disabled) return;
+    if (readonly.value || disabled.value) return;
     isHover.value = false;
     onMouseleave?.(context);
     emit('mouseleave', context);