vue-basic-alert
Version:
Basic Vue Alert Component for basic use cases.
1 lines • 11.5 kB
JavaScript
var VueBasicAlert=function(e){"use strict";function n(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],a=!0,l=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){l=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(l)throw o}}return i}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return t(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var r=e.defineComponent({props:{icon:String,iconColor:{type:String,default:"#ffffff"},iconType:String,iconSize:Number},data:function(){return{viewBox:"0 -50 200 600"}},methods:{checkIcon:function(e){return this.icon==e},changeViewbox:function(){switch(this.icon){case"success":this.viewBox="0 0 512 512";break;case"close":case"error":this.viewBox="-89 0 500 500";break;case"info":this.viewBox="0 -50 180 600";break;case"warning":this.viewBox="0 -30 192 580"}}},created:function(){this.changeViewbox()},watch:{icon:function(){this.changeViewbox()}}}),o=["viewBox"],i=["stroke","fill","stroke-width"],a=["stroke","fill","stroke-width"],l=["stroke","fill","stroke-width"],c=["stroke","fill","stroke-width"],s=["stroke","fill","stroke-width"];r.render=function(n,t,r,u,d,p){return e.openBlock(),e.createElementBlock("svg",{style:e.normalizeStyle("height: "+.6*n.iconSize+"px; width: "+(.6*n.iconSize+2)+"px;"),xmlns:"http://www.w3.org/2000/svg",viewBox:n.viewBox,class:"icon-svg"},[n.checkIcon("success")?(e.openBlock(),e.createElementBlock("path",{key:0,stroke:n.iconColor,fill:"regular"==n.iconType?"transparent":n.iconColor,"stroke-width":"regular"==n.iconType?"40px":"0","stroke-alignment":"inside","stroke-linecap":"round","stroke-linejoin":"round",class:"",d:"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"},null,8,i)):e.createCommentVNode("",!0),n.checkIcon("info")?(e.openBlock(),e.createElementBlock("path",{key:1,stroke:n.iconColor,fill:"regular"==n.iconType?"transparent":n.iconColor,"stroke-width":"regular"==n.iconType?"50px":"0","stroke-alignment":"centre","stroke-linecap":"round","stroke-linejoin":"round",class:"",d:"M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z"},null,8,a)):e.createCommentVNode("",!0),n.checkIcon("error")?(e.openBlock(),e.createElementBlock("path",{key:2,stroke:n.iconColor,fill:"regular"==n.iconType?"transparent":n.iconColor,"stroke-width":"regular"==n.iconType?"30px":"0","stroke-alignment":"centre","stroke-linecap":"round","stroke-linejoin":"round",d:"M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"},null,8,l)):e.createCommentVNode("",!0),n.checkIcon("close")?(e.openBlock(),e.createElementBlock("path",{key:3,stroke:n.iconColor,fill:n.iconColor,"stroke-width":"regular"==n.iconType?"30px":"0","stroke-alignment":"outside","stroke-linecap":"round","stroke-linejoin":"round",d:"M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"},null,8,c)):e.createCommentVNode("",!0),n.checkIcon("warning")?(e.openBlock(),e.createElementBlock("path",{key:4,stroke:n.iconColor,fill:"regular"==n.iconType?"transparent":n.iconColor,"stroke-width":"regular"==n.iconType?"50px":"0","stroke-alignment":"centre","stroke-linecap":"round","stroke-linejoin":"round",d:"M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z"},null,8,s)):e.createCommentVNode("",!0)],12,o)};var u=e.defineComponent({name:"VueBasicAlert",props:{width:{type:Number},duration:{type:Number,default:300},closeIn:{type:Number,default:null}},components:{Icon:r},data:function(){return{position:"top right",status:!1,isHide:!1,iconSize:35,iconType:"solid",alertType:"info",header:"Some Information",message:"This is the information of something you may know"}},methods:{showAlert:function(e,n,t,r){var o=this;this.alertType=e,this.header=t||e.toUpperCase(),this.message=n,r?(this.position=r.position?r.position:"top right",this.iconSize=r.iconSize?r.iconSize:35,this.iconType="regular"===r.iconType?"regular":"solid"):this.iconType="solid",setTimeout((function(){o.status=!0}),50),this.closeIn&&setTimeout((function(){return o.closeAlert()}),this.closeIn)},closeAlert:function(){var e=this;this.isHide=!0,setTimeout((function(){e.isHide=!1,e.status=!1,e.iconSize=40,e.header="",e.message=""}),this.duration)}}}),d={class:"alert-container"},p={class:"alert-icon"},h={class:"alert-content"},f={class:"alert-head"},m={class:"alert-message"},g={class:"alert-close"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n:root {\n --success-green: #2aa36a;\n --info-blue: #2a79c2;\n --error-red: #eb4e2c;\n --warning-yellow: #ffc600;\n}\n.vue-alert * {\n font-family: Arial;\n}\n.vue-alert {\n position: fixed;\n display: block;\n margin: 0px;\n border: none;\n border-radius: 6px;\n opacity: 0;\n background: #fff;\n box-shadow: 0px 0px 16px 0px #d3d3d3;\n text-align: center;\n z-index: 1000000;\n padding: 10px;\n}\n.vue-alert.top {\n top: 20px;\n}\n.vue-alert.bottom {\n bottom: 20px;\n}\n.vue-alert.center {\n right: 50%;\n}\n.vue-alert.top.center {\n transform: translate(50%, -100%);\n max-width: calc(100vw - 60px);\n}\n.vue-alert.bottom.center {\n transform: translate(50%, 100%);\n max-width: calc(100vw - 60px);\n}\n.vue-alert.right {\n transform: translate(100%, 0px);\n max-width: calc(100vw - 60px);\n right: 20px;\n}\n.vue-alert.left {\n transform: translate(-100%, 0px);\n max-width: calc(100vw - 60px);\n left: 20px;\n}\n.vue-alert.active {\n opacity: 1;\n transform: translate(0px, 0px);\n}\n.vue-alert.center.active {\n opacity: 1;\n transform: translate(50%, 0%);\n}\n.vue-alert > .alert-container {\n display: flex;\n position: relative;\n width: 100%;\n}\n.vue-alert > .alert-container .alert-color-bar {\n min-height: 65px;\n height: auto;\n min-width: 5px;\n border-radius: 2px;\n margin-right: 10px;\n}\n.vue-alert > .alert-container .alert-icon {\n display: flex;\n margin: auto 16px auto 6px;\n}\n.vue-alert > .alert-container .alert-icon-box {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 100%;\n margin: auto;\n}\n.vue-alert > .alert-container .alert-content {\n display: flex;\n width: 100%;\n flex-direction: column;\n justify-content: center;\n}\n.vue-alert > .alert-container .alert-icon-box.success,\n.vue-alert > .alert-container .alert-color-bar.success {\n background-color: var(--success-green);\n}\n.vue-alert > .alert-container .alert-icon-box.info,\n.vue-alert > .alert-container .alert-color-bar.info {\n background-color: var(--info-blue);\n}\n.vue-alert > .alert-container .alert-icon-box.error,\n.vue-alert > .alert-container .alert-color-bar.error {\n background-color: var(--error-red);\n}\n.vue-alert > .alert-container .alert-icon-box.warning,\n.vue-alert > .alert-container .alert-color-bar.warning {\n background-color: var(--warning-yellow);\n}\n.vue-alert > .alert-container .alert-close {\n display: flex;\n margin: 0px 6px;\n}\n.vue-alert > .alert-container .alert-close-button {\n padding: 6px;\n margin: auto;\n border-radius: 18%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.vue-alert > .alert-container .alert-close-button:hover {\n background-color: #ffffff;\n filter: drop-shadow(0px 1px 3px gainsboro) brightness(0.95);\n}\n.vue-alert > .alert-container .alert-content > * {\n text-align: left;\n margin: 2px 4px;\n padding-right: 6px;\n}\n.vue-alert > .alert-container .alert-content > h5.alert-head {\n font-size: 16px;\n font-weight: 600;\n color: #4b4b4b;\n}\n.vue-alert > .alert-container .alert-content > p.alert-message {\n font-size: 14px;\n min-width: fit-content;\n font-weight: bold;\n line-height: 1.3;\n color: #bcbcbc;\n}\n"),u.render=function(n,t,r,o,i,a){var l=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vue-alert",n.status?"".concat(n.position?n.position:"top right"," ").concat(n.isHide?"":"active"):"".concat(n.position?n.position:"top right")]),style:e.normalizeStyle("width: ".concat(n.width?n.width:400,"px;transition: all ").concat(n.status?n.duration:0,"ms ease-in-out;"))},[e.createElementVNode("div",d,[e.createElementVNode("div",{class:e.normalizeClass(["alert-color-bar",n.alertType])},null,2),e.createElementVNode("div",p,[e.createElementVNode("div",{class:e.normalizeClass(["alert-icon-box",n.alertType]),style:e.normalizeStyle("width: "+n.iconSize+"px; height: "+n.iconSize+"px;")},[e.createVNode(l,{icon:n.alertType,iconSize:n.iconSize,iconType:n.iconType},null,8,["icon","iconSize","iconType"])],6)]),e.createElementVNode("div",h,[e.createElementVNode("h5",f,e.toDisplayString(n.header),1),e.createElementVNode("p",m,e.toDisplayString(n.message),1)]),e.createElementVNode("div",g,[e.createElementVNode("div",{onClick:t[0]||(t[0]=function(){return n.closeAlert&&n.closeAlert.apply(n,arguments)}),class:"alert-close-button",style:e.normalizeStyle("width: "+.6*n.iconSize+"px; height: "+.6*n.iconSize+"px;"+"transition: all ".concat(n.duration,"ms ease-in-out;"))},[e.createVNode(l,{icon:"close",style:{width:"100%"},iconColor:"#bbbbbb"})],4)])])],6)};var x=function(){var e=u;return e.install=function(n){n.component("VueBasicAlert",e)},e}(),v=Object.freeze({__proto__:null,default:x});return Object.entries(v).forEach((function(e){var t=n(e,2),r=t[0],o=t[1];"default"!==r&&(x[r]=o)})),x}(Vue);