@type-dom/ui 0.1.3 → 0.2.0

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

@@ -1,14 +0,0 @@
-import { TypeDiv } from '@type-dom/framework';
-import { Ref } from '@type-dom/signals';
-import { ITdSliderButton, SliderButtonProps } from './button.interface';
-export declare class TdSliderButton extends TypeDiv implements ITdSliderButton {
-    className: 'TdSliderButton';
-    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

@@ -1,80 +0,0 @@
-"use strict";
-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 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.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: handleMouseEnter,
-            mouseleave: handleMouseLeave,
-            mousedown: onButtonDown,
-            focus: handleMouseEnter,
-            blur: handleMouseLeave,
-            keydown: onKeyDown,
-        });
-        this.addChild(new td_tooltip_class_1.TdTooltip({
-            refEl: tooltip,
-            visible: tooltipVisible,
-            placement: props.placement,
-            fallbackPlacements: ['top', 'bottom', 'right', 'left'],
-            stopPopperMouseEvent: false,
-            popperClass: props.tooltipClass,
-            disabled: !showTooltip,
-            persistent: tooltipPersistent.get(),
-            slot: new framework_1.Div({
-                class: [ns.e('button'), { hover: hovering, dragging }],
-            }),
-            slots: {
-                content: new framework_1.Span({
-                    slot: formatValue,
-                }),
-            },
-        }));
-    }
-}
-exports.TdSliderButton = TdSliderButton;

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

@@ -1,7 +0,0 @@
-export declare const sliderButtonProps: {
-    readonly modelValue: 0;
-    readonly placement: "top";
-};
-export declare const sliderButtonEmits: {
-    "update:modelValue": (value: number) => boolean;
-};

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

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sliderButtonEmits = exports.sliderButtonProps = void 0;
-const utils_1 = require("@type-dom/utils");
-const event_1 = require("../../../../constants/event");
-exports.sliderButtonProps = {
-    modelValue: 0,
-    placement: 'top',
-};
-exports.sliderButtonEmits = {
-    [event_1.UPDATE_MODEL_EVENT]: (value) => (0, utils_1.isNumber)(value),
-};

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

@@ -1,27 +0,0 @@
-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 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;
-    isClick: boolean;
-    startX: number;
-    currentX: number;
-    startY: number;
-    currentY: number;
-    startPosition: number;
-    newPosition: number;
-    oldValue: number | undefined;
-}

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

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,6 +0,0 @@
-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

@@ -1,9 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,43 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,27 +0,0 @@
-"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,24 +0,0 @@
-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,168 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSlide = void 0;
-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;

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

@@ -1,20 +0,0 @@
-import { Computed } from '@type-dom/signals';
-import { AnyFn } from '@type-dom/utils';
-import { IStyle } from '@type-dom/css-type';
-import { TdTooltip } from '../../../feedback/td-tooltip/td-tooltip.class';
-import type { SliderButtonInitData, SliderButtonProps } from '../button/button.interface';
-export declare const useSliderButton: (props: SliderButtonProps, initData: SliderButtonInitData, emit: AnyFn) => {
-    disabled: boolean | undefined;
-    button: import("@type-dom/signals").Signal<HTMLDivElement>;
-    tooltip: import("@type-dom/signals").Signal<TdTooltip>;
-    tooltipVisible: import("@type-dom/signals").Signal<boolean>;
-    showTooltip: boolean | undefined;
-    persistent: boolean | undefined;
-    wrapperStyle: Computed<IStyle<string | 0, string>>;
-    formatValue: Computed<number | undefined>;
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
-    onButtonDown: (event?: MouseEvent | TouchEvent) => void;
-    onKeyDown: (event?: KeyboardEvent) => void;
-    setPosition: (newPosition: number) => Promise<void>;
-};