hongluan-ui
Version:
Hongluan Component Library for Vue 3
59 lines (56 loc) • 2.13 kB
JavaScript
import { defineComponent, reactive, inject, watch, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
import '../../../hooks/index.mjs';
import { carouselIndicatorProps } from './carousel-indicator.mjs';
import '../../../tokens/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { carouselIndicatorContextKey } from '../../../tokens/carousel.mjs';
const _sfc_main = defineComponent({
name: "CarouselIndicator",
props: carouselIndicatorProps,
emits: ["click", "hover"],
setup(props, { emit }) {
const { namespace } = useNamespace("carousel-indicator");
const data = reactive({
active: -1,
indicatorIndex: props.index
});
const injectIndicatorScope = inject(carouselIndicatorContextKey);
watch(() => injectIndicatorScope.activeIndex.value, (current) => {
data.active = current;
}, { immediate: true });
function handleItemClick() {
if (injectIndicatorScope.handleIndicatorClick) {
injectIndicatorScope.handleIndicatorClick(props.index);
}
emit("click", props.index);
}
function handlethrottledIndicatorHover() {
if (injectIndicatorScope.throttledIndicatorHover) {
injectIndicatorScope.throttledIndicatorHover(props.index);
}
emit("hover", props.index);
}
return {
namespace,
data,
handleItemClick,
handlethrottledIndicatorHover
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass([
{ "is-active": _ctx.data.indicatorIndex === _ctx.data.active },
_ctx.namespace
]),
onClick: _ctx.handleItemClick,
onMouseenter: _ctx.handlethrottledIndicatorHover
}, [
renderSlot(_ctx.$slots, "default")
], 42, ["onClick", "onMouseenter"]);
}
var CarouselIndicator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { CarouselIndicator as default };
//# sourceMappingURL=carousel-indicator2.mjs.map