vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
214 lines (213 loc) • 7.61 kB
JavaScript
import { defineComponent as M, computed as s, createElementBlock as i, openBlock as r, normalizeStyle as a, createElementVNode as l, createBlock as x, createCommentVNode as h, normalizeClass as z, Transition as S, withCtx as B, renderSlot as f, createTextVNode as p, toDisplayString as v } 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"
}, D = { key: 0 }, q = ["id"], A = ["stop-color"], J = ["stop-color"], K = ["d", "stroke-linecap", "stroke-width"], O = ["d", "stroke-linecap", "stroke-width", "opacity"], Q = {
key: 0,
class: "icon-svg",
focusable: "false",
"data-icon": "check",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, R = {
key: 1,
class: "progress-success-info"
}, U = {
key: 2,
class: "progress-text"
}, Y = /* @__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: (o) => o + "%" },
type: { default: "line" }
},
setup(o) {
const t = o, { colorPalettes: I } = G("Progress"), b = L(["success"]), g = s(() => {
if (t.width === void 0) {
if (t.type === "line")
return "100%";
if (t.type === "circle")
return "120px";
}
return typeof t.width == "number" ? `${t.width}px` : t.width;
}), c = s(() => {
if (t.lineSize === void 0) {
if (t.type === "line")
return 8;
if (t.type === "circle")
return 6;
}
return t.lineSize;
}), y = s(() => {
if (t.infoSize === void 0) {
if (t.type === "line")
return "14px";
if (t.type === "circle")
return "24px";
}
return `${t.infoSize}px`;
}), u = s(() => (100 - c.value) * Math.PI), m = s(() => {
const e = 100 - c.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}`;
}), n = s(() => t.lineColor !== void 0 && typeof t.lineColor != "string"), $ = s(() => t.lineColor === void 0 ? I.value[5] : typeof t.lineColor == "string" ? t.lineColor : `linear-gradient(to ${t.lineColor.direction || "right"}, ${t.lineColor["0%"] || t.lineColor.from}, ${t.lineColor["100%"] || t.lineColor.to})`), C = s(() => {
if (n.value) {
const e = t.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 (n.value) {
const e = t.lineColor;
return e.direction === void 0 || e.direction === "right" ? e["0%"] || e.from : e["100%"] || e.to;
}
}), E = s(() => {
if (n.value) {
const e = t.lineColor;
return !e.direction || e.direction === "right" ? e["100%"] || e.to : e["0%"] || e.from;
}
}), k = s(() => t.format(t.percent > 100 ? 100 : t.percent)), w = s(() => b.success || t.success);
return (e, d) => o.type === "line" ? (r(), i("div", {
key: 0,
class: "progress-line-wrap",
style: a(`
--progress-size: ${g.value};
--progress-primary-color: ${$.value};
--progress-success-color: #52c41a;
--progress-font-size: ${y.value};
--progress-border-radius: ${o.lineCap === "round" ? "100px" : 0};
`)
}, [
l("div", N, [
l("div", {
class: z(["progress-bg", { "line-success": o.percent >= 100 && !n.value }]),
style: a(`width: ${o.percent >= 100 ? 100 : o.percent}%; height: ${c.value}px;`)
}, null, 6)
]),
o.showInfo ? (r(), x(S, {
key: 0,
name: "fade",
mode: "out-in"
}, {
default: B(() => [
o.percent >= 100 ? (r(), i("span", T, [
w.value === void 0 ? (r(), i("svg", V, [...d[0] || (d[0] = [
l("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(), i("p", F, [
f(e.$slots, "success", {}, () => [
p(v(o.success), 1)
], !0)
]))
])) : (r(), i("p", H, [
f(e.$slots, "format", { percent: o.percent }, () => [
p(v(k.value), 1)
], !0)
]))
]),
_: 3
})) : h("", !0)
], 4)) : (r(), i("div", {
key: 1,
class: "progress-circle-wrap",
style: a(`
--progress-size: ${g.value};
--progress-primary-color: ${n.value ? `url(#${C.value})` : $.value};
--progress-success-color: #52c41a;
--progress-font-size: ${y.value};
`)
}, [
(r(), i("svg", j, [
n.value ? (r(), i("defs", D, [
l("linearGradient", {
id: `${C.value}`,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, [
l("stop", {
offset: "0%",
"stop-color": P.value
}, null, 8, A),
l("stop", {
offset: "100%",
"stop-color": E.value
}, null, 8, J)
], 8, q)
])) : h("", !0),
l("path", {
d: m.value,
"stroke-linecap": o.lineCap,
class: "circle-trail",
"stroke-width": c.value,
style: a(`stroke-dasharray: ${u.value}px, ${u.value}px;`),
"fill-opacity": "0"
}, null, 12, K),
l("path", {
d: m.value,
"stroke-linecap": o.lineCap,
class: z(["circle-path", { "circle-path-success": o.percent >= 100 && !n.value }]),
"stroke-width": c.value,
style: a(`stroke-dasharray: ${o.percent / 100 * u.value}px, ${u.value}px;`),
opacity: o.percent === 0 ? 0 : 1,
"fill-opacity": "0"
}, null, 14, O)
])),
o.showInfo ? (r(), x(S, {
key: 0,
name: "fade",
mode: "out-in"
}, {
default: B(() => [
w.value === void 0 && o.percent >= 100 ? (r(), i("svg", Q, [...d[1] || (d[1] = [
l("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)
])])) : o.percent >= 100 ? (r(), i("p", R, [
f(e.$slots, "success", {}, () => [
p(v(o.success), 1)
], !0)
])) : (r(), i("p", U, [
f(e.$slots, "format", { percent: o.percent }, () => [
p(v(k.value), 1)
], !0)
]))
]),
_: 3
})) : h("", !0)
], 4));
}
});
export {
Y as default
};