vue-basic-alert
Version:
Basic Vue Alert Component for basic use cases.
347 lines (316 loc) • 16.2 kB
JavaScript
;var vue=require('vue');function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}var script$1 = vue.defineComponent({
props: {
icon: String,
iconColor: {
type: String,
default: "#ffffff"
},
iconType: String,
iconSize: Number
},
data: function data() {
return {
viewBox: "0 -50 200 600"
};
},
methods: {
checkIcon: function checkIcon(iconToCheck) {
if (this.icon == iconToCheck) return true;
return false;
},
changeViewbox: function 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: function created() {
this.changeViewbox();
},
watch: {
icon: function icon() {
this.changeViewbox();
}
}
});var _hoisted_1$1 = ["viewBox"];
var _hoisted_2$1 = ["stroke", "fill", "stroke-width"];
var _hoisted_3$1 = ["stroke", "fill", "stroke-width"];
var _hoisted_4$1 = ["stroke", "fill", "stroke-width"];
var _hoisted_5$1 = ["stroke", "fill", "stroke-width"];
var _hoisted_6$1 = ["stroke", "fill", "stroke-width"];
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("svg", {
style: vue.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') ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true), _ctx.checkIcon('info') ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true), _ctx.checkIcon('error') ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true), _ctx.checkIcon('close') ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true), _ctx.checkIcon('warning') ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true)], 12, _hoisted_1$1);
}script$1.render = render$1;var script = vue.defineComponent({
name: 'VueBasicAlert',
props: {
width: {
type: Number
},
duration: {
type: Number,
default: 300
},
closeIn: {
type: Number,
default: null
}
},
components: {
Icon: script$1
},
data: function 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: function showAlert(alertType, alertMessage, alertHeader, options) {
var _this = this;
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(function () {
_this.status = true;
}, 50);
if (this.closeIn) {
setTimeout(function () {
return _this.closeAlert();
}, this.closeIn);
}
},
closeAlert: function closeAlert() {
var _this2 = this;
this.isHide = true;
setTimeout(function () {
_this2.isHide = false;
_this2.status = false;
_this2.iconSize = 40;
_this2.header = '';
_this2.message = '';
}, this.duration);
}
}
});var _hoisted_1 = {
class: "alert-container"
};
var _hoisted_2 = {
class: "alert-icon"
};
var _hoisted_3 = {
class: "alert-content"
};
var _hoisted_4 = {
class: "alert-head"
};
var _hoisted_5 = {
class: "alert-message"
};
var _hoisted_6 = {
class: "alert-close"
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_Icon = vue.resolveComponent("Icon");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["vue-alert", !_ctx.status ? "".concat(_ctx.position ? _ctx.position : 'top right') : "".concat(_ctx.position ? _ctx.position : 'top right', " ").concat(_ctx.isHide ? '' : 'active')]),
style: vue.normalizeStyle("width: ".concat(_ctx.width ? _ctx.width : 400, "px;transition: all ").concat(_ctx.status ? _ctx.duration : 0, "ms ease-in-out;"))
}, [vue.createElementVNode("div", _hoisted_1, [vue.createElementVNode("div", {
class: vue.normalizeClass(["alert-color-bar", _ctx.alertType])
}, null, 2), vue.createElementVNode("div", _hoisted_2, [vue.createElementVNode("div", {
class: vue.normalizeClass(["alert-icon-box", _ctx.alertType]),
style: vue.normalizeStyle('width: ' + _ctx.iconSize + 'px; height: ' + _ctx.iconSize + 'px;')
}, [vue.createVNode(_component_Icon, {
icon: _ctx.alertType,
iconSize: _ctx.iconSize,
iconType: _ctx.iconType
}, null, 8, ["icon", "iconSize", "iconType"])], 6)]), vue.createElementVNode("div", _hoisted_3, [vue.createElementVNode("h5", _hoisted_4, vue.toDisplayString(_ctx.header), 1), vue.createElementVNode("p", _hoisted_5, vue.toDisplayString(_ctx.message), 1)]), vue.createElementVNode("div", _hoisted_6, [vue.createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = function () {
return _ctx.closeAlert && _ctx.closeAlert.apply(_ctx, arguments);
}),
class: "alert-close-button",
style: vue.normalizeStyle('width: ' + _ctx.iconSize * 0.6 + 'px; height: ' + _ctx.iconSize * 0.6 + 'px;' + "transition: all ".concat(_ctx.duration, "ms ease-in-out;"))
}, [vue.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
// Default export is installable instance of component.
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Assign InstallableComponent type
var installable = script; // Attach install function executed by Vue.use()
installable.install = function (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;
var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== 'default') component[exportName] = exported;
});module.exports=component;