@bildvitta/quasar-ui-asteroid 3.0.0-beta.10 → 3.0.0-beta.13

package/dist/asteroid.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-beta.10
+* @bildvitta/quasar-ui-asteroid v3.0.0-beta.13
 * (c) 2022 Bild & Vitta <systemteam@bild.com.br>
 * Released under the MIT License.
 */
@@ -462,6 +462,20 @@
     return first
   }
 
+  function camelizeFieldsName (fields) {
+    for (const field in fields) {
+      const currentField = fields[field];
+
+      currentField.name = humps.camelize(currentField.name);
+
+      if (Object.keys(currentField.children || {}).length) {
+        camelizeFieldsName(currentField.children);
+      }
+    }
+
+    return fields
+  }
+
   // Private
   function __format (value, token, options = {}) {
     if (!value) {
@@ -1993,7 +2007,7 @@
     },
 
     watch: {
-      value (current, original) {
+      modelValue (current, original) {
         if (!current || this.useTimeOnly) {
           this.currentValue = current;
           return
@@ -2421,6 +2435,51 @@
     });
   };
 
+  var Logger = () => {
+    const isDebugEnabled = process.env.DEBUGGING;
+
+    const normalizeMessage = msg => `%c ${msg}`;
+    const getStyle = isError => (
+      `
+      background: ${isError ? '#C10015 ' : '#1976d2'};
+      font-weight: bold;
+      color: white;
+      padding: 6px 20px;
+      border-radius: 4px;
+      display: block;
+      width: 100%;
+      font-size: 12px;
+    `
+    );
+
+    return {
+      group (message, payload = [], { error } = {}) {
+        if (!isDebugEnabled) return
+
+        console.groupCollapsed(normalizeMessage(message), getStyle(error));
+
+        for (const item of payload) {
+          if (typeof item === 'string') {
+            console.info(normalizeMessage(item), getStyle(error));
+            continue
+          }
+
+          console.table(item);
+        }
+
+        console.groupEnd();
+      },
+
+      info (message) {
+        isDebugEnabled && console.info(normalizeMessage(message), getStyle());
+      },
+
+      error (message) {
+        isDebugEnabled && console.info(normalizeMessage(message), getStyle(true));
+      }
+    }
+  };
+
   quasar.Notify.registerType('error', {
     color: 'negative',
     progress: true
@@ -2607,7 +2666,13 @@
         try {
           const { destroyRoutes, history } = useHistory();
 
-          await this.$store.dispatch(`${this.entity}/destroy`, { id: this.id, url: this.url });
+          const payload = { id: this.id, url: this.url };
+
+          this.$qas.logger.group(
+            `QasDelete - destroy -> Payload do parâmetro do ${this.entity}/destroy`, [payload]
+          );
+
+          await this.$store.dispatch(`${this.entity}/destroy`, payload);
 
           NotifySuccess('Item deletado com sucesso!');
 
@@ -2621,9 +2686,17 @@
           this.createDeleteSuccessEvent();
 
           this.$emit('success');
+
+          this.$qas.logger.info('QasDelete - destroy -> item deletado com sucesso!');
         } catch (error) {
           NotifyError('Ops! Não foi possível deletar o item.');
           this.$emit('error', error);
+
+          this.$qas.logger.group(
+            `QasDelete - destroy -> exceção da action ${this.entity}/destroy`,
+            [error],
+            { error: true }
+          );
         } finally {
           quasar.Loading.hide();
           this.$emit('update:deleting', false);
@@ -2872,7 +2945,7 @@
 
     watch: {
       mask () {
-        const input = this.inputReference.$el?.querySelector('input');
+        const input = this.getInput();
 
         requestAnimationFrame(() => {
           input.selectionStart = input.value ? input.value.length : '';
@@ -2906,12 +2979,30 @@
       },
 
       toggleMask (first, second) {
+        if (!this.modelValue.length) return
+
         const length = first.split('#').length - 2;
         return this.modelValue?.length > length ? second : first
       },
 
       validate (value) {
         return this.inputReference.validate(value)
+      },
+
+      onPaste (event) {
+        if (!this.mask) return
+
+        const value = event.clipboardData.getData('text');
+        const input = this.getInput();
+
+        requestAnimationFrame(() => {
+          this.$emit('update:modelValue', value);
+          input.selectionStart = input.value ? input.value.length : '';
+        });
+      },
+
+      getInput () {
+        return this.inputReference.$el?.querySelector('input')
       }
     }
   };
@@ -2930,7 +3021,8 @@
         "error-message": _ctx.errorMessageData,
         mask: $options.mask,
         outlined: $props.outlined,
-        "unmasked-value": $props.unmaskedValue
+        "unmasked-value": $props.unmaskedValue,
+        onPaste: $options.onPaste
       }), vue.createSlots({ _: 2 /* DYNAMIC */ }, [
         vue.renderList(_ctx.$slots, (_, name) => {
           return {
@@ -2940,7 +3032,7 @@
             ])
           }
         })
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value"])
+      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value", "onPaste"])
     ]))
   }
 
@@ -3590,6 +3682,8 @@
         );
 
         this.updateUploading(false);
+
+        this.$qas.logger.group('QasUploader - uploaded', [this.modelValue]);
       },
 
       async fetchCredentials (filename) {
@@ -3600,6 +3694,12 @@
             entity: this.entity,
             filename
           });
+
+          this.$qas.logger.group(
+            'QasUploader - fetchCredentials -> resposta de /upload-credentials/',
+            [data]
+          );
+
           return data
         } finally {
           this.isFetching = false;
@@ -3619,7 +3719,9 @@
 
         const clonedValue = quasar.extend(true, [], this.modelValue);
         const numberIndex = this.modelValue.findIndex(file => this.getFileName(file) === index);
+
         clonedValue.splice(numberIndex, 1);
+
         this.$emit('update:modelValue', clonedValue);
       },
 
@@ -3628,7 +3730,9 @@
       },
 
       getFilesList (uploadedFiles) {
-        const pathsList = Array.isArray(this.modelValue) ? this.modelValue : (this.modelValue ? [this.modelValue] : []);
+        const pathsList = Array.isArray(this.modelValue)
+          ? this.modelValue
+          : (this.modelValue ? [this.modelValue] : []);
 
         uploadedFiles = uploadedFiles.map((file, indexToDelete) => {
           return {
@@ -3664,6 +3768,8 @@
           }
         });
 
+        this.$qas.logger.group('QasUploader - getFilesList', [files]);
+
         return files
       },
 
@@ -3702,7 +3808,14 @@
           // Retorna largura e altura da original da imagem
           const { width, height } = await getImageSize(image);
 
-          if (width <= this.sizeLimit) return file
+          if (width <= this.sizeLimit) {
+            this.$qas.logger.info(`
+            QasUploader - resizeImage -> Tamanho da imagem menor que o tamanho limite,
+            sendo assim, não faz o resize
+          `);
+
+            return file
+          }
 
           // Retorna os novos tamanhos redimensionados
           const resizedDimensions = getResizeDimensions(this.sizeLimit, width, height);
@@ -3720,7 +3833,11 @@
           const resizedImage = await pica.resize(image, canvas, this.defaultPicaResizeOptions);
           const blob = await pica.toBlob(resizedImage, type, 0.90);
 
-          return new File([blob], file.name, { type })
+          const newFile = new File([blob], file.name, { type });
+
+          this.$qas.logger.group('QasUploader - resizeImage -> nova imagem', [newFile]);
+
+          return newFile
         } catch {
           // Caso não consiga redimensionar retorna o arquivo original
           return file
@@ -4702,11 +4819,26 @@
         this.isFetching = true;
 
         try {
+          this.$qas.logger.group(
+            `QasFilters - fetchFilters -> Payload do parâmetro do ${this.entity}/fetchFilters`,
+            [{ url: this.url }]
+          );
+
           const response = await this.$store.dispatch(`${this.entity}/fetchFilters`, { url: this.url });
           this.$emit('fetch-success', response);
+
+          this.$qas.logger.group(
+            `QasFilters - fetchFilters -> resposta da action ${this.entity}/fetchFilters`, [response]
+          );
         } catch (error) {
           this.hasFetchError = true;
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasFilters - fetchFilters -> exceção da action ${this.entity}/fetchFilters`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.isFetching = false;
         }
@@ -4790,7 +4922,7 @@
 
   function render$m(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_qas_btn = vue.resolveComponent("qas-btn");
-    const _component_q_input = vue.resolveComponent("q-input");
+    const _component_qas_input = vue.resolveComponent("qas-input");
     const _component_q_form = vue.resolveComponent("q-form");
     const _component_q_spinner = vue.resolveComponent("q-spinner");
     const _component_q_icon = vue.resolveComponent("q-icon");
@@ -4810,11 +4942,13 @@
                           onSubmit: _cache[2] || (_cache[2] = vue.withModifiers($event => ($options.filter()), ["prevent"]))
                         }, {
                           default: vue.withCtx(() => [
-                            vue.createVNode(_component_q_input, {
+                            vue.createVNode(_component_qas_input, {
                               modelValue: $data.search,
                               "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.search) = $event)),
                               debounce: $options.debounce,
                               dense: "",
+                              "hide-bottom-space": "",
+                              outlined: false,
                               placeholder: $props.searchPlaceholder,
                               type: "search"
                             }, {
@@ -4822,6 +4956,8 @@
                                 ($options.hasSearch)
                                   ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                                       key: 0,
+                                      color: "grey-9",
+                                      flat: "",
                                       icon: "o_clear",
                                       unelevated: "",
                                       onClick: $options.clearSearch
@@ -4830,6 +4966,8 @@
                                 (!$options.debounce)
                                   ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                                       key: 1,
+                                      color: "grey-9",
+                                      flat: "",
                                       icon: "o_search",
                                       type: "submit",
                                       unelevated: "",
@@ -5255,11 +5393,9 @@
       },
 
       mx_setFields (fields = {}) {
-        for (const field in fields) {
-          fields[field].name = humps.camelize(fields[field].name);
-        }
+        const camelizedFields = camelizeFieldsName(fields);
 
-        this.mx_fields = vue.markRaw(fields);
+        this.mx_fields = vue.markRaw(camelizedFields);
       },
 
       mx_setMetadata (metadata = {}) {
@@ -5442,8 +5578,10 @@
     },
 
     created () {
-      vueRouter.onBeforeRouteLeave(this.beforeRouteLeave);
+      this.useDialogOnUnsavedChanges && vueRouter.onBeforeRouteLeave(this.beforeRouteLeave);
+
       window.addEventListener('delete-success', this.setIgnoreRouterGuard);
+
       this.fetch();
     },
 
@@ -5474,6 +5612,11 @@
           return next()
         }
 
+        this.$qas.logger.group(
+          'QasFormView - beforeRouteLeave -> dialog chamado, modelValue diferente do cachedResult',
+          [{ modelValue: clonedModelValue, cachedResult: clonedCachedResult }]
+        );
+
         this.handleDialog(() => {
           this.ignoreRouterGuard = true;
           next();
@@ -5488,10 +5631,14 @@
         this.mx_isFetching = true;
 
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/fetchSingle`, { form: true, id: this.id, params, url: this.fetchURL }
+          const payload = { form: true, id: this.id, params, url: this.fetchURL };
+
+          this.$qas.logger.group(
+            `QasFormView - fetch -> payload do parâmetro do ${this.entity}/fetchSingle`, [payload]
           );
 
+          const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload);
+
           const { errors, fields, metadata, result } = response.data;
 
           this.mx_setErrors(errors);
@@ -5504,20 +5651,36 @@
             metadata
           });
 
+          this.$qas.logger.group(
+            `QasFormView - fetch -> resposta da action ${this.entity}/fetchSingle`, [response]
+          );
+
           if (result) {
             this.hasResult = true;
 
             this.$nextTick(() => {
-              this.$emit('update:modelValue', { ...this.modelValue, ...result });
+              const modelValue = { ...this.modelValue, ...result };
+
+              this.$emit('update:modelValue', modelValue);
+
+              this.$qas.logger.group('QasFormView - fetch -> modelValue', [modelValue]);
             });
 
             this.cachedResult = this.useDialogOnUnsavedChanges && quasar.extend(true, {}, result);
+
+            this.$qas.logger.group('QasFormView - fetch -> cachedResult', [this.cachedResult]);
           }
 
           this.$emit('fetch-success', response, this.modelValue);
         } catch (error) {
           this.mx_fetchError(error);
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasFormView - fetch -> exceção da action ${this.entity}/fetchSingle`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.mx_isFetching = false;
         }
@@ -5583,11 +5746,14 @@
         this.isSubmitting = true;
 
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/${this.mode}`,
-            { id: this.id, payload: this.modelValue, url: this.url }
+          const payload = { id: this.id, payload: this.modelValue, url: this.url };
+
+          this.$qas.logger.group(
+            `QasFormView - submit -> payload do ${this.entity}/${this.mode}`, [payload]
           );
 
+          const response = await this.$store.dispatch(`${this.entity}/${this.mode}`, payload);
+
           if (this.useDialogOnUnsavedChanges) {
             this.cachedResult = quasar.extend(true, {}, this.modelValue);
           }
@@ -5595,11 +5761,18 @@
           this.mx_setErrors();
           NotifySuccess(response.data.status.text || 'Item salvo com sucesso!');
           this.$emit('submit-success', response, this.modelValue);
+
+          this.$qas.logger.group(
+            `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
+          );
         } catch (error) {
           const errors = error?.response?.data?.errors;
           const message = error?.response?.data?.status?.text;
           const exceptionResponse = error?.response?.data?.exception;
-          const exception = errors ? 'Existem erros de validação no formulário.' : exceptionResponse || error.message;
+
+          const exception = errors
+            ? 'Existem erros de validação no formulário.'
+            : exceptionResponse || error.message;
 
           this.mx_setErrors(errors);
           this.$emit('update:errors', this.mx_errors);
@@ -5607,6 +5780,12 @@
           NotifyError(message || 'Ops! Erro ao salvar item.', exception);
 
           this.$emit('submit-error', error);
+
+          this.$qas.logger.group(
+            `QasFormView - fetch -> exceção da action ${this.entity}/${this.mode}`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.isSubmitting = false;
         }
@@ -6001,6 +6180,11 @@
     computed: {
       formattedFields () {
         if (this.useEmptyResult) {
+          this.$qas.logger.group(
+            'QasGridGenerator - formattedFields -> this.useEmptyResult tem valor "true"',
+            [this.fields]
+          );
+
           return this.fields
         }
 
@@ -6018,6 +6202,8 @@
           }
         }
 
+        this.$qas.logger.group('QasGridGenerator - formattedFields', [fields]);
+
         return fields
       },
 
@@ -6033,11 +6219,19 @@
 
         for (const key in result) {
           if (this.formattedFields[key]?.type) {
-            formattedResult[key] = humanize(this.formattedFields[key], result[key]) || this.emptyResultText;
-            this.slotValue[key] = { ...this.formattedFields[key], formattedResult: formattedResult[key] };
+            formattedResult[key] = (
+              humanize(this.formattedFields[key], result[key]) || this.emptyResultText
+            );
+
+            this.slotValue[key] = {
+              ...this.formattedFields[key],
+              formattedResult: formattedResult[key]
+            };
           }
         }
 
+        this.$qas.logger.group('QasGridGenerator - getResultsByFields', [formattedResult]);
+
         return formattedResult
       }
     }
@@ -6436,15 +6630,18 @@
         const hasFilters = !!Object.keys(filters).length;
 
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/fetchList`,
-            {
-              ...this.mx_context,
-              url: this.url,
-              ...(hasFilters && { filters })
-            }
+          const payload = {
+            ...this.mx_context,
+            url: this.url,
+            ...(hasFilters && { filters })
+          };
+
+          this.$qas.logger.group(
+            `QasListView - fetchList -> Payload do parâmetro do ${this.entity}/fetchList`, [payload]
           );
 
+          const response = await this.$store.dispatch(`${this.entity}/fetchList`, payload);
+
           const { errors, fields, metadata } = response.data;
 
           this.mx_setErrors(errors);
@@ -6458,10 +6655,20 @@
           });
 
           this.$emit('fetch-success', response);
+
+          this.$qas.logger.group(
+            `QasListView - fetchSingle -> resposta da action ${this.entity}/fetchList`, [response]
+          );
         } catch (error) {
           this.mx_fetchError(error);
           this.$emit('update:errors', error);
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasListView - fetchSingle -> exceção da action ${this.entity}/fetchList`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.mx_isFetching = false;
         }
@@ -6837,13 +7044,7 @@
       },
 
       children () {
-        const field = quasar.extend(true, {}, this.field);
-
-        for (const key in field?.children) {
-          field.children[key].name = humps.camelize(field?.children[key].name);
-        }
-
-        return field?.children
+        return this.field?.children
       },
 
       showDestroyBtn () {
@@ -6894,13 +7095,17 @@
 
     methods: {
       add (row = {}) {
-        this.nested.push({ ...this.rowObject, ...row });
+        const payload = { ...this.rowObject, ...row };
+
+        this.nested.push(payload);
 
         this.$nextTick(() => {
           this.useAnimation && this.setScroll();
           this.setFocus();
         });
 
+        this.$qas.logger.group('QasNestedFields - add', [payload]);
+
         return this.updateModelValue()
       },
 
@@ -6920,6 +7125,8 @@
           ? this.nested.splice(index, 1)
           : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row });
 
+        this.$qas.logger.group('QasNestedFields - destroy', [{ index, row }]);
+
         return this.updateModelValue()
       },
 
@@ -7165,6 +7372,14 @@
   var script$b = {
     name: 'QasPageHeader',
 
+    mixins: [
+      quasar.createMetaMixin(function () {
+        return {
+          title: this.title
+        }
+      })
+    ],
+
     props: {
       breadcrumbs: {
         default: '',
@@ -7227,12 +7442,6 @@
 
         return lastIndex === index ? 'text-grey-7' : 'text-primary'
       }
-    },
-
-    meta () {
-      return {
-        title: this.title
-      }
     }
   };
 
@@ -7664,17 +7873,17 @@
 
   function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_q_icon = vue.resolveComponent("q-icon");
-    const _component_q_input = vue.resolveComponent("q-input");
+    const _component_qas_input = vue.resolveComponent("qas-input");
     const _component_qas_box = vue.resolveComponent("qas-box");
 
     return (vue.openBlock(), vue.createBlock(_component_qas_box, null, {
       default: vue.withCtx(() => [
-        vue.createVNode(_component_q_input, {
+        vue.createVNode(_component_qas_input, {
           modelValue: $data.search,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.search) = $event)),
           clearable: "",
           disable: !$props.list.length,
-          outlined: "",
+          "hide-bottom-space": "",
           placeholder: $props.placeholder
         }, {
           append: vue.withCtx(() => [
@@ -8184,11 +8393,15 @@
         this.mx_isFetching = true;
 
         try {
-          const response = await this.$store.dispatch(
-            `${this.entity}/fetchSingle`,
-            { id: this.id, url: this.url, params }
+          const payload = { id: this.id, url: this.url, params };
+
+          this.$qas.logger.group(
+            `QasSingleView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`,
+            [payload]
           );
 
+          const response = await this.$store.dispatch(`${this.entity}/fetchSingle`, payload);
+
           const { errors, fields, metadata } = response.data;
 
           this.mx_setErrors(errors);
@@ -8201,10 +8414,20 @@
             metadata: this.mx_metadata
           });
 
+          this.$qas.logger.group(
+            `QasSingleView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
+          );
+
           this.$emit('fetch-success', response);
         } catch (error) {
           this.mx_fetchError(error);
           this.$emit('fetch-error', error);
+
+          this.$qas.logger.group(
+            `QasSingleView - fetchSingle -> exceção da action ${this.entity}/fetchSingle`,
+            [error],
+            { error: true }
+          );
         } finally {
           this.mx_isFetching = false;
         }
@@ -8496,6 +8719,8 @@
             columnByField(this.fields[index]);
           }
 
+          this.$qas.logger.group('QasTableGenerator - Automatic columns', [columns]);
+
           return columns
         }
 
@@ -8508,6 +8733,8 @@
           }
         });
 
+        this.$qas.logger.group('QasTableGenerator - columns', [columns]);
+
         return columns
       },
 
@@ -8524,16 +8751,22 @@
       },
 
       resultsByFields () {
+        if (!Object.keys(this.fields).length) return []
+
         const results = quasar.extend(true, [], this.results);
 
-        return results.map((result, index) => {
+        const mappedResults = results.map((result, index) => {
           for (const key in result) {
             result.default = this.results[index];
             result[key] = humanize(this.fields[key], result[key]) || this.emptyResultText;
           }
 
           return result
-        })
+        });
+
+        this.$qas.logger.group('QasTableGenerator - resultsByFields', [mappedResults]);
+
+        return mappedResults
       },
 
       rowsPerPage () {
@@ -9247,7 +9480,7 @@
 
   var name = "@bildvitta/quasar-ui-asteroid";
   var description = "Asteroid";
-  var version$1 = "3.0.0-beta.10";
+  var version$1 = "3.0.0-beta.13";
   var author = "Bild & Vitta <systemteam@bild.com.br>";
   var license = "MIT";
   var main = "dist/asteroid.cjs.min.js";
@@ -9403,8 +9636,9 @@
     app.config.globalProperties.$qas = {
       dialog: Dialog,
       error: NotifyError,
-      success: NotifySuccess,
-      screen: Screen()
+      logger: Logger(),
+      screen: Screen(),
+      success: NotifySuccess
     };
 
     app.directive(Test.name, Test);
@@ -9462,6 +9696,7 @@
     QasTransfer: script,
     QasUploader: script$q,
     Dialog: Dialog,
+    Logger: Logger,
     NotifyError: NotifyError,
     NotifySuccess: NotifySuccess,
     Screen: Screen,