vs-alert - npm Package Compare versions

Comparing version 1.2.78 to 1.2.79

dist/vs-alert.esm.js

@@ -60,2 +60,11 @@ //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
@@ -247,13 +256,24 @@ var script = {
                   [
-                    _c("g", { attrs: { fill: "none", stroke: "#038153" } }, [
-                      _c("path", {
+                    _c(
+                      "g",
+                      {
                         attrs: {
-                          "stroke-linecap": "round",
-                          "stroke-linejoin": "round",
-                          d: "M4 9l2.5 2.5 5-5"
+                          fill: "none",
+                          stroke: "var(--vs-alert-success-icon)"
                         }
-                      }),
-                      _vm._v(" "),
-                      _c("circle", { attrs: { cx: "7.5", cy: "8.5", r: "7" } })
-                    ])
+                      },
+                      [
+                        _c("path", {
+                          attrs: {
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round",
+                            d: "M4 9l2.5 2.5 5-5"
+                          }
+                        }),
+                        _vm._v(" "),
+                        _c("circle", {
+                          attrs: { cx: "7.5", cy: "8.5", r: "7" }
+                        })
+                      ]
+                    )
                   ]
@@ -278,3 +298,3 @@ )
                         fill: "none",
-                        stroke: "#ad5918",
+                        stroke: "var(--vs-alert-warning-icon)",
                         "stroke-linecap": "round",
@@ -305,12 +325,28 @@ d:
                   [
-                    _c("g", { attrs: { fill: "none", stroke: "#cc3340" } }, [
-                      _c("circle", { attrs: { cx: "7.5", cy: "8.5", r: "7" } }),
-                      _vm._v(" "),
-                      _c("path", {
-                        attrs: { "stroke-linecap": "round", d: "M7.5 4.5V9" }
-                      })
-                    ]),
+                    _c(
+                      "g",
+                      {
+                        attrs: {
+                          fill: "none",
+                          stroke: "var(--vs-alert-error-icon)"
+                        }
+                      },
+                      [
+                        _c("circle", {
+                          attrs: { cx: "7.5", cy: "8.5", r: "7" }
+                        }),
+                        _vm._v(" "),
+                        _c("path", {
+                          attrs: { "stroke-linecap": "round", d: "M7.5 4.5V9" }
+                        })
+                      ]
+                    ),
                     _vm._v(" "),
                     _c("circle", {
-                      attrs: { cx: "7.5", cy: "12", r: "1", fill: "#cc3340" }
+                      attrs: {
+                        cx: "7.5",
+                        cy: "12",
+                        r: "1",
+                        fill: "var(--vs-alert-error-icon)"
+                      }
                     })
@@ -333,17 +369,64 @@ ]
                   [
-                    _c("g", { attrs: { stroke: "#337fbd" } }, [
-                      _c("circle", {
-                        attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
-                      }),
-                      _vm._v(" "),
-                      _c("path", {
-                        attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
-                      })
-                    ]),
+                    _c(
+                      "g",
+                      { attrs: { stroke: "var(--vs-alert-info-icon)" } },
+                      [
+                        _c("circle", {
+                          attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
+                        }),
+                        _vm._v(" "),
+                        _c("path", {
+                          attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
+                        })
+                      ]
+                    ),
                     _vm._v(" "),
                     _c("circle", {
-                      attrs: { cx: "7.5", cy: "5", r: "1", fill: "#337fbd" }
+                      attrs: {
+                        cx: "7.5",
+                        cy: "5",
+                        r: "1",
+                        fill: "var(--vs-alert-info-icon)"
+                      }
                     })
                   ]
                 )
+              : _vm._e(),
+            _vm._v(" "),
+            _vm.type === "secondary"
+              ? _c(
+                  "svg",
+                  {
+                    attrs: {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16"
+                    }
+                  },
+                  [
+                    _c(
+                      "g",
+                      { attrs: { stroke: "var(--vs-alert-secondary-icon)" } },
+                      [
+                        _c("circle", {
+                          attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
+                        }),
+                        _vm._v(" "),
+                        _c("path", {
+                          attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
+                        })
+                      ]
+                    ),
+                    _vm._v(" "),
+                    _c("circle", {
+                      attrs: {
+                        cx: "7.5",
+                        cy: "5",
+                        r: "1",
+                        fill: "var(--vs-alert-secondary-icon)"
+                      }
+                    })
+                  ]
+                )
               : _vm._e()
@@ -355,7 +438,9 @@ ])
       _vm._v(" "),
-      _vm.title
-        ? _c("div", { staticClass: "vs-alert__heading" }, [
-            _vm._v(_vm._s(_vm.title))
-          ])
-        : _vm._e(),
+      _vm._t("title", [
+        _vm.title
+          ? _c("div", { staticClass: "vs-alert__heading" }, [
+              _vm._v(_vm._s(_vm.title))
+            ])
+          : _vm._e()
+      ]),
       _vm._v(" "),
@@ -411,3 +496,3 @@ _vm._t("default"),
     if (!inject) { return }
-    inject("data-v-fd565b66_0", { source: ".vs-alert {\n  position: relative;\n  border-radius: 4px;\n  padding: 12px 30px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 8px;\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: 8px;\n  right: 4px;\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: #186146;\n}\n.vs-alert-button.warning {\n  color: #ad5918;\n}\n.vs-alert-button.error {\n  color: #8c232c;\n}\n.vs-alert-button.info {\n  color: #1f73b7;\n}\n.vs-alert-success {\n  border: 1px solid #aecfc2;\n  background-color: #edf8f4;\n  color: #186146;\n}\n.vs-alert-warning {\n  border: 1px solid #fed6a8;\n  background-color: #fff7ed;\n  color: #ad5918;\n}\n.vs-alert-error {\n  border: 1px solid #f5b5ba;\n  background-color: #fff0f1;\n  color: #8c232c;\n}\n.vs-alert-info {\n  border: 1px solid #adcce4;\n  background-color: #edf7ff;\n  color: #1f73b7;\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: #038153;\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: #ad5918;\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: #cc3340;\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: #337fbd;\n}", map: undefined, media: undefined });
+    inject("data-v-6a90b54e_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: 12px 30px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 8px;\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: 8px;\n  right: 4px;\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--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 });
 
@@ -414,0 +499,0 @@ };

dist/vs-alert.min.js

@@ -1,1 +0,1 @@
-var VsAlert=function(e){"use strict";var t={name:"VsAlert",props:{type:{type:String,required:!0},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1}},computed:{classList:function(){return["vs-alert-"+this.type,{"vs-alert--no-bg":this.noBg}]}}};function n(e,t,n,r,o,s,a,i,l,c){"boolean"!=typeof a&&(l=i,i=a,a=!1);var d,p="function"==typeof n?n.options:n;if(e&&e.render&&(p.render=e.render,p.staticRenderFns=e.staticRenderFns,p._compiled=!0,o&&(p.functional=!0)),r&&(p._scopeId=r),s?(d=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__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},p._ssrRegister=d):t&&(d=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),d)if(p.functional){var v=p.render;p.render=function(e,t){return d.call(t),v(e,t)}}else{var u=p.beforeCreate;p.beforeCreate=u?[].concat(u,d):[d]}return n}var r,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(e){return function(e,t){return function(e,t){var n=o?t.media||"default":e,s=a[n]||(a[n]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(i),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,c=document.createTextNode(i),d=s.element.childNodes;d[l]&&s.element.removeChild(d[l]),d.length?s.element.insertBefore(c,d[l]):s.element.appendChild(c)}}}(e,t)}}var a={};var i=t,l=function(){var e=this,t=e.$createElement,n=e._self._c||t;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:"#038153"}},[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:"#ad5918","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:"#cc3340"}},[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:"#cc3340"}})]):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:"#337fbd"}},[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:"#337fbd"}})]):e._e()])],2),e._v(" "),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(t){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)};l._withStripped=!0;var c=n({render:l,staticRenderFns:[]},(function(e){e&&e("data-v-fd565b66_0",{source:".vs-alert {\n  position: relative;\n  border-radius: 4px;\n  padding: 12px 30px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 8px;\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: 8px;\n  right: 4px;\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: #186146;\n}\n.vs-alert-button.warning {\n  color: #ad5918;\n}\n.vs-alert-button.error {\n  color: #8c232c;\n}\n.vs-alert-button.info {\n  color: #1f73b7;\n}\n.vs-alert-success {\n  border: 1px solid #aecfc2;\n  background-color: #edf8f4;\n  color: #186146;\n}\n.vs-alert-warning {\n  border: 1px solid #fed6a8;\n  background-color: #fff7ed;\n  color: #ad5918;\n}\n.vs-alert-error {\n  border: 1px solid #f5b5ba;\n  background-color: #fff0f1;\n  color: #8c232c;\n}\n.vs-alert-info {\n  border: 1px solid #adcce4;\n  background-color: #edf7ff;\n  color: #1f73b7;\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: #038153;\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: #ad5918;\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: #cc3340;\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: #337fbd;\n}",map:void 0,media:void 0})}),i,void 0,!1,void 0,!1,s,void 0,void 0);function d(e){d.installed||(d.installed=!0,e.component("VsAlert",c))}var p={install:d},v=null;return"undefined"!=typeof window?v=window.Vue:"undefined"!=typeof global&&(v=global.Vue),v&&v.use(p),e.default=c,e.install=d,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}},computed:{classList:function(){return["vs-alert-"+this.type,{"vs-alert--no-bg":this.noBg}]}}};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-6a90b54e_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: 12px 30px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 8px;\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: 8px;\n  right: 4px;\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--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

@@ -66,2 +66,11 @@ (function (global, factory) {
   //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
 
@@ -253,13 +262,24 @@ var script = {
                     [
-                      _c("g", { attrs: { fill: "none", stroke: "#038153" } }, [
-                        _c("path", {
+                      _c(
+                        "g",
+                        {
                           attrs: {
-                            "stroke-linecap": "round",
-                            "stroke-linejoin": "round",
-                            d: "M4 9l2.5 2.5 5-5"
+                            fill: "none",
+                            stroke: "var(--vs-alert-success-icon)"
                           }
-                        }),
-                        _vm._v(" "),
-                        _c("circle", { attrs: { cx: "7.5", cy: "8.5", r: "7" } })
-                      ])
+                        },
+                        [
+                          _c("path", {
+                            attrs: {
+                              "stroke-linecap": "round",
+                              "stroke-linejoin": "round",
+                              d: "M4 9l2.5 2.5 5-5"
+                            }
+                          }),
+                          _vm._v(" "),
+                          _c("circle", {
+                            attrs: { cx: "7.5", cy: "8.5", r: "7" }
+                          })
+                        ]
+                      )
                     ]
@@ -284,3 +304,3 @@ )
                           fill: "none",
-                          stroke: "#ad5918",
+                          stroke: "var(--vs-alert-warning-icon)",
                           "stroke-linecap": "round",
@@ -311,12 +331,28 @@ d:
                     [
-                      _c("g", { attrs: { fill: "none", stroke: "#cc3340" } }, [
-                        _c("circle", { attrs: { cx: "7.5", cy: "8.5", r: "7" } }),
-                        _vm._v(" "),
-                        _c("path", {
-                          attrs: { "stroke-linecap": "round", d: "M7.5 4.5V9" }
-                        })
-                      ]),
+                      _c(
+                        "g",
+                        {
+                          attrs: {
+                            fill: "none",
+                            stroke: "var(--vs-alert-error-icon)"
+                          }
+                        },
+                        [
+                          _c("circle", {
+                            attrs: { cx: "7.5", cy: "8.5", r: "7" }
+                          }),
+                          _vm._v(" "),
+                          _c("path", {
+                            attrs: { "stroke-linecap": "round", d: "M7.5 4.5V9" }
+                          })
+                        ]
+                      ),
                       _vm._v(" "),
                       _c("circle", {
-                        attrs: { cx: "7.5", cy: "12", r: "1", fill: "#cc3340" }
+                        attrs: {
+                          cx: "7.5",
+                          cy: "12",
+                          r: "1",
+                          fill: "var(--vs-alert-error-icon)"
+                        }
                       })
@@ -339,17 +375,64 @@ ]
                     [
-                      _c("g", { attrs: { stroke: "#337fbd" } }, [
-                        _c("circle", {
-                          attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
-                        }),
-                        _vm._v(" "),
-                        _c("path", {
-                          attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
-                        })
-                      ]),
+                      _c(
+                        "g",
+                        { attrs: { stroke: "var(--vs-alert-info-icon)" } },
+                        [
+                          _c("circle", {
+                            attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
+                          }),
+                          _vm._v(" "),
+                          _c("path", {
+                            attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
+                          })
+                        ]
+                      ),
                       _vm._v(" "),
                       _c("circle", {
-                        attrs: { cx: "7.5", cy: "5", r: "1", fill: "#337fbd" }
+                        attrs: {
+                          cx: "7.5",
+                          cy: "5",
+                          r: "1",
+                          fill: "var(--vs-alert-info-icon)"
+                        }
                       })
                     ]
                   )
+                : _vm._e(),
+              _vm._v(" "),
+              _vm.type === "secondary"
+                ? _c(
+                    "svg",
+                    {
+                      attrs: {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 16 16"
+                      }
+                    },
+                    [
+                      _c(
+                        "g",
+                        { attrs: { stroke: "var(--vs-alert-secondary-icon)" } },
+                        [
+                          _c("circle", {
+                            attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
+                          }),
+                          _vm._v(" "),
+                          _c("path", {
+                            attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
+                          })
+                        ]
+                      ),
+                      _vm._v(" "),
+                      _c("circle", {
+                        attrs: {
+                          cx: "7.5",
+                          cy: "5",
+                          r: "1",
+                          fill: "var(--vs-alert-secondary-icon)"
+                        }
+                      })
+                    ]
+                  )
                 : _vm._e()
@@ -361,7 +444,9 @@ ])
         _vm._v(" "),
-        _vm.title
-          ? _c("div", { staticClass: "vs-alert__heading" }, [
-              _vm._v(_vm._s(_vm.title))
-            ])
-          : _vm._e(),
+        _vm._t("title", [
+          _vm.title
+            ? _c("div", { staticClass: "vs-alert__heading" }, [
+                _vm._v(_vm._s(_vm.title))
+              ])
+            : _vm._e()
+        ]),
         _vm._v(" "),
@@ -417,3 +502,3 @@ _vm._t("default"),
       if (!inject) { return }
-      inject("data-v-fd565b66_0", { source: ".vs-alert {\n  position: relative;\n  border-radius: 4px;\n  padding: 12px 30px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 8px;\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: 8px;\n  right: 4px;\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: #186146;\n}\n.vs-alert-button.warning {\n  color: #ad5918;\n}\n.vs-alert-button.error {\n  color: #8c232c;\n}\n.vs-alert-button.info {\n  color: #1f73b7;\n}\n.vs-alert-success {\n  border: 1px solid #aecfc2;\n  background-color: #edf8f4;\n  color: #186146;\n}\n.vs-alert-warning {\n  border: 1px solid #fed6a8;\n  background-color: #fff7ed;\n  color: #ad5918;\n}\n.vs-alert-error {\n  border: 1px solid #f5b5ba;\n  background-color: #fff0f1;\n  color: #8c232c;\n}\n.vs-alert-info {\n  border: 1px solid #adcce4;\n  background-color: #edf7ff;\n  color: #1f73b7;\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: #038153;\n}\n.vs-alert--no-bg.vs-alert-warning {\n  color: #ad5918;\n}\n.vs-alert--no-bg.vs-alert-error {\n  color: #cc3340;\n}\n.vs-alert--no-bg.vs-alert-info {\n  color: #337fbd;\n}", map: undefined, media: undefined });
+      inject("data-v-6a90b54e_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: 12px 30px;\n  line-height: 1.42857;\n  font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n  position: absolute;\n  left: 8px;\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: 8px;\n  right: 4px;\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--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 });
 
@@ -420,0 +505,0 @@ };

package.json

 {
   "name": "vs-alert",
-  "version": "1.2.78",
+  "version": "1.2.79",
   "description": "A simple vue alert. Perfect for all your alert scenarios.",
@@ -5,0 +5,0 @@ "main": "dist/vs-alert.umd.js",

README.md

@@ -24,3 +24,3 @@ # Vue Simple Alert
 
-<img src="./demo_image/image.png" width="600">
+<img src="https://raw.githubusercontent.com/ashwinkshenoy/vue-simple/master/packages/vs-alert/demo_image/image.png" width="600">
 
@@ -66,3 +66,3 @@ <br />
 ```javascript
-<script src="https://unpkg.com/vs-alert@1.2.77/dist/vs-alert.min.js"></script>
+<script src="https://unpkg.com/vs-alert@1.2.79/dist/vs-alert.min.js"></script>
 ```
@@ -128,8 +128,8 @@
 
-| Name      | Type    | Default | Description                                                 |
-| --------- | ------- | ------- | ----------------------------------------------------------- |
-| type      | String  | -       | Type of alert to be shown. (success, warning, error, info)  |
-| title     | String  | -       | The alert title (text only). For HTML, use the header slot. |
-| showClose | Boolean | false   | Show alert close icon                                       |
-| noBg      | Boolean | false   | Remove background color                                     |
+| 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                                                 |
+| noBg      | Boolean | false   | Remove background color                                               |
 
@@ -154,1 +154,2 @@ <br />
 | icon      | Slot to add custom icon for type              |
+| title     | Slot to add custom title                      |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

188991

increased by6.77%

Lines of code

1164

increased by19.14%

Number of lines in readme file

152

increased by0.66%

No dependency changes