vs-alert - npm Package Compare versions

Comparing version 1.3.17 to 1.3.18

dist/vs-alert.esm.js

@@ -495,3 +495,3 @@ //
     if (!inject) { return }
-    inject("data-v-e22c2e78_0", { source: ".vs-alert {\n  --vs-alert-success-bc: #aecfc2;\n  --vs-alert-success-bg: #edf8f4;\n  --vs-alert-success-color: #186146;\n  --vs-alert-success-icon: #038153;\n  --vs-alert-warning-bc: #fed6a8;\n  --vs-alert-warning-bg: #fff7ed;\n  --vs-alert-warning-color: #ad5918;\n  --vs-alert-warning-icon: #ad5918;\n  --vs-alert-error-bc: #f5b5ba;\n  --vs-alert-error-bg: #fff0f1;\n  --vs-alert-error-color: #8c232c;\n  --vs-alert-error-icon: #cc3340;\n  --vs-alert-info-bc: #adcce4;\n  --vs-alert-info-bg: #edf7ff;\n  --vs-alert-info-color: #1f73b7;\n  --vs-alert-info-icon: #337fbd;\n  --vs-alert-secondary-bc: #d8dcde;\n  --vs-alert-secondary-bg: #f8f9f9;\n  --vs-alert-secondary-color: #68737d;\n  --vs-alert-secondary-icon: #68737d;\n  position: relative;\n  border-radius: 4px;\n  padding: 20px 40px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 15px;\n  margin-top: 1px;\n}\n.vs-alert__heading {\n  font-weight: 600;\n}\n.vs-alert-button {\n  display: block;\n  position: absolute;\n  top: 15px;\n  right: 10px;\n  transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  color: #333333;\n  font-size: 0px;\n  user-select: none;\n}\n.vs-alert-button.success {\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n  border: 1px solid var(--vs-alert-success-bc);\n  background-color: var(--vs-alert-success-bg);\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n  border: 1px solid var(--vs-alert-warning-bc);\n  background-color: var(--vs-alert-warning-bg);\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n  border: 1px solid var(--vs-alert-error-bc);\n  background-color: var(--vs-alert-error-bg);\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n  border: 1px solid var(--vs-alert-info-bc);\n  background-color: var(--vs-alert-info-bg);\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n  border: 1px solid var(--vs-alert-secondary-bc);\n  background-color: var(--vs-alert-secondary-bg);\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert--small {\n  padding: 12px 40px;\n}\n.vs-alert--small .vs-alert-button {\n  top: 8px;\n}\n.vs-alert--no-bg {\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0 22px;\n  font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n  left: 0;\n  margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-success {\n  color: var(--vs-alert-success-icon);\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: var(--vs-alert-error-icon);\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: var(--vs-alert-info-icon);\n}\n.vs-alert--no-bg.vs-alert-secondary {\n  color: var(--vs-alert-secondary-icon);\n}", map: undefined, media: undefined });
+    inject("data-v-4469cffc_0", { source: ".vs-alert {\n  --vs-alert-success-bc: #aecfc2;\n  --vs-alert-success-bg: #edf8f4;\n  --vs-alert-success-color: #186146;\n  --vs-alert-success-icon: #038153;\n  --vs-alert-warning-bc: #fed6a8;\n  --vs-alert-warning-bg: #fff7ed;\n  --vs-alert-warning-color: #ad5918;\n  --vs-alert-warning-icon: #ad5918;\n  --vs-alert-error-bc: #f5b5ba;\n  --vs-alert-error-bg: #fff0f1;\n  --vs-alert-error-color: #8c232c;\n  --vs-alert-error-icon: #cc3340;\n  --vs-alert-info-bc: #adcce4;\n  --vs-alert-info-bg: #edf7ff;\n  --vs-alert-info-color: #1f73b7;\n  --vs-alert-info-icon: #337fbd;\n  --vs-alert-secondary-bc: #d8dcde;\n  --vs-alert-secondary-bg: #f8f9f9;\n  --vs-alert-secondary-color: #68737d;\n  --vs-alert-secondary-icon: #68737d;\n  position: relative;\n  border-radius: 4px;\n  padding: 20px 40px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 15px;\n  margin-top: 1px;\n}\n.vs-alert__heading {\n  font-weight: 600;\n}\n.vs-alert-button {\n  display: block;\n  position: absolute;\n  top: 15px;\n  right: 10px;\n  transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  color: #333333;\n  font-size: 0px;\n  user-select: none;\n}\n.vs-alert-button.success {\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n  border: 1px solid var(--vs-alert-success-bc);\n  background-color: var(--vs-alert-success-bg);\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n  border: 1px solid var(--vs-alert-warning-bc);\n  background-color: var(--vs-alert-warning-bg);\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n  border: 1px solid var(--vs-alert-error-bc);\n  background-color: var(--vs-alert-error-bg);\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n  border: 1px solid var(--vs-alert-info-bc);\n  background-color: var(--vs-alert-info-bg);\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n  border: 1px solid var(--vs-alert-secondary-bc);\n  background-color: var(--vs-alert-secondary-bg);\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert--small {\n  padding: 12px 40px;\n}\n.vs-alert--small .vs-alert-button {\n  top: 8px;\n}\n.vs-alert--no-bg {\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0 22px;\n  font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n  left: 0;\n  margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-success {\n  color: var(--vs-alert-success-icon);\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: var(--vs-alert-error-icon);\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: var(--vs-alert-info-icon);\n}\n.vs-alert--no-bg.vs-alert-secondary {\n  color: var(--vs-alert-secondary-icon);\n}", map: undefined, media: undefined });
 
@@ -498,0 +498,0 @@ };

dist/vs-alert.min.js

@@ -1,1 +0,1 @@
-var VsAlert=function(e){"use strict";var r={name:"VsAlert",props:{type:{type:String,required:!0},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1}},computed:{classList:function(){return["vs-alert-"+this.type,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small}]}}};function n(e,r,n,t,o,s,a,l,c,i){"boolean"!=typeof a&&(c=l,l=a,a=!1);var v,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),t&&(d._scopeId=t),s?(v=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=v):r&&(v=a?function(e){r.call(this,i(e,this.$root.$options.shadowRoot))}:function(e){r.call(this,l(e))}),v)if(d.functional){var p=d.render;d.render=function(e,r){return v.call(r),p(e,r)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,v):[v]}return n}var t,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(e){return function(e,r){return function(e,r){var n=o?r.media||"default":e,s=a[n]||(a[n]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var l=r.source;if(r.map&&(l+="\n/*# sourceURL="+r.map.sources[0]+" */",l+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",r.media&&s.element.setAttribute("media",r.media),void 0===t&&(t=document.head||document.getElementsByTagName("head")[0]),t.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(l),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var c=s.ids.size-1,i=document.createTextNode(l),v=s.element.childNodes;v[c]&&s.element.removeChild(v[c]),v.length?s.element.insertBefore(i,v[c]):s.element.appendChild(i)}}}(e,r)}}var a={};var l=r,c=function(){var e=this,r=e.$createElement,n=e._self._c||r;return n("div",{class:["vs-alert",e.classList]},[n("span",{staticClass:"vs-alert-icon__wrapper"},[e._t("icon",["success"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-success-icon)"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}}),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}})])]):e._e(),e._v(" "),"warning"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("path",{attrs:{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"}}),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"}})]):e._e(),e._v(" "),"error"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-error-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}}),e._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 4.5V9"}})]),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"}})]):e._e(),e._v(" "),"info"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{stroke:"var(--vs-alert-info-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),e._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"}})]):e._e(),e._v(" "),"secondary"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{stroke:"var(--vs-alert-secondary-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),e._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"}})]):e._e()])],2),e._v(" "),e._t("title",[e.title?n("div",{staticClass:"vs-alert__heading"},[e._v(e._s(e.title))]):e._e()]),e._v(" "),e._t("default"),e._v(" "),e.showClose?n("button",{class:["vs-alert-button",e.type],on:{click:function(r){return e.$emit("close",!0)}}},[n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",focusable:"false",role:"presentation"}},[n("path",{attrs:{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"}})])]):e._e()],2)};c._withStripped=!0;var i=n({render:c,staticRenderFns:[]},(function(e){e&&e("data-v-e22c2e78_0",{source:".vs-alert {\n  --vs-alert-success-bc: #aecfc2;\n  --vs-alert-success-bg: #edf8f4;\n  --vs-alert-success-color: #186146;\n  --vs-alert-success-icon: #038153;\n  --vs-alert-warning-bc: #fed6a8;\n  --vs-alert-warning-bg: #fff7ed;\n  --vs-alert-warning-color: #ad5918;\n  --vs-alert-warning-icon: #ad5918;\n  --vs-alert-error-bc: #f5b5ba;\n  --vs-alert-error-bg: #fff0f1;\n  --vs-alert-error-color: #8c232c;\n  --vs-alert-error-icon: #cc3340;\n  --vs-alert-info-bc: #adcce4;\n  --vs-alert-info-bg: #edf7ff;\n  --vs-alert-info-color: #1f73b7;\n  --vs-alert-info-icon: #337fbd;\n  --vs-alert-secondary-bc: #d8dcde;\n  --vs-alert-secondary-bg: #f8f9f9;\n  --vs-alert-secondary-color: #68737d;\n  --vs-alert-secondary-icon: #68737d;\n  position: relative;\n  border-radius: 4px;\n  padding: 20px 40px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 15px;\n  margin-top: 1px;\n}\n.vs-alert__heading {\n  font-weight: 600;\n}\n.vs-alert-button {\n  display: block;\n  position: absolute;\n  top: 15px;\n  right: 10px;\n  transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  color: #333333;\n  font-size: 0px;\n  user-select: none;\n}\n.vs-alert-button.success {\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n  border: 1px solid var(--vs-alert-success-bc);\n  background-color: var(--vs-alert-success-bg);\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n  border: 1px solid var(--vs-alert-warning-bc);\n  background-color: var(--vs-alert-warning-bg);\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n  border: 1px solid var(--vs-alert-error-bc);\n  background-color: var(--vs-alert-error-bg);\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n  border: 1px solid var(--vs-alert-info-bc);\n  background-color: var(--vs-alert-info-bg);\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n  border: 1px solid var(--vs-alert-secondary-bc);\n  background-color: var(--vs-alert-secondary-bg);\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert--small {\n  padding: 12px 40px;\n}\n.vs-alert--small .vs-alert-button {\n  top: 8px;\n}\n.vs-alert--no-bg {\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0 22px;\n  font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n  left: 0;\n  margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-success {\n  color: var(--vs-alert-success-icon);\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: var(--vs-alert-error-icon);\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: var(--vs-alert-info-icon);\n}\n.vs-alert--no-bg.vs-alert-secondary {\n  color: var(--vs-alert-secondary-icon);\n}",map:void 0,media:void 0})}),l,void 0,!1,void 0,!1,s,void 0,void 0);function v(e){v.installed||(v.installed=!0,e.component("VsAlert",i))}var d={install:v},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(d),e.default=i,e.install=v,e}({});
+var VsAlert=function(e){"use strict";var r={name:"VsAlert",props:{type:{type:String,required:!0},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1}},computed:{classList:function(){return["vs-alert-"+this.type,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small}]}}};function n(e,r,n,t,o,s,a,l,c,i){"boolean"!=typeof a&&(c=l,l=a,a=!1);var v,d="function"==typeof n?n.options:n;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),t&&(d._scopeId=t),s?(v=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=v):r&&(v=a?function(e){r.call(this,i(e,this.$root.$options.shadowRoot))}:function(e){r.call(this,l(e))}),v)if(d.functional){var p=d.render;d.render=function(e,r){return v.call(r),p(e,r)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,v):[v]}return n}var t,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(e){return function(e,r){return function(e,r){var n=o?r.media||"default":e,s=a[n]||(a[n]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var l=r.source;if(r.map&&(l+="\n/*# sourceURL="+r.map.sources[0]+" */",l+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",r.media&&s.element.setAttribute("media",r.media),void 0===t&&(t=document.head||document.getElementsByTagName("head")[0]),t.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(l),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var c=s.ids.size-1,i=document.createTextNode(l),v=s.element.childNodes;v[c]&&s.element.removeChild(v[c]),v.length?s.element.insertBefore(i,v[c]):s.element.appendChild(i)}}}(e,r)}}var a={};var l=r,c=function(){var e=this,r=e.$createElement,n=e._self._c||r;return n("div",{class:["vs-alert",e.classList]},[n("span",{staticClass:"vs-alert-icon__wrapper"},[e._t("icon",["success"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-success-icon)"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}}),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}})])]):e._e(),e._v(" "),"warning"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("path",{attrs:{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"}}),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"}})]):e._e(),e._v(" "),"error"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{fill:"none",stroke:"var(--vs-alert-error-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7"}}),e._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 4.5V9"}})]),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"}})]):e._e(),e._v(" "),"info"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{stroke:"var(--vs-alert-info-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),e._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"}})]):e._e(),e._v(" "),"secondary"===e.type?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}},[n("g",{attrs:{stroke:"var(--vs-alert-secondary-icon)"}},[n("circle",{attrs:{cx:"7.5",cy:"8.5",r:"7",fill:"none"}}),e._v(" "),n("path",{attrs:{"stroke-linecap":"round",d:"M7.5 12.5V8"}})]),e._v(" "),n("circle",{attrs:{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"}})]):e._e()])],2),e._v(" "),e._t("title",[e.title?n("div",{staticClass:"vs-alert__heading"},[e._v(e._s(e.title))]):e._e()]),e._v(" "),e._t("default"),e._v(" "),e.showClose?n("button",{class:["vs-alert-button",e.type],on:{click:function(r){return e.$emit("close",!0)}}},[n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",focusable:"false",role:"presentation"}},[n("path",{attrs:{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"}})])]):e._e()],2)};c._withStripped=!0;var i=n({render:c,staticRenderFns:[]},(function(e){e&&e("data-v-4469cffc_0",{source:".vs-alert {\n  --vs-alert-success-bc: #aecfc2;\n  --vs-alert-success-bg: #edf8f4;\n  --vs-alert-success-color: #186146;\n  --vs-alert-success-icon: #038153;\n  --vs-alert-warning-bc: #fed6a8;\n  --vs-alert-warning-bg: #fff7ed;\n  --vs-alert-warning-color: #ad5918;\n  --vs-alert-warning-icon: #ad5918;\n  --vs-alert-error-bc: #f5b5ba;\n  --vs-alert-error-bg: #fff0f1;\n  --vs-alert-error-color: #8c232c;\n  --vs-alert-error-icon: #cc3340;\n  --vs-alert-info-bc: #adcce4;\n  --vs-alert-info-bg: #edf7ff;\n  --vs-alert-info-color: #1f73b7;\n  --vs-alert-info-icon: #337fbd;\n  --vs-alert-secondary-bc: #d8dcde;\n  --vs-alert-secondary-bg: #f8f9f9;\n  --vs-alert-secondary-color: #68737d;\n  --vs-alert-secondary-icon: #68737d;\n  position: relative;\n  border-radius: 4px;\n  padding: 20px 40px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 15px;\n  margin-top: 1px;\n}\n.vs-alert__heading {\n  font-weight: 600;\n}\n.vs-alert-button {\n  display: block;\n  position: absolute;\n  top: 15px;\n  right: 10px;\n  transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  color: #333333;\n  font-size: 0px;\n  user-select: none;\n}\n.vs-alert-button.success {\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n  border: 1px solid var(--vs-alert-success-bc);\n  background-color: var(--vs-alert-success-bg);\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n  border: 1px solid var(--vs-alert-warning-bc);\n  background-color: var(--vs-alert-warning-bg);\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n  border: 1px solid var(--vs-alert-error-bc);\n  background-color: var(--vs-alert-error-bg);\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n  border: 1px solid var(--vs-alert-info-bc);\n  background-color: var(--vs-alert-info-bg);\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n  border: 1px solid var(--vs-alert-secondary-bc);\n  background-color: var(--vs-alert-secondary-bg);\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert--small {\n  padding: 12px 40px;\n}\n.vs-alert--small .vs-alert-button {\n  top: 8px;\n}\n.vs-alert--no-bg {\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0 22px;\n  font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n  left: 0;\n  margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-success {\n  color: var(--vs-alert-success-icon);\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: var(--vs-alert-error-icon);\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: var(--vs-alert-info-icon);\n}\n.vs-alert--no-bg.vs-alert-secondary {\n  color: var(--vs-alert-secondary-icon);\n}",map:void 0,media:void 0})}),l,void 0,!1,void 0,!1,s,void 0,void 0);function v(e){v.installed||(v.installed=!0,e.component("VsAlert",i))}var d={install:v},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(d),e.default=i,e.install=v,e}({});

dist/vs-alert.umd.js

@@ -501,3 +501,3 @@ (function (global, factory) {
       if (!inject) { return }
-      inject("data-v-e22c2e78_0", { source: ".vs-alert {\n  --vs-alert-success-bc: #aecfc2;\n  --vs-alert-success-bg: #edf8f4;\n  --vs-alert-success-color: #186146;\n  --vs-alert-success-icon: #038153;\n  --vs-alert-warning-bc: #fed6a8;\n  --vs-alert-warning-bg: #fff7ed;\n  --vs-alert-warning-color: #ad5918;\n  --vs-alert-warning-icon: #ad5918;\n  --vs-alert-error-bc: #f5b5ba;\n  --vs-alert-error-bg: #fff0f1;\n  --vs-alert-error-color: #8c232c;\n  --vs-alert-error-icon: #cc3340;\n  --vs-alert-info-bc: #adcce4;\n  --vs-alert-info-bg: #edf7ff;\n  --vs-alert-info-color: #1f73b7;\n  --vs-alert-info-icon: #337fbd;\n  --vs-alert-secondary-bc: #d8dcde;\n  --vs-alert-secondary-bg: #f8f9f9;\n  --vs-alert-secondary-color: #68737d;\n  --vs-alert-secondary-icon: #68737d;\n  position: relative;\n  border-radius: 4px;\n  padding: 20px 40px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 15px;\n  margin-top: 1px;\n}\n.vs-alert__heading {\n  font-weight: 600;\n}\n.vs-alert-button {\n  display: block;\n  position: absolute;\n  top: 15px;\n  right: 10px;\n  transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  color: #333333;\n  font-size: 0px;\n  user-select: none;\n}\n.vs-alert-button.success {\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n  border: 1px solid var(--vs-alert-success-bc);\n  background-color: var(--vs-alert-success-bg);\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n  border: 1px solid var(--vs-alert-warning-bc);\n  background-color: var(--vs-alert-warning-bg);\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n  border: 1px solid var(--vs-alert-error-bc);\n  background-color: var(--vs-alert-error-bg);\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n  border: 1px solid var(--vs-alert-info-bc);\n  background-color: var(--vs-alert-info-bg);\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n  border: 1px solid var(--vs-alert-secondary-bc);\n  background-color: var(--vs-alert-secondary-bg);\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert--small {\n  padding: 12px 40px;\n}\n.vs-alert--small .vs-alert-button {\n  top: 8px;\n}\n.vs-alert--no-bg {\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0 22px;\n  font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n  left: 0;\n  margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-success {\n  color: var(--vs-alert-success-icon);\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: var(--vs-alert-error-icon);\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: var(--vs-alert-info-icon);\n}\n.vs-alert--no-bg.vs-alert-secondary {\n  color: var(--vs-alert-secondary-icon);\n}", map: undefined, media: undefined });
+      inject("data-v-4469cffc_0", { source: ".vs-alert {\n  --vs-alert-success-bc: #aecfc2;\n  --vs-alert-success-bg: #edf8f4;\n  --vs-alert-success-color: #186146;\n  --vs-alert-success-icon: #038153;\n  --vs-alert-warning-bc: #fed6a8;\n  --vs-alert-warning-bg: #fff7ed;\n  --vs-alert-warning-color: #ad5918;\n  --vs-alert-warning-icon: #ad5918;\n  --vs-alert-error-bc: #f5b5ba;\n  --vs-alert-error-bg: #fff0f1;\n  --vs-alert-error-color: #8c232c;\n  --vs-alert-error-icon: #cc3340;\n  --vs-alert-info-bc: #adcce4;\n  --vs-alert-info-bg: #edf7ff;\n  --vs-alert-info-color: #1f73b7;\n  --vs-alert-info-icon: #337fbd;\n  --vs-alert-secondary-bc: #d8dcde;\n  --vs-alert-secondary-bg: #f8f9f9;\n  --vs-alert-secondary-color: #68737d;\n  --vs-alert-secondary-icon: #68737d;\n  position: relative;\n  border-radius: 4px;\n  padding: 20px 40px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 15px;\n  margin-top: 1px;\n}\n.vs-alert__heading {\n  font-weight: 600;\n}\n.vs-alert-button {\n  display: block;\n  position: absolute;\n  top: 15px;\n  right: 10px;\n  transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n  width: 28px;\n  height: 28px;\n  overflow: hidden;\n  color: #333333;\n  font-size: 0px;\n  user-select: none;\n}\n.vs-alert-button.success {\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n  border: 1px solid var(--vs-alert-success-bc);\n  background-color: var(--vs-alert-success-bg);\n  color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n  border: 1px solid var(--vs-alert-warning-bc);\n  background-color: var(--vs-alert-warning-bg);\n  color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n  border: 1px solid var(--vs-alert-error-bc);\n  background-color: var(--vs-alert-error-bg);\n  color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n  border: 1px solid var(--vs-alert-info-bc);\n  background-color: var(--vs-alert-info-bg);\n  color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n  border: 1px solid var(--vs-alert-secondary-bc);\n  background-color: var(--vs-alert-secondary-bg);\n  color: var(--vs-alert-secondary-color);\n}\n.vs-alert--small {\n  padding: 12px 40px;\n}\n.vs-alert--small .vs-alert-button {\n  top: 8px;\n}\n.vs-alert--no-bg {\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0 22px;\n  font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n  left: 0;\n  margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-success {\n  color: var(--vs-alert-success-icon);\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: var(--vs-alert-error-icon);\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: var(--vs-alert-info-icon);\n}\n.vs-alert--no-bg.vs-alert-secondary {\n  color: var(--vs-alert-secondary-icon);\n}", map: undefined, media: undefined });
 
@@ -504,0 +504,0 @@ };

package.json

 {
   "name": "vs-alert",
-  "version": "1.3.17",
-  "description": "A simple vue alert. Perfect for all your alert scenarios.",
+  "version": "1.3.18",
+  "description": "A simple vue alert.",
   "main": "dist/vs-alert.umd.js",
@@ -35,16 +35,2 @@ "module": "dist/vs-alert.esm.js",
   },
-  "keywords": [
-    "vue",
-    "vuejs",
-    "alert",
-    "notification",
-    "front-end",
-    "popup",
-    "web",
-    "vue-js",
-    "alert",
-    "vue-js-alert",
-    "vue-alert",
-    "vs-alert"
-  ],
   "author": "Ashwin Shenoy <[e-mail]>",
@@ -56,3 +42,3 @@ "license": "MIT",
   "homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-alert",
-  "gitHead": "e2a4c92aa9fbfacfffc908f8ba3af30c51098aa8"
+  "gitHead": "66f1d390d6caa9ec346508de37813f5adff15efb"
 }

README.md

 # Vue Simple Alert
 
-#### 🗃 A simple vue alert. Perfect for all your alert scenarios.
-
-A light weight vue plugin built groundup.
-
-[![npm](https://img.shields.io/npm/v/vs-alert.svg)](https://www.npmjs.com/package/vs-alert)
-[![npm](https://img.shields.io/npm/dt/vs-alert.svg)](https://img.shields.io/npm/dt/vs-alert.svg)
-<br />
-
-![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)
-![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)
-![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
-![forthebadge](https://forthebadge.com/images/badges/built-with-swag.svg)
-![forthebadge](https://forthebadge.com/images/badges/check-it-out.svg)
-![forthebadge](https://forthebadge.com/images/badges/60-percent-of-the-time-works-every-time.svg)
-
-<br />
-
-### 📺 Live Demo
-
-Code Sandbox: [Link](https://codesandbox.io/s/vs-alert-yhjce)
-
-<img src="https://raw.githubusercontent.com/ashwinkshenoy/vue-simple/master/packages/vs-alert/demo_image/image.png" width="600">
-
-<br />
-
-### 🛠 Install
-
-```bash
-npm i vs-alert
-```
-
-```bash
-yarn add vs-alert
-```
-
-<br />
-
-### 🚀 Usage
-
-```html
-<template>
-  <vs-alert type="success">
-    Success
-  </vs-alert>
-</template>
-
-<script>
-  import VsAlert from 'vs-alert';
-
-  export default {
-    components: {
-      VsAlert,
-    },
-  };
-</script>
-```
-
-<br />
-
-### 🌎 CDN
-
-```javascript
-<script src='https://unpkg.com/vs-alert@<version>/dist/vs-alert.min.js'></script>
-```
-
-```html
-<template>
-  <vs-alert type="success">
-    Success
-  </vs-alert>
-</template>
-```
-
-<br />
-
-<h3> 
-  <img src="https://nuxtjs.org/favicon.ico" width="20px"> Nuxt.js
-</h3>
-
-Nuxt Code Snippet
-
-After installation,
-
-- Create a file `/plugins/vs-alert.js`
-
-  ```javascript
-  import Vue from 'vue';
-  import VsAlert from 'vs-alert';
-
-  Vue.component('vs-alert', VsAlert);
-  ```
-
-- Update `nuxt.config.js`
-  ```javascript
-  module.exports = {
-    ...
-    plugins: [
-      { src: '~plugins/vs-alert', mode: 'client' }
-      ...
-    ]
-  }
-  ```
-- In the page/ component
-
-  ```html
-  <template>
-    <vs-alert type="success">
-      Success
-    </vs-alert>
-  </template>
-  ```
-
-**Note**
-
-- For older Nuxt versions, use `<no-ssr>...</no-ssr>` tag.
-- You can also do
-  `import VsAlert from 'vs-alert'`
-  & add in `component:{VsAlert}` and use it within component, without globally installing in plugin folder.
-
-<br />
-
-### ⚙ Props
-
-| Name      | Type    | Default | Description                                                           |
-| --------- | ------- | ------- | --------------------------------------------------------------------- |
-| type      | String  | -       | Type of alert to be shown. (success, warning, error, info, secondary) |
-| title     | String  | -       | The alert title (text only). For HTML, use the header slot.           |
-| showClose | Boolean | false   | Show alert close icon                                                 |
-| small     | Boolean | false   | Applies reduced padding                                               |
-| noBg      | Boolean | false   | Remove background color                                               |
-
-<br />
-
-### 🔥 Events
-
-| Name  | Description                                                                  |
-| ----- | ---------------------------------------------------------------------------- |
-| close | Emitted when the alert close icons is clicked. Listen for it using `@close`. |
-
-<br />
-
-### 📎 Slots
-
-You can define own item markup via slots:
-
-| Name      | Description                                   |
-| --------- | --------------------------------------------- |
-| (default) | Holds the alert content and can contain HTML. |
-| icon      | Slot to add custom icon for type              |
-| title     | Slot to add custom title                      |
+This Plugin has been deprecated. [Please use the updated package here](https://npmjs.com/package/@vuesimple/vs-alert)

No alert changes

Worsened metrics

Total package byte prevSize

186193

decreased by-2.46%

Number of package files

10

decreased by-9.09%

Number of lines in readme file

4

decreased by-97.39%

No dependency changes