@bildvitta/quasar-ui-asteroid 3.10.0-beta.4 → 3.10.0-beta.6

package/package.json

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

package/src/components/filters/QasFilters.vue

@@ -229,7 +229,7 @@ export default {
   },
 
   methods: {
-    clearFilters () {
+    async clearFilters () {
       const { filters } = this.mx_context
       const query = { ...this.$route.query }
       const activeFilters = {
@@ -254,8 +254,10 @@ export default {
       }
 
       this.hideFiltersMenu()
+
+      await this.updateRouteQuery(query)
+
       this.updateCurrentFilters()
-      this.updateRouteQuery(query)
     },
 
     clearSearch () {
@@ -302,7 +304,7 @@ export default {
       }
     },
 
-    filter (external) {
+    async filter (external) {
       const { filters, page, ...context } = this.mx_context
 
       const query = {
@@ -318,8 +320,10 @@ export default {
       }
 
       this.hideFiltersMenu()
+
+      await this.updateRouteQuery(query)
+
       this.updateCurrentFilters()
-      this.updateRouteQuery(query)
     },
 
     getChipValue (value) {
@@ -330,14 +334,15 @@ export default {
       this.$refs.filtersButton?.hideMenu()
     },
 
-    removeFilter ({ name }) {
+    async removeFilter ({ name }) {
       const query = { ...this.$route.query }
 
       delete query[name]
       delete this.filters[name]
 
+      await this.updateRouteQuery(query)
+
       this.updateCurrentFilters()
-      this.updateRouteQuery(query)
     },
 
     updateCurrentFilters () {
@@ -349,18 +354,13 @@ export default {
       this.$emit('update:currentFilters', this.currentFilters)
     },
 
-    updateRouteQuery (query) {
-      this.useUpdateRoute && this.$router.push({ query })
+    async updateRouteQuery (query) {
+      this.useUpdateRoute && await this.$router.push({ query })
     },
 
     updateValues () {
       this.setSearch()
-
-      const { filters } = this.mx_context
-
-      for (const key in filters) {
-        this.filters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
-      }
+      this.setFilters()
     },
 
     normalizeValues (value, isMultiple) {
@@ -373,7 +373,7 @@ export default {
       if (!this.useUpdateRoute) return
 
       const watchOnce = this.$watch('fields', values => {
-        if (Object.keys(values).length) {
+        if (Object.keys(values || {}).length) {
           this.updateValues()
           this.updateCurrentFilters()
           watchOnce()
@@ -396,6 +396,16 @@ export default {
     setSearch () {
       const { search } = this.mx_context
       this.search = search || ''
+    },
+
+    setFilters () {
+      this.filters = {}
+
+      const { filters } = this.mx_context
+
+      for (const key in filters) {
+        this.filters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
+      }
     }
   }
 }

package/src/components/filters/QasFilters.yml

@@ -4,6 +4,13 @@ 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

package/src/components/nested-fields/QasNestedFields.vue

@@ -1,15 +1,15 @@
 <template>
   <div :id="fieldName" class="qas-nested-fields">
-    <div class="text-left">
-      <qas-label v-if="useSingleLabel" :label="fieldLabel" />
+    <div v-if="useSingleLabel" class="text-left">
+      <qas-label :label="fieldLabel" margin="lg" />
     </div>
 
     <div ref="inputContent">
       <component :is="componentTag" v-bind="componentProps">
         <template v-for="(row, index) in nested" :key="`row-${index}`">
-          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width q-mt-md">
-            <header class="flex items-center q-py-md" :class="headerClasses">
-              <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
+          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width q-mt-md qas-nested-fields__field-item">
+            <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
+              <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" />
               <qas-actions-menu v-if="hasBlockActions(row)" v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
             </header>
 
@@ -290,8 +290,15 @@ export default {
       return this.useFirstInputButton && !this.nested.length
     },
 
+    hasHeader () {
+      return (this.useSingleLabel && !this.useInlineActions) || !this.useSingleLabel
+    },
+
     headerClasses () {
-      return this.useSingleLabel ? 'justify-end' : 'justify-between'
+      return {
+        'justify-end': this.useSingleLabel,
+        'justify-between': !this.useSingleLabel
+      }
     }
   },
 
@@ -463,5 +470,9 @@ export default {
   &__actions {
     height: 56px;
   }
+
+  &__field-item + &__field-item {
+    margin-top: var(--qas-spacing-xl);
+  }
 }
 </style>

package/src/components/uploader/QasUploader.vue

@@ -24,11 +24,15 @@
       </template>
 
       <template #list="scope">
-        <div v-if="hasGalleryCardSection" class="q-col-gutter-lg q-mt-sm row">
+        <div v-if="hasGalleryCardSection(getFilesList(scope.files, scope))" class="q-col-gutter-lg q-mt-sm row">
           <div v-for="(file, key, index) in getFilesList(scope.files, scope)" :key="index" :class="columnClasses">
             <pv-uploader-gallery-card v-bind="getUploaderGalleryCardProps({ key, scope, file, index })" />
           </div>
         </div>
+
+        <div v-else class="q-mt-lg">
+          <qas-empty-result-text />
+        </div>
       </template>
     </q-uploader>
 
@@ -268,12 +272,6 @@ export default {
       return this.$slots['custom-upload']
     },
 
-    hasGalleryCardSection () {
-      return (
-        (this.useObjectModel ? !!Object.keys(this.modelValue).length : !!this.modelValue?.length) || this.hasError
-      )
-    },
-
     hasHeaderSlot () {
       return this.$slots.header
     },
@@ -450,6 +448,10 @@ export default {
       if (entity === this.entity) this.setSavedFiles()
     },
 
+    hasGalleryCardSection (files) {
+      return Object.keys(files).length
+    },
+
     isFailed (file) {
       return file.__status === 'failed'
     },