vue-basic-alert
Version:
Basic Vue Alert Component for basic use cases.
305 lines (268 loc) • 13.8 kB
JavaScript
import { defineComponent, openBlock, createElementBlock, normalizeStyle, createCommentVNode, resolveComponent, normalizeClass, createElementVNode, createVNode, toDisplayString } from 'vue';
var script$1 = defineComponent({
props: {
icon: String,
iconColor: {
type: String,
default: "#ffffff"
},
iconType: String,
iconSize: Number
},
data() {
return {
viewBox: "0 -50 200 600"
};
},
methods: {
checkIcon(iconToCheck) {
if (this.icon == iconToCheck) return true;
return false;
},
changeViewbox() {
switch (this.icon) {
case "success":
{
this.viewBox = "0 0 512 512";
break;
}
case "close":
{
this.viewBox = "-89 0 500 500";
break;
}
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";
break;
}
}
}
},
created() {
this.changeViewbox();
},
watch: {
icon() {
this.changeViewbox();
}
}
});
const _hoisted_1$1 = ["viewBox"];
const _hoisted_2$1 = ["stroke", "fill", "stroke-width"];
const _hoisted_3$1 = ["stroke", "fill", "stroke-width"];
const _hoisted_4$1 = ["stroke", "fill", "stroke-width"];
const _hoisted_5$1 = ["stroke", "fill", "stroke-width"];
const _hoisted_6$1 = ["stroke", "fill", "stroke-width"];
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("svg", {
style: normalizeStyle('height: ' + _ctx.iconSize * 0.6 + 'px; width: ' + (_ctx.iconSize * 0.6 + 2) + 'px;'),
xmlns: "http://www.w3.org/2000/svg",
viewBox: _ctx.viewBox,
class: "icon-svg"
}, [_ctx.checkIcon('success') ? (openBlock(), createElementBlock("path", {
key: 0,
stroke: _ctx.iconColor,
fill: _ctx.iconType == 'regular' ? 'transparent' : _ctx.iconColor,
"stroke-width": _ctx.iconType == 'regular' ? '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, _hoisted_2$1)) : createCommentVNode("", true), _ctx.checkIcon('info') ? (openBlock(), createElementBlock("path", {
key: 1,
stroke: _ctx.iconColor,
fill: _ctx.iconType == 'regular' ? 'transparent' : _ctx.iconColor,
"stroke-width": _ctx.iconType == 'regular' ? '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, _hoisted_3$1)) : createCommentVNode("", true), _ctx.checkIcon('error') ? (openBlock(), createElementBlock("path", {
key: 2,
stroke: _ctx.iconColor,
fill: _ctx.iconType == 'regular' ? 'transparent' : _ctx.iconColor,
"stroke-width": _ctx.iconType == 'regular' ? '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, _hoisted_4$1)) : createCommentVNode("", true), _ctx.checkIcon('close') ? (openBlock(), createElementBlock("path", {
key: 3,
stroke: _ctx.iconColor,
fill: _ctx.iconColor,
"stroke-width": _ctx.iconType == 'regular' ? '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, _hoisted_5$1)) : createCommentVNode("", true), _ctx.checkIcon('warning') ? (openBlock(), createElementBlock("path", {
key: 4,
stroke: _ctx.iconColor,
fill: _ctx.iconType == 'regular' ? 'transparent' : _ctx.iconColor,
"stroke-width": _ctx.iconType == 'regular' ? '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, _hoisted_6$1)) : createCommentVNode("", true)], 12, _hoisted_1$1);
}
script$1.render = render$1;
var script = defineComponent({
name: 'VueBasicAlert',
props: {
width: {
type: Number
},
duration: {
type: Number,
default: 300
},
closeIn: {
type: Number,
default: null
}
},
components: {
Icon: script$1
},
data() {
return {
position: "top right",
status: false,
isHide: false,
iconSize: 35,
iconType: 'solid',
alertType: 'info',
header: 'Some Information',
message: 'This is the information of something you may know'
};
},
methods: {
showAlert(alertType, alertMessage, alertHeader, options) {
this.alertType = alertType;
this.header = alertHeader ? alertHeader : alertType.toUpperCase();
this.message = alertMessage;
if (options) {
this.position = options.position ? options.position : "top right";
this.iconSize = options.iconSize ? options.iconSize : 35;
this.iconType = options.iconType === "regular" ? "regular" : "solid";
} else {
this.iconType = "solid";
}
setTimeout(() => {
this.status = true;
}, 50);
if (this.closeIn) {
setTimeout(() => this.closeAlert(), this.closeIn);
}
},
closeAlert() {
this.isHide = true;
setTimeout(() => {
this.isHide = false;
this.status = false;
this.iconSize = 40;
this.header = '';
this.message = '';
}, this.duration);
}
}
});
const _hoisted_1 = {
class: "alert-container"
};
const _hoisted_2 = {
class: "alert-icon"
};
const _hoisted_3 = {
class: "alert-content"
};
const _hoisted_4 = {
class: "alert-head"
};
const _hoisted_5 = {
class: "alert-message"
};
const _hoisted_6 = {
class: "alert-close"
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Icon = resolveComponent("Icon");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["vue-alert", !_ctx.status ? `${_ctx.position ? _ctx.position : 'top right'}` : `${_ctx.position ? _ctx.position : 'top right'} ${_ctx.isHide ? '' : 'active'}`]),
style: normalizeStyle(`width: ${_ctx.width ? _ctx.width : 400}px;transition: all ${_ctx.status ? _ctx.duration : 0}ms ease-in-out;`)
}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
class: normalizeClass(["alert-color-bar", _ctx.alertType])
}, null, 2), createElementVNode("div", _hoisted_2, [createElementVNode("div", {
class: normalizeClass(["alert-icon-box", _ctx.alertType]),
style: normalizeStyle('width: ' + _ctx.iconSize + 'px; height: ' + _ctx.iconSize + 'px;')
}, [createVNode(_component_Icon, {
icon: _ctx.alertType,
iconSize: _ctx.iconSize,
iconType: _ctx.iconType
}, null, 8, ["icon", "iconSize", "iconType"])], 6)]), createElementVNode("div", _hoisted_3, [createElementVNode("h5", _hoisted_4, toDisplayString(_ctx.header), 1), createElementVNode("p", _hoisted_5, toDisplayString(_ctx.message), 1)]), createElementVNode("div", _hoisted_6, [createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = function () {
return _ctx.closeAlert && _ctx.closeAlert(...arguments);
}),
class: "alert-close-button",
style: normalizeStyle('width: ' + _ctx.iconSize * 0.6 + 'px; height: ' + _ctx.iconSize * 0.6 + 'px;' + `transition: all ${_ctx.duration}ms ease-in-out;`)
}, [createVNode(_component_Icon, {
icon: "close",
style: {
"width": "100%"
},
iconColor: '#bbbbbb'
})], 4)])])], 6);
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "\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";
styleInject(css_248z);
script.render = render;
// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var entry_esm = /*#__PURE__*/(() => {
// Assign InstallableComponent type
const installable = script; // Attach install function executed by Vue.use()
installable.install = app => {
app.component('VueBasicAlert', installable);
};
return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;
export { entry_esm as default };