vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
87 lines (86 loc) • 3.18 kB
JavaScript
import { defineComponent as _, computed as u, createElementBlock as t, openBlock as s, normalizeStyle as b, normalizeClass as h, unref as c, Fragment as v, renderList as C, createElementVNode as r, toDisplayString as d, createCommentVNode as $ } from "vue";
import { useInject as S } from "../utils/index.js";
const z = ["onClick"], B = { class: "steps-icon" }, P = {
key: 0,
class: "steps-num"
}, E = {
key: 1,
class: "icon-svg",
focusable: "false",
"data-icon": "check",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, L = {
key: 1,
class: "steps-dot"
}, N = { class: "steps-content" }, V = { class: "steps-title" }, j = {
key: 0,
class: "steps-description"
}, I = /* @__PURE__ */ _({
__name: "Steps",
props: {
items: { default: () => [] },
width: { default: "auto" },
size: { default: "default" },
vertical: { type: Boolean, default: !1 },
labelPlacement: { default: "right" },
dotted: { type: Boolean, default: !1 },
current: { default: 1 }
},
emits: ["update:current", "change"],
setup(y, { emit: k }) {
const o = y, { colorPalettes: n } = S("Steps"), m = k, g = u(() => typeof o.width == "number" ? `${o.width}px` : o.width), f = u(() => o.items.length), a = u(() => o.current < 1 ? 1 : o.current > f.value + 1 ? f.value + 1 : o.current);
function w(e) {
a.value !== e && (m("update:current", e), m("change", e));
}
return (e, i) => (s(), t("div", {
class: h(["steps-wrap", {
"steps-small": e.size === "small",
"steps-vertical": e.vertical,
"steps-label-bottom": !e.vertical && (e.labelPlacement === "bottom" || e.dotted),
"steps-dotted": e.dotted
}]),
style: b(`
--steps-width: ${g.value};
--steps-primary-color: ${c(n)[5]};
--steps-primary-color-hover: ${c(n)[5]};
--steps-icon-color: ${c(n)[0]};
--steps-icon-color-hover: ${c(n)[5]};
`)
}, [
(s(!0), t(v, null, C(e.items, (p, l) => (s(), t("div", {
class: h(["steps-item", {
"steps-finish": a.value > l + 1,
"steps-process": a.value === l + 1,
"steps-wait": a.value < l + 1
}]),
key: l
}, [
r("div", {
tabindex: "0",
class: "steps-info-wrap",
onClick: (D) => w(l + 1)
}, [
i[1] || (i[1] = r("div", { class: "steps-tail" }, null, -1)),
r("div", B, [
e.dotted ? (s(), t("span", L)) : (s(), t(v, { key: 0 }, [
a.value <= l + 1 ? (s(), t("span", P, d(l + 1), 1)) : (s(), t("svg", E, [...i[0] || (i[0] = [
r("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)
])]))
], 64))
]),
r("div", N, [
r("div", V, d(p.title), 1),
p.description ? (s(), t("div", j, d(p.description), 1)) : $("", !0)
])
], 8, z)
], 2))), 128))
], 6));
}
});
export {
I as default
};