quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 7.07 kB
JavaScript
import{_ as n,a as t}from"../typeof.js";import{_ as o,a as e,b as a,c as r,P as i,H as p,A as s,d as l,N as u,O as c,B as d}from"../index2.js";import{_ as h}from"../defineProperty.js";import{d as f,e as x,c as v}from"../bodyScrollLock.esm.js";import"../index4.js";import{c as b}from"../index3.js";import"../index22.js";function k(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 a,r=o(n);if(t){var i=o(this).constructor;a=Reflect.construct(r,arguments,i)}else a=r.apply(this,arguments);return e(this,a)}}var m=function(o){a(l,p);var e=k(l);function l(){var t;n(this,l);for(var o=arguments.length,a=new Array(o),p=0;p<o;p++)a[p]=arguments[p];return t=e.call.apply(e,[this].concat(a)),h(r(t),"open",!1),h(r(t),"safearea",!1),h(r(t),"hideclose",!1),h(r(t),"zindex",void 0),h(r(t),"contentClassNames",""),h(r(t),"wrap",i()),h(r(t),"handleCloseBtnClick",(function(){t.dispatchClose()})),h(r(t),"handleClick",(function(){t.dispatchClose()})),h(r(t),"handleContentScroll",(function(){t.dealClass()})),t}return t(l,[{key:"componentDidMount",value:function(){this.zindex&&(this.style.zIndex="".concat(this.zindex)),this.dealClass()}},{key:"shouldComponentUpdate",value:function(n,t,o){if("open"===n&&this.wrap&&this.wrap.current){var e=this.wrap.current;o?e.classList.remove("leave"):t&&!o&&e.classList.add("leave")}return!0}},{key:"componentDidUpdate",value:function(n,t,o){if("open"===n&&this.wrap&&this.wrap.current){var e=this.wrap.current;o?f(e):x(e),this.dealClass()}}},{key:"componentWillUnmount",value:function(){v()}},{key:"dispatchClose",value:function(){this.dispatchEvent(new CustomEvent("close"))}},{key:"dealClass",value:function(){var n=this.wrap.current;this.contentClassNames=b("quark-popup-extra-body",{"quark-popup-extra-body-with-topline":(null==n?void 0:n.scrollTop)>1,"quark-popup-extra-body-with-bottonline":(null==n?void 0:n.scrollHeight)>(null==n?void 0:n.scrollTop)+(null==n?void 0:n.clientHeight)+1})}},{key:"render",value:function(){return p.h(s,null,p.h("div",{class:"quark-popup-extra",part:"popup-extra"},p.h("button",{class:"quark-popup-extra-close-btn",part:"close-btn",onClick:this.handleCloseBtnClick},p.h("quark-icon-close",{size:"24",part:"close-btn-icon"})),p.h("header",{className:this.title||this.subtitle?"quark-popup-extra-header":"",part:"header"},p.h("slot",{name:"title"},p.h("div",{className:"quark-popup-extra-toper"},p.h("div",{className:"quark-popup-extra-title",part:"title"},this.title)),this.subtitle&&p.h("div",{className:"quark-popup-extra-subtitle",part:"subtitle"},this.subtitle))),p.h("div",{className:this.contentClassNames,ref:this.wrap,part:"content",onScroll:this.handleContentScroll},p.h("slot",null)),p.h("slot",{name:"footer"})),p.h("div",{class:"quark-popup-extra-mask",onClick:this.handleClick,part:"mask"}))}}]),l}();l([u({type:Boolean})],m.prototype,"open",void 0),l([u({type:Boolean})],m.prototype,"safearea",void 0),l([u({type:Boolean})],m.prototype,"hideclose",void 0),l([u()],m.prototype,"title",void 0),l([u()],m.prototype,"subtitle",void 0),l([u()],m.prototype,"zindex",void 0),l([c()],m.prototype,"contentClassNames",void 0);var y=m=l([d({tag:"quark-popupextra",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-extra-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-extra-z-index, 999);\n visibility: visible;\n}\n\n:host .quark-popup-extra-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-extra {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n box-sizing: border-box;\n background: var(--popup-extra-background, #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-extra::-webkit-scrollbar {\n display: none;\n}\n\n:host .quark-popup-extra-close-btn {\n position: absolute;\n top: 4.26667vw;\n right: 4.26667vw;\n width: 6.4vw;\n height: 6.4vw;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #879099;\n background: 0 0;\n border: 0;\n transition: color .3s;\n}\n\n:host .quark-popup-extra-close-btn :hover {\n color: black\n}\n\n:host([safearea]) .quark-popup-extra {\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n}\n\n:host([hideclose]) .quark-popup-extra-close-btn {\n display: none;\n}\n\n:host .quark-popup-extra {\n transform: translate(0px, 100%);\n position: fixed;\n width: 100%;\n bottom: 0;\n left: 0;\n max-height: var(--popup-extra-max-height, 80%);\n min-height: var(--popup-extra-min-height, 53.33333vw);\n border-top-left-radius: var(--popup-extra-border-radius, 4.26667vw);\n border-top-right-radius: var(--popup-extra-border-radius, 4.26667vw);\n}\n:host .quark-popup-extra-body {\n overflow-y: auto;\n}\n\n:host([open]) .quark-popup-extra {\n transform: translate(0px, 0%);\n}\n\n.quark-popup-extra-header {\n padding: 4.26667vw;\n}\n\n.quark-popup-extra-toper {\n margin-right: 9.6vw;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n}\n\n.quark-popup-extra-title {\n font-size: 4.8vw;\n color: var(--popup-extra-title-color, #242729);\n line-height: 6.4vw;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n font-family: var(\n --popup-extra-title-font-family,\n PingFangSC-Medium,\n PingFang SC\n );\n font-weight: 500;\n}\n\n.quark-popup-extra-subtitle {\n font-size: 3.73333vw;\n color: var(--popup-extra-subtitle-color, #879099);\n line-height: 5.33333vw;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n font-family: var(\n --popup-extra-subtitle-font-family,\n "PingFangSC-Regular, PingFang SC, sans-serif"\n );\n font-weight: 400;\n margin-top: 1.06667vw;\n}\n\n.quark-popup-extra-body-with-topline {\n border-top: 0.5px #f0f2f5 solid;\n}\n\n.quark-popup-extra-body-with-bottonline {\n border-bottom: 0.5px #f0f2f5 solid;\n}\n\n.quark-popup-extra footer {\n position: fixed;\n width: 100%;\n bottom: 0;\n padding: 2.66667vw 2.66667vw 11.2vw;\n background: #fff;\n box-sizing: border-box;\n}\n\n.quark-popup-extra quark-button {\n height: 14.93333vw;\n color: #fff;\n background: linear-gradient(270deg, #00d9ff 0%, #0098fe 100%);\n width: 100%;\n font-size: 4.26667vw;\n box-sizing: border-box;\n}\n'})],m);export{y as default};