@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
140 lines (139 loc) • 4.65 kB
JavaScript
import { defineComponent as N, computed as a, openBlock as p, createElementBlock as u, normalizeClass as o, normalizeStyle as c, createElementVNode as i, unref as t, renderSlot as b, createVNode as d, withCtx as f, toDisplayString as v, createCommentVNode as k } 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) => (p(), u("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" ? (p(), u("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 ? (p(), u("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" ? (p(), u("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