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

package/dist/vetur/asteroid-attributes.json

@@ -43,10 +43,6 @@
     "description": "Texto do componente.",
     "type": "string"
   },
-  "qas-app-bar/is-auth": {
-    "description": "Controla se mostra ou não o menu de usuário.",
-    "type": "boolean"
-  },
   "qas-app-bar/notifications": {
     "description": "Ícone de notificação que fica ao lado do menu de usuário.",
     "type": "object"
@@ -131,14 +127,6 @@
     "description": "Rótulo do botão.",
     "type": "string"
   },
-  "qas-card/image-position": {
-    "description": "Posição da imagem \"background-position\".",
-    "type": "string"
-  },
-  "qas-card/form-mode": {
-    "description": "Modo de formulário, altera o estilo quando está em uma pagina de formulário.",
-    "type": "boolean"
-  },
   "qas-card/gutter": {
     "description": "Espaçamento dentro <q-card-section /> onde fica o slot \"default\".",
     "type": "string"
@@ -147,6 +135,18 @@
     "description": "Imagens do carousel.",
     "type": "array"
   },
+  "qas-card/image-position": {
+    "description": "Posição da imagem \"background-position\".",
+    "type": "string"
+  },
+  "qas-card/outlined": {
+    "description": "Insere uma borda sólida em volta do componente.",
+    "type": "boolean"
+  },
+  "qas-card/unelevated": {
+    "description": "Remove a sombra do componente.",
+    "type": "boolean"
+  },
   "qas-card/use-header": {
     "description": "Controla se vai ter ou não o header com carousel.",
     "type": "boolean"

package/dist/vetur/asteroid-tags.json

@@ -27,7 +27,6 @@
   },
   "qas-app-bar": {
     "attributes": [
-      "is-auth",
       "notifications",
       "title",
       "user"
@@ -79,10 +78,11 @@
   },
   "qas-card": {
     "attributes": [
-      "image-position",
-      "form-mode",
       "gutter",
       "images",
+      "image-position",
+      "outlined",
+      "unelevated",
       "use-header"
     ],
     "description": "Componente de card."

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.13",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/app-bar/QasAppBar.yml

@@ -4,10 +4,6 @@ meta:
   desc: Cria um seção para alertar sobre um conteúdo.
 
 props:
-  is-auth:
-    desc: Controla se mostra ou não o menu de usuário.
-    type: Boolean
-
   notifications:
     desc: Ícone de notificação que fica ao lado do menu de usuário.
     type: Object

package/src/components/card/QasCard.yml

@@ -4,15 +4,6 @@ meta:
   desc: Componente de card.
 
 props:
-  image-position:
-    desc: Posição da imagem "background-position".
-    default: center
-    type: String
-
-  form-mode:
-    desc: Modo de formulário, altera o estilo quando está em uma pagina de formulário.
-    type: Boolean
-
   gutter:
     desc: Espaçamento dentro <q-card-section /> onde fica o slot "default".
     default: sm
@@ -24,6 +15,19 @@ props:
     default: []
     type: Array
 
+  image-position:
+    desc: Posição da imagem "background-position".
+    default: center
+    type: String
+
+  outlined:
+    desc: Insere uma borda sólida em volta do componente.
+    type: Boolean
+
+  unelevated:
+    desc: Remove a sombra do componente.
+    type: Boolean
+
   use-header:
     desc: Controla se vai ter ou não o header com carousel.
     type: Boolean

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -104,7 +104,7 @@ export default {
   },
 
   watch: {
-    value (current, original) {
+    modelValue (current, original) {
       if (!current || this.useTimeOnly) {
         this.currentValue = current
         return

package/src/components/delete/QasDelete.vue

@@ -106,7 +106,13 @@ export default {
       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!')
 
@@ -120,9 +126,17 @@ export default {
         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 {
         Loading.hide()
         this.$emit('update:deleting', false)

package/src/components/filters/QasFilters.vue

@@ -4,12 +4,12 @@
       <div v-if="showSearch" class="col">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <q-input v-model="search" :debounce="debounce" dense :placeholder="searchPlaceholder" type="search">
+            <qas-input v-model="search" :debounce="debounce" dense hide-bottom-space :outlined="false" :placeholder="searchPlaceholder" type="search">
               <template #append>
-                <qas-btn v-if="hasSearch" icon="o_clear" unelevated @click="clearSearch" />
-                <qas-btn v-if="!debounce" icon="o_search" type="submit" unelevated @click="filter()" />
+                <qas-btn v-if="hasSearch" color="grey-9" flat icon="o_clear" unelevated @click="clearSearch" />
+                <qas-btn v-if="!debounce" color="grey-9" flat icon="o_search" type="submit" unelevated @click="filter()" />
               </template>
-            </q-input>
+            </qas-input>
           </q-form>
         </slot>
       </div>
@@ -241,11 +241,26 @@ export default {
       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
       }

package/src/components/form-view/QasFormView.vue

@@ -211,8 +211,10 @@ export default {
   },
 
   created () {
-    onBeforeRouteLeave(this.beforeRouteLeave)
+    this.useDialogOnUnsavedChanges && onBeforeRouteLeave(this.beforeRouteLeave)
+
     window.addEventListener('delete-success', this.setIgnoreRouterGuard)
+
     this.fetch()
   },
 
@@ -243,6 +245,11 @@ export default {
         return next()
       }
 
+      this.$qas.logger.group(
+        'QasFormView - beforeRouteLeave -> dialog chamado, modelValue diferente do cachedResult',
+        [{ modelValue: clonedModelValue, cachedResult: clonedCachedResult }]
+      )
+
       this.handleDialog(() => {
         this.ignoreRouterGuard = true
         next()
@@ -257,10 +264,14 @@ export default {
       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)
@@ -273,20 +284,36 @@ export default {
           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 && 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
       }
@@ -352,11 +379,14 @@ export default {
       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 = extend(true, {}, this.modelValue)
         }
@@ -364,11 +394,18 @@ export default {
         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)
@@ -376,6 +413,12 @@ export default {
         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
       }

package/src/components/grid-generator/QasGridGenerator.vue

@@ -61,6 +61,11 @@ export default {
   computed: {
     formattedFields () {
       if (this.useEmptyResult) {
+        this.$qas.logger.group(
+          'QasGridGenerator - formattedFields -> this.useEmptyResult tem valor "true"',
+          [this.fields]
+        )
+
         return this.fields
       }
 
@@ -78,6 +83,8 @@ export default {
         }
       }
 
+      this.$qas.logger.group('QasGridGenerator - formattedFields', [fields])
+
       return fields
     },
 
@@ -93,11 +100,19 @@ export default {
 
       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
     }
   }

package/src/components/input/QasInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue">
+    <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot :name="name" v-bind="context || {}" />
       </template>
@@ -97,7 +97,7 @@ export default {
 
   watch: {
     mask () {
-      const input = this.inputReference.$el?.querySelector('input')
+      const input = this.getInput()
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : ''
@@ -131,12 +131,30 @@ export default {
     },
 
     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')
     }
   }
 }

package/src/components/list-view/QasListView.vue

@@ -144,15 +144,18 @@ export default {
       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)
@@ -166,10 +169,20 @@ export default {
         })
 
         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
       }

package/src/components/nested-fields/QasNestedFields.vue

@@ -75,7 +75,6 @@ import { TransitionGroup } from 'vue'
 
 import { constructObject } from '../../helpers'
 import { extend } from 'quasar'
-import { camelize } from 'humps'
 
 export default {
   name: 'QasNestedFields',
@@ -225,13 +224,7 @@ export default {
     },
 
     children () {
-      const field = extend(true, {}, this.field)
-
-      for (const key in field?.children) {
-        field.children[key].name = camelize(field?.children[key].name)
-      }
-
-      return field?.children
+      return this.field?.children
     },
 
     showDestroyBtn () {
@@ -282,13 +275,17 @@ export default {
 
   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()
     },
 
@@ -308,6 +305,8 @@ export default {
         ? 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()
     },
 

package/src/components/page-header/QasPageHeader.vue

@@ -17,12 +17,21 @@
 <script>
 import { castArray } from 'lodash-es'
 import { useHistory } from '../../composables'
+import { createMetaMixin } from 'quasar'
 
 const { hasPreviousRoute, history, getPreviousRoute } = useHistory()
 
 export default {
   name: 'QasPageHeader',
 
+  mixins: [
+    createMetaMixin(function () {
+      return {
+        title: this.title
+      }
+    })
+  ],
+
   props: {
     breadcrumbs: {
       default: '',
@@ -85,12 +94,6 @@ export default {
 
       return lastIndex === index ? 'text-grey-7' : 'text-primary'
     }
-  },
-
-  meta () {
-    return {
-      title: this.title
-    }
   }
 }
 </script>

package/src/components/search-box/QasSearchBox.vue

@@ -1,10 +1,10 @@
 <template>
   <qas-box>
-    <q-input v-model="search" clearable :disable="!list.length" outlined :placeholder="placeholder">
+    <qas-input v-model="search" clearable :disable="!list.length" hide-bottom-space :placeholder="placeholder">
       <template #append>
         <q-icon color="primary" name="o_search" />
       </template>
-    </q-input>
+    </qas-input>
 
     <div class="overflow-auto q-mt-xs relative-position" :style="contentStyle">
       <slot v-if="hasResults" />

package/src/components/single-view/QasSingleView.vue

@@ -83,11 +83,15 @@ export default {
       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)
@@ -100,10 +104,20 @@ export default {
           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
       }

package/src/components/table-generator/QasTableGenerator.vue

@@ -101,6 +101,8 @@ export default {
           columnByField(this.fields[index])
         }
 
+        this.$qas.logger.group('QasTableGenerator - Automatic columns', [columns])
+
         return columns
       }
 
@@ -113,6 +115,8 @@ export default {
         }
       })
 
+      this.$qas.logger.group('QasTableGenerator - columns', [columns])
+
       return columns
     },
 
@@ -129,9 +133,11 @@ export default {
     },
 
     resultsByFields () {
+      if (!Object.keys(this.fields).length) return []
+
       const results = 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
@@ -139,6 +145,10 @@ export default {
 
         return result
       })
+
+      this.$qas.logger.group('QasTableGenerator - resultsByFields', [mappedResults])
+
+      return mappedResults
     },
 
     rowsPerPage () {