73 lines
3.1 KiB
JavaScript
Raw Normal View History

2024-01-29 09:26:07 +08:00
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
2024-08-02 18:19:39 +08:00
exports.isCarouselItem = isCarouselItem;
2024-01-29 09:26:07 +08:00
const vue_1 = require("vue");
const lodash_1 = require("lodash");
const _mixins_1 = require("../../_mixins");
const CarouselContext_1 = require("./CarouselContext");
const CarouselItemName = 'CarouselItem';
2024-08-02 18:19:39 +08:00
function isCarouselItem(child) {
var _a;
return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === CarouselItemName;
}
2024-01-29 09:26:07 +08:00
exports.default = (0, vue_1.defineComponent)({
name: CarouselItemName,
setup(props) {
const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
const NCarousel = (0, CarouselContext_1.useCarouselContext)((0, lodash_1.camelCase)(CarouselItemName), `n-${(0, lodash_1.camelCase)(CarouselItemName)}`);
const selfElRef = (0, vue_1.ref)();
const indexRef = (0, vue_1.computed)(() => {
const { value: selfEl } = selfElRef;
return selfEl ? NCarousel.getSlideIndex(selfEl) : -1;
});
const isPrevRef = (0, vue_1.computed)(() => NCarousel.isPrev(indexRef.value));
const isNextRef = (0, vue_1.computed)(() => NCarousel.isNext(indexRef.value));
const isActiveRef = (0, vue_1.computed)(() => NCarousel.isActive(indexRef.value));
const styleRef = (0, vue_1.computed)(() => NCarousel.getSlideStyle(indexRef.value));
(0, vue_1.onMounted)(() => {
NCarousel.addSlide(selfElRef.value);
});
(0, vue_1.onBeforeUnmount)(() => {
NCarousel.removeSlide(selfElRef.value);
});
function handleClick(event) {
const { value: index } = indexRef;
if (index !== undefined) {
NCarousel === null || NCarousel === void 0 ? void 0 : NCarousel.onCarouselItemClick(index, event);
}
}
return {
mergedClsPrefix: mergedClsPrefixRef,
selfElRef,
isPrev: isPrevRef,
isNext: isNextRef,
isActive: isActiveRef,
index: indexRef,
style: styleRef,
handleClick
};
},
render() {
var _a;
const { $slots: slots, mergedClsPrefix, isPrev, isNext, isActive, index, style } = this;
const className = [
`${mergedClsPrefix}-carousel__slide`,
{
[`${mergedClsPrefix}-carousel__slide--current`]: isActive,
[`${mergedClsPrefix}-carousel__slide--prev`]: isPrev,
[`${mergedClsPrefix}-carousel__slide--next`]: isNext
}
];
return ((0, vue_1.h)("div", { ref: "selfElRef", class: className, role: "option", tabindex: "-1", "data-index": index, "aria-hidden": !isActive, style: style,
// We use ts-ignore for vue-tsc, since it seems to patch native event
// for vue components
// @ts-expect-error vue's tsx has type for capture events
onClickCapture: this.handleClick }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots, {
isPrev,
isNext,
isActive,
index
})));
}
});