@netleak/vue-flash-message-test
Version:
Vue component for flash messages
235 lines (218 loc) • 11.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
name: 'flash-message',
components: {},
methods: {
close: function close() {
var flashMessage = document.querySelector('.fm');
flashMessage.style.opacity = 0;
setTimeout(function () {
flashMessage.style.display = 'none';
}, 500);
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
const isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
let code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
style.element.setAttribute('media', css.media);
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
const index = style.ids.size - 1;
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index])
style.element.removeChild(nodes[index]);
if (nodes.length)
style.element.insertBefore(textNode, nodes[index]);
else
style.element.appendChild(textNode);
}
}
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "fm", attrs: { id: "flash-message" } }, [
_c("span", { staticClass: "fm-close", on: { click: _vm.close } }, [
_vm._v("×")
]),
_vm._v(" "),
_c("span", { staticClass: "fm-title" }, [_vm._t("title")], 2),
_vm._v(" "),
_c("span", { staticClass: "fm-content" }, [_vm._t("message")], 2)
])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return
inject("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\">×</span>\n\t<span class=\"fm-title\">\n\t\t<!-- Flash message title -->\n\t\t<slot name=\"title\"></slot>\n\t</span>\n\t<span class=\"fm-content\">\n\t\t<!-- Flash message content -->\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: undefined });
};
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
createInjector,
undefined,
undefined
);
function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('flash-message', __vue_component__);
}
var plugin = {
install: install
};
var GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
exports.default = __vue_component__;
exports.install = install;