@vuesimple/vs-alert
Version:
A simple vue alert. Perfect for all your alert scenarios.
2 lines (1 loc) • 8.07 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941;box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var VsAlert=function(s,e){"use strict";const v="",c=(o,l)=>{const t=o.__vccOpts||o;for(const[r,a]of l)t[r]=a;return t},i={name:"VsAlert",props:{variant:{type:String,required:!0,validator:o=>["success","error","info","warning","secondary"].includes(o.toLowerCase())},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList(){return[`vs-alert-${this.variant}`,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast},{"vs-alert--is-close":this.showClose}]}}},d={class:"vs-alert-icon__wrapper"},_={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},h=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-success-icon)"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}),e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"})],-1)],m={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},g=[e.createElementVNode("path",{fill:"none",stroke:"var(--vs-alert-warning-icon)","stroke-linecap":"round",d:"M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"},null,-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"},null,-1)],w={key:2,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},f=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-error-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 4.5V9"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"},null,-1)],k={key:3,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},V=[e.createElementVNode("g",{stroke:"var(--vs-alert-info-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"},null,-1)],p={key:4,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},y=[e.createElementVNode("g",{stroke:"var(--vs-alert-secondary-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"},null,-1)],E={class:"vs-alert__heading"},N=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",role:"presentation",focusable:"false"},[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function B(o,l,t,r,a,C){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-alert",C.classList])},[e.createElementVNode("span",d,[e.renderSlot(o.$slots,"icon",{},()=>[t.variant==="success"?(e.openBlock(),e.createElementBlock("svg",_,h)):e.createCommentVNode("",!0),t.variant==="warning"?(e.openBlock(),e.createElementBlock("svg",m,g)):e.createCommentVNode("",!0),t.variant==="error"?(e.openBlock(),e.createElementBlock("svg",w,f)):e.createCommentVNode("",!0),t.variant==="info"?(e.openBlock(),e.createElementBlock("svg",k,V)):e.createCommentVNode("",!0),t.variant==="secondary"?(e.openBlock(),e.createElementBlock("svg",p,y)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",E,[e.renderSlot(o.$slots,"title",{},()=>[t.title?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.title),1)],64)):e.createCommentVNode("",!0)])]),e.renderSlot(o.$slots,"default"),t.showClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["vs-alert-button",t.variant]),onClick:l[0]||(l[0]=q=>o.$emit("close",!0)),"aria-label":"Close"},N,2)):e.createCommentVNode("",!0)],2)}const n=c(i,[["render",B]]),x={install(o){o.component("VsAlert",n)}};return s.default=n,s.plugin=x,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),s}({},Vue);