j-toastify
Version:
Here is a beautiful and light toastification for Vue 3.x .
13 lines (12 loc) • 13.7 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".j-slide-fade-enter-active{transition:all .5s ease-out}.j-slide-fade-leave-active{transition:all .5s cubic-bezier(1,.5,.8,1)}.j-slide-fade-enter-from,.j-slide-fade-leave-to{transform:translate(20px);opacity:0}.j-toastify-container button{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;text-transform:none;-moz-appearance:button;appearance:button;-webkit-appearance:button;border-style:none;outline:1px dotted ButtonText;padding:5px 15px;border-radius:5px;outline:none;color:#fff;border:1px solid transparent;transition:all .5s ease;box-sizing:border-box}.j-toastify-container button:hover{transform:scale(1.1)}.j-toastify-container{position:relative;border-radius:5px;box-shadow:0 0 5px #0000004d;overflow:hidden;box-sizing:border-box}.j-toastify-box{min-width:300px;max-width:600px;min-height:60px;max-height:800px;font-size:14px;color:#fff;padding:25px;box-sizing:border-box}.j-toastify-box.primary{background-color:#1976d2}.j-toastify-box.success{background-color:#4caf50}.j-toastify-box.warning{background-color:#ffc107}.j-toastify-box.danger{background-color:#ff5252}.j-toastify-box .icon{width:20px;height:20px;fill:#fff}.j-toastify-box .j-toastify-close{position:absolute;top:10px;right:10px;fill:#d8d8d8;transition:all .3s linear}.j-toastify-box .j-toastify-close:hover{fill:#fff;transform:rotate(90deg) scale(1.1)}.j-toastify-content{display:flex;justify-content:flex-start;box-sizing:border-box}.j-toastify-content .icon{margin-right:10px}.j-toastify-message{word-wrap:break-word;word-break:break-word}.j-toasity-count-down{position:absolute;left:0;bottom:0;height:5px;width:100%;box-sizing:border-box}.success .j-toasity-count-down{background-color:#29692c}.primary .j-toasity-count-down{background-color:#183f66}.danger .j-toasity-count-down{background-color:#982d2d}.warning .j-toasity-count-down{background-color:#a57c01}.j-toastify-group{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}.j-toastify-group button{font-size:12px;border-color:transparent}.success .j-toastify-group button{color:#29692c;background-color:#fff}.primary .j-toastify-group button{color:#183f66;background-color:#fff}.warning .j-toastify-group button{color:#a57c01;background-color:#fff}.danger .j-toastify-group button{color:#982d2d;background-color:#fff}.j-toastify-group button:hover{border-color:#fff}\n.j-slide-fade-enter-active{transition:all .5s ease-out}.j-slide-fade-leave-active{transition:all .5s cubic-bezier(1,.5,.8,1)}.j-slide-fade-enter-from,.j-slide-fade-leave-to{transform:translate(20px);opacity:0}.j-toastify-container button{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;text-transform:none;-moz-appearance:button;appearance:button;-webkit-appearance:button;border-style:none;outline:1px dotted ButtonText;padding:5px 15px;border-radius:5px;outline:none;color:#fff;border:1px solid transparent;transition:all .5s ease;box-sizing:border-box}.j-toastify-container button:hover{transform:scale(1.1)}.j-toastify-container{position:relative;border-radius:5px;box-shadow:0 0 5px #0000004d;overflow:hidden;box-sizing:border-box}.j-toastify-box{min-width:300px;max-width:600px;min-height:60px;max-height:800px;font-size:14px;color:#fff;padding:25px;box-sizing:border-box}.j-toastify-box.primary{background-color:#1976d2}.j-toastify-box.success{background-color:#4caf50}.j-toastify-box.warning{background-color:#ffc107}.j-toastify-box.danger{background-color:#ff5252}.j-toastify-box .icon{width:20px;height:20px;fill:#fff}.j-toastify-box .j-toastify-close{position:absolute;top:10px;right:10px;fill:#d8d8d8;transition:all .3s linear}.j-toastify-box .j-toastify-close:hover{fill:#fff;transform:rotate(90deg) scale(1.1)}.j-toastify-content{display:flex;justify-content:flex-start;box-sizing:border-box}.j-toastify-content .icon{margin-right:10px}.j-toastify-message{word-wrap:break-word;word-break:break-word}.j-toasity-count-down{position:absolute;left:0;bottom:0;height:5px;width:100%;box-sizing:border-box}.success .j-toasity-count-down{background-color:#29692c}.primary .j-toasity-count-down{background-color:#183f66}.danger .j-toasity-count-down{background-color:#982d2d}.warning .j-toasity-count-down{background-color:#a57c01}.j-toastify-group{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}.j-toastify-group button{font-size:12px;border-color:transparent}.success .j-toastify-group button{color:#29692c;background-color:#fff}.primary .j-toastify-group button{color:#183f66;background-color:#fff}.warning .j-toastify-group button{color:#a57c01;background-color:#fff}.danger .j-toastify-group button{color:#982d2d;background-color:#fff}.j-toastify-group button:hover{border-color:#fff}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a["j-toastify"]={},a.Vue))})(this,function(a,t){"use strict";const y={class:"j-toastify-content"},p={key:0},g={key:0,t:"1732173162180",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"11726",width:"200",height:"200"},E={key:1,t:"1732181491659",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"12747",width:"200",height:"200"},h={key:2,t:"1732181707224",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"25474",width:"200",height:"200"},x={key:3,t:"1732181977053",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"34673",width:"200",height:"200"},C={class:"j-toastify-message"},w={key:0,class:"j-toastify-group"},d={__name:"JToastify",props:{position:{type:String,default:"top-right",validator:e=>["top-right","top-left","top","center","bottom-left","bottom-right","bottom"].includes(e)},icon:{type:Boolean,default:!0},message:{type:String,required:!0},type:{type:String,default:"primary",validator:e=>["primary","success","warning","danger"].includes(e)},autoClose:{type:Boolean,default:!0},timeout:{type:Number,default:5e3},closeEvent:{type:Function,default:()=>{}},confirmText:{type:String,default:null},cancelText:{type:String,default:null},confirmEvent:{type:Function,default:()=>{}},cancelEvent:{type:Function,default:()=>{}}},setup(e){const n=e,c=t.ref(!1),o=t.ref(),i=t.ref("100%"),s=t.ref(null);t.onMounted(()=>{c.value=!0,t.nextTick(()=>{o.value&&n.autoClose&&u()})}),t.onBeforeUnmount(()=>{c.value=!1,console.log(1111)});const u=()=>{s.value=setInterval(()=>{let f=parseFloat(i.value)-100/(n.timeout/10);i.value=`${f}%`,f<=0&&(clearInterval(s.value),i.value=0,typeof n.closeEvent=="function"&&n.closeEvent())},10)},T=()=>{clearInterval(s.value)},N=()=>{o.value&&n.autoClose&&u()};return(f,l)=>(t.openBlock(),t.createBlock(t.Transition,{name:"j-slide-fade"},{default:t.withCtx(()=>[c.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["j-toastify-container",e.position]),onMouseenter:T,onMouseleave:N},[t.createElementVNode("div",{class:t.normalizeClass(["j-toastify-box",e.type])},[t.createElementVNode("div",{class:"j-toastify-close",onClick:l[0]||(l[0]=(...r)=>e.closeEvent&&e.closeEvent(...r))},l[3]||(l[3]=[t.createElementVNode("svg",{t:"1732172711195",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"6521",width:"200",height:"200"},[t.createElementVNode("path",{d:"M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z","p-id":"6522"})],-1)])),t.createElementVNode("div",y,[e.icon?(t.openBlock(),t.createElementBlock("div",p,[e.type==="primary"?(t.openBlock(),t.createElementBlock("svg",g,l[4]||(l[4]=[t.createElementVNode("path",{d:"M512 64q190.016 4.992 316.512 131.488T960 512q-4.992 190.016-131.488 316.512T512 960q-190.016-4.992-316.512-131.488T64 512q4.992-190.016 131.488-316.512T512 64z m67.008 275.008q26.016 0 43.008-15.488t16.992-41.504-16.992-41.504-42.496-15.488-42.496 15.488-16.992 41.504 16.992 41.504 42.016 15.488z m12 360q0-6.016 0.992-16t0-19.008l-52.992 60.992q-8 8.992-16.512 14.016t-14.496 3.008q-8.992-4-8-14.016l88-276.992q4.992-28-8.992-48t-44.992-24q-35.008 0.992-76.512 29.504t-72.512 72.512v15.008q-0.992 10.016 0 19.008l52.992-60.992q8-8.992 16.512-14.016t13.504-3.008q10.016 4.992 7.008 16l-87.008 276q-7.008 24.992 7.008 44.512t48.992 26.496q50.016-0.992 84-28.992t63.008-72z","p-id":"11727"},null,-1)]))):t.createCommentVNode("",!0),e.type==="success"?(t.openBlock(),t.createElementBlock("svg",E,l[5]||(l[5]=[t.createElementVNode("path",{d:"M512 976.742c-256.67 0-464.742-208.071-464.742-464.737C47.258 255.33 255.329 47.258 512 47.258S976.742 255.329 976.742 512c0 256.67-208.071 464.742-464.742 464.742z m225.413-754.268C575.754 328.69 473.231 647.337 473.231 647.337l-63.088-156.795-130.12 101.161c55.209 25.288 134.067 106.214 201.093 212.429C528.43 692.864 674.324 465.254 745.298 445.02c-27.597-80.921-11.822-146.678-7.885-222.546z m0 0","p-id":"12748"},null,-1)]))):t.createCommentVNode("",!0),e.type==="warning"?(t.openBlock(),t.createElementBlock("svg",h,l[6]||(l[6]=[t.createElementVNode("path",{d:"M512 0c-281.6 0-512 230.4-512 512s230.4 512 512 512c281.6 0 512-230.4 512-512s-230.4-512-512-512zM512 832c-32 0-64-32-64-64l121.6 0c0 32-25.6 64-57.6 64zM806.4 742.4l-588.8 0 0-38.4 83.2-70.4 0-192c0-102.4 70.4-185.6 172.8-204.8l0-19.2c0-12.8 12.8-25.6 25.6-25.6l25.6 0c12.8 0 25.6 12.8 25.6 25.6l0 12.8c96 19.2 172.8 102.4 172.8 204.8l0 198.4 83.2 70.4 0 38.4z","p-id":"25475"},null,-1)]))):t.createCommentVNode("",!0),e.type==="danger"?(t.openBlock(),t.createElementBlock("svg",x,l[7]||(l[7]=[t.createElementVNode("path",{d:"M827.392 195.584a430.016 430.016 0 0 1 97.792 147.456c21.504 54.592 32.256 110.592 32.256 167.936 0 57.344-10.752 113.28-32.256 167.936a430.016 430.016 0 0 1-97.792 147.456 436.48 436.48 0 0 1-147.456 98.304 448.384 448.384 0 0 1-336.384 0 435.136 435.136 0 0 1-147.968-98.304 436.48 436.48 0 0 1-98.304-147.456 448.384 448.384 0 0 1-32.768-167.936c0-57.344 10.88-113.28 32.768-167.936a436.48 436.48 0 0 1 98.304-147.456 428.8 428.8 0 0 1 147.968-97.792 454.656 454.656 0 0 1 336.384 0 430.016 430.016 0 0 1 147.456 97.792z m-106.496 520.192c14.336-14.336 20.672-30.72 18.944-49.152a78.4 78.4 0 0 0-24.064-49.152l-107.52-107.52 107.52-107.52c14.336-14.336 22.4-30.72 24.064-49.152 1.728-18.432-4.608-34.816-18.944-49.152a70.528 70.528 0 0 0-51.712-21.504c-20.16 0-37.376 7.168-51.712 21.504l-107.52 106.496-104.448-104.448a80.576 80.576 0 0 0-49.152-23.04 60.544 60.544 0 0 0-49.152 17.92 71.04 71.04 0 0 0-21.504 52.224c0 20.48 7.168 37.888 21.504 52.224l104.448 104.448L307.2 614.4a70.528 70.528 0 0 0-21.504 51.712c0 20.16 7.168 37.376 21.504 51.712 14.336 14.336 30.72 20.672 49.152 18.944 18.432-1.728 34.816-9.728 49.152-24.064l104.448-104.448 107.52 107.52c14.336 14.336 31.552 21.504 51.712 21.504 20.16 0 37.376-7.168 51.712-21.504z","p-id":"34674"},null,-1)]))):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",C,t.toDisplayString(e.message),1)]),!e.autoClose&&(e.cancelText||e.confirmText)?(t.openBlock(),t.createElementBlock("div",w,[e.cancelText?(t.openBlock(),t.createElementBlock("button",{key:0,type:"button",onClick:l[1]||(l[1]=(...r)=>e.cancelEvent&&e.cancelEvent(...r))},t.toDisplayString(e.cancelText),1)):t.createCommentVNode("",!0),e.confirmText?(t.openBlock(),t.createElementBlock("button",{key:1,type:"button",onClick:l[2]||(l[2]=(...r)=>e.confirmEvent&&e.confirmEvent(...r))},t.toDisplayString(e.confirmText),1)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0),e.autoClose?(t.openBlock(),t.createElementBlock("div",{key:1,ref_key:"countDOM",ref:o,class:"j-toasity-count-down",style:t.normalizeStyle({width:i.value})},null,4)):t.createCommentVNode("",!0)],2)],34)):t.createCommentVNode("",!0)]),_:1}))}},m={},k=e=>{if(!m[e]||!document.body.contains(m[e])){const n=document.createElement("div");n.style.cssText=B(e),document.body.appendChild(n),m[e]=n}return m[e]},B=e=>`
position: fixed;
z-index: 999;
display: flex;
flex-direction: column;
gap: 10px;
`+{"top-right":"top: 20px; right: 20px;","top-left":"top: 20px; left: 20px;","bottom-right":"bottom: 20px; right: 20px;","bottom-left":"bottom: 20px; left: 20px;",top:"top: 20px; left: 50%; transform: translate(-50%)",bottom:"bottom: 20px; left: 50%; transform: translate(-50%)",center:`
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
`}[e];d.alert=(e,n)=>{const{position:c="top-right"}=e;let o=k(c);const i=document.createElement("div"),s=t.createApp(d,{...e,closeEvent:()=>{o.removeChild(i),s.unmount(),typeof e.closeEvent=="function"&&e.closeEvent(),typeof n=="function"&&n(),o.childElementCount===0&&(document.body.removeChild(o),o[c]=null)},cancelEvent:()=>{o.removeChild(i),s.unmount(),typeof e.cancelEvent=="function"&&e.cancelEvent(!1),typeof n=="function"&&n(),o.childElementCount===0&&(document.body.removeChild(o),o[c]=null)},confirmEvent:()=>{o.removeChild(i),s.unmount(),typeof e.confirmEvent=="function"&&e.confirmEvent(!0),typeof n=="function"&&n(),o.childElementCount===0&&(document.body.removeChild(o),o[c]=null)}});s.mount(i),o.appendChild(i)};const v={install(e){e.component("JToastify",d)}};a.JToastify=d,a.default=v,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});