ucc-ui/dist/es/ReadProgress-Dwl0u7dW.js

ucc-ui components library

import { defineComponent as v, computed as a, withDirectives as C, openBlock as c, createElementBlock as u, normalizeStyle as d, createElementVNode as R, normalizeClass as S, unref as s, renderSlot as T, createVNode as b, withCtx as V, createTextVNode as x, toDisplayString as E, createCommentVNode as N, vShow as k } from "vue";
import { w as z, p as H } from "./utils-BzE2Aob-.js";
import "./ConfigProvider-C-6nRyrn.js";
import { e as i, a as P } from "./hooks-Dj9Dthmd.js";
import { _ as A } from "./Text-C5K_NdOc.js";
const I = z(A), $ = {
  PRIMARY: "primary",
  DANGER: "danger",
  WARNING: "warning",
  SUCCESS: "success",
  INFO: "info"
}, B = {
  key: 0,
  class: "u-read-progress__text"
}, W = /* @__PURE__ */ v({
  name: "UReadProgress",
  __name: "ReadProgress",
  props: {
    modelValue: {},
    type: { default: $.PRIMARY },
    color: {},
    backgroundColor: { default: "transparent" },
    height: { default: 4 },
    show: { type: Boolean, default: !0 },
    showText: { type: Boolean, default: !1 },
    textType: {},
    textSize: { default: "default" },
    content: { default: "" }
  },
  emits: ["update:modelValue", "change"],
  setup(m, { expose: p, emit: h }) {
    const e = m, n = h, o = i(e.modelValue || 0, () => e.modelValue), r = i(e.show, () => e.show), g = a(() => e.content ? e.content : `${Math.round(o.value)}%`), f = a(() => ({
      height: H(e.height, { unit: "rem" }),
      backgroundColor: e.backgroundColor
    }));
    P(document, "scroll", () => {
      window.requestAnimationFrame(() => {
        const t = document.documentElement.scrollTop || document.body.scrollTop, l = document.documentElement.scrollHeight || document.body.scrollHeight, _ = document.documentElement.clientHeight || document.body.clientHeight;
        o.value = t / (l - _) * 100, n("update:modelValue", o.value), n("change");
      });
    });
    function y() {
      r.value = !1;
    }
    function w() {
      r.value = !0;
    }
    return p({
      progress: o,
      hide: y,
      show: w
    }), (t, l) => C((c(), u("div", {
      class: "u-read-progress",
      style: d(f.value)
    }, [
      R("div", {
        class: S(["u-read-progress__bar", `u-read-progress__bar--${t.type}`]),
        style: d({
          width: `${s(o)}%`,
          backgroundColor: e.color,
          willChange: "width"
        })
      }, null, 6),
      t.showText && s(o) ? (c(), u("div", B, [
        T(t.$slots, "default", {}, () => [
          b(s(I), {
            size: t.textSize,
            type: t.textType || t.type
          }, {
            default: V(() => [
              x(E(g.value), 1)
            ]),
            _: 1
          }, 8, ["size", "type"])
        ])
      ])) : N("", !0)
    ], 4)), [
      [k, s(r)]
    ]);
  }
});
export {
  I as U,
  W as _
};