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 c, computed as m, watchEffect as p, createElementBlock as l, openBlock as s, normalizeStyle as o, Fragment as C, renderList as $, normalizeClass as d, createElementVNode as i, renderSlot as y, 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(h) {
const r = h, a = c(), f = c([]), g = m(() => typeof r.width == "number" ? `${r.width}px` : r.width), u = m(() => r.items.length);
function v() {
for (let e = 0; e < u.value; e++)
f.value[e] = getComputedStyle(
a.value[e].firstElementChild || a.value[e],
null
).getPropertyValue("line-height");
}
return p(
() => {
v();
},
{ flush: "post" }
), p(
() => {
if (r.mode === "center")
for (let e = 0; e < u.value; e++)
(e + 1) % 2 ? r.position === "left" ? a.value[e].classList.add("desc-alternate-left") : a.value[e].classList.add("desc-alternate-right") : r.position === "left" ? a.value[e].classList.add("desc-alternate-right") : a.value[e].classList.add("desc-alternate-left");
},
{ flush: "post" }
), (e, S) => (s(), l("div", {
class: "m-timeline",
style: o(`width: ${g.value};`)
}, [
(s(!0), l(C, null, $(e.items, (t, n) => (s(), l("div", {
class: d(["timeline-item", { "item-last": n === e.items.length - 1 }]),
key: n
}, [
i("span", {
class: d(["timeline-tail", `tail-${e.mode}`]),
style: o(`border-left-style: ${e.lineStyle};`)
}, null, 6),
i("div", {
class: d(["timeline-dot", `dot-${e.mode}`]),
style: o(`height: ${f.value[n]}`)
}, [
y(e.$slots, "dot", {
item: t,
index: n
}, () => [
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),
i("div", {
ref_for: !0,
ref_key: "descRef",
ref: a,
class: d(`timeline-desc desc-${e.mode}`)
}, [
y(e.$slots, "desc", {
item: t,
index: n
}, () => [
b(w(t.desc || "--"), 1)
], !0)
], 2)
], 2))), 128))
], 4));
}
});
export {
E as default
};