yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
239 lines (238 loc) • 8.73 kB
JavaScript
import { defineComponent, ref, shallowRef, onMounted, watch, nextTick, resolveComponent, openBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, mergeProps, withCtx, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
import { ElButton } from "element-plus";
import EleTooltip from "../ele-tooltip/index";
import ReceiverView from "../ele-config-provider/components/receiver-view";
import { useLocale } from "../ele-config-provider/receiver";
import { scrollIntoView, getOffset, getPopperProps } from "./util";
import { tourProps, tourEmits } from "./props";
const _sfc_main = defineComponent({
name: "EleTour",
components: { ElButton, EleTooltip, ReceiverView },
props: tourProps,
emits: tourEmits,
setup(props, { emit }) {
const { lang } = useLocale("tour", props);
const triggerRef = ref(null);
const tooltipRef = ref(null);
const tooltipProps = shallowRef({});
const visible = ref(false);
const step = shallowRef(null);
const isLast = ref(false);
const boxStyle = ref({});
const showMask = ref(false);
const start = () => {
if (!props.steps || props.modelValue == null || props.modelValue < 0 || props.modelValue >= props.steps.length) {
close();
return;
}
step.value = props.steps[props.modelValue];
if (!step.value) {
return;
}
isLast.value = props.modelValue === props.steps.length - 1;
const { mask, popoverProps, target, padding } = step.value;
showMask.value = mask ?? props.mask;
const el = typeof target === "function" ? target() : target;
if (el) {
scrollIntoView(el);
const { width, height } = el.getBoundingClientRect();
const { top, left } = getOffset(el);
const space = padding ?? props.padding ?? 0;
boxStyle.value = {
width: width + space + space + "px",
height: height + space + space + "px",
top: top - space + "px",
left: left - space + "px"
};
} else {
boxStyle.value = {
width: "0px",
height: "0px",
top: "50%",
left: "50%"
};
}
visible.value = true;
tooltipProps.value = getPopperProps(true, !el, popoverProps);
nextTick(() => {
updatePopper();
});
};
const close = () => {
visible.value = false;
boxStyle.value = {};
step.value = null;
showMask.value = false;
tooltipProps.value = getPopperProps();
};
const updateModelValue = (value) => {
emit("update:modelValue", value);
};
const handlePrev = () => {
if (props.modelValue != null && props.steps != null && props.steps.length && props.modelValue > 0) {
updateModelValue(props.modelValue - 1);
}
};
const handleNext = () => {
if (props.modelValue != null && props.steps != null && props.steps.length && props.modelValue < props.steps.length - 1) {
updateModelValue(props.modelValue + 1);
}
};
const handleFinish = () => {
updateModelValue(null);
};
const updatePopper = () => {
tooltipRef.value && tooltipRef.value.updatePopper();
};
onMounted(() => {
start();
});
watch(
() => props.modelValue,
() => {
start();
}
);
return {
lang,
triggerRef,
tooltipRef,
tooltipProps,
visible,
step,
isLast,
boxStyle,
showMask,
handlePrev,
handleNext,
handleFinish
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = {
key: 0,
class: "ele-tour-title"
};
const _hoisted_2 = { class: "ele-tour-text" };
const _hoisted_3 = { class: "ele-tour-footer" };
const _hoisted_4 = { class: "ele-tour-counter" };
const _hoisted_5 = { class: "ele-tour-action" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ElButton = resolveComponent("ElButton");
const _component_ReceiverView = resolveComponent("ReceiverView");
const _component_EleTooltip = resolveComponent("EleTooltip");
return openBlock(), createBlock(Teleport, { to: "body" }, [
createElementVNode("div", {
class: normalizeClass(["ele-tour", { "show-mask": _ctx.showMask }, { "is-open": _ctx.visible }]),
style: normalizeStyle({ zIndex: _ctx.zIndex })
}, [
createElementVNode("div", {
class: "ele-tour-box",
style: normalizeStyle(_ctx.boxStyle)
}, null, 4),
createElementVNode("div", {
ref: "triggerRef",
class: "ele-tour-reference",
style: normalizeStyle(_ctx.boxStyle)
}, null, 4),
createVNode(_component_EleTooltip, mergeProps(_ctx.tooltipProps, {
ref: "tooltipRef",
virtualRef: _ctx.triggerRef,
virtualTriggering: true,
disabled: !_ctx.visible,
hideAfter: 0
}), {
body: withCtx(() => [
_ctx.steps && _ctx.step ? (openBlock(), createBlock(_component_ReceiverView, {
key: 0,
class: "ele-popover-body"
}, {
default: withCtx(() => [
_ctx.step.title ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "title", {
step: _ctx.step,
current: _ctx.modelValue
}, () => [
createTextVNode(toDisplayString(_ctx.step.title), 1)
])
])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "text", {
step: _ctx.step,
current: _ctx.modelValue
}, () => [
createTextVNode(toDisplayString(_ctx.step.description), 1)
])
]),
renderSlot(_ctx.$slots, "footer", {
step: _ctx.step,
current: _ctx.modelValue
}, () => [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, toDisplayString((_ctx.modelValue || 0) + 1) + "/" + toDisplayString(_ctx.steps.length), 1),
createElementVNode("div", _hoisted_5, [
!_ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
key: 0,
size: "small",
onClick: _ctx.handleFinish
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.lang.skip), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true),
_ctx.modelValue !== 0 ? (openBlock(), createBlock(_component_ElButton, {
key: 1,
size: "small",
onClick: _ctx.handlePrev
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.lang.prev), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true),
!_ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
key: 2,
size: "small",
type: "primary",
onClick: _ctx.handleNext
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.lang.next), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true),
_ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
key: 3,
size: "small",
type: "primary",
onClick: _ctx.handleFinish
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.lang.finish), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true)
])
])
])
]),
_: 3
})) : createCommentVNode("", true)
]),
_: 3
}, 16, ["virtualRef", "disabled"])
], 6)
]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};