{"version":3,"file":"my-slider.vue2.mjs","sources":["../../../../../../src/components/my/slider/my-slider.vue"],"sourcesContent":["<template>\n    <div :class=\"['m-slider', { 'm-slider-disabled': disabled }]\" ref=\"slider\" :style=\"`width: ${totalWidth};`\">\n        <div class=\"u-slider-rail\" @click.self=\"disabled ? () => false : onClickPoint($event)\"></div>\n        <div\n            class=\"u-slider-track\"\n            :class=\"{ trackTransition: transition }\"\n            :style=\"`left: 0; right: auto; width: ${right}px;`\" />\n        <div\n            tabindex=\"0\"\n            ref=\"rightHandle\"\n            class=\"m-slider-handle\"\n            :class=\"{ handleTransition: transition }\"\n            :style=\"`left: ${right}px; right: auto; transform: translate(-50%, -50%);`\"\n            @mousedown=\"disabled ? () => false : onRightMouseDown()\"\n            @blur=\"tooltip && !disabled ? handlerBlur(rightTooltip) : () => false\">\n            <div v-if=\"tooltip\" ref=\"rightTooltip\" class=\"m-handle-tooltip\">\n                {{ rightValue }}\n                <div class=\"m-arrow\"></div>\n            </div>\n        </div>\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, nextTick } from 'vue-demi';\nimport { cancelRaf, rafTimeout } from '@myprint/design/utils/utils';\n\nconst props = withDefaults(defineProps<{\n    width?: string | number; // 宽度\n    min?: number; // 最小值\n    max?: number; // 最大值\n    disabled?: boolean; // 是否禁用\n    step?: number; // 步长，取值必须大于0，并且可被 (max - min) 整除\n    formatTooltip?: (value: number) => string | number; // Slider 会把当前值传给 formatTooltip，并在 Tooltip 中显示 formatTooltip 的返回值\n    tooltip?: boolean; // 是否展示 Tooltip\n    modelValue?: number | number[]; // (v-model)设置当前取值，当 range 为 false 时，使用 number，否则用 [number, number]\n}>(), {\n    width: '100%',\n    min: 0,\n    max: 100,\n    disabled: false,\n    step: 1,\n    formatTooltip: (value: number) => value,\n    tooltip: true,\n    modelValue: 0\n});\nconst transition = ref(false);\nconst timer = ref();\nconst right = ref(0); // 右滑动距离滑动条左端的距离\nconst slider = ref();\nconst sliderWidth = ref();\nconst rightHandle = ref(); // right handler 模板引用\nconst rightTooltip = ref(); // right tooltip 模板引用\nconst pixelStep = computed(() => {\n    // 滑块移动时的像素步长\n    return fixedDigit((sliderWidth.value / (props.max - props.min)) * props.step, 2);\n});\nconst precision = computed(() => {\n    // 获取 step 数值精度\n    const strNumArr = props.step.toString().split('.');\n    return strNumArr[1]?.length ?? 0;\n});\nconst totalWidth = computed(() => {\n    if (typeof props.width === 'number') {\n        return props.width + 'px';\n    } else {\n        return props.width;\n    }\n});\nconst sliderValue = computed(() => {\n    let high: number;\n    if (right.value === sliderWidth.value) {\n        if (sliderWidth.value == 0) {\n            high = props.modelValue as number;\n        } else {\n            high = props.max;\n        }\n    } else {\n        high = fixedDigit((right.value / pixelStep.value) * props.step + props.min, precision.value);\n        if (props.step > 1) {\n            high = Math.round(high / props.step) * props.step;\n        }\n        high = high > props.max ? props.max : high;\n        \n    }\n    return high;\n});\nconst rightValue = computed(() => {\n    return props.formatTooltip(sliderValue.value as number);\n});\nconst emits = defineEmits(['update:modelValue', 'change']);\nwatch(\n    () => props.width,\n    () => {\n        getSliderWidth();\n    },\n    {\n        flush: 'post'\n    }\n);\nwatch(\n    () => props.modelValue,\n    () => {\n        getPosition();\n    }\n);\nwatch(sliderValue, (to) => {\n    emits('update:modelValue', to);\n    emits('change', to);\n});\nonMounted(() => {\n    nextTick(() => {\n        getSliderWidth();\n        getPosition();\n    });\n});\n\nfunction checkValue(value: number): number {\n    if (value < props.min) {\n        return props.min;\n    }\n    if (value > props.max) {\n        return props.max;\n    }\n    return value;\n}\n\nfunction getSliderWidth() {\n    // console.log(slider.value.offsetWidth);\n    sliderWidth.value = slider.value.offsetWidth;\n}\n\nfunction getPosition() {\n    // console.log(props.modelValue);\n    right.value = fixedDigit(((checkValue(props.modelValue as number) - props.min) / props.step) * pixelStep.value, 2);\n}\n\nfunction fixedDigit(num: number, precision: number) {\n    return parseFloat(num.toFixed(precision));\n}\n\nfunction handlerBlur(tooltip: HTMLElement) {\n    tooltip && tooltip.classList.remove('show-handle-tooltip');\n}\n\nfunction handlerFocus(handler: HTMLElement, tooltip: HTMLElement) {\n    handler.focus();\n    if (props.tooltip) {\n        tooltip.classList.add('show-handle-tooltip');\n    }\n}\n\nfunction onClickPoint(e: any) {\n    // 点击滑动条，移动滑块\n    if (transition.value) {\n        cancelRaf(timer.value);\n        timer.value = null;\n    } else {\n        transition.value = true;\n    }\n    timer.value = rafTimeout(() => {\n        transition.value = false;\n    }, 300);\n    // 元素是absolute时，e.layerX是相对于自身元素左上角的水平位置\n    right.value = fixedDigit(Math.round(e.layerX / pixelStep.value) * pixelStep.value, 2); // 鼠标点击位置距离滑动输入条左端的水平距离\n    // 单滑块模式\n    handlerFocus(rightHandle.value, rightTooltip.value);\n}\n\nfunction onRightMouseDown() {\n    // 在滚动条上拖动右滑块\n    const leftX = slider.value.getBoundingClientRect().left; // 滑动条左端距离屏幕可视区域左边界的距离\n    document.onmousemove = (e: MouseEvent) => {\n        if (props.tooltip) {\n            rightTooltip.value.classList.add('show-handle-tooltip');\n        }\n        // e.clientX返回事件被触发时鼠标指针相对于浏览器可视窗口的水平坐标\n        const targetX = fixedDigit(Math.round((e.clientX - leftX) / pixelStep.value) * pixelStep.value, 2);\n        if (targetX > sliderWidth.value) {\n            right.value = sliderWidth.value;\n        } else {\n            // targetX < left\n            right.value = targetX < props.min ? props.min : targetX;\n        }\n    };\n    document.onmouseup = () => {\n        if (props.tooltip) {\n            rightTooltip.value && rightTooltip.value.classList.remove('show-handle-tooltip');\n        }\n        document.onmousemove = null;\n    };\n}\n</script>\n"],"names":["precision"],"mappings":"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"}