vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
110 lines (109 loc) • 3.59 kB
JavaScript
import { defineComponent as k, ref as m, computed as y, watchEffect as h, createElementBlock as l, openBlock as s, normalizeStyle as o, Fragment as C, renderList as $, normalizeClass as i, createElementVNode as c, renderSlot as g, createTextVNode as b, toDisplayString as w } from "vue";
const E = /* @__PURE__ */ k({
__name: "Timeline",
props: {
items: { default: () => [] },
width: { default: "100%" },
lineStyle: { default: "solid" },
mode: { default: "left" },
position: { default: "left" }
},
setup(a) {
const r = a, n = m(), f = m([]), p = y(() => typeof r.width == "number" ? `${r.width}px` : r.width), u = y(() => r.items.length);
function v() {
for (let e = 0; e < u.value; e++)
f.value[e] = getComputedStyle(
n.value[e].firstElementChild || n.value[e],
null
).getPropertyValue("line-height");
}
return h(
() => {
v();
},
{ flush: "post" }
), h(
() => {
if (r.mode === "center")
for (let e = 0; e < u.value; e++)
(e + 1) % 2 ? r.position === "left" ? n.value[e].classList.add("desc-alternate-left") : n.value[e].classList.add("desc-alternate-right") : r.position === "left" ? n.value[e].classList.add("desc-alternate-right") : n.value[e].classList.add("desc-alternate-left");
},
{ flush: "post" }
), (e, S) => (s(), l("div", {
class: "timeline-wrap",
style: o(`width: ${p.value};`)
}, [
(s(!0), l(C, null, $(a.items, (t, d) => (s(), l("div", {
class: i(["timeline-item", { "item-last": d === a.items.length - 1 }]),
key: d
}, [
c("span", {
class: i(["timeline-tail", `tail-${a.mode}`]),
style: o(`border-left-style: ${a.lineStyle};`)
}, null, 6),
c("div", {
class: i(["timeline-dot", `dot-${a.mode}`]),
style: o(`height: ${f.value[d]}`)
}, [
g(e.$slots, "dot", {
item: t,
index: d
}, () => [
t.color === "red" ? (s(), l("span", {
key: 0,
class: "dot-item",
style: o({
borderColor: "#ff4d4f"
/* red */
})
}, null, 4)) : t.color === "gray" ? (s(), l("span", {
key: 1,
class: "dot-item",
style: o({
borderColor: "#00000040"
/* gray */
})
}, null, 4)) : t.color === "green" ? (s(), l("span", {
key: 2,
class: "dot-item",
style: o({
borderColor: "#52c41a"
/* green */
})
}, null, 4)) : t.color === "blue" ? (s(), l("span", {
key: 3,
class: "dot-item",
style: o({
borderColor: "#1677ff"
/* blue */
})
}, null, 4)) : (s(), l("span", {
key: 4,
class: "dot-item",
style: o({
borderColor: t.color || "#1677ff"
/* blue */
})
}, null, 4))
], !0)
], 6),
c("div", {
ref_for: !0,
ref_key: "descRef",
ref: n,
class: i(`timeline-desc desc-${a.mode}`)
}, [
g(e.$slots, "desc", {
item: t,
index: d
}, () => [
b(w(t.desc || "--"), 1)
], !0)
], 2)
], 2))), 128))
], 4));
}
});
export {
E as default
};