@sysvale/show 0.2.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:
@@ -42,3 +46,5 @@ Vue.use(SHOW);
   </div>
 </show-request-provider>
 ```
+
+**Para saber mais sobre a utilização do SHOW, consulte a [Wiki](https://github.com/Sysvale/sys-hand-on-wheel/wiki)**.

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.';
 
@@ -60,193 +74,225 @@ function getFirstErrorMessage(response, fallbackMsg) {
 	return errors[firstKey][0] || fallbackMsg;
 }
 
-var SUCCESS_SWAL_DEFAULT_CONFIG = {
-	title: 'Informações salvas com sucesso!',
-	icon: 'success',
-	text: '',
-	showCloseButton: true,
-	confirmButtonText: 'Ok',
-};
-
-var ERROR_SWAL_DEFAULT_CONFIG = {
-	icon: 'error',
-	title: 'Erro',
-	text: 'mensagem de error',
-	showCancelButton: true,
-	showConfirmButton: false,
-	cancelButtonText: 'Fechar',
-};
-
-var script = {
-	props: {
-		service: {
-			type: Function,
-			required: true,
-		},
-		payload: {
-			type: Object,
-			default: function () { return ({}); },
-		},
-		payloadResolver: {
-			type: Function,
-			default: function (data) { return convertKeysToSnakeCase(data); },
-		},
-		dataResolver: {
-			type: Function,
-			default: function (data) { return convertKeysToCamelCase(data); },
-		},
-		successSwalConfig: {
-			type: Object,
-			default: function () { return SUCCESS_SWAL_DEFAULT_CONFIG; },
-		},
-		errorSwalConfig: {
-			type: Object,
-			default: function () { return ERROR_SWAL_DEFAULT_CONFIG; },
-		},
-		errorFeedbackResolver: {
-			type: Function,
-			default: null,
-		},
-		successFeedbackResolver: {
-			type: Function,
-			default: null,
-		},
-		showSuccessFeedback: {
-			type: Boolean,
-			default: false,
-		},
-		hideErrorFeedback: {
-			type: Boolean,
-			default: false,
-		},
-		immediate: {
-			type: Boolean,
-			default: false,
-		},
-		forceResetError: {
-			type: Boolean,
-			default: false,
-		},
-		initialData: {
-			default: null,
-		},
-	},
-
-	data: function data() {
-		return {
-			loading: false,
-			failed: false,
-			error: null,
-			data: this.initialData,
-		};
-	},
-
-	watch: {
-		forceResetError: function forceResetError(newValue) {
-			if (newValue) {
-				this.error = null;
-			}
-		},
-	},
-
-	mounted: function mounted() {
-		if (this.immediate) {
-			this.action();
-		}
-	},
-
-	methods: {
+var SUCCESS_SWAL_DEFAULT_CONFIG = {
+	title: 'Informações salvas com sucesso!',
+	icon: 'success',
+	text: '',
+	showCloseButton: true,
+	confirmButtonText: 'Ok',
+};
+
+var ERROR_SWAL_DEFAULT_CONFIG = {
+	icon: 'error',
+	title: 'Erro',
+	text: 'mensagem de error',
+	showCancelButton: true,
+	showConfirmButton: false,
+	cancelButtonText: 'Fechar',
+};
+
+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,
+		},
+		payload: {
+			type: Object,
+			default: function () { return ({}); },
+		},
+		payloadResolver: {
+			type: Function,
+			default: function (data) { return convertKeysToSnakeCase(data); },
+		},
+		dataResolver: {
+			type: Function,
+			default: function (data) { return convertKeysToCamelCase(data); },
+		},
+		successSwalConfig: {
+			type: Object,
+			default: function () { return SUCCESS_SWAL_DEFAULT_CONFIG; },
+		},
+		errorSwalConfig: {
+			type: Object,
+			default: function () { return ERROR_SWAL_DEFAULT_CONFIG; },
+		},
+		errorFeedbackResolver: {
+			type: Function,
+			default: null,
+		},
+		successFeedbackResolver: {
+			type: Function,
+			default: null,
+		},
+		showSuccessFeedback: {
+			type: Boolean,
+			default: false,
+		},
+		hideErrorFeedback: {
+			type: Boolean,
+			default: false,
+		},
+		immediate: {
+			type: Boolean,
+			default: false,
+		},
+		forceResetError: {
+			type: Boolean,
+			default: false,
+		},
+		initialData: {
+			default: null,
+		},
+	},
+
+	data: function data() {
+		return {
+			loading: false,
+			failed: false,
+			succeeded: false,
+			error: null,
+			data: this.initialData,
+		};
+	},
+
+	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) {
+				this.error = null;
+			}
+		},
+	},
+
+	mounted: function mounted() {
+		if (this.immediate) {
+			this.action();
+		}
+	},
+
+	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;
-
-			this.startRequest();
-			var payload = payloadFromArgs || this.payload;
-			this.service(this.payloadResolver(payload))
-				.then(
+
+			this.startRequest();
+			var payload = payloadFromArgs || this.payload;
+			this.service(this.payloadResolver(payload))
+				.then(
 					function (ref) {
 						var data = ref.data;
-
-						this$1.data = this$1.dataResolver(data);
-						this$1.$emit('success', this$1.data);
-
-						if (this$1.showSuccessFeedback) {
-							if (this$1.successFeedbackResolver) {
-								this$1.successFeedbackResolver({ vm: this$1, data: this$1.data });
-								return;
-							}
-							swal.fire(Object.assign({}, SUCCESS_SWAL_DEFAULT_CONFIG,
-								this$1.successSwalConfig)).then(function () {
-								this$1.$emit('success-feedback-ok', this$1.data);
-							});
-						}
-					}
-				).catch(
-					function (error) {
-						this$1.failed = true;
-						this$1.error = error;
-						this$1.$emit('error', error);
-
-						if (!this$1.hideErrorFeedback) {
-							var errorMessage = getFirstErrorMessage(
-								get(error, 'response.data', null),
-								'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
-							);
-
-							if (this$1.errorFeedbackResolver) {
-								this$1.errorFeedbackResolver({ vm: this$1, error: error, errorMessage: errorMessage });
-								return;
-							}
-
-							swal.fire(Object.assign({}, ERROR_SWAL_DEFAULT_CONFIG,
-								this$1.errorSwalConfig,
-								{text: errorMessage})).then(function (result) {
-								if (result.isDismissed) {
-									this$1.$emit('error-feedback-cancel', error);
-								}
-								if (result.isConfirmed) {
-									this$1.$emit('error-feedback-ok', error);
-								}
-							});
-						}
-					}
-				).finally(function () {
-					this$1.loading = false;
-				});
-		},
-
-		labelHelper: function labelHelper(label, loadingLabel) {
+
+						this$1.data = this$1.dataResolver(data);
+						this$1.succeeded = true;
+						this$1.$emit('success', this$1.data);
+
+						if (this$1.showSuccessFeedback) {
+							if (this$1.successFeedbackResolver) {
+								this$1.successFeedbackResolver({ vm: this$1, data: this$1.data });
+								return;
+							}
+							swal.fire(Object.assign({}, SUCCESS_SWAL_DEFAULT_CONFIG,
+								this$1.successSwalConfig)).then(function () {
+								this$1.$emit('success-feedback-ok', this$1.data);
+							});
+						}
+					}
+				).catch(
+					function (error) {
+						this$1.failed = true;
+						this$1.error = error;
+						this$1.$emit('error', error);
+
+						if (!this$1.hideErrorFeedback) {
+							var errorMessage = getFirstErrorMessage(
+								get(error, 'response.data', null),
+								'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
+							);
+
+							if (this$1.errorFeedbackResolver) {
+								this$1.errorFeedbackResolver({ vm: this$1, error: error, errorMessage: errorMessage });
+								return;
+							}
+
+							swal.fire(Object.assign({}, ERROR_SWAL_DEFAULT_CONFIG,
+								this$1.errorSwalConfig,
+								{text: errorMessage})).then(function (result) {
+								if (result.isDismissed) {
+									this$1.$emit('error-feedback-cancel', error);
+								}
+								if (result.isConfirmed) {
+									this$1.$emit('error-feedback-ok', error);
+								}
+							});
+						}
+					}
+				).finally(function () {
+					this$1.loading = false;
+				});
+		},
+
+		loadingTextResolver: function loadingTextResolver(label, loadingLabel) {
 			if ( loadingLabel === void 0 ) loadingLabel = 'Carregando...';
-
-			if (this.loading) {
-				return loadingLabel;
-			}
-			return label;
-		},
-
-		startRequest: function startRequest() {
-			this.loading = true;
-			this.failed = false;
-			this.error = null;
-		},
-	},
-
-	render: function render() {
-		var slotProvider = this.$slots || this.$scopedSlots;
-		var slot = slotProvider.default({
-			loading: this.loading,
-			failed: this.failed,
-			error: this.error,
-			data: this.data,
-			action: this.action,
-			labelHelper: this.labelHelper,
-			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;
-	},
+
+			if (this.loading) {
+				return loadingLabel;
+			}
+			return label;
+		},
+
+		startRequest: function startRequest() {
+			this.loading = true;
+			this.failed = false;
+			this.succeeded = false;
+			this.error = null;
+		},
+	},
+
+	render: function render() {
+		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 h(this.tag, slot);
+	},
 };
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
@@ -358,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) {
@@ -389,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,
@@ -417,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) {
@@ -457,4 +659,4 @@ if (GlobalVue) {
 }
 
 export default plugin;
-export { __vue_component__ as RequestProvider };
+export { __vue_component__$1 as RequestObserver, __vue_component__ as RequestProvider };