quarkd/lib/overlay/index.js

Mobile UI Components built on Web Components.

import{_ as n,a as t}from"../typeof.js";import{_ as e,a as o,b as r,c as a,P as i,H as s,A as l,d as c,N as u,B as p}from"../index2.js";import{_ as f}from"../defineProperty.js";import{d,e as y,c as v}from"../bodyScrollLock.esm.js";function h(n){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(n){return!1}}();return function(){var r,a=e(n);if(t){var i=e(this).constructor;r=Reflect.construct(a,arguments,i)}else r=a.apply(this,arguments);return o(this,r)}}var m=function(e){r(c,s);var o=h(c);function c(){var t;n(this,c);for(var e=arguments.length,r=new Array(e),s=0;s<e;s++)r[s]=arguments[s];return t=o.call.apply(o,[this].concat(r)),f(a(t),"open",!1),f(a(t),"zindex",999),f(a(t),"wrap",i()),f(a(t),"handleMaskClick",(function(){t.$emit("close")})),t}return t(c,[{key:"componentDidMount",value:function(){this.zindex&&(this.style.zIndex="".concat(this.zindex))}},{key:"componentDidUpdate",value:function(n,t,e){if("open"===n&&this.wrap&&this.wrap.current){var o=this.wrap.current;e?d(o):y(o)}}},{key:"componentWillUnmount",value:function(){v()}},{key:"render",value:function(){return s.h(l,null,s.h("div",{class:"quark-overlay",part:"overlay",ref:this.wrap},s.h("slot",null)),s.h("div",{class:"quark-overlay-mask",part:"mask",onClick:this.handleMaskClick}))}}]),c}();c([u({type:Boolean})],m.prototype,"open",void 0),c([u()],m.prototype,"zindex",void 0);var k=m=c([p({tag:"quark-overlay",style:":host {\n  position: fixed;\n  display: flex;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: -1;\n  background: var(--overlay-background, rgba(0, 0, 0, 0.7));\n  visibility: hidden;\n  opacity: 0;\n  transition: .3s;\n}\n\n:host([open]) {\n  opacity: 1;\n  z-index: var(--overlay-z-index, 999);\n  visibility: visible;\n}\n\n:host .quark-overlay-mask {\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  z-index: -1;\n}\n\n:host .quark-overlay {\n  position: relative;\n  margin: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"})],m);export{k as default};