UNPKG

@netleak/vue-flash-message-test

Version:

Vue component for flash messages

2 lines (1 loc) 7.38 kB
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).vueFlashMessage={})}(this,(function(n){"use strict";var e={name:"flash-message",components:{},methods:{close:function(){var n=document.querySelector(".fm");n.style.opacity=0,setTimeout((function(){n.style.display="none"}),500)}}};function t(n,e,t,o,s,r,i,a,A,l){"boolean"!=typeof i&&(A=a,a=i,i=!1);const c="function"==typeof t?t.options:t;let f;if(n&&n.render&&(c.render=n.render,c.staticRenderFns=n.staticRenderFns,c._compiled=!0,s&&(c.functional=!0)),o&&(c._scopeId=o),r?(f=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,A(n)),n&&n._registeredComponents&&n._registeredComponents.add(r)},c._ssrRegister=f):e&&(f=i?function(n){e.call(this,l(n,this.$root.$options.shadowRoot))}:function(n){e.call(this,a(n))}),f)if(c.functional){const n=c.render;c.render=function(e,t){return f.call(t),n(e,t)}}else{const n=c.beforeCreate;c.beforeCreate=n?[].concat(n,f):[f]}return t}const o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(n){return(n,e)=>function(n,e){const t=o?e.media||"default":n,s=i[t]||(i[t]={ids:new Set,styles:[]});if(!s.ids.has(n)){s.ids.add(n);let t=e.source;if(e.map&&(t+="\n/*# sourceURL="+e.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",e.media&&s.element.setAttribute("media",e.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(t),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const n=s.ids.size-1,e=document.createTextNode(t),o=s.element.childNodes;o[n]&&s.element.removeChild(o[n]),o.length?s.element.insertBefore(e,o[n]):s.element.appendChild(e)}}}(n,e)}let r;const i={};const a=e;var A=function(){var n=this.$createElement,e=this._self._c||n;return e("div",{staticClass:"fm",attrs:{id:"flash-message"}},[e("span",{staticClass:"fm-close",on:{click:this.close}},[this._v("×")]),this._v(" "),e("span",{staticClass:"fm-title"},[this._t("title")],2),this._v(" "),e("span",{staticClass:"fm-content"},[this._t("message")],2)])};A._withStripped=!0;const l=t({render:A,staticRenderFns:[]},(function(n){n&&n("data-v-f1adf920_0",{source:'@charset "UTF-8";\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n.fm {\n padding: 20px;\n margin-bottom: 15px;\n transition: 0.5s ease-in-out;\n border: 1px solid #ddd;\n}\n.fm .fm-title {\n font-weight: bold;\n}\n.fm .fm-content:before {\n content: " ";\n}\n.fm.warning, .fm.danger, .fm.error, .fm.success, .fm.info {\n color: #FFF;\n}\n.fm.warning .fm-close, .fm.danger .fm-close, .fm.error .fm-close, .fm.success .fm-close, .fm.info .fm-close {\n color: #FFF;\n}\n.fm.warning {\n background-color: #FF9800;\n border-color: #FF9800;\n}\n.fm.danger, .fm.error {\n background-color: #F44336;\n border-color: #F44336;\n}\n.fm.success {\n background-color: #4CAF50;\n border-color: #4CAF50;\n}\n.fm.info {\n background-color: #2196F3;\n border-color: #2196F3;\n}\n.fm .fm-close {\n margin-left: 15px;\n font-weight: bold;\n font-size: 22px;\n line-height: 20px;\n cursor: pointer;\n float: right;\n transition: 0.3s;\n}\n.fm .fm-close:hover {\n color: #000;\n}\n\n/*# sourceMappingURL=flash-message.vue.map */',map:{version:3,sources:["flash-message.vue","C:\\laragon\\www\\_GIT\\vue-flash-mesage\\src\\flash-message.vue"],names:[],mappings:"AAAA,gBAAgB;ACkChB;EACA,SAAA;EACA,UAAA;EACA,sBAAA;ADhCA;ACmCA;EACA,aAAA;EACA,mBAAA;EACA,4BAAA;EACA,sBAAA;ADhCA;ACkCA;EACA,iBAAA;ADhCA;ACmCA;EACA,YAAA;ADjCA;ACoCA;EACA,WAAA;ADlCA;ACoCA;EACA,WAAA;ADlCA;ACsCA;EACA,yBAAA;EACA,qBAAA;ADpCA;ACuCA;EACA,yBAAA;EACA,qBAAA;ADrCA;ACwCA;EACA,yBAAA;EACA,qBAAA;ADtCA;ACyCA;EACA,yBAAA;EACA,qBAAA;ADvCA;AC0CA;EACA,iBAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;ADxCA;AC0CA;EACA,WAAA;ADxCA;;AAEA,4CAA4C",file:"flash-message.vue",sourcesContent:['@charset "UTF-8";\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.fm {\n padding: 20px;\n margin-bottom: 15px;\n transition: 0.5s ease-in-out;\n border: 1px solid #ddd;\n}\n.fm .fm-title {\n font-weight: bold;\n}\n.fm .fm-content:before {\n content: " ";\n}\n.fm.warning, .fm.danger, .fm.error, .fm.success, .fm.info {\n color: #FFF;\n}\n.fm.warning .fm-close, .fm.danger .fm-close, .fm.error .fm-close, .fm.success .fm-close, .fm.info .fm-close {\n color: #FFF;\n}\n.fm.warning {\n background-color: #FF9800;\n border-color: #FF9800;\n}\n.fm.danger, .fm.error {\n background-color: #F44336;\n border-color: #F44336;\n}\n.fm.success {\n background-color: #4CAF50;\n border-color: #4CAF50;\n}\n.fm.info {\n background-color: #2196F3;\n border-color: #2196F3;\n}\n.fm .fm-close {\n margin-left: 15px;\n font-weight: bold;\n font-size: 22px;\n line-height: 20px;\n cursor: pointer;\n float: right;\n transition: 0.3s;\n}\n.fm .fm-close:hover {\n color: #000;\n}\n\n/*# sourceMappingURL=flash-message.vue.map */','<template>\n <div id="flash-message" class="fm">\n\t<span class="fm-close" @click="close">&times;</span>\n\t<span class="fm-title">\n\t\t\x3c!-- Flash message title --\x3e\n\t\t<slot name="title"></slot>\n\t</span>\n\t<span class="fm-content">\n\t\t\x3c!-- Flash message content --\x3e\n\t\t<slot name="message"></slot>\n\t</span>\n </div>\n</template>\n\n<script>\nexport default {\n name: \'flash-message\',\n components: {\n },\n methods: {\n\tclose() {\n\t\tconst flashMessage = document.querySelector(\'.fm\')\n\n\t\tflashMessage.style.opacity = 0\n\n\t\tsetTimeout(() => {\n\t\t\tflashMessage.style.display = \'none\'\n\t\t}, 500)\n\t}\n }\n}\n<\/script>\n\n<style lang="scss">\n * {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n }\n \n .fm {\n\tpadding: 20px;\n\tmargin-bottom: 15px;\n\ttransition: .5s ease-in-out;\n\tborder: 1px solid #ddd;\n\n\t.fm-title {\n\t\tfont-weight: bold;\n\t}\n\n\t.fm-content:before {\n\t\tcontent: \'\\0000a0\';\n\t}\n\n\t&.warning, &.danger, &.error, &.success, &.info {\n\t\tcolor: #FFF;\n\n\t\t.fm-close {\n\t\t\tcolor: #FFF;\n\t\t}\n\t}\n\n\t&.warning {\n\t\tbackground-color: #FF9800;\n\t\tborder-color: #FF9800;\n\t}\n\n\t&.danger, &.error {\n\t\tbackground-color: #F44336;\n\t\tborder-color: #F44336;\n\t}\n\n\t&.success {\n\t\tbackground-color: #4CAF50;\n\t\tborder-color: #4CAF50;\n\t}\n\n\t&.info {\n\t\tbackground-color: #2196F3;\n\t\tborder-color: #2196F3;\n\t}\n\n\t.fm-close {\n\t\tmargin-left: 15px;\n\t\tfont-weight: bold;\n\t\tfont-size: 22px;\n\t\tline-height: 20px;\n\t\tcursor: pointer;\n\t\tfloat: right;\n\t\ttransition: .3s;\n\n\t\t&:hover {\n\t\t\tcolor: #000;\n\t\t}\n\t}\n }\n</style>\n']},media:void 0})}),a,void 0,!1,void 0,!1,s,void 0,void 0);function c(n){c.installed||(c.installed=!0,n.component("flash-message",l))}var f={install:c},d=null;"undefined"!=typeof window?d=window.Vue:"undefined"!=typeof global&&(d=global.Vue),d&&d.use(f),n.default=l,n.install=c,Object.defineProperty(n,"__esModule",{value:!0})}));