element-plus
Version:
A Component Library for Vue 3
115 lines (112 loc) • 4.34 kB
JavaScript
import { defineComponent, inject, ref, computed, unref, watch, onMounted, provide, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot, createVNode, withCtx, Fragment, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
import { offset } from '@floating-ui/dom';
import ElVisuallyHidden from '../../visual-hidden/src/visual-hidden2.mjs';
import { tooltipV2RootKey, tooltipV2ContentKey } from './constants.mjs';
import { tooltipV2ContentProps } from './content2.mjs';
import { tooltipV2CommonProps } from './common.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useFloating, arrowMiddleware } from '../../../hooks/use-floating/index.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
const __default__ = defineComponent({
name: "ElTooltipV2Content"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: { ...tooltipV2ContentProps, ...tooltipV2CommonProps },
setup(__props) {
const props = __props;
const { triggerRef, contentId } = inject(tooltipV2RootKey);
const placement = ref(props.placement);
const strategy = ref(props.strategy);
const arrowRef = ref(null);
const { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({
placement,
strategy,
middleware: computed(() => {
const middleware = [offset(props.offset)];
if (props.showArrow) {
middleware.push(arrowMiddleware({
arrowRef
}));
}
return middleware;
})
});
const zIndex = useZIndex().nextZIndex();
const ns = useNamespace("tooltip-v2");
const side = computed(() => {
return placement.value.split("-")[0];
});
const contentStyle = computed(() => {
return {
position: unref(strategy),
top: `${unref(y) || 0}px`,
left: `${unref(x) || 0}px`,
zIndex
};
});
const arrowStyle = computed(() => {
if (!props.showArrow)
return {};
const { arrow } = unref(middlewareData);
return {
[`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow == null ? void 0 : arrow.x}px` || "",
[`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow == null ? void 0 : arrow.y}px` || ""
};
});
const contentClass = computed(() => [
ns.e("content"),
ns.is("dark", props.effect === "dark"),
ns.is(unref(strategy)),
props.contentClass
]);
watch(arrowRef, () => update());
watch(() => props.placement, (val) => placement.value = val);
onMounted(() => {
watch(() => props.reference || triggerRef.value, (el) => {
referenceRef.value = el || void 0;
}, {
immediate: true
});
});
provide(tooltipV2ContentKey, { arrowRef });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "contentRef",
ref: contentRef,
style: normalizeStyle(unref(contentStyle)),
"data-tooltip-v2-root": ""
}, [
!_ctx.nowrap ? (openBlock(), createElementBlock("div", {
key: 0,
"data-side": unref(side),
class: normalizeClass(unref(contentClass))
}, [
renderSlot(_ctx.$slots, "default", {
contentStyle: unref(contentStyle),
contentClass: unref(contentClass)
}),
createVNode(unref(ElVisuallyHidden), {
id: unref(contentId),
role: "tooltip"
}, {
default: withCtx(() => [
_ctx.ariaLabel ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createTextVNode(toDisplayString(_ctx.ariaLabel), 1)
], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 })
]),
_: 3
}, 8, ["id"]),
renderSlot(_ctx.$slots, "arrow", {
style: normalizeStyle(unref(arrowStyle)),
side: unref(side)
})
], 10, ["data-side"])) : createCommentVNode("v-if", true)
], 4);
};
}
});
var TooltipV2Content = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
export { TooltipV2Content as default };
//# sourceMappingURL=content.mjs.map