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
|
|
|
|
})));
|
|
|
|
}
|
|
|
|
});
|