hongluan-ui
Version:
Hongluan Component Library for Vue 3
161 lines (158 loc) • 6.14 kB
JavaScript
import { defineComponent, inject, getCurrentInstance, reactive, computed, onMounted, onUnmounted, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, vShow, createCommentVNode, renderSlot } from 'vue';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import { carouselItemProps } from './carousel-item2.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { carouselContextKey } from '../../../tokens/carousel.mjs';
import { debugWarn } from '../../../utils/error.mjs';
const CARD_SCALE = 0.83;
const COMPONENT_NAME = "CarouselItem";
const _sfc_main = defineComponent({
name: "CarouselItem",
props: carouselItemProps,
setup(props) {
const { namespace } = useNamespace("carousel-item");
const carouselContext = inject(carouselContextKey);
const instance = getCurrentInstance();
if (!carouselContext) {
debugWarn(COMPONENT_NAME, "usage: <hl-carousel></hl-carousel-item></hl-carousel>");
}
if (!instance) {
debugWarn(COMPONENT_NAME, "compositional hook can only be invoked inside setups");
}
const data = reactive({
hover: false,
translate: 0,
scale: 1,
active: false,
ready: false,
inStage: false,
animating: false
});
const parentDirection = computed(() => {
return carouselContext.direction;
});
const itemStyle = computed(() => {
const translateType = parentDirection.value === "vertical" ? "translateY" : "translateX";
const value = `${translateType}(${data.translate}${carouselContext.itemsWidthUnit}) scale(${data.scale})`;
const style = {
transform: value,
width: carouselContext.showMultiple.value ? Number.parseFloat(String(carouselContext.itemsWidth)) + carouselContext.itemsWidthUnit : ""
};
return style;
});
function processIndex(index, activeIndex, length) {
if (activeIndex === 0 && index === length - 1) {
return -1;
} else if (activeIndex === length - 1 && index === 0) {
return length;
} else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
return length + 1;
} else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
return -2;
}
return index;
}
function calcCardTranslate(index, activeIndex) {
var _a;
const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
if (data.inStage) {
return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
} else if (index < activeIndex) {
return -(1 + CARD_SCALE) * parentWidth / 4;
} else {
return (3 + CARD_SCALE) * parentWidth / 4;
}
}
function calcTranslate(index, activeIndex, isVertical) {
var _a, _b;
const distance = (isVertical ? (_a = carouselContext.root.value) == null ? void 0 : _a.offsetHeight : (_b = carouselContext.root.value) == null ? void 0 : _b.offsetWidth) || 0;
return distance * (index - activeIndex);
}
const translateItem = (index, activeIndex, oldIndex, distance, isAnimating) => {
const parentType = carouselContext.type;
const length = carouselContext.items.value.length;
if (parentType !== "card" && oldIndex !== void 0 && !carouselContext.showMultiple.value) {
data.animating = index === activeIndex || index === oldIndex;
}
if (index !== activeIndex && length > 2 && carouselContext.loop) {
index = processIndex(index, activeIndex, length);
}
if (parentType === "card") {
if (parentDirection.value === "vertical") {
debugWarn("Carousel", "vertical direction is not supported in card mode");
}
data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
data.active = index === activeIndex;
data.translate = calcCardTranslate(index, activeIndex);
data.scale = data.active ? 1 : CARD_SCALE;
} else {
if (carouselContext.showMultiple.value) {
data.animating = isAnimating;
data.translate = distance;
} else {
data.active = index === activeIndex;
const isVertical = parentDirection.value === "vertical";
data.translate = calcTranslate(index, activeIndex, isVertical);
}
}
data.ready = true;
};
function handleItemClick() {
if (carouselContext && carouselContext.type === "card") {
const index = carouselContext.items.value.map((d) => d.uid).indexOf(instance.uid);
carouselContext.setActiveItem(index);
}
}
onMounted(() => {
carouselContext.addItem({
uid: instance.uid,
props,
states: data,
translateItem
});
});
onUnmounted(() => {
carouselContext.removeItem(instance.uid);
});
return {
namespace,
data,
itemStyle,
translateItem,
type: carouselContext.type,
handleItemClick
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return withDirectives((openBlock(), createElementBlock("div", {
class: normalizeClass([
_ctx.namespace,
{
"is-active": _ctx.data.active,
"carousel-item-card": _ctx.type === "card",
"is-in-stage": _ctx.data.inStage,
"is-hover": _ctx.data.hover,
"is-animating": _ctx.data.animating
}
]),
style: normalizeStyle(_ctx.itemStyle),
onClick: _ctx.handleItemClick
}, [
_ctx.type === "card" ? withDirectives((openBlock(), createElementBlock("div", {
key: 0,
class: "carousel-mask"
}, null, 512)), [
[vShow, !_ctx.data.active]
]) : createCommentVNode("v-if", true),
renderSlot(_ctx.$slots, "default")
], 14, ["onClick"])), [
[vShow, _ctx.data.ready]
]);
}
var CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { CarouselItem as default };
//# sourceMappingURL=carousel-item.mjs.map