/**
 * ldesign v0.4.6
 * (c) 2023 ldesign
 * @license MIT
 */

import { h as helper } from '../_chunks/dep-b6ac6e96.js';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, toRefs, ref, computed, watch, onMounted, nextTick } from '@vue/composition-api';
import isFunction from 'lodash/isFunction';
import setStyle from '../_common/js/utils/set-style.js';
import TransferDom from '../utils/transfer-dom.js';
import { isFixed, removeClass, addClass, getWindowScroll } from '../utils/dom.js';
import useDefaultValue from '../hooks/useDefaultValue.js';
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig.js';
import { Button } from '../button/index.js';
import { Popup } from '../popup/index.js';
import { renderTNodeJSX } from '../utils/render-tnode.js';
import props from './props.js';
import { scrollToParentVisibleArea } from './utils/getScrollParent.js';
import getRelativePosition from './utils/getRelativePosition.js';
import getTargetElm from './utils/getTargetElm.js';
import scrollToElm from './utils/scrollToElm.js';
import { useConfig } from '../config-provider/useConfig.js';
import 'vue';
import 'raf';
import 'lodash/isString';
import '../utils/easing.js';
import '../utils/withInstall.js';
import 'lodash/capitalize';
import '../button/button.js';
import '../loading/index.js';
import '../loading/directive.js';
import 'lodash/isObject';
import 'lodash/mapKeys';
import 'lodash/isEqual';
import '../loading/plugin.js';
import '../config.js';
import '../loading/loading.js';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-2cb61c79.js';
import 'dayjs';
import '../utils/mixins.js';
import '../loading/props.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/isNull';
import 'lodash/isUndefined';
import 'lodash/isNumber';
import 'lodash/isArray';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../utils/ripple.js';
import '../button/props.js';
import '../utils/map-props.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../utils/helper.js';
import '../utils/event.js';
import '../popup/props.js';
import '../popup/container.js';
import '../popup/utils.js';
import '../popup/trigger.js';
import '../popup/plugin.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var _Guide = defineComponent({
  name: "TGuide",
  directives: {
    TransferDom: TransferDom
  },
  props: _objectSpread({}, props),
  setup: function setup(props2, context) {
    var COMPONENT_NAME = usePrefixClass("guide");
    var LOCK_CLASS = usePrefixClass("guide--lock");
    var _useConfig = useConfig("guide"),
      global = _useConfig.global;
    var _toRefs = toRefs(props2),
      current = _toRefs.current;
    var _useCommonClassName = useCommonClassName(),
      classPrefix = _useCommonClassName.classPrefix;
    var _useDefaultValue = useDefaultValue(current, props2.defaultCurrent, props2.onChange, "current", "change"),
      _useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
      innerCurrent = _useDefaultValue2[0],
      setInnerCurrent = _useDefaultValue2[1];
    var overlayLayerRef = ref();
    var highlightLayerRef = ref();
    var referenceLayerRef = ref();
    var currentHighlightLayerElm = ref();
    var dialogWrapperRef = ref();
    var dialogTooltipRef = ref();
    var activated = ref(false);
    var stepsTotal = computed(function () {
      return props2.steps.length;
    });
    var currentStepInfo = computed(function () {
      var _props2$steps;
      return (_props2$steps = props2.steps) === null || _props2$steps === void 0 ? void 0 : _props2$steps[innerCurrent.value];
    });
    var isPopup = computed(function () {
      return getCurrentCrossProps("mode") === "popup";
    });
    var currentElmIsFixed = computed(function () {
      return isFixed(currentHighlightLayerElm.value || document.body);
    });
    var getCurrentCrossProps = function getCurrentCrossProps(propsName) {
      var _currentStepInfo$valu;
      return (_currentStepInfo$valu = currentStepInfo.value[propsName]) !== null && _currentStepInfo$valu !== void 0 ? _currentStepInfo$valu : props2[propsName];
    };
    var setHighlightLayerPosition = function setHighlightLayerPosition(highlighLayer) {
      var _getRelativePosition = getRelativePosition(currentHighlightLayerElm.value),
        top = _getRelativePosition.top,
        left = _getRelativePosition.left;
      var _currentHighlightLaye = currentHighlightLayerElm.value.getBoundingClientRect(),
        width = _currentHighlightLaye.width,
        height = _currentHighlightLaye.height;
      var highlightPadding = getCurrentCrossProps("highlightPadding");
      if (isPopup.value) {
        width += highlightPadding * 2;
        height += highlightPadding * 2;
        top -= highlightPadding;
        left -= highlightPadding;
      } else {
        var _getWindowScroll = getWindowScroll(),
          scrollTop = _getWindowScroll.scrollTop,
          scrollLeft = _getWindowScroll.scrollLeft;
        top += scrollTop;
        left += scrollLeft;
      }
      setStyle(highlighLayer, {
        width: "".concat(width, "px"),
        height: "".concat(height, "px"),
        top: "".concat(top, "px"),
        left: "".concat(left, "px")
      });
    };
    var showPopupGuide = function showPopupGuide() {
      nextTick(function () {
        currentHighlightLayerElm.value = getTargetElm(currentStepInfo.value.element);
        if (!currentHighlightLayerElm.value) return;
        scrollToParentVisibleArea(currentHighlightLayerElm.value);
        setHighlightLayerPosition(highlightLayerRef.value);
        setHighlightLayerPosition(referenceLayerRef.value);
        scrollToElm(currentHighlightLayerElm.value);
      });
    };
    var destroyTooltipElm = function destroyTooltipElm() {
      var _referenceLayerRef$va;
      (_referenceLayerRef$va = referenceLayerRef.value) === null || _referenceLayerRef$va === void 0 ? void 0 : _referenceLayerRef$va.parentNode.removeChild(referenceLayerRef.value);
    };
    var showDialogGuide = function showDialogGuide() {
      nextTick(function () {
        currentHighlightLayerElm.value = dialogTooltipRef.value;
        scrollToParentVisibleArea(currentHighlightLayerElm.value);
        setHighlightLayerPosition(highlightLayerRef.value);
        scrollToElm(currentHighlightLayerElm.value);
      });
    };
    var destroyDialogTooltipElm = function destroyDialogTooltipElm() {
      var _dialogTooltipRef$val, _dialogWrapperRef$val;
      (_dialogTooltipRef$val = dialogTooltipRef.value) === null || _dialogTooltipRef$val === void 0 ? void 0 : _dialogTooltipRef$val.parentNode.removeChild(dialogTooltipRef.value);
      (_dialogWrapperRef$val = dialogWrapperRef.value) === null || _dialogWrapperRef$val === void 0 ? void 0 : _dialogWrapperRef$val.parentNode.removeChild(dialogWrapperRef.value);
    };
    var showGuide = function showGuide() {
      if (isPopup.value) {
        destroyDialogTooltipElm();
        showPopupGuide();
      } else {
        destroyTooltipElm();
        showDialogGuide();
      }
    };
    var destroyGuide = function destroyGuide() {
      var _highlightLayerRef$va, _overlayLayerRef$valu;
      destroyTooltipElm();
      destroyDialogTooltipElm();
      (_highlightLayerRef$va = highlightLayerRef.value) === null || _highlightLayerRef$va === void 0 ? void 0 : _highlightLayerRef$va.parentNode.removeChild(highlightLayerRef.value);
      (_overlayLayerRef$valu = overlayLayerRef.value) === null || _overlayLayerRef$valu === void 0 ? void 0 : _overlayLayerRef$valu.parentNode.removeChild(overlayLayerRef.value);
      removeClass(document.body, LOCK_CLASS.value);
    };
    var handleSkip = function handleSkip(e) {
      var _props2$onSkip;
      var total = stepsTotal.value;
      activated.value = false;
      setInnerCurrent(-1, {
        e: e,
        total: total
      });
      var eventParams = {
        e: e,
        current: innerCurrent.value,
        total: total
      };
      (_props2$onSkip = props2.onSkip) === null || _props2$onSkip === void 0 ? void 0 : _props2$onSkip.call(props2, eventParams);
      context.emit("skip", eventParams);
    };
    var handlePrev = function handlePrev(e) {
      var _props2$onPrevStepCli;
      var total = stepsTotal.value;
      setInnerCurrent(innerCurrent.value - 1, {
        e: e,
        total: total
      });
      var eventParams = {
        e: e,
        prev: innerCurrent.value - 1,
        current: innerCurrent.value,
        total: total
      };
      (_props2$onPrevStepCli = props2.onPrevStepClick) === null || _props2$onPrevStepCli === void 0 ? void 0 : _props2$onPrevStepCli.call(props2, eventParams);
      context.emit("prev-step-click", eventParams);
    };
    var handleNext = function handleNext(e) {
      var _props2$onNextStepCli;
      var total = stepsTotal.value;
      setInnerCurrent(innerCurrent.value + 1, {
        e: e,
        total: total
      });
      var eventParams = {
        e: e,
        next: innerCurrent.value + 1,
        current: innerCurrent.value,
        total: total
      };
      (_props2$onNextStepCli = props2.onNextStepClick) === null || _props2$onNextStepCli === void 0 ? void 0 : _props2$onNextStepCli.call(props2, eventParams);
      context.emit("next-step-click", eventParams);
    };
    var handleFinish = function handleFinish(e) {
      var _props2$onFinish;
      var total = stepsTotal.value;
      activated.value = false;
      setInnerCurrent(-1, {
        e: e,
        total: total
      });
      (_props2$onFinish = props2.onFinish) === null || _props2$onFinish === void 0 ? void 0 : _props2$onFinish.call(props2, {
        e: e,
        current: innerCurrent.value,
        total: total
      });
      context.emit("finish", {
        e: e,
        current: innerCurrent.value,
        total: total
      });
    };
    var initGuide = function initGuide() {
      var _props2$steps2;
      if (innerCurrent.value >= 0 && innerCurrent.value < ((_props2$steps2 = props2.steps) === null || _props2$steps2 === void 0 ? void 0 : _props2$steps2.length)) {
        if (!activated.value) {
          activated.value = true;
          addClass(document.body, LOCK_CLASS.value);
        }
        showGuide();
      }
    };
    watch(innerCurrent, function (val) {
      var _props2$steps3;
      if (val >= 0 && val < ((_props2$steps3 = props2.steps) === null || _props2$steps3 === void 0 ? void 0 : _props2$steps3.length)) {
        initGuide();
      } else {
        activated.value = false;
        destroyGuide();
      }
    });
    onMounted(function () {
      initGuide();
    });
    return {
      classPrefix: classPrefix,
      componentName: COMPONENT_NAME,
      innerCurrent: innerCurrent,
      isPopup: isPopup,
      currentElmIsFixed: currentElmIsFixed,
      currentStepInfo: currentStepInfo,
      stepsTotal: stepsTotal,
      handlePrev: handlePrev,
      handleNext: handleNext,
      handleSkip: handleSkip,
      handleFinish: handleFinish,
      getCurrentCrossProps: getCurrentCrossProps,
      global: global,
      highlightLayerRef: highlightLayerRef,
      overlayLayerRef: overlayLayerRef,
      referenceLayerRef: referenceLayerRef,
      currentHighlightLayerElm: currentHighlightLayerElm,
      dialogWrapperRef: dialogWrapperRef,
      dialogTooltipRef: dialogTooltipRef,
      activated: activated
    };
  },
  render: function render(h) {
    var _this = this;
    var stepsTotal = this.stepsTotal;
    var currentStepInfo = this.currentStepInfo;
    var globalConfig = this.global;
    var getCurrentCrossProps = this.getCurrentCrossProps;
    var renderTooltipTitle = function renderTooltipTitle(h2) {
      var currentStepInfo2 = _this.currentStepInfo;
      var functionTitle = isFunction(currentStepInfo2.title) ? currentStepInfo2.title(h2) : void 0;
      var slotTitle = _this.$scopedSlots.title ? _this.$scopedSlots.title(h2) : void 0;
      var title = functionTitle || slotTitle || currentStepInfo2.title;
      return title ? h("div", {
        "class": "".concat(_this.componentName, "__title")
      }, [title]) : null;
    };
    var getHighlightContent = function getHighlightContent(h2) {
      var params = h2;
      params.currentStepInfo = _this.currentStepInfo;
      var highlightContent = _this.currentStepInfo.highlightContent;
      var node = highlightContent;
      if (isFunction(highlightContent)) {
        node = highlightContent(params);
      } else if (_this.$scopedSlots.highlightContent) {
        node = _this.$scopedSlots.highlightContent(params);
      } else if (_this.$scopedSlots["highlight-content"]) {
        node = _this.$scopedSlots["highlight-content"](params);
      } else if (highlightContent) {
        node = h(node);
      }
      if (node) {
        node.props = node.props || {};
        node.props["class"] = "".concat(_this.componentName, "__highlight--mask ").concat(node.props["class"] || "");
      }
      return node;
    };
    var renderOverlayLayer = function renderOverlayLayer() {
      return h("div", {
        "ref": "overlayLayerRef",
        "directives": [{
          name: "transfer-dom",
          value: "body"
        }],
        "class": "".concat(_this.componentName, "__overlay"),
        "style": {
          zIndex: _this.zIndex - 2
        }
      });
    };
    var renderAction = function renderAction(mode) {
      var _getCurrentCrossProps, _getCurrentCrossProps2, _getCurrentCrossProps3, _this$finishButtonPro;
      var isLast = _this.innerCurrent === stepsTotal - 1;
      var isFirst = _this.innerCurrent === 0;
      var buttonSize = mode === "popup" ? "small" : "medium";
      return h("div", {
        "class": "".concat(_this.componentName, "__action")
      }, [!_this.hideSkip && !isLast && h(Button, {
        "class": "".concat(_this.componentName, "__skip"),
        "props": _objectSpread({}, _objectSpread({
          theme: "default",
          size: buttonSize,
          variant: "base",
          onClick: _this.handleSkip
        }, (_getCurrentCrossProps = getCurrentCrossProps("skipButtonProps")) !== null && _getCurrentCrossProps !== void 0 ? _getCurrentCrossProps : globalConfig.skipButtonProps))
      }), !_this.hidePrev && !isFirst && h(Button, {
        "class": "".concat(_this.componentName, "__prev"),
        "props": _objectSpread({}, _objectSpread({
          theme: "primary",
          size: buttonSize,
          variant: "base",
          onClick: _this.handlePrev
        }, (_getCurrentCrossProps2 = getCurrentCrossProps("prevButtonProps")) !== null && _getCurrentCrossProps2 !== void 0 ? _getCurrentCrossProps2 : globalConfig.prevButtonProps))
      }), !isLast && h(Button, {
        "class": "".concat(_this.componentName, "__next"),
        "props": _objectSpread({}, _objectSpread({
          theme: "primary",
          size: buttonSize,
          variant: "base",
          onClick: _this.handleNext
        }, (_getCurrentCrossProps3 = getCurrentCrossProps("nextButtonProps")) !== null && _getCurrentCrossProps3 !== void 0 ? _getCurrentCrossProps3 : globalConfig.nextButtonProps))
      }), isLast && h(Button, {
        "class": "".concat(_this.componentName, "__finish"),
        "props": _objectSpread({}, _objectSpread({
          theme: "primary",
          size: buttonSize,
          variant: "base",
          onClick: _this.handleFinish
        }, (_this$finishButtonPro = _this.finishButtonProps) !== null && _this$finishButtonPro !== void 0 ? _this$finishButtonPro : globalConfig.finishButtonProps))
      })]);
    };
    var renderTooltipBody = function renderTooltipBody(h2) {
      var stepBody = _this.currentStepInfo.body;
      var descBody;
      if (isFunction(stepBody)) {
        descBody = stepBody(h2);
      } else if (_this.$scopedSlots.body) {
        var hParams = h2;
        Object.assign(hParams, {
          currentStepInfo: _this.currentStepInfo
        });
        descBody = _this.$scopedSlots.body(hParams);
      } else if (typeof stepBody === "string") {
        descBody = stepBody;
      } else {
        descBody = h(stepBody);
      }
      return descBody ? h("div", {
        "class": "".concat(_this.componentName, "__desc")
      }, [descBody]) : null;
    };
    var renderPopupContent = function renderPopupContent() {
      var footerClasses = ["".concat(_this.componentName, "__footer"), "".concat(_this.componentName, "__footer--popup")];
      var action = h("div", {
        "class": footerClasses
      }, [renderCounter(), renderAction("popup")]);
      return h("div", {
        "class": "".concat(_this.componentName, "__tooltip")
      }, [renderTooltipTitle(h), renderTooltipBody(h), action]);
    };
    var renderHighlightLayer = function renderHighlightLayer() {
      var style = {
        zIndex: _this.zIndex - 1
      };
      var highlightClass = ["".concat(_this.componentName, "__highlight"), "".concat(_this.componentName, "__highlight--").concat(_this.isPopup ? "popup" : "dialog"), "".concat(_this.componentName, "--").concat(_this.currentElmIsFixed && _this.isPopup ? "fixed" : "absolute")];
      var showOverlay = getCurrentCrossProps("showOverlay");
      var maskClass = ["".concat(_this.componentName, "__highlight--").concat(showOverlay ? "mask" : "nomask")];
      var innerHighlightContent = getHighlightContent(h);
      var showHighlightContent = Boolean(innerHighlightContent && _this.isPopup);
      return h("div", {
        "ref": "highlightLayerRef",
        "directives": [{
          name: "transfer-dom",
          value: "body"
        }],
        "class": highlightClass.concat(showHighlightContent ? [] : maskClass),
        "style": style
      }, [showHighlightContent && innerHighlightContent]);
    };
    var renderCounter = function renderCounter() {
      var popupSlotCounter = renderTNodeJSX(_this, "counter", {
        params: {
          total: _this.stepsTotal,
          current: _this.innerCurrent
        }
      });
      var popupDefaultCounter = h("div", {
        "class": "".concat(_this.componentName, "__counter")
      }, [popupSlotCounter || "".concat(_this.innerCurrent + 1, "/").concat(_this.stepsTotal)]);
      return !_this.hideCounter ? popupDefaultCounter : null;
    };
    var renderDialogGuide = function renderDialogGuide() {
      var _ref2;
      var style = {
        zIndex: _this.zIndex
      };
      var wrapperClasses = ["".concat(_this.componentName, "__wrapper"), _defineProperty({}, "".concat(_this.componentName, "__wrapper--center"), currentStepInfo.placement === "center")];
      var dialogClasses = ["".concat(_this.componentName, "__reference"), "".concat(_this.componentName, "--absolute"), "".concat(_this.componentName, "__dialog"), (_ref2 = {}, _defineProperty(_ref2, "".concat(_this.componentName, "__dialog--nomask"), !getCurrentCrossProps("showOverlay")), _defineProperty(_ref2, currentStepInfo.stepOverlayClass, !!currentStepInfo.stepOverlayClass), _ref2)];
      var footerClasses = ["".concat(_this.componentName, "__footer"), "".concat(_this.componentName, "__footer--popup")];
      return h("div", [h("div", {
        "ref": "dialogWrapperRef",
        "directives": [{
          name: "transfer-dom",
          value: "body"
        }],
        "class": wrapperClasses,
        "style": style
      }, [h("div", {
        "ref": "dialogTooltipRef",
        "class": dialogClasses
      }, [renderTooltipTitle(h), renderTooltipBody(h), h("div", {
        "class": footerClasses
      }, [renderCounter(), renderAction("dialog")])])])]);
    };
    var renderPopupGuide = function renderPopupGuide() {
      var _currentStepInfo$popu;
      var content = currentStepInfo.content;
      var contentProps = {
        handlePrev: _this.handlePrev,
        handleNext: _this.handleNext,
        handleSkip: _this.handleSkip,
        handleFinish: _this.handleFinish,
        current: _this.innerCurrent,
        total: _this.stepsTotal
      };
      var hParams = h;
      hParams.currentStepInfo = _this.currentStepInfo;
      var renderBody;
      if (isFunction(content)) renderBody = function renderBody() {
        return content(hParams);
      };else if (_this.$scopedSlots.content) renderBody = function renderBody() {
        return _this.$scopedSlots.content(hParams);
      };else if (typeof content === "string") renderBody = content;else if (content) renderBody = function renderBody() {
        return h(content, helper([{}, {
          "props": contentProps
        }]));
      };else renderBody = renderPopupContent;
      var classes = ["".concat(_this.componentName, "__reference"), "".concat(_this.componentName, "--").concat(_this.currentElmIsFixed ? "fixed" : "absolute")];
      var innerClassName = [_defineProperty({}, "".concat(_this.classPrefix, "-guide__popup--content"), !!content)];
      return h(Popup, helper([{
        "attrs": {
          "visible": true,
          "show-arrow": !content,
          "zIndex": _this.zIndex,
          "placement": currentStepInfo.placement
        }
      }, {
        "props": currentStepInfo.popupProps
      }, {
        "attrs": {
          "content": renderBody,
          "overlayClassName": ["".concat(_this.componentName, "__popup"), currentStepInfo === null || currentStepInfo === void 0 ? void 0 : currentStepInfo.stepOverlayClass],
          "overlayInnerClassName": innerClassName.concat((_currentStepInfo$popu = currentStepInfo.popupProps) === null || _currentStepInfo$popu === void 0 ? void 0 : _currentStepInfo$popu.overlayInnerClassName)
        }
      }]), [h("div", {
        "ref": "referenceLayerRef",
        "directives": [{
          name: "transfer-dom",
          value: "body"
        }],
        "class": classes
      })]);
    };
    return this.activated ? h("div", [renderOverlayLayer(), renderHighlightLayer(), this.isPopup ? renderPopupGuide() : renderDialogGuide()]) : null;
  }
});

export { _Guide as default };
//# sourceMappingURL=guide.js.map
