@opensig/opendesign/es/slider/OSlider.vue.mjs

import { defineComponent, useSlots, reactive, computed, toRefs, onMounted, onUnmounted, provide, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, normalizeStyle, createVNode, createBlock, Fragment, renderList, withModifiers, renderSlot, createTextVNode, toDisplayString } from "vue";
import { OInputNumber } from "../input-number/index.mjs";
import _sfc_main$1 from "./OSliderButton.vue.mjs";
import _sfc_main$2 from "./OSliderMarker.vue.mjs";
import { isEmptySlot } from "../_utils/vue-utils.mjs";
import { useLifecycle } from "./composables/use-lifecycle.mjs";
import { useMarks } from "./composables/use-marks.mjs";
import { useSlide } from "./composables/use-slide.mjs";
import { useStops } from "./composables/use-stops.mjs";
import { useWatch } from "./composables/use-watch.mjs";
import { sliderInjectKey } from "./provide.mjs";
import { sliderEmits, sliderProps } from "./types.mjs";
const _hoisted_1 = { class: "o-slider-runway-wrap" };
const _hoisted_2 = { key: 1 };
const _hoisted_3 = {
  key: 2,
  class: "o-slider-marks"
};
const _hoisted_4 = {
  key: 0,
  class: "o-slider-input-wrap"
};
const _hoisted_5 = {
  key: 0,
  class: "o-slider-input-unit"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OSlider",
  props: sliderProps,
  emits: sliderEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const slots = useSlots();
    const initData = reactive({
      firstBtnVal: 0,
      secondBtnVal: 0,
      oldValue: 0,
      isDragging: false,
      sliderSize: 1
    });
    const {
      sliderRunway,
      firstButton: firstSliderBtn,
      secondButton: secondSliderBtn,
      sliderDisabled,
      minValue: minVal,
      maxValue: maxVal,
      runwayStyle: sliderRunwayStyle,
      barStyle: sliderBarStyle,
      resetSize: resetSliderSize,
      emitChange: onInputChange,
      onSliderWrapperPrevent,
      onSliderClick,
      onSliderDown,
      onSliderMarkerDown,
      setFirstValue,
      setSecondValue
    } = useSlide(props, initData, emit);
    const { stops, getStopStyle } = useStops(props, initData, minVal, maxVal);
    const markList = useMarks(props);
    useWatch(props, initData, minVal, maxVal, emit);
    const hasUnit = computed(() => {
      return !isEmptySlot(slots.unit) || props.unit;
    });
    const { slider } = useLifecycle(props, initData, resetSliderSize);
    const { firstBtnVal, secondBtnVal, sliderSize } = toRefs(initData);
    const updateDragging = (val) => {
      initData.isDragging = val;
    };
    onMounted(() => {
      var _a, _b;
      (_a = slider.value) == null ? void 0 : _a.addEventListener("touchstart", onSliderWrapperPrevent, { passive: false });
      (_b = slider.value) == null ? void 0 : _b.addEventListener("touchmove", onSliderWrapperPrevent, { passive: false });
    });
    onUnmounted(() => {
      var _a, _b;
      (_a = slider.value) == null ? void 0 : _a.removeEventListener("touchstart", onSliderWrapperPrevent);
      (_b = slider.value) == null ? void 0 : _b.removeEventListener("touchmove", onSliderWrapperPrevent);
    });
    provide(sliderInjectKey, {
      ...toRefs(props),
      sliderSize,
      disabled: sliderDisabled,
      emitChange: onInputChange,
      resetSize: resetSliderSize,
      updateDragging
    });
    __expose({
      /**
       * 点击滑轨时触发滑块移动
       */
      onSliderClick
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          ref_key: "slider",
          ref: slider,
          class: normalizeClass(["o-slider", {
            "o-slider-vertical": props.direction === "v",
            "o-slider-with-stops": props.showStops,
            "o-slider-with-input": props.showInput,
            "o-slider-disabled": unref(sliderDisabled)
          }])
        },
        [
          createElementVNode("div", _hoisted_1, [
            createElementVNode(
              "div",
              {
                ref_key: "sliderRunway",
                ref: sliderRunway,
                class: "o-slider-runway",
                style: normalizeStyle(unref(sliderRunwayStyle)),
                onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
                (...args) => unref(onSliderDown) && unref(onSliderDown)(...args)),
                onTouchstartPassive: _cache[1] || (_cache[1] = //@ts-ignore
                (...args) => unref(onSliderDown) && unref(onSliderDown)(...args))
              },
              [
                createElementVNode(
                  "div",
                  {
                    class: "o-slider-bar",
                    style: normalizeStyle(unref(sliderBarStyle))
                  },
                  null,
                  4
                  /* STYLE */
                ),
                createVNode(_sfc_main$1, {
                  ref_key: "firstSliderBtn",
                  ref: firstSliderBtn,
                  "model-value": unref(firstBtnVal),
                  direction: _ctx.direction,
                  "wrap-class": _ctx.wrapClass,
                  position: _ctx.position,
                  "show-solid-circle": _ctx.showStops,
                  "show-popover": _ctx.showPopover,
                  "onUpdate:modelValue": unref(setFirstValue)
                }, null, 8, ["model-value", "direction", "wrap-class", "position", "show-solid-circle", "show-popover", "onUpdate:modelValue"]),
                _ctx.range ? (openBlock(), createBlock(_sfc_main$1, {
                  key: 0,
                  ref_key: "secondSliderBtn",
                  ref: secondSliderBtn,
                  "model-value": unref(secondBtnVal),
                  direction: _ctx.direction,
                  "wrap-class": _ctx.wrapClass,
                  position: _ctx.position,
                  "show-solid-circle": _ctx.showStops,
                  "show-popover": _ctx.showPopover,
                  "onUpdate:modelValue": unref(setSecondValue)
                }, null, 8, ["model-value", "direction", "wrap-class", "position", "show-solid-circle", "show-popover", "onUpdate:modelValue"])) : createCommentVNode("v-if", true),
                _ctx.showStops ? (openBlock(), createElementBlock("div", _hoisted_2, [
                  (openBlock(true), createElementBlock(
                    Fragment,
                    null,
                    renderList(unref(stops), (item, key) => {
                      return openBlock(), createElementBlock(
                        "div",
                        {
                          key,
                          class: normalizeClass(["o-slider-stop", { "o-slider-stop-reached": item.reached }]),
                          style: normalizeStyle(unref(getStopStyle)(item.step))
                        },
                        null,
                        6
                        /* CLASS, STYLE */
                      );
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ])) : createCommentVNode("v-if", true),
                unref(markList).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
                  (openBlock(true), createElementBlock(
                    Fragment,
                    null,
                    renderList(unref(markList), (item, key) => {
                      return openBlock(), createBlock(_sfc_main$2, {
                        key,
                        mark: item.mark,
                        style: normalizeStyle(unref(getStopStyle)(item.position)),
                        onMousedown: withModifiers(($event) => unref(onSliderMarkerDown)(item.position), ["stop"])
                      }, null, 8, ["mark", "style", "onMousedown"]);
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ])) : createCommentVNode("v-if", true)
              ],
              36
              /* STYLE, NEED_HYDRATION */
            )
          ]),
          _ctx.showInput && !_ctx.range ? (openBlock(), createElementBlock("div", _hoisted_4, [
            createVNode(unref(OInputNumber), {
              ref: "input",
              class: "o-slider-input",
              round: "pill",
              controls: "none",
              "model-value": unref(firstBtnVal),
              step: _ctx.step,
              disabled: unref(sliderDisabled),
              min: _ctx.min,
              max: _ctx.max,
              size: props.inputSize,
              "clear-value": 0,
              "onUpdate:modelValue": unref(setFirstValue),
              onChange: unref(onInputChange)
            }, null, 8, ["model-value", "step", "disabled", "min", "max", "size", "onUpdate:modelValue", "onChange"]),
            hasUnit.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
              renderSlot(_ctx.$slots, "unit", {}, () => [
                createTextVNode(
                  toDisplayString(props.unit),
                  1
                  /* TEXT */
                )
              ])
            ])) : createCommentVNode("v-if", true)
          ])) : createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};