t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
71 lines (70 loc) • 2.09 kB
JavaScript
import { defineComponent as _, ref as u, computed as c, onMounted as b, openBlock as l, createElementBlock as n, normalizeClass as f, normalizeStyle as s, unref as i, createElementVNode as g, toDisplayString as d, createCommentVNode as m } from "vue";
import { Props as S } from "./index3.js";
import { sizeChange as h } from "../../_utils/index3.js";
const C = ["aria-value"], R = {
key: 0,
class: "f-progress__text"
}, z = _({
name: "FProgress"
}), E = /* @__PURE__ */ _({
...z,
props: S,
setup(y) {
const o = y, t = u(!1), p = u(
null
), v = c(
() => {
const { background: e, height: r, square: a } = o;
return {
height: h(r),
background: e,
borderRadius: a ? "0px" : "100px"
};
}
), k = c(
() => {
const { percentage: e, color: r, square: a } = o;
return {
width: `${e}%`,
background: r,
borderRadius: a ? "0px" : "100px"
};
}
), w = () => t.value = p.value.clientHeight >= 18 && o.textInside;
return b(() => {
w();
}), (e, r) => (l(), n("div", {
role: "progressbar",
class: f(["f-progress", { "f-progress__liner": e.linear }]),
style: s({ width: i(h)(e.width) }),
"aria-value": e.percentage,
"aria-valuemin": 0,
"aria-valuemax": 100
}, [
g("div", {
class: "f-progress__bar",
style: s(i(v))
}, [
g("div", {
ref_key: "fillRef",
ref: p,
class: f([
"f-progress__fill",
{ [`f-progress__fill-${e.type}`]: e.type, "f-progress__stripe": e.stripe }
]),
style: s(i(k))
}, [
t.value && e.showText ? (l(), n("span", {
key: 0,
class: "f-progress__percentage",
style: s({ color: e.textColor })
}, d(e.percentage) + "% ", 5)) : m("", !0)
], 6)
], 4),
!t.value && e.showText ? (l(), n("div", R, d(e.percentage) + "% ", 1)) : m("", !0)
], 14, C));
}
});
export {
E as default
};