vexip-ui/es/components/progress/progress.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as N, computed as a, createElementBlock as p, openBlock as u, normalizeStyle as c, normalizeClass as o, createElementVNode as i, createCommentVNode as k, unref as t, renderSlot as b, createVNode as d, withCtx as f, toDisplayString as v } from "vue";
import "../bubble/index.mjs";
import "../renderer/index.mjs";
import { useProps as W, createStateProp as A, useNameHelper as P } from "@vexip-ui/config";
import { callIfFunc as V, toFixed as w } from "@vexip-ui/utils";
import { progressProps as B } from "./props.mjs";
import { infoTypes as R } from "./symbol.mjs";
import y from "../renderer/renderer.mjs";
import z from "../bubble/bubble.vue2.mjs";
const E = ["aria-valuenow", "aria-valuetext"], M = /* @__PURE__ */ N({
  name: "Progress",
  __name: "progress",
  props: B,
  setup(h, { expose: $ }) {
    const e = W("progress", h, {
      percentage: {
        default: 0,
        validator: (s) => s >= 0 && s <= 100,
        static: !0
      },
      state: A(),
      strokeWidth: 8,
      infoType: {
        default: "outside",
        validator: (s) => R.includes(s)
      },
      precision: 2,
      activated: !1,
      strokeColor: {
        default: null,
        validator: (s) => !(Array.isArray(s) && (!s[0] || !s[1]))
      },
      slots: () => ({})
    }), r = P("progress"), _ = a(() => [
      r.b(),
      r.bs("vars"),
      r.bm(`info-${e.infoType}`),
      {
        [r.bm("inherit")]: e.inherit,
        [r.bm(e.state)]: e.state !== "default",
        [r.bm("activated")]: e.activated
      }
    ]), x = a(() => ({ [r.cv("percentage")]: e.percentage })), C = a(() => ({
      height: `${e.strokeWidth}px`,
      borderRadius: `${e.strokeWidth}px`
    })), T = a(() => {
      const s = {
        borderRadius: `${e.strokeWidth}px`
      }, n = V(e.strokeColor, e.percentage);
      return typeof n == "string" ? s.backgroundColor = n : Array.isArray(n) && (s.backgroundImage = `linear-gradient(to right, ${n[0]} 0%, ${n[1]} 100%)`), s;
    }), m = a(() => e.infoType.includes("bubble")), g = a(() => m.value && e.infoType.split("-").pop() === "bottom" ? "bottom" : "top"), S = a(() => m.value ? {
      [g.value === "top" ? "bottom" : "top"]: `${e.strokeWidth}px`
    } : {}), l = a(() => w(e.percentage, e.precision));
    return $({ percentValue: l }), (s, n) => (u(), p("div", {
      class: o(_.value),
      style: c(x.value),
      role: "progressbar",
      "aria-valuenow": l.value,
      "aria-valuetext": `${l.value}%`,
      "aria-valuemin": "0",
      "aria-valuemax": "100"
    }, [
      i("div", {
        class: o(t(r).be("track")),
        style: c(C.value)
      }, [
        i("div", {
          class: o(t(r).be("filler")),
          style: c(T.value)
        }, null, 6),
        t(e).infoType === "inside" ? (u(), p("div", {
          key: 0,
          class: o(t(r).be("info"))
        }, [
          b(s.$slots, "default", {}, () => [
            d(t(y), {
              renderer: t(e).slots.default
            }, {
              default: f(() => [
                i("span", {
                  class: o(t(r).be("percentage"))
                }, v(`${l.value}%`), 3)
              ]),
              _: 1
            }, 8, ["renderer"])
          ])
        ], 2)) : k("", !0)
      ], 6),
      m.value ? (u(), p("div", {
        key: 0,
        class: o(t(r).be("reference"))
      }, [
        d(t(z), {
          inherit: "",
          class: o(t(r).be("bubble")),
          style: c(S.value),
          placement: g.value,
          "content-class": t(r).be("info")
        }, {
          default: f(() => [
            b(s.$slots, "default", {}, () => [
              d(t(y), {
                renderer: t(e).slots.default
              }, {
                default: f(() => [
                  i("span", {
                    class: o(t(r).be("percentage"))
                  }, v(`${l.value}%`), 3)
                ]),
                _: 1
              }, 8, ["renderer"])
            ])
          ]),
          _: 3
        }, 8, ["class", "style", "placement", "content-class"])
      ], 2)) : t(e).infoType === "outside" ? (u(), p("div", {
        key: 1,
        class: o(t(r).be("info"))
      }, [
        b(s.$slots, "default", {}, () => [
          d(t(y), {
            renderer: t(e).slots.default
          }, {
            default: f(() => [
              i("span", {
                class: o(t(r).be("percentage"))
              }, v(`${l.value}%`), 3)
            ]),
            _: 1
          }, 8, ["renderer"])
        ])
      ], 2)) : k("", !0)
    ], 14, E));
  }
});
export {
  M as default
};
//# sourceMappingURL=progress.vue2.mjs.map