@bildvitta/quasar-ui-asteroid 3.5.0-beta.0 → 3.5.0-beta.10

package/package.json

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

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

@@ -1,49 +1,45 @@
 <template>
-  <qas-btn class="qas-actions-menu" color="primary" :icon="icon" :label="label" outline padding="md" :use-label-on-small-screen="false">
-    <q-menu class="qas-actions-menu__menu">
-      <q-list class="qas-actions-menu__list" separator>
-        <slot v-for="(item, key) in list" :item="item" :name="key">
-          <q-item :key="key" class="text-primary" clickable v-bind="item.props" @click="onClick(item)">
-            <q-item-section>
-              <div class="flex items-center justify-center q-gutter-x-md">
-                <q-icon :name="item.icon" size="sm" />
+  <div v-if="hasActions">
+    <component :is="component.is" flat v-bind="component.props" :use-label-on-small-screen="useLabelOnSmallScreen" @click="onClick()">
+      <q-menu v-if="hasMoreThanOneAction" auto-close class="q-py-xs">
+        <q-list>
+          <slot v-for="(item, key) in actions" :item="item" :name="key">
+            <component :is="getComponent(key)" v-bind="item.props" :key="key" clickable @click="onClick(item)">
+              <q-item-section avatar>
+                <q-icon :name="item.icon" />
+              </q-item-section>
+
+              <q-item-section>
                 <div>{{ item.label }}</div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </slot>
-
-        <qas-delete v-if="hasDelete" v-bind="deleteProps" class="text-negative" clickable tag="q-item">
-          <q-item-section>
-            <div class="flex items-center justify-center q-gutter-x-sm">
-              <q-icon :name="deleteIcon" size="sm" />
-              <div>{{ deleteLabel }}</div>
-            </div>
-          </q-item-section>
-        </qas-delete>
-      </q-list>
-    </q-menu>
-  </qas-btn>
+              </q-item-section>
+            </component>
+          </slot>
+        </q-list>
+      </q-menu>
+    </component>
+  </div>
 </template>
 
 <script>
 import QasBtn from '../btn/QasBtn.vue'
+import QasDelete from '../delete/QasDelete.vue'
 
 export default {
   name: 'QasActionsMenu',
 
   components: {
-    QasBtn
+    QasBtn,
+    QasDelete
   },
 
   props: {
     icon: {
-      default: 'o_settings',
+      default: 'o_more_vert',
       type: String
     },
 
     label: {
-      default: 'Configurações',
+      default: 'Opções',
       type: String
     },
 
@@ -65,17 +61,79 @@ export default {
     deleteProps: {
       default: () => ({}),
       type: Object
+    },
+
+    useLabelOnSmallScreen: {
+      default: true,
+      type: Boolean
     }
   },
 
   computed: {
+    actions () {
+      return {
+        ...this.list,
+        ...(this.hasDelete && {
+          delete: {
+            icon: this.deleteIcon,
+            label: this.deleteLabel,
+            props: {
+              ...this.deleteProps,
+              tag: this.hasMoreThanOneAction ? 'q-item' : 'qas-btn'
+            }
+          }
+        })
+      }
+    },
+
+    component () {
+      const props = {}
+
+      if (this.hasMoreThanOneAction) {
+        props.label = 'Opções'
+        props.iconRight = this.icon
+        props.textColor = 'dark'
+      } else {
+        props.icon = this.actions[this.firstItemKey]?.icon
+        props.label = this.actions[this.firstItemKey]?.label
+        props.color = 'primary'
+      }
+
+      this.hasDelete && Object.assign(props, this.deleteProps)
+
+      return {
+        is: this.hasMoreThanOneAction || !this.hasDelete ? 'qas-btn' : 'qas-delete',
+        props
+      }
+    },
+
+    firstItemKey () {
+      return Object.keys(this.actions)?.[0]
+    },
+
+    hasActions () {
+      return !!Object.keys(this.actions).length
+    },
+
     hasDelete () {
       return !!Object.keys(this.deleteProps).length
+    },
+
+    hasMoreThanOneAction () {
+      return Object.keys(this.list || {}).length + Number(this.hasDelete) > 1
     }
   },
 
   methods: {
-    onClick (item) {
+    getComponent (key) {
+      return key === 'delete' ? 'qas-delete' : 'q-item'
+    },
+
+    onClick (item = {}) {
+      if (!this.hasMoreThanOneAction) {
+        item = this.actions[this.firstItemKey]
+      }
+
       if (typeof item.handler === 'function') {
         const { handler, ...filtered } = item
         item.handler(filtered)
@@ -84,12 +142,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.qas-actions-menu {
-  &__list {
-    width: 265px;
-    z-index: 1;
-  }
-}
-</style>

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

@@ -21,15 +21,10 @@ props:
 
   icon:
     desc: Ícone do botão.
-    default: o_settings
+    default: o_more_vert
     type: String
     examples: [start, end, between, around, center]
 
-  label:
-    desc: Rotulo do botão.
-    default: Configurações
-    type: String
-
   list:
     desc: Lista de items que vão ser criados dentro do menu de ações.
     default: '{}'
@@ -44,6 +39,11 @@ props:
       }"
     ]
 
+  use-label-on-small-screen:
+    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o "rotulo") for passado via propriedade "label".
+    default: true
+    type: Boolean
+
 slots:
   '[nome-da-chave]':
     desc: 'Slot dinâmico gerado a partir das chaves dentro do objeto da prop "list"'

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.