@bildvitta/quasar-ui-asteroid 3.17.0-beta.21 → 3.17.0-beta.22

package/src/components/filters/QasFilters.yml

@@ -1,171 +1,171 @@
-type: component
-
-meta:
-  desc: Componente para criação de filtros dinâmicos.
-
-props:
-  current-filters:
-    model: true
-    desc: Utilizado para recuperar os filtros realizados internamente.
-    default: {}
-    type: Object
-    examples: [v-model:currentFilters="currentFilters"]
-
-  entity:
-    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
-    required: true
-    type: String
-
-  fields-props:
-    desc: Propriedade para repassar propriedades para cada campo individualmente.
-    default: {}
-    type: Object
-    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
-
-  filters:
-    model: true
-    desc: Diferente do model "currentFilters" que controla os filtros realizado, este model controla os filtros que ainda não foram realizados.
-    default: {}
-    type: Object
-    examples: [v-model:filters="filters"]
-
-  search-placeholder:
-    desc: Placeholder do campo de busca.
-    default: Pesquisar...
-    type: String
-
-  url:
-    desc: Envia como parâmetro para a action "fetchFilters" do modulo correspondente a "entity".
-    type: String
-
-  use-chip:
-    desc: Habilita ou não os "chips" mostrando os filtros ativos.
-    default: true
-    type: Boolean
-
-  use-filter-button:
-    desc: Habilita ou não o botão com menu na lateral esquerda.
-    default: true
-    type: Boolean
-
-  use-force-refetch:
-    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
-    type: Boolean
-
-  use-search:
-    desc: Habilita ou não o campo text de busca.
-    default: true
-    type: Boolean
-
-  use-spacing:
-    desc: Habilita ou não o espaçamento padrão do componente.
-    default: true
-    type: Boolean
-
-slots:
-  default:
-    desc: Slot para acessar o final do componente.
-    scope:
-      filter:
-        desc: Função usada para realizar o filtro.
-        type: Function
-
-      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 realizar o filtro.
-        type: Function
-
-      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
-
-  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.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido pelo fetch.
-        type: Object
-
-  '@fetch-error -> function(value)':
-    desc: Dispara quando a action "fetchFilters" cai em uma exceção.
-    params:
-      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
-
-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"']
+type: component
+
+meta:
+  desc: Componente para criação de filtros dinâmicos.
+
+props:
+  current-filters:
+    model: true
+    desc: Utilizado para recuperar os filtros realizados internamente.
+    default: {}
+    type: Object
+    examples: [v-model:currentFilters="currentFilters"]
+
+  entity:
+    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
+    required: true
+    type: String
+
+  fields-props:
+    desc: Propriedade para repassar propriedades para cada campo individualmente.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
+  filters:
+    model: true
+    desc: Diferente do model "currentFilters" que controla os filtros realizado, este model controla os filtros que ainda não foram realizados.
+    default: {}
+    type: Object
+    examples: [v-model:filters="filters"]
+
+  search-placeholder:
+    desc: Placeholder do campo de busca.
+    default: Pesquisar...
+    type: String
+
+  url:
+    desc: Envia como parâmetro para a action "fetchFilters" do modulo correspondente a "entity".
+    type: String
+
+  use-chip:
+    desc: Habilita ou não os "chips" mostrando os filtros ativos.
+    default: true
+    type: Boolean
+
+  use-filter-button:
+    desc: Habilita ou não o botão com menu na lateral esquerda.
+    default: true
+    type: Boolean
+
+  use-force-refetch:
+    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
+    type: Boolean
+
+  use-search:
+    desc: Habilita ou não o campo text de busca.
+    default: true
+    type: Boolean
+
+  use-spacing:
+    desc: Habilita ou não o espaçamento padrão do componente.
+    default: true
+    type: Boolean
+
+slots:
+  default:
+    desc: Slot para acessar o final do componente.
+    scope:
+      filter:
+        desc: Função usada para realizar o filtro.
+        type: Function
+
+      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 realizar o filtro.
+        type: Function
+
+      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
+
+  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.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido pelo fetch.
+        type: Object
+
+  '@fetch-error -> function(value)':
+    desc: Dispara quando a action "fetchFilters" cai em uma exceção.
+    params:
+      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
+
+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/filters/private/PvFiltersButton.vue

@@ -1,101 +1,101 @@
-<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" 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-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>
+<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" 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-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>