import { defineComponent, createVNode, Fragment } from 'vue';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import PortalWrapper from '../../portal/src/PortalWrapper.mjs';
import { objectType, booleanType, someType } from '../../../utils/vue/propType.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
import { classNames } from '../../../utils/dom/class.mjs';

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

export { Mask as default };
//# sourceMappingURL=Mask.mjs.map
