@type-dom/ui 0.1.1 → 0.1.3

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

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

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

@@ -0,0 +1,266 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSliderButton = void 0;
+const tslib_1 = require("tslib");
+// import { computed, inject, nextTick, ref, watch } from 'vue'
+// import { debounce } from 'lodash-unified'
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const aria_1 = require("../../../../constants/aria");
+const event_1 = require("../../../../constants/event");
+// import type { TooltipInstance } from '@element-plus/components/tooltip'
+// import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
+const constants_1 = require("../constants");
+const useTooltip = (props, formatTooltip, // Ref<SliderProps['formatTooltip']>, edit by me
+showTooltip) => {
+    const tooltip = (0, signals_1.signal)();
+    const tooltipVisible = (0, signals_1.signal)(false);
+    const enableFormat = (0, signals_1.computed)(() => {
+        return formatTooltip instanceof Function;
+    });
+    const formatValue = (0, signals_1.computed)(() => {
+        var _a, _b;
+        return ((enableFormat.get() && (formatTooltip === null || formatTooltip === void 0 ? void 0 : formatTooltip((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()))) ||
+            ((_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()));
+    });
+    const displayTooltip = (0, utils_1.debounce)(() => {
+        if (showTooltip) {
+            (tooltipVisible.set(true));
+        }
+    }, 50);
+    const hideTooltip = (0, utils_1.debounce)(() => {
+        if (showTooltip)
+            (tooltipVisible.set(false));
+    }, 50);
+    return {
+        tooltip,
+        tooltipVisible,
+        formatValue,
+        displayTooltip,
+        hideTooltip,
+    };
+};
+const useSliderButton = (props, initData, emit) => {
+    const { disabled, min: minValue, // todo is a function, not a number ???? 变量被提升了。
+    max, step, showTooltip, persistent, precision, sliderSize, formatTooltip, emitChange, resetSize, updateDragging, } = (0, framework_1.inject)(constants_1.sliderContextKey);
+    // console.warn('sliderContextKey props step is ', step);
+    const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
+    const button = (0, signals_1.signal)();
+    const currentPosition = (0, signals_1.computed)(() => {
+        return `${((props.vModel.get() - (0, signals_1.unref)(minValue)) / ((0, signals_1.unref)(max) - (0, signals_1.unref)(minValue))) * 100}%`;
+    });
+    const wrapperStyle = (0, signals_1.computed)(() => {
+        return props.vertical
+            ? { bottom: currentPosition.get() }
+            : { left: currentPosition.get() };
+    });
+    const handleMouseEnter = () => {
+        initData.hovering = true;
+        displayTooltip();
+    };
+    const handleMouseLeave = () => {
+        initData.hovering = false;
+        if (!initData.dragging) {
+            hideTooltip();
+        }
+    };
+    const onButtonDown = (event) => {
+        var _a;
+        // console.warn('onButtonDown');
+        if (disabled)
+            return;
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        onDragStart(event);
+        window.addEventListener('mousemove', onDragging);
+        window.addEventListener('touchmove', onDragging);
+        window.addEventListener('mouseup', onDragEnd);
+        window.addEventListener('touchend', onDragEnd);
+        window.addEventListener('contextmenu', onDragEnd);
+        (_a = button.get()) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const incrementPosition = (amount) => {
+        // console.warn('incrementPosition . ');
+        if (disabled)
+            return;
+        initData.newPosition =
+            Number.parseFloat(currentPosition.get()) +
+                (amount / ((0, signals_1.unref)(max) - (0, signals_1.unref)(minValue))) * 100;
+        setPosition(initData.newPosition);
+        emitChange();
+    };
+    const onLeftKeyDown = () => {
+        incrementPosition(-step);
+    };
+    const onRightKeyDown = () => {
+        incrementPosition(step);
+    };
+    const onPageDownKeyDown = () => {
+        incrementPosition(-step * 4);
+    };
+    const onPageUpKeyDown = () => {
+        incrementPosition(step * 4);
+    };
+    const onHomeKeyDown = () => {
+        if (disabled)
+            return;
+        setPosition(0);
+        emitChange();
+    };
+    const onEndKeyDown = () => {
+        if (disabled)
+            return;
+        setPosition(100);
+        emitChange();
+    };
+    const onKeyDown = (event) => {
+        let isPreventDefault = true;
+        switch (event === null || event === void 0 ? void 0 : event.code) {
+            case aria_1.EVENT_CODE.left:
+            case aria_1.EVENT_CODE.down:
+                onLeftKeyDown();
+                break;
+            case aria_1.EVENT_CODE.right:
+            case aria_1.EVENT_CODE.up:
+                onRightKeyDown();
+                break;
+            case aria_1.EVENT_CODE.home:
+                onHomeKeyDown();
+                break;
+            case aria_1.EVENT_CODE.end:
+                onEndKeyDown();
+                break;
+            case aria_1.EVENT_CODE.pageDown:
+                onPageDownKeyDown();
+                break;
+            case aria_1.EVENT_CODE.pageUp:
+                onPageUpKeyDown();
+                break;
+            default:
+                isPreventDefault = false;
+                break;
+        }
+        if (isPreventDefault)
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+    };
+    const getClientXY = (event) => {
+        let clientX;
+        let clientY;
+        if (event === null || event === void 0 ? void 0 : event.type.startsWith('touch')) {
+            clientY = event.touches[0].clientY;
+            clientX = event.touches[0].clientX;
+        }
+        else {
+            clientY = event.clientY;
+            clientX = event.clientX;
+        }
+        return {
+            clientX,
+            clientY,
+        };
+    };
+    const onDragStart = (event) => {
+        // console.warn('onDragStart');
+        initData.dragging = true;
+        initData.isClick = true;
+        const { clientX, clientY } = getClientXY(event);
+        if (props.vertical) {
+            initData.startY = clientY;
+        }
+        else {
+            initData.startX = clientX;
+        }
+        initData.startPosition = Number.parseFloat(currentPosition.get());
+        initData.newPosition = initData.startPosition;
+    };
+    const onDragging = (event) => {
+        // console.warn('onDragging');
+        if (initData.dragging) {
+            initData.isClick = false;
+            displayTooltip();
+            resetSize();
+            let diff;
+            const { clientX, clientY } = getClientXY(event);
+            if (props.vertical) {
+                initData.currentY = clientY;
+                diff = ((initData.startY - initData.currentY) / sliderSize.get()) * 100;
+            }
+            else {
+                initData.currentX = clientX;
+                diff = ((initData.currentX - initData.startX) / sliderSize.get()) * 100;
+            }
+            initData.newPosition = initData.startPosition + diff;
+            setPosition(initData.newPosition);
+        }
+    };
+    const onDragEnd = () => {
+        // console.warn('onDragEnd');
+        if (initData.dragging) {
+            /*
+             * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
+             * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
+             */
+            setTimeout(() => {
+                initData.dragging = false;
+                if (!initData.hovering) {
+                    hideTooltip();
+                }
+                if (!initData.isClick) {
+                    setPosition(initData.newPosition);
+                }
+                emitChange();
+            }, 0);
+            window.removeEventListener('mousemove', onDragging);
+            window.removeEventListener('touchmove', onDragging);
+            window.removeEventListener('mouseup', onDragEnd);
+            window.removeEventListener('touchend', onDragEnd);
+            window.removeEventListener('contextmenu', onDragEnd);
+        }
+    };
+    const setPosition = (newPosition) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        // console.warn('setPosition');
+        if (newPosition === null || Number.isNaN(+newPosition))
+            return;
+        if (newPosition < 0) {
+            newPosition = 0;
+        }
+        else if (newPosition > 100) {
+            newPosition = 100;
+        }
+        const lengthPerStep = 100 / (((0, signals_1.unref)(max) - (0, signals_1.unref)(minValue)) / step);
+        const steps = Math.round(newPosition / lengthPerStep);
+        let value = steps * lengthPerStep * ((0, signals_1.unref)(max) - (0, signals_1.unref)(minValue)) * 0.01 + (0, signals_1.unref)(minValue);
+        value = Number.parseFloat(value.toFixed(precision.get()));
+        if (value !== props.modelValue) {
+            emit(event_1.UPDATE_MODEL_EVENT, value);
+        }
+        if (!initData.dragging && props.modelValue !== initData.oldValue) {
+            initData.oldValue = props.modelValue;
+        }
+        yield (0, framework_1.nextTick)();
+        if (initData.dragging)
+            displayTooltip();
+        (_b = tooltip === null || tooltip === void 0 ? void 0 : (_a = tooltip.get()).updatePopper) === null || _b === void 0 ? void 0 : _b.call(_a);
+    });
+    (0, signals_1.watch)(() => initData.dragging, (val) => {
+        updateDragging(val);
+    });
+    (0, framework_1.useEventListener)(button, 'touchstart', onButtonDown, { passive: false });
+    return {
+        disabled,
+        button,
+        tooltip,
+        tooltipVisible,
+        showTooltip,
+        persistent,
+        wrapperStyle,
+        formatValue,
+        handleMouseEnter,
+        handleMouseLeave,
+        onButtonDown,
+        onKeyDown,
+        setPosition,
+    };
+};
+exports.useSliderButton = useSliderButton;

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

@@ -0,0 +1,9 @@
+import { Computed } from '@type-dom/signals';
+import { IStyle } from '@type-dom/css-type';
+import { SliderInitData, SliderProps } from '../td-slider.interface';
+type Stops = {
+    stops: Computed<number[]>;
+    getStopStyle: (position: number) => IStyle;
+};
+export declare const useStops: (props: SliderProps, initData: SliderInitData, minValue: Computed<number>, maxValue: Computed<number>) => Stops;
+export {};

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

@@ -0,0 +1,45 @@
+"use strict";
+// import { computed } from 'vue'
+// import { debugWarn } from '@element-plus/utils'
+// import type { CSSProperties, ComputedRef } from 'vue'
+// import type { SliderInitData, SliderProps } from '../slider'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStops = void 0;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const useStops = (props, initData, minValue, maxValue) => {
+    // console.error('useStops . ');
+    // console.error('props.step is ', props.step);
+    const stops = (0, signals_1.computed)(() => {
+        if (!props.showStops || (0, signals_1.unref)(props.min) > (0, signals_1.unref)(props.max))
+            return [];
+        if (props.step === 0) {
+            (0, utils_1.debugWarn)('TdSlider', 'step should not be 0.');
+            return [];
+        }
+        const stopCount = ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min)) / props.step;
+        const stepWidth = (100 * props.step) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min));
+        const result = Array.from({ length: stopCount - 1 }).map((_, index) => (index + 1) * stepWidth);
+        if (props.range) {
+            return result.filter((step) => {
+                return (step <
+                    (100 * (minValue.get() - (0, signals_1.unref)(props.min))) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min)) ||
+                    step > (100 * (maxValue.get() - (0, signals_1.unref)(props.min))) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min)));
+            });
+        }
+        else {
+            return result.filter((step) => step >
+                (100 * (initData.firstValue.get() - (0, signals_1.unref)(props.min))) / ((0, signals_1.unref)(props.max) - (0, signals_1.unref)(props.min)));
+        }
+    });
+    const getStopStyle = (position) => {
+        return props.vertical
+            ? { bottom: `${position}%` }
+            : { left: `${position}%` };
+    };
+    return {
+        stops,
+        getStopStyle,
+    };
+};
+exports.useStops = useStops;

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

@@ -0,0 +1,4 @@
+import { Computed } from '@type-dom/signals';
+import { FormItemContext } from '../../td-form/td-form.interface';
+import { SliderInitData, SliderProps } from '../td-slider.interface';
+export declare const useWatch: (props: SliderProps, initData: SliderInitData, minValue: Computed<number>, maxValue: Computed<number>, emit: any, elFormItem: FormItemContext) => void;

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWatch = void 0;
+// import { watch } from 'vue'
+// import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
+// import { debugWarn, isArray, isNumber, throwError } from '@element-plus/utils'
+// import type { ComputedRef, SetupContext } from 'vue'
+// import type { Arrayable } from '@element-plus/utils'
+// import type { FormItemContext } from '@element-plus/components/form'
+// import type { SliderEmits, SliderInitData, SliderProps } from '../slider'
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const event_1 = require("../../../../constants/event");
+const useWatch = (props, initData, minValue, maxValue, emit, //SetupContext<SliderEmits>['emit'],
+elFormItem) => {
+    const _emit = (val) => {
+        emit(event_1.UPDATE_MODEL_EVENT, val);
+        emit(event_1.INPUT_EVENT, val);
+    };
+    const valueChanged = () => {
+        if (props.range) {
+            return ![minValue.get(), maxValue.get()].every((item, index) => item === initData.oldValue[index]);
+        }
+        else {
+            return props.modelValue !== initData.oldValue;
+        }
+    };
+    const setValues = () => {
+        var _a, _b;
+        if ((0, signals_1.unref)(props.min) > (0, signals_1.unref)(props.max)) {
+            (0, utils_1.throwError)('Slider', 'min should not be greater than max.');
+        }
+        const val = props.modelValue;
+        if (props.range && (0, utils_1.isArray)(val)) {
+            if (val[1] < (0, signals_1.unref)(props.min)) {
+                _emit([(0, signals_1.unref)(props.min), (0, signals_1.unref)(props.min)]);
+            }
+            else if (val[0] > (0, signals_1.unref)(props.max)) {
+                _emit([(0, signals_1.unref)(props.max), (0, signals_1.unref)(props.max)]);
+            }
+            else if (val[0] < (0, signals_1.unref)(props.min)) {
+                _emit([(0, signals_1.unref)(props.min), val[1]]);
+            }
+            else if (val[1] > (0, signals_1.unref)(props.max)) {
+                _emit([val[0], (0, signals_1.unref)(props.max)]);
+            }
+            else {
+                initData.firstValue.set(val[0]);
+                initData.secondValue.set(val[1]);
+                if (valueChanged()) {
+                    if (props.validateEvent) {
+                        (_a = elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.validate) === null || _a === void 0 ? void 0 : _a.call(elFormItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
+                    }
+                    initData.oldValue = val.slice();
+                }
+            }
+        }
+        else if (!props.range && (0, utils_1.isNumber)(val) && !Number.isNaN(val)) {
+            if (val < (0, signals_1.unref)(props.min)) {
+                _emit((0, signals_1.unref)(props.min));
+            }
+            else if (val > (0, signals_1.unref)(props.max)) {
+                _emit((0, signals_1.unref)(props.max));
+            }
+            else {
+                initData.firstValue.set(val);
+                if (valueChanged()) {
+                    if (props.validateEvent) {
+                        (_b = elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.validate) === null || _b === void 0 ? void 0 : _b.call(elFormItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
+                    }
+                    initData.oldValue = val;
+                }
+            }
+        }
+    };
+    setValues();
+    (0, signals_1.watch)(() => initData.dragging, (val) => {
+        if (!val) {
+            setValues();
+        }
+    });
+    (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, (val, oldVal) => {
+        if (initData.dragging ||
+            ((0, utils_1.isArray)(val) &&
+                (0, utils_1.isArray)(oldVal) &&
+                val.every((item, index) => item === oldVal[index]) &&
+                initData.firstValue.get() === val[0] &&
+                initData.secondValue.get() === val[1])) {
+            return;
+        }
+        setValues();
+    });
+    (0, signals_1.watch)(() => [(0, signals_1.unref)(props.min), (0, signals_1.unref)(props.max)], () => {
+        setValues();
+    });
+};
+exports.useWatch = useWatch;

package/src/components/form/td-slider/constants.d.ts

@@ -0,0 +1,11 @@
+import { Computed, Ref } from '@type-dom/signals';
+import { InjectionKey } from '@type-dom/framework';
+import type { SliderProps } from './td-slider.interface';
+export interface SliderContext extends SliderProps {
+    precision: Computed<number>;
+    sliderSize: Ref<number>;
+    emitChange: () => void;
+    resetSize: () => void;
+    updateDragging: (val: boolean) => void;
+}
+export declare const sliderContextKey: InjectionKey<SliderContext>;

package/src/components/form/td-slider/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliderContextKey = void 0;
+exports.sliderContextKey = Symbol('sliderContextKey');

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

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { SliderMarkerProps } from './mark.interface';
+export declare class TdSliderMarker extends TypeDiv {
+    className: 'TdSliderMarker';
+    props: SliderMarkerProps;
+    constructor(params?: SliderMarkerProps);
+    setup(): void;
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSliderMarker = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+class TdSliderMarker extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdSliderMarker';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('slider');
+        const label = (0, signals_1.computed)(() => {
+            return (0, utils_1.isString)(props.mark) ? props.mark : props.mark.label;
+        });
+        const style = (0, signals_1.computed)(() => (0, utils_1.isString)(props.mark) ? undefined : props.mark.style);
+        this.attr.addClass(ns.e('marks-text'));
+        this.style.addObj(style);
+        // this.addChild(new TextNode(label)); // 会重复
+        this.slotChildren(label);
+    }
+}
+exports.TdSliderMarker = TdSliderMarker;

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

@@ -0,0 +1,8 @@
+import { IStyle } from '@type-dom/css-type';
+import { TypeDivProps } from '@type-dom/framework';
+export interface SliderMarkerProps extends TypeDivProps {
+    mark?: string | {
+        style: IStyle;
+        label: any;
+    };
+}

package/src/components/form/td-slider/style/css.d.ts

@@ -1,4 +1,4 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-slider.css';
 import '@element-plus/components/input-number/style/css';
 import '@element-plus/components/tooltip/style/css';

package/src/components/form/td-slider/style/css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-slider.css");
 require("@element-plus/components/input-number/style/css");
 require("@element-plus/components/tooltip/style/css");

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

@@ -1,7 +1,9 @@
 import { TypeDiv } from '@type-dom/framework';
-import { ITdSlider, ITdSliderConfig } from './td-slider.interface';
+import { ITdSlider, SliderProps } from './td-slider.interface';
+import './style/index';
 export declare class TdSlider extends TypeDiv implements ITdSlider {
     className: 'TdSlider';
-    constructor(params?: ITdSliderConfig);
+    props: SliderProps;
+    constructor(params?: SliderProps);
     setup(): void;
 }