vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
163 lines (162 loc) • 6.57 kB
JavaScript
import { defineComponent as C, computed as d, createElementBlock as a, openBlock as e, normalizeStyle as p, normalizeClass as c, withDirectives as k, createElementVNode as i, createCommentVNode as l, createStaticVNode as m, renderSlot as f, createTextVNode as x, toDisplayString as w, vShow as S } from "vue";
import { useInject as b, useSlotsExist as B } from "../utils/index.js";
const P = { class: "spin-container" }, R = { class: "spin-box" }, z = {
key: 0,
class: "spin-loading-dot"
}, E = {
key: 3,
class: "spin-ring-circle"
}, N = {
class: "circle",
viewBox: "0 0 100 100"
}, V = ["d"], W = {
key: 4,
class: "spin-ring-rail"
}, D = {
class: "circle",
viewBox: "0 0 100 100"
}, I = ["d", "stroke"], M = ["d"], T = {
key: 5,
class: "spin-dynamic-circle"
}, j = {
key: 6,
class: "spin-magic-ring"
}, F = /* @__PURE__ */ C({
__name: "Spin",
props: {
spinning: { type: Boolean, default: !0 },
size: { default: "middle" },
tip: { default: void 0 },
indicator: { default: "dot" },
color: { default: void 0 },
spinCircleWidth: { default: 12 },
spinCirclePercent: { default: 33 },
ringRailColor: { default: "rgba(0, 0, 0, 0.12)" },
magicRingColor: { default: void 0 },
rotate: { type: Boolean, default: !1 },
speed: { default: 800 }
},
setup(t) {
const o = t, { colorPalettes: v } = b("Spin"), g = B(["tip"]), r = d(() => (100 - o.spinCircleWidth) * Math.PI), u = d(() => {
const n = 100 - o.spinCircleWidth;
return `M 50,50 m 0,-${n / 2}
a ${n / 2},${n / 2} 0 1 1 0,${n}
a ${n / 2},${n / 2} 0 1 1 0,-${n}`;
}), y = d(() => o.color === void 0 ? v.value[5] : o.color), $ = d(() => o.magicRingColor === void 0 ? v.value[4] : o.magicRingColor), h = d(() => g.tip || o.tip);
return (n, s) => (e(), a("div", {
class: c(`spin-wrap spin-${t.size}`),
style: p(`
--spin-primary-color: ${y.value};
--spin-ring-rail-color: ${t.ringRailColor};
--spin-magic-ring-color: ${$.value};
--spin-circle-width: ${t.spinCircleWidth};
--spin-speed: ${t.speed}ms;
`)
}, [
k(i("div", P, [
i("div", R, [
t.indicator === "dot" ? (e(), a("div", z, [...s[0] || (s[0] = [
i("span", { class: "dot-item" }, null, -1),
i("span", { class: "dot-item" }, null, -1),
i("span", { class: "dot-item" }, null, -1),
i("span", { class: "dot-item" }, null, -1)
])])) : l("", !0),
t.indicator === "spin-dot" ? (e(), a("div", {
key: 1,
class: c(["spin-container-box", { "spin-box-rotate": t.rotate }])
}, [
s[2] || (s[2] = m('<div class="spin-dot-items" data-v-9a0a1fc2><span class="dot-item" data-v-9a0a1fc2></span><span class="dot-item" data-v-9a0a1fc2></span><span class="dot-item" data-v-9a0a1fc2></span><span class="dot-item" data-v-9a0a1fc2></span></div>', 1)),
i("div", {
class: c(["spin-dot-items spin-rotate", { "has-tip": t.tip }])
}, [...s[1] || (s[1] = [
i("span", { class: "dot-item" }, null, -1),
i("span", { class: "dot-item" }, null, -1),
i("span", { class: "dot-item" }, null, -1),
i("span", { class: "dot-item" }, null, -1)
])], 2)
], 2)) : l("", !0),
t.indicator === "spin-line" ? (e(), a("div", {
key: 2,
class: c(["spin-container-box", { "spin-box-rotate": t.rotate }])
}, [
s[4] || (s[4] = m('<div class="spin-line-items" data-v-9a0a1fc2><span class="line-item" data-v-9a0a1fc2></span><span class="line-item" data-v-9a0a1fc2></span><span class="line-item" data-v-9a0a1fc2></span><span class="line-item" data-v-9a0a1fc2></span></div>', 1)),
i("div", {
class: c(["spin-line-items spin-rotate", { "has-tip": t.tip }])
}, [...s[3] || (s[3] = [
i("span", { class: "line-item" }, null, -1),
i("span", { class: "line-item" }, null, -1),
i("span", { class: "line-item" }, null, -1),
i("span", { class: "line-item" }, null, -1)
])], 2)
], 2)) : l("", !0),
t.indicator === "ring-circle" ? (e(), a("div", E, [
(e(), a("svg", N, [
i("path", {
d: u.value,
"stroke-linecap": "round",
class: "path",
style: p(`stroke-dasharray: ${t.spinCirclePercent / 100 * r.value}px, ${r.value}px;`),
"fill-opacity": "0"
}, null, 12, V)
]))
])) : l("", !0),
t.indicator === "ring-rail" ? (e(), a("div", W, [
(e(), a("svg", D, [
i("path", {
d: u.value,
stroke: t.ringRailColor,
"stroke-linecap": "round",
class: "trail",
style: p(`stroke-dasharray: ${r.value}px, ${r.value}px;`),
"fill-opacity": "0"
}, null, 12, I),
i("path", {
d: u.value,
"stroke-linecap": "round",
class: "path",
style: p(`stroke-dasharray: ${t.spinCirclePercent / 100 * r.value}px, ${r.value}px;`),
"fill-opacity": "0"
}, null, 12, M)
]))
])) : l("", !0),
t.indicator === "dynamic-circle" ? (e(), a("div", T, [...s[5] || (s[5] = [
i("svg", {
class: "circle",
viewBox: "0 0 50 50"
}, [
i("circle", {
class: "path",
cx: "25",
cy: "25",
r: "20",
fill: "none"
})
], -1)
])])) : l("", !0),
t.indicator === "magic-ring" ? (e(), a("div", j, [...s[6] || (s[6] = [
i("div", { class: "outer-ring" }, null, -1),
i("div", { class: "inner-ring" }, null, -1)
])])) : l("", !0),
h.value ? (e(), a("div", {
key: 7,
class: c(["spin-tip", { "dot-tip": ["dot", "spin-dot"].includes(t.indicator) }])
}, [
f(n.$slots, "tip", {}, () => [
x(w(t.tip), 1)
], !0)
], 2)) : l("", !0)
])
], 512), [
[S, t.spinning]
]),
i("div", {
class: c(["spin-content", { "spin-blur": t.spinning }])
}, [
f(n.$slots, "default", {}, void 0, !0)
], 2)
], 6));
}
});
export {
F as default
};