maz-ui/components/MazReadingProgressBar.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as p, computed as m, ref as u, watch as v, onMounted as h, onBeforeUnmount as g, openBlock as w, createBlock as y, Teleport as b, createElementVNode as d, mergeProps as S, normalizeClass as _, normalizeStyle as T, nextTick as B } from "vue";
import './assets/MazReadingProgressBar.C4x7V-Bc.css';function C(l, s) {
  let t = !1, n, o;
  return function(...r) {
    t ? (clearTimeout(n), n = setTimeout(() => {
      Date.now() - o >= s && (l.apply(this, r), o = Date.now());
    }, Math.max(s - (Date.now() - o), 0))) : (l.apply(this, r), o = Date.now(), t = !0);
  };
}
const k = /* @__PURE__ */ p({
  __name: "MazReadingProgressBar",
  props: {
    height: { default: "4px" },
    color: { default: "primary" },
    teleportSelector: { default: "body" },
    contentSelector: { default: "body" },
    offset: { default: 0 },
    barClass: { default: void 0 },
    distance: { default: void 0 }
  },
  emits: ["begin", "complete"],
  setup(l, { emit: s }) {
    const t = l, n = s, o = m(() => `var(--maz-color-${t.color})`), r = u(), a = u(0);
    v(
      () => t.distance,
      (e) => {
        e && (a.value = e);
      },
      {
        immediate: !0
      }
    );
    const c = C(() => {
      const e = window.scrollY;
      if (e >= 0 && e <= a.value) {
        const i = e / a.value * 100;
        r.value = `${i}%`;
      } else e <= 0 ? (r.value = "0%", n("begin")) : e > a.value ? (r.value = "100%", n("complete")) : r.value = "0%";
    }, 15);
    async function f() {
      if (a.value === 0) {
        const e = document.querySelector(t.contentSelector);
        if (!e) {
          console.error(`HTML Element with selector "${t.contentSelector}" not found.`);
          return;
        }
        await B(), a.value = e.offsetHeight + e.offsetTop + t.offset - window.innerHeight;
      }
      window.addEventListener("scroll", c, {
        passive: !0
      });
    }
    return h(() => {
      f();
    }), g(() => {
      window.removeEventListener("scroll", c);
    }), (e, i) => (w(), y(b, { to: e.teleportSelector }, [
      d(
        "div",
        S({ class: "m-reading-progress-bar m-reset-css" }, e.$attrs),
        [
          d(
            "div",
            {
              class: _(e.barClass),
              style: T({
                width: r.value ?? "0px",
                height: e.height,
                backgroundColor: o.value
              })
            },
            null,
            6
            /* CLASS, STYLE */
          )
        ],
        16
        /* FULL_PROPS */
      )
    ], 8, ["to"]));
  }
}), z = (l, s) => {
  const t = l.__vccOpts || l;
  for (const [n, o] of s)
    t[n] = o;
  return t;
}, D = /* @__PURE__ */ z(k, [["__scopeId", "data-v-25e35848"]]);
export {
  D as default
};