vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
214 lines (213 loc) • 7.59 kB
JavaScript
import { defineComponent as M, computed as s, createElementBlock as t, openBlock as r, normalizeStyle as c, createElementVNode as i, createBlock as z, createCommentVNode as h, normalizeClass as S, Transition as _, withCtx as B, renderSlot as p, createTextVNode as d, toDisplayString as f } from "vue";
import { useInject as G, useSlotsExist as L } from "../utils/index.js";
const N = { class: "progress-inner" }, T = {
key: 0,
class: "progress-success"
}, V = {
key: 0,
class: "icon-svg",
focusable: "false",
"data-icon": "check-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, F = {
key: 1,
class: "progress-success-info"
}, H = {
key: 1,
class: "progress-text"
}, j = {
class: "progress-circle",
viewBox: "0 0 100 100"
}, x = { key: 0 }, D = ["id"], q = ["stop-color"], A = ["stop-color"], J = ["d", "stroke-linecap", "stroke-width"], K = ["d", "stroke-linecap", "stroke-width", "opacity"], O = {
key: 0,
class: "icon-svg",
focusable: "false",
"data-icon": "check",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Q = {
key: 1,
class: "progress-success-info"
}, R = {
key: 2,
class: "progress-text"
}, X = /* @__PURE__ */ M({
__name: "Progress",
props: {
width: { default: void 0 },
percent: { default: 0 },
lineSize: { default: void 0 },
lineColor: { default: void 0 },
lineCap: { default: "round" },
showInfo: { type: Boolean, default: !0 },
infoSize: { default: void 0 },
success: { default: void 0 },
format: { type: Function, default: (v) => v + "%" },
type: { default: "line" }
},
setup(v) {
const o = v, { colorPalettes: I } = G("Progress"), b = L(["success"]), g = s(() => {
if (o.width === void 0) {
if (o.type === "line")
return "100%";
if (o.type === "circle")
return "120px";
}
return typeof o.width == "number" ? `${o.width}px` : o.width;
}), n = s(() => {
if (o.lineSize === void 0) {
if (o.type === "line")
return 8;
if (o.type === "circle")
return 6;
}
return o.lineSize;
}), y = s(() => {
if (o.infoSize === void 0) {
if (o.type === "line")
return "14px";
if (o.type === "circle")
return "24px";
}
return `${o.infoSize}px`;
}), a = s(() => (100 - n.value) * Math.PI), m = s(() => {
const e = 100 - n.value;
return `M 50,50 m 0,-${e / 2}
a ${e / 2},${e / 2} 0 1 1 0,${e}
a ${e / 2},${e / 2} 0 1 1 0,-${e}`;
}), l = s(() => o.lineColor !== void 0 && typeof o.lineColor != "string"), $ = s(() => o.lineColor === void 0 ? I.value[5] : typeof o.lineColor == "string" ? o.lineColor : `linear-gradient(to ${o.lineColor.direction || "right"}, ${o.lineColor["0%"] || o.lineColor.from}, ${o.lineColor["100%"] || o.lineColor.to})`), C = s(() => {
if (l.value) {
const e = o.lineColor;
return e.direction === void 0 || e.direction === "right" ? `right-${e["0%"] || e.from}-${e["100%"] || e.to}` : `left-${e["100%"] || e.to}-${e["0%"] || e.from}`;
}
return null;
}), P = s(() => {
if (l.value) {
const e = o.lineColor;
return e.direction === void 0 || e.direction === "right" ? e["0%"] || e.from : e["100%"] || e.to;
}
}), E = s(() => {
if (l.value) {
const e = o.lineColor;
return !e.direction || e.direction === "right" ? e["100%"] || e.to : e["0%"] || e.from;
}
}), k = s(() => o.format(o.percent > 100 ? 100 : o.percent)), w = s(() => b.success || o.success);
return (e, u) => e.type === "line" ? (r(), t("div", {
key: 0,
class: "m-progress-line",
style: c(`
--progress-size: ${g.value};
--progress-primary-color: ${$.value};
--progress-success-color: #52c41a;
--progress-font-size: ${y.value};
--progress-border-radius: ${e.lineCap === "round" ? "100px" : 0};
`)
}, [
i("div", N, [
i("div", {
class: S(["progress-bg", { "line-success": e.percent >= 100 && !l.value }]),
style: c(`width: ${e.percent >= 100 ? 100 : e.percent}%; height: ${n.value}px;`)
}, null, 6)
]),
e.showInfo ? (r(), z(_, {
key: 0,
name: "fade",
mode: "out-in"
}, {
default: B(() => [
e.percent >= 100 ? (r(), t("span", T, [
w.value === void 0 ? (r(), t("svg", V, u[0] || (u[0] = [
i("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }, null, -1)
]))) : (r(), t("p", F, [
p(e.$slots, "success", {}, () => [
d(f(e.success), 1)
], !0)
]))
])) : (r(), t("p", H, [
p(e.$slots, "format", { percent: e.percent }, () => [
d(f(k.value), 1)
], !0)
]))
]),
_: 3
})) : h("", !0)
], 4)) : (r(), t("div", {
key: 1,
class: "m-progress-circle",
style: c(`
--progress-size: ${g.value};
--progress-primary-color: ${l.value ? `url(#${C.value})` : $.value};
--progress-success-color: #52c41a;
--progress-font-size: ${y.value};
`)
}, [
(r(), t("svg", j, [
l.value ? (r(), t("defs", x, [
i("linearGradient", {
id: `${C.value}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, [
i("stop", {
offset: "0%",
"stop-color": P.value
}, null, 8, q),
i("stop", {
offset: "100%",
"stop-color": E.value
}, null, 8, A)
], 8, D)
])) : h("", !0),
i("path", {
d: m.value,
"stroke-linecap": e.lineCap,
class: "circle-trail",
"stroke-width": n.value,
style: c(`stroke-dasharray: ${a.value}px, ${a.value}px;`),
"fill-opacity": "0"
}, null, 12, J),
i("path", {
d: m.value,
"stroke-linecap": e.lineCap,
class: S(["circle-path", { "circle-path-success": e.percent >= 100 && !l.value }]),
"stroke-width": n.value,
style: c(`stroke-dasharray: ${e.percent / 100 * a.value}px, ${a.value}px;`),
opacity: e.percent === 0 ? 0 : 1,
"fill-opacity": "0"
}, null, 14, K)
])),
e.showInfo ? (r(), z(_, {
key: 0,
name: "fade",
mode: "out-in"
}, {
default: B(() => [
w.value === void 0 && e.percent >= 100 ? (r(), t("svg", O, u[1] || (u[1] = [
i("path", { d: "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" }, null, -1)
]))) : e.percent >= 100 ? (r(), t("p", Q, [
p(e.$slots, "success", {}, () => [
d(f(e.success), 1)
], !0)
])) : (r(), t("p", R, [
p(e.$slots, "format", { percent: e.percent }, () => [
d(f(k.value), 1)
], !0)
]))
]),
_: 3
})) : h("", !0)
], 4));
}
});
export {
X as default
};