@bildvitta/quasar-ui-asteroid 3.13.0-beta.5 → 3.13.0-beta.7

package/package.json

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

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.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>
@@ -57,6 +57,11 @@ export default {
   mixins: [viewMixin],
 
   props: {
+    beforeSubmit: {
+      default: null,
+      type: Function
+    },
+
     cancelButtonLabel: {
       default: 'Voltar',
       type: String
@@ -125,14 +130,14 @@ export default {
       type: Boolean
     },
 
+    useNotifySuccess: {
+      type: Boolean,
+      default: true
+    },
+
     useSubmitButton: {
       default: true,
       type: Boolean
-    },
-
-    beforeSubmit: {
-      default: null,
-      type: Function
     }
   },
 
@@ -447,7 +452,9 @@ export default {
           `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
         )
 
-        NotifySuccess(response.data.status.text || this.defaultNotifyMessages.success)
+        if (this.useNotifySuccess) {
+          NotifySuccess(response.data.status.text || this.defaultNotifyMessages.success)
+        }
       } catch (error) {
         const errors = error?.response?.data?.errors
         const message = error?.response?.data?.status?.text

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/gallery-card/QasGalleryCard.vue

@@ -20,7 +20,21 @@
       <slot name="image">
         <q-img class="rounded-borders" height="100%" :src="card.url" v-bind="imageProps">
           <template #error>
-            <slot name="image-error" />
+            <div :class="errorClasses">
+              <div class="text-center">
+                <slot name="image-error-icon">
+                  <div v-if="errorIcon">
+                    <q-icon :name="errorIcon" size="sm" />
+                  </div>
+                </slot>
+
+                <slot name="image-error">
+                  <div>
+                    {{ errorMessage }}
+                  </div>
+                </slot>
+              </div>
+            </div>
           </template>
         </q-img>
       </slot>
@@ -53,6 +67,16 @@ export default {
       type: Boolean
     },
 
+    errorIcon: {
+      type: String,
+      default: ''
+    },
+
+    errorMessage: {
+      type: String,
+      default: ''
+    },
+
     gridGeneratorProps: {
       type: Object,
       default: () => ({})
@@ -108,6 +132,19 @@ export default {
         'text-grey-9': !this.disable,
         'q-mb-md': this.hasActions || this.card.name
       }
+    },
+
+    errorClasses () {
+      return [
+        'bg-grey-4',
+        'flex',
+        'full-height',
+        'full-width',
+        'items-center',
+        'justify-center',
+        'text-grey-9',
+        'text-subtitle2'
+      ]
     }
   }
 }

package/src/components/gallery-card/QasGalleryCard.yml

@@ -9,6 +9,16 @@ props:
     default: {}
     type: Object
 
+  error-icon:
+    desc: Ícone que aparecerá quando uma imagem falhar ao carregar.
+    default: ''
+    type: String
+
+  error-message:
+    desc: Texto que aparecerá quando uma imagem falhar ao carregar.
+    default: ''
+    type: String
+
   card:
     desc: Informações do card, como name (nome) e url.
     default: {}
@@ -41,6 +51,9 @@ slots:
   image-error:
     desc: Slot para acessar o conteúdo da imagem quando existe algum erro com a imagem.
 
+  image-error-icon:
+    desc: Slot para acessar o conteúdo de ícone quando existe algum erro com a imagem.
+
   header:
     desc: Slot para acessar o conteúdo do cabeçalho.
 

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/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/uploader/QasUploader.vue

@@ -116,7 +116,7 @@ export default {
     },
 
     galleryCardProps: {
-      type: Object,
+      type: [Object, Function],
       default: () => ({})
     },
 

package/src/components/uploader/private/PvUploaderGalleryCard.vue

@@ -1,28 +1,6 @@
 <template>
   <div>
     <qas-gallery-card v-bind="defaultGalleryCardProps">
-      <!-- este template é para quando existe um erro carregar uma imagem de um arquivo como PDF, DOCX. -->
-      <template #image-error>
-        <div class="text-uppercase" :class="errorClasses">
-          {{ fileType }}
-        </div>
-      </template>
-
-      <!-- este template é para quando existe um erro ao fazer um UPLOAD! -->
-      <template v-if="hasError" #image>
-        <div :class="errorClasses">
-          <div class="q-pa-sm text-center">
-            <div>
-              <q-icon name="sym_r_cancel" size="sm" />
-            </div>
-
-            <div class="q-mt-sm">
-              Falha ao carregar arquivo.
-            </div>
-          </div>
-        </div>
-      </template>
-
       <template v-if="hasGenerator" #bottom>
         <div>
           <qas-grid-generator v-if="hasGridGenerator" v-bind="defaultGridGeneratorProps" />
@@ -80,7 +58,7 @@ export default {
     },
 
     galleryCardProps: {
-      type: Object,
+      type: [Object, Function],
       default: () => ({})
     },
 
@@ -112,7 +90,8 @@ export default {
   data () {
     return {
       dialogValues: {},
-      showDialog: false
+      showDialog: false,
+      hasErrorOnUploadedFile: false
     }
   },
 
@@ -136,21 +115,67 @@ export default {
       }
     },
 
+    normalizedCardGalleryProps () {
+      const isFunction = typeof this.galleryCardProps === 'function'
+
+      const functionPayload = {
+        hasError: this.hasErrorOnUploadedFile,
+        file: this.file
+      }
+
+      return (isFunction ? this.galleryCardProps(functionPayload) : this.galleryCardProps) || {}
+    },
+
     defaultGalleryCardProps () {
-      const { list, buttonProps, ...actionsMenuProps } = this.galleryCardProps.actionsMenuProps || {}
+      const {
+        list,
+        imageProps,
+
+        buttonProps: btnProps,
+        errorMessage: error,
+        errorIcon: icon,
+
+        ...actionsMenuProps
+      } = this.normalizedCardGalleryProps
+
+      /**
+       * Quando hasError for "true", significa que é falha ao enviar o arquivo ao servidor (upload), e nestes casos:
+       *
+       * buttonProps: deve sempre ser possível excluir a imagem, por isso o disable do botão é "false".
+       * errorMessage: o label do erro deve ser "Falha ao carregar arquivo."
+       * errorIcon: o ícone do erro deve ser "sym_r_cancel".
+       */
+      const buttonProps = this.hasError ? { ...btnProps, disable: false } : btnProps
+      const errorMessage = this.hasError ? 'Falha ao carregar arquivo.' : error || this.fileType
+      const errorIcon = this.hasError ? 'sym_r_cancel' : icon
 
       return {
-        ...this.galleryCardProps,
         disable: this.hasError,
 
+        ...this.normalizedCardGalleryProps,
+
+        errorIcon,
+        errorMessage,
+
+        imageProps: {
+          ...imageProps,
+
+          // callback para sinalizar que houve erro em arquivos já upados.
+          onError: () => {
+            this.hasErrorOnUploadedFile = true
+
+            this.galleryCardProps.imageProps?.onError?.()
+          }
+        },
+
         actionsMenuProps: {
+          ...actionsMenuProps,
+
           buttonProps: {
             disable: false,
             ...buttonProps
           },
 
-          ...actionsMenuProps,
-
           list: {
             ...(
               this.hasEditButton &&
@@ -216,21 +241,8 @@ export default {
       }
     },
 
-    errorClasses () {
-      return [
-        'bg-grey-4',
-        'flex',
-        'full-height',
-        'full-width',
-        'items-center',
-        'justify-center',
-        'text-grey-9',
-        'text-subtitle2'
-      ]
-    },
-
     fileName () {
-      return this.url.split('/').pop()
+      return this.url ? this.url.split('/').pop() : ''
     },
 
     fileType () {
@@ -259,6 +271,7 @@ export default {
 
     hasFormFields () {
       const { fields } = this.defaultFormGeneratorProps
+
       return !!Object.keys(fields).length
     },
 
@@ -288,7 +301,19 @@ export default {
     },
 
     normalizedModelValue () {
-      return this.useObjectModel && !this.hasError ? this.currentModelValue : this.file
+      return (
+        this.useObjectModel && !this.hasError
+          ? this.currentModelValue
+
+          /**
+           * Quando da erro ao enviar, a url não é enviada no model, desta forma para aparecer a imagem
+           * de "Falha ao enviar arquivo." é necessário que a "url" exista, então é criada uma url fake.
+           *
+           * Obs: esta URL fake é usada apenas para aparecer a imagem de "Falha ao enviar arquivo."
+           * e não é adicionada ao model.
+           */
+          : { url: this.url || 'error-on-upload-file', ...this.file }
+      )
     },
 
     url () {