quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 6.43 kB
JavaScript
import{_ as n,a as t}from"../typeof.js";import{_ as e,a as i,b as o,c,P as a,H as s,d as r,N as l,B as h}from"../index2.js";import{_ as d}from"../defineProperty.js";import{d as u,e as f,c as p}from"../bodyScrollLock.esm.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 o,c=e(n);if(t){var a=e(this).constructor;o=Reflect.construct(c,arguments,a)}else o=c.apply(this,arguments);return i(this,o)}}var x=function(e){o(r,s);var i=v(r);function r(){var t;n(this,r);for(var e=arguments.length,o=new Array(e),l=0;l<e;l++)o[l]=arguments[l];return t=i.call.apply(i,[this].concat(o)),d(c(t),"open",!1),d(c(t),"wrap",a()),d(c(t),"title",void 0),d(c(t),"actions",[]),d(c(t),"cancelText",void 0),d(c(t),"titleColor",void 0),d(c(t),"titleFontSize",void 0),d(c(t),"cancelTextColor",void 0),d(c(t),"cancelTextFontSize",void 0),d(c(t),"zIndex",999),d(c(t),"select",(function(){})),d(c(t),"cancel",(function(){})),d(c(t),"close",(function(){})),d(c(t),"handleClick",(function(){t.open=!1})),d(c(t),"handleActionClick",(function(n,e){t.handleClick(),t.select&&"function"==typeof t.select&&t.select(n,e)})),d(c(t),"handleCancelClick",(function(){t.handleClick(),t.cancel&&"function"==typeof t.cancel&&t.cancel()})),d(c(t),"renderActions",(function(){return!t.actions||t.actions.length<=0?null:t.actions.map((function(n,e){return s.h("div",{class:"quark-actionsheet-actions",part:"action",style:{color:n.color?n.color:void 0,fontSize:n.fontSize?"".concat(n.fontSize,"px"):void 0},onClick:function(){t.handleActionClick(e,n)}},n.name)}))})),t}return t(r,[{key:"componentDidMount",value:function(){this.zIndex&&(this.style.zIndex="".concat(this.zIndex)),this.addEventListener("transitionend",this.handleTransitionend),this.addEventListener("click",this.handleHostClick)}},{key:"shouldComponentUpdate",value:function(n,t,e){if("open"===n&&this.wrap&&this.wrap.current){var i=this.wrap.current;e?i.classList.remove("quark-actionsheet-leave"):t&&!e&&i.classList.add("quark-actionsheet-leave")}return!0}},{key:"componentDidUpdate",value:function(n,t,e){if("open"===n&&this.wrap&&this.wrap.current){var i=this.wrap.current;e?u(i):f(i)}}},{key:"componentWillUnmount",value:function(){p(),this.removeEventListener("transitionend",this.handleTransitionend),this.removeEventListener("click",this.handleHostClick)}},{key:"handleHostClick",value:function(){this.handleClick(),this.close&&"function"==typeof this.close&&this.close()}},{key:"handleTransitionend",value:function(n){"opacity"!==n.propertyName||this.open||document.body.removeChild(this)}},{key:"handleContainerClick",value:function(n){n.stopPropagation()}},{key:"render",value:function(){return s.h("div",{class:"quark-actionsheet",ref:this.wrap,onClick:this.handleContainerClick,part:"root"},this.title&&s.h("div",{class:"quark-actionsheet-title",part:"title",style:{color:this.titleColor?this.titleColor:void 0,fontSize:this.titleFontSize?this.titleFontSize:void 0}},this.title),s.h("div",{class:"quark-actionsheet-action"},this.renderActions()),this.cancelText&&s.h("div",{class:"quark-actionsheet-cancel",part:"cancel"},s.h("div",{class:"quark-actionsheet-cancel-gap",part:"cancel-gap"}),s.h("div",{class:"quark-actionsheet-cancel-text",part:"cancel-text",style:{color:this.cancelTextColor?this.cancelTextColor:void 0,fontSize:this.cancelTextFontSize?this.cancelTextFontSize:void 0},onClick:this.handleCancelClick},this.cancelText)))}}]),r}();function k(n){var t=document.createElement("quark-actionsheet"),e=n.title,i=n.actions,o=n.cancelText,c=n.titleColor,a=n.titleFontSize,s=n.cancelTextColor,r=n.cancelTextFontSize,l=n.select,h=n.cancel,d=n.close,u=n.zIndex;return t.title=e,t.actions=i,t.cancelText=o,t.titleColor=c,t.titleFontSize=a,t.cancelTextColor=s,t.cancelTextFontSize=r,t.select=l,t.cancel=h,t.close=d,t.zIndex=u,document.body.appendChild(t),setTimeout((function(){t.open=!0}),10),t}r([l({type:Boolean})],x.prototype,"open",void 0),x=r([h({tag:"quark-actionsheet",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: 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: 999;\n visibility: visible;\n}\n\n:host .quark-actionsheet {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n background-color: #fff;\n position: fixed;\n width: 100%;\n max-height: 90%;\n bottom: 0;\n left: 0;\n overflow: hidden;\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n border-top-left-radius: 4.26667vw;\n border-top-right-radius: 4.26667vw;\n transition: transform .3s;\n transition-timing-function: ease-out;\n transform: translate(0, 100%);\n}\n\n:host .quark-actionsheet-leave {\n transition: transform .25s;\n transition-timing-function: ease-in;\n}\n\n:host .quark-actionsheet-title {\n color: #969799;\n font-size: 3.73333vw;\n display: flex;\n height: 16vw;\n width: 100%;\n justify-content: center;\n align-items: center;\n border-bottom: 0.5px solid #ebedf0;\n text-align: center;\n}\n\n:host .quark-actionsheet-action {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n:host .quark-actionsheet-cancel {\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host .quark-actionsheet-actions {\n height: 13.33333vw;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n cursor: pointer;\n text-align: center;\n color: #242729;\n font-size: 4.26667vw;\n}\n\n:host .quark-actionsheet-cancel-text {\n box-sizing: border-box;\n color: #646566;\n font-size: 4.26667vw;\n display: flex;\n width: 100%;\n justify-content: center;\n align-items: center;\n height: 13.33333vw;\n cursor: pointer;\n}\n\n:host .quark-actionsheet-cancel-gap {\n display: block;\n height: 2.4vw;\n background-color: #f7f8fa;\n width: 100%;\n}\n\n:host([open]) .quark-actionsheet {\n transform: translate(0, 0%);\n}\n"})],x);export{k as default};