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 e, openBlock as t, normalizeStyle as p, normalizeClass as o, withDirectives as k, createElementVNode as i, createCommentVNode as n, createStaticVNode as v, renderSlot as m, createTextVNode as w, toDisplayString as S, vShow as b } from "vue";
import { useInject as B, useSlotsExist as P } from "../utils/index.js";
const R = { class: "spin-container" }, z = { class: "spin-box" }, E = {
key: 0,
class: "spin-loading-dot"
}, N = {
key: 3,
class: "spin-ring-circle"
}, V = {
class: "circle",
viewBox: "0 0 100 100"
}, W = ["d"], D = {
key: 4,
class: "spin-ring-rail"
}, I = {
class: "circle",
viewBox: "0 0 100 100"
}, M = ["d", "stroke"], T = ["d"], j = {
key: 5,
class: "spin-dynamic-circle"
}, q = {
key: 6,
class: "spin-magic-ring"
}, G = /* @__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(f) {
const l = f, { colorPalettes: u } = B("Spin"), g = P(["tip"]), r = d(() => (100 - l.spinCircleWidth) * Math.PI), c = d(() => {
const s = 100 - l.spinCircleWidth;
return `M 50,50 m 0,-${s / 2}
a ${s / 2},${s / 2} 0 1 1 0,${s}
a ${s / 2},${s / 2} 0 1 1 0,-${s}`;
}), y = d(() => l.color === void 0 ? u.value[5] : l.color), $ = d(() => l.magicRingColor === void 0 ? u.value[4] : l.magicRingColor), h = d(() => g.tip || l.tip);
return (s, a) => (t(), e("div", {
class: o(`spin-wrap spin-${s.size}`),
style: p(`
--spin-primary-color: ${y.value};
--spin-ring-rail-color: ${s.ringRailColor};
--spin-magic-ring-color: ${$.value};
--spin-circle-width: ${s.spinCircleWidth};
--spin-speed: ${s.speed}ms;
`)
}, [
k(i("div", R, [
i("div", z, [
s.indicator === "dot" ? (t(), e("div", E, [...a[0] || (a[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)
])])) : n("", !0),
s.indicator === "spin-dot" ? (t(), e("div", {
key: 1,
class: o(["spin-container-box", { "spin-box-rotate": s.rotate }])
}, [
a[2] || (a[2] = v('<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: o(["spin-dot-items spin-rotate", { "has-tip": s.tip }])
}, [...a[1] || (a[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)) : n("", !0),
s.indicator === "spin-line" ? (t(), e("div", {
key: 2,
class: o(["spin-container-box", { "spin-box-rotate": s.rotate }])
}, [
a[4] || (a[4] = v('<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: o(["spin-line-items spin-rotate", { "has-tip": s.tip }])
}, [...a[3] || (a[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)) : n("", !0),
s.indicator === "ring-circle" ? (t(), e("div", N, [
(t(), e("svg", V, [
i("path", {
d: c.value,
"stroke-linecap": "round",
class: "path",
style: p(`stroke-dasharray: ${s.spinCirclePercent / 100 * r.value}px, ${r.value}px;`),
"fill-opacity": "0"
}, null, 12, W)
]))
])) : n("", !0),
s.indicator === "ring-rail" ? (t(), e("div", D, [
(t(), e("svg", I, [
i("path", {
d: c.value,
stroke: s.ringRailColor,
"stroke-linecap": "round",
class: "trail",
style: p(`stroke-dasharray: ${r.value}px, ${r.value}px;`),
"fill-opacity": "0"
}, null, 12, M),
i("path", {
d: c.value,
"stroke-linecap": "round",
class: "path",
style: p(`stroke-dasharray: ${s.spinCirclePercent / 100 * r.value}px, ${r.value}px;`),
"fill-opacity": "0"
}, null, 12, T)
]))
])) : n("", !0),
s.indicator === "dynamic-circle" ? (t(), e("div", j, [...a[5] || (a[5] = [
i("svg", {
class: "circle",
viewBox: "0 0 50 50"
}, [
i("circle", {
class: "path",
cx: "25",
cy: "25",
r: "20",
fill: "none"
})
], -1)
])])) : n("", !0),
s.indicator === "magic-ring" ? (t(), e("div", q, [...a[6] || (a[6] = [
i("div", { class: "outer-ring" }, null, -1),
i("div", { class: "inner-ring" }, null, -1)
])])) : n("", !0),
h.value ? (t(), e("div", {
key: 7,
class: o(["spin-tip", { "dot-tip": ["dot", "spin-dot"].includes(s.indicator) }])
}, [
m(s.$slots, "tip", {}, () => [
w(S(s.tip), 1)
], !0)
], 2)) : n("", !0)
])
], 512), [
[b, s.spinning]
]),
i("div", {
class: o(["spin-content", { "spin-blur": s.spinning }])
}, [
m(s.$slots, "default", {}, void 0, !0)
], 2)
], 6));
}
});
export {
G as default
};