@bildvitta/quasar-ui-asteroid 3.5.0-beta.2 → 3.5.0-beta.4

package/package.json

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

package/src/components/app-bar/QasAppBar.vue

@@ -1,72 +1,32 @@
 <template>
-  <q-header class="bg-white qas-app-bar shadow-2" height-hint="70">
-    <q-toolbar class="q-px-md qas-app-bar__toolbar" color="bg-white">
-      <q-ajax-bar color="white" position="top" size="2px" />
-
-      <qas-btn v-if="$qas.screen.untilLarge" color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
-
-      <q-toolbar-title class="flex" :class="toolbarTitleClass">
-        <div class="cursor-pointer" @click="goToRoot">
-          <img v-if="brand" :alt="title" class="q-mr-sm qas-app-bar__brand" :src="brand">
-          <span v-if="showTitle" class="text-bold text-grey-9 text-subtitle1 text-uppercase">{{ title }}</span>
-          <q-badge v-if="hasDevelopmentBadge" align="middle" class="q-ml-sm" color="negative" :label="developmentBadgeLabel" />
-        </div>
+  <q-header class="qas-app-bar shadow-2" height-hint="56">
+    <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-9">
+      <qas-btn color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
+
+      <q-toolbar-title>
+        <router-link class="flex items-center no-wrap text-no-decoration" :to="rootRoute">
+          <img v-if="brand" :alt="title" class="qas-app-bar__brand" :src="brand">
+          <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
+          <q-badge v-if="hasDevelopmentBadge" class="q-ml-sm" color="red" :label="developmentBadgeLabel" />
+        </router-link>
       </q-toolbar-title>
 
-      <div v-if="hasNotifications" class="q-mr-md">
-        <qas-btn class="q-mr-md" dense icon="o_notifications" round unelevated>
-          <q-badge v-if="notifications" color="red" floating>{{ notifications.count }}</q-badge>
-        </qas-btn>
-      </div>
-
-      <div class="items-center no-wrap q-gutter-md row">
-        <slot name="tools" />
-
-        <div v-if="hasUser" class="cursor-pointer items-center no-wrap qas-app-bar__user-content rounded-borders row text-grey-9" :title="userName">
-          <qas-avatar color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="userName" />
-
-          <div class="q-ml-md q-pr-sm qas-app-bar__user-data qs-lh-lg">
-            <div class="ellipsis q-mb-xs qas-app-bar__user-name">{{ userName }}</div>
-            <div class="ellipsis qas-app-bar__user-email">{{ user.email }}</div>
-          </div>
-
-          <q-menu anchor="bottom end" class="shadow-2 text-grey-9" max-height="400px" :offset="[0, 5]" self="top end">
-            <div class="qas-app-bar__user-menu">
-              <div class="q-pa-lg text-center">
-                <button class="unset" @click="goToProfile">
-                  <qas-avatar :image="user.photo" size="145px" :title="userName" />
-                </button>
-
-                <div class="ellipsis q-mt-lg qas-app-bar__user-name qs-lh-sm">{{ userName }}</div>
-                <div class="ellipsis q-mt-xs">{{ user.email }}</div>
-
-                <div class="q-mt-sm">
-                  <qas-btn flat icon="o_edit" label="Editar" :to="user.to" />
-                </div>
-
-                <div class="q-mt-sm">
-                  <qas-btn v-close-popup class="q-px-lg q-py-xs" dense icon="o_exit_to_app" label="Sair" outline @click="signOut" />
-                </div>
-
-                <slot name="user" :user="user" />
-              </div>
-            </div>
-          </q-menu>
-        </div>
-      </div>
+      <slot v-if="hasUser" name="user" :user="user">
+        <qas-app-user :menu-props="appUserMenuProps" :user="user" @sign-out="signOut" />
+      </slot>
     </q-toolbar>
   </q-header>
 </template>
 
 <script>
-import QasAvatar from '../avatar/QasAvatar.vue'
+import QasAppUser from '../app-user/QasAppUser.vue'
 import QasBtn from '../btn/QasBtn.vue'
 
 export default {
   name: 'QasAppBar',
 
   components: {
-    QasAvatar,
+    QasAppUser,
     QasBtn
   },
 
@@ -76,16 +36,16 @@ export default {
       type: String
     },
 
-    title: {
-      type: String,
-      default: ''
-    },
-
     notifications: {
       default: () => ({}),
       type: Object
     },
 
+    title: {
+      required: true,
+      type: String
+    },
+
     user: {
       default: () => ({}),
       require: true,
@@ -102,6 +62,14 @@ export default {
   },
 
   computed: {
+    appUserMenuProps () {
+      return {
+        anchor: 'bottom end',
+        offset: [0, 5],
+        self: 'top end'
+      }
+    },
+
     developmentBadgeLabel () {
       const hosts = {
         localhost: 'Local',
@@ -123,40 +91,16 @@ export default {
       return !!this.developmentBadgeLabel
     },
 
-    hasNotifications () {
-      return !!Object.keys(this.notifications).length
-    },
-
-    showTitle () {
-      return this.title && !this.brand
-    },
-
     hasUser () {
       return !!Object.keys(this.user).length
     },
 
-    userName () {
-      return this.user.name || this.user.givenName
-    },
-
-    toolbarTitleClass () {
-      return !this.$qas.screen.untilLarge && 'q-pl-none'
+    rootRoute () {
+      return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
     }
   },
 
   methods: {
-    goToProfile () {
-      return this.$router.push(this.user.to)
-    },
-
-    goToRoot () {
-      const hasRoot = this.$router.hasRoute('Root')
-
-      this.$router.push({
-        ...(hasRoot ? { name: 'Root' } : { path: '/' })
-      })
-    },
-
     signOut () {
       this.$emit('sign-out')
     },
@@ -171,39 +115,11 @@ export default {
 <style lang="scss">
 .qas-app-bar {
   &__toolbar {
-    height: 70px;
+    height: 56px;
   }
 
   &__brand {
     height: 24px;
-    position: relative;
-    top: 4px;
-  }
-
-  &__user-content {
-    width: 230px;
-  }
-
-  &__user-data {
-    max-width: 180px;
-  }
-
-  &__user-name {
-    font-weight: 600;
-  }
-
-  &__user-menu {
-    width: 260px;
-  }
-
-  @media (max-width: $breakpoint-xs) {
-    &__user-content {
-      width: auto;
-    }
-
-    &__user-data {
-      display: none;
-    }
   }
 }
 </style>

package/src/components/app-bar/QasAppBar.yml

@@ -1,20 +1,25 @@
 type: component
 
 meta:
-  desc: Cria um seção para alertar sobre um conteúdo.
+  desc: Gerencia a barra superior da aplicação
 
 props:
+  brand:
+    desc: Path do logotipo.
+    type: String
+
   notifications:
-    desc: Ícone de notificação que fica ao lado do menu de usuário.
+    desc: Lista com as notificações do usuário.
     type: Object
     default: {}
 
   title:
-    desc: Título do header, normalmente usado como título da aplicação.
+    desc: Título da aplicação.
+    required: true
     type: String
 
   user:
-    desc: Informações de usuário para ser usado no menu.
+    desc: Informações do usuário.
     type: Object
     default: {}
     examples: [
@@ -29,16 +34,13 @@ props:
 
 slots:
   user:
-    desc: Slot para acessar o menu de usuário
+    desc: Slot para acessar o menu de usuário.
     scope:
       user:
-        desc: Informações de usuário para ser usado no menu, valor vai depender da prop "user".
+        desc: Informações do usuário, recebe o objeto "user".
         type: Object
         default: {}
 
-  tools:
-    desc: Slot para acessar o header após o elemento de notificações.
-
 events:
   '@sign-out -> function()':
     desc: Dispara quando o botão de "sair" é clicado.

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

@@ -1,23 +1,30 @@
 <template>
-  <q-drawer v-model="model" :behavior="behavior" bordered class="qas-app-menu" :width="288">
-    <div class="column flex full-height justify-between no-wrap overflow-x-hidden">
-      <div class="q-mt-lg">
-        <div v-if="displayModuleSection" class="q-mb-lg q-mx-md">
-          <div class="q-mb-sm text-caption text-grey-7 text-weight-medium">
-            Você está em:
-          </div>
-
-          <qas-select v-model="module" :options="defaultModules" @update:model-value="redirectHandler(currentModelOption)" />
+  <q-drawer v-model="model" :behavior="behavior" class="qas-app-menu" :width="280">
+    <div class="column full-height justify-between">
+      <div class="full-width">
+        <!-- Brand -->
+        <div v-if="!$qas.screen.untilLarge" class="q-pt-xl q-px-lg">
+          <router-link class="block q-toolbar__title relative-position text-no-decoration" :to="rootRoute">
+            <img v-if="brand" :alt="title" class="full-width" :src="brand">
+            <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
+            <q-badge color="red" floating :label="developmentBadgeLabel" />
+          </router-link>
         </div>
 
-        <q-list v-if="items.length" class="q-mb-lg text-grey-9">
+        <!-- Module -->
+        <div v-if="displayModuleSection" class="q-mt-xl q-px-lg qas-app-menu__module">
+          <qas-select v-model="module" borderless class="q-py-xs rounded-borders shadow-2" dense input-class="q-px-md" :options="defaultModules" :outlined="false" :use-search="false" @update:model-value="redirectHandler(currentModelOption)" />
+        </div>
+
+        <!-- Menu -->
+        <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-9">
           <template v-for="(menuItem, index) in items">
-            <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content">
-              <q-item class="items-center">
+            <div v-if="hasChildren(menuItem)" :key="`children-${index}`">
+              <q-item class="items-center q-pb-none q-pt-md text-weight-bold">
                 {{ menuItem.label }}
               </q-item>
 
-              <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" class="qas-app-menu__children qas-app-menu__item-children" :to="getRouterRedirect(menuChildItem)">
+              <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" :to="getRouterRedirect(menuChildItem)">
                 <q-item-section v-if="menuChildItem.icon" avatar>
                   <q-icon :name="menuChildItem.icon" />
                 </q-item-section>
@@ -28,7 +35,7 @@
               </q-item>
             </div>
 
-            <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
+            <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" :to="getRouterRedirect(menuItem)">
               <q-item-section v-if="menuItem.icon" avatar>
                 <q-icon :name="menuItem.icon" />
               </q-item-section>
@@ -40,17 +47,32 @@
           </template>
         </q-list>
       </div>
+
+      <!-- User -->
+      <div v-if="showUser" class="full-width q-pb-lg q-px-lg">
+        <qas-app-user avatar-size="48px" :user="user" @sign-out="signOut" />
+      </div>
     </div>
   </q-drawer>
 </template>
 
 <script>
+import QasAppUser from '../app-user/QasAppUser.vue'
 import { isLocalDevelopment } from '../../helpers'
 
 export default {
   name: 'QasAppMenu',
 
+  components: {
+    QasAppUser
+  },
+
   props: {
+    brand: {
+      default: '',
+      type: String
+    },
+
     items: {
       default: () => [],
       type: Array
@@ -61,18 +83,30 @@ export default {
       type: Boolean
     },
 
+    modules: {
+      default: () => [],
+      type: Array
+    },
+
+    notifications: {
+      default: () => ({}),
+      type: Object
+    },
+
     title: {
       default: '',
+      required: true,
       type: String
     },
 
-    modules: {
-      default: () => [],
-      type: Array
+    user: {
+      default: () => ({}),
+      require: true,
+      type: Object
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: ['sign-out', 'update:modelValue'],
 
   data () {
     return {
@@ -81,6 +115,19 @@ export default {
   },
 
   computed: {
+    behavior () {
+      return this.$qas.screen.untilLarge ? 'mobile' : 'desktop'
+    },
+
+    currentModelOption () {
+      return this.defaultModules.find(module => module?.value === this.module)
+    },
+
+    currentModule () {
+      const hostname = window.location.hostname
+      return this.defaultModules.find(module => module?.value.includes(hostname))?.value
+    },
+
     defaultModules () {
       if (!isLocalDevelopment()) return this.modules
 
@@ -88,7 +135,7 @@ export default {
       const { host, protocol } = window.location
       const value = `${protocol}//${host}`
 
-      // if app is in development mode (local) it's added a default module
+      // Add a default module called "Localhost" when app is running in local development.
       defaultModules.unshift({
         label: `Localhost ${this.title ? `(${this.title})` : ''}`,
         value
@@ -97,32 +144,47 @@ export default {
       return defaultModules
     },
 
-    model: {
-      get () {
-        return this.modelValue
-      },
+    developmentBadgeLabel () {
+      const hosts = {
+        localhost: 'Local',
+        '.dev.': 'Develop'
+      }
 
-      set (value) {
-        return this.$emit('update:modelValue', value)
+      if (process.env.DEV) {
+        return hosts.localhost
       }
-    },
 
-    currentModelOption () {
-      return this.defaultModules.find(module => module?.value === this.module)
+      const current = Object.keys(hosts).find(
+        host => location.hostname.includes(host)
+      )
+
+      return current ? hosts[current] : ''
     },
 
     displayModuleSection () {
       return this.defaultModules.length
     },
 
-    currentModule () {
-      const hostname = window.location.hostname
+    hasDevelopmentBadge () {
+      return !!this.developmentBadgeLabel
+    },
 
-      return this.defaultModules.find(module => module?.value.includes(hostname))?.value
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
     },
 
-    behavior () {
-      return this.$qas.screen.untilLarge ? 'mobile' : 'desktop'
+    rootRoute () {
+      return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
+    },
+
+    showUser () {
+      return this.hasUser && !this.$qas.screen.untilLarge
     }
   },
 
@@ -131,42 +193,50 @@ export default {
       handler (value) {
         this.module = value
       },
+
       immediate: true
     }
   },
 
   methods: {
-    hasChildren ({ children }) {
-      return !!(children || []).length
-    },
-
-    redirectHandler ({ value }) {
-      if (!value.includes(window.location.host)) {
-        window.location.href = value
-      }
+    getNormalizedPath (path) {
+      return path.split('/').filter(Boolean)?.[0]
     },
 
     getPathFromObject ({ path, name }) {
       if (path) return this.getNormalizedPath(path)
 
       const resolvedRoute = this.$router.resolve({ name })
-
       return this.getNormalizedPath(resolvedRoute.path)
     },
 
-    getNormalizedPath (path) {
-      return path.split('/').filter(Boolean)?.[0]
-    },
-
     getRouterRedirect ({ to }) {
       return to || ''
     },
 
+    hasChildren ({ children }) {
+      return !!(children || []).length
+    },
+
+    hasUser () {
+      return !!Object.keys(this.user).length
+    },
+
     isActive ({ to }) {
       const currentPath = this.getNormalizedPath(this.$route.path)
       const itemPath = typeof to === 'string' ? this.getNormalizedPath(to) : this.getPathFromObject(to)
 
       return currentPath === itemPath
+    },
+
+    redirectHandler ({ value }) {
+      if (!value.includes(window.location.host)) {
+        window.location.href = value
+      }
+    },
+
+    signOut () {
+      this.$emit('sign-out')
     }
   }
 }
@@ -174,28 +244,33 @@ export default {
 
 <style lang="scss">
 .qas-app-menu {
-  .q-item + .q-item {
-    margin-top: var(--qas-spacing-xs);
-  }
-
-  &__children.q-item {
-    padding-left: var(--qas-spacing-xl);
-  }
+  // Workaround para alterar o padding interno do QSelect sem influenciar na caixa de opções.
+  &__module {
+    .q-field__native {
+      padding-left: var(--qas-spacing-md);
+    }
 
-  &__item-children.q-item + &__item-children.q-item {
-    margin-top: var(--qas-spacing-sm);
+    .q-field__append {
+      margin-right: var(--qas-spacing-sm);
+    }
   }
 
-  &__content + &__content {
-    margin-top: var(--qas-spacing-md);
+  &__menu .q-item {
+    padding-left: var(--qas-spacing-lg);
   }
 
-  &__content + &__item {
-    margin-top: var(--qas-spacing-md);
+  // User
+  .qas-app-user__data {
+    line-height: 1.25;
   }
 
-  &__item + &__content {
-    margin-top: var(--qas-spacing-md);
+  // Media: untilLarge
+  @media (min-width: $breakpoint-sm-max) {
+    // Menu
+    &__menu {
+      max-height: calc(100vh - 310px);
+      overflow-x: auto;
+    }
   }
 }
 </style>

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

@@ -4,6 +4,9 @@ meta:
   desc: Menu lateral.
 
 props:
+  brand:
+    desc: Path do logotipo.
+    type: String
   items:
     desc: Itens do menu.
     type: Array
@@ -19,11 +22,43 @@ props:
     type: Array
     default: []
 
+  notifications:
+    desc: Lista com as notificações do usuário.
+    type: Object
+    default: {}
+
   title:
     desc: Título que vai ficar no label do select de módulos.
+    required: true
     type: String
 
+  user:
+    desc: Informações do usuário.
+    type: Object
+    default: {}
+    examples: [
+      "
+      {
+        photo: 'minha-img',
+        name: 'Eduardo Lima',
+        email: 'eduardolima@gmail.com'
+      }
+      "
+    ]
+
+slots:
+  user:
+    desc: Slot para acessar o menu de usuário.
+    scope:
+      user:
+        desc: Informações do usuário, recebe o objeto "user".
+        type: Object
+        default: {}
+
 events:
+  '@sign-out -> function()':
+    desc: Dispara quando o botão de "sair" é clicado.
+
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.
     params:

package/src/components/app-user/QasAppUser.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row">
+    <div class="relative-position">
+      <qas-avatar color="white" dark :image="user.photo" rounded :size="avatarSize" text-color="primary" :title="userName" />
+      <q-badge v-if="hasNotifications" color="red" floating>{{ notifications.count }}</q-badge>
+    </div>
+
+    <div class="ellipsis qas-app-user__data">
+      <div class="ellipsis qas-app-user__name text-grey-9">{{ userName }}</div>
+      <div class="ellipsis qas-app-user__email text-grey-8">{{ user.email }}</div>
+    </div>
+
+    <q-menu class="shadow-2 text-grey-9" max-height="400px" v-bind="menuProps">
+      <div class="q-pb-sm q-pt-md q-px-md qas-app-user__menu">
+        <qas-avatar class="q-mb-md" :image="user.photo" size="96px" :title="userName" />
+
+        <div class="ellipsis qas-app-user__menu-name">{{ userName }}</div>
+        <div class="ellipsis">{{ user.email }}</div>
+
+        <q-list class="q-mt-sm">
+          <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="user.to">
+            <q-item-section avatar>
+              <q-icon name="o_person" size="20px" />
+            </q-item-section>
+
+            <q-item-section>Editar</q-item-section>
+          </q-item>
+
+          <q-item v-if="hasNotifications" v-close-popup class="qas-app-user__menu-item" clickable>
+            <q-item-section avatar>
+              <q-icon name="o_notifications" size="20px" />
+            </q-item-section>
+
+            <q-item-section>Notificações</q-item-section>
+
+            <q-item-section side>
+              <q-badge color="red">{{ notifications.count }}</q-badge>
+            </q-item-section>
+          </q-item>
+
+          <q-item v-close-popup class="qas-app-user__menu-item" clickable @click="signOut">
+            <q-item-section avatar>
+              <q-icon name="o_logout" size="20px" />
+            </q-item-section>
+
+            <q-item-section>Sair</q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </q-menu>
+  </div>
+</template>
+
+<script>
+import QasAvatar from '../avatar/QasAvatar.vue'
+
+export default {
+  name: 'QasAppUser',
+
+  components: {
+    QasAvatar
+  },
+
+  props: {
+    avatarSize: {
+      default: '36px',
+      type: String
+    },
+
+    menuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    notifications: {
+      default: () => ({}),
+      type: Object
+    },
+
+    user: {
+      default: () => ({}),
+      required: true,
+      type: Object
+    }
+  },
+
+  emits: ['sign-out'],
+
+  computed: {
+    hasNotifications () {
+      return !!Object.keys(this.notifications).length
+    },
+
+    userName () {
+      return this.user.name || this.user.givenName
+    }
+  },
+
+  methods: {
+    signOut () {
+      this.$emit('sign-out')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-app-user {
+  &__data {
+    line-height: 1.1;
+  }
+
+  &__name,
+  &__menu-name {
+    font-weight: 600;
+  }
+
+  &__email {
+    font-size: 0.75rem;
+  }
+
+  &__menu {
+    width: 248px;
+  }
+
+  &__menu-name {
+    font-size: 1.125rem;
+  }
+
+  &__menu-item {
+    min-height: 36px;
+    padding: 0;
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    &__data {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/app-user/QasAppUser.yml

@@ -0,0 +1,29 @@
+type: component
+
+meta:
+  desc: Exibe o avatar e o nome do usuário, ao clicar abre um menu com as opções.
+
+props:
+  notifications:
+    desc: Lista com as notificações do usuário.
+    type: Object
+    default: {}
+
+  user:
+    desc: Informações do usuário.
+    required: true
+    type: Object
+    default: {}
+    examples: [
+      "
+      {
+        photo: 'minha-img',
+        name: 'Eduardo Lima',
+        email: 'eduardolima@gmail.com'
+      }
+      "
+    ]
+
+events:
+  '@sign-out -> function()':
+    desc: Dispara quando o botão de "sair" é clicado.

package/src/components/layout/QasLayout.vue

@@ -1,18 +1,22 @@
 <template>
   <q-layout view="hHh Lpr lFf">
-    <slot name="app-bar">
-      <qas-app-bar v-bind="appBarProps" @toggle-menu="toggleMenuDrawer" />
+    <slot v-if="$qas.screen.untilLarge" name="app-bar">
+      <qas-app-bar v-bind="appBarProps" @sign-out="signOut" @toggle-menu="toggleMenuDrawer" />
     </slot>
 
     <slot name="app-menu">
-      <qas-app-menu v-model="menuDrawer" v-bind="defaultAppMenuProps" />
+      <qas-app-menu :model-value="showMenuDrawer" v-bind="defaultAppMenuProps" @sign-out="signOut" @update:model-value="updateMenuDrawer" />
     </slot>
 
     <slot>
       <q-page-container>
-        <router-view />
+        <q-page padding>
+          <router-view />
+        </q-page>
       </q-page-container>
     </slot>
+
+    <q-ajax-bar color="primary" position="bottom" size="2px" />
   </q-layout>
 </template>
 
@@ -45,42 +49,39 @@ export default {
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: ['sign-out', 'update:modelValue'],
 
   data () {
     return {
-      menuDrawer: true
+      menuDrawer: false
     }
   },
 
   computed: {
     defaultAppMenuProps () {
       return {
-        ...this.appMenuProps,
-        title: this.appBarProps?.title
+        ...this.appBarProps,
+        ...this.appMenuProps
       }
-    }
-  },
-
-  watch: {
-    modelValue: {
-      handler (value) {
-        if (!this.$qas.screen.untilLarge) return
+    },
 
-        this.menuDrawer = value
-      },
-      immediate: true
+    showMenuDrawer () {
+      return !this.$qas.screen.untilLarge || this.menuDrawer
     }
   },
 
-  mounted () {
-    this.menuDrawer = !this.$qas.screen.untilLarge
-  },
-
   methods: {
+    signOut () {
+      this.$emit('sign-out')
+    },
+
     toggleMenuDrawer () {
-      this.menuDrawer = !this.menuDrawer
-      this.$emit('update:modelValue', this.menuDrawer)
+      this.updateMenuDrawer(!this.menuDrawer)
+    },
+
+    updateMenuDrawer (value) {
+      this.menuDrawer = value
+      this.$emit('update:modelValue', value)
     }
   }
 }

package/src/components/layout/QasLayout.yml

@@ -30,6 +30,9 @@ slots:
     desc: Slot para substituir o "QPageContainer".
 
 events:
+  '@sign-out -> function()':
+    desc: Dispara quando o botão de "sair" é clicado.
+
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.
     params:

package/src/components/select/QasSelect.vue

@@ -66,6 +66,11 @@ export default {
     valueKey: {
       default: '',
       type: String
+    },
+
+    useSearch: {
+      type: Boolean,
+      default: undefined
     }
   },
 
@@ -122,6 +127,9 @@ export default {
     },
 
     hasFuse () {
+      // se for "undefined" (default) cai na logica por quantidade da option
+      if (this.useSearch === false) return false
+
       /*
       * quantidade de option que precisa ter para o fuse funcionar automaticamente
       * sem necessidade de passar prop manualmente

package/src/index.scss

@@ -9,7 +9,7 @@ $accent: var(--q-accent);
 
 // Asteroid variables
 :root {
-  --qas-background-color: #f5f5f5;
+  --qas-background-color: #fbfbfb;
   --qas-generic-border-radius: 8px;
 }
 

package/src/vue-plugin.js

@@ -3,6 +3,7 @@ import QasActionsMenu from './components/actions-menu/QasActionsMenu.vue'
 import QasAlert from './components/alert/QasAlert.vue'
 import QasAppBar from './components/app-bar/QasAppBar.vue'
 import QasAppMenu from './components/app-menu/QasAppMenu.vue'
+import QasAppUser from './components/app-user/QasAppUser.vue'
 import QasAvatar from './components/avatar/QasAvatar.vue'
 import QasBox from './components/box/QasBox.vue'
 import QasBreakline from './components/breakline/QasBreakline.vue'
@@ -75,6 +76,7 @@ function install (app) {
   app.component('QasAlert', QasAlert)
   app.component('QasAppBar', QasAppBar)
   app.component('QasAppMenu', QasAppMenu)
+  app.component('QasAppUser', QasAppUser)
   app.component('QasAvatar', QasAvatar)
   app.component('QasBox', QasBox)
   app.component('QasBreakline', QasBreakline)
@@ -148,6 +150,7 @@ export {
   QasAlert,
   QasAppBar,
   QasAppMenu,
+  QasAppUser,
   QasAvatar,
   QasBox,
   QasBreakline,