@type-dom/ui 0.1.1 → 0.1.2

package/src/components/form/td-slider/button/button.class.d.ts

@@ -1,6 +1,14 @@
 import { TypeDiv } from '@type-dom/framework';
-import { ITdSliderButton, ITdSliderButtonConfig } from './button.interface';
+import { Ref } from '@type-dom/signals';
+import { ITdSliderButton, SliderButtonProps } from './button.interface';
 export declare class TdSliderButton extends TypeDiv implements ITdSliderButton {
     className: 'TdSliderButton';
-    constructor(params?: ITdSliderButtonConfig);
+    props: SliderButtonProps;
+    onButtonDown?: (event?: MouseEvent | TouchEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    setPosition?: (newPosition: number) => Promise<void>;
+    hovering?: Ref<boolean>;
+    dragging?: Ref<boolean>;
+    constructor(params?: SliderButtonProps);
+    setup(): void;
 }

package/src/components/form/td-slider/button/button.class.js

@@ -2,34 +2,76 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSliderButton = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const td_tooltip_class_1 = require("../../../feedback/td-tooltip/td-tooltip.class");
-const td_slider_style_1 = require("../td-slider.style");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const use_slider_button_1 = require("../composables/use-slider-button");
+const button_const_1 = require("./button.const");
 class TdSliderButton extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdSliderButton';
-        this.style.addObj(td_slider_style_1.$sliderButtonWrapperStyle);
-        // this.style.addObj(params.wrapperStyle)
+        this.addEmits(button_const_1.sliderButtonEmits);
+        this.assignProps(button_const_1.sliderButtonProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('slider');
+        const initData = {
+            hovering: false,
+            dragging: false,
+            isClick: false,
+            startX: 0,
+            currentX: 0,
+            startY: 0,
+            currentY: 0,
+            startPosition: 0,
+            newPosition: 0,
+            oldValue: props.modelValue,
+        };
+        const tooltipPersistent = (0, signals_1.computed)(() => !showTooltip ? false : persistent);
+        const { disabled, button, tooltip, showTooltip, persistent, tooltipVisible, wrapperStyle, formatValue, handleMouseEnter, handleMouseLeave, onButtonDown, onKeyDown, setPosition, } = (0, use_slider_button_1.useSliderButton)(props, initData, emit);
+        const { hovering, dragging } = (0, signals_1.toRefs)(initData);
+        (0, framework_1.defineExpose)({
+            onButtonDown,
+            onKeyDown,
+            setPosition,
+            hovering,
+            dragging,
+        });
+        this.assignProps({
+            refDom: button,
+        });
+        this.attr.addObj({
+            class: [ns.e('button-wrapper'), { hover: hovering, dragging }],
+            tabindex: disabled ? -1 : 0,
+        });
+        this.style.addObj(wrapperStyle);
         this.addEvents({
-        // mouseenter: () => {},
-        // mouseleave: () => {},
-        // mousedown: () => {},
-        // focus: () => {},
-        // blur: () => {},
-        // keydown: () => {},
+            mouseenter: handleMouseEnter,
+            mouseleave: handleMouseLeave,
+            mousedown: onButtonDown,
+            focus: handleMouseEnter,
+            blur: handleMouseLeave,
+            keydown: onKeyDown,
         });
         this.addChild(new td_tooltip_class_1.TdTooltip({
-            placement: params.placement,
+            refEl: tooltip,
+            visible: tooltipVisible,
+            placement: props.placement,
             fallbackPlacements: ['top', 'bottom', 'right', 'left'],
             stopPopperMouseEvent: false,
-            // disabled: !showTooltip,
-            // persistent: showTooltip,
+            popperClass: props.tooltipClass,
+            disabled: !showTooltip,
+            persistent: tooltipPersistent.get(),
             slot: new framework_1.Div({
-                styleObj: td_slider_style_1.$sliderButtonStyle,
+                class: [ns.e('button'), { hover: hovering, dragging }],
             }),
             slots: {
                 content: new framework_1.Span({
-                // slot: formatValue,
+                    slot: formatValue,
                 }),
             },
         }));

package/src/components/form/td-slider/button/button.interface.d.ts

@@ -1,14 +1,18 @@
-import { TypeProps, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 import { Placement } from '@type-dom/popper';
+import { Ref } from '@type-dom/signals';
+import { TdSliderButton } from './button.class';
 export interface ITdSliderButton extends ITypeDiv {
     className: 'TdSliderButton';
 }
-export interface ITdSliderButtonConfig extends TypeProps {
+export interface SliderButtonProps extends TypeDivProps {
     modelValue?: number;
+    vModel?: Ref<number>;
     vertical?: boolean;
     tooltipClass?: string;
     placement?: Placement;
 }
+export type ButtonRefs = Record<'firstButton' | 'secondButton', Ref<TdSliderButton | undefined>>;
 export interface SliderButtonInitData {
     hovering: boolean;
     dragging: boolean;
@@ -19,5 +23,5 @@ export interface SliderButtonInitData {
     currentY: number;
     startPosition: number;
     newPosition: number;
-    oldValue: number;
+    oldValue: number | undefined;
 }

package/src/components/form/td-slider/composables/index.d.ts

@@ -0,0 +1,6 @@
+export * from './use-lifecycle';
+export * from './use-marks';
+export * from './use-slide';
+export * from './use-slider-button';
+export * from './use-stops';
+export * from './use-watch';

package/src/components/form/td-slider/composables/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./use-lifecycle"), exports);
+tslib_1.__exportStar(require("./use-marks"), exports);
+tslib_1.__exportStar(require("./use-slide"), exports);
+tslib_1.__exportStar(require("./use-slider-button"), exports);
+tslib_1.__exportStar(require("./use-stops"), exports);
+tslib_1.__exportStar(require("./use-watch"), exports);

package/src/components/form/td-slider/composables/use-lifecycle.d.ts

@@ -0,0 +1,4 @@
+import { SliderInitData, SliderProps } from '../td-slider.interface';
+export declare const useLifecycle: (props: SliderProps, initData: SliderInitData, resetSize: () => void) => {
+    sliderWrapper: import("@type-dom/signals").Signal<HTMLElement>;
+};

package/src/components/form/td-slider/composables/use-lifecycle.js

@@ -0,0 +1,43 @@
+"use strict";
+// import { nextTick, onMounted, ref } from 'vue'
+// import { useEventListener } from '@vueuse/core'
+// import { isArray, isNumber } from '@element-plus/utils'
+// import type { SliderInitData, SliderProps } from '../slider'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLifecycle = void 0;
+const tslib_1 = require("tslib");
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const useLifecycle = (props, initData, resetSize) => {
+    const sliderWrapper = (0, signals_1.signal)();
+    (0, framework_1.onMounted)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        if (props.range) {
+            if ((0, utils_1.isArray)(props.modelValue)) {
+                initData.firstValue.set(Math.max((0, signals_1.unref)(props.min), props.modelValue[0]));
+                initData.secondValue.set(Math.min((0, signals_1.unref)(props.max), props.modelValue[1]));
+            }
+            else {
+                initData.firstValue.set((0, signals_1.unref)(props.min));
+                initData.secondValue.set((0, signals_1.unref)(props.max));
+            }
+            initData.oldValue = [initData.firstValue.get(), initData.secondValue.get()];
+        }
+        else {
+            if (!(0, utils_1.isNumber)(props.modelValue) || Number.isNaN(props.modelValue)) {
+                initData.firstValue.set((0, signals_1.unref)(props.min));
+            }
+            else {
+                initData.firstValue.set(Math.min((0, signals_1.unref)(props.max), Math.max((0, signals_1.unref)(props.min), props.modelValue)));
+            }
+            initData.oldValue = initData.firstValue.get();
+        }
+        (0, framework_1.useEventListener)(window, 'resize', resetSize);
+        yield (0, framework_1.nextTick)();
+        resetSize();
+    }));
+    return {
+        sliderWrapper,
+    };
+};
+exports.useLifecycle = useLifecycle;

package/src/components/form/td-slider/composables/use-marks.d.ts

@@ -0,0 +1,7 @@
+import { SliderMarkerProps } from '../mark/mark.interface';
+import { SliderProps } from '../td-slider.interface';
+export interface Mark extends SliderMarkerProps {
+    point: number;
+    position: number;
+}
+export declare const useMarks: (props: SliderProps) => import("@type-dom/signals").Computed<Mark[]>;

package/src/components/form/td-slider/composables/use-marks.js

@@ -0,0 +1,27 @@
+"use strict";
+// import { computed } from 'vue'
+// import type { SliderProps } from '../slider'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMarks = void 0;
+const signals_1 = require("@type-dom/signals");
+const useMarks = (props) => {
+    return (0, signals_1.computed)(() => {
+        if (!props.marks) {
+            return [];
+        }
+        const marksKeys = Object.keys(props.marks);
+        return marksKeys
+            .map(Number.parseFloat)
+            .sort((a, b) => a - b)
+            .filter((point) => point <= (0, signals_1.unref)(props.max) && point >= (0, signals_1.unref)(props.min))
+            .map((point) => {
+            var _a;
+            return ({
+                point,
+                position: ((point - (0, signals_1.unref)(props.min)) * 100) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min)),
+                mark: (_a = props.marks) === null || _a === void 0 ? void 0 : _a[point],
+            });
+        });
+    });
+};
+exports.useMarks = useMarks;

package/src/components/form/td-slider/composables/use-slide.d.ts

@@ -1,3 +1,24 @@
-import { ITdSliderConfig, SliderInitData } from '../td-slider.interface';
-import { TdSlider } from '../td-slider.class';
-export declare const useSlide: (node: TdSlider, props: ITdSliderConfig, initData: SliderInitData, emit: any) => void;
+import { Ref } from '@type-dom/signals';
+import { IStyle } from '@type-dom/css-type';
+import { SliderProps, SliderInitData } from '../td-slider.interface';
+import { TdSliderButton } from '../button/button.class';
+export declare const useSlide: (props: SliderProps, initData: SliderInitData, emit: any) => {
+    tdFormItem: import("../../td-form/td-form.interface").FormItemContext;
+    slider: import("@type-dom/signals").Signal<HTMLElement>;
+    firstButton: import("@type-dom/signals").Signal<TdSliderButton>;
+    secondButton: import("@type-dom/signals").Signal<TdSliderButton>;
+    sliderDisabled: import("@type-dom/signals").Computed<boolean>;
+    minValue: import("@type-dom/signals").Computed<number>;
+    maxValue: import("@type-dom/signals").Computed<number>;
+    runwayStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
+    barStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
+    resetSize: () => void;
+    setPosition: (percent: number) => Ref<TdSliderButton | undefined>;
+    emitChange: () => Promise<void>;
+    onSliderWrapperPrevent: (event: TouchEvent) => void;
+    onSliderClick: (event: MouseEvent | TouchEvent) => void;
+    onSliderDown: (event?: MouseEvent | TouchEvent) => Promise<void>;
+    onSliderMarkerDown: (position: number) => void;
+    setFirstValue: (firstValue: number | undefined) => void;
+    setSecondValue: (secondValue: number) => void;
+};

package/src/components/form/td-slider/composables/use-slide.js

@@ -1,205 +1,168 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSlide = void 0;
-const td_form_const_1 = require("../../td-form/td-form.const");
-const useSlide = (node, props, initData, emit) => {
-    // const { form: elForm, formItem: elFormItem } = useFormItem()
-    const elForm = node.inject(td_form_const_1.formContextKey, undefined);
-    const elFormItem = node.inject(td_form_const_1.formItemContextKey, undefined);
-    let slider;
-    //
-    // const firstButton = ref<SliderButtonInstance>()
-    //
-    // const secondButton = ref<SliderButtonInstance>()
-    //
-    // const buttonRefs: ButtonRefs = {
-    //   firstButton,
-    //   secondButton,
-    // }
-    //
-    // const sliderDisabled = computed(() => {
-    //   return props.disabled || elForm?.disabled || false
-    // })
-    //
-    // const minValue = computed(() => {
-    //   return Math.min(initData.firstValue, initData.secondValue)
-    // })
-    //
-    // const maxValue = computed(() => {
-    //   return Math.max(initData.firstValue, initData.secondValue)
-    // })
-    //
-    // const barSize = computed(() => {
-    //   return props.range
-    //     ? `${
-    //         (100 * (maxValue.value - minValue.value)) / (props.max - props.min)
-    //       }%`
-    //     : `${
-    //         (100 * (initData.firstValue - props.min)) / (props.max - props.min)
-    //       }%`
-    // })
-    //
-    // const barStart = computed(() => {
-    //   return props.range
-    //     ? `${(100 * (minValue.value - props.min)) / (props.max - props.min)}%`
-    //     : '0%'
-    // })
-    //
-    // const runwayStyle = computed<CSSProperties>(() => {
-    //   return props.vertical ? { height: props.height } : {}
-    // })
-    //
-    // const barStyle = computed<CSSProperties>(() => {
-    //   return props.vertical
-    //     ? {
-    //         height: barSize.value,
-    //         bottom: barStart.value,
-    //       }
-    //     : {
-    //         width: barSize.value,
-    //         left: barStart.value,
-    //       }
-    // })
-    //
-    // const resetSize = () => {
-    //   if (slider.value) {
-    //     initData.sliderSize =
-    //       slider.value[`client${props.vertical ? 'Height' : 'Width'}`]
-    //   }
-    // }
-    //
-    // const getButtonRefByPercent = (
-    //   percent: number
-    // ): Ref<SliderButtonInstance | undefined> => {
-    //   const targetValue = props.min + (percent * (props.max - props.min)) / 100
-    //   if (!props.range) {
-    //     return firstButton
-    //   }
-    //   let buttonRefName: 'firstButton' | 'secondButton'
-    //   if (
-    //     Math.abs(minValue.value - targetValue) <
-    //     Math.abs(maxValue.value - targetValue)
-    //   ) {
-    //     buttonRefName =
-    //       initData.firstValue < initData.secondValue
-    //         ? 'firstButton'
-    //         : 'secondButton'
-    //   } else {
-    //     buttonRefName =
-    //       initData.firstValue > initData.secondValue
-    //         ? 'firstButton'
-    //         : 'secondButton'
-    //   }
-    //   return buttonRefs[buttonRefName]
-    // }
-    //
-    // const setPosition = (
-    //   percent: number
-    // ): Ref<SliderButtonInstance | undefined> => {
-    //   const buttonRef = getButtonRefByPercent(percent)
-    //   buttonRef.value!.setPosition(percent)
-    //   return buttonRef
-    // }
-    //
-    // const setFirstValue = (firstValue: number | undefined) => {
-    //   initData.firstValue = firstValue ?? props.min
-    //   _emit(
-    //     props.range ? [minValue.value, maxValue.value] : firstValue ?? props.min
-    //   )
-    // }
-    //
-    // const setSecondValue = (secondValue: number) => {
-    //   initData.secondValue = secondValue
-    //
-    //   if (props.range) {
-    //     _emit([minValue.value, maxValue.value])
-    //   }
-    // }
-    //
-    // const _emit = (val: Arrayable<number>) => {
-    //   emit(UPDATE_MODEL_EVENT, val)
-    //   emit(INPUT_EVENT, val)
-    // }
-    //
-    // const emitChange = async () => {
-    //   await nextTick()
-    //   emit(
-    //     CHANGE_EVENT,
-    //     props.range ? [minValue.value, maxValue.value] : props.modelValue
-    //   )
-    // }
-    //
-    // const handleSliderPointerEvent = (
-    //   event: MouseEvent | TouchEvent
-    // ): Ref<SliderButtonInstance | undefined> | undefined => {
-    //   if (sliderDisabled.value || initData.dragging) return
-    //   resetSize()
-    //   let newPercent = 0
-    //   if (props.vertical) {
-    //     const clientY =
-    //       (event as TouchEvent).touches?.item(0)?.clientY ??
-    //       (event as MouseEvent).clientY
-    //     const sliderOffsetBottom = slider.value!.getBoundingClientRect().bottom
-    //     newPercent = ((sliderOffsetBottom - clientY) / initData.sliderSize) * 100
-    //   } else {
-    //     const clientX =
-    //       (event as TouchEvent).touches?.item(0)?.clientX ??
-    //       (event as MouseEvent).clientX
-    //     const sliderOffsetLeft = slider.value!.getBoundingClientRect().left
-    //     newPercent = ((clientX - sliderOffsetLeft) / initData.sliderSize) * 100
-    //   }
-    //   if (newPercent < 0 || newPercent > 100) return
-    //   return setPosition(newPercent)
-    // }
-    //
-    // const onSliderWrapperPrevent = (event: TouchEvent) => {
-    //   if (
-    //     buttonRefs['firstButton'].value?.dragging ||
-    //     buttonRefs['secondButton'].value?.dragging
-    //   ) {
-    //     event.preventDefault()
-    //   }
-    // }
-    //
-    // const onSliderDown = async (event: MouseEvent | TouchEvent) => {
-    //   const buttonRef = handleSliderPointerEvent(event)
-    //   if (buttonRef) {
-    //     await nextTick()
-    //     buttonRef.value!.onButtonDown(event)
-    //   }
-    // }
-    //
-    // const onSliderClick = (event: MouseEvent | TouchEvent) => {
-    //   const buttonRef = handleSliderPointerEvent(event)
-    //   if (buttonRef) {
-    //     emitChange()
-    //   }
-    // }
-    //
-    // const onSliderMarkerDown = (position: number) => {
-    //   if (sliderDisabled.value || initData.dragging) return
-    //   setPosition(position)
-    // }
-    //
-    // return {
-    //   elFormItem,
-    //   slider,
-    //   firstButton,
-    //   secondButton,
-    //   sliderDisabled,
-    //   minValue,
-    //   maxValue,
-    //   runwayStyle,
-    //   barStyle,
-    //   resetSize,
-    //   setPosition,
-    //   emitChange,
-    //   onSliderWrapperPrevent,
-    //   onSliderClick,
-    //   onSliderDown,
-    //   onSliderMarkerDown,
-    //   setFirstValue,
-    //   setSecondValue,
-    // }
+const tslib_1 = require("tslib");
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const event_1 = require("../../../../constants/event");
+const use_form_item_1 = require("../../td-form/hooks/use-form-item");
+const useSlide = (props, initData, emit) => {
+    const { form: elForm, formItem: tdFormItem } = (0, use_form_item_1.useFormItem)();
+    const slider = (0, signals_1.signal)();
+    const firstButton = (0, signals_1.signal)();
+    const secondButton = (0, signals_1.signal)();
+    const buttonRefs = {
+        firstButton,
+        secondButton,
+    };
+    const sliderDisabled = (0, signals_1.computed)(() => {
+        return (0, signals_1.unref)(props.disabled) || (0, signals_1.unref)(elForm === null || elForm === void 0 ? void 0 : elForm.disabled) || false;
+    });
+    const minValue = (0, signals_1.computed)(() => {
+        return Math.min(initData.firstValue.get(), initData.secondValue.get());
+    });
+    const maxValue = (0, signals_1.computed)(() => {
+        return Math.max(initData.firstValue.get(), initData.secondValue.get());
+    });
+    const barSize = (0, signals_1.computed)(() => {
+        return props.range
+            ? `${(100 * (maxValue.get() - minValue.get())) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min))}%`
+            : `${(100 * (initData.firstValue.get() - (0, signals_1.unref)(props.min))) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min))}%`;
+    });
+    const barStart = (0, signals_1.computed)(() => {
+        return props.range
+            ? `${(100 * (minValue.get() - (0, signals_1.unref)(props.min))) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min))}%`
+            : '0%';
+    });
+    const runwayStyle = (0, signals_1.computed)(() => {
+        return props.vertical ? { height: props.height } : {};
+    });
+    const barStyle = (0, signals_1.computed)(() => {
+        return props.vertical
+            ? {
+                height: barSize.get(),
+                bottom: barStart.get(),
+            }
+            : {
+                width: barSize.get(),
+                left: barStart.get(),
+            };
+    });
+    const resetSize = () => {
+        if (slider.get()) {
+            initData.sliderSize.set(slider.get()[`client${props.vertical ? 'Height' : 'Width'}`]);
+        }
+    };
+    const getButtonRefByPercent = (percent) => {
+        const targetValue = (0, signals_1.unref)(props.min) + (percent * ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min))) / 100;
+        if (!props.range) {
+            return firstButton;
+        }
+        let buttonRefName;
+        if (Math.abs(minValue.get() - targetValue) <
+            Math.abs(maxValue.get() - targetValue)) {
+            buttonRefName =
+                initData.firstValue.get() < initData.secondValue.get()
+                    ? 'firstButton'
+                    : 'secondButton';
+        }
+        else {
+            buttonRefName =
+                initData.firstValue.get() > initData.secondValue.get()
+                    ? 'firstButton'
+                    : 'secondButton';
+        }
+        return buttonRefs[buttonRefName];
+    };
+    const setPosition = (percent) => {
+        var _a, _b;
+        const buttonRef = getButtonRefByPercent(percent);
+        (_b = (_a = buttonRef.get()) === null || _a === void 0 ? void 0 : _a.setPosition) === null || _b === void 0 ? void 0 : _b.call(_a, percent);
+        return buttonRef;
+    };
+    const setFirstValue = (firstValue) => {
+        initData.firstValue.set(firstValue !== null && firstValue !== void 0 ? firstValue : (0, signals_1.unref)(props.min));
+        _emit(props.range ? [minValue.get(), maxValue.get()] : firstValue !== null && firstValue !== void 0 ? firstValue : (0, signals_1.unref)(props.min));
+    };
+    const setSecondValue = (secondValue) => {
+        initData.secondValue.set(secondValue);
+        if (props.range) {
+            _emit([minValue.get(), maxValue.get()]);
+        }
+    };
+    const _emit = (val) => {
+        emit(event_1.UPDATE_MODEL_EVENT, val);
+        emit(event_1.INPUT_EVENT, val);
+    };
+    const emitChange = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        yield (0, framework_1.nextTick)();
+        emit(event_1.CHANGE_EVENT, props.range ? [minValue.get(), maxValue.get()] : props.modelValue);
+    });
+    const handleSliderPointerEvent = (event) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (sliderDisabled.get() || initData.dragging)
+            return;
+        resetSize();
+        let newPercent = 0;
+        if (props.vertical) {
+            const clientY = (_c = (_b = (_a = event.touches) === null || _a === void 0 ? void 0 : _a.item(0)) === null || _b === void 0 ? void 0 : _b.clientY) !== null && _c !== void 0 ? _c : event.clientY;
+            const sliderOffsetBottom = slider.get().getBoundingClientRect().bottom;
+            newPercent = ((sliderOffsetBottom - clientY) / initData.sliderSize.get()) * 100;
+        }
+        else {
+            const clientX = (_f = (_e = (_d = event.touches) === null || _d === void 0 ? void 0 : _d.item(0)) === null || _e === void 0 ? void 0 : _e.clientX) !== null && _f !== void 0 ? _f : event.clientX;
+            const sliderOffsetLeft = slider.get().getBoundingClientRect().left;
+            newPercent = ((clientX - sliderOffsetLeft) / initData.sliderSize.get()) * 100;
+        }
+        if (newPercent < 0 || newPercent > 100)
+            return;
+        return setPosition(newPercent);
+    };
+    const onSliderWrapperPrevent = (event) => {
+        var _a, _b;
+        if (((_a = buttonRefs['firstButton'].get()) === null || _a === void 0 ? void 0 : _a.dragging) ||
+            ((_b = buttonRefs['secondButton'].get()) === null || _b === void 0 ? void 0 : _b.dragging)) {
+            event.preventDefault();
+        }
+    };
+    const onSliderDown = (event) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const buttonRef = handleSliderPointerEvent(event);
+        if (buttonRef) {
+            yield (0, framework_1.nextTick)();
+            (_b = (_a = buttonRef.get()).onButtonDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        }
+    });
+    const onSliderClick = (event) => {
+        const buttonRef = handleSliderPointerEvent(event);
+        if (buttonRef) {
+            emitChange();
+        }
+    };
+    const onSliderMarkerDown = (position) => {
+        if (sliderDisabled.get() || initData.dragging)
+            return;
+        setPosition(position);
+    };
+    return {
+        tdFormItem,
+        slider,
+        firstButton,
+        secondButton,
+        sliderDisabled,
+        minValue,
+        maxValue,
+        runwayStyle,
+        barStyle,
+        resetSize,
+        setPosition,
+        emitChange,
+        onSliderWrapperPrevent,
+        onSliderClick,
+        onSliderDown,
+        onSliderMarkerDown,
+        setFirstValue,
+        setSecondValue,
+    };
 };
 exports.useSlide = useSlide;