@bildvitta/quasar-ui-asteroid 3.8.0-beta.1 → 3.8.0-beta.3

package/package.json

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

package/src/components/dialog/QasDialog.yml

@@ -55,7 +55,7 @@ props:
     desc: propriedade para utilizar `100% do maxWidth`.
     type: Boolean
 
-  use-validation-at-once:
+  use-validation-all-at-once:
     desc: Valida todos os campos de uma única vez, ao invés de ser um por vez (que é o padrão).
     type: Boolean
 

package/src/components/field/QasField.vue

@@ -144,7 +144,7 @@ export default {
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },
         editor: { is: 'q-editor', toolbar, ...error },
 
-        'signature-uploader': { is: 'qas-signature-uploader', entity, uploadLabel: label, ...error },
+        'signature-uploader': { is: 'qas-signature-uploader', uploaderProps: { entity, label, ...error } },
 
         select: { is: 'qas-select', entity, name, multiple, options, useLazyLoading, ...input }
       }

package/src/components/filters/QasFilters.vue

@@ -1,11 +1,11 @@
 <template>
-  <section class="q-mb-xl qas-filters">
+  <section class="qas-filters" :class="filtersClass">
     <div v-if="showFilters" class="q-col-gutter-x-md row">
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
             <div class="qas-filters__input-content">
-              <qas-input v-model="search" class="bg-white q-px-sm rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
+              <qas-input v-model="search" class="bg-white q-px-sm rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search" @update:model-value="onSearch">
                 <template #prepend>
                   <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
                   <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="filter()" />
@@ -14,33 +14,11 @@
                 <template #append>
                   <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" icon="sym_r_clear" variant="tertiary" @click="clearSearch" />
 
-                  <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" icon="sym_r_tune" variant="tertiary">
-                    <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
-                      <div v-if="isFetching" class="q-pa-xl text-center">
-                        <q-spinner color="grey" size="2em" />
-                      </div>
-
-                      <div v-else-if="hasFetchError" class="q-pa-xl text-center">
-                        <q-icon color="negative" name="sym_r_warning" size="2em" />
-                      </div>
-
-                      <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
-                        <div v-for="(field, index) in fields" :key="index">
-                          <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
-                        </div>
-
-                        <div class="q-col-gutter-x-md q-mt-xl row">
-                          <div class="col-6">
-                            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" variant="secondary" @click="clearFilters" />
-                          </div>
-
-                          <div class="col-6">
-                            <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" type="submit" variant="primary" />
-                          </div>
-                        </div>
-                      </q-form>
-                    </q-menu>
-                  </qas-btn>
+                  <template v-if="showFilterButton">
+                    <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
+                      <pv-filters-button v-if="useFilterButton" v-model="filters" v-bind="filterButtonProps" />
+                    </slot>
+                  </template>
                 </template>
               </qas-input>
             </div>
@@ -48,6 +26,12 @@
         </slot>
       </div>
 
+      <div v-else-if="showFilterButton" class="col-12 col-md-6">
+        <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
+          <pv-filters-button v-if="useFilterButton" v-model="filters" v-bind="filterButtonProps" />
+        </slot>
+      </div>
+
       <div class="col-12 col-md-6">
         <slot name="right-side" />
       </div>
@@ -63,8 +47,8 @@
 </template>
 
 <script>
-import QasField from '../field/QasField.vue'
 import QasBtn from '../btn/QasBtn.vue'
+import PvFiltersButton from './private/PvFiltersButton.vue'
 
 import { camelize, camelizeKeys } from 'humps'
 import { humanize, parseValue } from '../../helpers/filters.js'
@@ -76,7 +60,7 @@ export default {
 
   components: {
     QasBtn,
-    QasField
+    PvFiltersButton
   },
 
   mixins: [contextMixin],
@@ -124,13 +108,24 @@ export default {
 
     useForceRefetch: {
       type: Boolean
+    },
+
+    useSpacing: {
+      default: true,
+      type: Boolean
+    },
+
+    useUpdateRoute: {
+      default: true,
+      type: Boolean
     }
   },
 
-  emits: ['fetch-success', 'fetch-error'],
+  emits: ['fetch-success', 'fetch-error', 'update:currentFilters'],
 
   data () {
     return {
+      currentFilters: {},
       filters: {},
       hasFetchError: false,
       isFetching: false,
@@ -147,7 +142,7 @@ export default {
       const activeFilters = {}
 
       const fields = Object.keys(this.fields)
-      const filters = camelizeKeys(this.mx_context.filters)
+      const filters = camelizeKeys(this.useUpdateRoute ? this.mx_context.filters : this.currentFilters)
 
       for (const key in filters) {
         const hasField = fields.includes(key)
@@ -171,13 +166,27 @@ export default {
       return getState.call(this, { entity: this.entity, key: 'filters' })
     },
 
+    filtersClass () {
+      return {
+        'q-mb-xl': this.useSpacing
+      }
+    },
+
     filterButtonColor () {
       return this.hasActiveFilters ? 'primary' : 'grey-9'
     },
 
-    // TODO: remover
-    filterButtonLabel () {
-      return this.$q.screen.gt.xs ? 'Filtrar' : undefined
+    filterButtonProps () {
+      return {
+        color: this.filterButtonColor,
+        error: this.hasFetchError,
+        fields: this.fields,
+        fieldsProps: this.fieldsProps,
+        loading: this.isFetching,
+
+        onClear: this.clearFilters,
+        onFilter: () => this.filter()
+      }
     },
 
     hasActiveFilters () {
@@ -213,13 +222,7 @@ export default {
     $route (to, from) {
       if (to.name === from.name) {
         this.fetchFilters()
-        this.updateValues()
-      }
-    },
-
-    search () {
-      if (this.debounce) {
-        this.filter()
+        this.useUpdateRoute && this.updateValues()
       }
     }
   },
@@ -233,11 +236,15 @@ export default {
   methods: {
     clearFilters () {
       const { filters, ...query } = this.mx_context
+      const activeFilters = {
+        ...filters,
+        ...this.filters
+      }
 
       if (this.hasFields) {
         const fields = Object.keys(this.fields)
 
-        for (const key in filters) {
+        for (const key in activeFilters) {
           const camelizedKey = camelize(key)
           const hasField = fields.includes(camelizedKey)
 
@@ -250,7 +257,8 @@ export default {
         this.filters = {}
       }
 
-      this.$router.push({ query })
+      this.updateCurrentFilters()
+      this.updateRouteQuery(query)
     },
 
     clearSearch () {
@@ -308,7 +316,8 @@ export default {
         search: this.search || undefined
       }
 
-      this.$router.push({ query })
+      this.updateCurrentFilters()
+      this.updateRouteQuery(query)
     },
 
     getChipValue (value) {
@@ -321,7 +330,21 @@ export default {
       delete query[name]
       delete this.filters[name]
 
-      this.$router.push({ query })
+      this.updateCurrentFilters()
+      this.updateRouteQuery(query)
+    },
+
+    updateCurrentFilters () {
+      this.currentFilters = {
+        ...this.filters,
+        ...(this.search && { search: this.search })
+      }
+
+      this.$emit('update:currentFilters', this.currentFilters)
+    },
+
+    updateRouteQuery (query) {
+      this.useUpdateRoute && this.$router.push({ query })
     },
 
     updateValues () {
@@ -341,16 +364,27 @@ export default {
     },
 
     watchOnceFields () {
+      if (!this.useUpdateRoute) return
+
       const watchOnce = this.$watch('fields', values => {
         if (Object.keys(values).length) {
           this.updateValues()
+          this.updateCurrentFilters()
           watchOnce()
         }
       })
     },
 
     handleSearchModelOnCreate () {
-      !this.useFilterButton && this.setSearch()
+      if (this.useUpdateRoute && !this.useFilterButton) {
+        this.setSearch()
+      }
+    },
+
+    onSearch () {
+      if (this.debounce) {
+        this.filter()
+      }
     },
 
     setSearch () {

package/src/components/filters/QasFilters.yml

@@ -24,7 +24,7 @@ props:
     desc: Envia como parâmetro para a action "fetchFilters" do modulo correspondente a "entity".
     type: String
 
-  use-badges:
+  use-chip:
     desc: Habilita ou não os "chips" mostrando os filtros ativos.
     default: true
     type: Boolean
@@ -38,6 +38,11 @@ props:
     desc: Força refazer o "fetch" mesmo caso já exista dados na store de filters.
     type: Boolean
 
+  use-update-route:
+    desc: Habilita ou não a atualização da rota com base nos filtros.
+    default: true
+    type: Boolean
+
   use-search-on-type:
     desc: Habilita ou não o filtro de busca sempre que o usuário digita.
     default: true
@@ -48,28 +53,48 @@ props:
     default: true
     type: Boolean
 
+  use-spacing:
+    desc: Habilita ou não o espaçamento padrão do componente.
+    default: true
+    type: Boolean
+
 slots:
-  search:
-    desc: Slot para seção do campo de busca.
+  default:
+    desc: Slot para acessar o final do componente.
     scope:
       filter:
-        desc: função usada para fazer o filtro
+        desc: Função usada para realizar o filtro.
         type: Function
 
-  default:
-    desc: Slot para acessar o final do componente.
+      filters:
+        desc: Objeto que retorna os filtros ativos.
+        default: {}
+        type: Object
+
+      remove-filter:
+        desc: Função usada para remover os filtro.
+        type: Function
+        examples: ["removeFilter({ name: '[nome-do-filtro]' })"]
+
+      context:
+        desc: Contexto referente a query da url.
+        default: { filters: {}, page: 1 }
+        type: Object
+
+  filter-button:
+    desc: Slot para seção do botão de filtro.
     scope:
       filter:
-        desc: Função usada para fazer o filtro
+        desc: Função usada para realizar o filtro.
         type: Function
 
       filters:
-        desc: Objeto que retorna os filtros ativos
+        desc: Objeto que retorna os filtros ativos.
         default: {}
         type: Object
 
       remove-filter:
-        desc: Função usada para remover os filtro
+        desc: Função usada para remover os filtro.
         type: Function
         examples: ["removeFilter({ name: '[nome-do-filtro]' })"]
 
@@ -78,6 +103,16 @@ slots:
         default: { filters: {}, page: 1 }
         type: Object
 
+  right-side:
+    desc: Slot para a seção na lateral direita.
+
+  search:
+    desc: Slot para seção do campo de busca.
+    scope:
+      filter:
+        desc: função usada para realizar o filtro.
+        type: Function
+
 events:
   '@fetch-success -> function(value)':
     desc: Dispara quando a action "fetchFilters" é executada com sucesso.
@@ -92,3 +127,10 @@ events:
       value:
         desc: Retorna todos os dados "cru" respondido na exceção do fetch.
         type: Object
+
+  '@update:currentFilters -> function(value)':
+    desc: Dispara quando é realizado ou removido uma pesquisa no campo de busca e quando é clicado no botão "Filtrar" ou "Limpar" do filtro.
+    params:
+      value:
+        desc: Retorna todos os filtros realizados.
+        type: Object

package/src/components/filters/private/PvFiltersButton.vue

@@ -0,0 +1,89 @@
+<template>
+  <qas-btn :color="color" data-cy="filters-btn" icon="sym_r_tune" variant="tertiary">
+    <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
+      <div v-if="loading" class="q-pa-xl text-center">
+        <q-spinner color="grey" size="2em" />
+      </div>
+
+      <div v-else-if="error" class="q-pa-xl text-center">
+        <q-icon color="negative" name="sym_r_warning" size="2em" />
+      </div>
+
+      <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="$emit('filter')">
+        <div v-for="(field, index) in fields" :key="index">
+          <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
+        </div>
+
+        <qas-actions gutter="sm" use-equal-width>
+          <template #primary>
+            <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" type="submit" variant="primary" />
+          </template>
+          <template #secondary>
+            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" variant="secondary" @click="$emit('clear')" />
+          </template>
+        </qas-actions>
+      </q-form>
+    </q-menu>
+  </qas-btn>
+</template>
+
+<script>
+import QasActions from '../../actions/QasActions.vue'
+import QasBtn from '../../btn/QasBtn.vue'
+import QasField from '../../field/QasField.vue'
+
+export default {
+  name: 'PvFiltersButton',
+
+  components: {
+    QasActions,
+    QasBtn,
+    QasField
+  },
+
+  props: {
+    color: {
+      type: String,
+      default: 'grey-9',
+      validator: value => ['grey-9', 'primary', 'white'].includes(value)
+    },
+
+    error: {
+      type: Boolean
+    },
+
+    fields: {
+      default: () => ({}),
+      type: Object
+    },
+
+    fieldsProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    loading: {
+      type: Boolean
+    },
+
+    modelValue: {
+      default: () => ({}),
+      type: Object
+    }
+  },
+
+  emits: ['clear', 'filter', 'update:modelValue'],
+
+  computed: {
+    filters: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
+    }
+  }
+}
+</script>

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

@@ -420,6 +420,8 @@ export default {
         NotifySuccess(response.data.status.text || this.defaultNotifyMessages.success)
         this.$emit('submit-success', response, this.modelValue)
 
+        this.createSubmitSuccessEvent({ ...payload, entity: this.entity })
+
         this.$qas.logger.group(
           `QasFormView - submit -> resposta da action ${this.entity}/${this.mode}`, [response]
         )
@@ -449,6 +451,16 @@ export default {
       }
     },
 
+    createSubmitSuccessEvent (detail = {}) {
+      const event = new CustomEvent('submit-success', {
+        bubbles: false,
+        cancelable: false,
+        detail
+      })
+
+      window.dispatchEvent(event)
+    },
+
     setIgnoreRouterGuard ({ detail: { id, entity } }) {
       this.ignoreRouterGuard = this.id === id && this.entity === entity
     }

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

@@ -0,0 +1,116 @@
+<!-- TODO: componente adaptado somente para o uso do QasUploader, precisa ser revisitado para ser implementado no QasGallery -->
+<template>
+  <div class="bg-white q-pa-md qas-gallery-card rounded-borders shadow-2" :class="classes">
+    <header class="flat items-center no-wrap q-mb-md row" :class="headerClasses">
+      <slot name="header">
+        <div class="ellipsis q-mr-xs qas-gallery__name">
+          <slot v-if="card.name" name="name">
+            {{ card.name }}
+          </slot>
+        </div>
+
+        <div v-if="hasActionsMenu">
+          <qas-actions-menu v-bind="defaultActionsMenuProps" />
+        </div>
+      </slot>
+    </header>
+
+    <div class="qas-gallery-card__image">
+      <slot name="image">
+        <q-img class="rounded-borders" height="100%" :src="card.url" v-bind="imageProps">
+          <template #error>
+            <slot name="image-error" />
+          </template>
+        </q-img>
+      </slot>
+    </div>
+
+    <div v-if="hasBottom" class="q-mt-md">
+      <slot name="bottom">
+        <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QasGalleryCard',
+
+  props: {
+    actionsMenuProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    card: {
+      type: Object,
+      default: () => ({})
+    },
+
+    disable: {
+      type: Boolean
+    },
+
+    gridGeneratorProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    imageProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'text-grey-6': this.disable
+      }
+    },
+
+    defaultActionsMenuProps () {
+      const { buttonProps } = this.actionsMenuProps
+
+      return {
+        useLabel: false,
+        ...this.actionsMenuProps,
+
+        buttonProps: {
+          disable: this.disable,
+          ...buttonProps
+        }
+      }
+    },
+
+    hasActionsMenu () {
+      return !!Object.keys(this.actionsMenuProps).length
+    },
+
+    hasBottom () {
+      return !!this.$slots.bottom || this.hasGridGenerator
+    },
+
+    hasGridGenerator () {
+      return !!Object.keys(this.gridGeneratorProps).length
+    },
+
+    headerClasses () {
+      return {
+        'justify-between': this.card.name,
+        'justify-right': !this.card.name,
+        'text-grey-9': !this.disable
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-gallery-card {
+  &__image {
+    height: 180px;
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+type: component
+
+meta:
+  desc: Componente de card de galeria (utilizado no QasUploader, QasGallery e nos produtos).
+
+props:
+  actions-menu-props:
+    desc: Propriedades repassadas para o QasActionsMenu.
+    default: {}
+    type: Object
+
+  card:
+    desc: Informações do card, como name (nome) e url.
+    default: {}
+    type: Object
+    examples: ["{ name: 'meu nome', url: 'minha-url-da-imagem' }"]
+
+  disable:
+    desc: Propriedade que aplica estilos de desabilitado.
+    type: Boolean
+
+  grid-generator-props:
+    desc: Propriedades repassadas para o QasGridGenerator.
+    type: Boolean
+
+  image-props:
+    desc: Propriedades repassadas para o QImg.
+    default: {}
+    type: Object
+
+slots:
+  bottom:
+    desc: Slot para acessar o conteúdo abaixo da imagem.
+
+  image:
+    desc: Slot para acessar o conteúdo da imagem (onde fica o QasGridGenerator).
+
+  image-error:
+    desc: Slot para acessar o conteúdo da imagem quando existe algum erro com a imagem.
+
+  header:
+    desc: Slot para acessar o conteúdo do cabeçalho.
+
+  name:
+    desc: Slot para acessar o conteúdo do nome, acima da imagem.

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

@@ -61,11 +61,6 @@ export default {
   computed: {
     formattedFields () {
       if (this.useEmptyResult) {
-        this.$qas.logger.group(
-          'QasGridGenerator - formattedFields -> this.useEmptyResult tem valor "true"',
-          [this.fields]
-        )
-
         return this.fields
       }