@opensig/opendesign/lib/slider/OSlider.vue.js

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