'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
require('../../../hooks/index.cjs');
var PortalWrapper = require('../../portal/src/PortalWrapper.cjs');
var propType = require('../../../utils/vue/propType.cjs');
var index = require('../../../hooks/use-id/index.cjs');
var _class = require('../../../utils/dom/class.cjs');

const COVER_PROPS = {
  "fill": "transparent",
  "pointer-events": "auto"
};
const Mask = /* @__PURE__ */ vue.defineComponent({
  name: "TourMask",
  props: {
    prefixCls: {
      type: String
    },
    pos: propType.objectType(),
    // 获取引导卡片指向的元素
    rootClassName: {
      type: String
    },
    showMask: propType.booleanType(),
    fill: {
      type: String,
      default: "rgba(0,0,0,0.5)"
    },
    open: propType.booleanType(),
    animated: propType.someType([Boolean, Object]),
    zIndex: {
      type: Number
    }
  },
  setup(props, {
    attrs
  }) {
    const id = index.useId();
    return () => {
      const {
        prefixCls,
        open,
        rootClassName,
        pos,
        showMask,
        fill,
        animated,
        zIndex
      } = props;
      const maskId = `${prefixCls}-mask-${id}`;
      const mergedAnimated = typeof animated === "object" ? animated == null ? void 0 : animated.placeholder : animated;
      return vue.createVNode(PortalWrapper.default, {
        "visible": open,
        "autoLock": true
      }, {
        default: () => open && vue.createVNode("div", {
          ...attrs,
          "class": _class.classNames(`${prefixCls}-mask`, rootClassName, attrs.class),
          "style": [{
            position: "fixed",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            zIndex,
            pointerEvents: "none"
          }, attrs.style]
        }, [showMask ? vue.createVNode("svg", {
          "style": {
            width: "100%",
            height: "100%"
          }
        }, [vue.createVNode("defs", null, [vue.createVNode("mask", {
          "id": maskId
        }, [vue.createVNode("rect", {
          "x": "0",
          "y": "0",
          "width": "100vw",
          "height": "100vh",
          "fill": "white"
        }, null), pos && vue.createVNode("rect", {
          "x": pos.left,
          "y": pos.top,
          "rx": pos.radius,
          "width": pos.width,
          "height": pos.height,
          "fill": "black",
          "class": mergedAnimated ? `${prefixCls}-placeholder-animated` : ""
        }, null)])]), vue.createVNode("rect", {
          "x": "0",
          "y": "0",
          "width": "100%",
          "height": "100%",
          "fill": fill,
          "mask": `url(#${maskId})`
        }, null), pos && vue.createVNode(vue.Fragment, null, [vue.createVNode("rect", {
          ...COVER_PROPS,
          "x": "0",
          "y": "0",
          "width": "100%",
          "height": pos.top
        }, null), vue.createVNode("rect", {
          ...COVER_PROPS,
          "x": "0",
          "y": "0",
          "width": pos.left,
          "height": "100%"
        }, null), vue.createVNode("rect", {
          ...COVER_PROPS,
          "x": "0",
          "y": pos.top + pos.height,
          "width": "100%",
          "height": `calc(100vh - ${pos.top + pos.height}px)`
        }, null), vue.createVNode("rect", {
          ...COVER_PROPS,
          "x": pos.left + pos.width,
          "y": "0",
          "width": `calc(100vw - ${pos.left + pos.width}px)`,
          "height": "100%"
        }, null)])]) : null])
      });
    };
  }
});

exports.default = Mask;
//# sourceMappingURL=Mask.cjs.map
