@bildvitta/quasar-ui-asteroid 3.12.0 → 3.13.0-beta.0

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row">
+  <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row" data-cy="app-user">
     <div class="relative-position">
       <qas-avatar :image="user.photo" :size="avatarSize" :title="userName" />
       <q-badge v-if="hasNotifications" color="red" floating>{{ notifications.count }}</q-badge>
@@ -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" label="Vínculo" :loading="loading" :options="companiesOptions" @update:model-value="setCompanies" />
+        <qas-select v-if="hasCompaniesSelect" v-model="companiesModel" class="q-my-md" data-cy="app-user-companies-select" label="Vínculo" :loading="loading" :options="companiesOptions" @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">

package/src/components/dialog/QasDialog.vue

@@ -12,26 +12,26 @@
       </header>
 
       <section class="text-body1 text-grey-8">
-        <component :is="componentTag" ref="form">
+        <component :is="componentTag" ref="form" v-bind="componentProps">
           <slot name="description">
             <component :is="descriptionComponentTag">{{ 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" />
+                </template>
+
+                <template v-if="hasCancel" #secondary>
+                  <qas-btn v-close-popup class="full-width" v-bind="defaultCancel" variant="secondary" />
+                </template>
+              </qas-actions>
+            </slot>
+          </div>
         </component>
       </section>
-
-      <footer 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" @click="submitHandler" />
-            </template>
-
-            <template v-if="hasCancel" #secondary>
-              <qas-btn v-close-popup class="full-width" v-bind="defaultCancel" variant="secondary" />
-            </template>
-          </qas-actions>
-        </slot>
-      </footer>
     </div>
   </q-dialog>
 </template>
@@ -106,8 +106,13 @@ export default {
   },
 
   emits: [
+    // model
     'update:modelValue',
-    'validate'
+
+    // actions
+    'validate',
+    'ok',
+    'cancel'
   ],
 
   computed: {
@@ -115,7 +120,10 @@ export default {
       return {
         label: 'Cancelar',
         outline: true,
-        ...this.cancel
+
+        ...this.cancel,
+
+        onClick: this.onCancel
       }
     },
 
@@ -123,7 +131,11 @@ export default {
       return {
         label: 'Ok',
         type: this.ok?.type || this.useForm ? 'submit' : 'button',
-        ...this.ok
+
+        ...this.ok,
+
+        // adiciona somente se não estiver usando useForm pois o controle ficará no submit.
+        ...(!this.useForm && { onClick: this.onOk })
       }
     },
 
@@ -139,6 +151,16 @@ export default {
       return this.useForm ? 'q-form' : 'div'
     },
 
+    componentProps () {
+      /**
+       * adiciona evento de submit caso useForm seja true,
+       * uma vez que somente o q-form possui este evento.
+      */
+      return {
+        ...(this.useForm && { onSubmit: this.onSubmit })
+      }
+    },
+
     dialogProps () {
       return {
         ...(!this.usePlugin && { modelValue: this.modelValue }),
@@ -235,6 +257,29 @@ export default {
 
     updateModelValue (value) {
       this.$emit('update:modelValue', value)
+    },
+
+    onOk () {
+      this.ok?.onClick?.()
+      this.$emit('ok')
+    },
+
+    onCancel () {
+      this.cancel?.onClick?.()
+      this.$emit('cancel')
+    },
+
+    /**
+     * Sem este método, ao clicar enter com a prop useForm ativada a tela era recarregada,
+     * e a ação de click do botão não era chamada pois ele não esta dentro do form.
+    */
+    onSubmit (event) {
+      event.preventDefault()
+
+      if (this.hasOk) {
+        this.onOk()
+        this.submitHandler()
+      }
     }
   }
 }

package/src/components/dialog/QasDialog.yml

@@ -83,3 +83,10 @@ events:
       value:
         desc: Retorna se os campos passou ou não na validação
         type: Boolean
+
+  '@cancel: -> function ()':
+    desc: Dispara toda vez que é clicado no botão "cancel".
+
+  '@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).
+

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

@@ -213,6 +213,10 @@ export default {
   watch: {
     isSubmitting (value) {
       this.$emit('update:submitting', value)
+    },
+
+    '$route.path' () {
+      this.ignoreRouterGuard = false
     }
   },
 
@@ -374,10 +378,9 @@ export default {
       if (!this.ignoreKeysInUnsavedChanges.length) return
 
       this.ignoreKeysInUnsavedChanges.forEach(key => {
-        if (!firstValue) return
+        if (firstValue) delete firstValue[key]
 
-        delete firstValue[key]
-        delete secondValue[key]
+        if (secondValue) delete secondValue[key]
       })
     },
 
@@ -426,14 +429,16 @@ export default {
           payload
         })
 
+        const modelValue = { ...this.modelValue, ...response.data.result }
+
         if (this.useDialogOnUnsavedChanges) {
-          this.cachedResult = extend(true, {}, this.modelValue)
+          this.cachedResult = extend(true, {}, modelValue)
         }
 
         this.mx_setErrors()
         this.$emit('update:errors', this.mx_errors)
 
-        NotifySuccess(response.data.status.text || this.defaultNotifyMessages.success)
+        this.$emit('update:modelValue', modelValue)
         this.$emit('submit-success', response, this.modelValue)
 
         this.createSubmitSuccessEvent({ ...payload, entity: this.entity })
@@ -441,6 +446,8 @@ export default {
         this.$qas.logger.group(
           `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
         )
+
+        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

@@ -157,17 +157,21 @@ slots:
     desc: Slot para acessar o header.
 
 events:
-  '@fetch-success -> function(value)':
+  '@fetch-success -> function(response, modelValue)':
     desc: Dispara quando a action "fetchSingle" é executada com sucesso.
     params:
-      value:
+      response:
         desc: Retorna todos os dados "cru" respondido pelo fetch.
         type: Object
 
-  '@fetch-error -> function(value)':
+      modelValue:
+        desc: Retorna o model anterior ao fetch.
+        type: Object
+
+  '@fetch-error -> function(error)':
     desc: Dispara quando a action "fetchSingle" cai em uma exceção.
     params:
-      value:
+      error:
         desc: Retorna todos os dados "cru" respondido na exceção do fetch.
         type: Object
 
@@ -212,3 +216,23 @@ events:
       value:
         desc: Retorna se está ou não fazendo fetching de dados.
         type: Boolean
+
+  '@submit-success -> function(response, modelValue)':
+    desc: Dispara quando a action "submit" é executada com sucesso.
+    params:
+      response:
+        desc: Retorna todos os dados "cru" respondido pelo submit.
+        type: Object
+
+      modelValue:
+        desc: Retorna o model anterior ao submit.
+        type: Object
+
+  '@submit-error -> function(error)':
+    desc: Dispara quando a action "submit" cai em uma exceção.
+    params:
+      error:
+        desc: Retorna todos os dados "cru" respondido na exceção do submit.
+        type: Object
+
+

package/src/components/infinite-scroll/QasInfiniteScroll.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="qas-infinite-scroll" :style="containerStyle">
+    <q-infinite-scroll
+      ref="infiniteScroll"
+      v-bind="attributes"
+      @load="onLoad"
+    >
+      <slot />
+
+      <template #loading>
+        <div class="justify-center q-my-md row">
+          <q-spinner-dots
+            color="primary"
+            size="3em"
+          />
+        </div>
+      </template>
+    </q-infinite-scroll>
+
+    <qas-empty-result-text v-if="hasNoResults" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue'
+import { NotifyError } from '../../plugins'
+
+defineOptions({ name: 'QasInfiniteScroll' })
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+
+  limitPerPage: {
+    type: Number,
+    default: 12
+  },
+
+  url: {
+    type: String,
+    default: '',
+    required: true
+  },
+
+  params: {
+    type: Object,
+    default: () => ({})
+  },
+
+  infiniteScrollProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  maxHeight: {
+    type: String,
+    default: ''
+  }
+})
+
+defineExpose({ refresh, remove })
+
+const emits = defineEmits(['update:list'])
+
+const axios = inject('axios')
+
+const infiniteScroll = ref(null)
+
+const hasFetchingError = ref(false)
+const isFetching = ref(false)
+const hasMadeFirstFetch = ref(false)
+const count = ref(0)
+const offset = ref(0)
+
+const listLength = computed(() => model.value.length)
+
+const attributes = computed(() => ({
+  offset: 100,
+  debounce: 0,
+  ...(props.maxHeight && { scrollTarget: '.qas-infinite-scroll' }),
+  ...props.infiniteScrollProps
+}))
+
+const isEmptyList = computed(() => !listLength.value && !isFetching.value)
+
+const hasNoResults = computed(() => isEmptyList.value && hasMadeFirstFetch.value)
+
+const containerStyle = computed(() => ({
+  ...(props.maxHeight && { maxHeight: props.maxHeight, overflow: 'auto' })
+}))
+
+const model = computed({
+  get () {
+    return props.list
+  },
+
+  set (newList) {
+    emits('update:list', newList)
+  }
+})
+
+async function onLoad (_, done) {
+  const hasMadeFirstFetchAndHasNoData = hasMadeFirstFetch.value && !listLength.value
+  const hasFetchAllData = listLength.value && listLength.value >= count.value
+  const stop = hasFetchingError.value || isFetching.value || hasMadeFirstFetchAndHasNoData || hasFetchAllData
+
+  if (stop) {
+    infiniteScroll.value.stop()
+  } else {
+    infiniteScroll.value.resume()
+    await fetchList()
+  }
+
+  done()
+}
+
+async function fetchList () {
+  try {
+    isFetching.value = true
+
+    const { data } = await axios.get(props.url, {
+      params: { offset: offset.value, limit: props.limitPerPage, ...props.params }
+    })
+
+    const newList = [...model.value, ...(data.results || [])]
+
+    model.value = newList
+    offset.value = newList.length
+    count.value = data.count
+
+    /**
+     * Sinalizar que houve já uma busca, para evitar que onLoad entre em looping,
+     * após buscar uma vez e retornar uma lista vazia.
+    */
+    hasMadeFirstFetch.value = true
+  } catch {
+    NotifyError('Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.')
+
+    hasFetchingError.value = true
+  } finally {
+    isFetching.value = false
+  }
+}
+
+function refresh () {
+  count.value = 0
+  offset.value = 0
+  model.value = []
+
+  hasMadeFirstFetch.value = false
+
+  infiniteScroll.value.reset()
+  infiniteScroll.value.resume()
+}
+
+function remove (index) {
+  model.value.splice(index, 1)
+  count.value -= 1
+  offset.value -= 1
+}
+</script>

package/src/components/infinite-scroll/QasInfiniteScroll.yml

@@ -0,0 +1,49 @@
+type: component
+
+meta:
+  desc: Componente de infinite scroll que implementa o "QInfiniteScroll".
+
+props:
+  list:
+    desc: Model da lista de itens.
+    default: []
+    type: Array
+    examples: [v-model:list="list"]
+    model: true
+
+  limitPerPage:
+    desc: é repassado na query da requição sendo responsavel pela quantidade de itens por busca.
+    default: 12
+    type: Number
+
+  url:
+    desc: URL utilizado para fazer a busca dos itens.
+    type: String
+
+  params:
+    desc: Parâmetros passados na requisição de busca dos itens.
+    default: {}
+    type: Object
+    examples: ["{ status: 'is_active' }"]
+
+  infinite-scroll-props:
+    desc: Propriedades repassadas para o QInfiniteScroll
+    default: {}
+    type: Object
+    examples: ["{ offset: 500 }"]
+
+  max-height:
+    desc: Seta a altura do container do infinite scroll, caso queira que o infinite scroll fique em um box por exemplo.
+    type: String
+
+events:
+  '@update:list -> function (newList)':
+    desc: Dispara toda vez que é feito uma nova busca e a lista é atualizada.
+    params:
+      newList:
+        desc: Novo valor do list
+        type: Array
+
+slots:
+  default:
+    desc: slot para exibir a lista na qual o componente fez a busca.

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -2,7 +2,7 @@
   <div class="qas-tabs-generator">
     <q-tabs v-model="model" active-color="primary" align="left" :breakpoint="0" content-class="text-grey-8" dense inline-label left-icon="sym_r_chevron_left" outside-arrows right-icon="sym_r_chevron_right">
       <slot v-for="(tab, key) in formattedTabs" :item="tab" :name="`tab-${tab.value}`">
-        <q-tab :key="key" v-bind="getTabProps(tab)" class="text-body1" :name="tab.value" no-caps :ripple="false">
+        <component :is="tabComponent" :key="key" v-bind="getTabProps(tab)" class="text-body1" :name="tab.value" no-caps :ripple="false">
           <slot :item="tab" :name="`tab-after-${tab.value}`">
             <q-icon v-if="tab.icon" :name="tab.icon" size="sm" />
 
@@ -12,7 +12,7 @@
               {{ getFormattedLabel(tab) }}
             </div>
           </slot>
-        </q-tab>
+        </component>
       </slot>
     </q-tabs>
   </div>
@@ -45,6 +45,10 @@ export default {
       default: () => ({}),
       required: true,
       type: [Object, Array]
+    },
+
+    useRouteTab: {
+      type: Boolean
     }
   },
 
@@ -77,6 +81,10 @@ export default {
 
         this.$emit('update:modelValue', value)
       }
+    },
+
+    tabComponent () {
+      return this.useRouteTab ? 'q-route-tab' : 'q-tab'
     }
   },
 

package/src/components/tabs-generator/QasTabsGenerator.yml

@@ -24,6 +24,11 @@ props:
     type: [Object, Array]
     examples: ["{ tab1: 'tab1', tab2: 'tab2' }"]
 
+  useRouteTab:
+    desc: Quando "true" será utilizado o componente "QRouteTab" do Quasar (https://quasar.dev/vue-components/tabs#qroutetab-api).
+    default: false
+    type: Boolean
+
 slots:
   'tab-[nome-da-chave]':
     desc: Slot dinâmico gerado a partir das chave passada na prop "tabs", substitui todo o "q-tab".

package/src/vue-plugin.js

@@ -28,6 +28,7 @@ import QasGallery from './components/gallery/QasGallery.vue'
 import QasGalleryCard from './components/gallery-card/QasGalleryCard.vue'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
 import QasHeaderActions from './components/header-actions/QasHeaderActions.vue'
+import QasInfiniteScroll from './components/infinite-scroll/QasInfiniteScroll.vue'
 import QasInput from './components/input/QasInput.vue'
 import QasLabel from './components/label/QasLabel.vue'
 import QasLayout from './components/layout/QasLayout.vue'
@@ -111,6 +112,7 @@ async function install (app) {
   app.component('QasGalleryCard', QasGalleryCard)
   app.component('QasGridGenerator', QasGridGenerator)
   app.component('QasHeaderActions', QasHeaderActions)
+  app.component('QasInfiniteScroll', QasInfiniteScroll)
   app.component('QasInput', QasInput)
   app.component('QasLabel', QasLabel)
   app.component('QasLayout', QasLayout)
@@ -192,6 +194,7 @@ export {
   QasGalleryCard,
   QasGridGenerator,
   QasHeaderActions,
+  QasInfiniteScroll,
   QasInput,
   QasLabel,
   QasLayout,