Comparing version 1.3.17 to 1.3.18
@@ -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 @@ }; |
@@ -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}({}); |
@@ -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 @@ }; |
{ | ||
"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 <ashwinkshenoy@gmail.com>", | ||
@@ -56,3 +42,3 @@ "license": "MIT", | ||
"homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-alert", | ||
"gitHead": "e2a4c92aa9fbfacfffc908f8ba3af30c51098aa8" | ||
"gitHead": "66f1d390d6caa9ec346508de37813f5adff15efb" | ||
} |
151
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) |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
186193
10
4