import{defineComponent as g,createVNode as e,Fragment as y}from"vue";import w from"../_util/PortalWrapper.mjs";import x from"../_util/classNames.mjs";import k from"../_util/hooks/useId.mjs";import{someType as b,booleanType as a,objectType as v}from"../_util/type.mjs";const l={fill:"transparent","pointer-events":"auto"},S=g({name:"TourMask",props:{prefixCls:{type:String},pos:v(),rootClassName:{type:String},showMask:a(),fill:{type:String,default:"rgba(0,0,0,0.5)"},open:a(),animated:b([Boolean,Object]),zIndex:{type:Number}},setup(h,{attrs:o}){const p=k();return()=>{const{prefixCls:i,open:r,rootClassName:d,pos:t,showMask:c,fill:m,animated:s,zIndex:f}=h,n=`${i}-mask-${p}`,u=typeof s=="object"?s?.placeholder:s;return e(w,{visible:r,autoLock:!0},{default:()=>r&&e("div",{...o,class:x(`${i}-mask`,d,o.class),style:[{position:"fixed",left:0,right:0,top:0,bottom:0,zIndex:f,pointerEvents:"none"},o.style]},[c?e("svg",{style:{width:"100%",height:"100%"}},[e("defs",null,[e("mask",{id:n},[e("rect",{x:"0",y:"0",width:"100vw",height:"100vh",fill:"white"},null),t&&e("rect",{x:t.left,y:t.top,rx:t.radius,width:t.width,height:t.height,fill:"black",class:u?`${i}-placeholder-animated`:""},null)])]),e("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:m,mask:`url(#${n})`},null),t&&e(y,null,[e("rect",{...l,x:"0",y:"0",width:"100%",height:t.top},null),e("rect",{...l,x:"0",y:"0",width:t.left,height:"100%"},null),e("rect",{...l,x:"0",y:t.top+t.height,width:"100%",height:`calc(100vh - ${t.top+t.height}px)`},null),e("rect",{...l,x:t.left+t.width,y:"0",width:`calc(100vw - ${t.left+t.width}px)`,height:"100%"},null)])]):null])})}}});export{S as default};
