@bildvitta/quasar-ui-asteroid 3.5.0-beta.1 → 3.5.0-beta.11

package/package.json

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

package/src/components/actions-menu/QasActionsMenu.vue

@@ -120,7 +120,7 @@ export default {
     },
 
     hasMoreThanOneAction () {
-      return Object.keys(this.actions || {}).length > 1
+      return Object.keys(this.list || {}).length + Number(this.hasDelete) > 1
     }
   },
 

package/src/components/alert/QasAlert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="model" class="q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
+  <div v-if="model" class="bg-white q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
     <qas-btn class="absolute-top-right q-mr-md q-mt-sm" :color="color" dense flat icon="o_close" rounded @click="close" />
 
     <div class="q-gutter-md q-mr-lg">
@@ -58,10 +58,7 @@ export default {
 
   computed: {
     classes () {
-      return {
-        [`text-${this.color}`]: true,
-        [`bg-${this.color}-contrast`]: ['primary', 'secondary'].includes(this.color)
-      }
+      return `text-${this.color}`
     }
   },
 

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 v-if="hasDevelopmentBadge" 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 qas-app-menu__select 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,37 @@ export default {
 
 <style lang="scss">
 .qas-app-menu {
-  .q-item + .q-item {
-    margin-top: var(--qas-spacing-xs);
-  }
+  // 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);
+    }
 
-  &__children.q-item {
-    padding-left: var(--qas-spacing-xl);
+    .q-field__append {
+      margin-right: var(--qas-spacing-sm);
+    }
   }
 
-  &__item-children.q-item + &__item-children.q-item {
-    margin-top: var(--qas-spacing-sm);
+  &__menu .q-item {
+    padding-left: var(--qas-spacing-lg);
   }
 
-  &__content + &__content {
-    margin-top: var(--qas-spacing-md);
+  &__select {
+    border-radius: 4px;
   }
 
-  &__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: