ucc-ui/dist/es/Slider-DtMCjNoe.js

ucc-ui components library

import { defineComponent as L, ref as l, computed as b, onMounted as V, onBeforeUnmount as M, openBlock as k, createElementBlock as S, createElementVNode as i, normalizeStyle as w, createVNode as C, unref as T, mergeProps as O } from "vue";
import { U as R } from "./CodeEditor-CoBtVBCt.js";
const U = /* @__PURE__ */ i("div", { class: "u-slider__track" }, null, -1), X = { class: "u-slider__thumb" }, I = /* @__PURE__ */ L({
  name: "USlider",
  __name: "Slider",
  props: {
    modelValue: { default: 0 },
    max: {},
    min: {},
    step: {},
    disabled: { type: Boolean },
    showInput: { type: Boolean },
    showInputControl: { type: Boolean },
    size: {},
    inputSize: {},
    showStops: { type: Boolean },
    showTooltip: { type: Boolean },
    formatTooltip: {},
    range: { type: Boolean },
    vertical: { type: Boolean },
    height: {},
    ariaLabel: {},
    rangeStartLabel: {},
    rangeEndLabel: {},
    formatValueText: {},
    debounce: {},
    tooltipClass: { default: "" },
    placement: { default: "top" },
    marks: {},
    validateEvent: { type: Boolean },
    popperOptions: {}
  },
  emits: ["update:modelValue", "change", "input"],
  setup(h, { emit: _ }) {
    const d = h, c = _, o = l(d.modelValue), y = l(!1), u = l(!1), B = b(() => ({ width: 0, ...d.popperOptions })), r = l(null), n = l(null);
    function p(e) {
      var t;
      u.value = !0, (t = n.value) == null || t.onOpen(), m(e);
    }
    function a() {
      var e;
      u.value = !1, (e = n.value) == null || e.onClose();
    }
    function s(e) {
      u.value && m(e);
    }
    function m(e) {
      var v, f;
      if (!r.value) return;
      const t = r.value.getBoundingClientRect(), g = (("touches" in e ? e.touches[0].clientX : e.clientX) - t.left) / t.width * 100;
      o.value = Math.min(100, Math.max(0, g)), (v = n.value) == null || v.updatePopper(), (f = n.value) == null || f.onOpen(), c("update:modelValue", o.value), c("change", o.value);
    }
    function E(e) {
      p(e);
    }
    return V(() => {
      window.addEventListener("mouseup", a), window.addEventListener("mousemove", s), window.addEventListener("touchend", a), window.addEventListener("touchmove", s);
    }), M(() => {
      window.removeEventListener("mouseup", a), window.removeEventListener("mousemove", s), window.removeEventListener("touchend", a), window.removeEventListener("touchmove", s);
    }), (e, t) => (k(), S("div", {
      ref_key: "sliderRef",
      ref: r,
      class: "u-slider",
      onMousedown: E
    }, [
      U,
      i("div", {
        class: "u-slider__progress",
        style: w({ width: `${o.value}%` })
      }, null, 4),
      i("div", {
        class: "u-slider__thumb-wrapper",
        onMousedown: p,
        onTouchstart: p,
        style: w({ left: `${o.value}%` })
      }, [
        i("div", X, [
          C(T(R), O({
            ref_key: "tooltipRef",
            ref: n,
            class: e.tooltipClass,
            placement: e.placement,
            visible: y.value
          }, B.value, {
            content: String(Math.round(o.value))
          }), null, 16, ["class", "placement", "visible", "content"])
        ])
      ], 36)
    ], 544));
  }
});
export {
  I as _
};