import { defineComponent as p, ref as v, computed as c, unref as h, createElementBlock as _, createCommentVNode as L, openBlock as y, createElementVNode as X, normalizeStyle as E } from "vue";
import { useEventListener as W } from "../composition/useEventListener.js";
import { eventListener as k } from "../helpers/dom.js";
const w = /* @__PURE__ */ p({
  __name: "HScroll",
  props: {
    scrollLeft: {},
    clientWidth: {},
    scrollWidth: {}
  },
  emits: ["update:scrollLeft"],
  setup(s, { emit: i }) {
    const a = i, e = s, n = v(), l = c(() => e.clientWidth / (e.scrollWidth || 1)), u = c(() => l.value < 1), m = c(() => {
      const t = h(l);
      return {
        left: e.scrollLeft * t + "px",
        width: Math.floor(e.clientWidth * t) + "px"
      };
    });
    return W(n, "pointerdown", (t) => {
      const r = {
        clientX: t.clientX
      }, d = k(document, "mousemove", (o) => {
        const f = (o.clientX - r.clientX) / l.value;
        a("update:scrollLeft", e.scrollLeft + f), r.clientX = o.clientX;
      });
      ["mouseup", "pointercancel"].forEach((o) => {
        document.addEventListener(o, d, { once: !0 });
      });
    }), (t, r) => u.value ? (y(), _("div", {
      key: 0,
      ref_key: "scrollRef",
      ref: n,
      class: "h-scroll"
    }, [
      X("div", {
        class: "h-scroll__scrollbar",
        style: E(m.value)
      }, null, 4)
    ], 512)) : L("", !0);
  }
});
export {
  w as default
};
//# sourceMappingURL=HScroll.vue.js.map
