@sysvale/show 0.3.0 → 1.0.0

package/README.md

@@ -1,3 +1,7 @@
+![SHOW logo](/assets/show-logo.webp)
+
+Atenção: Se deseja utilizar o SHOW em projetos com Vue 2, utilize a versão `0.3.0` ou inferior.
+
 ## Instalando
 
 - O SHOW pode ser instalado com o npm:

package/dist/@sysvale/show.esm.js

@@ -1,8 +1,10 @@
+import { h } from 'vue';
 import swal from 'sweetalert2';
 import get from 'lodash.get';
 import camelCase from 'lodash.camelcase';
 import isObject from 'lodash.isobject';
 import snakeCase from 'lodash.snakecase';
+import keyBy from 'lodash.keyby';
 
 var isArray = function (arg) { return Array.isArray(arg); };
 
@@ -50,6 +52,18 @@ var convertKeysToSnakeCase = function (data) {
 	return newData;
 };
 
+function generateKey(length) {
+	if ( length === void 0 ) length = 8;
+
+	var result = '';
+	var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	var charactersLength = characters.length;
+	for (var i = 0; i < length; i += 1) {
+		result += characters.charAt(Math.floor(Math.random() * charactersLength));
+	}
+	return result;
+}
+
 function getFirstErrorMessage(response, fallbackMsg) {
 	if ( fallbackMsg === void 0 ) fallbackMsg = 'Não conseguimos processar sua requisição. Tente novamente.';
 
@@ -78,7 +92,17 @@ var ERROR_SWAL_DEFAULT_CONFIG = {
 };
 
 var script = {
+	inject: ['$_requestObserver'],
+	emits: ['success', 'error', 'success-feedback-ok', 'error-feedback-ok', 'success-feedback-cancel', 'error-feedback-cancel'],
 	props: {
+		vid: {
+			type: String,
+			default: function () { return generateKey(); },
+		},
+		tag: {
+			type: String,
+			default: 'div',
+		},
 		service: {
 			type: Function,
 			required: true,
@@ -142,6 +166,18 @@ var script = {
 		};
 	},
 
+	computed: {
+		requestState: function requestState() {
+			return {
+				loading: this.loading,
+				failed: this.failed,
+				succeeded: this.succeeded,
+				error: this.error,
+				data: this.data,
+			};
+		}
+	},
+
 	watch: {
 		forceResetError: function forceResetError(newValue) {
 			if (newValue) {
@@ -156,6 +192,18 @@ var script = {
 		}
 	},
 
+	created: function created() {
+		if(this.$_requestObserver) {
+			this.$_requestObserver.subscribe(this);
+		}
+	},
+
+	beforeDestroy: function beforeDestroy() {
+		if(this.$_requestObserver) {
+			this.$_requestObserver.unsubscribe(this);
+		}
+	},
+
 	methods: {
 		action: function action(payloadFromArgs) {
 			var this$1 = this;
@@ -216,7 +264,7 @@ var script = {
 				});
 		},
 
-		labelHelper: function labelHelper(label, loadingLabel) {
+		loadingTextResolver: function loadingTextResolver(label, loadingLabel) {
 			if ( loadingLabel === void 0 ) loadingLabel = 'Carregando...';
 
 			if (this.loading) {
@@ -234,22 +282,16 @@ var script = {
 	},
 
 	render: function render() {
-		var slotProvider = this.$slots || this.$scopedSlots;
-		var slot = slotProvider.default({
-			loading: this.loading,
-			failed: this.failed,
-			succeeded: this.succeeded,
-			error: this.error,
-			data: this.data,
-			action: this.action,
-			labelHelper: this.labelHelper,
+		var slotProvider = this.$slots;
+		var slot = slotProvider.default(Object.assign({}, this.requestState,
+			{action: this.action,
+			loadingTextResolver: this.loadingTextResolver,
 			errorMessage: getFirstErrorMessage(
 				get(this.error, 'response.data', null),
 				'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
-			),
-		});
+			)}));
 
-		return Array.isArray(slot) ? slot[0] : slot;
+		return h(this.tag, slot);
 	},
 };
 
@@ -362,11 +404,181 @@ var __vue_script__ = script;
     undefined
   );
 
+var booleanReduceByProp = function (arr, prop, operator, defaultValue) {
+	if ( operator === void 0 ) operator = '||';
+	if ( defaultValue === void 0 ) defaultValue = false;
+
+	return arr.reduce(function (acc, item) {
+	if(operator === '||') {
+		return acc || item[prop];
+	} else if(operator === '&&') {
+		return acc && item[prop];
+	}
+}, defaultValue);
+};
+
+var script$1 = {
+	emits: ['success', 'error'],
+	props: {
+		vid: {
+			type: String,
+			default: function () { return generateKey(); },
+		},
+		tag: {
+			type: String,
+			default: 'div',
+		},
+	},
+	data: function data() {
+		return {
+			providers: [],
+			providersVids: {},
+		};
+	},
+	provide: function provide() {
+		return {
+			$_requestObserver: this,
+		}
+	},
+
+	computed: {
+		context: function context() {
+			return {
+				vid: this.vid,
+				loading: booleanReduceByProp(this.providers, 'loading'),
+				failed: booleanReduceByProp(this.providers, 'failed'),
+				succeeded: booleanReduceByProp(this.providers, 'succeeded', '&&', true),
+				errors: keyBy(this.providers.filter(function (ref) {
+					var failed = ref.failed;
+
+					return failed;
+			}).map(function (ref) {
+					var error = ref.error;
+					var vid = ref.vid;
+
+					return ({ error: error, vid: vid });
+			}), 'vid'),
+				providerRequestState: this.providerRequestState,
+				loadingTextResolver: this.loadingTextResolver,
+			};
+		},
+
+		providerRequestState: function providerRequestState() {
+			var this$1 = this;
+
+			return function (vid) {
+				var element  = this$1.providers.find(function (ref) {
+					var providerVid = ref.vid;
+
+					return providerVid === vid;
+				});
+				return element ? element.requestState : {
+					loading: false,
+					failed: false,
+					succeeded: false,
+					error: null,
+					data: null,
+				};
+			}
+		},
+
+		loadingTextResolver: function loadingTextResolver() {
+			var this$1 = this;
+
+			return function (label, loadingLabel) {
+				if ( loadingLabel === void 0 ) loadingLabel = 'Carregando...';
+
+				if (this$1.context.loading) {
+					return loadingLabel;
+				}
+				return label;
+			}
+		},
+	},
+
+	watch: {
+		'context.succeeded': {
+			handler: function handler(newValue) {
+				if (newValue) {
+					this.$emit('success', this.context);
+				}
+			},
+		},
+		'context.failed': {
+			handler: function handler(newValue) {
+				if (newValue) {
+					this.$emit('error', this.context);
+				}
+			},
+		},
+	},
+
+	render: function render() {
+		var slotProvider = this.$slots;
+		var slot = slotProvider.default(this.context);
+		return h(this.tag, slot);
+	},
+
+	methods: {
+		subscribe: function subscribe(provider) {
+			if(!this.providersVids[provider.vid]) {
+				this.providersVids[provider.vid] = true;
+				this.providers.push(provider);
+			} else {
+				throw new Error(("Provider não reigistrado no observer! Já existe um provider com o vid >> " + (provider.vid) + " <<"));
+			}
+		},
+		unsubscribe: function unsubscribe(provider) {
+			delete this.providersVids[provider.vid];
+			this.providers.filter(function (ref) {
+				var vid = ref.vid;
+
+				return vid !== provider.vid;
+			});
+		},
+	},
+};
+
+/* script */
+var __vue_script__$1 = script$1;
+
+/* template */
+
+  /* style */
+  var __vue_inject_styles__$1 = undefined;
+  /* scoped */
+  var __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  var __vue_is_functional_template__$1 = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    {},
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
 
 
 var components = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	RequestProvider: __vue_component__
+	RequestProvider: __vue_component__,
+	RequestObserver: __vue_component__$1
 });
 
 function removeAccents(str) {
@@ -393,18 +605,6 @@ function removeAccents(str) {
 	return newStr;
 }
 
-function generateKey(length) {
-	if ( length === void 0 ) length = 8;
-
-	var result = '';
-	var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	var charactersLength = characters.length;
-	for (var i = 0; i < length; i += 1) {
-		result += characters.charAt(Math.floor(Math.random() * charactersLength));
-	}
-	return result;
-}
-
 var utils = {
 	$showConvertKeysToCamelCase: convertKeysToCamelCase,
 	$showConvertKeysToSnakeCase: convertKeysToSnakeCase,
@@ -421,9 +621,7 @@ function install(app) {
 	var version = Number(app.version.split('.')[0]);
 
 	if (version <= 2) {
-		Object.keys(utils).forEach(function (key) {
-			app.prototype[key] = utils[key];
-		});
+		throw new Error('Essa versão só é compatível com projetos que possuem o Vue 3. Para projetos com a Vue 2, utilize a versão 0.3.0 ou inferior');
 	}
 
 	if (version > 2) {
@@ -461,4 +659,4 @@ if (GlobalVue) {
 }
 
 export default plugin;
-export { __vue_component__ as RequestProvider };
+export { __vue_component__$1 as RequestObserver, __vue_component__ as RequestProvider };

package/dist/@sysvale/show.min.js

@@ -1 +1 @@
-var SHOW=function(e,t,r,o,n,a){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a;var i=function(e){return Array.isArray(e)},s=function(e){if(i(e))return e.map((function(e){return n(e)||i(e)?s(e):e}));var t={};return Object.keys(e).forEach((function(r){n(e[r])||i(e[r])?t[o(r)]=s(e[r]):t[o(r)]=e[r]})),t},c=function(e){return Array.isArray(e)},u=function(e){if(c(e))return e.map((function(e){return n(e)||c(e)?u(e):e}));var t={};return Object.keys(e).forEach((function(r){n(e[r])||c(e[r])?t[a(r)]=u(e[r]):t[a(r)]=e[r]})),t};function l(e,t){void 0===t&&(t="Não conseguimos processar sua requisição. Tente novamente.");var o=r(e,"errors",!1);return o&&o[Object.keys(o)[0]][0]||t}var d={title:"Informações salvas com sucesso!",icon:"success",text:"",showCloseButton:!0,confirmButtonText:"Ok"},f={icon:"error",title:"Erro",text:"mensagem de error",showCancelButton:!0,showConfirmButton:!1,cancelButtonText:"Fechar"};function p(e,t,r,o,n,a,i,s,c,u){"boolean"!=typeof i&&(c=s,s=i,i=!1);var l,d="function"==typeof r?r.options:r;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,n&&(d.functional=!0)),o&&(d._scopeId=o),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=l):t&&(l=i?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(d.functional){var f=d.render;d.render=function(e,t){return l.call(t),f(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,l):[l]}return r}var h=p({},void 0,{props:{service:{type:Function,required:!0},payload:{type:Object,default:function(){return{}}},payloadResolver:{type:Function,default:function(e){return u(e)}},dataResolver:{type:Function,default:function(e){return s(e)}},successSwalConfig:{type:Object,default:function(){return d}},errorSwalConfig:{type:Object,default:function(){return f}},errorFeedbackResolver:{type:Function,default:null},successFeedbackResolver:{type:Function,default:null},showSuccessFeedback:{type:Boolean,default:!1},hideErrorFeedback:{type:Boolean,default:!1},immediate:{type:Boolean,default:!1},forceResetError:{type:Boolean,default:!1},initialData:{default:null}},data:function(){return{loading:!1,failed:!1,succeeded:!1,error:null,data:this.initialData}},watch:{forceResetError:function(e){e&&(this.error=null)}},mounted:function(){this.immediate&&this.action()},methods:{action:function(e){var o=this;this.startRequest();var n=e||this.payload;this.service(this.payloadResolver(n)).then((function(e){var r=e.data;if(o.data=o.dataResolver(r),o.succeeded=!0,o.$emit("success",o.data),o.showSuccessFeedback){if(o.successFeedbackResolver)return void o.successFeedbackResolver({vm:o,data:o.data});t.fire(Object.assign({},d,o.successSwalConfig)).then((function(){o.$emit("success-feedback-ok",o.data)}))}})).catch((function(e){if(o.failed=!0,o.error=e,o.$emit("error",e),!o.hideErrorFeedback){var n=l(r(e,"response.data",null),"Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.");if(o.errorFeedbackResolver)return void o.errorFeedbackResolver({vm:o,error:e,errorMessage:n});t.fire(Object.assign({},f,o.errorSwalConfig,{text:n})).then((function(t){t.isDismissed&&o.$emit("error-feedback-cancel",e),t.isConfirmed&&o.$emit("error-feedback-ok",e)}))}})).finally((function(){o.loading=!1}))},labelHelper:function(e,t){return void 0===t&&(t="Carregando..."),this.loading?t:e},startRequest:function(){this.loading=!0,this.failed=!1,this.succeeded=!1,this.error=null}},render:function(){var e=(this.$slots||this.$scopedSlots).default({loading:this.loading,failed:this.failed,succeeded:this.succeeded,error:this.error,data:this.data,action:this.action,labelHelper:this.labelHelper,errorMessage:l(r(this.error,"response.data",null),"Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.")});return Array.isArray(e)?e[0]:e}},void 0,void 0,void 0,!1,void 0,void 0,void 0),v=Object.freeze({__proto__:null,RequestProvider:h});var y={$showConvertKeysToCamelCase:s,$showConvertKeysToSnakeCase:u,$showRemoveAccents:function(e){void 0===e&&(e="");for(var t,r=e.length,o=e.split(""),n=0;n<r;n+=1)-1!==(t="ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž".indexOf(e[n]))&&(o[n]="AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz"[t]);return o=(o=(o=(o=o.join("")).split(".").join("")).split("-").join("")).split("/").join("")},$showGenerateKey:function(e){void 0===e&&(e=8);for(var t="",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",o=r.length,n=0;n<e;n+=1)t+=r.charAt(Math.floor(Math.random()*o));return t}};var b={install:function e(t){if(!e.installed){e.installed=!0;var r=Number(t.version.split(".")[0]);r<=2&&Object.keys(y).forEach((function(e){t.prototype[e]=y[e]})),r>2&&Object.keys(y).forEach((function(e){t.config.globalProperties[e]=y[e]})),Object.keys(v).forEach((function(e){t.component("Show"+e,v[e])}))}}},m=null;return"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.Vue),m&&m.use(b),e.RequestProvider=h,e.default=b,e}({},swal,get,camelCase,isObject,snakeCase);
+var SHOW=function(e,t,r,o,n,i,s,a){"use strict";r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i,s=s&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s,a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a;var u=function(e){return Array.isArray(e)},c=function(e){if(u(e))return e.map((function(e){return i(e)||u(e)?c(e):e}));var t={};return Object.keys(e).forEach((function(r){i(e[r])||u(e[r])?t[n(r)]=c(e[r]):t[n(r)]=e[r]})),t},d=function(e){return Array.isArray(e)},l=function(e){if(d(e))return e.map((function(e){return i(e)||d(e)?l(e):e}));var t={};return Object.keys(e).forEach((function(r){i(e[r])||d(e[r])?t[s(r)]=l(e[r]):t[s(r)]=e[r]})),t};function f(e){void 0===e&&(e=8);for(var t="",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",o=r.length,n=0;n<e;n+=1)t+=r.charAt(Math.floor(Math.random()*o));return t}function v(e,t){void 0===t&&(t="Não conseguimos processar sua requisição. Tente novamente.");var r=o(e,"errors",!1);return r&&r[Object.keys(r)[0]][0]||t}var h={title:"Informações salvas com sucesso!",icon:"success",text:"",showCloseButton:!0,confirmButtonText:"Ok"},p={icon:"error",title:"Erro",text:"mensagem de error",showCancelButton:!0,showConfirmButton:!1,cancelButtonText:"Fechar"};function b(e,t,r,o,n,i,s,a,u,c){"boolean"!=typeof s&&(u=a,a=s,s=!1);var d,l="function"==typeof r?r.options:r;if(e&&e.render&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,n&&(l.functional=!0)),o&&(l._scopeId=o),i?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,u(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},l._ssrRegister=d):t&&(d=s?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),d)if(l.functional){var f=l.render;l.render=function(e,t){return d.call(t),f(e,t)}}else{var v=l.beforeCreate;l.beforeCreate=v?[].concat(v,d):[d]}return r}var y=b({},void 0,{inject:["$_requestObserver"],emits:["success","error","success-feedback-ok","error-feedback-ok","success-feedback-cancel","error-feedback-cancel"],props:{vid:{type:String,default:function(){return f()}},tag:{type:String,default:"div"},service:{type:Function,required:!0},payload:{type:Object,default:function(){return{}}},payloadResolver:{type:Function,default:function(e){return l(e)}},dataResolver:{type:Function,default:function(e){return c(e)}},successSwalConfig:{type:Object,default:function(){return h}},errorSwalConfig:{type:Object,default:function(){return p}},errorFeedbackResolver:{type:Function,default:null},successFeedbackResolver:{type:Function,default:null},showSuccessFeedback:{type:Boolean,default:!1},hideErrorFeedback:{type:Boolean,default:!1},immediate:{type:Boolean,default:!1},forceResetError:{type:Boolean,default:!1},initialData:{default:null}},data:function(){return{loading:!1,failed:!1,succeeded:!1,error:null,data:this.initialData}},computed:{requestState:function(){return{loading:this.loading,failed:this.failed,succeeded:this.succeeded,error:this.error,data:this.data}}},watch:{forceResetError:function(e){e&&(this.error=null)}},mounted:function(){this.immediate&&this.action()},created:function(){this.$_requestObserver&&this.$_requestObserver.subscribe(this)},beforeDestroy:function(){this.$_requestObserver&&this.$_requestObserver.unsubscribe(this)},methods:{action:function(e){var t=this;this.startRequest();var n=e||this.payload;this.service(this.payloadResolver(n)).then((function(e){var o=e.data;if(t.data=t.dataResolver(o),t.succeeded=!0,t.$emit("success",t.data),t.showSuccessFeedback){if(t.successFeedbackResolver)return void t.successFeedbackResolver({vm:t,data:t.data});r.fire(Object.assign({},h,t.successSwalConfig)).then((function(){t.$emit("success-feedback-ok",t.data)}))}})).catch((function(e){if(t.failed=!0,t.error=e,t.$emit("error",e),!t.hideErrorFeedback){var n=v(o(e,"response.data",null),"Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.");if(t.errorFeedbackResolver)return void t.errorFeedbackResolver({vm:t,error:e,errorMessage:n});r.fire(Object.assign({},p,t.errorSwalConfig,{text:n})).then((function(r){r.isDismissed&&t.$emit("error-feedback-cancel",e),r.isConfirmed&&t.$emit("error-feedback-ok",e)}))}})).finally((function(){t.loading=!1}))},loadingTextResolver:function(e,t){return void 0===t&&(t="Carregando..."),this.loading?t:e},startRequest:function(){this.loading=!0,this.failed=!1,this.succeeded=!1,this.error=null}},render:function(){var e=this.$slots.default(Object.assign({},this.requestState,{action:this.action,loadingTextResolver:this.loadingTextResolver,errorMessage:v(o(this.error,"response.data",null),"Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.")}));return t.h(this.tag,e)}},void 0,void 0,void 0,!1,void 0,void 0,void 0),m=function(e,t,r,o){return void 0===r&&(r="||"),void 0===o&&(o=!1),e.reduce((function(e,o){return"||"===r?e||o[t]:"&&"===r?e&&o[t]:void 0}),o)},g=b({},void 0,{emits:["success","error"],props:{vid:{type:String,default:function(){return f()}},tag:{type:String,default:"div"}},data:function(){return{providers:[],providersVids:{}}},provide:function(){return{$_requestObserver:this}},computed:{context:function(){return{vid:this.vid,loading:m(this.providers,"loading"),failed:m(this.providers,"failed"),succeeded:m(this.providers,"succeeded","&&",!0),errors:a(this.providers.filter((function(e){return e.failed})).map((function(e){return{error:e.error,vid:e.vid}})),"vid"),providerRequestState:this.providerRequestState,loadingTextResolver:this.loadingTextResolver}},providerRequestState:function(){var e=this;return function(t){var r=e.providers.find((function(e){return e.vid===t}));return r?r.requestState:{loading:!1,failed:!1,succeeded:!1,error:null,data:null}}},loadingTextResolver:function(){var e=this;return function(t,r){return void 0===r&&(r="Carregando..."),e.context.loading?r:t}}},watch:{"context.succeeded":{handler:function(e){e&&this.$emit("success",this.context)}},"context.failed":{handler:function(e){e&&this.$emit("error",this.context)}}},render:function(){var e=this.$slots.default(this.context);return t.h(this.tag,e)},methods:{subscribe:function(e){if(this.providersVids[e.vid])throw new Error("Provider não reigistrado no observer! Já existe um provider com o vid >> "+e.vid+" <<");this.providersVids[e.vid]=!0,this.providers.push(e)},unsubscribe:function(e){delete this.providersVids[e.vid],this.providers.filter((function(t){return t.vid!==e.vid}))}}},void 0,void 0,void 0,!1,void 0,void 0,void 0),O=Object.freeze({__proto__:null,RequestProvider:y,RequestObserver:g});var R={$showConvertKeysToCamelCase:c,$showConvertKeysToSnakeCase:l,$showRemoveAccents:function(e){void 0===e&&(e="");for(var t,r=e.length,o=e.split(""),n=0;n<r;n+=1)-1!==(t="ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž".indexOf(e[n]))&&(o[n]="AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz"[t]);return o=(o=(o=(o=o.join("")).split(".").join("")).split("-").join("")).split("/").join("")},$showGenerateKey:f};var w={install:function e(t){if(!e.installed){e.installed=!0;var r=Number(t.version.split(".")[0]);if(r<=2)throw new Error("Essa versão só é compatível com projetos que possuem o Vue 3. Para projetos com a Vue 2, utilize a versão 0.3.0 ou inferior");r>2&&Object.keys(R).forEach((function(e){t.config.globalProperties[e]=R[e]})),Object.keys(O).forEach((function(e){t.component("Show"+e,O[e])}))}}},k=null;return"undefined"!=typeof window?k=window.Vue:"undefined"!=typeof global&&(k=global.Vue),k&&k.use(w),e.RequestObserver=g,e.RequestProvider=y,e.default=w,e}({},vue,swal,get,camelCase,isObject,snakeCase,keyBy);

package/dist/@sysvale/show.ssr.js

@@ -1,4 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var swal=_interopDefault(require('sweetalert2')),get=_interopDefault(require('lodash.get')),camelCase=_interopDefault(require('lodash.camelcase')),isObject=_interopDefault(require('lodash.isobject')),snakeCase=_interopDefault(require('lodash.snakecase'));var isArray = function (arg) { return Array.isArray(arg); };
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var vue=require('vue'),swal=_interopDefault(require('sweetalert2')),get=_interopDefault(require('lodash.get')),camelCase=_interopDefault(require('lodash.camelcase')),isObject=_interopDefault(require('lodash.isobject')),snakeCase=_interopDefault(require('lodash.snakecase')),keyBy=_interopDefault(require('lodash.keyby'));var isArray = function (arg) { return Array.isArray(arg); };
 
 var convertKeysToCamelCase = function (data) {
 	if (isArray(data)) {
@@ -40,7 +40,17 @@ var convertKeysToSnakeCase = function (data) {
 	});
 
 	return newData;
-};function getFirstErrorMessage(response, fallbackMsg) {
+};function generateKey(length) {
+	if ( length === void 0 ) length = 8;
+
+	var result = '';
+	var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	var charactersLength = characters.length;
+	for (var i = 0; i < length; i += 1) {
+		result += characters.charAt(Math.floor(Math.random() * charactersLength));
+	}
+	return result;
+}function getFirstErrorMessage(response, fallbackMsg) {
 	if ( fallbackMsg === void 0 ) fallbackMsg = 'Não conseguimos processar sua requisição. Tente novamente.';
 
 	var errors = get(response, 'errors', false);
@@ -66,7 +76,17 @@ var ERROR_SWAL_DEFAULT_CONFIG = {
 };
 
 var script = {
+	inject: ['$_requestObserver'],
+	emits: ['success', 'error', 'success-feedback-ok', 'error-feedback-ok', 'success-feedback-cancel', 'error-feedback-cancel'],
 	props: {
+		vid: {
+			type: String,
+			default: function () { return generateKey(); },
+		},
+		tag: {
+			type: String,
+			default: 'div',
+		},
 		service: {
 			type: Function,
 			required: true,
@@ -130,6 +150,18 @@ var script = {
 		};
 	},
 
+	computed: {
+		requestState: function requestState() {
+			return {
+				loading: this.loading,
+				failed: this.failed,
+				succeeded: this.succeeded,
+				error: this.error,
+				data: this.data,
+			};
+		}
+	},
+
 	watch: {
 		forceResetError: function forceResetError(newValue) {
 			if (newValue) {
@@ -144,6 +176,18 @@ var script = {
 		}
 	},
 
+	created: function created() {
+		if(this.$_requestObserver) {
+			this.$_requestObserver.subscribe(this);
+		}
+	},
+
+	beforeDestroy: function beforeDestroy() {
+		if(this.$_requestObserver) {
+			this.$_requestObserver.unsubscribe(this);
+		}
+	},
+
 	methods: {
 		action: function action(payloadFromArgs) {
 			var this$1 = this;
@@ -204,7 +248,7 @@ var script = {
 				});
 		},
 
-		labelHelper: function labelHelper(label, loadingLabel) {
+		loadingTextResolver: function loadingTextResolver(label, loadingLabel) {
 			if ( loadingLabel === void 0 ) loadingLabel = 'Carregando...';
 
 			if (this.loading) {
@@ -222,22 +266,16 @@ var script = {
 	},
 
 	render: function render() {
-		var slotProvider = this.$slots || this.$scopedSlots;
-		var slot = slotProvider.default({
-			loading: this.loading,
-			failed: this.failed,
-			succeeded: this.succeeded,
-			error: this.error,
-			data: this.data,
-			action: this.action,
-			labelHelper: this.labelHelper,
+		var slotProvider = this.$slots;
+		var slot = slotProvider.default(Object.assign({}, this.requestState,
+			{action: this.action,
+			loadingTextResolver: this.loadingTextResolver,
 			errorMessage: getFirstErrorMessage(
 				get(this.error, 'response.data', null),
 				'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
-			),
-		});
+			)}));
 
-		return Array.isArray(slot) ? slot[0] : slot;
+		return vue.h(this.tag, slot);
 	},
 };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -322,7 +360,7 @@ var __vue_script__ = script;
   /* scoped */
   var __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = "data-v-58d9f362";
+  var __vue_module_identifier__ = "data-v-77657dd0";
   /* functional template */
   var __vue_is_functional_template__ = undefined;
   /* style inject */
@@ -344,7 +382,172 @@ var __vue_script__ = script;
     undefined,
     undefined,
     undefined
-  );var components=/*#__PURE__*/Object.freeze({__proto__:null,RequestProvider: __vue_component__});function removeAccents(str) {
+  );var booleanReduceByProp = function (arr, prop, operator, defaultValue) {
+	if ( operator === void 0 ) operator = '||';
+	if ( defaultValue === void 0 ) defaultValue = false;
+
+	return arr.reduce(function (acc, item) {
+	if(operator === '||') {
+		return acc || item[prop];
+	} else if(operator === '&&') {
+		return acc && item[prop];
+	}
+}, defaultValue);
+};
+
+var script$1 = {
+	emits: ['success', 'error'],
+	props: {
+		vid: {
+			type: String,
+			default: function () { return generateKey(); },
+		},
+		tag: {
+			type: String,
+			default: 'div',
+		},
+	},
+	data: function data() {
+		return {
+			providers: [],
+			providersVids: {},
+		};
+	},
+	provide: function provide() {
+		return {
+			$_requestObserver: this,
+		}
+	},
+
+	computed: {
+		context: function context() {
+			return {
+				vid: this.vid,
+				loading: booleanReduceByProp(this.providers, 'loading'),
+				failed: booleanReduceByProp(this.providers, 'failed'),
+				succeeded: booleanReduceByProp(this.providers, 'succeeded', '&&', true),
+				errors: keyBy(this.providers.filter(function (ref) {
+					var failed = ref.failed;
+
+					return failed;
+			}).map(function (ref) {
+					var error = ref.error;
+					var vid = ref.vid;
+
+					return ({ error: error, vid: vid });
+			}), 'vid'),
+				providerRequestState: this.providerRequestState,
+				loadingTextResolver: this.loadingTextResolver,
+			};
+		},
+
+		providerRequestState: function providerRequestState() {
+			var this$1 = this;
+
+			return function (vid) {
+				var element  = this$1.providers.find(function (ref) {
+					var providerVid = ref.vid;
+
+					return providerVid === vid;
+				});
+				return element ? element.requestState : {
+					loading: false,
+					failed: false,
+					succeeded: false,
+					error: null,
+					data: null,
+				};
+			}
+		},
+
+		loadingTextResolver: function loadingTextResolver() {
+			var this$1 = this;
+
+			return function (label, loadingLabel) {
+				if ( loadingLabel === void 0 ) loadingLabel = 'Carregando...';
+
+				if (this$1.context.loading) {
+					return loadingLabel;
+				}
+				return label;
+			}
+		},
+	},
+
+	watch: {
+		'context.succeeded': {
+			handler: function handler(newValue) {
+				if (newValue) {
+					this.$emit('success', this.context);
+				}
+			},
+		},
+		'context.failed': {
+			handler: function handler(newValue) {
+				if (newValue) {
+					this.$emit('error', this.context);
+				}
+			},
+		},
+	},
+
+	render: function render() {
+		var slotProvider = this.$slots;
+		var slot = slotProvider.default(this.context);
+		return vue.h(this.tag, slot);
+	},
+
+	methods: {
+		subscribe: function subscribe(provider) {
+			if(!this.providersVids[provider.vid]) {
+				this.providersVids[provider.vid] = true;
+				this.providers.push(provider);
+			} else {
+				throw new Error(("Provider não reigistrado no observer! Já existe um provider com o vid >> " + (provider.vid) + " <<"));
+			}
+		},
+		unsubscribe: function unsubscribe(provider) {
+			delete this.providersVids[provider.vid];
+			this.providers.filter(function (ref) {
+				var vid = ref.vid;
+
+				return vid !== provider.vid;
+			});
+		},
+	},
+};/* script */
+var __vue_script__$1 = script$1;
+
+/* template */
+
+  /* style */
+  var __vue_inject_styles__$1 = undefined;
+  /* scoped */
+  var __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$1 = "data-v-074e0922";
+  /* functional template */
+  var __vue_is_functional_template__$1 = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    {},
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );var components=/*#__PURE__*/Object.freeze({__proto__:null,RequestProvider: __vue_component__,RequestObserver: __vue_component__$1});function removeAccents(str) {
 	if ( str === void 0 ) str = '';
 
 	var accents = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
@@ -366,16 +569,6 @@ var __vue_script__ = script;
 	newStr = newStr.split('/').join('');
 
 	return newStr;
-}function generateKey(length) {
-	if ( length === void 0 ) length = 8;
-
-	var result = '';
-	var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	var charactersLength = characters.length;
-	for (var i = 0; i < length; i += 1) {
-		result += characters.charAt(Math.floor(Math.random() * charactersLength));
-	}
-	return result;
 }var utils = {
 	$showConvertKeysToCamelCase: convertKeysToCamelCase,
 	$showConvertKeysToSnakeCase: convertKeysToSnakeCase,
@@ -392,9 +585,7 @@ function install(app) {
 	var version = Number(app.version.split('.')[0]);
 
 	if (version <= 2) {
-		Object.keys(utils).forEach(function (key) {
-			app.prototype[key] = utils[key];
-		});
+		throw new Error('Essa versão só é compatível com projetos que possuem o Vue 3. Para projetos com a Vue 2, utilize a versão 0.3.0 ou inferior');
 	}
 
 	if (version > 2) {
@@ -429,4 +620,4 @@ if (typeof window !== 'undefined') {
 
 if (GlobalVue) {
 	GlobalVue.use(plugin);
-}exports.RequestProvider=__vue_component__;exports.default=plugin;
+}exports.RequestObserver=__vue_component__$1;exports.RequestProvider=__vue_component__;exports.default=plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sysvale/show",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "A set of components used at Sysvale",
   "repository": {
     "type": "git",
@@ -29,6 +29,7 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.get": "^4.4.2",
     "lodash.isobject": "^3.0.2",
+    "lodash.keyby": "^4.6.0",
     "lodash.snakecase": "^4.1.1",
     "sweetalert2": "^11.3.5",
     "vue": "^2.6.12"