vexip-ui/lib/components/masker/masker.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../portal/index.cjs");require("../resize-observer/index.cjs");const l=require("@vexip-ui/config"),w=require("@vexip-ui/utils"),F=require("./props.cjs"),O=require("../portal/portal.vue2.cjs"),D=require("../resize-observer/resize-observer.cjs"),H=e.defineComponent({name:"Masker",__name:"masker",props:F.maskerProps,emits:["update:active"],setup(g,{expose:_,emit:x}){const r=l.useNameHelper("masker"),B=g,n=l.useProps("masker",B,{active:{default:!1,static:!0},closable:!1,inner:!1,maskTransition:()=>r.ns("fade"),transitionName:()=>r.ns("fade"),disabled:!1,onBeforeClose:{default:null,isFunc:!0},transfer:!1,autoRemove:!1,permeable:!1,disableEsc:!1}),z=x,E=e.useSlots(),C=l.useZIndex(),a=e.ref(n.active),m=e.ref(n.active?C():0),i=e.ref(n.active),s=e.ref(),u=e.ref(),f=e.ref();let c=!1,d=!1,p=!1,v=null;const y=e.computed(()=>n.inner?"":typeof n.transfer=="boolean"?n.transfer?"body":"":n.transfer),q=e.computed(()=>[r.b(),r.bs("vars"),{[r.bm("inherit")]:y.value!=="body"&&n.inherit,[r.bm("inner")]:n.inner,[r.bm("disabled")]:n.disabled}]);e.watch(()=>n.active,t=>{a.value=t,t&&(i.value=t)}),e.watch(a,t=>{t?(v=document.activeElement,m.value=C()):(p=!1,v&&(v.focus(),v=null)),(!n.maskTransition||n.disabled)&&!n.transitionName&&(t?h():k())}),e.watch([()=>n.permeable,s],()=>{s.value&&(s.value.removeEventListener("wheel",T),n.permeable||s.value.addEventListener("wheel",T))},{immediate:!0,flush:"post"}),_({currentActive:a,zIndex:m,wrapperShow:i,wrapper:s,topTrap:u,bottomTrap:f});function T(t){t.preventDefault(),t.stopPropagation()}function S(t){a.value!==t&&(a.value=t,z("update:active",t),l.emitEvent(n.onToggle,t))}async function N(){if(!n.closable)return;let t=!0;typeof n.onBeforeClose=="function"&&(t=n.onBeforeClose(),w.isPromise(t)&&(t=await t)),t!==!1&&e.nextTick(()=>{S(!1),l.emitEvent(n.onClose)})}function h(){var o;if(!a.value)return;const t=document&&document.activeElement;(!t||!s.value||!s.value.contains(t))&&((o=u.value)==null||o.focus()),e.nextTick(()=>{p=!0,l.emitEvent(n.onShow)})}function k(){a.value||e.nextTick(()=>{i.value=!1,l.emitEvent(n.onHide)})}function V(){a.value&&(c=!0,(!n.transitionName||!E.default||d)&&h())}function A(){a.value||(c=!1,(!n.transitionName||!E.default||!d)&&k())}function M(){a.value&&(d=!0,(!n.maskTransition||n.disabled||c)&&h())}function $(){a.value||(d=!1,(!n.maskTransition||n.disabled||!c)&&k())}function I(t){l.emitEvent(n.onMaskClick,t),N()}function L(t){const o=t.target;if(!p||!s.value||!o||!u.value||!f.value)return;const b=w.queryTabables(s.value);b.length&&(u.value===o?w.getLast(b).focus():f.value===o&&b[0].focus())}function P(t){l.emitEvent(n.onResize,t)}function R(t){n.disableEsc||(t.preventDefault(),N())}return(t,o)=>!e.unref(n).autoRemove||i.value?(e.openBlock(),e.createBlock(e.unref(O),{key:0,to:y.value},{default:e.withCtx(()=>[e.createElementVNode("div",e.mergeProps(t.$attrs,{ref_key:"wrapper",ref:s,class:[q.value,t.$attrs.class],tabindex:"-1",style:{zIndex:m.value,...t.$attrs.style||{},pointerEvents:i.value?void 0:"none",visibility:i.value?void 0:"hidden"},onFocusin:L,onKeydown:e.withKeys(R,["escape"])}),[e.createVNode(e.unref(D),{onResize:P},{default:e.withCtx(()=>[e.unref(n).disabled?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(r).be("placeholder")),role:"none","aria-hidden":""},null,2)):(e.openBlock(),e.createBlock(e.Transition,{key:0,appear:"",name:e.unref(n).maskTransition,onAfterEnter:V,onAfterLeave:A},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("mask")),onClick:I},[e.renderSlot(t.$slots,"mask",{},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("mask-inner"))},null,2)])],2),[[e.vShow,a.value]])]),_:3},8,["name"]))]),_:3}),e.createElementVNode("div",{ref_key:"topTrap",ref:u,tabindex:"0",role:"none",style:{width:"0",height:"0",overflow:"hidden",outline:"none"}},null,512),e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("content")),onWheel:o[0]||(o[0]=e.withModifiers(()=>{},["stop","prevent"]))},[e.unref(n).transitionName?(e.openBlock(),e.createBlock(e.Transition,{key:0,appear:"",name:e.unref(n).transitionName,onAfterEnter:M,onAfterLeave:$},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{show:a.value})]),_:3},8,["name"])):e.renderSlot(t.$slots,"default",{key:1,show:a.value})],34),e.createElementVNode("div",{ref_key:"bottomTrap",ref:f,tabindex:"0",role:"none",style:{width:"0",height:"0",overflow:"hidden",outline:"none"}},null,512)],16)]),_:3},8,["to"])):e.createCommentVNode("",!0)}});module.exports=H;
//# sourceMappingURL=masker.vue2.cjs.map