@bildvitta/quasar-ui-asteroid 3.8.0-beta.5 → 3.8.0-beta.7

package/package.json

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

package/src/components/app-menu/QasAppMenu.vue

@@ -52,6 +52,10 @@
                     </q-item-label>
                   </q-item-section>
                 </q-item>
+
+                <div v-if="hasSeparator(index)" class="qas-app-menu__label" :class="spacedItemClass">
+                  <q-separator spaced />
+                </div>
               </div>
 
               <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
@@ -330,6 +334,10 @@ export default {
       return !!(children || []).length
     },
 
+    hasSeparator (index) {
+      return !!this.items[index + 1]
+    },
+
     hasUser () {
       return !!Object.keys(this.user).length
     },
@@ -421,34 +429,9 @@ export default {
     padding-right: var(--qas-spacing-xl) !important;
   }
 
-  &__content .q-item {
-    // padding-top: 0;
-  }
-
-  &__content + &__content {
-    position: relative;
-    transition: left 120ms, right 120ms;
-
-    &--spaced::before {
-      left: var(--qas-spacing-xl) !important;
-      right: var(--qas-spacing-xl) !important;
-    }
-
-    &::before {
-      background-color: $separator-color;
-      content: '';
-      height: 1px;
-      left: var(--qas-spacing-md);
-      position: absolute;
-      right: var(--qas-spacing-md);
-      top: calc(var(--qas-spacing-xs) * -1);
-      transition: left 120ms, right 120ms;
-    }
-  }
-
   &__content + &__content,
-  &__item + &__content,
-  &__content + &__item {
+  &__content + &__item,
+  &__item + &__content {
     margin-top: var(--qas-spacing-sm);
   }
 

package/src/components/filters/QasFilters.vue

@@ -16,7 +16,7 @@
 
                   <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" />
+                      <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="filters" v-bind="filterButtonProps" />
                     </slot>
                   </template>
                 </template>
@@ -28,7 +28,7 @@
 
       <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" />
+          <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="filters" v-bind="filterButtonProps" />
         </slot>
       </div>
 
@@ -257,6 +257,7 @@ export default {
         this.filters = {}
       }
 
+      this.hideFiltersMenu()
       this.updateCurrentFilters()
       this.updateRouteQuery(query)
     },
@@ -316,6 +317,7 @@ export default {
         search: this.search || undefined
       }
 
+      this.hideFiltersMenu()
       this.updateCurrentFilters()
       this.updateRouteQuery(query)
     },
@@ -324,6 +326,10 @@ export default {
       return Array.isArray(value) ? value.join(', ') : value
     },
 
+    hideFiltersMenu () {
+      this.$refs.filtersButton?.hideMenu()
+    },
+
     removeFilter ({ name }) {
       const query = { ...this.$route.query }
 

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

@@ -1,6 +1,6 @@
 <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">
+    <q-menu ref="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>
@@ -84,6 +84,12 @@ export default {
         return this.$emit('update:modelValue', value)
       }
     }
+  },
+
+  methods: {
+    hideMenu () {
+      this.$refs.menu.hide()
+    }
   }
 }
 </script>