@vuesimple/vs-alert 1.3.39 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/build/rollup.config.js +3 -4
- package/dist/vs-alert.esm.js +14 -13
- package/dist/vs-alert.min.js +1 -1
- package/dist/vs-alert.umd.js +14 -13
- package/package.json +4 -4
- package/src/vs-alert.vue +56 -18
package/README.md
CHANGED
|
@@ -76,7 +76,7 @@ yarn add @vuesimple/vs-alert
|
|
|
76
76
|
<br />
|
|
77
77
|
|
|
78
78
|
<h3>
|
|
79
|
-
<img src="https://
|
|
79
|
+
<img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
|
|
80
80
|
</h3>
|
|
81
81
|
|
|
82
82
|
Nuxt Code Snippet
|
|
@@ -129,6 +129,7 @@ After installation,
|
|
|
129
129
|
| title | String | - | The alert title (text only). For HTML, use the header slot. |
|
|
130
130
|
| showClose | Boolean | false | Show alert close icon |
|
|
131
131
|
| small | Boolean | false | Applies reduced padding |
|
|
132
|
+
| toast | Boolean | false | Applies toast design |
|
|
132
133
|
| noBg | Boolean | false | Remove background color |
|
|
133
134
|
|
|
134
135
|
<br />
|
package/build/rollup.config.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
// rollup.config.js
|
|
2
|
-
import vue from 'rollup-plugin-vue';
|
|
3
|
-
import buble from 'rollup-plugin-buble';
|
|
4
|
-
import image from '@rollup/plugin-image';
|
|
5
1
|
import { terser } from 'rollup-plugin-terser';
|
|
2
|
+
import buble from '@rollup/plugin-buble';
|
|
3
|
+
import image from '@rollup/plugin-image';
|
|
4
|
+
import vue from 'rollup-plugin-vue';
|
|
6
5
|
import minimist from 'minimist';
|
|
7
6
|
|
|
8
7
|
const argv = minimist(process.argv.slice(2));
|
package/dist/vs-alert.esm.js
CHANGED
|
@@ -108,11 +108,6 @@
|
|
|
108
108
|
//
|
|
109
109
|
//
|
|
110
110
|
//
|
|
111
|
-
//
|
|
112
|
-
//
|
|
113
|
-
//
|
|
114
|
-
//
|
|
115
|
-
//
|
|
116
111
|
|
|
117
112
|
var script = {
|
|
118
113
|
name: 'VsAlert',
|
|
@@ -122,6 +117,7 @@ var script = {
|
|
|
122
117
|
variant: {
|
|
123
118
|
type: String,
|
|
124
119
|
required: true,
|
|
120
|
+
validator: function (value) { return ['success', 'error', 'info', 'warning', 'secondary'].includes(value.toLowerCase()); },
|
|
125
121
|
},
|
|
126
122
|
showClose: {
|
|
127
123
|
type: Boolean,
|
|
@@ -138,11 +134,20 @@ var script = {
|
|
|
138
134
|
type: Boolean,
|
|
139
135
|
default: false,
|
|
140
136
|
},
|
|
137
|
+
toast: {
|
|
138
|
+
type: Boolean,
|
|
139
|
+
default: false,
|
|
140
|
+
},
|
|
141
141
|
},
|
|
142
142
|
|
|
143
143
|
computed: {
|
|
144
144
|
classList: function classList() {
|
|
145
|
-
return [
|
|
145
|
+
return [
|
|
146
|
+
("vs-alert-" + (this.variant)),
|
|
147
|
+
{ 'vs-alert--no-bg': this.noBg },
|
|
148
|
+
{ 'vs-alert--small': this.small },
|
|
149
|
+
{ 'vs-alert--toast': this.toast },
|
|
150
|
+
{ 'vs-alert--is-close': this.showClose } ];
|
|
146
151
|
},
|
|
147
152
|
},
|
|
148
153
|
};
|
|
@@ -495,11 +500,7 @@ var __vue_render__ = function() {
|
|
|
495
500
|
_c(
|
|
496
501
|
"div",
|
|
497
502
|
{ staticClass: "vs-alert__heading" },
|
|
498
|
-
[
|
|
499
|
-
_vm._t("title", [
|
|
500
|
-
_vm.title ? _c("div", [_vm._v(_vm._s(_vm.title))]) : _vm._e()
|
|
501
|
-
])
|
|
502
|
-
],
|
|
503
|
+
[_vm._t("title", [_vm.title ? [_vm._v(_vm._s(_vm.title))] : _vm._e()])],
|
|
503
504
|
2
|
|
504
505
|
),
|
|
505
506
|
_vm._v(" "),
|
|
@@ -510,7 +511,7 @@ var __vue_render__ = function() {
|
|
|
510
511
|
"button",
|
|
511
512
|
{
|
|
512
513
|
class: ["vs-alert-button", _vm.variant],
|
|
513
|
-
attrs: { "aria-label": "Close
|
|
514
|
+
attrs: { "aria-label": "Close" },
|
|
514
515
|
on: {
|
|
515
516
|
click: function($event) {
|
|
516
517
|
return _vm.$emit("close", true)
|
|
@@ -553,7 +554,7 @@ __vue_render__._withStripped = true;
|
|
|
553
554
|
/* style */
|
|
554
555
|
var __vue_inject_styles__ = function (inject) {
|
|
555
556
|
if (!inject) { return }
|
|
556
|
-
inject("data-v-
|
|
557
|
+
inject("data-v-b5696c94_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 20px 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 filter: brightness(85%);\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.vs-alert--small:not(.vs-alert--is-close) {\n padding: 12px 20px 12px 40px;\n}\n.vs-alert.vs-alert--is-close:not(.vs-alert--small) {\n padding: 20px 40px;\n}\n.vs-alert.vs-alert--is-close.vs-alert--small {\n padding: 12px 40px;\n}\n.vs-alert.vs-alert--is-close.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-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--toast {\n background-color: transparent;\n border: solid 1px #d8dcde;\n color: #2f3941;\n box-shadow: rgba(23, 73, 77, 0.15) 0px 20px 28px 0px;\n padding: 15px 40px;\n}\n.vs-alert--toast .vs-alert__heading {\n filter: brightness(100%);\n}\n.vs-alert--toast.vs-alert-success .vs-alert__heading {\n color: var(--vs-alert-success-icon);\n}\n.vs-alert--toast.vs-alert-warning .vs-alert__heading {\n color: var(--vs-alert-warning-icon);\n}\n.vs-alert--toast.vs-alert-error .vs-alert__heading {\n color: var(--vs-alert-error-icon);\n}\n.vs-alert--toast.vs-alert-info .vs-alert__heading {\n color: var(--vs-alert-info-icon);\n}\n.vs-alert--toast.vs-alert-secondary .vs-alert__heading {\n color: var(--vs-alert-secondary-icon);\n}\n.vs-alert--toast .vs-alert-button {\n color: #68737d;\n top: 10px;\n}", map: undefined, media: undefined });
|
|
557
558
|
|
|
558
559
|
};
|
|
559
560
|
/* scoped */
|
package/dist/vs-alert.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var VsAlert=function(e){"use strict";var r={name:"VsAlert",props:{variant:{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.variant,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small}]}}};function n(e,r,n,t,
|
|
1
|
+
var VsAlert=function(e){"use strict";var r={name:"VsAlert",props:{variant:{type:String,required:!0,validator:function(e){return["success","error","info","warning","secondary"].includes(e.toLowerCase())}},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList:function(){return["vs-alert-"+this.variant,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast},{"vs-alert--is-close":this.showClose}]}}};function n(e,r,n,t,s,a,o,l,i,c){"boolean"!=typeof o&&(i=l,l=o,o=!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,s&&(d.functional=!0)),t&&(d._scopeId=t),a?(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,i(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=v):r&&(v=o?function(e){r.call(this,c(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,s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function a(e){return function(e,r){return function(e,r){var n=s?r.media||"default":e,a=o[n]||(o[n]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.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))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",r.media&&a.element.setAttribute("media",r.media),void 0===t&&(t=document.head||document.getElementsByTagName("head")[0]),t.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(l),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{var i=a.ids.size-1,c=document.createTextNode(l),v=a.element.childNodes;v[i]&&a.element.removeChild(v[i]),v.length?a.element.insertBefore(c,v[i]):a.element.appendChild(c)}}}(e,r)}}var o={};var l=r,i=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.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[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.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[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.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[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.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[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.variant?n("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"}},[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(" "),n("div",{staticClass:"vs-alert__heading"},[e._t("title",[e.title?[e._v(e._s(e.title))]:e._e()])],2),e._v(" "),e._t("default"),e._v(" "),e.showClose?n("button",{class:["vs-alert-button",e.variant],attrs:{"aria-label":"Close"},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",role:"presentation",focusable:"false"}},[n("path",{attrs:{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"}})])]):e._e()],2)};i._withStripped=!0;var c=n({render:i,staticRenderFns:[]},(function(e){e&&e("data-v-b5696c94_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 20px 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 filter: brightness(85%);\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.vs-alert--small:not(.vs-alert--is-close) {\n padding: 12px 20px 12px 40px;\n}\n.vs-alert.vs-alert--is-close:not(.vs-alert--small) {\n padding: 20px 40px;\n}\n.vs-alert.vs-alert--is-close.vs-alert--small {\n padding: 12px 40px;\n}\n.vs-alert.vs-alert--is-close.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-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--toast {\n background-color: transparent;\n border: solid 1px #d8dcde;\n color: #2f3941;\n box-shadow: rgba(23, 73, 77, 0.15) 0px 20px 28px 0px;\n padding: 15px 40px;\n}\n.vs-alert--toast .vs-alert__heading {\n filter: brightness(100%);\n}\n.vs-alert--toast.vs-alert-success .vs-alert__heading {\n color: var(--vs-alert-success-icon);\n}\n.vs-alert--toast.vs-alert-warning .vs-alert__heading {\n color: var(--vs-alert-warning-icon);\n}\n.vs-alert--toast.vs-alert-error .vs-alert__heading {\n color: var(--vs-alert-error-icon);\n}\n.vs-alert--toast.vs-alert-info .vs-alert__heading {\n color: var(--vs-alert-info-icon);\n}\n.vs-alert--toast.vs-alert-secondary .vs-alert__heading {\n color: var(--vs-alert-secondary-icon);\n}\n.vs-alert--toast .vs-alert-button {\n color: #68737d;\n top: 10px;\n}",map:void 0,media:void 0})}),l,void 0,!1,void 0,!1,a,void 0,void 0);function v(e){v.installed||(v.installed=!0,e.component("VsAlert",c))}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=c,e.install=v,e}({});
|
package/dist/vs-alert.umd.js
CHANGED
|
@@ -114,11 +114,6 @@
|
|
|
114
114
|
//
|
|
115
115
|
//
|
|
116
116
|
//
|
|
117
|
-
//
|
|
118
|
-
//
|
|
119
|
-
//
|
|
120
|
-
//
|
|
121
|
-
//
|
|
122
117
|
|
|
123
118
|
var script = {
|
|
124
119
|
name: 'VsAlert',
|
|
@@ -128,6 +123,7 @@
|
|
|
128
123
|
variant: {
|
|
129
124
|
type: String,
|
|
130
125
|
required: true,
|
|
126
|
+
validator: function (value) { return ['success', 'error', 'info', 'warning', 'secondary'].includes(value.toLowerCase()); },
|
|
131
127
|
},
|
|
132
128
|
showClose: {
|
|
133
129
|
type: Boolean,
|
|
@@ -144,11 +140,20 @@
|
|
|
144
140
|
type: Boolean,
|
|
145
141
|
default: false,
|
|
146
142
|
},
|
|
143
|
+
toast: {
|
|
144
|
+
type: Boolean,
|
|
145
|
+
default: false,
|
|
146
|
+
},
|
|
147
147
|
},
|
|
148
148
|
|
|
149
149
|
computed: {
|
|
150
150
|
classList: function classList() {
|
|
151
|
-
return [
|
|
151
|
+
return [
|
|
152
|
+
("vs-alert-" + (this.variant)),
|
|
153
|
+
{ 'vs-alert--no-bg': this.noBg },
|
|
154
|
+
{ 'vs-alert--small': this.small },
|
|
155
|
+
{ 'vs-alert--toast': this.toast },
|
|
156
|
+
{ 'vs-alert--is-close': this.showClose } ];
|
|
152
157
|
},
|
|
153
158
|
},
|
|
154
159
|
};
|
|
@@ -501,11 +506,7 @@
|
|
|
501
506
|
_c(
|
|
502
507
|
"div",
|
|
503
508
|
{ staticClass: "vs-alert__heading" },
|
|
504
|
-
[
|
|
505
|
-
_vm._t("title", [
|
|
506
|
-
_vm.title ? _c("div", [_vm._v(_vm._s(_vm.title))]) : _vm._e()
|
|
507
|
-
])
|
|
508
|
-
],
|
|
509
|
+
[_vm._t("title", [_vm.title ? [_vm._v(_vm._s(_vm.title))] : _vm._e()])],
|
|
509
510
|
2
|
|
510
511
|
),
|
|
511
512
|
_vm._v(" "),
|
|
@@ -516,7 +517,7 @@
|
|
|
516
517
|
"button",
|
|
517
518
|
{
|
|
518
519
|
class: ["vs-alert-button", _vm.variant],
|
|
519
|
-
attrs: { "aria-label": "Close
|
|
520
|
+
attrs: { "aria-label": "Close" },
|
|
520
521
|
on: {
|
|
521
522
|
click: function($event) {
|
|
522
523
|
return _vm.$emit("close", true)
|
|
@@ -559,7 +560,7 @@
|
|
|
559
560
|
/* style */
|
|
560
561
|
var __vue_inject_styles__ = function (inject) {
|
|
561
562
|
if (!inject) { return }
|
|
562
|
-
inject("data-v-
|
|
563
|
+
inject("data-v-b5696c94_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 20px 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 filter: brightness(85%);\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.vs-alert--small:not(.vs-alert--is-close) {\n padding: 12px 20px 12px 40px;\n}\n.vs-alert.vs-alert--is-close:not(.vs-alert--small) {\n padding: 20px 40px;\n}\n.vs-alert.vs-alert--is-close.vs-alert--small {\n padding: 12px 40px;\n}\n.vs-alert.vs-alert--is-close.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-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--toast {\n background-color: transparent;\n border: solid 1px #d8dcde;\n color: #2f3941;\n box-shadow: rgba(23, 73, 77, 0.15) 0px 20px 28px 0px;\n padding: 15px 40px;\n}\n.vs-alert--toast .vs-alert__heading {\n filter: brightness(100%);\n}\n.vs-alert--toast.vs-alert-success .vs-alert__heading {\n color: var(--vs-alert-success-icon);\n}\n.vs-alert--toast.vs-alert-warning .vs-alert__heading {\n color: var(--vs-alert-warning-icon);\n}\n.vs-alert--toast.vs-alert-error .vs-alert__heading {\n color: var(--vs-alert-error-icon);\n}\n.vs-alert--toast.vs-alert-info .vs-alert__heading {\n color: var(--vs-alert-info-icon);\n}\n.vs-alert--toast.vs-alert-secondary .vs-alert__heading {\n color: var(--vs-alert-secondary-icon);\n}\n.vs-alert--toast .vs-alert-button {\n color: #68737d;\n top: 10px;\n}", map: undefined, media: undefined });
|
|
563
564
|
|
|
564
565
|
};
|
|
565
566
|
/* scoped */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuesimple/vs-alert",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "A simple vue alert. Perfect for all your alert scenarios.",
|
|
5
5
|
"main": "dist/vs-alert.umd.js",
|
|
6
6
|
"module": "dist/vs-alert.esm.js",
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vs-alert.min.js"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
+
"@rollup/plugin-buble": "0.21.3",
|
|
18
19
|
"@rollup/plugin-image": "2.0.5",
|
|
19
|
-
"minimist": "1.2.
|
|
20
|
+
"minimist": "1.2.5",
|
|
20
21
|
"rollup": "1.32.0",
|
|
21
|
-
"rollup-plugin-buble": "0.19.8",
|
|
22
22
|
"rollup-plugin-terser": "6.1.0",
|
|
23
23
|
"rollup-plugin-vue": "5.1.9",
|
|
24
24
|
"vue": "2.6.10",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"url": "https://github.com/ashwinkshenoy/vue-simple/issues"
|
|
53
53
|
},
|
|
54
54
|
"homepage": "https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-alert",
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "4a6fbd8716221364e5fc2710645a6c5882746929"
|
|
56
56
|
}
|
package/src/vs-alert.vue
CHANGED
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
<!-- Alert Heading -->
|
|
86
86
|
<div class="vs-alert__heading">
|
|
87
87
|
<slot name="title">
|
|
88
|
-
<
|
|
88
|
+
<template v-if="title">{{ title }}</template>
|
|
89
89
|
</slot>
|
|
90
90
|
</div>
|
|
91
91
|
|
|
@@ -93,12 +93,7 @@
|
|
|
93
93
|
<slot></slot>
|
|
94
94
|
|
|
95
95
|
<!-- Right close icon/button -->
|
|
96
|
-
<button
|
|
97
|
-
v-if="showClose"
|
|
98
|
-
:class="['vs-alert-button', variant]"
|
|
99
|
-
@click="$emit('close', true)"
|
|
100
|
-
aria-label="Close Alert"
|
|
101
|
-
>
|
|
96
|
+
<button v-if="showClose" :class="['vs-alert-button', variant]" @click="$emit('close', true)" aria-label="Close">
|
|
102
97
|
<svg
|
|
103
98
|
xmlns="http://www.w3.org/2000/svg"
|
|
104
99
|
width="12"
|
|
@@ -122,6 +117,7 @@
|
|
|
122
117
|
variant: {
|
|
123
118
|
type: String,
|
|
124
119
|
required: true,
|
|
120
|
+
validator: value => ['success', 'error', 'info', 'warning', 'secondary'].includes(value.toLowerCase()),
|
|
125
121
|
},
|
|
126
122
|
showClose: {
|
|
127
123
|
type: Boolean,
|
|
@@ -138,11 +134,21 @@
|
|
|
138
134
|
type: Boolean,
|
|
139
135
|
default: false,
|
|
140
136
|
},
|
|
137
|
+
toast: {
|
|
138
|
+
type: Boolean,
|
|
139
|
+
default: false,
|
|
140
|
+
},
|
|
141
141
|
},
|
|
142
142
|
|
|
143
143
|
computed: {
|
|
144
144
|
classList() {
|
|
145
|
-
return [
|
|
145
|
+
return [
|
|
146
|
+
`vs-alert-${this.variant}`,
|
|
147
|
+
{ 'vs-alert--no-bg': this.noBg },
|
|
148
|
+
{ 'vs-alert--small': this.small },
|
|
149
|
+
{ 'vs-alert--toast': this.toast },
|
|
150
|
+
{ 'vs-alert--is-close': this.showClose },
|
|
151
|
+
];
|
|
146
152
|
},
|
|
147
153
|
},
|
|
148
154
|
};
|
|
@@ -179,7 +185,7 @@
|
|
|
179
185
|
|
|
180
186
|
position: relative;
|
|
181
187
|
border-radius: 4px;
|
|
182
|
-
padding: 20px 40px;
|
|
188
|
+
padding: 20px 20px 20px 40px;
|
|
183
189
|
line-height: 1.42857;
|
|
184
190
|
font-size: 14px;
|
|
185
191
|
|
|
@@ -191,6 +197,7 @@
|
|
|
191
197
|
|
|
192
198
|
&__heading {
|
|
193
199
|
font-weight: 600;
|
|
200
|
+
filter: brightness(85%);
|
|
194
201
|
}
|
|
195
202
|
|
|
196
203
|
&-button {
|
|
@@ -252,11 +259,21 @@
|
|
|
252
259
|
color: var(--vs-alert-secondary-color);
|
|
253
260
|
}
|
|
254
261
|
|
|
255
|
-
|
|
256
|
-
padding: 12px 40px;
|
|
262
|
+
&#{$el}--small:not(#{$el}--is-close) {
|
|
263
|
+
padding: 12px 20px 12px 40px;
|
|
264
|
+
}
|
|
257
265
|
|
|
258
|
-
|
|
259
|
-
|
|
266
|
+
&#{$el}--is-close:not(#{$el}--small) {
|
|
267
|
+
padding: 20px 40px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
&#{$el}--is-close {
|
|
271
|
+
&#{$el}--small {
|
|
272
|
+
padding: 12px 40px;
|
|
273
|
+
|
|
274
|
+
#{$el}-button {
|
|
275
|
+
top: 8px;
|
|
276
|
+
}
|
|
260
277
|
}
|
|
261
278
|
}
|
|
262
279
|
|
|
@@ -271,21 +288,42 @@
|
|
|
271
288
|
margin-top: 0;
|
|
272
289
|
}
|
|
273
290
|
|
|
274
|
-
&#{$el}-success {
|
|
275
|
-
color: var(--vs-alert-success-icon);
|
|
276
|
-
}
|
|
277
291
|
&#{$el}-warning {
|
|
278
292
|
color: var(--vs-alert-warning-icon);
|
|
279
293
|
}
|
|
280
294
|
&#{$el}-error {
|
|
281
295
|
color: var(--vs-alert-error-icon);
|
|
282
296
|
}
|
|
283
|
-
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
&--toast {
|
|
300
|
+
background-color: transparent;
|
|
301
|
+
border: solid 1px #d8dcde;
|
|
302
|
+
color: #2f3941;
|
|
303
|
+
box-shadow: rgb(23 73 77 / 15%) 0px 20px 28px 0px;
|
|
304
|
+
padding: 15px 40px;
|
|
305
|
+
#{$el}__heading {
|
|
306
|
+
filter: brightness(100%);
|
|
307
|
+
}
|
|
308
|
+
&#{$el}-success #{$el}__heading {
|
|
309
|
+
color: var(--vs-alert-success-icon);
|
|
310
|
+
}
|
|
311
|
+
&#{$el}-warning #{$el}__heading {
|
|
312
|
+
color: var(--vs-alert-warning-icon);
|
|
313
|
+
}
|
|
314
|
+
&#{$el}-error #{$el}__heading {
|
|
315
|
+
color: var(--vs-alert-error-icon);
|
|
316
|
+
}
|
|
317
|
+
&#{$el}-info #{$el}__heading {
|
|
284
318
|
color: var(--vs-alert-info-icon);
|
|
285
319
|
}
|
|
286
|
-
&#{$el}-secondary {
|
|
320
|
+
&#{$el}-secondary #{$el}__heading {
|
|
287
321
|
color: var(--vs-alert-secondary-icon);
|
|
288
322
|
}
|
|
323
|
+
#{$el}-button {
|
|
324
|
+
color: #68737d;
|
|
325
|
+
top: 10px;
|
|
326
|
+
}
|
|
289
327
|
}
|
|
290
328
|
}
|
|
291
329
|
</style>
|