@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
51 lines (50 loc) • 1.51 kB
JavaScript
import { defineComponent as m, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as o, normalizeClass as a, createElementVNode as u, createCommentVNode as c } from "vue";
import { useColors as g } from "../../composables/useColors.js";
import { useTheme as f } from "../../composables/useTheme.js";
const y = {
...g.props("primary"),
percentage: {
type: [Number, String],
default: 0,
validator: (r) => r >= 0 && r <= 100
},
gradient: Boolean,
animate: {
type: Boolean,
default: !0
},
thick: Boolean
}, h = { name: "XProgress" }, N = /* @__PURE__ */ m({
...h,
props: y,
setup(r) {
const l = r, { styles: i, classes: d, className: p } = f("Progress", {}, l);
return (e, b) => (s(), n("div", {
style: t(o(i)),
class: a([
o(p),
o(d).wrapper
])
}, [
u("div", {
class: a(["h-full", [
e.gradient ? "bg-gradient-to-r" : "bg-[color:var(--x-progress-bg)]",
{
"duration-150 transition-[width]": e.animate
}
]]),
style: t([e.gradient ? "" : { width: `${e.percentage}%` }])
}, null, 6),
e.gradient ? (s(), n("div", {
key: 0,
class: a(["absolute h-full bg-secondary-100 dark:bg-secondary-700 right-0 top-0", { "duration-150 transition-[width]": e.animate }]),
style: t({
width: `${100 - Number(e.percentage)}%`
})
}, null, 6)) : c("", !0)
], 6));
}
});
export {
N as default
};