@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
91 lines (90 loc) • 2.9 kB
JavaScript
import { defineComponent as k, inject as _, ref as d, computed as p, reactive as E, watch as m, onMounted as T, onUpdated as z, onBeforeUnmount as N, createElementBlock as $, openBlock as B, normalizeStyle as f, normalizeClass as s, createElementVNode as i, unref as c, renderSlot as u } from "vue";
import { useProps as H, useNameHelper as x, emitEvent as A } from "@vexip-ui/config";
import { timelineItemProps as L } from "./props.mjs";
import { timelineItemTypes as v, TIMELINE_STATE as M } from "./symbol.mjs";
const w = /* @__PURE__ */ k({
name: "TimelineItem",
__name: "timeline-item",
props: L,
setup(h, { expose: g }) {
const o = H("timelineItem", h, {
type: {
default: "primary",
validator: (n) => v.includes(n)
},
color: "",
label: {
default: null,
static: !0
},
dashed: null,
lineColor: null,
spacing: null
}), e = _(M, null), t = x("timeline"), r = d(o.label), a = d(), b = p(() => ({
[t.be("item")]: !0,
[t.bem("item", o.type)]: v.includes(o.type)
})), y = p(() => {
const n = o.spacing || o.spacing === 0 ? o.spacing : e == null ? void 0 : e.spacing, l = {
[t.cv("item-span")]: typeof n == "number" ? `${n}px` : n
};
return o.color && (l[t.cv("pointer-color")] = o.color, l[t.cv("pointer-b-color")] = o.color), l;
}), C = p(() => {
const n = o.dashed ?? (e == null ? void 0 : e.dashed) ?? !1, l = o.lineColor ?? (e == null ? void 0 : e.lineColor);
return {
borderInlineStartStyle: n ? "dashed" : void 0,
borderInlineStartColor: l
};
});
if (g({ currentLabel: r, content: a }), e) {
let n = function() {
requestAnimationFrame(() => {
e != null && e.horizontal && a.value && (l.height = a.value.scrollHeight);
});
};
const l = E({
label: r,
index: 0,
total: 0,
height: 0
});
e.increaseItem(l), m(() => e.alternate, n), m(() => e.horizontal, n), T(n), z(n), N(() => {
e.decreaseItem(l);
});
}
function I() {
A(o.onSignalClick, r.value), e == null || e.handleSignalClick(r.value);
}
return (n, l) => (B(), $("div", {
class: s(b.value),
style: f(y.value)
}, [
i("div", {
class: s(c(t).be("signal")),
onClick: I
}, [
u(n.$slots, "signal", {}, () => [
i("div", {
class: s(c(t).be("pointer"))
}, null, 2)
])
], 2),
i("div", {
class: s(c(t).be("line")),
style: f(C.value)
}, [
u(n.$slots, "line")
], 6),
i("div", {
ref_key: "content",
ref: a,
class: s(c(t).be("content"))
}, [
u(n.$slots, "default")
], 2)
], 6));
}
});
export {
w as default
};
//# sourceMappingURL=timeline-item.vue2.mjs.map