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

package/package.json

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

package/src/components/empty-result-text/QasEmptyResultText.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="text-body1 text-grey-8">
+    <slot>
+      {{ text }}
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QasEmptyResultText',
+
+  props: {
+    text: {
+      default: 'Não há itens para serem exibidos.',
+      type: String
+    }
+  }
+}
+</script>

package/src/components/empty-result-text/QasEmptyResultText.yml

@@ -0,0 +1,14 @@
+type: component
+
+meta:
+  desc: Componente de texto em casos de resultados vazio após filtros.
+
+props:
+  text:
+    desc: Texto a ser exibido.
+    default: Não há itens para serem exibidos.
+    type: String
+
+slots:
+  default:
+    desc: Slot que substitui a propriedade "text".

package/src/components/filters/QasFilters.vue

@@ -40,7 +40,7 @@
 <script>
 import PvFiltersButton from './private/PvFiltersButton.vue'
 
-import { camelize, camelizeKeys } from 'humps'
+import { camelize, camelizeKeys, decamelize } from 'humps'
 import { humanize, parseValue } from '../../helpers/filters.js'
 import contextMixin from '../../mixins/context.js'
 import { getState, getAction } from '@bildvitta/store-adapter'
@@ -137,8 +137,10 @@ export default {
         const hasField = fields.includes(key)
 
         if (hasField) {
-          const value = humanize(this.fields[key], this.normalizeValues(filters[key], this.fields[key]?.multiple))
-          const { label, name } = this.fields[key]
+          const field = { ...this.fields[key], ...this.formattedFieldsProps?.[key] }
+
+          const value = humanize(field, this.normalizeValues(filters[key], field?.multiple))
+          const { label, name } = field
 
           activeFilters[key] = { label, name, value }
         }
@@ -147,6 +149,18 @@ export default {
       return activeFilters
     },
 
+    formattedFieldsProps () {
+      const fieldsProps = {}
+
+      for (const key in this.fieldsProps) {
+        const decamelizedFieldKey = decamelize(key)
+
+        fieldsProps[decamelizedFieldKey] = { ...this.fieldsProps[key] }
+      }
+
+      return fieldsProps
+    },
+
     fields () {
       return getState.call(this, { entity: this.entity, key: 'filters' })
     },
@@ -166,7 +180,7 @@ export default {
         color: this.filterButtonColor,
         error: this.hasFetchError,
         fields: this.fields,
-        fieldsProps: this.fieldsProps,
+        fieldsProps: this.formattedFieldsProps,
         loading: this.isFetching,
 
         onClear: this.clearFilters,
@@ -216,7 +230,8 @@ export default {
 
   methods: {
     clearFilters () {
-      const { filters, ...query } = this.mx_context
+      const { filters } = this.mx_context
+      const query = { ...this.$route.query }
       const activeFilters = {
         ...filters,
         ...this.filters
@@ -298,6 +313,10 @@ export default {
         search: this.search || undefined
       }
 
+      for (const key in query) {
+        if (!query[key]) delete query[key]
+      }
+
       this.hideFiltersMenu()
       this.updateCurrentFilters()
       this.updateRouteQuery(query)

package/src/components/list-view/QasListView.vue

@@ -16,9 +16,7 @@
 
         <div v-else-if="!mx_isFetching">
           <slot name="empty-results">
-            <div class="q-my-lg text-body1 text-grey-7">
-              Não há itens para serem exibidos.
-            </div>
+            <qas-empty-result-text />
           </slot>
         </div>
 

package/src/components/search-box/QasSearchBox.vue

@@ -14,10 +14,7 @@
       </slot>
 
       <slot v-if="showEmptyResult" name="empty-result">
-        <div class="absolute-center text-center">
-          <q-icon class="q-mb-sm text-center" color="primary" name="sym_r_search" size="38px" />
-          <div>{{ emptyResultText }}</div>
-        </div>
+        <qas-empty-result-text class="q-mt-md" />
       </slot>
 
       <q-inner-loading :showing="showInnerLoading">
@@ -50,11 +47,6 @@ export default {
       type: String
     },
 
-    emptyResultText: {
-      default: 'Não há resultados disponíveis.',
-      type: String
-    },
-
     fuseOptions: {
       default: () => ({}),
       type: Object
@@ -228,7 +220,9 @@ export default {
       // Se tiver erro no primeiro fetch, retorna o "done" na proxima.
       if (((this.mx_hasFetchError && !this.mx_hasFilteredOptions) || this.hasNoOptionsOnFirstFetch)) return done()
 
-      if (!this.mx_hasFilteredOptions && !this.mx_search) {
+      const canMakeFirstFetch = this.mx_fetchCount === 0 && this.mx_hasFilteredOptions
+
+      if ((!this.mx_hasFilteredOptions || canMakeFirstFetch) && !this.mx_search) {
         await this.mx_setFetchOptions()
         return done()
       }

package/src/components/search-box/QasSearchBox.yml

@@ -9,11 +9,6 @@ props:
     default: 100px
     type: String
 
-  empty-result-text:
-    desc: Define o texto dentro do box quando a lista está vazia.
-    default: Não há resultados disponíveis.
-    type: String
-
   entity:
     desc: Entidade enviada para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
     default: ''

package/src/components/single-view/QasSingleView.vue

@@ -8,10 +8,7 @@
       <slot />
     </template>
 
-    <div v-else-if="!mx_isFetching" class="q-my-xl text-center">
-      <q-icon class="q-mb-sm text-center" color="grey-7" name="sym_r_search" size="38px" />
-      <div class="text-grey-7">Nenhum item encontrado.</div>
-    </div>
+    <qas-empty-result-text v-else-if="!mx_isFetching" class="q-my-xl" />
 
     <footer v-if="mx_hasFooterSlot">
       <slot name="footer" />

package/src/css/variables/typography.scss

@@ -10,7 +10,7 @@
 // headings
 $h1: (
   size: 3rem,
-  line-height: 3rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 800,
   margin: 0
@@ -18,7 +18,7 @@ $h1: (
 
 $h2: (
   size: 2rem,
-  line-height: 2rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 700,
   margin: 0
@@ -26,7 +26,7 @@ $h2: (
 
 $h3: (
   size: 1.5rem,
-  line-height: 1.5rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 700,
   margin: 0
@@ -34,7 +34,7 @@ $h3: (
 
 $h4: (
   size: 1.125rem,
-  line-height: 1.125rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 600,
   margin: 0
@@ -42,7 +42,7 @@ $h4: (
 
 $h5: (
   size: 1rem,
-  line-height: 1rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 600,
   margin: 0
@@ -50,7 +50,7 @@ $h5: (
 
 $h6: (
   size: 0.875rem,
-  line-height: 0.875rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 600,
   margin: 0
@@ -59,14 +59,14 @@ $h6: (
 // subtitles
 $subtitle1: (
   size: 1rem,
-  line-height: 1rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 600
 );
 
 $subtitle2: (
   size: 0.875rem,
-  line-height: 0.875rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 600
 );
@@ -74,14 +74,14 @@ $subtitle2: (
 // body
 $body1: (
   size: 1rem,
-  line-height: 1rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 400
 );
 
 $body2: (
   size: 0.875rem,
-  line-height: 0.875rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 400
 );
@@ -89,7 +89,7 @@ $body2: (
 // overline
 $overline: (
   size: 0.875rem,
-  line-height: 0.875rem,
+  line-height: 140%,
   letter-spacing: 0.25rem,
   weight: 600
 );
@@ -97,7 +97,7 @@ $overline: (
 // caption
 $caption: (
   size: 0.75rem,
-  line-height: 0.75rem,
+  line-height: 140%,
   letter-spacing: 0,
   weight: 400
 );

package/src/mixins/search-filter.js

@@ -102,14 +102,21 @@ export default {
 
       this.mx_fromSearch = !!search
 
-      await this.mx_setFetchOptions()
+      const options = await this.mx_fetchOptions()
+
+      this.mx_resetOptions()
+
+      this.mx_filteredOptions.push(...options)
 
       if (this.mx_cachedOptions.length && !search) this.mx_setInitialCachedOptions()
     },
 
-    mx_resetFilter (search) {
+    mx_resetOptions () {
       this.mx_filteredOptions = []
       this.mx_foundDuplicatedOptions = []
+    },
+
+    mx_resetFilter (search) {
       this.mx_search = search
       this.mx_pagination = {
         page: 1,

package/src/vue-plugin.js

@@ -19,6 +19,7 @@ import QasDebugger from './components/debugger/QasDebugger.vue'
 import QasDelete from './components/delete/QasDelete.vue'
 import QasDialog from './components/dialog/QasDialog.vue'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
+import QasEmptyResultText from './components/empty-result-text/QasEmptyResultText.vue'
 import QasField from './components/field/QasField.vue'
 import QasSearchInput from './components/search-input/QasSearchInput.vue'
 import QasFilters from './components/filters/QasFilters.vue'
@@ -101,6 +102,7 @@ function install (app) {
   app.component('QasDelete', QasDelete)
   app.component('QasDialog', QasDialog)
   app.component('QasDialogRouter', QasDialogRouter)
+  app.component('QasEmptyResultText', QasEmptyResultText)
   app.component('QasField', QasField)
   app.component('QasSearchInput', QasSearchInput)
   app.component('QasFilters', QasFilters)
@@ -184,6 +186,7 @@ export {
   QasDelete,
   QasDialog,
   QasDialogRouter,
+  QasEmptyResultText,
   QasField,
   QasSearchInput,
   QasFilters,