refactor: slider to ts

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<any>(null);
 

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 type { VueNode } from '../_util/type';
-import { PropType } from 'vue';
+import { withInstall } from '../_util/type';
-import { TooltipPlacement } from '../tooltip/Tooltip';
+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<boolean | SliderRange>, default: undefined },
@@ -77,7 +78,7 @@ const Slider = defineComponent({
   mixins: [BaseMixin],
   inheritAttrs: false,
   props: {
-    ...SliderProps(),
+    ...sliderProps(),
   },
   emits: ['update:value', 'change', 'afterChange'],
   slots: ['mark'],

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(() => {

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;

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,
     };
   },

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 = (

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() {

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(
+    return Object.keys(handles).some(key => e.target === handles[key].ref);
-      key => e.target === findDOMNode(handles[key]) || e.target === handles[key],
-    );
   } catch (error) {
     return false;
   }