@bildvitta/quasar-ui-asteroid 3.13.0-beta.6 → 3.13.0-beta.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.13.0-beta.6",
+  "version": "3.13.0-beta.8",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -47,6 +47,7 @@
     "autonumeric": "^4.9.0",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
+    "debug": "^4.3.4",
     "fuse.js": "^6.6.2",
     "humps": "^2.0.1",
     "lodash-es": "^4.17.21",

package/src/components/app-user/QasAppUser.vue

@@ -17,7 +17,7 @@
         <div class="ellipsis qas-app-user__menu-name">{{ userName }}</div>
         <div class="ellipsis">{{ user.email }}</div>
 
-        <qas-select v-if="hasCompaniesSelect" v-model="companiesModel" class="q-my-md" v-bind="defaultCompanyProps" @update:model-value="setCompanies" />
+        <qas-select v-if="hasCompaniesSelect" v-model="companiesModel" class="q-my-md" v-bind="defaultCompanyProps" data-cy="app-user-companies-select" @update:model-value="setCompanies" />
 
         <q-list class="q-mt-md">
           <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="user.to">
@@ -103,7 +103,6 @@ export default {
   computed: {
     defaultCompanyProps () {
       return {
-        dataCy: 'app-user-companies-select',
         loading: this.loading,
 
         ...this.companyProps,

package/src/components/app-user/QasAppUser.yml

@@ -42,3 +42,12 @@ props:
 events:
   '@sign-out -> function()':
     desc: Dispara quando o botão de "sair" é clicado.
+
+selectors:
+  app-user:
+    desc: Seletor do componente.
+    examples: ['data-cy="app-user"']
+
+  app-user-companies-select:
+    desc: Seletor do select de vínculos de empresas.
+    examples: ['data-cy="app-user-companies-select"']

package/src/components/dialog/QasDialog.vue

@@ -1,12 +1,12 @@
 <template>
-  <q-dialog ref="dialog" class="qas-dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
+  <q-dialog ref="dialog" class="qas-dialog" data-cy="dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
     <div class="bg-white q-pa-lg" :style="style">
       <header v-if="hasHeader" class="q-mb-lg">
         <slot name="header">
           <div class="items-center justify-between row">
-            <h5 class="text-grey-9 text-h5">{{ card.title }}</h5>
+            <h5 class="text-grey-9 text-h5" data-cy="dialog-title">{{ card.title }}</h5>
 
-            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" icon="sym_r_close" variant="tertiary" />
+            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
           </div>
         </slot>
       </header>
@@ -14,18 +14,18 @@
       <section class="text-body1 text-grey-8">
         <component :is="componentTag" ref="form" v-bind="componentProps">
           <slot name="description">
-            <component :is="descriptionComponentTag">{{ card.description }}</component>
+            <component :is="descriptionComponentTag" data-cy="dialog-description">{{ card.description }}</component>
           </slot>
 
           <div v-if="!isInfoDialog">
             <slot name="actions">
               <qas-actions v-bind="formattedActionsProps">
                 <template v-if="hasOk" #primary>
-                  <qas-btn v-close-popup="!useForm" class="full-width" variant="primary" v-bind="defaultOk" />
+                  <qas-btn v-close-popup="!useForm" class="full-width" data-cy="dialog-ok-btn" variant="primary" v-bind="defaultOk" />
                 </template>
 
                 <template v-if="hasCancel" #secondary>
-                  <qas-btn v-close-popup class="full-width" v-bind="defaultCancel" variant="secondary" />
+                  <qas-btn v-close-popup class="full-width" data-cy="dialog-cancel-btn" v-bind="defaultCancel" variant="secondary" />
                 </template>
               </qas-actions>
             </slot>

package/src/components/dialog/QasDialog.yml

@@ -90,3 +90,28 @@ events:
   '@ok: -> function ()':
     desc: Dispara toda vez que é clicado no botão "ok" ou quando useForm for true e o for clicado "enter" estando com foco em algum input (evento de submit).
 
+selectors:
+  dialog:
+    desc: Seletor do componente.
+    examples: ['data-cy="dialog"']
+
+  dialog-cancel-btn:
+    desc: Seletor do botão de cancelar do componente.
+    examples: ['data-cy="dialog-cancel-btn"']
+
+  dialog-close-btn:
+    desc: Seletor do botão de fechar do componente.
+    examples: ['data-cy="dialog-close-btn"']
+
+  dialog-description:
+    desc: Seletor da descrição do componente.
+    examples: ['data-cy="dialog-description"']
+
+  dialog-ok-btn:
+    desc: Seletor do botão de confirmar do componente.
+    examples: ['data-cy="dialog-ok-btn"']
+
+  dialog-title:
+    desc: Seletor do título do componente.
+    examples: ['data-cy="dialog-title"']
+

package/src/components/field/QasField.yml

@@ -29,3 +29,8 @@ events:
       value:
         desc: Novo valor do model.
         type: [Object, Array, String, Number, Boolean]
+
+selectors:
+  '[fieldName]':
+    desc: Seletor criado a partir da propriedade "name" do campo.
+    examples: ['data-cy="email"', 'data-cy="phone"', 'data-cy="password"']

package/src/components/filters/QasFilters.vue

@@ -39,12 +39,15 @@
 
 <script>
 import PvFiltersButton from './private/PvFiltersButton.vue'
+import debug from 'debug'
 
 import { camelize, camelizeKeys, decamelize } from 'humps'
 import { humanize, parseValue } from '../../helpers/filters.js'
 import contextMixin from '../../mixins/context.js'
 import { getState, getAction } from '@bildvitta/store-adapter'
 
+const log = debug('asteroid-ui:qas-filters')
+
 export default {
   name: 'QasFilters',
 
@@ -281,11 +284,6 @@ 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 getAction.call(this, {
           entity: this.entity,
           key: 'fetchFilters',
@@ -294,18 +292,12 @@ export default {
 
         this.$emit('fetch-success', response)
 
-        this.$qas.logger.group(
-          `QasFilters - fetchFilters -> resposta da action ${this.entity}/fetchFilters`, [response]
-        )
+        log(`[${this.entity}]:fetchFilters:success`, 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 }
-        )
+        log(`[${this.entity}]:fetchFilters:error`, error)
       } finally {
         this.isFetching = false
       }

package/src/components/filters/QasFilters.yml

@@ -141,3 +141,24 @@ events:
       value:
         desc: Retorna todos os filtros realizados.
         type: Object
+
+selectors:
+  filters-btn:
+    desc: Seletor do botão de filtro.
+    examples: ['data-cy="filters-btn"']
+
+  filters-clear-btn:
+    desc: Seletor do botão de limpar do filtro.
+    examples: ['data-cy="filters-clear-btn"']
+
+  'filters-[optionText]-chip':
+    desc: Seletor do chip de acordo com o texto da opção selecionada.
+    examples: ['data-cy="filters-Ativo-chip"']
+
+  'filters-[fieldName]-field':
+    desc: Seletor criado a partir da propriedade "name" do campo.
+    examples: ['data-cy="filters-email-field"', 'data-cy="filters-phone-field"', 'data-cy="filters-password-field"']
+
+  filters-submit-btn:
+    desc: Seletor do botão de submit do filtro.
+    examples: ['data-cy="filters-submit-btn"']

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

@@ -10,11 +10,11 @@
       <slot v-if="useActions" name="actions">
         <qas-actions>
           <template v-if="useSubmitButton" #primary>
-            <qas-btn class="qas-form-view__btn" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" variant="primary" />
+            <qas-btn class="qas-form-view__btn" :data-cy="`form-view-submit-btn-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" variant="primary" />
           </template>
 
           <template v-if="hasCancelButton" #secondary>
-            <qas-btn v-close-popup class="qas-form-view__btn" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" type="button" variant="secondary" @click="cancel" />
+            <qas-btn v-close-popup class="qas-form-view__btn" :data-cy="`form-view-cancel-btn-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" type="button" variant="secondary" @click="cancel" />
           </template>
         </qas-actions>
       </slot>
@@ -33,19 +33,21 @@
 </template>
 
 <script>
-import { isEqualWith } from 'lodash-es'
-import { getAction } from '@bildvitta/store-adapter'
-import { extend } from 'quasar'
-import { onBeforeRouteLeave } from 'vue-router'
-
-import { useHistory } from '../../composables'
-import { NotifyError, NotifySuccess } from '../../plugins'
-
 import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
 
+import { NotifyError, NotifySuccess } from '../../plugins'
+import { useHistory } from '../../composables'
 import { viewMixin } from '../../mixins'
 
+import debug from 'debug'
+import { extend } from 'quasar'
+import { getAction } from '@bildvitta/store-adapter'
+import { isEqualWith } from 'lodash-es'
+import { onBeforeRouteLeave } from 'vue-router'
+
+const log = debug('asteroid-ui:qas-form-view')
+
 export default {
   name: 'QasFormView',
 
@@ -57,6 +59,11 @@ export default {
   mixins: [viewMixin],
 
   props: {
+    beforeSubmit: {
+      default: null,
+      type: Function
+    },
+
     cancelButtonLabel: {
       default: 'Voltar',
       type: String
@@ -125,14 +132,14 @@ export default {
       type: Boolean
     },
 
+    useNotifySuccess: {
+      type: Boolean,
+      default: true
+    },
+
     useSubmitButton: {
       default: true,
       type: Boolean
-    },
-
-    beforeSubmit: {
-      default: null,
-      type: Function
     }
   },
 
@@ -255,11 +262,6 @@ 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()
@@ -281,10 +283,6 @@ export default {
           ...externalPayload
         }
 
-        this.$qas.logger.group(
-          `QasFormView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`, [payload]
-        )
-
         const response = await getAction.call(this, {
           entity: this.entity,
           key: 'fetchSingle',
@@ -307,28 +305,19 @@ export default {
 
         result && Object.assign(modelValue, result)
 
-        this.$qas.logger.group(
-          `QasFormView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
-        )
-
         if (this.useDialogOnUnsavedChanges) {
           this.cachedResult = extend(true, {}, result || modelValue)
-          this.$qas.logger.group('QasFormView - fetchSingle -> cachedResult', [this.cachedResult])
         }
 
         this.$emit('update:modelValue', modelValue)
         this.$emit('fetch-success', response, this.modelValue)
 
-        this.$qas.logger.group('QasFormView - fetchSingle -> modelValue', [modelValue])
+        log(`[${this.entity}]:fetchSingle:success`, { response, modelValue })
       } catch (error) {
         this.mx_fetchError(error)
         this.$emit('fetch-error', error)
 
-        this.$qas.logger.group(
-          `QasFormView - fetchSingle -> exceção da action ${this.entity}/fetchSingle`,
-          [error],
-          { error: true }
-        )
+        log(`[${this.entity}]:fetchSingle:error`, error)
       } finally {
         this.mx_isFetching = false
       }
@@ -419,10 +408,6 @@ export default {
           ...externalPayload
         }
 
-        this.$qas.logger.group(
-          `QasFormView - submit -> payload do ${this.entity}/${this.mode}`, [payload]
-        )
-
         const response = await getAction.call(this, {
           entity: this.entity,
           key: this.mode,
@@ -443,11 +428,11 @@ export default {
 
         this.createSubmitSuccessEvent({ ...payload, entity: this.entity })
 
-        this.$qas.logger.group(
-          `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
-        )
+        if (this.useNotifySuccess) {
+          NotifySuccess(response.data.status.text || this.defaultNotifyMessages.success)
+        }
 
-        NotifySuccess(response.data.status.text || this.defaultNotifyMessages.success)
+        log(`[${this.entity}]:submit:success`, { response, modelValue })
       } catch (error) {
         const errors = error?.response?.data?.errors
         const message = error?.response?.data?.status?.text
@@ -464,11 +449,7 @@ export default {
 
         this.$emit('submit-error', error)
 
-        this.$qas.logger.group(
-          `QasFormView - submit -> exceção da action ${this.entity}/${this.mode}`,
-          [error],
-          { error: true }
-        )
+        log(`[${this.entity}]:submit:error`, error)
       } finally {
         this.isSubmitting = false
       }

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

@@ -138,6 +138,11 @@ props:
     default: true
     type: Boolean
 
+  use-notify-success:
+    desc: Controla se vai ter ou não notificação de sucesso ao finalizar o submit.
+    default: true
+    type: Boolean
+
   use-submit-button:
     desc: Controla se vai ter ou não botão de submit.
     default: true
@@ -235,4 +240,11 @@ events:
         desc: Retorna todos os dados "cru" respondido na exceção do submit.
         type: Object
 
+selectors:
+  'form-view-cancel-btn-[entity]':
+    desc: Seletor do botão de cancelar.
+    examples: ['data-cy="form-view-cancel-btn-users"']
 
+  'form-view-submit-btn-[entity]':
+    desc: Seletor do botão de salvar.
+    examples: ['data-cy="form-view-submit-btn-users"']

package/src/components/gallery/QasGallery.yml

@@ -169,3 +169,20 @@ events:
         desc: Index da imagem que seria deletada.
         default: []
         type: Array
+
+selectors:
+  gallery-btn-show-more:
+    desc: Seletor do botão "mostrar mais".
+    examples: ['data-cy="gallery-btn-show-more"']
+
+  gallery-carousel:
+    desc: Seletor do carousel.
+    examples: ['data-cy="gallery-carousel"']
+
+  'gallery-carousel-slide-[index]':
+    desc: Seletor pelo index do slide do carousel.
+    examples: ['data-cy="gallery-carousel-slide-0"', 'data-cy="gallery-carousel-slide-1"']
+
+  'gallery-image-[index]':
+    desc: Seletor pelo index da imagem da galeria.
+    examples: ['data-cy="gallery-image-0"', 'data-cy="gallery-image-1"']

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

@@ -73,3 +73,11 @@ slots:
         default: {}
         type: Object
 
+selectors:
+  'grid-generator-[fieldName]-field':
+    desc: Seletor do título do campo.
+    examples: ['data-cy="grid-generator-email-field"', 'data-cy="grid-generator-name-field"']
+
+  'grid-generator-[fieldName]-result':
+    desc: Seletor do conteúdo do campo.
+    examples: ['data-cy="grid-generator-email-result"', 'data-cy="grid-generator-name-result"']

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

@@ -39,11 +39,14 @@
 </template>
 
 <script>
-import { viewMixin, contextMixin } from '../../mixins'
 import QasFilters from '../filters/QasFilters.vue'
 import QasPagination from '../pagination/QasPagination.vue'
+import debug from 'debug'
 import { extend } from 'quasar'
 import { getState, getAction } from '@bildvitta/store-adapter'
+import { viewMixin, contextMixin } from '../../mixins'
+
+const log = debug('asteroid-ui:qas-list-view')
 
 export default {
   components: {
@@ -191,10 +194,6 @@ export default {
           ...externalPayload
         }
 
-        this.$qas.logger.group(
-          `QasListView - fetchList -> Payload do parâmetro do ${this.entity}/fetchList`, [payload]
-        )
-
         const response = await getAction.call(this, {
           entity: this.entity,
           key: 'fetchList',
@@ -216,19 +215,13 @@ export default {
 
         this.$emit('fetch-success', response)
 
-        this.$qas.logger.group(
-          `QasListView - fetchList -> resposta da action ${this.entity}/fetchList`, [response]
-        )
+        log(`[${this.entity}]:fetchList:success`, 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 }
-        )
+        log(`[${this.entity}]:fetchList:error`, error)
       } finally {
         this.mx_isFetching = false
       }

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

@@ -65,10 +65,14 @@ import QasBtn from '../btn/QasBtn.vue'
 import QasFormGenerator from '../form-generator/QasFormGenerator.vue'
 import QasInput from '../input/QasInput.vue'
 import QasLabel from '../label/QasLabel.vue'
+
+import { constructObject } from '../../helpers'
+
 import { TransitionGroup } from 'vue'
+import debug from 'debug'
 import { extend } from 'quasar'
 
-import { constructObject } from '../../helpers'
+const log = debug('asteroid-ui:qas-nested-fields')
 
 export default {
   name: 'QasNestedFields',
@@ -392,7 +396,7 @@ export default {
         this.setFocus()
       })
 
-      this.$qas.logger.group('QasNestedFields - add', [payload])
+      log('add', payload)
 
       this.updateModelValue()
     },
@@ -410,7 +414,7 @@ export default {
         ? this.nested.splice(index, 1)
         : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
 
-      this.$qas.logger.group('QasNestedFields - destroy', [{ index, row }])
+      log('destroy', { index, row })
 
       this.updateModelValue()
     },

package/src/components/search-input/QasSearchInput.yml

@@ -40,4 +40,9 @@ events:
     params:
       value:
         desc: Novo valor do model.
-        type: String
+        type: String
+
+selectors:
+  search-input:
+    desc: Seletor do campo de pesquisa.
+    examples: ['data-cy="search-input"']

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

@@ -22,8 +22,12 @@
 
 <script>
 import viewMixin from '../../mixins/view'
+
 import { markRaw } from 'vue'
 import { getGetter, getAction } from '@bildvitta/store-adapter'
+import debug from 'debug'
+
+const log = debug('asteroid-ui:qas-single-view')
 
 export default {
   name: 'QasSingleView',
@@ -85,11 +89,6 @@ export default {
       try {
         const payload = { id: this.id, url: this.url, ...externalPayload }
 
-        this.$qas.logger.group(
-          `QasSingleView - fetchSingle -> payload do parâmetro do ${this.entity}/fetchSingle`,
-          [payload]
-        )
-
         const response = await getAction.call(this, {
           entity: this.entity,
           key: 'fetchSingle',
@@ -108,20 +107,14 @@ export default {
           metadata: this.mx_metadata
         })
 
-        this.$qas.logger.group(
-          `QasSingleView - fetchSingle -> resposta da action ${this.entity}/fetchSingle`, [response]
-        )
-
         this.$emit('fetch-success', response)
+
+        log(`[${this.entity}]:fetchSingle: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 }
-        )
+        log(`[${this.entity}]:fetchSingle:error`, error)
       } finally {
         this.mx_isFetching = false
       }

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

@@ -159,8 +159,6 @@ export default {
           columnByField(this.fields[index])
         }
 
-        this.$qas.logger.group('QasTableGenerator - Automatic columns', [columns])
-
         return columns
       }
 
@@ -173,8 +171,6 @@ export default {
         }
       })
 
-      this.$qas.logger.group('QasTableGenerator - columns', [columns])
-
       return columns
     },
 
@@ -199,8 +195,6 @@ export default {
         return result
       })
 
-      this.$qas.logger.group('QasTableGenerator - resultsByFields', [mappedResults])
-
       return mappedResults
     },
 

package/src/plugins/index.js

@@ -1,6 +1,5 @@
 import Delete from './delete/Delete.js'
 import Dialog from './dialog/Dialog.js'
-import Logger from './logger/Logger.js'
 import NotifyError from './notify-error/NotifyError.js'
 import NotifySuccess from './notify-success/NotifySuccess.js'
 import Screen from './screen/Screen.js'
@@ -8,7 +7,6 @@ import Screen from './screen/Screen.js'
 export {
   Delete,
   Dialog,
-  Logger,
   NotifyError,
   NotifySuccess,
   Screen

package/src/vue-plugin.js

@@ -70,8 +70,7 @@ import {
   Dialog,
   NotifyError,
   NotifySuccess,
-  Screen,
-  Logger
+  Screen
 } from './plugins'
 
 import packageInfo from '../package.json'
@@ -152,7 +151,6 @@ async function install (app) {
     delete: params => Delete.call(app.config.globalProperties, params),
     dialog: Dialog,
     error: NotifyError,
-    logger: Logger(),
     screen: Screen(),
     success: NotifySuccess
   }
@@ -230,7 +228,6 @@ export {
 
   // plugins
   Dialog,
-  Logger,
   NotifyError,
   NotifySuccess,
   Screen,

package/src/plugins/logger/Logger.js

@@ -1,44 +0,0 @@
-export default () => {
-  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))
-    }
-  }
-}

package/src/plugins/logger/Logger.yml

@@ -1,9 +0,0 @@
-type: component
-
-meta:
-  desc: Plugin para adicionar loggers.
-
-inject:
-  'this.$qas.logger':
-    default: {}
-    type: Object