diff --git a/components/slider/SliderTooltip.tsx b/components/slider/SliderTooltip.tsx index ec519fdc4..8ae7d7ad4 100644 --- a/components/slider/SliderTooltip.tsx +++ b/components/slider/SliderTooltip.tsx @@ -5,9 +5,9 @@ import Tooltip, { tooltipProps } from '../tooltip'; import raf from '../_util/raf'; export default defineComponent({ - props: tooltipProps, name: 'SliderTooltip', inheritAttrs: false, + props: tooltipProps, setup(props, { attrs, slots }) { const innerRef = ref(null); diff --git a/components/slider/index.tsx b/components/slider/index.tsx index f804b01f8..3df249280 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -1,12 +1,14 @@ -import { computed, CSSProperties, ref, VNodeTypes } from 'vue'; +import type { CSSProperties, VNodeTypes } from 'vue'; +import { computed, ref } from 'vue'; import { defineComponent } from 'vue'; import BaseMixin from '../_util/BaseMixin'; import VcSlider from '../vc-slider/src/Slider'; import VcRange from '../vc-slider/src/Range'; import VcHandle from '../vc-slider/src/Handle'; -import { VueNode, withInstall } from '../_util/type'; -import { PropType } from 'vue'; -import { TooltipPlacement } from '../tooltip/Tooltip'; +import type { VueNode } from '../_util/type'; +import { withInstall } from '../_util/type'; +import type { PropType } from 'vue'; +import type { TooltipPlacement } from '../tooltip/Tooltip'; import useConfigInject from '../_util/hooks/useConfigInject'; import SliderTooltip from './SliderTooltip'; import classNames from '../_util/classNames'; @@ -26,7 +28,6 @@ interface HandleGeneratorInfo { value?: number; dragging?: boolean; index: number; - rest?: any[]; } interface SliderRange { draggableTrack?: boolean; @@ -39,7 +40,7 @@ export type HandleGeneratorFn = (config: { type Value = [number, number] | number; const defaultTipFormatter = (value: number) => (typeof value === 'number' ? value.toString() : ''); -export const SliderProps = () => ({ +export const sliderProps = () => ({ prefixCls: String, tooltipPrefixCls: String, range: { type: [Boolean, Object] as PropType, default: undefined }, @@ -77,7 +78,7 @@ const Slider = defineComponent({ mixins: [BaseMixin], inheritAttrs: false, props: { - ...SliderProps(), + ...sliderProps(), }, emits: ['update:value', 'change', 'afterChange'], slots: ['mark'], diff --git a/components/vc-slider/src/Handle.tsx b/components/vc-slider/src/Handle.tsx index efdf37fd0..ccad32dd3 100644 --- a/components/vc-slider/src/Handle.tsx +++ b/components/vc-slider/src/Handle.tsx @@ -1,4 +1,5 @@ -import { computed, CSSProperties, defineComponent, ref } from 'vue'; +import type { CSSProperties } from 'vue'; +import { computed, defineComponent, ref } from 'vue'; import classNames from '../../_util/classNames'; import PropTypes from '../../_util/vue-types'; import addEventListener from '../../vc-util/Dom/addEventListener'; @@ -30,9 +31,9 @@ export default defineComponent({ clickFocused.value = true; } }; - const handleBlur = () => { + const handleBlur = (e: FocusEvent) => { clickFocused.value = false; - emit('blur'); + emit('blur', e); }; const handleKeyDown = () => { clickFocused.value = false; @@ -58,6 +59,7 @@ export default defineComponent({ focus, blur, clickFocus, + ref: handle, }); let onMouseUpListener = null; onMounted(() => { diff --git a/components/vc-slider/src/Range.tsx b/components/vc-slider/src/Range.tsx index 210b3092c..454ced3f1 100644 --- a/components/vc-slider/src/Range.tsx +++ b/components/vc-slider/src/Range.tsx @@ -7,7 +7,17 @@ import createSlider from './common/createSlider'; import * as utils from './utils'; import initDefaultProps from '../../_util/props-util/initDefaultProps'; -const trimAlignValue = ({ value, handle, bounds, props }) => { +const trimAlignValue = ({ + value, + handle, + bounds, + props, +}: { + value: number; + handle: number; + bounds?: number[]; + props: any; +}) => { const { allowCross, pushable } = props; const thershold = Number(pushable); const valInRange = utils.ensureValueInRange(value, props); @@ -332,7 +342,7 @@ const Range = { pushSurroundingHandles(bounds, handle) { const value = bounds[handle]; - let { pushable } = this; + const { pushable } = this; const threshold = Number(pushable); let direction = 0; diff --git a/components/vc-slider/src/Slider.tsx b/components/vc-slider/src/Slider.tsx index 73847d771..de353f599 100644 --- a/components/vc-slider/src/Slider.tsx +++ b/components/vc-slider/src/Slider.tsx @@ -28,7 +28,7 @@ const Slider = defineComponent({ const defaultValue = this.defaultValue !== undefined ? this.defaultValue : this.min; const value = this.value !== undefined ? this.value : defaultValue; return { - sValue: this.trimAlignValue(value), + sValue: (this as any).trimAlignValue(value), dragging: false, }; }, diff --git a/components/vc-slider/src/common/Steps.tsx b/components/vc-slider/src/common/Steps.tsx index 289d8141c..793a35ec4 100644 --- a/components/vc-slider/src/common/Steps.tsx +++ b/components/vc-slider/src/common/Steps.tsx @@ -1,6 +1,6 @@ -import { CSSProperties } from 'vue'; +import type { CSSProperties } from 'vue'; import classNames from '../../../_util/classNames'; -import { VueNode } from '../../../_util/type'; +import type { VueNode } from '../../../_util/type'; import warning from '../../../_util/warning'; const calcPoints = ( diff --git a/components/vc-slider/src/common/createSlider.tsx b/components/vc-slider/src/common/createSlider.tsx index 0c4ab86af..e12cbb234 100644 --- a/components/vc-slider/src/common/createSlider.tsx +++ b/components/vc-slider/src/common/createSlider.tsx @@ -66,7 +66,7 @@ export default function createSlider(Component) { step && Math.floor(step) === step ? isPointDiffEven : true, `Slider[max] - Slider[min] (${max - min}) should be a multiple of Slider[step] (${step})`, ); - this.handlesRefs = {}; + (this as any).handlesRefs = {}; return {}; }, mounted() { diff --git a/components/vc-slider/src/utils.ts b/components/vc-slider/src/utils.ts index 030358f17..124033575 100644 --- a/components/vc-slider/src/utils.ts +++ b/components/vc-slider/src/utils.ts @@ -1,11 +1,8 @@ import keyCode from '../../_util/KeyCode'; -import { findDOMNode } from '../../_util/props-util'; export function isEventFromHandle(e: { target: HTMLElement }, handles) { try { - return Object.keys(handles).some( - key => e.target === findDOMNode(handles[key]) || e.target === handles[key], - ); + return Object.keys(handles).some(key => e.target === handles[key].ref); } catch (error) { return false; }