quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 6.35 kB
JavaScript
import{_ as n,a as t}from"../typeof.js";import{_ as o,a as i,b as e,c as p,P as a,H as r,A as s,d as u,N as l,B as h}from"../index2.js";import{_ as c}from"../defineProperty.js";import{d,e as f,c as m}from"../bodyScrollLock.esm.js";import"../index4.js";import"../index22.js";function v(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 e,p=o(n);if(t){var a=o(this).constructor;e=Reflect.construct(p,arguments,a)}else e=p.apply(this,arguments);return i(this,e)}}var x=function(o){e(u,r);var i=v(u);function u(){var t;n(this,u);for(var o=arguments.length,e=new Array(o),r=0;r<o;r++)e[r]=arguments[r];return t=i.call.apply(i,[this].concat(e)),c(p(t),"open",!1),c(p(t),"forbidmaskclick",!1),c(p(t),"safearea",!1),c(p(t),"round",!1),c(p(t),"closeable",!1),c(p(t),"position","bottom"),c(p(t),"zindex",void 0),c(p(t),"scrollid",void 0),c(p(t),"wrap",a()),c(p(t),"handleCloseBtnClick",(function(){t.dispatchClose()})),c(p(t),"handleClick",(function(){t.dispatchEvent(new CustomEvent("clickoverlay")),t.forbidmaskclick||t.dispatchClose()})),t}return t(u,[{key:"componentDidMount",value:function(){this.zindex&&(this.style.zIndex="".concat(this.zindex))}},{key:"shouldComponentUpdate",value:function(n,t,o){"open"===n&&this.wrap&&this.wrap.current&&this.wrap.current.classList.toggle("leave",!o&&t);return!0}},{key:"componentDidUpdate",value:function(n,t,o){if("open"===n&&this.wrap&&this.wrap.current){var i=this.scrollid?document.querySelector("#".concat(this.scrollid)):this.wrap.current;!!o?d(i):f(i),this.dispatchEvent(new CustomEvent(o?"opened":"closed"))}}},{key:"componentWillUnmount",value:function(){m()}},{key:"dispatchClose",value:function(){this.dispatchEvent(new CustomEvent("close"))}},{key:"render",value:function(){return r.h(s,null,r.h("div",{class:"quark-popup",ref:this.wrap,part:"root"},this.closeable&&r.h("div",{class:"quark-popup-close-btn",part:"close-btn",onClick:this.handleCloseBtnClick},r.h("quark-icon-close",{part:"close-btn-icon",size:"24"})),r.h("slot",null)),r.h("div",{class:"quark-popup-mask",part:"mask",onClick:this.handleClick}))}}]),u}();u([l({type:Boolean})],x.prototype,"open",void 0),u([l({type:Boolean})],x.prototype,"forbidmaskclick",void 0),u([l({type:Boolean})],x.prototype,"safearea",void 0),u([l({type:Boolean})],x.prototype,"round",void 0),u([l({type:Boolean})],x.prototype,"closeable",void 0),u([l()],x.prototype,"position",void 0),u([l()],x.prototype,"zindex",void 0),u([l()],x.prototype,"scrollid",void 0);var k=x=u([h({tag:"quark-popup",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(--popup-mask-color, 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(--popup-z-index, 999);\n visibility: visible;\n}\n\n:host .quark-popup-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-popup {\n display: flex;\n /* padding: 24px; */\n flex-direction: column;\n justify-content: flex-start;\n box-sizing: border-box;\n width: var(--popup-width);\n min-width: var(--popup-min-width);\n max-width: var(--popup-max-width);\n height: var(--popup-height);\n min-height: var(--popup-min-height);\n max-height: var(--popup-max-height);\n overflow-y: auto;\n background: var(--popup-bg, #ffffff);\n opacity: 1;\n transition: transform .3s;\n transition-timing-function: ease-out;\n}\n\n:host .leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-popup::-webkit-scrollbar {\n display: none;\n /* Chrome Safari */\n}\n\n:host .quark-popup-close-btn {\n position: absolute;\n right: 0.8vw;\n top: 0.8vw;\n border: 0;\n color: #00000073;\n transition: color .3s;\n font-size: 5.33333vw;\n background: 0 0;\n padding: 0;\n width: 10.66667vw;\n height: 10.66667vw;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 999;\n}\n\n:host .quark-popup-close-btn :hover {\n color: #bcc4cc;\n}\n\n:host([safearea][position="bottom"]) .quark-popup {\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n}\n\n:host([safearea][position="top"]) .quark-popup {\n padding-top: constant(safe-area-inset-top);\n padding-top: env(safe-area-inset-top);\n}\n\n:host([round][position="bottom"]) .quark-popup {\n border-top-left-radius: var(--popup-border-radius, 4.26667vw);\n border-top-right-radius: var(--popup-border-radius, 4.26667vw);\n}\n\n:host([position="center"]) .quark-popup {\n position: relative;\n margin: auto;\n transform: scale(0.5);\n max-width: var(--popup-max-width, 90%);\n max-height: var(--popup-max-height, 90%);\n}\n\n:host([open][position="center"]) .quark-popup {\n transform: scale(1);\n}\n\n:host([position="top"]) .quark-popup {\n transform: translate(0px, -100%);\n position: fixed;\n width: 100%;\n top: 0;\n left: 0;\n max-height: var(--popup-max-height, 90%);\n min-height: var(--popup-min-height, 53.33333vw);\n}\n\n:host([open][position="top"]) .quark-popup {\n transform: translate(0px, 0%);\n}\n\n:host([position="bottom"]) .quark-popup {\n transform: translate(0px, 100%);\n position: fixed;\n width: 100%;\n bottom: 0;\n left: 0;\n max-height: var(--popup-max-height, 90%);\n min-height: var(--popup-min-height, 53.33333vw);\n}\n\n:host([open][position="bottom"]) .quark-popup {\n transform: translate(0px, 0%);\n}\n\n:host([position="left"]) .quark-popup {\n position: fixed;\n max-width: var(--popup-max-width, 90%);\n transform: translate(-100%, 0px);\n top: 0;\n left: 0;\n height: 100%;\n}\n\n:host([open][position="left"]) .quark-popup {\n transform: translate(0%, 0px);\n}\n\n:host([position="right"]) .quark-popup {\n position: fixed;\n max-width: var(--popup-max-width, 90%);\n transform: translate(100%, 0px);\n top: 0;\n right: 0;\n height: 100%;\n}\n\n:host([open][position="right"]) .quark-popup {\n transform: translate(0%, 0px);\n}'})],x);export{k as default};