@opensig/opendesign/es/slider/composables/use-slide.mjs

import { shallowRef, ref, computed, nextTick } from "vue";
const useSlide = (props, initData, emit) => {
  const sliderRunway = shallowRef();
  const firstButton = ref();
  const secondButton = ref();
  const buttonRefs = {
    firstButton,
    secondButton
  };
  const sliderDisabled = computed(() => {
    return props.disabled;
  });
  const minValue = computed(() => {
    return Math.min(initData.firstBtnVal, initData.secondBtnVal);
  });
  const maxValue = computed(() => {
    return Math.max(initData.firstBtnVal, initData.secondBtnVal);
  });
  const barSize = computed(() => {
    return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstBtnVal - props.min) / (props.max - props.min)}%`;
  });
  const barStart = computed(() => {
    return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "-4px";
  });
  const runwayStyle = computed(() => {
    return props.direction === "v" ? { height: props.height } : {};
  });
  const barStyle = computed(() => {
    return props.direction === "v" ? {
      height: barSize.value,
      bottom: barStart.value
    } : {
      width: barSize.value,
      left: barStart.value
    };
  });
  const resetSize = () => {
    if (sliderRunway.value) {
      const rect = sliderRunway.value.getBoundingClientRect();
      initData.sliderSize = rect[props.direction === "v" ? "height" : "width"];
    }
  };
  const getButtonRefByPercent = (percent) => {
    const targetValue = props.min + percent * (props.max - props.min) / 100;
    if (!props.range) {
      return firstButton;
    }
    let buttonRefName;
    if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
      buttonRefName = initData.firstBtnVal < initData.secondBtnVal ? "firstButton" : "secondButton";
    } else {
      buttonRefName = initData.firstBtnVal > initData.secondBtnVal ? "firstButton" : "secondButton";
    }
    return buttonRefs[buttonRefName];
  };
  const setPosition = (percent) => {
    const buttonRef = getButtonRefByPercent(percent);
    buttonRef.value.setPosition(percent);
    return buttonRef;
  };
  const setFirstValue = (firstValue) => {
    initData.firstBtnVal = firstValue || props.min;
    _emit(props.range ? [minValue.value, maxValue.value] : firstValue || props.min);
  };
  const setSecondValue = (secondValue) => {
    initData.secondBtnVal = secondValue;
    if (props.range) {
      _emit([minValue.value, maxValue.value]);
    }
  };
  const _emit = (val) => {
    emit("update:modelValue", val);
    emit("input", val);
  };
  const emitChange = async () => {
    await nextTick();
    emit("change", props.range ? [minValue.value, maxValue.value] : props.modelValue);
  };
  const handleSliderPointerEvent = (event) => {
    var _a, _b, _c, _d;
    if (sliderDisabled.value || initData.isDragging) {
      return;
    }
    resetSize();
    let newPercent = 0;
    if (props.direction === "v") {
      const clientY = ((_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) ?? event.clientY;
      const sliderOffsetBottom = sliderRunway.value.getBoundingClientRect().bottom;
      newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
    } else {
      const clientX = ((_d = (_c = event.touches) == null ? void 0 : _c.item(0)) == null ? void 0 : _d.clientX) ?? event.clientX;
      const sliderOffsetLeft = sliderRunway.value.getBoundingClientRect().left;
      newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
    }
    if (newPercent < 0 || newPercent > 100) {
      return;
    }
    return setPosition(newPercent);
  };
  const onSliderWrapperPrevent = (event) => {
    var _a, _b;
    if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
      event.preventDefault();
    }
  };
  const onSliderDown = async (event) => {
    const buttonRef = handleSliderPointerEvent(event);
    if (buttonRef) {
      await nextTick();
      buttonRef.value.onButtonDown(event);
    }
  };
  const onSliderClick = (event) => {
    const buttonRef = handleSliderPointerEvent(event);
    if (buttonRef) {
      emitChange();
    }
  };
  const onSliderMarkerDown = (position) => {
    if (sliderDisabled.value || initData.isDragging) {
      return;
    }
    const buttonRef = setPosition(position);
    if (buttonRef) {
      emitChange();
    }
  };
  return {
    sliderRunway,
    firstButton,
    secondButton,
    sliderDisabled,
    minValue,
    maxValue,
    runwayStyle,
    barStyle,
    resetSize,
    setPosition,
    emitChange,
    onSliderWrapperPrevent,
    onSliderClick,
    onSliderDown,
    onSliderMarkerDown,
    setFirstValue,
    setSecondValue
  };
};
export {
  useSlide
};