@type-dom/ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,6 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdSliderButton, ITdSliderButtonConfig } from './button.interface';
+export declare class TdSliderButton extends TypeDiv implements ITdSliderButton {
+    className: 'TdSliderButton';
+    constructor(params?: ITdSliderButtonConfig);
+}

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSliderButton = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_tooltip_class_1 = require("../../../feedback/td-tooltip/td-tooltip.class");
+const td_slider_style_1 = require("../td-slider.style");
+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.addEvents({
+        // mouseenter: () => {},
+        // mouseleave: () => {},
+        // mousedown: () => {},
+        // focus: () => {},
+        // blur: () => {},
+        // keydown: () => {},
+        });
+        this.addChild(new td_tooltip_class_1.TdTooltip({
+            placement: params.placement,
+            fallbackPlacements: ['top', 'bottom', 'right', 'left'],
+            stopPopperMouseEvent: false,
+            // disabled: !showTooltip,
+            // persistent: showTooltip,
+            slot: new framework_1.Div({
+                styleObj: td_slider_style_1.$sliderButtonStyle,
+            }),
+            slots: {
+                content: new framework_1.Span({
+                // slot: formatValue,
+                }),
+            },
+        }));
+    }
+}
+exports.TdSliderButton = TdSliderButton;

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

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

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

@@ -0,0 +1,23 @@
+import { TypeProps, ITypeDiv } from '@type-dom/framework';
+import { Placement } from '@type-dom/popper';
+export interface ITdSliderButton extends ITypeDiv {
+    className: 'TdSliderButton';
+}
+export interface ITdSliderButtonConfig extends TypeProps {
+    modelValue?: number;
+    vertical?: boolean;
+    tooltipClass?: string;
+    placement?: Placement;
+}
+export interface SliderButtonInitData {
+    hovering: boolean;
+    dragging: boolean;
+    isClick: boolean;
+    startX: number;
+    currentX: number;
+    startY: number;
+    currentY: number;
+    startPosition: number;
+    newPosition: number;
+    oldValue: number;
+}

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

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

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

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

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

@@ -0,0 +1,205 @@
+"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,
+    // }
+};
+exports.useSlide = useSlide;

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

@@ -0,0 +1,4 @@
+import '@element-plus/components/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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/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/style/index.d.ts

@@ -0,0 +1,4 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/slider.scss';
+import '../../../../components/form/td-input-number/style';
+import '../../../../components/feedback/td-tooltip/style';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../theme-chalk/slider.scss");
+require("../../../../components/form/td-input-number/style");
+require("../../../../components/feedback/td-tooltip/style");

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

@@ -0,0 +1,13 @@
+import { TypeDivProps, TypeDiv, TypeNode } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
+export interface ITdSliderMarkerConfig extends TypeDivProps {
+    mark: string | {
+        style: IStyle;
+        label: string | TypeNode;
+    };
+}
+export declare class TdSliderMarker extends TypeDiv {
+    className: 'TdSliderMarker';
+    props: ITdSliderMarkerConfig;
+    constructor(params: ITdSliderMarkerConfig);
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSliderMarker = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const td_slider_style_1 = require("./td-slider.style");
+class TdSliderMarker extends framework_1.TypeDiv {
+    constructor(params) {
+        super();
+        this.className = 'TdSliderMarker';
+        const label = (0, utils_1.isString)(params.mark) ? params.mark : params.mark.label;
+        this.style.addObj(td_slider_style_1.$sliderMarksTextStyle);
+        const style = (0, utils_1.isString)(params.mark) ? undefined : params.mark.style;
+        this.style.addObj(style);
+        this.slotChildren(label);
+        this.props = this.useParams(params);
+    }
+}
+exports.TdSliderMarker = TdSliderMarker;

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

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

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

@@ -1 +1,55 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSlider = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_slider_interface_1 = require("./td-slider.interface");
+const td_slider_style_1 = require("./td-slider.style");
+class TdSlider extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdSlider';
+        this.style.addObj(td_slider_style_1.$sliderStyle);
+        this.addEmits(td_slider_interface_1.sliderEmits);
+    }
+    setup() {
+        const props = this.props;
+        const initData = {
+            firstValue: 0,
+            secondValue: 0,
+            oldValue: 0,
+            dragging: false,
+            sliderSize: 1,
+        };
+        // const {
+        //   elFormItem,
+        //   slider,
+        //   firstButton,
+        //   secondButton,
+        //   sliderDisabled,
+        //   minValue,
+        //   maxValue,
+        //   runwayStyle,
+        //   barStyle,
+        //   resetSize,
+        //   emitChange,
+        //   onSliderWrapperPrevent,
+        //   onSliderClick,
+        //   onSliderDown,
+        //   onSliderMarkerDown,
+        //   setFirstValue,
+        //   setSecondValue,
+        // } = useSlide(props, initData, this.emit)
+        // const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
+        //   formItemContext: elFormItem,
+        // })
+        //
+        // const isLabeledByFormItem = params.isLabeledByFormItem ?? true;
+        // const groupLabel = params.range ? params.range.label : undefined;
+        // this.attr.addObj({
+        //   role: params.range ? 'group' : undefined,
+        //   ariaLabel: params.range && !isLabeledByFormItem ? groupLabel : undefined,
+        //   ariaLabelledBy: params.range && isLabeledByFormItem ? tdFormItem?.labelId : undefined,
+        // })
+    }
+}
+exports.TdSlider = TdSlider;

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

@@ -0,0 +1,11 @@
+export declare const sliderProps: {
+    readonly modelValue: 0;
+    readonly min: 0;
+    readonly max: 100;
+    readonly step: 1;
+    readonly showInputControls: true;
+    readonly showTooltip: true;
+    readonly debounce: 300;
+    readonly placement: "top";
+    readonly validateEvent: true;
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliderProps = void 0;
+exports.sliderProps = {
+    modelValue: 0,
+    min: 0,
+    max: 100,
+    step: 1,
+    showInputControls: true,
+    showTooltip: true,
+    debounce: 300,
+    placement: 'top',
+    validateEvent: true,
+    // ...useAriaProps(['ariaLabel']),
+};

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

@@ -0,0 +1,117 @@
+import { AnyFn, TypeProps, ITypeDiv } from '@type-dom/framework';
+import { Placement } from '@type-dom/popper';
+import { Arrayable } from '@type-dom/utils';
+import { ComponentSize } from '../../../constants/size';
+import { ITdSliderMarkerConfig } from './td-slider-marker';
+export interface ITdSlider extends ITypeDiv {
+    className: 'TdSlider';
+}
+type SliderMarks = Record<number, string | ITdSliderMarkerConfig['mark']>;
+export interface SliderInitData {
+    firstValue: number;
+    secondValue: number;
+    oldValue?: Arrayable<number>;
+    dragging: boolean;
+    sliderSize: number;
+}
+export interface ITdSliderConfig extends TypeProps {
+    /**
+     * @description binding value
+     */
+    modelValue?: number | number[];
+    id?: string;
+    /**
+     * @description minimum value
+     */
+    min?: number;
+    /**
+     * @description maximum value
+     */
+    max?: number;
+    /**
+     * @description step size
+     */
+    step?: number;
+    /**
+     * @description whether to display an input box, works when `range` is false
+     */
+    showInput?: boolean;
+    /**
+     * @description whether to display control buttons when `show-input` is true
+     */
+    showInputControls?: boolean;
+    /**
+     * @description size of the slider wrapper, will not work in vertical mode
+     */
+    size?: ComponentSize;
+    /**
+     * @description size of the input box, when set `size`, the default is the value of `size`
+     */
+    inputSize?: ComponentSize;
+    /**
+     * @description whether to display breakpoints
+     */
+    showStops?: boolean;
+    /**
+     * @description whether to display tooltip value
+     */
+    showTooltip?: boolean;
+    /**
+     * @description format to display tooltip value
+     */
+    formatTooltip?: AnyFn;
+    /**
+     * @description whether Slider is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether to select a range
+     */
+    range?: boolean;
+    /**
+     * @description vertical mode
+     */
+    vertical?: boolean;
+    /**
+     * @description slider height, required in vertical mode
+     */
+    height?: string;
+    /**
+     * @description debounce delay when typing, in milliseconds, works when `show-input` is true
+     */
+    debounce?: number;
+    /**
+     * @description when `range` is true, screen reader label for the start of the range
+     */
+    rangeStartLabel?: string;
+    /**
+     * @description when `range` is true, screen reader label for the end of the range
+     */
+    rangeEndLabel?: string;
+    /**
+     * @description format to display the `aria-valuenow` attribute for screen readers
+     */
+    formatValueText?: AnyFn;
+    /**
+     * @description custom class name for the tooltip
+     */
+    tooltipClass?: string;
+    /**
+     * @description position of Tooltip
+     */
+    placement?: Placement;
+    /**
+     * @description marks, type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style
+     */
+    marks?: SliderMarks;
+    /**
+     * @description whether to trigger form validation
+     */
+    validateEvent?: boolean;
+}
+export declare const sliderEmits: {
+    "update:modelValue": (value: Arrayable<number>) => value is number | number[];
+    input: (value: Arrayable<number>) => value is number | number[];
+    change: (value: Arrayable<number>) => value is number | number[];
+};
+export {};

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

@@ -1 +1,11 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliderEmits = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+const isValidValue = (value) => (0, utils_1.isNumber)(value) || ((0, utils_1.isArray)(value) && value.every(utils_1.isNumber));
+exports.sliderEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: isValidValue,
+    [event_1.INPUT_EVENT]: isValidValue,
+    [event_1.CHANGE_EVENT]: isValidValue,
+};

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

@@ -0,0 +1,26 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $sliderHeight: {
+    large: number;
+    default: number;
+    small: number;
+};
+export declare const $slider: {
+    mainBgColor: string;
+    runwayBgColor: string;
+    stopBgColor: string;
+    disabledColor: string;
+    borderRadius: string;
+    height: string;
+    buttonSize: string;
+    buttonWrapperSize: string;
+    buttonWrapperOffset: string;
+};
+export declare const $sliderStyle: IStyle;
+export declare const $sliderRunwayStyle: IStyle;
+export declare const $sliderInputStyle: IStyle;
+export declare const $sliderBarStyle: IStyle;
+export declare const $sliderButtonWrapperStyle: IStyle;
+export declare const $sliderButtonStyle: IStyle;
+export declare const $sliderStopStyle: IStyle;
+export declare const $sliderMarksStyle: IStyle;
+export declare const $sliderMarksTextStyle: IStyle;