@aplus-frontend/ui/es/src/loading-bar/index.vue2.mjs

import { defineComponent as $, computed as u, ref as o, watch as n, onMounted as L, onBeforeUnmount as M, createBlock as N, openBlock as X, Transition as E, unref as h, withCtx as G, withDirectives as U, createElementVNode as _, normalizeStyle as z, normalizeClass as P, vShow as V } from "vue";
import "../config-provider/index.mjs";
import j from "./style/index.mjs";
import "../utils/index.mjs";
import { useToken as H } from "../config-provider/hooks/use-token.mjs";
import { useNamespace as J } from "../config-provider/hooks/use-namespace.mjs";
import { isDef as k } from "../utils/is.mjs";
const K = ["aria-valuenow"], O = 0.05, te = /* @__PURE__ */ $({
  __name: "index",
  props: {
    defaultProgress: {
      default: 0
    },
    barSize: {
      default: 2
    },
    status: {
      default: "default"
    },
    position: {
      default: "top"
    },
    stopProgress: {
      default: 90
    },
    manul: {
      type: Boolean,
      default: !1
    }
  },
  setup(y, {
    expose: A
  }) {
    const a = y, {
      token: F
    } = H(), i = u(() => F.value?.components?.LoadingBar?.loadingBarAnimateDuration ?? 250), r = o(!1), {
      b: d,
      m: T,
      e: w
    } = J("loading-bar"), B = j("loading-bar"), m = o(a.position), t = o(a.defaultProgress), l = o(a.status), c = o(a.stopProgress), v = o(a.barSize), g = o(!1);
    n(() => a.status, (e) => {
      l.value = e;
    }), n(() => a.stopProgress, (e) => {
      c.value = e;
    }), n(() => a.position, (e) => m.value = e), n(() => a.barSize, (e) => v.value = e);
    const D = u(() => [d(), T(l.value), B.value]), C = u(() => ({
      [m.value]: 0,
      height: `${v.value}px`,
      ...g.value ? {
        position: "fixed",
        zIndex: 99
      } : {}
    })), I = u(() => ({
      transform: `translateX(${(t.value - 100) / 2}%) scaleX(${t.value / 100})`
    }));
    let s;
    const f = () => {
      const e = c.value - t.value;
      if (e <= 0) {
        s && cancelAnimationFrame(s);
        return;
      }
      t.value += e * O, s = requestAnimationFrame(f);
    };
    let b;
    const q = (e) => {
      g.value = e?._globalMark ?? !1, e?.position && (m.value = e?.position), e?.barSize && (v.value = e.barSize), s && cancelAnimationFrame(s), clearTimeout(b), r.value = !0, setTimeout(() => {
        const {
          progress: p,
          stopProgress: S,
          status: x
        } = e || {};
        k(p) && (t.value = p), k(S) && (c.value = S), x && (l.value = x), b = setTimeout(() => {
          r.value = !0, s = requestAnimationFrame(f);
        }, i.value);
      });
    };
    return L(() => {
      a.manul || (r.value = !0, requestAnimationFrame(f));
    }), M(() => {
      r.value = !1, s && cancelAnimationFrame(s);
    }), n(() => t.value, (e) => {
      e === 100 && setTimeout(() => {
        r.value = !1, setTimeout(() => {
          t.value = 0, l.value = "default";
        }, i.value);
      }, i.value);
    }), A({
      start: q,
      done(e) {
        t.value = 100, e && (l.value = e);
      }
    }), (e, p) => (X(), N(E, {
      name: h(d)("fade")
    }, {
      default: G(() => [U(_("div", {
        class: P(D.value),
        style: z(C.value)
      }, [_("div", {
        class: P(h(w)("bar")),
        style: z(I.value),
        role: "progressbar",
        "aria-valuemin": "0",
        "aria-valuemax": "100",
        "aria-valuenow": t.value
      }, null, 14, K)], 6), [[V, r.value]])]),
      _: 1
    }, 8, ["name"]));
  }
});
export {
  te as default
};