yuang-framework-ui-pc/lib/ele-tour/index.cjs

yuang-framework-ui-pc Library

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