tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
104 lines (103 loc) • 3.05 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const _hoisted_1 = ["data-id"];
const __default__ = {
name: "TassCarouselItem"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
id: null
},
setup(__props) {
const props = __props;
const active = vue.inject("active");
const slotsChange = vue.inject("slotsChange");
slotsChange.value = !slotsChange.value;
const anim = vue.inject("anim");
const item = vue.ref();
const getStyle = vue.computed(() => {
if (item.value) {
let allChild = item.value.parentNode.children;
let allChildNum = allChild.length;
let activeIndex = 0;
let currentIndex = 0;
for (let index = 0; index < allChild.length; index++) {
const element = allChild[index];
if (element.getAttribute("data-id") === active.value) {
activeIndex = index;
}
if (element.getAttribute("data-id") === props.id) {
currentIndex = index;
}
}
let prevIndex = activeIndex > 0 ? activeIndex - 1 : allChildNum - 1;
let nextIndex = activeIndex + 1 < allChildNum ? activeIndex + 1 : 0;
let animation = anim.value;
if (activeIndex === currentIndex) {
if (animation === "updown") {
return {
transform: "translateY(0)",
visibility: "inherit"
};
} else if (animation.includes("fade")) {
return {
opacity: 1,
visibility: "inherit"
};
} else {
return {
transform: "translateX(0)",
visibility: "inherit"
};
}
}
if (prevIndex === currentIndex) {
if (animation === "updown") {
return {
transform: "translateY(-100%)"
};
} else if (animation.includes("fade")) {
return {
opacity: 0
};
} else {
return {
transform: "translateX(-100%)"
};
}
}
if (nextIndex === currentIndex) {
if (animation === "updown") {
return {
transform: "translateY(100%)"
};
} else if (animation.includes("fade")) {
return {
opacity: 0
};
} else {
return {
transform: "translateX(100%)"
};
}
}
return {
display: "none"
};
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("li", {
ref_key: "item",
ref: item,
style: vue.normalizeStyle(vue.unref(getStyle)),
"data-id": __props.id
}, [
vue.renderSlot(_ctx.$slots, "default")
], 12, _hoisted_1);
};
}
});
exports.default = _sfc_main;