@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
44 lines (43 loc) • 1.39 kB
JavaScript
import { defineComponent as f, inject as u, reactive as d, computed as o, onBeforeUnmount as p, createElementBlock as v, openBlock as h, normalizeStyle as _, normalizeClass as C, renderSlot as b } from "vue";
import { useNameHelper as $ } from "@vexip-ui/config";
import { CAROUSEL_STATE as k } from "./symbol.mjs";
const y = /* @__PURE__ */ f({
name: "CarouselItem",
__name: "carousel-item",
setup(x) {
const e = u(k, null), i = $("carousel"), t = d({
label: -1,
width: 0,
height: 0,
offset: 0
}), r = o(() => (e == null ? void 0 : e.isItemActive(t.label)) ?? !1), a = o(() => ({
[i.be("item")]: !0,
[i.bem("item", "active")]: r.value
})), c = o(() => {
const { width: n, height: l, offset: s } = t;
return {
width: n ? `${n}px` : void 0,
height: l ? `${l}px` : void 0,
transform: s ? `translate${e != null && e.vertical ? "Y" : "X"}(${s}px)` : void 0
};
});
e && (e.increaseItem(t), p(() => {
e.decreaseItem(t);
}));
function m() {
e == null || e.handleSelect(t.label);
}
return (n, l) => (h(), v("div", {
class: C(a.value),
role: "listitem",
style: _(c.value),
onClick: m
}, [
b(n.$slots, "default", { active: r.value })
], 6));
}
});
export {
y as default
};
//# sourceMappingURL=carousel-item.vue2.mjs.map