@bildvitta/quasar-ui-asteroid 3.20.0-beta.0 → 3.20.0-beta.2

package/package.json

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

package/src/components/actions-menu/QasActionsMenu.vue

@@ -86,6 +86,10 @@ const props = defineProps({
     type: String
   },
 
+  useDropdownAlways: {
+    type: Boolean
+  },
+
   useLabel: {
     default: true,
     type: Boolean
@@ -209,7 +213,13 @@ const formattedList = computed(() => {
    */
   const payload = { dropdownList: {}, buttonsList: {} }
 
-  if ((!hasSplitName.value || screen.isSmall) && !isSingle.value) {
+  /**
+   * Se a prop "useDropdownAlways" for true, significa que sempre usaremos o dropdown,
+   * mesmo que tenha apenas 1 item na lista ou que não tenha splitName.
+   * Também se não tiver splitName e a tela for pequena (mobile/tablet) e não for
+   * single, usaremos o dropdown.
+   */
+  if (props.useDropdownAlways || ((!hasSplitName.value || screen.isSmall) && !isSingle.value)) {
     const { buttonsList } = useOptionsActions({ color: DEFAULT_COLOR, props })
 
     payload.buttonsList = buttonsList.value

package/src/components/actions-menu/QasActionsMenu.yml

@@ -49,6 +49,11 @@ props:
     type: String
     examples: [visibility]
 
+  use-dropdown-always:
+    desc: Força o uso do dropdown mesmo caso tenha apenas 1 item na lista de ações.
+    default: false
+    type: Boolean
+
   use-tooltip:
     desc: Controla se vai ter o tooltip caso passe nas regras de exibição de tooltip
 

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -3,8 +3,10 @@
     <div v-if="hasButtons" :class="classes.list">
       <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
         <div class="flex no-wrap">
-          <qas-btn :disable="props.disable" v-bind="buttonProps" no-wrap variant="tertiary" @click="onClick">
-            <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" :auto-close="props.useAutoClose" class="qas-menu" self="top right" @update:model-value="onUpdateMenuValue">
+          <qas-btn v-bind="buttonProps" :data-btn-dropdown="key" :disable="props.disable" no-wrap variant="tertiary" @click="onClick">
+            <slot v-if="hasBtnContentSlot(key)" :name="`btn-content-${key}`" />
+
+            <q-menu v-else-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" :auto-close="props.useAutoClose" class="qas-menu" self="top right" @update:model-value="onUpdateMenuValue">
               <div :class="classes.menuContent">
                 <slot />
               </div>
@@ -142,6 +144,10 @@ function isLast (index) {
 function hasSeparator (index) {
   return props.useSplit || !isLast(index)
 }
+
+function hasBtnContentSlot (name) {
+  return !!slots[`btn-content-${name}`]
+}
 </script>
 
 <style lang="scss">

package/src/components/btn-dropdown/QasBtnDropdown.yml

@@ -44,9 +44,13 @@ props:
 slots:
   default:
     desc: Slot para passar o conteúdo do dropdown (menu).
+
   bottom-[buttons-props-list-key]:
     desc: Slot unitário para acessar abaixo de cada botão (normalmente utilizado para tooltip).
 
+  btn-content-[buttons-props-list-key]:
+    desc: Slot para acessar o conteúdo dentro do botão, exemplo de uso QMenu.
+
 events:
   '@click -> function (event)':
     desc: Caso não tenha "useSplit", o evento é disparado ao clicar no componente como um todo, caso tenha "useSplit", o evento é disparado ao clicar no botão a esquerda.

package/src/components/filters/QasFilters.vue

@@ -5,9 +5,9 @@
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
             <qas-search-input v-model="internalSearch" :placeholder="searchPlaceholder" :use-search-on-type="useSearchOnType" @clear="clearSearch" @filter="filter()" @update:model-value="onSearch">
-              <template v-if="showFilterButton" #after-clear>
+              <template v-if="showFilterActions" #after-clear>
                 <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
-                  <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="internalFilters" v-bind="filterButtonProps" />
+                  <pv-filters-actions ref="filtersActions" v-model:filtersButton="internalFilters" v-bind="filtersActionsProps" />
                 </slot>
               </template>
             </qas-search-input>
@@ -15,14 +15,20 @@
         </slot>
       </div>
 
-      <div v-else-if="showFilterButton" class="col-12">
+      <div v-else-if="showFilterActions" class="col-12">
         <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
-          <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="internalFilters" v-bind="filterButtonProps" />
+          <pv-filters-actions ref="filtersActions" v-model:filtersButton="internalFilters" v-bind="filtersActionsProps" />
         </slot>
       </div>
     </div>
 
     <div v-if="hasChip" class="q-mt-md">
+      <qas-badge v-if="hasOrderByChip" color="grey-4" removable text-color="black" @remove="changeOrderBy(undefined)">
+        <div class="ellipsis qas-filters__badge-content" :title="orderByLabel">
+          Ordenar por: "{{ orderByLabel }}"
+        </div>
+      </qas-badge>
+
       <qas-badge v-for="(filterItem, key) in activeFilters" :key="key" :data-cy="`filters-${filterItem.value}-chip`" removable @remove="removeFilter(filterItem)">
         <div class="ellipsis qas-filters__badge-content" :title="getChipValue(filterItem.value)">
           {{ filterItem.label }}: "{{ getChipValue(filterItem.value) }}"
@@ -37,7 +43,7 @@
 <script>
 import QasBadge from '../badge/QasBadge.vue'
 import QasSearchInput from '../search-input/QasSearchInput.vue'
-import PvFiltersButton from './private/PvFiltersButton.vue'
+import PvFiltersActions from './private/PvFiltersActions.vue'
 
 import { useOverlayNavigation } from '../../composables'
 
@@ -54,9 +60,9 @@ export default {
   name: 'QasFilters',
 
   components: {
-    PvFiltersButton,
     QasBadge,
-    QasSearchInput
+    QasSearchInput,
+    PvFiltersActions
   },
 
   mixins: [contextMixin],
@@ -72,11 +78,21 @@ export default {
       type: Object
     },
 
+    fieldsProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     listenerQueryKeys: {
       type: Array,
       default: () => []
     },
 
+    orderByOptions: {
+      default: () => ([]),
+      type: Array
+    },
+
     searchPlaceholder: {
       default: 'Pesquisar...',
       type: String
@@ -123,11 +139,6 @@ export default {
     useUpdateRoute: {
       default: true,
       type: Boolean
-    },
-
-    fieldsProps: {
-      default: () => ({}),
-      type: Object
     }
   },
 
@@ -233,25 +244,30 @@ export default {
       return this.hasActiveFilters ? 'primary' : 'grey-10'
     },
 
-    filterButtonProps () {
+    filtersActionsProps () {
       return {
-        color: this.filterButtonColor,
-        error: this.hasFetchError,
-        fields: this.fields,
-        fieldsProps: this.formattedFieldsProps,
-        loading: this.isFetching,
-        menuProps: {
-          /**
-           * O tratamento no onHide do menu é que como o menu é recriado toda vez que o filtro é aberto, ocorre que as
-           * opções selecionadas anteriormente (e que não foram filtradas) não ficam salvas na memória, ocasionando em
-           * campos lazy loading um problema de exibir o uuid da opção por não achar essa opção no array de options do field.
-           * Para solucionar esse problema, sempre ao fechar os filtros as opções não filtradas são removidas,
-           * voltando o filtro para o seu estado anterior.
-          */
-          onHide: this.setInternalFilters
+        orderByOptions: this.orderByOptions,
+        useOrderBy: this.hasOrderByOptions,
+        useFilterButton: this.useFilterButton,
+
+        filtersButtonProps: {
+          color: this.filterButtonColor,
+          error: this.hasFetchError,
+          fields: this.fields,
+          fieldsProps: this.formattedFieldsProps,
+          loading: this.isFetching
         },
 
-        onClear: this.clearFilters,
+        /**
+         * O tratamento no onHide do menu é que como o menu é recriado toda vez que o filtro é aberto, ocorre que as
+         * opções selecionadas anteriormente (e que não foram filtradas) não ficam salvas na memória, ocasionando em
+         * campos lazy loading um problema de exibir o uuid da opção por não achar essa opção no array de options do field.
+         * Para solucionar esse problema, sempre ao fechar os filtros as opções não filtradas são removidas,
+         * voltando o filtro para o seu estado anterior.
+        */
+        onHideFiltersMenu: this.setInternalFilters,
+        onClearFilters: this.clearFilters,
+        onChangeOrder: this.changeOrderBy,
         onFilter: () => this.filter()
       }
     },
@@ -264,12 +280,12 @@ export default {
       return !!Object.keys(this.fields || {}).length
     },
 
-    showFilterButton () {
-      return !!this.$slots.filterButton || this.useFilterButton
+    showFilterActions () {
+      return !!this.$slots.filterButton || this.useFilterButton || this.hasOrderByOptions
     },
 
     showFilters () {
-      return this.useFilterButton || this.showSearch
+      return this.useFilterButton || this.showSearch || this.hasOrderByOptions
     },
 
     showSearch () {
@@ -277,7 +293,23 @@ export default {
     },
 
     hasChip () {
-      return this.useChip && this.hasActiveFilters
+      return this.useChip && (this.hasActiveFilters || this.orderBy)
+    },
+
+    hasOrderByOptions () {
+      return !!this.orderByOptions.length
+    },
+
+    hasOrderByChip () {
+      return !!this.orderBy && this.hasOrderByOptions
+    },
+
+    orderBy () {
+      return this.$route.query.order_by
+    },
+
+    orderByLabel () {
+      return this.orderByOptions.find(option => option.value === this.orderBy)?.label
     }
   },
 
@@ -419,7 +451,7 @@ export default {
     },
 
     hideFiltersMenu () {
-      this.$refs.filtersButton?.hideMenu()
+      this.$refs.filtersActions?.hideFiltersMenu()
     },
 
     setInternalFilters () {
@@ -492,6 +524,10 @@ export default {
       for (const key in filters) {
         this.internalFilters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
       }
+    },
+
+    changeOrderBy (value) {
+      this.filter({ order_by: value })
     }
   }
 }

package/src/components/filters/QasFilters.yml

@@ -34,6 +34,11 @@ props:
     default: []
     type: Array
 
+  order-by-options:
+    desc: Opções de ordenação que serão exibidas no botão de ordenar.
+    default: []
+    type: Array
+
   search-placeholder:
     desc: Placeholder do campo de busca.
     default: Pesquisar...

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

@@ -0,0 +1,133 @@
+<template>
+  <qas-btn-dropdown v-bind="btnDropdownProps">
+    <!-- Seção do botão de filtrar -->
+    <template v-if="props.useFilterButton" #btn-content-filtersButton>
+      <q-menu ref="filtersButtonMenu" anchor="center right" class="full-width" max-width="270px" no-refocus self="top right" @hide="emit('hide-filters-menu')">
+        <div v-if="props.filtersButtonProps.loading" class="q-pa-xl text-center">
+          <q-spinner color="grey" size="2em" />
+        </div>
+
+        <div v-else-if="props.filtersButtonProps.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 props.filtersButtonProps.fields" :key="index">
+            <qas-field v-model="filtersButtonModel[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="props.filtersButtonProps.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" size="sm" type="submit" variant="primary" />
+            </template>
+
+            <template #secondary>
+              <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" size="sm" variant="secondary" @click="emit('clear-filters')" />
+            </template>
+          </qas-actions>
+        </q-form>
+      </q-menu>
+    </template>
+
+    <!-- Seção do botão de ordenar -->
+    <template v-if="props.useOrderBy" #btn-content-orderBy>
+      <q-menu anchor="bottom right" class="qas-menu" self="top right">
+        <q-list>
+          <q-item v-for="option in props.orderByOptions" :key="option.value" :active="isActive(option.value)" active-class="text-primary" clickable @click="emit('change-order', option.value)">
+            <q-item-section>
+              <q-item-label>
+                {{ option.label }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </template>
+  </qas-btn-dropdown>
+</template>
+
+<script setup>
+import QasActions from '../../actions/QasActions.vue'
+import QasBtn from '../../btn/QasBtn.vue'
+import QasBtnDropdown from '../../btn-dropdown/QasBtnDropdown.vue'
+import QasField from '../../field/QasField.vue'
+
+import { useRoute } from 'vue-router'
+import { computed, ref } from 'vue'
+
+defineOptions({ name: 'PvFiltersActions' })
+
+const props = defineProps({
+  filtersButtonProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  orderByOptions: {
+    default: () => ([]),
+    type: Array
+  },
+
+  useFilterButton: {
+    type: Boolean
+  },
+
+  useOrderBy: {
+    type: Boolean
+  }
+})
+
+// models
+const filtersButtonModel = defineModel('filtersButton', { type: Object, default: () => ({}) })
+
+// emits
+const emit = defineEmits(['change-order', 'clear-filters', 'filter', 'hide-filters-menu'])
+
+// expose
+defineExpose({ hideFiltersMenu })
+
+// template refs
+const filtersButtonMenu = ref(null)
+
+// composables
+const route = useRoute()
+
+// computeds
+const btnDropdownProps = computed(() => {
+  return {
+    buttonsPropsList: {
+      ...(props.useFilterButton && {
+        filtersButton: {
+          label: 'Filtrar',
+          useLabelOnSmallScreen: false,
+          icon: 'sym_r_filter_alt',
+          'data-cy': 'filters-btn' // manter compatibilidade
+        }
+      }),
+
+      ...(props.useOrderBy && {
+        orderBy: {
+          color: 'grey-10',
+          label: 'Ordenar',
+          useLabelOnSmallScreen: false,
+          icon: 'sym_r_swap_vert'
+        }
+      })
+    }
+  }
+})
+
+// functions
+/**
+ * Retorna se a opção de ordenação está ativa.
+ *
+ * @param {string} value
+ */
+function isActive (value) {
+  return route.query.order_by === value
+}
+
+function hideFiltersMenu () {
+  filtersButtonMenu.value?.hide()
+}
+</script>

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

@@ -36,6 +36,14 @@
           </component>
         </q-td>
       </template>
+
+      <template v-for="(column, index) in columnsWithTooltip" :key="index" #[`header-cell-${column.name}`]="context">
+        <q-th :props="context">
+          {{ context.col.label }}
+
+          <qas-tip class="q-pl-xs" :text="column.tooltip" />
+        </q-th>
+      </template>
     </q-table>
 
     <qas-empty-result-text v-if="!hasResults" />
@@ -45,9 +53,10 @@
 <script>
 import PvTableGeneratorTd from './private/PvTableGeneratorTd.vue'
 import QasBox from '../box/QasBox.vue'
+import QasCheckbox from '../checkbox/QasCheckbox.vue'
 import QasEmptyResultText from '../empty-result-text/QasEmptyResultText.vue'
 import QasHeader from '../header/QasHeader.vue'
-import QasCheckbox from '../checkbox/QasCheckbox.vue'
+import QasTip from '../tip/QasTip.vue'
 
 import { isEmpty, humanize, setScrollOnGrab, setScrollGradient } from '../../helpers'
 
@@ -61,7 +70,8 @@ export default {
     QasBox,
     QasEmptyResultText,
     QasHeader,
-    QasCheckbox
+    QasCheckbox,
+    QasTip
   },
 
   provide () {
@@ -70,7 +80,7 @@ export default {
        * @see QasBtn.vue - Injetando os valores padrões para o QasBtn.
        */
       btnPropsDefaults: {
-        size: 'md'
+        size: 'sm'
       }
     }
   },
@@ -146,6 +156,10 @@ export default {
       default: true
     },
 
+    useMultiline: {
+      type: Boolean
+    },
+
     useObjectSelectedModel: {
       type: Boolean
     },
@@ -287,7 +301,11 @@ export default {
      * caso tenha a prop "actionsMenuProps" é adicionado automaticamente a coluna "actions" como ultimo item
      */
     normalizedColumns () {
-      return this.hasActionsMenu ? [...this.columns, { name: 'actions' }] : this.columns
+      return this.hasActionsMenu ? [...this.columns, { name: 'actions', label: 'Ações' }] : this.columns
+    },
+
+    columnsWithTooltip () {
+      return this.normalizedColumns.filter(column => column.tooltip)
     },
 
     hasFields () {
@@ -301,6 +319,10 @@ export default {
 
       const mappedResults = results.map((result, index) => {
         for (const key in result) {
+          if (this.fields[key]?.type === 'object') {
+            continue
+          }
+
           const humanizedResult = humanize(this.fields[key], result[key])
           const formattedResult = isEmpty({ value: humanizedResult }) ? this.emptyResultText : humanizedResult
 
@@ -322,7 +344,8 @@ export default {
       return {
         'qas-table-generator--mobile': this.$qas.screen.isSmall,
         'qas-table-generator--sticky-header': this.useStickyHeader,
-        'qas-table-generator--has-actions': this.hasActionsMenu
+        'qas-table-generator--has-actions': this.hasActionsMenu,
+        'qas-table-generator--multiline': this.useMultiline
       }
     },
 
@@ -539,7 +562,7 @@ export default {
     }
 
     th {
-      @include set-typography($subtitle1);
+      @include set-typography($subtitle2);
 
       color: $grey-10;
 
@@ -554,18 +577,10 @@ export default {
         }
       }
 
-      border: 0 !important;
-      padding-bottom: 0;
+      padding-bottom: var(--qas-spacing-sm);;
       padding-left: 0;
       padding-top: 0;
-
-      &:not(:last-child) {
-        padding-right: var(--qas-spacing-md);
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
+      padding-right: var(--qas-spacing-md);
     }
 
     td,
@@ -576,7 +591,7 @@ export default {
     }
 
     td {
-      @include set-typography($body1);
+      @include set-typography($body2);
 
       height: 40px;
       padding-bottom: var(--qas-spacing-sm);
@@ -584,14 +599,7 @@ export default {
       padding-top: var(--qas-spacing-sm);
       position: relative;
       z-index: 0;
-
-      &:not(:last-child) {
-        padding-right: var(--qas-spacing-md);
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
+      padding-right: var(--qas-spacing-md);
 
       &::before {
         position: absolute;
@@ -648,18 +656,22 @@ export default {
     }
   }
 
+  &--multiline {
+    @media (min-width: $breakpoint-sm) {
+      .q-table td {
+        *:not(.qas-btn, .qas-btn *, .q-badge, .q-badge *){
+          white-space: normal;
+          overflow-wrap: anywhere;
+        }
+      }
+    }
+  }
+
   .q-table__container {
     margin-left: calc(var(--qas-spacing-md) * -1);
     margin-right: calc(var(--qas-spacing-md) * -1);
   }
 
-  &--has-actions {
-    td:last-child #{$root}__td-item {
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
   &--mobile {
     margin: 0 -10px;
 

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

@@ -99,6 +99,11 @@ props:
     default: true
     type: Boolean
 
+  use-multiline:
+    desc: Usado para permitir que o conteúdo da célula quebre linha (não permite scroll na tabela a partir de tablet).
+    default: false
+    type: Boolean
+
   use-object-selected-model:
     desc: Usado para definir o modelo de seleção como um array de objeto ao invés de um array de string.
     default: false

package/src/components/toggle-visibility/QasToggleVisibility.vue

@@ -21,12 +21,15 @@
       </div>
 
       <qas-btn class="q-ml-sm qas-toggle-visibility__button" :icon />
+
+      <qas-tooltip :text="tooltipText" />
     </div>
   </div>
 </template>
 
 <script setup>
 import QasBtn from '../btn/QasBtn.vue'
+import QasTooltip from '../tooltip/QasTooltip.vue'
 
 import { useToggleVisibility } from '../../composables/private'
 
@@ -54,6 +57,16 @@ const props = defineProps({
   width: {
     type: String,
     default: '140px'
+  },
+
+  visibleTooltip: {
+    type: String,
+    default: 'Ocultar conteúdo'
+  },
+
+  hiddenTooltip: {
+    type: String,
+    default: 'Visualizar conteúdo'
   }
 })
 
@@ -64,6 +77,7 @@ const {
 
 const icon = computed(() => isVisible.value ? 'sym_r_visibility' : 'sym_r_visibility_off')
 const style = computed(() => ({ width: props.width }))
+const tooltipText = computed(() => isVisible.value ? props.visibleTooltip : props.hiddenTooltip)
 </script>
 
 <style lang="scss">

package/src/components/toggle-visibility/QasToggleVisibility.yml

@@ -25,6 +25,16 @@ props:
     default: '140px'
     type: String
 
+  visible-tooltip:
+    desc: Texto do tooltip exibido quando o conteúdo está visível.
+    default: 'Ocultar conteúdo'
+    type: String
+
+  hidden-tooltip:
+    desc: Texto do tooltip exibido quando o conteúdo está oculto.
+    default: 'Exibir conteúdo'
+    type: String
+
 slots:
   default:
     desc: Slot para inserir conteúdo a ser oculto/exibido.

package/src/components/tooltip/QasTooltip.vue

@@ -1,10 +1,12 @@
 <template>
   <q-tooltip v-bind="tooltipProps" class="bg-grey-10 text-caption">
-    {{ props.text }}
+    <qas-breakline :text="props.text" />
   </q-tooltip>
 </template>
 
 <script setup>
+import QasBreakline from '../breakline/QasBreakline.vue'
+
 defineOptions({ name: 'QasTooltip' })
 
 const props = defineProps({
@@ -18,6 +20,7 @@ const props = defineProps({
 const tooltipProps = {
   anchor: 'center right',
   self: 'center left',
-  offset: [5, 5]
+  offset: [5, 5],
+  maxWidth: '300px'
 }
 </script>

package/src/css/components/button.scss

@@ -14,7 +14,7 @@
     padding: var(--qas-spacing-xs) var(--qas-spacing-md) !important;
 
     .q-icon {
-      font-size: 16px !important;
+      font-size: 18fpx !important;
     }
 
     &.qas-btn--icon-only.qas-btn--primary,

package/src/helpers/filters.js

@@ -88,6 +88,8 @@ function formatCompanyDocument (value) {
 }
 
 function formatDocument (value) {
+  if (!value) return ''
+
   return value.length < 12
     ? formatPersonalDocument(value)
     : formatCompanyDocument(value)

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

@@ -1,101 +0,0 @@
-<template>
-  <qas-btn data-cy="filters-btn" icon="sym_r_filter_alt" label="Filtrar" :use-label-on-small-screen="false" variant="tertiary">
-    <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" v-bind="menuProps" no-refocus 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" size="sm" type="submit" variant="primary" />
-          </template>
-
-          <template #secondary>
-            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" size="sm" 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-10',
-      validator: value => ['grey-10', 'primary', 'white'].includes(value)
-    },
-
-    error: {
-      type: Boolean
-    },
-
-    fields: {
-      default: () => ({}),
-      type: Object
-    },
-
-    fieldsProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    loading: {
-      type: Boolean
-    },
-
-    menuProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    modelValue: {
-      default: () => ({}),
-      type: Object
-    }
-  },
-
-  emits: ['clear', 'filter', 'update:modelValue'],
-
-  computed: {
-    filters: {
-      get () {
-        return this.modelValue
-      },
-
-      set (value) {
-        return this.$emit('update:modelValue', value)
-      }
-    }
-  },
-
-  methods: {
-    hideMenu () {
-      this.$refs.menu.hide()
-    }
-  }
-}
-</script>