quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 11 kB
JavaScript
import{_ as n,a as t}from"../typeof.js";import{_ as o,a as e,b as i,c as a,P as l,H as r,A as c,d as s,N as d,B as u}from"../index2.js";import{_ as h}from"../defineProperty.js";import{c as v,e as p,d as f}from"../bodyScrollLock.esm.js";import"../button/index.js";import"../index4.js";import"../overlay/index.js";import{Local as g}from"../locale/index.js";import"../loading/index.js";import"../util.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 i,a=o(n);if(t){var l=o(this).constructor;i=Reflect.construct(a,arguments,l)}else i=a.apply(this,arguments);return e(this,i)}}var m=function(o){i(s,r);var e=k(s);function s(){var t;n(this,s);for(var o=arguments.length,i=new Array(o),c=0;c<o;c++)i[c]=arguments[c];return t=e.call.apply(e,[this].concat(i)),h(a(t),"zindex","999"),h(a(t),"title",""),h(a(t),"notitle",!1),h(a(t),"content",""),h(a(t),"oktext",g.current.confirm),h(a(t),"canceltext",g.current.cancel),h(a(t),"type","modal"),h(a(t),"open",!1),h(a(t),"autoclose",!0),h(a(t),"nofooter",!1),h(a(t),"hideclose",!1),h(a(t),"maskclosable",!1),h(a(t),"btnvertical",!1),h(a(t),"btnActive",null),h(a(t),"dRemove",!1),h(a(t),"close",null),h(a(t),"cancel",null),h(a(t),"confirm",null),h(a(t),"hasChangeBodyStyle",!1),h(a(t),"bodyRef",l()),h(a(t),"closeIconClick",(function(){t.$emit("close"),t.close&&t.close(),t.hide()})),h(a(t),"cancelClick",(function(){t.$emit("cancel"),t.cancel&&t.cancel(),t.hide()})),h(a(t),"okClick",(function(){t.$emit("confirm"),t.confirm&&t.confirm(),t.hide()})),h(a(t),"slotChangeEvent",(function(){var n;null===(n=t.shadowRoot)||void 0===n||n.querySelector(".quark-dialog-body slot")})),h(a(t),"transitionendChange",(function(){!t.open&&t.dRemove&&(document.body.removeChild(a(t)),t.$emit("close"),t.btnActive&&t.btnActive.focus())})),h(a(t),"renderBtnVertical",(function(){var n=t.btnvertical?"quark-dialog-footer quark-dialog-vertical":"quark-dialog-footer";return r.h("div",{class:n},r.h("quark-button",{type:"primary",onClick:t.okClick},t.oktext),r.h("quark-button",{class:"quark-dialog-cancel-btn",onClick:t.cancelClick},t.canceltext))})),h(a(t),"handleClickMask",(function(){t.maskclosable&&(t.$emit("close"),t.hide())})),t}return t(s,[{key:"componentDidMount",value:function(){this.zindex&&(this.style.zIndex="".concat(this.zindex)),this.shadowRoot&&this.shadowRoot.addEventListener("transitionend",this.transitionendChange)}},{key:"componentWillUnmount",value:function(){v()}},{key:"shouldComponentUpdate",value:function(n,t,o){if("open"===n&&o!==t&&this.bodyRef.current){var e=this.bodyRef.current;o?(f(e),e.classList.remove("quark-dialog-leave"),e.classList.add("quark-dialog-enter")):(p(e),e.classList.remove("quark-dialog-enter"),e.classList.add("quark-dialog-leave"),this.btnActive=document.activeElement)}return!0}},{key:"componentDidUpdate",value:function(n,t,o){if("open"===n&&o!==t&&this.bodyRef.current){var e=this.bodyRef.current;o?f(e):p(e)}}},{key:"hide",value:function(){this.autoclose&&(this.open=!1)}},{key:"render",value:function(){var n=this.btnvertical?"quark-dialog-footer quark-dialog-vertical":"quark-dialog-footer";return r.h(c,null,r.h("div",{class:"quark-dialog",ref:this.bodyRef,part:"dialog"},!this.hideclose&&r.h("slot",{name:"close"},r.h("div",{class:"quark-dialog-close-btn",part:"close-btn"},r.h("div",{onClick:this.closeIconClick,part:"close-icon"},r.h("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",part:"svg"},r.h("title",null,"切片"),r.h("g",{id:"弹窗验收",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},r.h("g",{id:"弹窗更新",transform:"translate(-641.000000, -346.000000)",fill:"#BCC4CC","fill-rule":"nonzero"},r.h("g",{id:"编组",transform:"translate(350.000000, 334.000000)"},r.h("g",{id:"图形类/01_图标/16x16/03_关闭_black备份-2",transform:"translate(291.000000, 12.000000)"},r.h("path",{d:"M2.28033009,1.21966991 L7.937,6.876 L13.5940386,1.21966991 C13.8869318,0.926776695 14.3618055,0.926776695 14.6546988,1.21966991 C14.947592,1.51256313 14.947592,1.98743687 14.6546988,2.28033009 L8.997,7.937 L14.6546988,13.5940386 C14.947592,13.8869318 14.947592,14.3618055 14.6546988,14.6546988 C14.3618055,14.947592 13.8869318,14.947592 13.5940386,14.6546988 L7.937,8.997 L2.28033009,14.6546988 C1.98743687,14.947592 1.51256313,14.947592 1.21966991,14.6546988 C0.926776695,14.3618055 0.926776695,13.8869318 1.21966991,13.5940386 L6.876,7.937 L1.21966991,2.28033009 C0.926776695,1.98743687 0.926776695,1.51256313 1.21966991,1.21966991 C1.51256313,0.926776695 1.98743687,0.926776695 2.28033009,1.21966991 Z",id:"形状结合",transform:"translate(7.937184, 7.937184) rotate(-360.000000) translate(-7.937184, -7.937184) "}))))))))),r.h("div",{class:"quark-dialog-content",part:"content"},!this.notitle&&r.h("slot",{name:"title"},r.h("p",{class:"quark-dialog-title",part:"title"},this.title)),r.h("slot",{onslotchange:this.slotChangeEvent},this.content&&r.h("div",{class:"quark-dialog-body-wrap",part:"body-wrap",style:{marginBottom:this.content?20:0}},r.h("div",{class:"quark-dialog-body",part:"body"},this.content))),!this.nofooter&&r.h("slot",{name:"footer"},this.btnvertical?this.renderBtnVertical():r.h("div",{class:n,part:"footer"},r.h("quark-button",{class:"quark-dialog-cancel-btn",part:"button cancel-btn",style:{display:"confirm"===this.type?"none":"flex"},onClick:this.cancelClick},this.canceltext),r.h("quark-button",{class:"quark-dialog-confirm-btn",part:"button ok-btn",type:"primary",onClick:this.okClick},this.oktext))))),r.h("div",{class:"quark-dialog-mask",part:"mask",onClick:this.handleClickMask}))}}]),s}();function y(n){var t=document.createElement("quark-dialog"),o=n.title,e=void 0===o?"":o,i=n.content,a=void 0===i?"":i,l=n.oktext,r=void 0===l?g.current.confirm:l,c=n.canceltext,s=void 0===c?g.current.cancel:c,d=n.confirm,u=n.cancel,h=n.close,v=n.zindex,p=n.autoclose,f=void 0===p||p,k=n.nofooter,m=void 0!==k&&k,y=n.type,b=void 0===y?"":y,x=n.hideclose,w=void 0!==x&&x,q=n.maskclosable,C=void 0!==q&&q,z=n.btnvertical,R=void 0!==z&&z;return t.dRemove=!0,t.title=e,t.innerHTML=a,t.content=a,t.oktext=r,t.canceltext=s,t.cancel=u,t.confirm=d,t.close=h,t.autoclose=f,t.nofooter=m,t.zindex=v,t.type=b,t.hideclose=w,t.maskclosable=C,t.btnvertical=R,document.body.appendChild(t),setTimeout((function(){t.open=!0})),t}s([d()],m.prototype,"zindex",void 0),s([d()],m.prototype,"title",void 0),s([d({type:Boolean})],m.prototype,"notitle",void 0),s([d()],m.prototype,"content",void 0),s([d()],m.prototype,"oktext",void 0),s([d()],m.prototype,"canceltext",void 0),s([d()],m.prototype,"type",void 0),s([d({type:Boolean})],m.prototype,"open",void 0),s([d({type:Boolean})],m.prototype,"autoclose",void 0),s([d({type:Boolean})],m.prototype,"nofooter",void 0),s([d({type:Boolean})],m.prototype,"hideclose",void 0),s([d({type:Boolean})],m.prototype,"maskclosable",void 0),s([d({type:Boolean})],m.prototype,"btnvertical",void 0),m=s([u({tag:"quark-dialog",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 text-align: center;\n font-size: 4.8vw;\n color: #242729;\n opacity: 0;\n transition: all.3s ease-out;\n}\n\n:host([open]) {\n opacity: 1;\n z-index: 999;\n visibility: visible;\n}\n\n:host .quark-dialog-mask {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n}\n\n:host .quark-dialog {\n position: relative;\n padding: 7.46667vw 3.2vw 6.4vw;\n margin: auto;\n box-shadow: 0 0.53333vw 3.2vw rgba(100, 101, 102, 0.12);\n box-sizing: border-box;\n max-height: calc(100vh - 5.33333vw);\n border-radius: 3.2vw;\n background-color: #fff;\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.3s ease-in;\n width: var(--dialog-width, 85.33333vw);\n}\n\n:host([open]) .quark-dialog {\n opacity: 1;\n transform: scale(1);\n}\n\n.quark-dialog-close-btn {\n position: absolute;\n top: 3.2vw;\n right: 3.2vw;\n height: 4.26667vw;\n line-height: 4.26667vw;\n}\n\n.quark-dialog-close-btn svg {\n cursor: pointer;\n}\n\n:host .quark-dialog-title {\n font-size: var(--dialog-title-font-size, 4.8vw);\n color: var(--dialog-title-color, #242729);\n font-family: var(--dialog-title-font-family, PingFangSC-Medium, PingFang SC);\n line-height: var(--dialog-title-line-height, 6.66667vw);\n font-weight: var(--dialog-title-font-weight, 500);\n padding: 0 3.73333vw;\n margin: 0 0 4.26667vw;\n}\n\n:host(:not([content])) .quark-dialog-title {\n margin-bottom: 5.33333vw;\n}\n\n:host .quark-dialog-content {\n font-size: var(--dialog-content-font-size, 3.73333vw);\n color: var(--dialog-content-color, "#5A6066");\n font-weight: var(--dialog-content-font-weight, 400);\n font-family: var(--dialog-content-font-family);\n line-height: var(--dialog-content-line-height, 5.33333vw);\n}\n\n.quark-dialog-body-wrap {\n padding: 0 3.2vw;\n color: #5a6066;\n line-height: 5.33333vw;\n font-size: 3.73333vw;\n text-align: center;\n}\n.quark-dialog-body {\n text-align: left;\n display: inline-block;\n}\n\n:host .quark-dialog-body slot:empty {\n margin: 0;\n}\n\n:host .quark-dialog-footer {\n display: flex;\n align-items: center;\n padding: 0 1.06667vw;\n}\n\n/* :host[type="confirm"] .quark-dialog-footer {\n display: flex;\n align-items: center;\n padding: 0 4px;\n} */\n\n.quark-dialog-close-btn quark-icon-close {\n color: #bcc4cc;\n cursor: pointer;\n}\n\n.quark-dialog-footer quark-button {\n display: flex;\n flex: 1 auto;\n align-items: center;\n justify-content: center;\n border-radius: var(--dialog-btn-border-radius, 2.13333vw);\n font-size: var(--dialog-btn, 4.26667vw);\n height: var(--dialog-btn, 10.66667vw);\n font-family: var(--dialog-btn-font-family, mFontFamily);\n \n}\n\n:host .quark-dialog-vertical {\n display: block;\n}\n\n:host .quark-dialog-vertical quark-button {\n margin-right: 0;\n}\n\n:host .quark-dialog-vertical .quark-dialog-cancel-btn {\n margin-top: 2.13333vw;\n}\n\n:host .quark-dialog-cancel-btn {\n color: #5a6066;\n background: #f0f3f5;\n margin-right: 2.13333vw;\n border: none;\n}\n\n:host .quark-dialog-leave {\n opacity: 0;\n transition: all.3s ease-out;\n}\n\n@media screen and (max-width: 321px) {\n :host .quark-dialog {\n display: flex;\n position: relative;\n margin: auto;\n box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);\n box-sizing: border-box;\n max-height: calc(100vh - 20px);\n border-radius: 12px;\n background-color: #fff;\n opacity: 0;\n transform: scale(0.5);\n transition: all 0.3s ease-in;\n width: var(--dialog-width, 90%);\n }\n}\n'})],m);export{m as QuarkDialog,y as default};