quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 15.5 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as e,a as o,b as i,c as r,P as a,H as s,A as c,d as l,N as u,B as h}from"../index2.js";import{_ as f}from"../defineProperty.js";import{d,a as p,f as v,r as y,w as g,s as m,M as w,h as k}from"../index22.js";import{c as z}from"../bodyScrollLock.esm.js";import"../overlay/index.js";import"../loading/index.js";var b=function(t){v(i,t);var n,e,o=(n=i,e=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(t){return!1}}(),function(){var t,o=d(n);if(e){var i=d(this).constructor;t=Reflect.construct(o,arguments,i)}else t=o.apply(this,arguments);return p(this,t)});function i(){var t;return y(this,i),(t=o.call(this)).attachShadow({mode:"open"}).innerHTML="\n <style>\n ".concat(g,'\n </style>\n <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">\n ').concat('<path d="M512 51.2c254.4896 0 460.8 206.3104 460.8 460.8s-206.3104 460.8-460.8 460.8S51.2 766.4896 51.2 512 257.5104 51.2 512 51.2z m0 40.96C280.1408 92.16 92.16 280.1408 92.16 512c0 231.8592 187.9808 419.84 419.84 419.84 231.8592 0 419.84-187.9808 419.84-419.84 0-231.8592-187.9808-419.84-419.84-419.84z" fill="#FFFFFF" fill-opacity=".8" p-id="3308"></path><path d="M321.8688 490.6752a27.6224 27.6224 0 0 1 39.0656 0l121.6512 121.6768 217.856-217.8304a27.6224 27.6224 0 0 1 39.0656 39.0656l-237.0048 237.0048a27.6224 27.6224 0 0 1-39.424 0.3584l-141.2096-141.2096a27.6224 27.6224 0 0 1 0-39.0656z" fill="#FFFFFF" p-id="3309"></path>',"\n </svg>\n "),t.icon=t.shadowRoot.getElementById("icon"),t}return m(i,[{key:"connectedCallback",value:function(){this.upgradeProperty()}},{key:"attributeChangedCallback",value:function(t,n,e){if("color"===t)this.icon.style.color=e;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o)}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color}},{key:"getFontSize",value:function(){return w(this.size)}},{key:"size",get:function(){return this.getAttribute("size")},set:function(t){this.setAttribute("size",t)}},{key:"color",get:function(){return this.getAttribute("color")},set:function(t){this.setAttribute("color",t)}}],[{key:"observedAttributes",get:function(){return["size","color"]}}]),i}(k(HTMLElement));customElements.get("quark-icon-whitesuccess-o")||customElements.define("quark-icon-whitesuccess-o",b);var x=function(t){v(i,t);var n,e,o=(n=i,e=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(t){return!1}}(),function(){var t,o=d(n);if(e){var i=d(this).constructor;t=Reflect.construct(o,arguments,i)}else t=o.apply(this,arguments);return p(this,t)});function i(){var t;return y(this,i),(t=o.call(this)).attachShadow({mode:"open"}).innerHTML="\n <style>\n ".concat(g,'\n </style>\n <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">\n ').concat('<path d="M512 51.2c254.4896 0 460.8 206.3104 460.8 460.8s-206.3104 460.8-460.8 460.8S51.2 766.4896 51.2 512 257.5104 51.2 512 51.2z m0 40.96C280.1152 92.16 92.16 280.1152 92.16 512S280.1408 931.84 512 931.84c231.8848 0 419.84-187.9552 419.84-419.84 0-231.8592-187.9552-419.84-419.84-419.84z" fill="#FFFFFF" fill-opacity=".8" p-id="5693"></path><path d="M363.4688 363.4688a30.6432 30.6432 0 0 1 43.3152 0l105.216 105.216 105.216-105.216a30.6432 30.6432 0 1 1 43.3152 43.3152L555.3152 512l105.216 105.216a30.6432 30.6432 0 1 1-43.3152 43.3152L512 555.3152l-105.216 105.216a30.6432 30.6432 0 1 1-43.3152-43.3152L468.6592 512l-105.1904-105.216a30.6432 30.6432 0 0 1 0-43.3152z" fill="#FFFFFF" p-id="5694"></path>',"\n </svg>\n "),t.icon=t.shadowRoot.getElementById("icon"),t}return m(i,[{key:"connectedCallback",value:function(){this.upgradeProperty()}},{key:"attributeChangedCallback",value:function(t,n,e){if("color"===t)this.icon.style.color=e;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o)}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color}},{key:"getFontSize",value:function(){return w(this.size)}},{key:"size",get:function(){return this.getAttribute("size")},set:function(t){this.setAttribute("size",t)}},{key:"color",get:function(){return this.getAttribute("color")},set:function(t){this.setAttribute("color",t)}}],[{key:"observedAttributes",get:function(){return["size","color"]}}]),i}(k(HTMLElement));customElements.get("quark-icon-whiteerror-o")||customElements.define("quark-icon-whiteerror-o",x);var q=function(t){v(i,t);var n,e,o=(n=i,e=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(t){return!1}}(),function(){var t,o=d(n);if(e){var i=d(this).constructor;t=Reflect.construct(o,arguments,i)}else t=o.apply(this,arguments);return p(this,t)});function i(){var t;return y(this,i),(t=o.call(this)).attachShadow({mode:"open"}).innerHTML="\n <style>\n ".concat(g,'\n </style>\n <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">\n ').concat('<path d="M512 51.2c254.4896 0 460.8 206.3104 460.8 460.8s-206.3104 460.8-460.8 460.8S51.2 766.4896 51.2 512 257.5104 51.2 512 51.2z m0 40.96C280.1408 92.16 92.16 280.1408 92.16 512c0 231.8592 187.9808 419.84 419.84 419.84 231.8592 0 419.84-187.9808 419.84-419.84 0-231.8592-187.9808-419.84-419.84-419.84z" fill="#FFFFFF" fill-opacity=".8" p-id="3908"></path><path d="M512 298.6752c15.7184 0 28.4416 12.7232 28.4416 28.416v227.584a28.4416 28.4416 0 0 1-56.8832 0v-227.584c0-15.6928 12.7232-28.416 28.4416-28.416z m0 426.6496A42.6752 42.6752 0 1 0 512 640a42.6752 42.6752 0 0 0 0 85.3248z" fill="#FFFFFF" p-id="3909"></path>',"\n </svg>\n "),t.icon=t.shadowRoot.getElementById("icon"),t}return m(i,[{key:"connectedCallback",value:function(){this.upgradeProperty()}},{key:"attributeChangedCallback",value:function(t,n,e){if("color"===t)this.icon.style.color=e;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o)}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color}},{key:"getFontSize",value:function(){return w(this.size)}},{key:"size",get:function(){return this.getAttribute("size")},set:function(t){this.setAttribute("size",t)}},{key:"color",get:function(){return this.getAttribute("color")},set:function(t){this.setAttribute("color",t)}}],[{key:"observedAttributes",get:function(){return["size","color"]}}]),i}(k(HTMLElement));customElements.get("quark-icon-whitewarning-o")||customElements.define("quark-icon-whitewarning-o",q);var F;function R(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.push.apply(e,o)}return e}function S(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{};n%2?R(Object(e),!0).forEach((function(n){f(t,n,e[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):R(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))}))}return t}function O(t){var n=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(t){return!1}}();return function(){var i,r=e(t);if(n){var a=e(this).constructor;i=Reflect.construct(r,arguments,a)}else i=r.apply(this,arguments);return o(this,i)}}var j=null,C=(F=function(e){i(l,s);var o=O(l);function l(){var n;t(this,l);for(var e=arguments.length,i=new Array(e),c=0;c<e;c++)i[c]=arguments[c];return n=o.call.apply(o,[this].concat(i)),f(r(n),"type",""),f(r(n),"icon",""),f(r(n),"position","middle"),f(r(n),"show",!1),f(r(n),"content",""),f(r(n),"dRemove",!1),f(r(n),"timer",""),f(r(n),"iconSize",40),f(r(n),"iconColor","#ffffff"),f(r(n),"zIndex",9999),f(r(n),"loadingIconDirection","vertical"),f(r(n),"toastWidth","auto"),f(r(n),"iconRef",a()),f(r(n),"toastRef",a()),f(r(n),"loadingtRef",a()),f(r(n),"textRef",a()),f(r(n),"hide",(function(){setTimeout((function(){n.show=!1})),"loading"===n.type&&z()})),f(r(n),"renderIcon",(function(){return"success"===n.type?s.h("quark-icon-whitesuccess-o",{part:"success",color:n.iconColor,size:n.iconSize,ref:n.iconRef}):"failure"===n.type?s.h("quark-icon-whiteerror-o",{part:"failure",color:n.iconColor,size:n.iconSize,ref:n.iconRef}):"warning"===n.type?s.h("quark-icon-whitewarning-o",{part:"warning",color:n.iconColor,size:n.iconSize,ref:n.iconRef}):null})),f(r(n),"renderLoading",(function(){return s.h("quark-overlay",{open:n.show,zIndex:n.zIndex,part:"overlay"},s.h("div",{class:"quark-toast quark-toast--".concat(n.loadingIconDirection),part:"loading-container",ref:n.toastRef},s.h("quark-loading",{ref:n.loadingtRef,part:"loading",size:n.iconSize,color:"#ffffff",type:"circular",vertical:!0}),s.h("span",{class:"hide-content",part:"content",ref:n.textRef},n.content),s.h("slot",null,n.content)))})),f(r(n),"renderOther",(function(){return n.zIndex&&(n.style.zIndex="".concat(n.zIndex)),s.h("div",{class:"quark-toast",part:"root",ref:n.toastRef},"text"!==n.type&&n.renderIcon(),s.h("slot",null,n.content))})),n}return n(l,[{key:"componentDidMount",value:function(){var t=this,n=this.toastRef.current;n&&n.addEventListener("transitionend",(function(){if(t.dRemove=!1,n.classList.contains("quark-toast-leave")&&n&&n.parentNode&&!t.show)try{document.body.removeChild(t)}catch(t){}}))}},{key:"shouldComponentUpdate",value:function(t,n,e){if("show"===t){var o=this.loadingtRef.current;if(this.toastRef&&this.toastRef.current){var i=this.toastRef.current;e?i.classList.remove("quark-toast-leave"):(o&&o.classList.add("quark-loading-leave"),i.classList.add("quark-toast-leave"))}}return!0}},{key:"render",value:function(){return s.h(c,null,"loading"===this.type?this.renderLoading():this.renderOther())}}]),l}(),f(F,"allowMultiple",!1),F);l([u()],C.prototype,"type",void 0),l([u()],C.prototype,"icon",void 0),l([u()],C.prototype,"position",void 0),l([u({type:Boolean})],C.prototype,"show",void 0),l([u()],C.prototype,"content",void 0),C=l([h({tag:"quark-toast",style:':host {\n display: flex;\n transition: .3s;\n position: relative;\n}\n\n:host quark-overlay {\n background-color: transparent;\n}\n\n:host .quark-toast {\n opacity: 0;\n font-size: var(--toast-font-size, 3.73333vw);\n padding: var(--toast-text-padding, 4.26667vw 5.33333vw);\n box-sizing: border-box;\n display: flex;\n flex-direction: var(--toast-direction, column);\n align-items: center;\n justify-content: center;\n color: var(--toast-color, #fff);\n background: rgb(0 0 0 / 80%);\n border-radius: 3.2vw;\n box-shadow: 0 1.06667vw 3.2vw rgb(0 0 0 / 15%);\n pointer-events: all;\n width: var(--toast-width, max-content);\n min-width: var(--toast-min-width, 32vw);\n max-width: var(--toast-max-width, 64vw);\n text-align: center;\n transition: opacity var(--toast-transition-fade-in, 0.3s) ease-in;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n:host([position="top"]) .quark-toast {\n top: var(--toast-position-top-distance, 20%);\n}\n:host([position="bottom"]) .quark-toast {\n top: var(--toast-position-top-distance, 80%);\n}\n:host .quark-toast--horizontal {\n flex-direction: row;\n height: auto;\n min-width: var(--toast-min-width, 32vw);\n max-width: var(--toast-max-width, 64vw);\n}\n\n:host([show]) .quark-toast {\n opacity: 1;\n}\n\n:host([type="text"]) .quark-toast {\n height: auto;\n min-width: var(--toast-min-width, 32vw);\n max-width: var(--toast-max-width, 64vw);\n white-space: normal;\n}\n\nquark-icon-whitesuccess-o,\nquark-icon-whiteerror-o,\nquark-icon-whitewarning-o {\n margin-bottom: 3.73333vw;\n}\n\n:host quark-loading {\n display: block;\n margin-right: var(--toast-loading-right, 0);\n margin-bottom: var(--toast-loading-bottom, 3.73333vw);\n}\n:host([type="loading"]) .quark-toast--horizontal quark-loading {\n margin-bottom: var(--toast-loading-bottom) !important;\n margin-right: var(--toast-loading-right, 4.8vw) !important;\n}\n\n:host([show][type="loading"]) quark-loading {\n opacity: 1;\n display: block;\n}\n\n:host([show][type="loading"]) .quark-toast--horizontal quark-loading {\n opacity: 1;\n display: block;\n}\n\n:host(:not([type="text"])) .quark-toast:not(.quark-toast--horizontal) {\n height: var(--toast-height, auto);\n min-height: var(--toast-min-height, 32vw);\n}\n\n:host(:not([type="text"])) quark-icon-whitesuccess-o,\n:host(:not([type="text"])) quark-icon-whiteerror-o,\n:host(:not([type="text"])) quark-icon-whitewarning-o {\n margin-bottom: 2.4vw;\n}\n\n:host .quark-toast-leave {\n opacity: 0;\n transition: opacity var(--toast-transition-fade-out, 0.3s) ease-out;\n}\n:host .quark-loading-leave {\n opacity: 0;\n transition: opacity var(--toast-transition-fade-out, 0.4s) ease-out;\n}\n:host .hide-content{\n width: auto;\n white-space: nowrap;\n display: inline-block; /* 使元素根据内容调整宽度 */\n position: absolute;\n left: 133.33333vw;\n}'})],C);var P={msg:"",duration:2e3,type:"text",close:null},I=function(t){var n=S(S({},P),t),e=n.type,o=n.msg,i=n.duration,r=void 0===i?2e3:i,a=n.close,s=n.size,c=void 0===s?40:s,l=n.zIndex,u=void 0===l?9999:l,h=n.position,f=void 0===h?"middle":h,d=n.loadingIconDirection,p=void 0===d?"vertical":d,v=null;return C.allowMultiple?v=document.createElement("quark-toast"):(j||(j=document.createElement("quark-toast")),v=j),v.timer&&clearTimeout(v.timer),v.type=e,v.content=o,v.iconSize=c,v.zIndex=u,v.position=f,v.loadingIconDirection=p,document.body.appendChild(v),setTimeout((function(){v.show=!0})),v.dRemove=!0,0!==r&&(v.timer=setTimeout((function(){v.show=!1,a&&a()}),r)),v},A=function(t){t||console.warn("[Quark Toast]: msg cannot empty")},E={text:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return A(t),I(S(S({},n),{},{type:"text",msg:t}))},success:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return A(t),I(S(S({},n),{},{type:"success",msg:t}))},error:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return A(t),I(S(S({},n),{},{type:"failure",msg:t}))},warning:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return A(t),I(S(S({},n),{},{type:"warning",msg:t}))},loading:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return A(t),I(S(S({size:"horizontal"===n.loadingIconDirection?16:40},n),{},{type:"loading",msg:t}))},hide:function(){j&&j.hide()},allowMultiple:function(){C.allowMultiple=!0}};export{C as QuarkToast,E as default};