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