vue-coe-feedback
Version:
<h1 align="center">vue-coe-feedback ✅</h1>
357 lines (310 loc) • 13.3 kB
JavaScript
/*!
* vue-coe-feedback v0.1.5
* (c) 2019-present Vinicius Azevedo <viniazvd@gmail.com>
* Released under the MIT License.
*/
var feedbackFactory = function (context) {
return {
// getter
list: context.$store.getters.__feedbacks,
// actions
delay: function delay(delay$1) {
context.$store.dispatch('FEEDBACK_DELAY', delay$1);
},
add: function add(feedbacks) {
context.$store.dispatch('FEEDBACKS_ADD', feedbacks);
},
remove: function remove(feedback) {
context.$store.dispatch('FEEDBACK_REMOVE', feedback);
}
};
};
var state = {
feedbacks: [],
delay: 0
};
var getters = {
__feedbacks: function (ref) {
var feedbacks = ref.feedbacks;
return feedbacks;
},
__delay: function (ref) {
var delay = ref.delay;
return delay;
}
};
var mutations = {
SET_FEEDBACKS: function (state, feedbacks) { return state.feedbacks = feedbacks; },
SET_DELAY: function (state, delay) { return state.delay = delay; }
};
var actions = {
FEEDBACK_DELAY: function (ref, delay) {
var commit = ref.commit;
commit('SET_DELAY', delay);
},
FEEDBACKS_ADD: function (ref, payload) {
var commit = ref.commit;
var getters = ref.getters;
var dispatch = ref.dispatch;
var isError = payload instanceof Error;
var feedback = {
type: payload.type || isError && 'error',
message: payload.message || 'error message',
highlighted: payload.highlighted
};
commit('SET_FEEDBACKS', getters['__feedbacks'].concat( [feedback]));
setTimeout(function () {
dispatch('FEEDBACK_REMOVE', feedback);
}, getters['__delay']);
},
FEEDBACK_REMOVE: function (ref, payload) {
var commit = ref.commit;
var getters = ref.getters;
var feedbacks = getters['__feedbacks'].filter(function (feedback) { return feedback !== payload; });
commit('SET_FEEDBACKS', feedbacks);
}
};
var feedbackStore = {
state: state,
getters: getters,
mutations: mutations,
actions: actions
};
var registerStore = function (store, storeName) {
store.registerModule(storeName, Object.assign({}, feedbackStore));
};
var index = {
install: function install(Vue, store, options) {
if ( options === void 0 ) options = {};
if (!store) {
console.error('stack need store');
return false;
}
var storeName = options.storeName;
var delay = options.delay;
if (!storeName) { storeName = 'coefeedback'; }
if (!delay) { delay = 5000; }
registerStore(store, storeName, delay);
store.dispatch('FEEDBACK_DELAY', delay);
Object.defineProperty(Vue.prototype, '$feedback', {
get: function get() {
return feedbackFactory(this);
}
});
}
};
var colorValidator = function (color) {
var rule = /(^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$)/i;
return color.match(rule);
};
//
var script = {
props: {
feedbacks: {
type: Array,
default: function () { return []; }
},
info: {
type: String,
default: '#b4b4b4',
validator: function (color) { return colorValidator(color); }
},
success: {
type: String,
default: '#3CE798',
validator: function (color) { return colorValidator(color); }
},
error: {
type: String,
default: '#FF7EB3',
validator: function (color) { return colorValidator(color); }
}
},
computed: {
color: function color() {
return {
'--info': this.info,
'--success': this.success,
'--error': this.error
};
}
},
install: function install(Vue) {
Vue.component('CoeFeedback', this);
}
};
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"transition-group",
{ staticClass: "coe-feedbacks", attrs: { name: "feedback", tag: "ul" } },
[
_vm._t(
"feedbacks",
_vm._l(_vm.feedbacks, function(feedback, index) {
return _c(
"li",
{
key: index,
class: ["feedback", "-" + feedback.type],
style: _vm.color
},
[
_vm._t("message", [
_c("div", { staticClass: "message-container" }, [
_c("span", { staticClass: "message" }, [
_vm._v(_vm._s(feedback.message) + " ")
]),
_vm._v(" "),
_c("span", { staticClass: "highlighted" }, [
_vm._v(_vm._s(feedback.highlighted))
])
])
]),
_vm._v(" "),
_vm._t("button", [
_c(
"div",
{
staticClass: "button",
on: {
click: function($event) {
_vm.$emit("close", feedback);
}
}
},
[_c("div", { staticClass: "icon" }, [_vm._v("×")])]
)
])
],
2
)
}),
{
feedbacks: _vm.feedbacks,
info: _vm.info,
success: _vm.success,
error: _vm.error
}
)
],
2
)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-a2ada5b2_0", { source: "\n.feedback-enter-active,\n.feedback-leave-active {\n transition: all 0.3s;\n}\n.feedback-enter,\n.feedback-leave-to {\n opacity: 0;\n transform: translate(0, 100%);\n}\n.coe-feedbacks {\n position: fixed;\n left: 0;\n margin: 0;\n bottom: 0;\n padding: 0;\n width: 365px;\n z-index: 999;\n}\n.coe-feedbacks > .feedback {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n opacity: 0.9;\n min-height: 60px;\n margin-left: 20px;\n border-radius: 5px;\n margin-bottom: 10px;\n box-shadow: -1px -1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.coe-feedbacks > .feedback:last-child {\n margin-bottom: 0;\n}\n.coe-feedbacks > .feedback > .message-container {\n width: 285px;\n color: #fff;\n font-size: 14px;\n line-height: 19px;\n font-weight: bold;\n word-break: break-word;\n font-family: \"Nunito Sans\";\n text-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n margin-left: 20px;\n margin-top: 20px;\n margin-bottom: 20px;\n}\n.coe-feedbacks > .feedback > .button > .icon {\n margin-left: 15px;\n margin-right: 15px;\n}\n.coe-feedbacks > .feedback.-info {\n background-color: var(--info);\n}\n.coe-feedbacks > .feedback.-success {\n background-color: var(--success);\n}\n.coe-feedbacks > .feedback.-error {\n background-color: var(--error);\n}\n\n/*# sourceMappingURL=CoeFeedback.vue.map */", map: {"version":3,"sources":["/Users/convenia/Desktop/convenia-spa/vue-coe-feedback/src/components/CoeFeedback.vue","CoeFeedback.vue"],"names":[],"mappings":";AA2EA;;EACA,qBAAA;CAAA;AACA;;EACA,WAAA;EAAA,8BAAA;CAAA;AAEA;EACA,gBAAA;EACA,QAAA;EACA,UAAA;EACA,UAAA;EACA,WAAA;EACA,aAAA;EACA,aAAA;CAsCA;AA7CA;IAUA,cAAA;IACA,oBAAA;IACA,+BAAA;IAEA,YAAA;IACA,aAAA;IACA,iBAAA;IACA,kBAAA;IACA,mBAAA;IACA,oBAAA;IACA,+CAAA;CAwBA;AA5CA;MAsBA,iBAAA;CAAA;AAtBA;MAyBA,aAAA;MACA,YAAA;MACA,gBAAA;MACA,kBAAA;MACA,kBAAA;MACA,uBAAA;MACA,2BAAA;MACA,4CAAA;MACA,kBAAA;MAAA,iBAAA;MAAA,oBAAA;CAIA;AArCA;MAuCA,kBAAA;MAAA,mBAAA;CAAA;AAvCA;MA0CA,8BApDA;CAoDA;AA1CA;MA0CA,iCAnDA;CAmDA;AA1CA;MA0CA,+BAlDA;CAkDA;;ACtEA,2CAA2C","file":"CoeFeedback.vue","sourcesContent":[null,".feedback-enter-active,\n.feedback-leave-active {\n transition: all 0.3s; }\n\n.feedback-enter,\n.feedback-leave-to {\n opacity: 0;\n transform: translate(0, 100%); }\n\n.coe-feedbacks {\n position: fixed;\n left: 0;\n margin: 0;\n bottom: 0;\n padding: 0;\n width: 365px;\n z-index: 999; }\n .coe-feedbacks > .feedback {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n opacity: 0.9;\n min-height: 60px;\n margin-left: 20px;\n border-radius: 5px;\n margin-bottom: 10px;\n box-shadow: -1px -1px 4px 0 rgba(0, 0, 0, 0.2); }\n .coe-feedbacks > .feedback:last-child {\n margin-bottom: 0; }\n .coe-feedbacks > .feedback > .message-container {\n width: 285px;\n color: #fff;\n font-size: 14px;\n line-height: 19px;\n font-weight: bold;\n word-break: break-word;\n font-family: \"Nunito Sans\";\n text-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n margin-left: 20px;\n margin-top: 20px;\n margin-bottom: 20px; }\n .coe-feedbacks > .feedback > .button > .icon {\n margin-left: 15px;\n margin-right: 15px; }\n .coe-feedbacks > .feedback.-info {\n background-color: var(--info); }\n .coe-feedbacks > .feedback.-success {\n background-color: var(--success); }\n .coe-feedbacks > .feedback.-error {\n background-color: var(--error); }\n\n/*# sourceMappingURL=CoeFeedback.vue.map */"]}, media: undefined });
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* component normalizer */
function __vue_normalize__(
template, style, script$$1,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
var component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};
// For security concerns, we use only base name in production mode.
component.__file = "/Users/convenia/Desktop/convenia-spa/vue-coe-feedback/src/components/CoeFeedback.vue";
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) { component.functional = true; }
}
component._scopeId = scope;
{
var hook;
if (style) {
hook = function(context) {
style.call(this, createInjector(context));
};
}
if (hook !== undefined) {
if (component.functional) {
// register for functional component in vue file
var originalRender = component.render;
component.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context)
};
} else {
// inject component registration as beforeCreate hook
var existing = component.beforeCreate;
component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
}
return component
}
/* style inject */
function __vue_create_injector__() {
var head = document.head || document.getElementsByTagName('head')[0];
var styles = __vue_create_injector__.styles || (__vue_create_injector__.styles = {});
var isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
var code = css.source;
var index = style.ids.length;
style.ids.push(id);
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
var el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) { el.setAttribute('media', css.media); }
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
var textNode = document.createTextNode(code);
var 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); }
}
}
}
}
/* style inject SSR */
var CoeFeedback = __vue_normalize__(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
__vue_create_injector__,
undefined
)
export { index as VueCoeFeedback, CoeFeedback };