import { defineComponent as a, useCssVars as r, ref as c, watch as b, openBlock as u, createElementBlock as O, createVNode as m, unref as f } from "vue";
import { cloneDeep as g, isEqual as v } from "lodash";
import h from "@vueform/slider";
import "@vueform/slider/themes/default.css";
const T = { class: "zerov-widget-slider" }, H = a({ name: "zv-interaction-slider" }), E = /* @__PURE__ */ a({
  ...H,
  props: {
    basicOption: {},
    useEvents: {}
  },
  emits: ["on-change"],
  setup(l, { emit: t }) {
    r((i) => ({
      "2d030a40": i.basicOption.css.sliderBg,
      "65515f18": i.basicOption.css.sliderConnectBg,
      ce4f56aa: i.basicOption.css.sliderHeight + "px",
      "2a384a40": i.basicOption.css.sliderRadius + "px",
      "49ece248": i.basicOption.css.sliderHandleBg,
      "1b937e4a": i.basicOption.css.sliderHandleWidth + "px",
      bd36b0ba: i.basicOption.css.sliderHandleHeight + "px",
      "191fa450": i.basicOption.css.sliderHandleRadius + "px",
      a4c0c9cc: i.basicOption.css.sliderHandleRingWidth + "px",
      "7823a3b0": i.basicOption.css.sliderHandleRingColor,
      "10d74d95": i.basicOption.css.sliderTooltipFontSize + "px",
      "2da020fe": i.basicOption.css.sliderTooltipFontWeight + "px",
      "4f957566": i.basicOption.css.sliderTooltipBg,
      "5f3ef95b": i.basicOption.css.sliderTooltipColor,
      "019425b3": i.basicOption.css.sliderTooltipRadius + "px",
      "98e20748": i.basicOption.css.sliderTooltipPy + "px",
      "4badcf7d": i.basicOption.css.sliderTooltipPx + "px",
      d65c76aa: i.basicOption.css.sliderTooltipArrowSize + "px",
      "5247e2f0": i.basicOption.css.sliderTooltipDistance + "px"
    }));
    const n = t, s = c(20), e = l;
    s.value = e.basicOption.slider.defaultValue || 0, b(() => g(e.basicOption), (i, o) => {
      v(i, o) || (s.value = e.basicOption.slider.defaultValue || 0);
    }, {
      deep: !0
    });
    const p = (i) => {
      n("on-change", i, s.value), window.SHJParseEvent(e.useEvents, "on-change", {
        data: s.value,
        event: i
      });
    };
    return (i, o) => (u(), O("div", T, [
      m(f(h), {
        modelValue: s.value,
        "onUpdate:modelValue": o[0] || (o[0] = (d) => s.value = d),
        class: "slider",
        min: i.basicOption.slider.min,
        max: i.basicOption.slider.max,
        step: i.basicOption.slider.step,
        tooltips: i.basicOption.slider.tooltips,
        "show-tooltip": i.basicOption.slider.showTooltip,
        "tooltip-position": i.basicOption.slider.tooltipPosition,
        onUpdate: p
      }, null, 8, ["modelValue", "min", "max", "step", "tooltips", "show-tooltip", "tooltip-position"])
    ]));
  }
});
export {
  E as default
};
